diff --git a/.changeset/plain-falcons-win.md b/.changeset/plain-falcons-win.md new file mode 100644 index 00000000..a3a153b2 --- /dev/null +++ b/.changeset/plain-falcons-win.md @@ -0,0 +1,7 @@ +--- +'@astro-community/astro-embed-integration': minor +'@astro-community/astro-embed-bandcamp': minor +'astro-embed': minor +--- + +Adds Bandcamp astro-embed component diff --git a/demo/package.json b/demo/package.json index 56f7f410..08759c69 100644 --- a/demo/package.json +++ b/demo/package.json @@ -9,6 +9,7 @@ "preview": "astro preview" }, "devDependencies": { + "@astro-community/astro-embed-bandcamp": "workspace:*", "@astro-community/astro-embed-baseline-status": "workspace:*", "@astro-community/astro-embed-bluesky": "workspace:*", "@astro-community/astro-embed-gist": "workspace:*", diff --git a/demo/src/pages/bandcamp.astro b/demo/src/pages/bandcamp.astro new file mode 100644 index 00000000..614726d4 --- /dev/null +++ b/demo/src/pages/bandcamp.astro @@ -0,0 +1,108 @@ +--- +import { Bandcamp as BC } from '@astro-community/astro-embed-bandcamp'; +import Base from '../layouts/Base.astro'; +--- + + +

Album embed via URL

+

+ <Bandcamp id="https://rickastley.bandcamp.com/album/beautiful-life" + /> +

+ + +

Album with Small Artwork

+

+ <Bandcamp id="https://rickastley.bandcamp.com/album/beautiful-life" + artworkSize="small" /> +

+ + +

Showing Artwork Only

+

+ <Bandcamp id="https://rickastley.bandcamp.com/album/beautiful-life" + layout="artwork-only" /> +

+ + +

Slim Version

+

+ <Bandcamp id="https://rickastley.bandcamp.com/album/beautiful-life" + layout="slim" /> +

+ + +

Track embed via URL

+

+ <Bandcamp id="https://rickastley.bandcamp.com/track/she-makes-me" + /> +

+ + +

With a raw album embed ID

+

+ <Bandcamp id="album=50768103" /> +

+ + +

With a raw track embed ID

+

+ <Bandcamp id="track=3123405292" /> +

+ + +

With dark theme

+

+ <Bandcamp id="track=3123405292" theme="dark" /> +

+ + +

With a custom poster image

+

+ <Bandcamp id="album=50768103" + poster="https://picsum.photos/id/158/700/700" /> +

+ + +

With a custom play label

+

+ <Bandcamp id="album=50768103" playLabel="Play the album" /> +

+ + +

Artwork Only Custom Width

+

+ <Bandcamp id="album=50768103" layout="artwork-only" width={500} /> +

+ + +

Artist discography embed via URL with tracklist

+

+ <Bandcamp id="https://rickastley.bandcamp.com" showTracklist={true} /> +

+ + diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro index 4535ee34..a733b0e9 100644 --- a/demo/src/pages/index.astro +++ b/demo/src/pages/index.astro @@ -5,6 +5,11 @@ import Base from '../layouts/Base.astro';

Components

    +
  • + <Bandcamp/> component examples +
  • <Tweet/> component examples
  • diff --git a/demo/src/pages/integration.mdx b/demo/src/pages/integration.mdx index 6ebe4952..74f09245 100644 --- a/demo/src/pages/integration.mdx +++ b/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://rickastley.bandcamp.com/album/beautiful-life diff --git a/docs/package.json b/docs/package.json index 167c8bf3..599f75ce 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,6 +11,7 @@ "astro": "astro" }, "dependencies": { + "@astro-community/astro-embed-bandcamp": "workspace:*", "@astro-community/astro-embed-baseline-status": "workspace:*", "@astro-community/astro-embed-bluesky": "workspace:*", "@astro-community/astro-embed-gist": "workspace:*", diff --git a/docs/src/content.config.ts b/docs/src/content.config.ts index 7a026e08..d189f5dd 100644 --- a/docs/src/content.config.ts +++ b/docs/src/content.config.ts @@ -1,6 +1,7 @@ -import { defineCollection, z } from 'astro:content'; +import { defineCollection } from 'astro:content'; import { docsLoader } from '@astrojs/starlight/loaders'; import { docsSchema } from '@astrojs/starlight/schema'; +import { z } from 'astro/zod'; export const collections = { docs: defineCollection({ diff --git a/docs/src/content/docs/components/_examples/StyledBandcamp.astro b/docs/src/content/docs/components/_examples/StyledBandcamp.astro new file mode 100644 index 00000000..37c6e04c --- /dev/null +++ b/docs/src/content/docs/components/_examples/StyledBandcamp.astro @@ -0,0 +1,5 @@ +--- +import { Bandcamp } from '@astro-community/astro-embed-bandcamp'; +--- + + diff --git a/docs/src/content/docs/components/bandcamp.mdx b/docs/src/content/docs/components/bandcamp.mdx new file mode 100644 index 00000000..ab836150 --- /dev/null +++ b/docs/src/content/docs/components/bandcamp.mdx @@ -0,0 +1,211 @@ +--- +title: Bandcamp +description: Learn how to use the Astro Embed Bandcamp component to embed Bandcamp players in your website +--- + +import { Tabs, TabItem } from '@astrojs/starlight/components'; +import { Bandcamp } from '@astro-community/astro-embed-bandcamp'; + +The `` component generates a lazy-loading Bandcamp player embed. No `