[Docs Site] Add index.md for CF1 docs (#20813)

* [Docs Site] Add index.md for CF1 docs

* remove test

* lift lang from pre attribute to code classname

* unwrap tabs

* allow img, add base url to a and href, fix mermaid

Author: KianNH

package-lock.json

@@ -70,6 +70,7 @@
 		"fast-xml-parser": "5.0.8",
 		"github-slugger": "2.0.0",
 		"globals": "16.0.0",
+		"hast-util-select": "6.0.4",
 		"hastscript": "9.0.1",
 		"he": "1.2.0",
 		"jsonc-parser": "3.3.1",
@@ -97,9 +98,12 @@
 		"rehype-autolink-headings": "7.1.0",
 		"rehype-external-links": "3.0.0",
 		"rehype-parse": "9.0.1",
+		"rehype-remark": "10.0.0",
 		"rehype-stringify": "10.0.1",
 		"rehype-title-figure": "0.1.2",
 		"remark": "15.0.1",
+		"remark-gfm": "4.0.1",
+		"remark-stringify": "11.0.0",
 		"sharp": "0.33.5",
 		"solarflare-theme": "0.0.4",
 		"starlight-image-zoom": "0.11.1",

package.json

@@ -0,0 +1,51 @@
+import type { APIRoute } from "astro";
+import type { InferGetStaticPropsType, GetStaticPaths } from "astro";
+
+import { getCollection } from "astro:content";
+import { entryToString } from "~/util/container";
+
+import { process } from "~/util/rehype";
+import rehypeParse from "rehype-parse";
+import rehypeBaseUrl from "~/plugins/rehype/base-url";
+import rehypeFilterElements from "~/plugins/rehype/filter-elements";
+import remarkGfm from "remark-gfm";
+import rehypeRemark from "rehype-remark";
+import remarkStringify from "remark-stringify";
+
+export const getStaticPaths = (async () => {
+	const entries = await getCollection("docs", (e) => {
+		return e.id.startsWith("cloudflare-one") && Boolean(e.body);
+	});
+
+	return entries.map((entry) => {
+		return {
+			params: {
+				entry: entry.id.replace("cloudflare-one/", ""),
+			},
+			props: {
+				entry,
+			},
+		};
+	});
+}) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+export const GET: APIRoute<Props> = async (context) => {
+	const html = await entryToString(context.props.entry, context.locals);
+
+	const md = await process(html, [
+		rehypeParse,
+		rehypeBaseUrl,
+		rehypeFilterElements,
+		remarkGfm,
+		rehypeRemark,
+		remarkStringify,
+	]);
+
+	return new Response(md, {
+		headers: {
+			"content-type": "text/markdown",
+		},
+	});
+};

src/pages/cloudflare-one/[...entry]/index.md.ts

@@ -1,17 +1,20 @@
 import { visit } from "unist-util-visit";
 import type { Root } from "hast";
 
+const REWRITE_ELEMENTS = ["a", "img"];
+
 export default function () {
 	return function (tree: Root) {
 		visit(tree, "element", function (element) {
-			if (element.tagName === "a") {
-				const href = element.properties.href as string | undefined;
+			if (REWRITE_ELEMENTS.includes(element.tagName)) {
+				const property = element.tagName === "a" ? "href" : "src";
+				const href = element.properties[property] as string | undefined;
 
 				if (href) {
 					if (href.startsWith("/")) {
 						const url = new URL(href, "https://developers.cloudflare.com/");
 
-						element.properties.href = url.href;
+						element.properties[property] = url.href;
 					}
 				}
 			}

src/plugins/rehype/base-url.ts

@@ -1,5 +1,6 @@
 import { SKIP, visit, type VisitorResult } from "unist-util-visit";
 import type { Root, Element, Parents } from "hast";
+import { selectAll } from "hast-util-select";
 
 const remove = (index: number, parent: Parents): VisitorResult => {
 	parent.children.splice(index, 1);
@@ -38,7 +39,7 @@ const ALLOWED_ELEMENTS = [
 	"div",
 	"dl",
 	"dt",
-	"figcaption",
+	// "figcaption",
 	"figure",
 	"hr",
 	"li",
@@ -90,12 +91,19 @@ const ALLOWED_ELEMENTS = [
 	"th",
 	"thead",
 	"tr",
+	// Images
+	"img",
 	// Custom elements
 	"rule-id",
+	"starlight-tabs",
+	"starlight-image-zoom-zoomable",
 ];
 
 const ALLOWED_ATTRIBUTES: Record<string, string[]> = {
 	a: ["href", "id", "target"],
+	pre: ["dataLanguage"],
+	code: ["className"],
+	img: ["src", "alt"],
 	"rule-id": ["id"],
 };
 
@@ -128,6 +136,43 @@ export default function () {
 					}
 				}
 
+				if (tag === "pre") {
+					if (classNames.includes("mermaid")) {
+						const definition = element.children.find(
+							(child) => child.type === "text",
+						);
+						if (!definition) return;
+
+						element.children = [
+							{
+								type: "element",
+								tagName: "code",
+								properties: {
+									className: ["language-mermaid"],
+								},
+								children: [
+									{
+										type: "text",
+										value: definition.value,
+									},
+								],
+							},
+						];
+
+						return;
+					}
+
+					const language = element.properties.dataLanguage;
+					if (!language) return;
+
+					const code = element.children.find(
+						(child) => child.type === "element" && child.tagName === "code",
+					);
+					if (!code) return;
+
+					(code as Element).properties.className = [`language-${language}`];
+				}
+
 				if (tag === "rule-id") {
 					return unwrap(index, parent, {
 						...element,
@@ -136,6 +181,47 @@ export default function () {
 						],
 					});
 				}
+
+				if (tag === "starlight-tabs") {
+					const tabs = selectAll('[role="tab"]', element);
+					const panels = selectAll('[role="tabpanel"]', element);
+
+					element.tagName = "ul";
+					element.properties = {};
+					element.children = [];
+
+					for (const tab of tabs) {
+						const id = (tab.properties?.id as string)?.split("tab-")[1];
+						if (!id) continue;
+
+						const panel = panels.find(
+							(panel) => panel.properties?.id === `tab-panel-${id}`,
+						);
+						if (!panel) continue;
+
+						const label = tab.children
+							.filter((child) => child.type === "text" && child.value.trim())
+							.map((child) => child.type === "text" && child.value.trim())
+							.join("");
+
+						const el = {
+							type: "element",
+							tagName: "li",
+							properties: {},
+							children: [
+								{
+									type: "element",
+									tagName: "p",
+									children: [{ type: "text", value: label }],
+									properties: {},
+								},
+								panel,
+							],
+						} as Element;
+
+						element.children.push(el);
+					}
+				}
 			}
 		});
 	};