Extract showcase sites to a new component (#688)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>

9 files changed, 71 insertions, 635 deletions

diff --git a/docs/src/components/showcase-sites.astro b/docs/src/components/showcase-sites.astro
new file mode 100644
index 00000000..7891c499
--- /dev/null
+++ b/docs/src/components/showcase-sites.astro
@@ -0,0 +1,55 @@
+---
+import Card from './showcase-card.astro';
+import FluidGrid from './fluid-grid.astro';
+---
+
+<FluidGrid>
+	<Card title="Athena OS" href="https://athenaos.org" thumbnail="www.athenaos.org.png" />
+	<Card
+		title="PubIndexAPI Docs"
+		href="https://docs.pubindexapi.com/"
+		thumbnail="docs.pubindexapi.com.png"
+	/>
+	<Card title="pls" href="https://dhruvkb.github.io/pls" thumbnail="dhruvkb.github.io-pls.png" />
+	<Card title="capo.js" href="https://rviscomi.github.io/capo.js/" thumbnail="capo.js.png" />
+	<Card
+		title="Web Monetization API"
+		href="https://webmonetization.org/"
+		thumbnail="webmonetization.org.png"
+	/>
+	<Card
+		title="QBCore Docs"
+		href="https://brycerussell.github.io/qbcore-docs/"
+		thumbnail="brycerussell.github.io-qbcore-docs.png"
+	/>
+	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
+	<Card title="xs-dev docs" href="https://xs-dev.js.org" thumbnail="xs-dev.js.org.png" />
+	<Card title="Felicity" href="https://felicity.pages.dev/" thumbnail="felicity.pages.dev.png" />
+	<Card
+		title="NgxEditor"
+		href="https://sibiraj-s.github.io/ngx-editor/"
+		thumbnail="sibiraj-s.github.io-ngx-editor.png"
+	/>
+	<Card
+		title="Astro Error Pages"
+		href="https://astro-error-page-documentation.vercel.app/"
+		thumbnail="astro-error-page-documentation.vercel.app.png"
+	/>
+	<Card title="Terrateam Docs" href="https://terrateam.io/docs" thumbnail="terrateam.io-docs.png" />
+	<Card
+		title="simple-fm"
+		href="https://simple.arciniega.one"
+		thumbnail="simple.arciniega.one.png"
+	/>
+	<Card
+		title="CommandKit"
+		href="https://commandkit.underctrl.io"
+		thumbnail="commandkit.underctrl.io.png"
+	/>
+	<Card
+		title="Obytes Starter"
+		href="https://starter.obytes.com"
+		thumbnail="starter.obytes.com.jpg"
+	/>
+	<Card title="Kanri" href="https://kanriapp.com" thumbnail="kanriapp.com.png" />
+</FluidGrid>
diff --git a/docs/src/content/docs/es/showcase.mdx b/docs/src/content/docs/es/showcase.mdx
index eff6f51e..2a28fab0 100644
--- a/docs/src/content/docs/es/showcase.mdx
+++ b/docs/src/content/docs/es/showcase.mdx
@@ -10,89 +10,11 @@ description: ¡Descubre los sitios construidos con Starlight y herramientas comu
 
 ## Sitios
 
-import Card from '../../../components/showcase-card.astro';
-import FluidGrid from '../../../components/fluid-grid.astro';
+import ShowcaseSites from '../../../components/showcase-sites.astro';
 
 Starlight ya está siendo utilizado en producción. Estos son algunos de los sitios en la web:
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-	<Card
-		title="Kanri"
-		href="https://kanriapp.com"
-		thumbnail="kanriapp.com.png"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 Consulta todos los [repositorios de proyectos públicos que utilizan Starlight en GitHub](https://github.com/withastro/starlight/network/dependents).
 
diff --git a/docs/src/content/docs/fr/showcase.mdx b/docs/src/content/docs/fr/showcase.mdx
index b553ae77..482871bb 100644
--- a/docs/src/content/docs/fr/showcase.mdx
+++ b/docs/src/content/docs/fr/showcase.mdx
@@ -10,84 +10,11 @@ Ouvrez une PR en ajoutant un lien à cette page !
 
 ## Sites
 
-import Card from '../../../components/showcase-card.astro';
-import FluidGrid from '../../../components/fluid-grid.astro';
+import ShowcaseSites from '../../../components/showcase-sites.astro';
 
 Starlight est déjà utilisé en production. Voici quelques sites sur le web :
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 Voir tous les [dépôts publics de projets utilisant Starlight sur GitHub](https://github.com/withastro/starlight/network/dependents).
 
diff --git a/docs/src/content/docs/it/showcase.mdx b/docs/src/content/docs/it/showcase.mdx
index b4be8c0f..a3351f3f 100644
--- a/docs/src/content/docs/it/showcase.mdx
+++ b/docs/src/content/docs/it/showcase.mdx
@@ -10,89 +10,11 @@ Apri una PR aggiungendo un link a questa pagina!
 
 ## Sites
 
-import Card from '../../../components/showcase-card.astro';
-import FluidGrid from '../../../components/fluid-grid.astro';
+import ShowcaseSites from '../../../components/showcase-sites.astro';
 
 Starlight è già utilizzato nella produzione. Questi sono alcuni dei siti presenti sul web:
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-	<Card
-		title="Kanri"
-		href="https://kanriapp.com"
-		thumbnail="kanriapp.com.png"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 Visualizza tutti i [repository di progetti pubblici che utilizzano Starlight su GitHub](https://github.com/withastro/starlight/network/dependents).
 
diff --git a/docs/src/content/docs/ja/showcase.mdx b/docs/src/content/docs/ja/showcase.mdx
index 6c3ea1b5..68e1189b 100644
--- a/docs/src/content/docs/ja/showcase.mdx
+++ b/docs/src/content/docs/ja/showcase.mdx
@@ -9,89 +9,11 @@ StarlightサイトやStarlightのツールを作成しましたか？このペ�
 
 ## サイト
 
-import Card from '../../../components/showcase-card.astro';
-import FluidGrid from '../../../components/fluid-grid.astro';
+import ShowcaseSites from '../../../components/showcase-sites.astro';
 
 Starlightはすでに本番環境で使用されています。以下はウェブ上のサイトの一部です。
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-	<Card
-		title="Kanri"
-		href="https://kanriapp.com"
-		thumbnail="kanriapp.com.png"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 [Starlightを使用しているGitHub上のすべてのパブリックプロジェクトのリポジトリ](https://github.com/withastro/starlight/network/dependents)も確認してください。
 
diff --git a/docs/src/content/docs/ko/showcase.mdx b/docs/src/content/docs/ko/showcase.mdx
index 5a3479f7..527bcd73 100644
--- a/docs/src/content/docs/ko/showcase.mdx
+++ b/docs/src/content/docs/ko/showcase.mdx
@@ -12,89 +12,11 @@ Starlight 사이트나 Starlight용 도구를 만드셨나요?
 
 ## 사이트
 
-import Card from '../../../components/showcase-card.astro';
-import FluidGrid from '../../../components/fluid-grid.astro';
+import ShowcaseSites from '../../../components/showcase-sites.astro';
 
 Starlight는 이미 프로덕션에 사용되고 있습니다. 다음은 웹사이트 중 일부입니다.
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-	<Card
-		title="Kanri"
-		href="https://kanriapp.com"
-		thumbnail="kanriapp.com.png"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 GitHub에서 Starlight를 사용하는 [모든 공개 프로젝트 저장소](https://github.com/withastro/starlight/network/dependents)를 확인하세요.
 
diff --git a/docs/src/content/docs/pt-br/showcase.mdx b/docs/src/content/docs/pt-br/showcase.mdx
index 4b103fb1..abb8b6c1 100644
--- a/docs/src/content/docs/pt-br/showcase.mdx
+++ b/docs/src/content/docs/pt-br/showcase.mdx
@@ -10,89 +10,11 @@ Abra um PR adicionando um link a esta página!
 
 ## Sites
 
-import Card from '../../../components/showcase-card.astro';
-import FluidGrid from '../../../components/fluid-grid.astro';
+import ShowcaseSites from '../../../components/showcase-sites.astro';
 
 Starlight já está sendo utilizado em produção. Esses são alguns dos sites através da web:
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-	<Card
-		title="Kanri"
-		href="https://kanriapp.com"
-		thumbnail="kanriapp.com.png"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 Veja todos os [repositórios de projetos públicos utilizando Starlight no GitHub](https://github.com/withastro/starlight/network/dependents).
 
diff --git a/docs/src/content/docs/showcase.mdx b/docs/src/content/docs/showcase.mdx
index 4bcdd4f8..194caafd 100644
--- a/docs/src/content/docs/showcase.mdx
+++ b/docs/src/content/docs/showcase.mdx
@@ -10,89 +10,11 @@ Open a PR adding a link to this page!
 
 ## Sites
 
-import Card from '../../components/showcase-card.astro';
-import FluidGrid from '../../components/fluid-grid.astro';
+import ShowcaseSites from '../../components/showcase-sites.astro';
 
 Starlight is already being used in production. These are some of the sites around the web:
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-	<Card
-		title="Kanri"
-		href="https://kanriapp.com"
-		thumbnail="kanriapp.com.png"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 See all the [public project repos using Starlight on GitHub](https://github.com/withastro/starlight/network/dependents).
 
diff --git a/docs/src/content/docs/zh/showcase.mdx b/docs/src/content/docs/zh/showcase.mdx
index 62862aa5..57d09216 100644
--- a/docs/src/content/docs/zh/showcase.mdx
+++ b/docs/src/content/docs/zh/showcase.mdx
@@ -9,89 +9,11 @@ description: 发现使用 Starlight 构建的网站和扩展 Starlight 的社区
 
 ## 网站
 
-import Card from '../../../components/showcase-card.astro';
-import FluidGrid from '../../../components/fluid-grid.astro';
+import ShowcaseSites from '../../../components/showcase-sites.astro';
 
 Starlight 已投入生产。 这些是网络上的一些网站：
 
-<FluidGrid>
-	<Card
-		title="Athena OS"
-		href="https://athenaos.org"
-		thumbnail="www.athenaos.org.png"
-	/>
-	<Card
-		title="PubIndexAPI Docs"
-		href="https://docs.pubindexapi.com/"
-		thumbnail="docs.pubindexapi.com.png"
-	/>
-	<Card
-		title="pls"
-		href="https://dhruvkb.github.io/pls"
-		thumbnail="dhruvkb.github.io-pls.png"
-	/>
-	<Card
-		title="capo.js"
-		href="https://rviscomi.github.io/capo.js/"
-		thumbnail="capo.js.png"
-	/>
-	<Card
-		title="Web Monetization API"
-		href="https://webmonetization.org/"
-		thumbnail="webmonetization.org.png"
-	/>
-	<Card
-		title="QBCore Docs"
-		href="https://brycerussell.github.io/qbcore-docs/"
-		thumbnail="brycerussell.github.io-qbcore-docs.png"
-	/>
-	<Card title="har.fyi" href="https://har.fyi/" thumbnail="har.fyi.png" />
-	<Card
-		title="xs-dev docs"
-		href="https://xs-dev.js.org"
-		thumbnail="xs-dev.js.org.png"
-	/>
-	<Card
-		title="Felicity"
-		href="https://felicity.pages.dev/"
-		thumbnail="felicity.pages.dev.png"
-	/>
-	<Card
-		title="NgxEditor"
-		href="https://sibiraj-s.github.io/ngx-editor/"
-		thumbnail="sibiraj-s.github.io-ngx-editor.png"
-	/>
-	<Card
-		title="Astro Error Pages"
-		href="https://astro-error-page-documentation.vercel.app/"
-		thumbnail="astro-error-page-documentation.vercel.app.png"
-	/>
-	<Card
-		title="Terrateam Docs"
-		href="https://terrateam.io/docs"
-		thumbnail="terrateam.io-docs.png"
-	/>
-	<Card
-		title="simple-fm"
-		href="https://simple.arciniega.one"
-		thumbnail="simple.arciniega.one.png"
-	/>
-	<Card
-		title="CommandKit"
-		href="https://commandkit.underctrl.io"
-		thumbnail="commandkit.underctrl.io.png"
-	/>
-	<Card
-		title="Obytes Starter"
-		href="https://starter.obytes.com"
-		thumbnail="starter.obytes.com.jpg"
-	/>
-	<Card
-		title="Kanri"
-		href="https://kanriapp.com"
-		thumbnail="kanriapp.com.png"
-	/>
-</FluidGrid>
+<ShowcaseSites />
 
 查看所有[在 GitHub 上使用 Starlight 的公共项目仓库](https://github.com/withastro/starlight/network/dependents)。