@astrojs/starlight 0.5.6 → 0.6.0

package/layout/PageFrame.astro

@@ -3,8 +3,8 @@ import MobileMenuToggle from '../components/MobileMenuToggle.astro';
 import { useTranslations } from '../utils/translations';
 
 interface Props {
-  hasSidebar: boolean;
-  locale: string | undefined;
+	hasSidebar: boolean;
+	locale: string | undefined;
 }
 
 const { hasSidebar, locale } = Astro.props;
@@ -12,81 +12,79 @@ const t = useTranslations(locale);
 ---
 
 <div class="page flex">
-  <header class="header"><slot name="header" /></header>
-  {
-    hasSidebar && (
-      <nav class="sidebar" aria-label={t('sidebarNav.accessibleLabel')}>
-        <MobileMenuToggle {locale} />
-        <div id="starlight__sidebar" class="sidebar-pane">
-          <div class="sidebar-content">
-            <slot name="sidebar" />
-          </div>
-        </div>
-      </nav>
-    )
-  }
-  <div class="main-frame"><slot /></div>
+	<header class="header"><slot name="header" /></header>
+	{
+		hasSidebar && (
+			<nav class="sidebar" aria-label={t('sidebarNav.accessibleLabel')}>
+				<MobileMenuToggle {locale} />
+				<div id="starlight__sidebar" class="sidebar-pane">
+					<div class="sidebar-content">
+						<slot name="sidebar" />
+					</div>
+				</div>
+			</nav>
+		)
+	}
+	<div class="main-frame"><slot /></div>
 </div>
 
 <style>
-  .page {
-    flex-direction: column;
-    min-height: 100vh;
-  }
+	.page {
+		flex-direction: column;
+		min-height: 100vh;
+	}
 
-  .header {
-    z-index: var(--sl-z-index-navbar);
-    position: fixed;
-    inset-inline-start: 0;
-    inset-block-start: 0;
-    width: 100%;
-    height: var(--sl-nav-height);
-    border-bottom: 1px solid var(--sl-color-hairline-shade);
-    padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
-    padding-inline-end: var(--sl-nav-pad-x);
-    background-color: var(--sl-color-bg-nav);
-  }
+	.header {
+		z-index: var(--sl-z-index-navbar);
+		position: fixed;
+		inset-inline-start: 0;
+		inset-block-start: 0;
+		width: 100%;
+		height: var(--sl-nav-height);
+		border-bottom: 1px solid var(--sl-color-hairline-shade);
+		padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+		padding-inline-end: var(--sl-nav-pad-x);
+		background-color: var(--sl-color-bg-nav);
+	}
 
-  :global([data-has-sidebar]) .header {
-    padding-inline-end: calc(
-      var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
-    );
-  }
+	:global([data-has-sidebar]) .header {
+		padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
+	}
 
-  .sidebar-pane {
-    visibility: var(--sl-sidebar-visibility, hidden);
-    position: fixed;
-    z-index: var(--sl-z-index-menu);
-    inset-block: 0;
-    inset-inline-start: 0;
-    padding-top: var(--sl-nav-height);
-    width: 100%;
-    background-color: var(--sl-color-black);
-  }
+	.sidebar-pane {
+		visibility: var(--sl-sidebar-visibility, hidden);
+		position: fixed;
+		z-index: var(--sl-z-index-menu);
+		inset-block: 0;
+		inset-inline-start: 0;
+		padding-top: var(--sl-nav-height);
+		width: 100%;
+		background-color: var(--sl-color-black);
+	}
 
-  :global([aria-expanded='true']) ~ .sidebar-pane {
-    --sl-sidebar-visibility: visible;
-  }
+	:global([aria-expanded='true']) ~ .sidebar-pane {
+		--sl-sidebar-visibility: visible;
+	}
 
-  .sidebar-content {
-    height: 100%;
-    overflow-y: auto;
-  }
+	.sidebar-content {
+		height: 100%;
+		overflow-y: auto;
+	}
 
-  .main-frame {
-    padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
-    padding-inline-start: var(--sl-content-inline-start);
-  }
+	.main-frame {
+		padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+		padding-inline-start: var(--sl-content-inline-start);
+	}
 
-  @media (min-width: 50rem) {
-    :global([data-has-sidebar]) .header {
-      padding-inline-end: var(--sl-nav-pad-x);
-    }
-    .sidebar-pane {
-      --sl-sidebar-visibility: visible;
-      width: var(--sl-sidebar-width);
-      background-color: var(--sl-color-bg-sidebar);
-      border-inline-end: 1px solid var(--sl-color-hairline-shade);
-    }
-  }
+	@media (min-width: 50rem) {
+		:global([data-has-sidebar]) .header {
+			padding-inline-end: var(--sl-nav-pad-x);
+		}
+		.sidebar-pane {
+			--sl-sidebar-visibility: visible;
+			width: var(--sl-sidebar-width);
+			background-color: var(--sl-color-bg-sidebar);
+			border-inline-end: 1px solid var(--sl-color-hairline-shade);
+		}
+	}
 </style>

package/layout/TwoColumnContent.astro

@@ -1,56 +1,54 @@
 ---
 interface Props {
-  hasToC: boolean;
+	hasToC: boolean;
 }
 ---
 
 <div class="lg:flex">
-  {
-    Astro.props.hasToC && (
-      <aside class="right-sidebar-container">
-        <div class="right-sidebar">
-          <slot name="right-sidebar" />
-        </div>
-      </aside>
-    )
-  }
-  <div class="main-pane"><slot /></div>
+	{
+		Astro.props.hasToC && (
+			<aside class="right-sidebar-container">
+				<div class="right-sidebar">
+					<slot name="right-sidebar" />
+				</div>
+			</aside>
+		)
+	}
+	<div class="main-pane"><slot /></div>
 </div>
 
 <style>
-  @media (min-width: 72rem) {
-    .right-sidebar-container {
-      order: 2;
-      position: relative;
-      width: calc(
-        var(--sl-sidebar-width) +
-          (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
-      );
-    }
+	@media (min-width: 72rem) {
+		.right-sidebar-container {
+			order: 2;
+			position: relative;
+			width: calc(
+				var(--sl-sidebar-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
+			);
+		}
 
-    .right-sidebar {
-      position: fixed;
-      top: 0;
-      border-inline-start: 1px solid var(--sl-color-gray-6);
-      padding-top: var(--sl-nav-height);
-      width: 100%;
-      height: 100vh;
-      overflow-y: auto;
-      scrollbar-width: none;
-    }
+		.right-sidebar {
+			position: fixed;
+			top: 0;
+			border-inline-start: 1px solid var(--sl-color-gray-6);
+			padding-top: var(--sl-nav-height);
+			width: 100%;
+			height: 100vh;
+			overflow-y: auto;
+			scrollbar-width: none;
+		}
 
-    .main-pane {
-      width: 100%;
-    }
+		.main-pane {
+			width: 100%;
+		}
 
-    :global([data-has-sidebar]) .main-pane {
-      --sl-content-margin-inline: auto 0;
+		:global([data-has-sidebar]) .main-pane {
+			--sl-content-margin-inline: auto 0;
 
-      order: 1;
-      width: calc(
-        var(--sl-content-width) +
-          (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
-      );
-    }
-  }
+			order: 1;
+			width: calc(
+				var(--sl-content-width) + (100% - var(--sl-content-width) - var(--sl-sidebar-width)) / 2
+			);
+		}
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astrojs/starlight",
-  "version": "0.5.6",
+  "version": "0.6.0",
   "description": "Build beautiful, high-performance documentation websites with Astro",
   "keywords": [
     "docs",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@types/node": "^18.16.19",
     "@vitest/coverage-v8": "^0.33.0",
-    "astro": "^2.8.5",
+    "astro": "^2.9.3",
     "vitest": "^0.33.0"
   },
   "dependencies": {

package/schema.ts

@@ -9,127 +9,140 @@ type IconName = keyof typeof Icons;
 const iconNames = Object.keys(Icons) as [IconName, ...IconName[]];
 
 type ImageFunction = () => z.ZodObject<{
-  src: z.ZodString;
-  width: z.ZodNumber;
-  height: z.ZodNumber;
-  format: z.ZodUnion<
-    [
-      z.ZodLiteral<'png'>,
-      z.ZodLiteral<'jpg'>,
-      z.ZodLiteral<'jpeg'>,
-      z.ZodLiteral<'tiff'>,
-      z.ZodLiteral<'webp'>,
-      z.ZodLiteral<'gif'>,
-      z.ZodLiteral<'svg'>
-    ]
-  >;
+	src: z.ZodString;
+	width: z.ZodNumber;
+	height: z.ZodNumber;
+	format: z.ZodUnion<
+		[
+			z.ZodLiteral<'png'>,
+			z.ZodLiteral<'jpg'>,
+			z.ZodLiteral<'jpeg'>,
+			z.ZodLiteral<'tiff'>,
+			z.ZodLiteral<'webp'>,
+			z.ZodLiteral<'gif'>,
+			z.ZodLiteral<'svg'>,
+		]
+	>;
 }>;
 
 export function docsSchema() {
-  return ({ image }: { image: ImageFunction }) =>
-    z.object({
-      /** The title of the current page. Required. */
-      title: z.string(),
+	return ({ image }: { image: ImageFunction }) =>
+		z.object({
+			/** The title of the current page. Required. */
+			title: z.string(),
 
-      /**
-       * A short description of the current page’s content. Optional, but recommended.
-       * A good description is 150–160 characters long and outlines the key content
-       * of the page in a clear and engaging way.
-       */
-      description: z.string().optional(),
+			/**
+			 * A short description of the current page’s content. Optional, but recommended.
+			 * A good description is 150–160 characters long and outlines the key content
+			 * of the page in a clear and engaging way.
+			 */
+			description: z.string().optional(),
 
-      /**
-       * Custom URL where a reader can edit this page.
-       * Overrides the `editLink.baseUrl` global config if set.
-       *
-       * Can also be set to `false` to disable showing an edit link on this page.
-       */
-      editUrl: z
-        .union([z.string().url(), z.boolean()])
-        .optional()
-        .default(true),
+			/**
+			 * Custom URL where a reader can edit this page.
+			 * Overrides the `editLink.baseUrl` global config if set.
+			 *
+			 * Can also be set to `false` to disable showing an edit link on this page.
+			 */
+			editUrl: z.union([z.string().url(), z.boolean()]).optional().default(true),
 
-      /** Set custom `<head>` tags just for this page. */
-      head: HeadConfigSchema(),
+			/** Set custom `<head>` tags just for this page. */
+			head: HeadConfigSchema(),
 
-      /** Override global table of contents configuration for this page. */
-      tableOfContents: TableOfContentsSchema().optional(),
+			/** Override global table of contents configuration for this page. */
+			tableOfContents: TableOfContentsSchema().optional(),
 
-      /**
-       * Set the layout style for this page.
-       * Can be `'doc'` (the default) or `'splash'` for a wider layout without any sidebars.
-       */
-      template: z.enum(['doc', 'splash']).default('doc'),
+			/**
+			 * Set the layout style for this page.
+			 * Can be `'doc'` (the default) or `'splash'` for a wider layout without any sidebars.
+			 */
+			template: z.enum(['doc', 'splash']).default('doc'),
 
-      /** Display a hero section on this page. */
-      hero: z
-        .object({
-          /**
-           * The large title text to show. If not provided, will default to the top-level `title`.
-           * Can include HTML.
-           */
-          title: z.string().optional(),
-          /**
-           * A short bit of text about your project.
-           * Will be displayed in a smaller size below the title.
-           */
-          tagline: z.string().optional(),
-          /** The image to use in the hero. You can provide either a relative `file` path or raw `html`. */
-          image: z
-            .object({
-              /** Alt text for screenreaders and other assistive technologies describing your hero image. */
-              alt: z.string().default(''),
-              /** Relative path to an image file in your repo, e.g. `../../assets/hero.png`. */
-              file: image().optional(),
-              /** Raw HTML string instead of an image file. Useful for inline SVGs or more complex hero content. */
-              html: z.string().optional(),
-            })
-            .optional(),
-          /** An array of call-to-action links displayed at the bottom of the hero. */
-          actions: z
-            .object({
-              /** Text label displayed in the link. */
-              text: z.string(),
-              /** Value for the link’s `href` attribute, e.g. `/page` or `https://mysite.com`. */
-              link: z.string(),
-              /** Button style to use. One of `primary`, `secondary`, or `minimal` (the default). */
-              variant: z
-                .enum(['primary', 'secondary', 'minimal'])
-                .default('minimal'),
-              /**
-               * An optional icon to display alongside the link text.
-               * Can be an inline `<svg>` or the name of one of Starlight’s built-in icons.
-               */
-              icon: z
-                .union([z.enum(iconNames), z.string().startsWith('<svg')])
-                .transform((icon) => {
-                  const parsedIcon = z.enum(iconNames).safeParse(icon);
-                  return parsedIcon.success
-                    ? ({ type: 'icon', name: parsedIcon.data } as const)
-                    : ({ type: 'raw', html: icon } as const);
-                })
-                .optional(),
-            })
-            .array()
-            .default([]),
-        })
-        .optional(),
-      
-      /**
-       * The last update date of the current page.
-       * Overrides the `lastUpdated` global config or the date generated from the Git history.
-       */
-      lastUpdated: z.union([z.date(), z.boolean()]).optional(),
+			/** Display a hero section on this page. */
+			hero: z
+				.object({
+					/**
+					 * The large title text to show. If not provided, will default to the top-level `title`.
+					 * Can include HTML.
+					 */
+					title: z.string().optional(),
+					/**
+					 * A short bit of text about your project.
+					 * Will be displayed in a smaller size below the title.
+					 */
+					tagline: z.string().optional(),
+					/** The image to use in the hero. You can provide either a relative `file` path or raw `html`. */
+					image: z
+						.object({
+							/** Alt text for screenreaders and other assistive technologies describing your hero image. */
+							alt: z.string().default(''),
+							/** Relative path to an image file in your repo, e.g. `../../assets/hero.png`. */
+							file: image().optional(),
+							/** Raw HTML string instead of an image file. Useful for inline SVGs or more complex hero content. */
+							html: z.string().optional(),
+						})
+						.optional(),
+					/** An array of call-to-action links displayed at the bottom of the hero. */
+					actions: z
+						.object({
+							/** Text label displayed in the link. */
+							text: z.string(),
+							/** Value for the link’s `href` attribute, e.g. `/page` or `https://mysite.com`. */
+							link: z.string(),
+							/** Button style to use. One of `primary`, `secondary`, or `minimal` (the default). */
+							variant: z.enum(['primary', 'secondary', 'minimal']).default('minimal'),
+							/**
+							 * An optional icon to display alongside the link text.
+							 * Can be an inline `<svg>` or the name of one of Starlight’s built-in icons.
+							 */
+							icon: z
+								.union([z.enum(iconNames), z.string().startsWith('<svg')])
+								.transform((icon) => {
+									const parsedIcon = z.enum(iconNames).safeParse(icon);
+									return parsedIcon.success
+										? ({ type: 'icon', name: parsedIcon.data } as const)
+										: ({ type: 'raw', html: icon } as const);
+								})
+								.optional(),
+						})
+						.array()
+						.default([]),
+				})
+				.optional(),
 
-      /**
-       * The previous navigation link configuration.
-       * Overrides the `pagination` global config or the link text and/or URL.
-       */
-      prev: PrevNextLinkConfigSchema(),
-      /**
-       * The next navigation link configuration.
-       * Overrides the `pagination` global config or the link text and/or URL.
-       */
-      next: PrevNextLinkConfigSchema(),
-    });
+			/**
+			 * The last update date of the current page.
+			 * Overrides the `lastUpdated` global config or the date generated from the Git history.
+			 */
+			lastUpdated: z.union([z.date(), z.boolean()]).optional(),
+
+			/**
+			 * The previous navigation link configuration.
+			 * Overrides the `pagination` global config or the link text and/or URL.
+			 */
+			prev: PrevNextLinkConfigSchema(),
+			/**
+			 * The next navigation link configuration.
+			 * Overrides the `pagination` global config or the link text and/or URL.
+			 */
+			next: PrevNextLinkConfigSchema(),
+
+			sidebar: z
+				.object({
+					/**
+					 * The order of this page in the navigation.
+					 * Pages are sorted by this value in ascending order. Then by slug.
+					 * If not provided, pages will be sorted alphabetically by slug.
+					 * If two pages have the same order value, they will be sorted alphabetically by slug.
+					 */
+					order: z.number().optional(),
+
+					/**
+					 * The label for this page in the navigation.
+					 * Defaults to the page `title` if not set.
+					 */
+					label: z.string().optional(),
+				})
+				.default({}),
+		});
 }

package/schemas/favicon.ts

@@ -0,0 +1,40 @@
+import { extname } from 'node:path';
+import { z } from 'astro/zod';
+
+const faviconTypeMap = {
+	'.ico': 'image/x-icon',
+	'.gif': 'image/gif',
+	'.jpeg': 'image/jpeg',
+	'.jpg': 'image/jpeg',
+	'.png': 'image/png',
+	'.svg': 'image/svg+xml',
+};
+
+export const FaviconSchema = () =>
+	z
+		.string()
+		.default('/favicon.svg')
+		.transform((favicon, ctx) => {
+			const ext = extname(favicon).toLowerCase();
+
+			if (!isFaviconExt(ext)) {
+				ctx.addIssue({
+					code: z.ZodIssueCode.custom,
+					message: 'favicon must be a .ico, .gif, .jpg, .png, or .svg file',
+				});
+
+				return z.NEVER;
+			}
+
+			return {
+				href: favicon,
+				type: faviconTypeMap[ext],
+			};
+		})
+		.describe(
+			'The default favicon for your site which should be a path to an image in the `public/` directory.'
+		);
+
+function isFaviconExt(ext: string): ext is keyof typeof faviconTypeMap {
+	return ext in faviconTypeMap;
+}

package/schemas/head.ts

@@ -1,29 +1,18 @@
 import { z } from 'astro/zod';
 
 export const HeadConfigSchema = () =>
-  z
-    .array(
-      z.object({
-        /** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
-        tag: z.enum([
-          'title',
-          'base',
-          'link',
-          'style',
-          'meta',
-          'script',
-          'noscript',
-          'template',
-        ]),
-        /** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
-        attrs: z
-          .record(z.union([z.string(), z.boolean(), z.undefined()]))
-          .default({}),
-        /** Content to place inside the tag (optional). */
-        content: z.string().default(''),
-      })
-    )
-    .default([]);
+	z
+		.array(
+			z.object({
+				/** Name of the HTML tag to add to `<head>`, e.g. `'meta'`, `'link'`, or `'script'`. */
+				tag: z.enum(['title', 'base', 'link', 'style', 'meta', 'script', 'noscript', 'template']),
+				/** Attributes to set on the tag, e.g. `{ rel: 'stylesheet', href: '/custom.css' }`. */
+				attrs: z.record(z.union([z.string(), z.boolean(), z.undefined()])).default({}),
+				/** Content to place inside the tag (optional). */
+				content: z.string().default(''),
+			})
+		)
+		.default([]);
 
 export type HeadUserConfig = z.input<ReturnType<typeof HeadConfigSchema>>;
 export type HeadConfig = z.output<ReturnType<typeof HeadConfigSchema>>;