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

Author: KianNH

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

@@ -6,6 +6,7 @@ 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";
@@ -35,6 +36,7 @@ export const GET: APIRoute<Props> = async (context) => {
 
 	const md = await process(html, [
 		rehypeParse,
+		rehypeBaseUrl,
 		rehypeFilterElements,
 		remarkGfm,
 		rehypeRemark,

src/plugins/rehype/base-url.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/filter-elements.ts

@@ -91,15 +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"],
 };
 
@@ -133,6 +137,31 @@ 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;