withastro · liruifengv · Jun 12, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
   "dependencies": {
     "@astrojs/check": "^0.7.0",
     "@astrojs/sitemap": "^3.1.5",
-    "@astrojs/starlight": "0.23.4",
+    "@astrojs/starlight": "0.24.1",
     "@docsearch/js": "^3.5.2",
     "@fontsource/ibm-plex-mono": "^4.5.10",
     "@lunariajs/core": "^0.0.32",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Badge.astro b/src/components/Badge.astro
@@ -1,32 +1,15 @@
 ---
-export interface Props {
-	variant?: 'neutral' | 'accent';
-}
-const { variant = 'neutral' } = Astro.props as Props;
----
-
-<span class={`badge ${variant}`}><slot /></span>
+import { Badge as StarlightBadge } from '@astrojs/starlight/components';
+export type Props = Parameters<typeof StarlightBadge>[0];
 
-<style>
-	.badge {
-		display: inline-block;
-		font-size: var(--sl-text-xs);
-		font-family: var(--__sl-font-mono);
-		border: 1px solid;
-		border-radius: 0.25rem;
-		line-height: 1;
-		padding: 0.375em 0.5em;
-		white-space: nowrap;
-		color: var(--sl-color-white);
-	}
+---
 
-	.neutral {
-		border-color: var(--sl-color-gray-5);
-		background-color: var(--sl-color-gray-6);
-	}
+<StarlightBadge {...Astro.props} />
 
-	.accent {
-		border-color: var(--sl-color-accent);
-		background-color: var(--sl-color-accent-low);
-	}
+<style is:global>
+.neutral-badge {
+	border-color: var(--sl-color-gray-5);
+	background-color: var(--sl-color-gray-6);
+	color: var(--sl-color-text);
+}
 </style>
diff --git a/src/components/NavGrid/CardsNav.astro b/src/components/NavGrid/CardsNav.astro
@@ -1,8 +1,8 @@
 ---
 import type { LogoKey } from '~/data/logos';
-import Badge from '../Badge.astro';
 import Card from './Card.astro';
 import Grid from './Grid.astro';
+import Badge from "~/components/Badge.astro"
 
 export interface Props {
 	minimal?: boolean;
@@ -40,7 +40,7 @@ const currentPage = new URL(Astro.request.url).pathname;
 						{tags && (
 							<div class="tags sl-flex">
 								{Object.values(tags).map((tag) => (
-									<Badge>{tag}</Badge>
+									<Badge class="neutral-badge" text={tag} />
 								))}
 							</div>
 						)}

diff --git a/src/components/Since.astro b/src/components/Since.astro
@@ -1,8 +1,8 @@
 ---
 import UIString from './UIString.astro';
-import Badge from './Badge.astro';
 import { cachedFetch } from '../util-server';
-
+import Badge from "~/components/Badge.astro"
+import { useTranslations } from '../i18n/util';
 export interface Props {
 	pkg?: string;
 	v: string;
@@ -45,16 +45,12 @@ const featureStatus = await getFeatureStatus(v);
 	<code>{pkg}@{v}</code>
 	{
 		featureStatus === 'new' && (
-			<Badge variant="accent">
-				<UIString key="since.new" />
-			</Badge>
+			<Badge text={useTranslations(Astro)("since.new")} />
 		)
 	}
 	{
 		featureStatus === 'beta' && (
-			<Badge variant="accent">
-				<UIString key="since.beta" />
-			</Badge>
+			<Badge text={useTranslations(Astro)("since.beta")} />
 		)
 	}
 </span>
diff --git a/src/content/docs/ar/editor-setup.mdx b/src/content/docs/ar/editor-setup.mdx
@@ -2,8 +2,8 @@
 title: إعداد البيئة البرمجية
 description: أعِد محررك لبناء المشاريع مع أسترو.
 ---
-import Badge from '~/components/Badge.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import Badge from "~/components/Badge.astro"
 
 خصص محرر الكود الخاص بك لتحسين تجربة التطوير مع أسترو وفتح ميزات جديدة.
 
@@ -29,12 +29,12 @@ import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
 يقدم مجتمعنا المذهل عدة إضافات للمحررات الشهيرة الأخرى، بما في ذلك:
 
-- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">دعم رسمي</Badge></span> - إضافة VS Code الرسمية التي تحدثنا عنها أعلاه، متوفرة أيضا على مستودع Open VSX للمحررات المبنية عليه مثل [VSCodium](https://vscodium.com/)
-- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">دعم مجتمعي</Badge></span> - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova
-- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">دعم مجتمعي</Badge></span> - يوفر تلوين الجمل البرمجية، وطي الكود، ويدعم الـ indentation على محررات Vim و Neovim
-- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) و [TreeSitter](https://github.com/virchau13/tree-sitter-astro) لـ Neovim <span style="margin: 0.25em;"><Badge variant="neutral">دعم مجتمعي</Badge></span> - يوفّر تلوين الجمل البرمجية، (treesitter parsing)، وتوفير دعم الإكمال التلقائي في محرر Neovim
-- emacs - راجع تعليمات ل [تكوين Emacs و Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">مجتمع</Badge></span> للعمل مع أسترو
-- [أسترو syntax highlighting ل Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">مجتمع</Badge></span> - حزمة أسترو Sublime Text, متاح على مستودع Sublime Text.
+- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="دعم رسمي" /></span> - إضافة VS Code الرسمية التي تحدثنا عنها أعلاه، متوفرة أيضا على مستودع Open VSX للمحررات المبنية عليه مثل [VSCodium](https://vscodium.com/)
+- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفر تلوين الجمل البرمجية، وإكمال الجمل على محرر Nova
+- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفر تلوين الجمل البرمجية، وطي الكود، ويدعم الـ indentation على محررات Vim و Neovim
+- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) و [TreeSitter](https://github.com/virchau13/tree-sitter-astro) لـ Neovim <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - يوفّر تلوين الجمل البرمجية، (treesitter parsing)، وتوفير دعم الإكمال التلقائي في محرر Neovim
+- emacs - راجع تعليمات ل [تكوين Emacs و Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> للعمل مع أسترو
+- [أسترو syntax highlighting ل Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="دعم مجتمعي" /></span> - حزمة أسترو Sublime Text, متاح على مستودع Sublime Text.
 
 ## المحررات في المتصفح
 

diff --git a/src/content/docs/de/editor-setup.mdx b/src/content/docs/de/editor-setup.mdx
@@ -2,9 +2,8 @@
 title: Editor-Einrichtung
 description: 'Richte deinen Editor ein, um etwas mit Astro zu kreieren.'
 ---
-import Badge from '~/components/Badge.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
-
+import Badge from "~/components/Badge.astro"
 
 Passe deinen Code-Editor an, um die Astro-Entwicklererfahrung zu verbessern und neue Funktionen freizuschalten.
 
@@ -32,12 +31,12 @@ Erstmals kam Support für Astro auf WebStorm 2023.1. Du kannst das offizielle Pl
 
 Unsere wunderbare Community stellt mehrere Erweiterungen für andere beliebte Editoren bereit, darunter auch:
 
-- [VS Code-Erweiterung auf Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">Offiziell</Badge></span> - Die offizielle Astro-Erweiterung für VS Code, verfügbar in der Open VSX Registry für quelloffene Plattformen wie [VSCodium](https://vscodium.com/)
-- [Nova-Erweiterung](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Syntaxhervorhebung, IntelliSense und Autovervollständigung für Astro
-- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Syntaxhervorhebung, Einzug, und Code-Faltungsunterstützung für Astro in Vim oder Neovim
-- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) und [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Syntaxhervorhebung, treesitter Analyse, und Autovervollständigung für Astro in Neovim
-- Emacs - Siehe Anleitung für die [Konfiguration von Emacs und Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> um mit Astro zu arbeiten
-- [Astro Syntaxhervorhebung für Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Das Astro Paket für Sublime Text, verfügbar im Sublime Text package manager.
+- [VS Code-Erweiterung auf Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="Offiziell" /></span> - Die offizielle Astro-Erweiterung für VS Code, verfügbar in der Open VSX Registry für quelloffene Plattformen wie [VSCodium](https://vscodium.com/)
+- [Nova-Erweiterung](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Syntaxhervorhebung, IntelliSense und Autovervollständigung für Astro
+- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Syntaxhervorhebung, Einzug, und Code-Faltungsunterstützung für Astro in Vim oder Neovim
+- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) und [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Syntaxhervorhebung, treesitter Analyse, und Autovervollständigung für Astro in Neovim
+- Emacs - Siehe Anleitung für die [Konfiguration von Emacs und Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> um mit Astro zu arbeiten
+- [Astro Syntaxhervorhebung für Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Das Astro Paket für Sublime Text, verfügbar im Sublime Text package manager.
 
 ## Browser-Editoren
 

diff --git a/src/content/docs/de/tutorial/0-introduction/1.mdx b/src/content/docs/de/tutorial/0-introduction/1.mdx
@@ -4,7 +4,6 @@ title: Über dieses Tutorial
 description: Wie du mit dem Tutorial "Baue deinen ersten Astro-Blog" anfangen kannst.
 i18nReady: true
 ---
-import Badge from '~/components/Badge.astro';
 import Checklist from '~/components/Checklist.astro';
 import Box from '~/components/tutorial/Box.astro';
 

diff --git a/src/content/docs/en/community-resources/content.mdx b/src/content/docs/en/community-resources/content.mdx
@@ -4,8 +4,6 @@ description: Discover community-produced tutorials, guides, articles and videos
 i18nReady: true
 ---
 
-import Badge from '~/components/Badge.astro';
-
 There is so much more out there that can help you learn and build with Astro! Here is some educational content produced and maintained by the Astro community.
 
 All links are external, and may be based on earlier versions of Astro. Be sure to check the date on any community content, and adapt to your project accordingly.

diff --git a/src/content/docs/en/community-resources/talks.mdx b/src/content/docs/en/community-resources/talks.mdx
@@ -4,8 +4,6 @@ description: Watch conference talks, interviews, and live streams about Astro!
 i18nReady: true
 ---
 
-import Badge from '~/components/Badge.astro';
-
 Here are some of our favourite community videos to introduce you to Astro! 
 
 For more Astro content, check out [the Astro Blog](https://astro.build/blog/) or sign up for [the official Astro newsletter](https://astro.build/newsletter/signup) where we recap the best community content of each month.

diff --git a/src/content/docs/en/editor-setup.mdx b/src/content/docs/en/editor-setup.mdx
@@ -4,8 +4,8 @@ description: Set up your editor to build with Astro.
 i18nReady: true
 ---
 
-import Badge from '~/components/Badge.astro';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import Badge from "~/components/Badge.astro"
 
 Customize your code editor to improve the Astro developer experience and unlock new features.
 
@@ -37,12 +37,12 @@ Initial support for Astro landed in WebStorm 2023.1. You can install the officia
 
 Our amazing community maintains several extensions for other popular editors, including:
 
-- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge variant="accent">Official</Badge></span> - The official Astro VS Code Extension, available on the Open VSX registry for open platforms like [VSCodium](https://vscodium.com/)
-- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Provides syntax highlighting and code completion for Astro inside of Nova
-- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Provides syntax highlighting, indentation, and code folding support for Astro inside of Vim or Neovim
-- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) and [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - Provides syntax highlighting, treesitter parsing, and code completion for Astro inside of Neovim
-- Emacs - See instructions for [Configuring Emacs and Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> to work with Astro
-- [Astro syntax highlighting for Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge variant="neutral">Community</Badge></span> - The Astro package for Sublime Text, available on the Sublime Text package manager.
+- [VS Code Extension on Open VSX](https://open-vsx.org/extension/astro-build/astro-vscode) <span style="margin: 0.25em;"><Badge text="Official" /></span> - The official Astro VS Code Extension, available on the Open VSX registry for open platforms like [VSCodium](https://vscodium.com/)
+- [Nova Extension](https://extensions.panic.com/extensions/sciencefidelity/sciencefidelity.astro/) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Provides syntax highlighting and code completion for Astro inside of Nova
+- [Vim Plugin](https://github.com/wuelnerdotexe/vim-astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Provides syntax highlighting, indentation, and code folding support for Astro inside of Vim or Neovim
+- Neovim [LSP](https://github.com/neovim/nvim-lspconfig/blob/master/doc/server_configurations.md#astro) and [TreeSitter](https://github.com/virchau13/tree-sitter-astro) Plugins <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - Provides syntax highlighting, treesitter parsing, and code completion for Astro inside of Neovim
+- Emacs - See instructions for [Configuring Emacs and Eglot](https://medium.com/@jrmjrm/configuring-emacs-and-eglot-to-work-with-astro-language-server-9408eb709ab0) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> to work with Astro
+- [Astro syntax highlighting for Sublime Text](https://packagecontrol.io/packages/Astro) <span style="margin: 0.25em;"><Badge class="neutral-badge" text="Community" /></span> - The Astro package for Sublime Text, available on the Sublime Text package manager.
 
 ## In-Browser Editors
 

diff --git a/src/content/docs/en/guides/cms.mdx b/src/content/docs/en/guides/cms.mdx
@@ -4,10 +4,8 @@ description: How to use a CMS to add content to Astro
 i18nReady: true
 ---
 import CMSGuidesNav from '~/components/CMSGuidesNav.astro';
-import Badge from '~/components/Badge.astro';
 import ReadMore from '~/components/ReadMore.astro';
-
-
+import Badge from "~/components/Badge.astro"
 
 **Ready to connect a Headless CMS to your Astro project?** Follow one of our guides to integrate a CMS.
 
@@ -38,7 +36,7 @@ Because Astro takes care of the _presentation_ of your content, you'll want to c
 
 Some headless CMSes, like Storyblok, provide an Astro [integration](/en/guides/integrations-guide/) that helps fetch the content specifically for an Astro site. Others provide a JavaScript SDK, a library that you install and use to fetch your remote content.
 
-<ReadMore> Explore a [list of over 100 headless content management systems](https://jamstack.org/headless-cms/) <Badge variant="accent">External</Badge> where you can filter by type (e.g. Git-based, API driven) and license (open-source or closed-source).</ReadMore>
+<ReadMore> Explore a [list of over 100 headless content management systems](https://jamstack.org/headless-cms/) <Badge text="External" /> where you can filter by type (e.g. Git-based, API driven) and license (open-source or closed-source).</ReadMore>
 
 ## Can I use Astro without a CMS?
 

diff --git a/src/content/docs/en/guides/content-collections.mdx b/src/content/docs/en/guides/content-collections.mdx
@@ -10,7 +10,6 @@ import Since from '~/components/Since.astro'
 import RecipeLinks from "~/components/RecipeLinks.astro"
 import Badge from "~/components/Badge.astro"
 
-
 <p><Since v="2.0.0" /></p>
 
 **Content collections** are the best way to manage and author content in any Astro project. Collections help to organize your documents, validate your frontmatter, and provide automatic TypeScript type-safety for all of your content.
@@ -542,7 +541,7 @@ See how to convert a basic blog example from `src/pages/posts/` to `src/content/
 
 ## Enabling Build Caching
 
-<p><Since v="3.5.0" /><Badge>Experimental</Badge></p>
+<p><Since v="3.5.0" /><Badge class="neutral-badge" text="Experimental" /></p>
 
 If you are working with large collections, you may wish to enable cached builds with the [`experimental.contentCollectionCache`](/en/reference/configuration-reference/#experimentalcontentcollectioncache) flag. This experimental feature optimizes Astro's build process, enabling unchanged collections to be stored and reused between builds.