diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro
index 2c0c7368..7ab2aeb7 100644
--- a/demo/src/pages/index.astro
+++ b/demo/src/pages/index.astro
@@ -14,6 +14,9 @@ import Base from '../layouts/Base.astro';
<YouTube/> component examples
+
+ <Spotify/> component examples
+
Other examples
diff --git a/demo/src/pages/integration.mdx b/demo/src/pages/integration.mdx
index 4f6368fe..47e641a8 100644
--- a/demo/src/pages/integration.mdx
+++ b/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
diff --git a/demo/src/pages/spotify.astro b/demo/src/pages/spotify.astro
new file mode 100644
index 00000000..8537fc9c
--- /dev/null
+++ b/demo/src/pages/spotify.astro
@@ -0,0 +1,25 @@
+---
+import { Spotify } from '@astro-community/astro-embed-spotify';
+import Base from '../layouts/Base.astro';
+---
+
+
+ Default
+
+
+ Dark, compact, 80% width
+
+ <Spotify dark compact widthPercent="80"
+ id="https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1" />
+
+
+
diff --git a/packages/astro-embed-integration/package.json b/packages/astro-embed-integration/package.json
index 2a15d197..ec738e03 100644
--- a/packages/astro-embed-integration/package.json
+++ b/packages/astro-embed-integration/package.json
@@ -24,6 +24,7 @@
"@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"
@@ -31,4 +32,4 @@
"peerDependencies": {
"astro": "^2.0.0 || ^3.0.0-beta"
}
-}
\ No newline at end of file
+}
diff --git a/packages/astro-embed-integration/remark-plugin.ts b/packages/astro-embed-integration/remark-plugin.ts
index e6ee2c83..2a62105e 100644
--- a/packages/astro-embed-integration/remark-plugin.ts
+++ b/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);
diff --git a/packages/astro-embed-spotify/README.md b/packages/astro-embed-spotify/README.md
new file mode 100644
index 00000000..fd5d7b6e
--- /dev/null
+++ b/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
+
+### ``
+
+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';
+---
+
+
+```
+
+### 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
+
+```
+
+### Remark Plugin
+
+```mdx
+{/* */}
+
+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
+
+{/* */}
+
+https://open.spotify.com/user/username/playlist/37i9dQZF1E4uRSDrLkjaE9
+https://open.spotify.com/playlist/37i9dQZF1E4uRSDrLkjaE9
+
+{/* */}
+
+https://open.spotify.com/episode/4UGL97d1NkhUN2wsd2Dzou
+http://open.spotify.com/episode/4UGL97d1NkhUN2wsd2Dzou
+
+{/* */}
+
+https://open.spotify.com/track/3d1ZZs7GvwSN43muHqgPh1?si=3qc9p-sGR3es3e8kkP9VFA
+```
diff --git a/packages/astro-embed-spotify/Spotify.astro b/packages/astro-embed-spotify/Spotify.astro
new file mode 100644
index 00000000..05342c7e
--- /dev/null
+++ b/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}`;
+---
+
+
diff --git a/packages/astro-embed-spotify/index.ts b/packages/astro-embed-spotify/index.ts
new file mode 100644
index 00000000..13e39890
--- /dev/null
+++ b/packages/astro-embed-spotify/index.ts
@@ -0,0 +1 @@
+export { default as Spotify } from './Spotify.astro';
diff --git a/packages/astro-embed-spotify/matcher.ts b/packages/astro-embed-spotify/matcher.ts
new file mode 100644
index 00000000..9df1ac90
--- /dev/null
+++ b/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(?:]*?>)??(?=(\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];
+}
diff --git a/packages/astro-embed-spotify/package.json b/packages/astro-embed-spotify/package.json
new file mode 100644
index 00000000..8adc9ba8
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/packages/astro-embed/index.ts b/packages/astro-embed/index.ts
index b40d162e..e89f6a61 100644
--- a/packages/astro-embed/index.ts
+++ b/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';
diff --git a/packages/astro-embed/package.json b/packages/astro-embed/package.json
index 8d800fd6..42bf697c 100644
--- a/packages/astro-embed/package.json
+++ b/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"
}
-}
\ No newline at end of file
+}