[Docs Site] Add tags to bottom of pages

Author: kodster28

src/components/PageTags.astro

@@ -0,0 +1,39 @@
+---
+import { z } from "astro:schema";
+import { Badge } from "@astrojs/starlight/components";
+import { componentToString } from "~/util/container";
+import { tagsValues } from "~/schemas/tags";
+
+type Props = z.infer<typeof props>;
+
+const props = z.object({
+	tags: z.enum(tagsValues).array().optional(),
+});
+
+const parsedValues = props.safeParse(Astro.props);
+let tagPlaceholder: Array<String>;
+
+if (!parsedValues.success) {
+	// handle error then return
+	tagPlaceholder = [];
+} else {
+	// do something
+	tagPlaceholder = parsedValues.data.tags;
+}
+
+const tags = tagPlaceholder;
+console.log(tagPlaceholder);
+console.log(parsedValues);
+---
+
+{
+	tags && (
+		<div class="flex flex-row gap-2">
+			{tags.map((tag) => (
+				<a href={`/search/?tag=${tag}`} class="no-underline">
+					<Badge text={tag} variant="tip" />
+				</a>
+			))}
+		</div>
+	)
+}

src/components/index.ts

@@ -39,6 +39,7 @@ export { default as PagesBuildEnvironmentTools } from "./PagesBuildEnvironmentTo
 export { default as PagesBuildPreset } from "./PagesBuildPreset.astro";
 export { default as PagesBuildPresetsTable } from "./PagesBuildPresetsTable.astro";
 export { default as PagesLanguageSupport } from "./PagesLanguageSupport.astro";
+export { default as PageTags } from "./PageTags.astro";
 export { default as Plan } from "./Plan.astro";
 export { default as PlanInfo } from "./PlanInfo.astro";
 export { default as ProductReleaseNotes } from "./ProductReleaseNotes.astro";

src/components/overrides/Footer.astro

@@ -2,6 +2,7 @@
 import Default from "@astrojs/starlight/components/Footer.astro";
 import OneTrust from "../OneTrust.astro";
 import FeedbackPrompt from "../FeedbackPrompt.tsx";
+import PageTags from "~/components/PageTags.astro";
 import { getEntry } from "astro:content";
 
 let links = {
@@ -24,6 +25,9 @@ if (currentSection) {
 	}
 }
 
+const frontmatter = Astro.locals.starlightRoute.entry.data;
+const tags = frontmatter.tags;
+
 const homepageLinks = Object.entries({
 	Resources: [
 		{ text: "API", href: "/api/" },
@@ -128,6 +132,8 @@ if (
 				<FeedbackPrompt client:idle />
 			</div>
 			<Default />
+			<br />
+			{tags && <PageTags tags={tags} />}
 			<div id="footer-links" class="mt-6 flex flex-wrap items-center space-x-4">
 				{Object.entries(links).map(([text, href]) => (
 					<a href={href} class="text-xs text-black decoration-accent">

src/content/docs/workers/examples/alter-headers.mdx

@@ -4,7 +4,8 @@ summary: Example of how to add, change, or delete headers sent in a request or
   returned in a response.
 tags:
   - Headers
-  - Middleware
+  - Cookies
+  - TEST
 languages:
   - JavaScript
   - TypeScript

src/schemas/base.ts

@@ -1,6 +1,7 @@
 import { z } from "astro:schema";
 import { BadgeConfigSchema } from "./types/badge";
 import type { SchemaContext } from "astro:content";
+import { tagsValues } from "./tags";
 
 const spotlightAuthorDetails = z
 	.object({
@@ -44,7 +45,11 @@ export const baseSchema = ({ image }: SchemaContext) =>
 				"Refer to https://developers.cloudflare.com/style-guide/documentation-content-strategy/content-types/.",
 			),
 		content_type: z.string().optional(),
-		tags: z.string().array().optional(),
+		tags: z
+			.enum(tagsValues)
+			.array()
+			.optional()
+			.catch((ctx) => ctx.input),
 		external_link: z
 			.string()
 			.optional()

src/schemas/tags.ts

@@ -0,0 +1,7 @@
+export const tagsValues = [
+	"Cookies",
+	"GraphQL",
+	"Headers",
+	"mTLS",
+	"Redirects",
+] as const;