Adds an embed component for Spotify

.changeset/every-showers-switch.md

@@ -0,0 +1,7 @@
+---
+'@astro-community/astro-embed-integration': minor
+'@astro-community/astro-embed-spotify': minor
+'astro-embed': minor
+---
+
+Adds Spotify astro-embed component

demo/package.json

@@ -14,6 +14,7 @@
     "@astro-community/astro-embed-gist": "workspace:*",
     "@astro-community/astro-embed-link-preview": "workspace:*",
     "@astro-community/astro-embed-mastodon": "workspace:*",
+    "@astro-community/astro-embed-spotify": "workspace:*",
     "@astro-community/astro-embed-vimeo": "workspace:*",
     "@astro-community/astro-embed-youtube": "workspace:*",
     "@astrojs/mdx": "^5.0.4",

demo/src/pages/index.astro

@@ -36,6 +36,9 @@ import Base from '../layouts/Base.astro';
 		<li>
 			<a href="/gist"><code>&lt;Gist/&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

@@ -29,3 +29,5 @@ https://astro.build/blog/welcome-world/
 https://mastodon.social/@sarah11918/112937553683639459
 
 https://gist.github.com/vasfvitor/1f995c47ee82ae652496622db1e678ea
+
+https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT

demo/src/pages/spotify.astro

@@ -0,0 +1,93 @@
+---
+import { Spotify as Spot } from '@astro-community/astro-embed-spotify';
+import Base from '../layouts/Base.astro';
+---
+
+<Base title="Spotify component examples">
+	<h2>Track — bare type/id string</h2>
+	<p><code>&lt;Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" /&gt;</code></p>
+	<Spot id="track/4cOdK2wGLETKBW3PvgPWqT" />
+
+	<h2>Track — full URL</h2>
+	<p>
+		<code
+			>&lt;Spotify id="https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT"
+			/&gt;</code
+		>
+	</p>
+	<Spot id="https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT" />
+
+	<h2>Album</h2>
+	<p>
+		<code
+			>&lt;Spotify id="https://open.spotify.com/album/6eUW0wxWtzkFdaEFsTJto6"
+			size="full" /&gt;</code
+		>
+	</p>
+	<Spot
+		id="https://open.spotify.com/album/6eUW0wxWtzkFdaEFsTJto6"
+		size="full"
+	/>
+
+	<h2>Playlist</h2>
+	<p>
+		<code
+			>&lt;Spotify id="https://open.spotify.com/playlist/37i9dQZF1DZ06evO05tE88"
+			size="full" theme="#005e3e" /&gt;</code
+		>
+	</p>
+	<Spot
+		id="https://open.spotify.com/playlist/37i9dQZF1DZ06evO05tE88"
+		size="full"
+		theme="#005e3e"
+	/>
+
+	<h2>Podcast episode</h2>
+	<p>
+		<code
+			>&lt;Spotify id="https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5"
+			/&gt;</code
+		>
+	</p>
+	<Spot id="https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5" />
+
+	<h2>Full size player</h2>
+	<p>
+		<code>&lt;Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" size="full" /&gt;</code>
+	</p>
+	<Spot id="track/4cOdK2wGLETKBW3PvgPWqT" size="full" />
+
+	<h2>Custom colour theme</h2>
+	<p>
+		<code
+			>&lt;Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" theme="#005977"
+			artist="Rick Astley" /&gt;</code
+		>
+	</p>
+	<Spot
+		id="track/4cOdK2wGLETKBW3PvgPWqT"
+		theme="#005977"
+		artist="Rick Astley"
+	/>
+
+	<h2>Custom poster image</h2>
+	<p>
+		<code
+			>&lt;Spotify id="track/4cOdK2wGLETKBW3PvgPWqT"
+			poster="https://picsum.photos/id/158/1280/853" /&gt;</code
+		>
+	</p>
+	<Spot
+		id="track/4cOdK2wGLETKBW3PvgPWqT"
+		poster="https://picsum.photos/id/158/1280/853"
+	/>
+
+	<h2>Custom play label</h2>
+	<p>
+		<code
+			>&lt;Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" playLabel="Get Rick
+			Rolled!" /&gt;</code
+		>
+	</p>
+	<Spot id="track/4cOdK2wGLETKBW3PvgPWqT" playLabel="Get Rick Rolled!" />
+</Base>

docs/package.json

@@ -16,6 +16,7 @@
     "@astro-community/astro-embed-gist": "workspace:*",
     "@astro-community/astro-embed-link-preview": "workspace:*",
     "@astro-community/astro-embed-mastodon": "workspace:*",
+    "@astro-community/astro-embed-spotify": "workspace:*",
     "@astro-community/astro-embed-twitter": "workspace:*",
     "@astro-community/astro-embed-vimeo": "workspace:*",
     "@astro-community/astro-embed-youtube": "workspace:*",

docs/src/content/docs/components/spotify.mdx

@@ -0,0 +1,164 @@
+---
+title: Spotify
+description: Learn how to use the Astro Embed Spotify component to embed Spotify content in your website
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+import { Spotify } from '@astro-community/astro-embed-spotify';
+
+The `<Spotify>` component generates an embed using a lightweight custom element that will load Spotify's `<iframe>` only when a user clicks play.
+
+Spotify embeds will always require some JavaScript, but this is one of the most minimal and performant ways to embed Spotify content.
+
+The component supports tracks, albums, playlists, podcast episodes, podcast shows, and artist profiles.
+
+## Usage
+
+<Tabs>
+<TabItem label="Astro" icon="astro">
+```astro
+---
+import { Spotify } from 'astro-embed';
+---
+
+<Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" />
+```
+</TabItem>
+<TabItem label="MDX" icon="seti:markdown">
+```astro
+import { Spotify } from 'astro-embed';
+
+<Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" />
+```
+</TabItem>
+</Tabs>
+
+You can also pass in the full Spotify URL:
+
+```astro
+<Spotify id="https://open.spotify.com/track/4cOdK2wGLETKBW3PvgPWqT" />
+```
+
+The above code produces the following result:
+
+<div class="not-content">
+	<Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" />
+</div>
+
+### Embedding different content types
+
+Pass any supported Spotify URL or `"{type}/{id}"` string to embed tracks, albums, playlists, episodes, shows, or artists:
+
+```astro
+<Spotify id="https://open.spotify.com/album/1DFixLWuPkv3KT3TnV35m3" />
+<Spotify id="https://open.spotify.com/playlist/37i9dQZF1DXcBWIGoYBM5M" />
+<Spotify id="https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5" />
+```
+
+## Optional props
+
+In addition to the required `id` prop, the following props are available to customise how the `<Spotify>` component renders:
+
+### `poster`
+
+**Type:** `string`
+
+You can provide an alternative poster image by passing in a URL to the `poster` prop.
+
+```astro
+<Spotify
+	id="track/4cOdK2wGLETKBW3PvgPWqT"
+	poster="https://picsum.photos/id/158/1280/853"
+/>
+```
+
+<div class="not-content">
+	<Spotify
+		id="track/4cOdK2wGLETKBW3PvgPWqT"
+		poster="https://picsum.photos/id/158/1280/853"
+	/>
+</div>
+
+### `size`
+
+**Type:** `'compact' | 'full'`  
+**Default:** `'compact'`
+
+Controls the height of the player. `'compact'` renders at 152px (suitable for a single track or episode), while `'full'` renders at 352px (better for albums and playlists).
+
+```astro
+<Spotify id="playlist/37i9dQZF1DZ06evO05tE88" size="full" />
+```
+
+<div class="not-content">
+	<Spotify id="playlist/37i9dQZF1DZ06evO05tE88" size="full" />
+</div>
+
+### `artist`
+
+**Type:** `string`
+
+The artist or show name to display in the placeholder. When omitted, no artist line is shown.
+
+```astro
+<Spotify
+	id="track/4cOdK2wGLETKBW3PvgPWqT"
+	title="Never Gonna Give You Up"
+	artist="Rick Astley"
+/>
+```
+
+<div class="not-content">
+	<Spotify
+		id="track/4cOdK2wGLETKBW3PvgPWqT"
+		title="Never Gonna Give You Up"
+		artist="Rick Astley"
+	/>
+</div>
+
+### `theme`
+
+**Type:** `'dark' | string`  
+**Default:** `'dark'`
+
+Controls the colour theme of the placeholder. `'dark'` (the default) uses Spotify's dark theme and adds `theme=0` to the embed URL. Pass any CSS colour string (e.g. `'#005977'`) to set a custom placeholder background — this also omits the `theme` parameter from the embed URL so the iframe uses the artist's chosen colour.
+
+```astro
+<Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" theme="#005977" />
+```
+
+<div class="not-content">
+	<Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" theme="#005977" />
+</div>
+
+### `params`
+
+**Type:** `string`
+
+You can pass a `params` prop to set additional Spotify embed query parameters. This looks like a series of URL search params.
+
+### `playLabel`
+
+**Type:** `string`  
+**Default:** `'Play'`
+
+By default, the play button in the embed has an accessible label set to "Play".
+If you want to customise this, for example to match the language of your website, you can set the `playLabel` prop:
+
+```astro
+<Spotify id="track/4cOdK2wGLETKBW3PvgPWqT" playLabel="Play on Spotify" />
+```
+
+## Standalone installation
+
+If you only need the `<Spotify>` component, you can install the package directly instead of the main `astro-embed` package:
+
+import { PackageManagers } from 'starlight-package-managers';
+
+<PackageManagers pkg="@astro-community/astro-embed-spotify" />
+
+The `<Spotify>` component can then be imported as:
+
+```js
+import { Spotify } from '@astro-community/astro-embed-spotify';
+```

docs/src/content/docs/getting-started.mdx

@@ -77,6 +77,7 @@ Astro Embed currently supports the following services:
 	<LinkCard title="GitHub Gist" href="/components/gist/" />
 	<LinkCard title="Mastodon" href="/components/mastodon/" />
 	<LinkCard title="Open Graph" href="/components/link-preview/" />
+	<LinkCard title="Spotify" href="/components/spotify/" />
 	<LinkCard title="Twitter" href="/components/twitter/" />
 	<LinkCard title="Vimeo" href="/components/vimeo/" />
 	<LinkCard title="YouTube" href="/components/youtube/" />

docs/src/content/docs/index.mdx

@@ -95,4 +95,12 @@ import { Icon, Card, CardGrid } from '@astrojs/starlight/components';
 
     </Card>
 
+    <Card title="Spotify" icon="seti:audio">
+
+    	Load Spotify embeds on user interaction for faster page loads.
+
+    	[Spotify docs](/components/spotify/)
+
+    </Card>
+
 </CardGrid>

packages/astro-embed-integration/package.json

@@ -26,6 +26,7 @@
     "@astro-community/astro-embed-gist": "^0.1.0",
     "@astro-community/astro-embed-link-preview": "^0.3.1",
     "@astro-community/astro-embed-mastodon": "^0.1.1",
+    "@astro-community/astro-embed-spotify": "^0.0.1",
     "@astro-community/astro-embed-twitter": "^0.5.11",
     "@astro-community/astro-embed-vimeo": "^0.3.12",
     "@astro-community/astro-embed-youtube": "^0.5.10",

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

@@ -1,6 +1,7 @@
 import { type Node, select, selectAll } from 'unist-util-select';
 import blueskyMatcher from '@astro-community/astro-embed-bluesky/matcher';
 import gistMatcher from '@astro-community/astro-embed-gist/matcher';
+import spotifyMatcher from '@astro-community/astro-embed-spotify/matcher';
 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';
@@ -10,6 +11,7 @@ import mastodonMatcher from '@astro-community/astro-embed-mastodon/matcher';
 const matchers = [
 	[blueskyMatcher, 'BlueskyPost'],
 	[gistMatcher, 'Gist'],
+	[spotifyMatcher, 'Spotify'],
 	[twitterMatcher, 'Tweet'],
 	[vimeoMatcher, 'Vimeo'],
 	[youtubeMatcher, 'YouTube'],