@astrojs/starlight 0.5.6 → 0.6.0

package/components/TableOfContents/starlight-toc.ts

@@ -1,103 +1,97 @@
 export class StarlightTOC extends HTMLElement {
-  private _current = this.querySelector(
-    'a[aria-current="true"]'
-  ) as HTMLAnchorElement | null;
-  private minH = parseInt(this.dataset.minH || '2', 10);
-  private maxH = parseInt(this.dataset.maxH || '3', 10);
+	private _current = this.querySelector('a[aria-current="true"]') as HTMLAnchorElement | null;
+	private minH = parseInt(this.dataset.minH || '2', 10);
+	private maxH = parseInt(this.dataset.maxH || '3', 10);
 
-  protected set current(link: HTMLAnchorElement) {
-    if (link === this._current) return;
-    if (this._current) this._current.removeAttribute('aria-current');
-    link.setAttribute('aria-current', 'true');
-    this._current = link;
-  }
+	protected set current(link: HTMLAnchorElement) {
+		if (link === this._current) return;
+		if (this._current) this._current.removeAttribute('aria-current');
+		link.setAttribute('aria-current', 'true');
+		this._current = link;
+	}
 
-  constructor({ smallViewport = false } = {}) {
-    super();
+	constructor({ smallViewport = false } = {}) {
+		super();
 
-    /** All the links in the table of contents. */
-    const links = [...this.querySelectorAll('a')];
+		/** All the links in the table of contents. */
+		const links = [...this.querySelectorAll('a')];
 
-    /** Test if an element is a table-of-contents heading. */
-    const isHeading = (el: Element): el is HTMLHeadingElement => {
-      if (el instanceof HTMLHeadingElement) {
-        // Special case for page title h1
-        if ('pageTitle' in el.dataset) return true;
-        // Check the heading level is within the user-configured limits for the ToC
-        const level = el.tagName[1];
-        if (level) {
-          const int = parseInt(level, 10);
-          if (int >= this.minH && int <= this.maxH) return true;
-        }
-      }
-      return false;
-    };
+		/** Test if an element is a table-of-contents heading. */
+		const isHeading = (el: Element): el is HTMLHeadingElement => {
+			if (el instanceof HTMLHeadingElement) {
+				// Special case for page title h1
+				if ('pageTitle' in el.dataset) return true;
+				// Check the heading level is within the user-configured limits for the ToC
+				const level = el.tagName[1];
+				if (level) {
+					const int = parseInt(level, 10);
+					if (int >= this.minH && int <= this.maxH) return true;
+				}
+			}
+			return false;
+		};
 
-    /** Walk up the DOM to find the nearest heading. */
-    const getElementHeading = (
-      el: Element | null
-    ): HTMLHeadingElement | null => {
-      if (!el) return null;
-      const origin = el;
-      while (el) {
-        if (isHeading(el)) return el;
-        // Assign the previous sibling’s last, most deeply nested child to el.
-        el = el.previousElementSibling;
-        while (el?.lastElementChild) {
-          el = el.lastElementChild;
-        }
-        // Look for headings amongst siblings.
-        const h = getElementHeading(el);
-        if (h) return h;
-      }
-      // Walk back up the parent.
-      return getElementHeading(origin.parentElement);
-    };
+		/** Walk up the DOM to find the nearest heading. */
+		const getElementHeading = (el: Element | null): HTMLHeadingElement | null => {
+			if (!el) return null;
+			const origin = el;
+			while (el) {
+				if (isHeading(el)) return el;
+				// Assign the previous sibling’s last, most deeply nested child to el.
+				el = el.previousElementSibling;
+				while (el?.lastElementChild) {
+					el = el.lastElementChild;
+				}
+				// Look for headings amongst siblings.
+				const h = getElementHeading(el);
+				if (h) return h;
+			}
+			// Walk back up the parent.
+			return getElementHeading(origin.parentElement);
+		};
 
-    /** Handle intersections and set the current link to the heading for the current intersection. */
-    const setCurrent: IntersectionObserverCallback = (entries) => {
-      for (const { isIntersecting, target } of entries) {
-        if (!isIntersecting) continue;
-        const heading = getElementHeading(target);
-        if (!heading) continue;
-        const link = links.find((link) => link.hash === '#' + encodeURIComponent(heading.id));
-        if (link) {
-          this.current = link;
-          break;
-        }
-      }
-    };
+		/** Handle intersections and set the current link to the heading for the current intersection. */
+		const setCurrent: IntersectionObserverCallback = (entries) => {
+			for (const { isIntersecting, target } of entries) {
+				if (!isIntersecting) continue;
+				const heading = getElementHeading(target);
+				if (!heading) continue;
+				const link = links.find((link) => link.hash === '#' + encodeURIComponent(heading.id));
+				if (link) {
+					this.current = link;
+					break;
+				}
+			}
+		};
 
-    // Observe elements with an `id` (most likely headings) and their siblings.
-    // Also observe direct children of `.content` to include elements before
-    // the first heading.
-    const toObserve = document.querySelectorAll(
-      'main [id], main [id] ~ *, main .content > *'
-    );
-    /** Start intersections at nav height + 2rem padding. */
-    const top = (smallViewport ? 104 : 64) + 32;
-    /** End intersections 1.5rem later. */
-    const bottom = top + 24;
+		// Observe elements with an `id` (most likely headings) and their siblings.
+		// Also observe direct children of `.content` to include elements before
+		// the first heading.
+		const toObserve = document.querySelectorAll('main [id], main [id] ~ *, main .content > *');
+		/** Start intersections at nav height + 2rem padding. */
+		const top = (smallViewport ? 104 : 64) + 32;
+		/** End intersections 1.5rem later. */
+		const bottom = top + 24;
 
-    let observer: IntersectionObserver | undefined;
-    function observe() {
-      if (observer) observer.disconnect();
-      const height = document.documentElement.clientHeight;
-      const rootMargin = `-${top}px 0% ${bottom - height}px`;
-      observer = new IntersectionObserver(setCurrent, { rootMargin });
-      toObserve.forEach((h) => observer!.observe(h));
-    }
-    observe();
+		let observer: IntersectionObserver | undefined;
+		function observe() {
+			if (observer) observer.disconnect();
+			const height = document.documentElement.clientHeight;
+			const rootMargin = `-${top}px 0% ${bottom - height}px`;
+			observer = new IntersectionObserver(setCurrent, { rootMargin });
+			toObserve.forEach((h) => observer!.observe(h));
+		}
+		observe();
 
-    const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
-    let timeout: NodeJS.Timeout;
-    window.addEventListener('resize', () => {
-      // Disable intersection observer while window is resizing.
-      if (observer) observer.disconnect();
-      clearTimeout(timeout);
-      timeout = setTimeout(() => onIdle(observe), 200);
-    });
-  }
+		const onIdle = window.requestIdleCallback || ((cb) => setTimeout(cb, 1));
+		let timeout: NodeJS.Timeout;
+		window.addEventListener('resize', () => {
+			// Disable intersection observer while window is resizing.
+			if (observer) observer.disconnect();
+			clearTimeout(timeout);
+			timeout = setTimeout(() => onIdle(observe), 200);
+		});
+	}
 }
 
 customElements.define('starlight-toc', StarlightTOC);

package/components/TableOfContents.astro

@@ -4,10 +4,10 @@ import TableOfContentsList from './TableOfContents/TableOfContentsList.astro';
 import type { TocItem } from './TableOfContents/generateToC';
 
 interface Props {
-  toc: TocItem[];
-  locale: string | undefined;
-  maxHeadingLevel: number;
-  minHeadingLevel: number;
+	toc: TocItem[];
+	locale: string | undefined;
+	maxHeadingLevel: number;
+	minHeadingLevel: number;
 }
 
 const { locale, toc, maxHeadingLevel, minHeadingLevel } = Astro.props;
@@ -15,10 +15,10 @@ const t = useTranslations(locale);
 ---
 
 <starlight-toc data-min-h={minHeadingLevel} data-max-h={maxHeadingLevel}>
-  <nav aria-labelledby="starlight__on-this-page">
-    <h2 id="starlight__on-this-page">{t('tableOfContents.onThisPage')}</h2>
-    <TableOfContentsList {toc} />
-  </nav>
+	<nav aria-labelledby="starlight__on-this-page">
+		<h2 id="starlight__on-this-page">{t('tableOfContents.onThisPage')}</h2>
+		<TableOfContentsList {toc} />
+	</nav>
 </starlight-toc>
 
 <script src="./TableOfContents/starlight-toc"></script>

package/components/ThemeProvider.astro

@@ -4,39 +4,35 @@ import Icon from '../user-components/Icon.astro';
 
 {/* This is intentionally inlined to avoid FOUC. */}
 <script is:inline>
-  window.StarlightThemeProvider = (() => {
-    const storedTheme =
-      typeof localStorage !== 'undefined' &&
-      localStorage.getItem('starlight-theme');
-    const theme =
-      storedTheme ||
-      (window.matchMedia('(prefers-color-scheme: light)').matches
-        ? 'light'
-        : 'dark');
-    document.documentElement.dataset.theme =
-      theme === 'light' ? 'light' : 'dark';
-    return {
-      updatePickers(theme = storedTheme || 'auto') {
-        document.querySelectorAll('starlight-theme-select').forEach((picker) => {
-          const select = picker.querySelector('select');
-          if (select) select.value = theme;
-          /** @type {HTMLTemplateElement | null} */
-          const tmpl = document.querySelector(`#theme-icons`);
-          const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
-          if (newIcon) {
-            const oldIcon = picker.querySelector('svg.label-icon');
-            if (oldIcon) {
-              oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
-            }
-          }
-        });
-      },
-    };
-  })();
+	window.StarlightThemeProvider = (() => {
+		const storedTheme =
+			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
+		const theme =
+			storedTheme ||
+			(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+		document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
+		return {
+			updatePickers(theme = storedTheme || 'auto') {
+				document.querySelectorAll('starlight-theme-select').forEach((picker) => {
+					const select = picker.querySelector('select');
+					if (select) select.value = theme;
+					/** @type {HTMLTemplateElement | null} */
+					const tmpl = document.querySelector(`#theme-icons`);
+					const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
+					if (newIcon) {
+						const oldIcon = picker.querySelector('svg.label-icon');
+						if (oldIcon) {
+							oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
+						}
+					}
+				});
+			},
+		};
+	})();
 </script>
 
 <template id="theme-icons">
-  <Icon name="sun" class="light" />
-  <Icon name="moon" class="dark" />
-  <Icon name="laptop" class="auto" />
+	<Icon name="sun" class="light" />
+	<Icon name="moon" class="dark" />
+	<Icon name="laptop" class="auto" />
 </template>

package/components/ThemeSelect.astro

@@ -3,96 +3,91 @@ import { useTranslations } from '../utils/translations';
 import Select from './Select.astro';
 
 interface Props {
-  locale: string | undefined;
+	locale: string | undefined;
 }
 
 const t = useTranslations(Astro.props.locale);
 ---
 
 <starlight-theme-select>
-  {
-    /* TODO: Can we give this select a width that works well for each language’s strings? */
-  }
-  <Select
-    icon="laptop"
-    label={t('themeSelect.accessibleLabel')}
-    value="auto"
-    options={[
-      { label: t('themeSelect.dark'), selected: false, value: 'dark' },
-      { label: t('themeSelect.light'), selected: false, value: 'light' },
-      { label: t('themeSelect.auto'), selected: true, value: 'auto' },
-    ]}
-    width="6.25em"
-  />
+	{/* TODO: Can we give this select a width that works well for each language’s strings? */}
+	<Select
+		icon="laptop"
+		label={t('themeSelect.accessibleLabel')}
+		value="auto"
+		options={[
+			{ label: t('themeSelect.dark'), selected: false, value: 'dark' },
+			{ label: t('themeSelect.light'), selected: false, value: 'light' },
+			{ label: t('themeSelect.auto'), selected: true, value: 'auto' },
+		]}
+		width="6.25em"
+	/>
 </starlight-theme-select>
 
 {/* Inlined to avoid FOUC. Uses global scope from `ThemeProvider.astro` */}
 <script is:inline>
-  StarlightThemeProvider.updatePickers();
+	StarlightThemeProvider.updatePickers();
 </script>
 
 <script>
-  type Theme = 'auto' | 'dark' | 'light';
+	type Theme = 'auto' | 'dark' | 'light';
 
-  class StarlightThemeSelect extends HTMLElement {
-    /** Key in `localStorage` to store color theme preference at. */
-    #key = 'starlight-theme';
+	class StarlightThemeSelect extends HTMLElement {
+		/** Key in `localStorage` to store color theme preference at. */
+		#key = 'starlight-theme';
 
-    constructor() {
-      super();
-      this.#onThemeChange(this.#loadTheme());
-      const select = this.querySelector('select');
-      if (select) {
-        select.addEventListener('change', (e) => {
-          if (e.currentTarget instanceof HTMLSelectElement) {
-            this.#onThemeChange(this.#parseTheme(e.currentTarget.value));
-          }
-        });
-      }
-    }
+		constructor() {
+			super();
+			this.#onThemeChange(this.#loadTheme());
+			const select = this.querySelector('select');
+			if (select) {
+				select.addEventListener('change', (e) => {
+					if (e.currentTarget instanceof HTMLSelectElement) {
+						this.#onThemeChange(this.#parseTheme(e.currentTarget.value));
+					}
+				});
+			}
+		}
 
-    /** Get a typesafe theme string from any JS value (unknown values are coerced to `'auto'`). */
-    #parseTheme(theme: unknown): Theme {
-      if (theme === 'auto' || theme === 'dark' || theme === 'light') {
-        return theme;
-      } else {
-        return 'auto';
-      }
-    }
+		/** Get a typesafe theme string from any JS value (unknown values are coerced to `'auto'`). */
+		#parseTheme(theme: unknown): Theme {
+			if (theme === 'auto' || theme === 'dark' || theme === 'light') {
+				return theme;
+			} else {
+				return 'auto';
+			}
+		}
 
-    /** Get the preferred system color scheme. */
-    #getPreferredColorScheme(): Theme {
-      return matchMedia('(prefers-color-scheme: light)').matches
-        ? 'light'
-        : 'dark';
-    }
+		/** Get the preferred system color scheme. */
+		#getPreferredColorScheme(): Theme {
+			return matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+		}
 
-    /** Update select menu UI, document theme, and local storage state. */
-    #onThemeChange(theme: Theme): void {
-      StarlightThemeProvider.updatePickers(theme);
-      document.documentElement.dataset.theme =
-        theme === 'auto' ? this.#getPreferredColorScheme() : theme;
-      this.#storeTheme(theme);
-    }
+		/** Update select menu UI, document theme, and local storage state. */
+		#onThemeChange(theme: Theme): void {
+			StarlightThemeProvider.updatePickers(theme);
+			document.documentElement.dataset.theme =
+				theme === 'auto' ? this.#getPreferredColorScheme() : theme;
+			this.#storeTheme(theme);
+		}
 
-    /** Store the user’s preference in `localStorage`. */
-    #storeTheme(theme: Theme): void {
-      if (typeof localStorage !== 'undefined') {
-        if (theme === 'light' || theme === 'dark') {
-          localStorage.setItem(this.#key, theme);
-        } else {
-          localStorage.removeItem(this.#key);
-        }
-      }
-    }
+		/** Store the user’s preference in `localStorage`. */
+		#storeTheme(theme: Theme): void {
+			if (typeof localStorage !== 'undefined') {
+				if (theme === 'light' || theme === 'dark') {
+					localStorage.setItem(this.#key, theme);
+				} else {
+					localStorage.removeItem(this.#key);
+				}
+			}
+		}
 
-    /** Load the user’s preference from `localStorage`. */
-    #loadTheme(): Theme {
-      const theme =
-        typeof localStorage !== 'undefined' && localStorage.getItem(this.#key);
-      return this.#parseTheme(theme);
-    }
-  }
+		/** Load the user’s preference from `localStorage`. */
+		#loadTheme(): Theme {
+			const theme = typeof localStorage !== 'undefined' && localStorage.getItem(this.#key);
+			return this.#parseTheme(theme);
+		}
+	}
 
-  customElements.define('starlight-theme-select', StarlightThemeSelect);
+	customElements.define('starlight-theme-select', StarlightThemeSelect);
 </script>

package/global.d.ts

@@ -1,5 +1,5 @@
 declare global {
-  var StarlightThemeProvider: {
-    updatePickers(theme?: string): void;
-  };
+	var StarlightThemeProvider: {
+		updatePickers(theme?: string): void;
+	};
 }

package/index.astro

@@ -5,7 +5,7 @@ import { paths } from './utils/routing';
 import Page from './layout/Page.astro';
 
 export async function getStaticPaths() {
-  return paths;
+	return paths;
 }
 
 type Props = InferGetStaticPropsType<typeof getStaticPaths>;

package/index.ts

@@ -7,69 +7,62 @@ import { starlightAsides } from './integrations/asides';
 import { starlightSitemap } from './integrations/sitemap';
 import { vitePluginStarlightUserConfig } from './integrations/virtual-user-config';
 import { errorMap } from './utils/error-map';
-import {
-  StarlightConfigSchema,
-  StarlightUserConfig,
-} from './utils/user-config';
+import { StarlightConfigSchema, StarlightUserConfig } from './utils/user-config';
 
-export default function StarlightIntegration(
-  opts: StarlightUserConfig
-): AstroIntegration[] {
-  const parsedConfig = StarlightConfigSchema.safeParse(opts, { errorMap });
+export default function StarlightIntegration(opts: StarlightUserConfig): AstroIntegration[] {
+	const parsedConfig = StarlightConfigSchema.safeParse(opts, { errorMap });
 
-  if (!parsedConfig.success) {
-    throw new Error(
-      'Invalid config passed to starlight integration\n' +
-        parsedConfig.error.issues.map((i) => i.message).join('\n')
-    );
-  }
+	if (!parsedConfig.success) {
+		throw new Error(
+			'Invalid config passed to starlight integration\n' +
+				parsedConfig.error.issues.map((i) => i.message).join('\n')
+		);
+	}
 
-  const userConfig = parsedConfig.data;
+	const userConfig = parsedConfig.data;
 
-  const Starlight: AstroIntegration = {
-    name: '@astrojs/starlight',
-    hooks: {
-      'astro:config:setup': ({ config, injectRoute, updateConfig }) => {
-        injectRoute({
-          pattern: '404',
-          entryPoint: '@astrojs/starlight/404.astro',
-        });
-        injectRoute({
-          pattern: '[...slug]',
-          entryPoint: '@astrojs/starlight/index.astro',
-        });
-        const newConfig: AstroUserConfig = {
-          vite: {
-            plugins: [vitePluginStarlightUserConfig(userConfig, config)],
-          },
-          markdown: {
-            remarkPlugins: [...starlightAsides()],
-            shikiConfig:
-              // Configure Shiki theme if the user is using the default github-dark theme.
-              config.markdown.shikiConfig.theme !== 'github-dark'
-                ? {}
-                : { theme: 'css-variables' },
-          },
-          build: { inlineStylesheets: 'auto' },
-          experimental: { assets: true, inlineStylesheets: 'auto' },
-        };
-        updateConfig(newConfig);
-      },
+	const Starlight: AstroIntegration = {
+		name: '@astrojs/starlight',
+		hooks: {
+			'astro:config:setup': ({ config, injectRoute, updateConfig }) => {
+				injectRoute({
+					pattern: '404',
+					entryPoint: '@astrojs/starlight/404.astro',
+				});
+				injectRoute({
+					pattern: '[...slug]',
+					entryPoint: '@astrojs/starlight/index.astro',
+				});
+				const newConfig: AstroUserConfig = {
+					vite: {
+						plugins: [vitePluginStarlightUserConfig(userConfig, config)],
+					},
+					markdown: {
+						remarkPlugins: [...starlightAsides()],
+						shikiConfig:
+							// Configure Shiki theme if the user is using the default github-dark theme.
+							config.markdown.shikiConfig.theme !== 'github-dark' ? {} : { theme: 'css-variables' },
+					},
+					build: { inlineStylesheets: 'auto' },
+					experimental: { assets: true, inlineStylesheets: 'auto' },
+				};
+				updateConfig(newConfig);
+			},
 
-      'astro:build:done': ({ dir }) => {
-        const targetDir = fileURLToPath(dir);
-        const cwd = dirname(fileURLToPath(import.meta.url));
-        const relativeDir = relative(cwd, targetDir);
-        return new Promise<void>((resolve) => {
-          spawn('npx', ['-y', 'pagefind', '--source', relativeDir], {
-            stdio: 'inherit',
-            shell: true,
-            cwd,
-          }).on('close', () => resolve());
-        });
-      },
-    },
-  };
+			'astro:build:done': ({ dir }) => {
+				const targetDir = fileURLToPath(dir);
+				const cwd = dirname(fileURLToPath(import.meta.url));
+				const relativeDir = relative(cwd, targetDir);
+				return new Promise<void>((resolve) => {
+					spawn('npx', ['-y', 'pagefind', '--source', relativeDir], {
+						stdio: 'inherit',
+						shell: true,
+						cwd,
+					}).on('close', () => resolve());
+				});
+			},
+		},
+	};
 
-  return [starlightSitemap(userConfig), Starlight, mdx()];
+	return [starlightSitemap(userConfig), Starlight, mdx()];
 }