[Docs Site] Enforce and transform frontmatter tags

Author: KianNH

astro.config.ts

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

src/plugins/starlight/route-data.ts

@@ -0,0 +1,29 @@
+import { defineRouteMiddleware } from "@astrojs/starlight/route-data";
+import { tags as allowedTags } from "~/schemas/tags";
+
+export const onRequest = defineRouteMiddleware(({ locals }) => {
+	const { entry } = locals.starlightRoute;
+	const { tags } = entry.data;
+
+	if (tags) {
+		const transformed = tags.map((tag) => {
+			const values = Object.values(allowedTags).flat();
+
+			const match = values.find(
+				(val) =>
+					val.label.toLowerCase() === tag.toLowerCase() ||
+					val.variants?.find((v) => v.toLowerCase() === tag.toLowerCase()),
+			);
+
+			if (!match) {
+				throw new Error(
+					`Invalid tag on ${entry.id}: ${tag}, please refer to the allowlist in /src/schemas/tags.ts`,
+				);
+			}
+
+			return match.label;
+		});
+
+		entry.data.tags = transformed;
+	}
+});

src/schemas/tags.ts

@@ -3,14 +3,16 @@ in our page frontmatter. Refer to https://developers.cloudflare.com/style-guide/
 and https://developers.cloudflare.com/style-guide/frontmatter/tags/ for more details.
 */
 
-const data_structures: Array<object> = [
+type Tag = { label: string; variants?: string[] };
+
+const data_structures: Array<Tag> = [
 	{ label: "JSON" },
 	{ label: "TOML" },
 	{ label: "XML" },
 	{ label: "YAML" },
 ];
 
-const frameworks: Array<object> = [
+const frameworks: Array<Tag> = [
 	{ label: "Angular" },
 	{ label: "Astro" },
 	{ label: "Hono" },
@@ -24,7 +26,7 @@ const frameworks: Array<object> = [
 	{ label: "Vue.js", variants: ["vue", "vuejs"] },
 ];
 
-const integrations: Array<object> = [
+const integrations: Array<Tag> = [
 	{ label: "Azure", variants: ["Microsoft Azure", "MS Azure"] },
 	{ label: "AWS", variants: ["Amazon Web Services"] },
 	{ label: "GCP", variants: ["Google Cloud", "Google Cloud Platform"] },
@@ -45,7 +47,7 @@ const integrations: Array<object> = [
 	{ label: "WordPress" },
 ];
 
-const languages: Array<object> = [
+const languages: Array<Tag> = [
 	{ label: "Go" },
 	{ label: "GraphQL" },
 	{ label: "JavaScript", variants: ["js"] },
@@ -60,22 +62,22 @@ const languages: Array<object> = [
 	{ label: "WebAssembly", variants: ["Web Assembly", "wasm"] },
 ];
 
-const operating_systems: Array<object> = [
+const operating_systems: Array<Tag> = [
 	{ label: "Android", variants: ["ChromeOS"] },
 	{ label: "iOS" },
 	{ label: "Linux" },
 	{ label: "MacOS", variants: ["OS X"] },
 	{ label: "Windows", variants: ["ms windows"] },
 ];
 
-const presentation: Array<object> = [{ label: "Video" }];
+const presentation: Array<Tag> = [{ label: "Video" }];
 
-const product_features: Array<object> = [
+const product_features: Array<Tag> = [
 	{ label: "Web Crypto", variants: ["webcrypto"] },
 	{ label: "RPC" },
 ];
 
-const protocols: Array<object> = [
+const protocols: Array<Tag> = [
 	{ label: "FTP", variants: ["file transfer protocol", "ftps"] },
 	{ label: "ICMP" },
 	{ label: "IPsec" },
@@ -100,7 +102,7 @@ const protocols: Array<object> = [
 	{ label: "Wireguard" },
 ];
 
-const use_cases: Array<object> = [
+const use_cases: Array<Tag> = [
 	{ label: "AI" },
 	{ label: "Authentication", variants: ["auth"] },
 	{ label: "A/B testing", variants: ["ab test"] },