feat: Spotify Embed

demo/src/pages/index.astro

@@ -14,6 +14,9 @@ import Base from '../layouts/Base.astro';
 		<li>
 			<a href="/youtube"><code>&lt;YouTube/&gt;</code> component examples</a>
 		</li>
+		<li>
+			<a href="/spotify"><code>&lt;Spotify/&gt;</code> component examples</a>
+		</li>
 	</ul>
 	<h2>Other examples</h2>
 	<ul>

demo/src/pages/integration.mdx

@@ -21,3 +21,5 @@ https://twitter.com/astrodotbuild/status/1511750228428435457
 https://vimeo.com/32001208
 
 http://www.youtube.com/watch?v=Hoe-woAhq_k
+
+https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1

demo/src/pages/spotify.astro

@@ -0,0 +1,25 @@
+---
+import { Spotify } from '@astro-community/astro-embed-spotify';
+import Base from '../layouts/Base.astro';
+---
+
+<Base title="Spotify component examples">
+  <h2>Default</h2>
+  <Spotify
+    id="https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1?si=506518b1a71b42c2"
+  />
+
+  <h2>Dark, compact, 80% width</h2>
+  <p>
+    <code
+      >&lt;Spotify dark compact widthPercent="80"
+      id="https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1" /&gt;</code
+    >
+  </p>
+  <Spotify
+    dark
+    compact
+    widthPercent="80"
+    id="https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1"
+  />
+</Base>

packages/astro-embed-integration/package.json

@@ -24,11 +24,12 @@
     "@astro-community/astro-embed-twitter": "^0.5.2",
     "@astro-community/astro-embed-vimeo": "^0.3.1",
     "@astro-community/astro-embed-youtube": "^0.4.1",
+    "@astro-community/astro-embed-spotify": "^0.0.1",
     "@types/unist": "^2.0.0",
     "astro-auto-import": "^0.3.0",
     "unist-util-select": "^4.0.1"
   },
   "peerDependencies": {
     "astro": "^2.0.0 || ^3.0.0-beta"
   }
-}
+}

packages/astro-embed-integration/remark-plugin.ts

@@ -2,11 +2,13 @@ import { Node, select, selectAll } from 'unist-util-select';
 import twitterMatcher from '@astro-community/astro-embed-twitter/matcher';
 import vimeoMatcher from '@astro-community/astro-embed-vimeo/matcher';
 import youtubeMatcher from '@astro-community/astro-embed-youtube/matcher';
+import spotifyMatcher from '@astro-community/astro-embed-spotify/matcher';
 
 const matchers = [
 	[twitterMatcher, 'Tweet'],
 	[vimeoMatcher, 'Vimeo'],
 	[youtubeMatcher, 'YouTube'],
+	[spotifyMatcher, 'Spotify'],
 ] as const;
 export const componentNames = matchers.map(([, name]) => name);
 

packages/astro-embed-spotify/README.md

@@ -0,0 +1,70 @@
+# `@astro-community/astro-embed-spotify`
+
+This package contains a component for embedding Spotify in Astro projects.
+
+## Install
+
+```bash
+npm i @astro-community/astro-embed-spotify
+```
+
+## Usage
+
+### `<Spotify options id={spotifyUrl} />`
+
+The **Spotify** component generates a interactive iframe and supports tracks, albums, artists, podcast episodes, and playlists embeds.
+
+```astro
+---
+import { Spotify } from '@astro-community/astro-embed-spotify';
+---
+
+<Spotify id="https://open.spotify.com/artist/3QVolfxko2UyCOtexhVTli" />
+```
+
+### Options
+
+There are a few options you can use:
+
+`dark = false` - Enable dark mode
+
+`compact = false` - Enable compact sizing
+
+`widthPercent = 100` - Set iframe width in percent
+
+example:
+
+```html
+<Spotify
+  dark
+  compact
+  widthPercent="80"
+  id="https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1"
+/>
+```
+
+### Remark Plugin
+
+```mdx
+{/* <!-- Works with individual tracks, show, albums, artists, podcast episodes, and playlists: --> */}
+
+https://open.spotify.com/album/6XXGJ69eGc1pjZCWcPuKm3
+https://open.spotify.com/artist/3QVolfxko2UyCOtexhVTli
+https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1
+https://open.spotify.com/episode/4UGL97d1NkhUN2wsd2Dzou
+https://open.spotify.com/show/2kiOI0PCB2jXMU0cdqUy4z
+
+{/* <!-- Playlists work with or without usernames: --> */}
+
+https://open.spotify.com/user/username/playlist/37i9dQZF1E4uRSDrLkjaE9
+https://open.spotify.com/playlist/37i9dQZF1E4uRSDrLkjaE9
+
+{/* <!-- With or without HTTPS: --> */}
+
+https://open.spotify.com/episode/4UGL97d1NkhUN2wsd2Dzou
+http://open.spotify.com/episode/4UGL97d1NkhUN2wsd2Dzou
+
+{/* <!-- URLs with extra parameters: --> */}
+
+https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1?si=3qc9p-sGR3es3e8kkP9VFA
+```

packages/astro-embed-spotify/Spotify.astro

@@ -0,0 +1,31 @@
+---
+export interface Props {
+	id: string;
+	dark?: boolean;
+	compact?: boolean;
+	widthPercent?: number;
+}
+const { id, dark = false, compact = false, widthPercent = 100 } = Astro.props;
+
+// values based on Spotify embed generator
+const height = compact ? 152 : 352;
+const theme = dark ? 0 : 1;
+
+const { pathname } = new URL(id);
+let [type, ...params] = pathname.split('/').filter(Boolean);
+type = type === 'user' ? 'playlist' : type;
+const playlistId = params.slice(-1);
+
+const embedUrl = `https://open.spotify.com/embed/${type}/${playlistId}?theme=${theme}`;
+---
+
+<iframe
+	title=`Spotify ${type} Embed`
+	style="border-radius:12px"
+	src={embedUrl}
+	width=`${widthPercent}%`
+	height=`${height}`
+	frameBorder="0"
+	allowfullscreen=""
+	allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+	loading="lazy"></iframe>

packages/astro-embed-spotify/index.ts

@@ -0,0 +1 @@
+export { default as Spotify } from './Spotify.astro';

packages/astro-embed-spotify/matcher.ts

@@ -0,0 +1,14 @@
+// Thanks to eleventy-plugin-embed-everything/spotify
+// https://github.com/gfscott/eleventy-plugin-embed-everything/blob/main/packages/spotify/lib/pattern.js
+const urlPattern =
+	/(?=(\s*))\1(?:<a [^>]*?>)??(?=(\s*))\2(?:https?:)??(?:\/\/)??(?:open\.|www\.)??spotify\.com\/(?:user)??\/??(?:[0-9a-zA-Z]+)??\/??(playlist|track|album|artist|episode|show)\/([0-9a-zA-Z]{22})(?:[^\s<>]*)(?=(\s*))\5(?:<\/a>)??(?=(\s*))\6/g;
+
+/**
+ * Return a Track URL if it matches the pattern.
+ * @param url URL to test
+ * @returns A Track URL or undefined if none matched
+ */
+export default function urlMatcher(url: string): string | undefined {
+	const match = url.match(urlPattern);
+	return match?.[0];
+}

packages/astro-embed-spotify/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@astro-community/astro-embed-spotify",
+  "version": "0.0.1",
+  "description": "Component to easily embed spotify on your Astro site",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./matcher": "./matcher.ts"
+  },
+  "files": [
+    "index.ts",
+    "matcher.ts",
+    "Spotify.astro"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/delucis/astro-embed.git"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/delucis/astro-embed/issues"
+  },
+  "homepage": "https://github.com/delucis/astro-embed/tree/main/packages/astro-embed-spotify#readme",
+  "peerDependencies": {
+    "astro": "^2.0.0 || ^3.0.0-beta"
+  }
+}

packages/astro-embed/index.ts

@@ -1,3 +1,4 @@
 export { Tweet } from '@astro-community/astro-embed-twitter';
 export { YouTube } from '@astro-community/astro-embed-youtube';
 export { Vimeo } from '@astro-community/astro-embed-vimeo';
+export { Spotify } from '@astro-community/astro-embed-spotify';

packages/astro-embed/package.json

@@ -21,7 +21,8 @@
     "embeds",
     "twitter",
     "vimeo",
-    "youtube"
+    "youtube",
+    "spotify"
   ],
   "author": "delucis",
   "license": "MIT",
@@ -33,9 +34,10 @@
     "@astro-community/astro-embed-integration": "^0.6.0",
     "@astro-community/astro-embed-twitter": "^0.5.2",
     "@astro-community/astro-embed-vimeo": "^0.3.1",
-    "@astro-community/astro-embed-youtube": "^0.4.1"
+    "@astro-community/astro-embed-youtube": "^0.4.1",
+    "@astro-community/astro-embed-spotify": "^0.0.1"
   },
   "peerDependencies": {
     "astro": "^2.0.0 || ^3.0.0-beta"
   }
-}
+}