Feat: Add badge to LinkCard component

.changeset/six-dolphins-wonder.md

@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Add badge to `LinkCard` component

docs/src/content/docs/guides/components.mdx

@@ -133,7 +133,7 @@ Add the `stagger` attribute to shift the second column of cards vertically and a
 
 Use the `<LinkCard>` component to link prominently to different pages.
 
-A `<LinkCard>` requires a `title` and an [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href) attribute. You can optionally include a short `description` or other link attributes such as `target`.
+A `<LinkCard>` requires a `title` and an [`href`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href) attribute. You can optionally include a short `description`, a [badge](/guides/sidebar/#badges), and other link attributes such as `target`.
 
 Group multiple `<LinkCard>` components in `<CardGrid>` to display cards side-by-side when there’s enough space.
 
@@ -150,7 +150,7 @@ import { LinkCard, CardGrid } from '@astrojs/starlight/components';
 
 <CardGrid>
 	<LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />
-	<LinkCard title="Components" href="/guides/components/" />
+	<LinkCard title="Sidebar Navigation" badge="New" href="/guides/sidebar/" />
 </CardGrid>
 ```
 
@@ -166,7 +166,7 @@ import { LinkCard } from '@astrojs/starlight/components';
 
 <CardGrid>
 	<LinkCard title="Authoring Markdown" href="/guides/authoring-content/" />
-	<LinkCard title="Components" href="/guides/components/" />
+	<LinkCard title="Sidebar Navigation" badge="New" href="/guides/sidebar/" />
 </CardGrid>
 
 ### Icon

packages/starlight/schemas/badge.ts

@@ -18,3 +18,4 @@ export const BadgeConfigSchema = () =>
 		.optional();
 
 export type Badge = z.output<ReturnType<typeof badgeSchema>>;
+export type BadgeUserConfig = z.input<ReturnType<typeof BadgeConfigSchema>>;

packages/starlight/user-components/LinkCard.astro

@@ -1,20 +1,47 @@
 ---
 import Icon from './Icon.astro';
+import Badge from '../components/Badge.astro';
+import { BadgeConfigSchema, type BadgeUserConfig } from '../schemas/badge';
+import { errorMap } from '../utils/error-map';
 import type { HTMLAttributes } from 'astro/types';
+import { AstroError } from 'astro/errors';
 
 interface Props extends Omit<HTMLAttributes<'a'>, 'title'> {
 	title: string;
+	badge?: BadgeUserConfig;
 	description?: string;
 }
 
-const { title, description, ...attributes } = Astro.props;
+const { title, badge, description, ...attributes } = Astro.props;
+
+const badgeData = BadgeConfigSchema().safeParse(badge, { errorMap });
+
+if (!badgeData.success) {
+	throw new AstroError(
+		'Invalid `badge` prop passed to `<LinkCard>` for route `' +
+			Astro.url.pathname +
+			'`.\n\n' +
+			badgeData.error.issues.map((i) => i.message).join('\n'),
+		'Find out more at https://starlight.astro.build/reference/frontmatter/#badge'
+	);
+}
 ---
 
 <div class="sl-link-card">
 	<span class="sl-flex stack">
-		<a {...attributes}>
-			<span class="title" set:html={title} />
-		</a>
+		<span>
+			<a {...attributes}>
+				<span class="title" set:html={title} />
+			</a>
+			{
+				badge && (
+					<>
+						{' '}
+						<Badge {...badgeData.data} />
+					</>
+				)
+			}
+		</span>
 		{description && <span class="description" set:html={description} />}
 	</span>
 	<Icon name="right-arrow" size="1.333em" class="icon rtl:flip" />