diff --git a/.changeset/hungry-ducks-relax.md b/.changeset/hungry-ducks-relax.md new file mode 100644 index 0000000..2f46d79 --- /dev/null +++ b/.changeset/hungry-ducks-relax.md @@ -0,0 +1,5 @@ +--- +'starlight-showcases': patch +--- + +Adds Bluesky showcase component. diff --git a/docs/src/content/docs/components/bluesky.mdx b/docs/src/content/docs/components/bluesky.mdx new file mode 100644 index 0000000..9229dbb --- /dev/null +++ b/docs/src/content/docs/components/bluesky.mdx @@ -0,0 +1,58 @@ +--- +title: Bluesky +description: Learn how to use the Bluesky component to showcase posts. +sidebar: + order: 6 +--- + +The `` component can be used to showcase Bluesky posts. + +## Import + +```js +import { ShowcaseBluesky } from 'starlight-showcases' +``` + +## Usage + +Specify a list of Bluesky posts to display using the `entries` prop. + +import { Preview } from '@hideoo/starlight-plugins-docs-components' +import { ShowcaseBluesky } from 'starlight-showcases' + + + +```mdx title="src/content/docs/showcase.mdx" +import { ShowcaseBluesky } from 'starlight-showcases' + + +``` + + + + + +The `` component uses [Astro Embed](https://astro-embed.netlify.app/) to load a minimal version of Bluesky’s widget with zero JavaScript and only static HTML content. + +## Props + +The `` component accepts the following props: + +### `entries` + +**required** +**type:** `string[]` + +The list of Bluesky post URLs to display. +See the [Usage](#usage) section for an example. diff --git a/docs/src/content/docs/components/profiles.mdx b/docs/src/content/docs/components/profiles.mdx index ebc1a48..33ad954 100644 --- a/docs/src/content/docs/components/profiles.mdx +++ b/docs/src/content/docs/components/profiles.mdx @@ -2,7 +2,7 @@ title: Profiles description: Learn how to use the profile component to showcase profiles including a name, description, picture and link. sidebar: - order: 7 + order: 8 --- The `` component can be used to showcase profiles like GitHub users, repositories or any other profile. diff --git a/docs/src/content/docs/components/quotes.mdx b/docs/src/content/docs/components/quotes.mdx index d27f240..d9e8638 100644 --- a/docs/src/content/docs/components/quotes.mdx +++ b/docs/src/content/docs/components/quotes.mdx @@ -2,7 +2,7 @@ title: Quotes description: Learn how to use the quotes component to showcase quotes. sidebar: - order: 6 + order: 7 --- The `` component can be used to showcase quotes which can link to their respective sources. diff --git a/docs/src/content/docs/demo.mdx b/docs/src/content/docs/demo.mdx index 1204124..7106195 100644 --- a/docs/src/content/docs/demo.mdx +++ b/docs/src/content/docs/demo.mdx @@ -130,6 +130,20 @@ import { ShowcaseTwitter } from 'starlight-showcases' ]} /> +## Bluesky + +To showcase Bluesky posts, use the [``](/components/bluesky/) component. + +import { ShowcaseBluesky } from 'starlight-showcases' + + + ## Quotes To showcase quote entries, use the [``](/components/quotes/) component. diff --git a/docs/src/content/docs/getting-started.mdx b/docs/src/content/docs/getting-started.mdx index 8340f64..aba0327 100644 --- a/docs/src/content/docs/getting-started.mdx +++ b/docs/src/content/docs/getting-started.mdx @@ -5,7 +5,7 @@ description: Learn how to add author showcase pages to your documentation with t A set of [Starlight](https://starlight.astro.build) components to author showcase pages for your documentation. -Different type of showcase items can be displayed, such as [text](/components/text/), [images](/components/images/), [YouTube videos](/components/youtube/), [Twitter posts](/components/twitter/), [quotes](/components/quotes/), and [profiles](/components/profiles/). +Different type of showcase items can be displayed, such as [text](/components/text/), [images](/components/images/), [YouTube videos](/components/youtube/), [Twitter posts](/components/twitter/), [Bluesky posts](/components/bluesky/), [quotes](/components/quotes/), and [profiles](/components/profiles/). Check out the [demo](/demo/) for a preview of the components in action. diff --git a/packages/starlight-showcases/README.md b/packages/starlight-showcases/README.md index 6bbd56d..6c4facc 100644 --- a/packages/starlight-showcases/README.md +++ b/packages/starlight-showcases/README.md @@ -21,7 +21,7 @@ Want to get started immediately? Check out the [getting started guide](https://s A set of [Starlight](https://starlight.astro.build) components to author showcase pages for your documentation. -Different type of showcase items can be displayed, such as [text](https://starlight-showcases.vercel.app/components/text/), [images](https://starlight-showcases.vercel.app/components/images/), [YouTube videos](https://starlight-showcases.vercel.app/components/youtube/), [Twitter posts](https://starlight-showcases.vercel.app/components/twitter/), [quotes](https://starlight-showcases.vercel.app/components/quotes/), and [profiles](https://starlight-showcases.vercel.app/components/profiles/). +Different type of showcase items can be displayed, such as [text](https://starlight-showcases.vercel.app/components/text/), [images](https://starlight-showcases.vercel.app/components/images/), [YouTube videos](https://starlight-showcases.vercel.app/components/youtube/), [Twitter posts](https://starlight-showcases.vercel.app/components/twitter/), [Bluesky posts](https://starlight-showcases.vercel.app/components/bluesky/), [quotes](https://starlight-showcases.vercel.app/components/quotes/), and [profiles](https://starlight-showcases.vercel.app/components/profiles/). > [!NOTE] > Credits to [Chris Swithinbank (@delucis)](https://github.com/delucis/) for the original idea and implementation in the [Starlight documentation](https://starlight.astro.build/resources/showcase/) and also creating the [Astro Embed](https://astro-embed.netlify.app/) library used in this project. diff --git a/packages/starlight-showcases/components/ShowcaseBluesky.astro b/packages/starlight-showcases/components/ShowcaseBluesky.astro new file mode 100644 index 0000000..2da3f66 --- /dev/null +++ b/packages/starlight-showcases/components/ShowcaseBluesky.astro @@ -0,0 +1,22 @@ +--- +import ShowcaseBlueskyCard from './ShowcaseBlueskyCard.astro' + +export type ShowcaseBlueskyProps = Props + +interface Props { + entries: string[] +} + +const { entries } = Astro.props +--- + +
+ {entries.map((href) => )} +
+ + diff --git a/packages/starlight-showcases/components/ShowcaseBlueskyCard.astro b/packages/starlight-showcases/components/ShowcaseBlueskyCard.astro new file mode 100644 index 0000000..c3c6732 --- /dev/null +++ b/packages/starlight-showcases/components/ShowcaseBlueskyCard.astro @@ -0,0 +1,13 @@ +--- +import { BlueskyPost } from '@astro-community/astro-embed-bluesky' + +interface Props { + href: string +} + +const { href } = Astro.props +--- + +
+ +
diff --git a/packages/starlight-showcases/index.ts b/packages/starlight-showcases/index.ts index 0da0ed4..5e0e537 100644 --- a/packages/starlight-showcases/index.ts +++ b/packages/starlight-showcases/index.ts @@ -1,3 +1,4 @@ +export { default as ShowcaseBluesky, type ShowcaseBlueskyProps } from './components/ShowcaseBluesky.astro' export { default as ShowcaseCTA, type ShowcaseCTAProps } from './components/ShowcaseCTA.astro' export { default as ShowcaseText, type ShowcaseTextProps } from './components/ShowcaseText.astro' export { default as ShowcaseImage, type ShowcaseImageProps } from './components/ShowcaseImage.astro' diff --git a/packages/starlight-showcases/package.json b/packages/starlight-showcases/package.json index 8804104..f76efff 100644 --- a/packages/starlight-showcases/package.json +++ b/packages/starlight-showcases/package.json @@ -13,6 +13,7 @@ "lint": "eslint . --cache --max-warnings=0" }, "dependencies": { + "@astro-community/astro-embed-bluesky": "^0.1.3", "@astro-community/astro-embed-twitter": "^0.5.8", "@astro-community/astro-embed-youtube": "^0.5.6" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 93b39d4..bd78550 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,6 +65,9 @@ importers: packages/starlight-showcases: dependencies: + '@astro-community/astro-embed-bluesky': + specifier: ^0.1.3 + version: 0.1.3(astro@5.3.0(@types/node@18.19.68)(rollup@4.34.8)(typescript@5.7.2)(yaml@2.6.1)) '@astro-community/astro-embed-twitter': specifier: ^0.5.8 version: 0.5.8(astro@5.3.0(@types/node@18.19.68)(rollup@4.34.8)(typescript@5.7.2)(yaml@2.6.1)) @@ -77,6 +80,11 @@ importers: packages: + '@astro-community/astro-embed-bluesky@0.1.3': + resolution: {integrity: sha512-qOuIK2CYQfAjFePaxtko7yyS0rb94I3MgZ94kK02xqeonCzHNP95Q+jUCD/uelcvZK4u+VEh5zNkQ4BfjFm63w==} + peerDependencies: + astro: ^4.0.0 || ^5.0.0-beta.0 + '@astro-community/astro-embed-twitter@0.5.8': resolution: {integrity: sha512-O2ptQPw+DfipukK8czjJcTcyVgDsrs3OmrHbc3YmWRglaUTOpSTImzPo076POyNBSWjLaRKloul81DFiAMNjTA==} peerDependencies: @@ -142,6 +150,21 @@ packages: '@astrojs/yaml2ts@0.2.2': resolution: {integrity: sha512-GOfvSr5Nqy2z5XiwqTouBBpy5FyI6DEe+/g/Mk5am9SjILN1S5fOEvYK0GuWHg98yS/dobP4m8qyqw/URW35fQ==} + '@atproto/api@0.13.35': + resolution: {integrity: sha512-vsEfBj0C333TLjDppvTdTE0IdKlXuljKSveAeI4PPx/l6eUKNnDTsYxvILtXUVzwUlTDmSRqy5O4Ryh78n1b7g==} + + '@atproto/common-web@0.4.0': + resolution: {integrity: sha512-ZYL0P9myHybNgwh/hBY0HaBzqiLR1B5/ie5bJpLQAg0whRzNA28t8/nU2vh99tbsWcAF0LOD29M8++LyENJLNQ==} + + '@atproto/lexicon@0.4.7': + resolution: {integrity: sha512-/x6h3tAiDNzSi4eXtC8ke65B7UzsagtlGRHmUD95698x5lBRpDnpizj0fZWTZVYed5qnOmz/ZEue+v3wDmO61g==} + + '@atproto/syntax@0.3.3': + resolution: {integrity: sha512-F1LZweesNYdBbZBXVa72N/cSvchG8Q1tG4/209ZXbIuM3FwQtkgn+zgmmV4P4ORmhOeXPBNXvMBpcqiwx/gEQQ==} + + '@atproto/xrpc@0.6.9': + resolution: {integrity: sha512-vQGA7++DYMNaHx3C7vEjT+2X6hYYLG7JNbBnDLWu0km1/1KYXgRkAz4h+FfYqg1mvzvIorHU7DAs5wevkJDDlw==} + '@babel/code-frame@7.24.7': resolution: {integrity: sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==} engines: {node: '>=6.9.0'} @@ -1098,6 +1121,9 @@ packages: resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} + await-lock@2.2.2: + resolution: {integrity: sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==} + axe-core@4.10.2: resolution: {integrity: sha512-RE3mdQ7P3FRSe7eqCWoeQ/Z9QXrtniSjp1wUjt5nRC3WIpz5rSCve6o3fsZ2aCpJtrZjSZgjwXAoTO5k4tEI0w==} engines: {node: '>=4'} @@ -2142,6 +2168,9 @@ packages: isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + iso-datestring-validator@2.2.2: + resolution: {integrity: sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA==} + iterator.prototype@1.1.4: resolution: {integrity: sha512-x4WH0BWmrMmg4oHHl+duwubhrvczGlyuGAZu3nvrf0UXOfPu8IhZObFEr7DE/iv01YgVZrsOiRcqw2srkKEDIA==} engines: {node: '>= 0.4'} @@ -2479,6 +2508,9 @@ packages: muggle-string@0.4.1: resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==} + multiformats@9.9.0: + resolution: {integrity: sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg==} + nanoid@3.3.8: resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -3142,6 +3174,10 @@ packages: tinyexec@0.3.2: resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} + tlds@1.255.0: + resolution: {integrity: sha512-tcwMRIioTcF/FcxLev8MJWxCp+GUALRhFEqbDoZrnowmKSGqPrl5pqS+Sut2m8BgJ6S4FExCSSpGffZ0Tks6Aw==} + hasBin: true + tmp@0.0.33: resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==} engines: {node: '>=0.6.0'} @@ -3165,6 +3201,9 @@ packages: peerDependencies: typescript: '>=4.2.0' + ts-pattern@5.6.2: + resolution: {integrity: sha512-d4IxJUXROL5NCa3amvMg6VQW2HVtZYmUTPfvVtO7zJWGYLJ+mry9v2OmYm+z67aniQoQ8/yFNadiEwtNS9qQiw==} + tsconfck@3.1.4: resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==} engines: {node: ^18 || >=20} @@ -3237,6 +3276,9 @@ packages: uhyphen@0.2.0: resolution: {integrity: sha512-qz3o9CHXmJJPGBdqzab7qAYuW8kQGKNEuoHFYrBwV6hWIMcpAmxDLXojcHfFr9US1Pe6zUswEIJIbLI610fuqA==} + uint8arrays@3.0.0: + resolution: {integrity: sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==} + ultrahtml@1.5.3: resolution: {integrity: sha512-GykOvZwgDWZlTQMtp5jrD4BVL+gNn2NVlVafjcFUJ7taY20tqYdwdoWBFy6GBJsNTZe1GkGPkSl5knQAjtgceg==} @@ -3640,6 +3682,12 @@ packages: snapshots: + '@astro-community/astro-embed-bluesky@0.1.3(astro@5.3.0(@types/node@18.19.68)(rollup@4.34.8)(typescript@5.7.2)(yaml@2.6.1))': + dependencies: + '@atproto/api': 0.13.35 + astro: 5.3.0(@types/node@18.19.68)(rollup@4.34.8)(typescript@5.7.2)(yaml@2.6.1) + ts-pattern: 5.6.2 + '@astro-community/astro-embed-twitter@0.5.8(astro@5.3.0(@types/node@18.19.68)(rollup@4.34.8)(typescript@5.7.2)(yaml@2.6.1))': dependencies: '@astro-community/astro-embed-utils': 0.1.2 @@ -3796,6 +3844,39 @@ snapshots: dependencies: yaml: 2.6.1 + '@atproto/api@0.13.35': + dependencies: + '@atproto/common-web': 0.4.0 + '@atproto/lexicon': 0.4.7 + '@atproto/syntax': 0.3.3 + '@atproto/xrpc': 0.6.9 + await-lock: 2.2.2 + multiformats: 9.9.0 + tlds: 1.255.0 + zod: 3.24.2 + + '@atproto/common-web@0.4.0': + dependencies: + graphemer: 1.4.0 + multiformats: 9.9.0 + uint8arrays: 3.0.0 + zod: 3.24.2 + + '@atproto/lexicon@0.4.7': + dependencies: + '@atproto/common-web': 0.4.0 + '@atproto/syntax': 0.3.3 + iso-datestring-validator: 2.2.2 + multiformats: 9.9.0 + zod: 3.24.2 + + '@atproto/syntax@0.3.3': {} + + '@atproto/xrpc@0.6.9': + dependencies: + '@atproto/lexicon': 0.4.7 + zod: 3.24.2 + '@babel/code-frame@7.24.7': dependencies: '@babel/highlight': 7.24.7 @@ -4940,6 +5021,8 @@ snapshots: dependencies: possible-typed-array-names: 1.0.0 + await-lock@2.2.2: {} + axe-core@4.10.2: {} axobject-query@4.1.0: {} @@ -6260,6 +6343,8 @@ snapshots: isexe@2.0.0: {} + iso-datestring-validator@2.2.2: {} + iterator.prototype@1.1.4: dependencies: define-data-property: 1.1.4 @@ -6880,6 +6965,8 @@ snapshots: muggle-string@0.4.1: {} + multiformats@9.9.0: {} + nanoid@3.3.8: {} natural-compare@1.4.0: {} @@ -7709,6 +7796,8 @@ snapshots: tinyexec@0.3.2: {} + tlds@1.255.0: {} + tmp@0.0.33: dependencies: os-tmpdir: 1.0.2 @@ -7727,6 +7816,8 @@ snapshots: dependencies: typescript: 5.7.2 + ts-pattern@5.6.2: {} + tsconfck@3.1.4(typescript@5.7.2): optionalDependencies: typescript: 5.7.2 @@ -7798,6 +7889,10 @@ snapshots: uhyphen@0.2.0: {} + uint8arrays@3.0.0: + dependencies: + multiformats: 9.9.0 + ultrahtml@1.5.3: {} unbox-primitive@1.0.2: