@tenphi/starlight 0.6.0 → 0.6.1

package/dist/components/GlobalStyles.js

@@ -598,30 +598,6 @@ export default function GlobalStyles() {
     fill: "#surface-2",
   });
 
-  useGlobalStyles(".td-shell__main img", {
-    maxInlineSize: "100%",
-    blockSize: "auto",
-    radius: "$radius",
-  });
-
-  useGlobalStyles(".td-shell__main :where(pre, table)", {
-    maxInlineSize: "100%",
-    overflow: "auto",
-  });
-
-  useGlobalStyles(".td-shell__main :where(pre):not(:where(.td-preview *))", {
-    padding: "($gap * 1.5) ($gap * 2)",
-    fontSize: "$code-font-size",
-    lineHeight: "$code-line-height",
-    letterSpacing: "$code-letter-spacing",
-    border: true,
-    radius: "$card-radius",
-  });
-
-  useGlobalStyles(".td-shell__main a", {
-    color: "#accent-text",
-  });
-
   useGlobalStyles(":root, :root:has(.td-top-tabs)", {
     "$sl-nav-height": {
       "@mobile": "3.5rem",

package/dist/components/LayoutComponents.js

@@ -1,13 +1,5 @@
 import { tasty } from "@tenphi/tasty";
-import chevronDownIcon from "../icons/chevron-down.svg?raw";
-import closeIcon from "../icons/close.svg?raw";
-import contrastIcon from "../icons/contrast.svg?raw";
-import deviceIcon from "../icons/device-desktop.svg?raw";
-import moonIcon from "../icons/moon.svg?raw";
-import searchIcon from "../icons/search.svg?raw";
-import sunIcon from "../icons/sun.svg?raw";
 import { customizeComponent } from "./customize-component.js";
-import { svgIconUrl } from "./svg-icon.js";
 import { configureCookbookStates } from "./tasty-states.js";
 
 configureCookbookStates();
@@ -410,343 +402,3 @@ export const MobileMenuFooterRoot = customizeComponent(
     },
   }),
 );
-
-export const NavigationTreeRoot = customizeComponent(
-  "NavigationTree",
-  { as: "ul" },
-  tasty({
-    as: "ul",
-    styles: {
-      margin: "0",
-      padding: "0",
-      listStyle: "none",
-      NestedList: {
-        $: "ul",
-        margin: "0",
-        padding: "0 0 0 ($gap * 1.5)",
-        listStyle: "none",
-      },
-      Summary: {
-        $: "details > summary",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "($gap * 0.9) ($gap * 1.25)",
-        color: "#text",
-        preset: "body / strong",
-        cursor: "pointer",
-        listStyle: "none",
-      },
-      Marker: { $: "details > summary::-webkit-details-marker", hide: true },
-      SummaryIcon: {
-        $: "details > summary::after",
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        fill: "#text-soft",
-        mask: `url("${svgIconUrl(chevronDownIcon)}") center / contain no-repeat`,
-      },
-      ClosedSummaryIcon: {
-        $: "details:not([open]) > summary::after",
-        rotate: "-90deg",
-      },
-      Link: {
-        $: "a",
-        display: "block",
-        padding: "($gap * 0.9) ($gap * 1.25)",
-        color: "#text-soft",
-        radius: "$radius",
-        textDecoration: "none",
-      },
-      HoverLink: { $: "a:hover", color: "#text", fill: "#surface-2" },
-      CurrentLink: {
-        $: 'a[aria-current="page"]',
-        color: "#accent-text",
-        preset: "body / strong",
-        fill: "color-mix(in oklab, #accent-surface 12%, #surface)",
-      },
-    },
-  }),
-);
-
-export const StandaloneHeaderRoot = customizeComponent(
-  "StandaloneHeader",
-  { as: "header" },
-  tasty({
-    as: "header",
-    styles: {
-      position: "sticky",
-      inset: "0 top",
-      zIndex: "2",
-      display: "flex",
-      flow: "column",
-      paddingInline: {
-        "": "clamp(1.25rem, 3vw, 2rem)",
-        "@shell-mobile": "1rem",
-      },
-      fill: "color-mix(in oklab, #surface 96%, #clear)",
-      backdropFilter: "blur(12px)",
-      border: { "": "0", "@desktop": "1bw bottom" },
-      Primary: {
-        $: ".td-shell__header-primary",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "($gap * 3)",
-        inlineSize: "100%",
-        maxInlineSize: "($layout-width - ($gap * 6))",
-        minBlockSize: "4.5rem",
-        marginInlineStart: "auto",
-        marginInlineEnd: "auto",
-      },
-      Brand: {
-        $: ".td-shell__brand",
-        display: "flex",
-        alignItems: "center",
-        gap: "$gap",
-        minInlineSize: "0",
-      },
-      BrandLink: {
-        $: ".td-shell__brand > a",
-        color: "#text",
-        preset: "heading",
-        textDecoration: "none",
-      },
-      Actions: {
-        $: ".td-shell__actions",
-        display: "flex",
-        alignItems: { "": "center", "@shell-mobile": "stretch" },
-        flow: { "": "row nowrap", "@shell-mobile": "row wrap" },
-        gap: "$gap",
-      },
-      TopNavigation: {
-        $: "> .td-top-tabs",
-        maxInlineSize: "($layout-width - ($gap * 6))",
-        marginInlineStart: "auto",
-        marginInlineEnd: "auto",
-      },
-    },
-  }),
-);
-
-export const AppearanceControlRoot = customizeComponent(
-  "AppearanceControl",
-  { as: "label" },
-  tasty({
-    as: "label",
-    styles: {
-      position: "relative",
-      display: "grid",
-      placeItems: "center",
-      inlineSize: "$control-height",
-      blockSize: "$control-height",
-      radius: "$radius",
-      fill: { "": "#surface-2", ":hover": "#surface-2-hover" },
-      Select: {
-        $: "select",
-        position: "absolute",
-        inset: "0",
-        inlineSize: "100%",
-        blockSize: "100%",
-        padding: "0",
-        border: "0",
-        opacity: "0",
-        cursor: "pointer",
-      },
-      Icon: {
-        $: "&::before",
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        fill: "#text-soft",
-        mask: {
-          "": `url("${svgIconUrl(deviceIcon)}") center / contain no-repeat`,
-          ':has([data-docs-theme] option[value="light"]:checked)': `url("${svgIconUrl(sunIcon)}") center / contain no-repeat`,
-          ':has([data-docs-theme] option[value="dark"]:checked)': `url("${svgIconUrl(moonIcon)}") center / contain no-repeat`,
-          ".td-appearance-control--contrast": `url("${svgIconUrl(contrastIcon)}") center / contain no-repeat`,
-        },
-        pointerEvents: "none",
-      },
-    },
-  }),
-);
-
-export const SearchTriggerRoot = customizeComponent(
-  "SearchTrigger",
-  { as: "button" },
-  tasty({
-    as: "button",
-    styles: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: "$gap",
-      paddingInline: "($gap * 1.5)",
-      color: "#text",
-      border: true,
-      radius: "$radius",
-      fill: {
-        "": "#surface-2",
-        ":hover": "#surface-2-hover",
-        ":active": "#surface-2-pressed",
-      },
-      transition: "fill 120ms ease",
-      Icon: {
-        $: "&::before",
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        flexGrow: "0",
-        flexShrink: "0",
-        flexBasis: "auto",
-        fill: "#current",
-        mask: `url("${svgIconUrl(searchIcon)}") center / contain no-repeat`,
-      },
-      Shortcut: {
-        $: "> kbd",
-        display: "flex",
-        gap: "0.125rem",
-        marginInlineStart: "($gap * 1.5)",
-        color: "#text-soft",
-        preset: "small",
-        font: "$body-font-family",
-      },
-      Key: { $: "kbd", font: "$body-font-family" },
-    },
-  }),
-);
-
-export const DocsLayoutRoot = customizeComponent(
-  "DocsLayout",
-  { as: "div" },
-  tasty({
-    as: "div",
-    styles: {
-      display: "grid",
-      gridColumns: {
-        "": "minmax(13rem, $sidebar-width) minmax(0, 1fr)",
-        "@shell-mobile": "1fr",
-      },
-      inlineSize: "min(100%, $layout-width)",
-      minBlockSize: "100vh",
-      marginInlineStart: "auto",
-      marginInlineEnd: "auto",
-    },
-  }),
-);
-
-export const DocsSidebarRoot = customizeComponent(
-  "DocsSidebar",
-  { as: "nav" },
-  tasty({
-    as: "nav",
-    styles: {
-      padding: {
-        "": "($gap * 5) ($gap * 3)",
-        "@shell-mobile": "($gap * 2) ($gap * 3)",
-      },
-    },
-  }),
-);
-
-export const DocsArticleRoot = customizeComponent(
-  "DocsArticle",
-  { as: "main" },
-  tasty({
-    as: "main",
-    styles: {
-      inlineSize: "min(100%, $content-width)",
-      padding: "($gap * 3) clamp(1.5rem, 5vw, 4rem) ($gap * 10)",
-    },
-  }),
-);
-
-export const SearchDialogRoot = customizeComponent(
-  "SearchDialog",
-  { as: "dialog" },
-  tasty({
-    as: "dialog",
-    styles: {
-      inlineSize: "min(42rem, calc(100% - 2rem))",
-      padding: "($gap * 2.5)",
-      color: "#text",
-      fill: "#surface",
-      border: "$border-width solid #border-strong",
-      radius: "$card-radius",
-      shadow: "$sl-shadow-lg",
-      Backdrop: { $: "&::backdrop", fill: "#overlay" },
-      Form: { $: "form", float: "inline-end" },
-      LabelAndInput: {
-        $: "label, input",
-        display: "block",
-        inlineSize: "100%",
-      },
-      Input: {
-        $: "input",
-        marginBlock: "$gap ($gap * 2)",
-        paddingInline: "($gap * 1.5)",
-        color: "#text",
-        border: true,
-        radius: "$radius",
-        fill: "#surface",
-      },
-      Close: {
-        $: 'button[aria-label="Close search"]',
-        display: "grid",
-        placeItems: "center",
-        inlineSize: "$control-height",
-        padding: "0",
-        overflow: "hidden",
-        color: "#clear",
-        border: true,
-        radius: "$radius",
-        fill: {
-          "": "#surface-2",
-          ":hover": "#surface-2-hover",
-          ":active": "#surface-2-pressed",
-        },
-      },
-      CloseIcon: {
-        $: 'button[aria-label="Close search"]::before',
-        content: '""',
-        inlineSize: "1rem",
-        blockSize: "1rem",
-        color: "#text",
-        fill: "#current",
-        mask: `url("${svgIconUrl(closeIcon)}") center / contain no-repeat`,
-      },
-    },
-  }),
-);
-
-export const SkipLinkRoot = customizeComponent(
-  "SkipLink",
-  { as: "a" },
-  tasty({
-    as: "a",
-    styles: {
-      position: "fixed",
-      inset: "$gap auto auto $gap",
-      zIndex: "4",
-      translate: { "": "0 -150%", ":focus": "0" },
-      padding: "$gap ($gap * 1.5)",
-      color: "#accent-surface-text",
-      radius: "$radius",
-      fill: "#accent-surface",
-    },
-  }),
-);
-
-export const VisuallyHiddenRoot = tasty({
-  as: "span",
-  styles: {
-    position: "absolute",
-    inlineSize: "1px",
-    blockSize: "1px",
-    padding: "0",
-    margin: "-1px",
-    overflow: "hidden",
-    clip: "rect(0, 0, 0, 0)",
-    whiteSpace: "nowrap",
-    border: "0",
-  },
-});

package/dist/index.d.ts

@@ -6,6 +6,7 @@ interface StarlightOptions {
   title: string;
   description?: string;
   customCss?: string[];
+  disable404Route?: boolean;
   pagefind?: false | Record<string, unknown>;
   sidebar?: unknown[];
   [key: string]: unknown;

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCoC7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBAsaa,eACd,QAAQ,kBAAkB,gBACzB;;;UC5cc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;EAEV,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCpC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/starlight-runtime.d.ts","../src/integration.ts","../src/theme/index.ts","../src/theme/defaults.ts"],"mappings":";;;;UAEiB;EACf;EACA;EACA;EACA;EACA,mBAAmB;EACnB;GACC;;iBAGqB,UAAU,SAAS,mBAAmB;;;UCmC7C;EACf,SAAS;EACT;;iBAGsB,SACtB,UAAS,kBACR;iBA4aa,eACd,QAAQ,kBAAkB,gBACzB;;;UCldc;EACf;IACE,SAAS;IACT,UAAU;IACV,UAAU;IACV,MAAM;IACN,UAAU;IACV,YAAY;IACZ,eAAe;IACf,mBAAmB;IACnB,OAAO;IACP,QAAQ;;EAEV,QAAQ;EACR,SAAS,eAAe;EACxB;IACE;IACA;IACA;IACA;;EAEF,aAAa;;iBAGC,iBAAiB,QAAO,cAAmB;;;cCpC9C;;;;;;;;;;;;cAkBA,4BAA4B,eAAe"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { n as starlight, t as createStarlightCollection } from "./content-Cwk8rm6i.js";
-import { a as resolveNavigationLayout } from "./navigation-CC0dlAL8.js";
+import { a as resolveNavigationLayout } from "./navigation-CkQXI2Zb.js";
 import { createRequire } from "node:module";
 import { existsSync } from "node:fs";
 import { cp, mkdir, readFile } from "node:fs/promises";
@@ -334,8 +334,6 @@ function cookbook(options = {}) {
 	if (docsTheme.diagnostics.some((diagnostic) => diagnostic.severity === "error")) throw new Error(docsTheme.diagnostics.map((diagnostic) => diagnostic.message).join("\n"));
 	configureTastyTheme(options.config?.theme, docsTheme);
 	configureComponentStyles(options.config?.theme?.styles);
-	const searchClientPath = fileURLToPath(new URL("./client/search.js", import.meta.url));
-	const appearanceClientPath = fileURLToPath(new URL("./client/appearance.js", import.meta.url));
 	const components = {
 		Header: fileURLToPath(new URL("./overrides/Header.astro", import.meta.url)),
 		Sidebar: fileURLToPath(new URL("./overrides/Sidebar.astro", import.meta.url)),
@@ -348,18 +346,11 @@ function cookbook(options = {}) {
 		islands: false,
 		css: { mode: "extract" }
 	});
-	const starlightIntegration = starlight({
-		title: options.config?.site?.title ?? "Documentation",
-		...options.config?.site?.description ? { description: options.config.site.description } : {},
-		...options.config?.search?.enabled === false ? { pagefind: false } : {},
-		components,
-		sidebar: starlightSidebar(navigation)
-	});
-	let inner = [tasty, starlightIntegration];
+	let inner = [tasty];
 	let projectRoot = options.root;
 	let graphConfig = options.config;
 	let graph;
-	let usingStarlight = false;
+	let usingContentCollection = false;
 	async function loadGraph(refresh = false) {
 		if (!graph || refresh) {
 			graph = await createDocsGraph({
@@ -374,11 +365,7 @@ function cookbook(options = {}) {
 		name: "cookbook",
 		hooks: {
 			"astro:config:setup": async (context) => {
-				inner = [
-					(await importNative(pathToFileURL(astroReactIntegration).href)).default(),
-					tasty,
-					starlightIntegration
-				];
+				const react = (await importNative(pathToFileURL(astroReactIntegration).href)).default();
 				if (context.config.integrations.some((integration) => integration.name === "@astrojs/starlight")) throw new Error("Cookbook already includes Starlight. Remove the direct @astrojs/starlight integration before continuing.");
 				projectRoot ??= fileURLToPath(context.config.root);
 				const base = options.config?.build?.base ?? context.config.base;
@@ -389,7 +376,26 @@ function cookbook(options = {}) {
 						base
 					}
 				};
-				usingStarlight = hasContentConfig(context.config.srcDir);
+				usingContentCollection = hasContentConfig(context.config.srcDir);
+				const starlightIntegration = starlight({
+					title: options.config?.site?.title ?? "Documentation",
+					...options.config?.site?.description ? { description: options.config.site.description } : {},
+					...options.config?.search?.enabled === false ? { pagefind: false } : {},
+					...!usingContentCollection ? { disable404Route: true } : {},
+					components,
+					sidebar: usingContentCollection ? starlightSidebar(navigation) : []
+				});
+				inner = [
+					react,
+					tasty,
+					starlightIntegration
+				];
+				let markdownRuntime = {
+					image: context.config.image,
+					markdown: context.config.markdown,
+					srcDir: context.config.srcDir
+				};
+				let markdownRenderer;
 				context.updateConfig({
 					base,
 					output: "static",
@@ -403,7 +409,27 @@ function cookbook(options = {}) {
 						plugins: [virtualDocsPlugin(async () => {
 							const loaded = await loadGraph();
 							return {
-								entries: loaded.entries,
+								entries: usingContentCollection ? loaded.entries : await Promise.all(loaded.entries.map(async (entry) => {
+									const { image, markdown, srcDir } = markdownRuntime;
+									markdownRenderer ??= markdown.processor.createRenderer({
+										image,
+										syntaxHighlight: markdown.syntaxHighlight,
+										shikiConfig: markdown.shikiConfig,
+										gfm: markdown.gfm,
+										smartypants: markdown.smartypants
+									});
+									const rendered = await (await markdownRenderer).render(entry.transformedBody, {
+										frontmatter: entry.frontmatter,
+										fileURL: starlightContentUrl(entry.route, srcDir)
+									});
+									return {
+										...entry,
+										rendered: {
+											html: rendered.code,
+											headings: rendered.metadata.headings
+										}
+									};
+								})),
 								routes: loaded.routes,
 								site: documentedSite(loaded),
 								base: loaded.config.build.base,
@@ -435,35 +461,42 @@ function cookbook(options = {}) {
 					}
 				});
 				await callInner(inner.slice(0, 2), "astro:config:setup", context);
-				if (!usingStarlight) {
+				if (!usingContentCollection) {
 					graph = await createDocsGraph({
 						root: projectRoot,
 						config: graphConfig
 					});
 					assertValidDocs(graph);
-					if (graph.config.search.enabled) context.injectScript("page", `import ${JSON.stringify(searchClientPath)};`);
-					context.injectScript("page", `import ${JSON.stringify(appearanceClientPath)};`);
 					context.injectRoute({
 						pattern: "[...route]",
 						entrypoint: new URL("./routes/DocsPage.astro", import.meta.url),
 						prerender: true
 					});
-					return;
 				}
 				const starlightWithPlugins = inner[2];
 				if (starlightWithPlugins) {
 					const selfIndex = context.config.integrations.findIndex((integration) => integration.name === "cookbook");
 					context.config.integrations.splice(selfIndex + 1, 0, starlightWithPlugins);
 					try {
-						await callInner([starlightWithPlugins], "astro:config:setup", context);
+						await callInner([starlightWithPlugins], "astro:config:setup", usingContentCollection ? context : withoutStarlightDocsRoute(context));
 					} finally {
 						const placeholderIndex = context.config.integrations.indexOf(starlightWithPlugins);
 						if (placeholderIndex >= 0) context.config.integrations.splice(placeholderIndex, 1);
 					}
 				}
+				context.config.integrations.push({
+					name: "cookbook-markdown-renderer",
+					hooks: { "astro:config:setup": ({ config }) => {
+						markdownRuntime = {
+							image: config.image,
+							markdown: config.markdown,
+							srcDir: config.srcDir
+						};
+					} }
+				});
 			},
 			"astro:config:done": async (context) => {
-				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:config:done", context);
+				await callInner(inner, "astro:config:done", context);
 			},
 			"astro:server:setup": async ({ server }) => {
 				let assets = docsAssetMap(await loadGraph());
@@ -505,10 +538,10 @@ function cookbook(options = {}) {
 			},
 			"astro:build:start": async (context) => {
 				await loadGraph();
-				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:build:start", context);
+				await callInner(inner, "astro:build:start", context);
 			},
 			"astro:build:done": async (context) => {
-				await callInner(usingStarlight ? inner : inner.slice(0, 2), "astro:build:done", context);
+				await callInner(inner, "astro:build:done", context);
 				if (!graph) return;
 				const output = fileURLToPath(context.dir);
 				for (const asset of graph.assets) {
@@ -517,20 +550,14 @@ function cookbook(options = {}) {
 					await mkdir(dirname(target), { recursive: true });
 					await cp(asset.sourcePath, target);
 				}
-				if (!usingStarlight && graph.config.search.enabled) {
-					const { close, createIndex } = await import("pagefind");
-					const created = await createIndex({ rootSelector: "[data-pagefind-body]" });
-					if (!created.index || created.errors.length > 0) throw new Error(`Pagefind failed to start: ${created.errors.join("; ")}`);
-					const indexed = await created.index.addDirectory({ path: output });
-					if (indexed.errors.length > 0) throw new Error(`Pagefind failed to index the site: ${indexed.errors.join("; ")}`);
-					const written = await created.index.writeFiles({ outputPath: join(output, "pagefind") });
-					await close();
-					if (written.errors.length > 0) throw new Error(`Pagefind failed to write the index: ${written.errors.join("; ")}`);
-				}
 			}
 		}
 	};
 }
+function starlightContentUrl(route, srcDir) {
+	const slug = route === "/" ? "index" : route.replace(/^\/+|\/+$/g, "");
+	return new URL(`content/docs/${slug}.md`, srcDir);
+}
 function docsAssetMap(graph) {
 	return new Map(graph.assets.flatMap((asset) => asset.publicPath && asset.sourcePath ? [[asset.publicPath, asset]] : []));
 }
@@ -618,6 +645,14 @@ async function callInner(integrations, hook, context) {
 		if (typeof handler === "function") await handler(context);
 	}
 }
+function withoutStarlightDocsRoute(context) {
+	return new Proxy(context, { get(target, property, receiver) {
+		if (property !== "injectRoute") return Reflect.get(target, property, receiver);
+		return (route) => {
+			if (route.pattern !== "[...slug]") context.injectRoute(route);
+		};
+	} });
+}
 function virtualDocsPlugin(getContent, layout) {
 	const configId = "\0virtual:cookbook/config";
 	const layoutId = "\0virtual:cookbook/layout";