@astrojs/starlight 0.33.1 → 0.34.0

package/user-components/Tabs.astro

@@ -98,43 +98,45 @@ if (isSynced) {
 </starlight-tabs>
 
 <style>
-	starlight-tabs {
-		display: block;
-	}
+	@layer starlight.components {
+		starlight-tabs {
+			display: block;
+		}
 
-	.tablist-wrapper {
-		overflow-x: auto;
-	}
+		.tablist-wrapper {
+			overflow-x: auto;
+		}
 
-	[role='tablist'] {
-		display: flex;
-		list-style: none;
-		border-bottom: 2px solid var(--sl-color-gray-5);
-		padding: 0;
-	}
+		[role='tablist'] {
+			display: flex;
+			list-style: none;
+			border-bottom: 2px solid var(--sl-color-gray-5);
+			padding: 0;
+		}
 
-	.tab {
-		margin-bottom: -2px;
-	}
-	.tab > [role='tab'] {
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-		padding: 0 1.25rem;
-		text-decoration: none;
-		border-bottom: 2px solid var(--sl-color-gray-5);
-		color: var(--sl-color-gray-3);
-		outline-offset: var(--sl-outline-offset-inside);
-		overflow-wrap: initial;
-	}
-	.tab [role='tab'][aria-selected='true'] {
-		color: var(--sl-color-white);
-		border-color: var(--sl-color-text-accent);
-		font-weight: 600;
-	}
+		.tab {
+			margin-bottom: -2px;
+		}
+		.tab > [role='tab'] {
+			display: flex;
+			align-items: center;
+			gap: 0.5rem;
+			padding: 0 1.25rem;
+			text-decoration: none;
+			border-bottom: 2px solid var(--sl-color-gray-5);
+			color: var(--sl-color-gray-3);
+			outline-offset: var(--sl-outline-offset-inside);
+			overflow-wrap: initial;
+		}
+		.tab [role='tab'][aria-selected='true'] {
+			color: var(--sl-color-white);
+			border-color: var(--sl-color-text-accent);
+			font-weight: 600;
+		}
 
-	.tablist-wrapper ~ :global([role='tabpanel']) {
-		margin-top: 1rem;
+		.tablist-wrapper ~ :global([role='tabpanel']) {
+			margin-top: 1rem;
+		}
 	}
 </style>
 

package/utils/head.ts

@@ -134,7 +134,9 @@ function hasTag(head: HeadConfig, entry: HeadConfig[number]): boolean {
 		case 'meta':
 			return hasOneOf(head, entry, ['name', 'property', 'http-equiv']);
 		case 'link':
-			return head.some(({ attrs }) => entry.attrs.rel === 'canonical' && attrs.rel === 'canonical');
+			return head.some(
+				({ attrs }) => entry.attrs?.rel === 'canonical' && attrs?.rel === 'canonical'
+			);
 		default:
 			return false;
 	}
@@ -148,7 +150,7 @@ function hasOneOf(head: HeadConfig, entry: HeadConfig[number], keys: string[]):
 	const attr = getAttr(keys, entry);
 	if (!attr) return false;
 	const [key, val] = attr;
-	return head.some(({ tag, attrs }) => tag === entry.tag && attrs[key] === val);
+	return head.some(({ tag, attrs }) => tag === entry.tag && attrs?.[key] === val);
 }
 
 /** Find the first matching key–value pair in a head entry’s attributes. */
@@ -158,7 +160,7 @@ function getAttr(
 ): [key: string, value: string | boolean] | undefined {
 	let attr: [string, string | boolean] | undefined;
 	for (const key of keys) {
-		const val = entry.attrs[key];
+		const val = entry.attrs?.[key];
 		if (val) {
 			attr = [key, val];
 			break;
@@ -186,6 +188,7 @@ function getImportance(entry: HeadConfig[number]) {
 	// 1. Important meta tags.
 	if (
 		entry.tag === 'meta' &&
+		entry.attrs &&
 		('charset' in entry.attrs || 'http-equiv' in entry.attrs || entry.attrs.name === 'viewport')
 	) {
 		return 100;
@@ -197,7 +200,12 @@ function getImportance(entry: HeadConfig[number]) {
 		// The default favicon should be below any extra icons that the user may have set
 		// because if several icons are equally appropriate, the last one is used and we
 		// want to use the SVG icon when supported.
-		if (entry.tag === 'link' && 'rel' in entry.attrs && entry.attrs.rel === 'shortcut icon') {
+		if (
+			entry.tag === 'link' &&
+			entry.attrs &&
+			'rel' in entry.attrs &&
+			entry.attrs.rel === 'shortcut icon'
+		) {
 			return 70;
 		}
 		return 80;

package/utils/starlight-page.ts

@@ -1,5 +1,5 @@
 import { z } from 'astro/zod';
-import { type ContentConfig, type SchemaContext } from 'astro:content';
+import { type ContentConfig, type ImageFunction, type SchemaContext } from 'astro:content';
 import project from 'virtual:starlight/project-context';
 import config from 'virtual:starlight/user-config';
 import { getCollectionPathFromRoot } from './collection';
@@ -179,25 +179,22 @@ export async function generateStarlightPageRouteData({
 
 /** Validates the Starlight page frontmatter properties from the props received by a Starlight page. */
 async function getStarlightPageFrontmatter(frontmatter: StarlightPageFrontmatter) {
-	// This needs to be in sync with ImageMetadata.
-	// https://github.com/withastro/astro/blob/cf993bc263b58502096f00d383266cd179f331af/packages/astro/src/assets/types.ts#L32
 	const schema = await StarlightPageFrontmatterSchema({
-		image: () =>
-			z.object({
-				src: z.string(),
-				width: z.number(),
-				height: z.number(),
-				format: z.union([
-					z.literal('png'),
-					z.literal('jpg'),
-					z.literal('jpeg'),
-					z.literal('tiff'),
-					z.literal('webp'),
-					z.literal('gif'),
-					z.literal('svg'),
-					z.literal('avif'),
-				]),
-			}),
+		image: (() =>
+			// Mock validator for ImageMetadata.
+			// https://github.com/withastro/astro/blob/cf993bc263b58502096f00d383266cd179f331af/packages/astro/src/assets/types.ts#L32
+			// It uses a custom validation approach because imported SVGs have a type of `function` as
+			// well as containing the metadata properties and this ensures we handle those correctly.
+			z.custom(
+				(value) =>
+					value &&
+					(typeof value === 'function' || typeof value === 'object') &&
+					'src' in value &&
+					'width' in value &&
+					'height' in value &&
+					'format' in value,
+				'Invalid image passed to `<StarlightPage>` component. Expected imported `ImageMetadata` object.'
+			)) as ImageFunction,
 	});
 
 	// Starting with Astro 4.14.0, a frontmatter schema that contains collection references will

package/utils/user-config.ts

@@ -244,6 +244,20 @@ const UserConfigSchema = z.object({
 			}
 		})
 		.describe('Add middleware to process Starlight’s route data for each page.'),
+
+	/** Configure features that impact Starlight’s Markdown processing. */
+	markdown: z
+		.object({
+			/** Define whether headings in content should be rendered with clickable anchor links. Default: `true`. */
+			headingLinks: z
+				.boolean()
+				.default(true)
+				.describe(
+					'Define whether headings in content should be rendered with clickable anchor links. Default: `true`.'
+				),
+		})
+		.default({})
+		.describe('Configure features that impact Starlight’s Markdown processing.'),
 });
 
 export const StarlightConfigSchema = UserConfigSchema.strict()

package/virtual-internal.d.ts

@@ -4,6 +4,8 @@ declare module 'virtual:starlight/git-info' {
 
 declare module 'virtual:starlight/user-css' {}
 
+declare module 'virtual:starlight/optional-css' {}
+
 declare module 'virtual:starlight/user-images' {
 	type ImageMetadata = import('astro').ImageMetadata;
 	export const logos: {

package/style/shiki.css

@@ -1,13 +0,0 @@
-:root {
-	--astro-code-foreground: var(--sl-color-white);
-	--astro-code-background: var(--sl-color-gray-6);
-	--astro-code-token-constant: var(--sl-color-blue-high);
-	--astro-code-token-string: var(--sl-color-green-high);
-	--astro-code-token-comment: var(--sl-color-gray-2);
-	--astro-code-token-keyword: var(--sl-color-purple-high);
-	--astro-code-token-parameter: var(--sl-color-red-high);
-	--astro-code-token-function: var(--sl-color-red-high);
-	--astro-code-token-string-expression: var(--sl-color-green-high);
-	--astro-code-token-punctuation: var(--sl-color-gray-2);
-	--astro-code-token-link: var(--sl-color-blue-high);
-}