[Docs Site] Make per-product 404 pages and link to SERP/llms.txt

Author: KianNH

astro.config.ts

@@ -161,6 +161,7 @@ export default defineConfig({
 				headingLinks: false,
 			},
 			routeMiddleware: "./src/plugins/starlight/route-data.ts",
+			disable404Route: true,
 		}),
 		liveCode({}),
 		icon(),

src/components/404.astro

@@ -0,0 +1,21 @@
+<div class="flex flex-col items-center justify-center md:py-28">
+	<h1>404</h1>
+	<p>
+		Check the URL, try using our <a id="404-search-link" href="/search/"
+			>search</a
+		> or try our LLM-friendly
+		<a href="/llms.txt"> llms.txt directory</a>.
+	</p>
+</div>
+
+<script>
+	const { pathname } = window.location;
+
+	const anchor = document.getElementById("404-search-link");
+
+	if (anchor) {
+		const pretty = pathname.replaceAll("/", " ").replaceAll("-", " ").trim();
+
+		anchor.setAttribute("href", `/search/?q=${encodeURIComponent(pretty)}`);
+	}
+</script>

src/pages/404.astro

@@ -0,0 +1,21 @@
+---
+import StarlightPage, {
+	type StarlightPageProps,
+} from "@astrojs/starlight/components/StarlightPage.astro";
+import FourOhFour from "~/components/404.astro";
+
+const props = {
+	frontmatter: {
+		title: "404 - Page Not Found",
+		template: "splash",
+		editUrl: false,
+		feedback: false,
+	},
+	hideTitle: true,
+	hideBreadcrumbs: true,
+} as StarlightPageProps;
+---
+
+<StarlightPage {...props}>
+	<FourOhFour />
+</StarlightPage>

src/pages/[product]/404.astro

@@ -0,0 +1,38 @@
+---
+import StarlightPage, {
+	type StarlightPageProps,
+} from "@astrojs/starlight/components/StarlightPage.astro";
+import type { GetStaticPaths } from "astro";
+import { getCollection } from "astro:content";
+
+import FourOhFour from "~/components/404.astro";
+
+export const getStaticPaths = (async () => {
+	const sections = await getCollection("docs", (e) => {
+		return e.id.split("/").length === 1;
+	});
+
+	return sections.map((section) => {
+		return {
+			params: {
+				product: section.id,
+			},
+		};
+	});
+}) satisfies GetStaticPaths;
+
+const props = {
+	frontmatter: {
+		title: "404 - Page Not Found",
+		tableOfContents: false,
+		editUrl: false,
+		feedback: false,
+	},
+	hideTitle: true,
+	hideBreadcrumbs: true,
+} as StarlightPageProps;
+---
+
+<StarlightPage {...props}>
+	<FourOhFour />
+</StarlightPage>