[Docs Site] Refactor rehype plugins

Author: KianNH

astro.config.ts

@@ -4,100 +4,32 @@ import tailwind from "@astrojs/tailwind";
 import starlightDocSearch from "@astrojs/starlight-docsearch";
 import starlightImageZoom from "starlight-image-zoom";
 import liveCode from "astro-live-code";
-import rehypeMermaid from "rehype-mermaid";
-import rehypeAutolinkHeadings, {
-	type Options as rehypeAutolinkHeadingsOptions,
-} from "rehype-autolink-headings";
-import rehypeExternalLinks from "rehype-external-links";
 import starlightLinksValidator from "starlight-links-validator";
-import { h } from "hastscript";
-import { readdir } from "fs/promises";
 import icon from "astro-icon";
 import sitemap from "@astrojs/sitemap";
 import react from "@astrojs/react";
+
 import rehypeTitleFigure from "rehype-title-figure";
-import rehypeHeadingSlugs from "./plugins/rehype/heading-slugs";
+import rehypeMermaid from "./src/plugins/rehype/mermaid.ts";
+import rehypeAutolinkHeadings from "./src/plugins/rehype/autolink-headings.ts";
+import rehypeExternalLinks from "./src/plugins/rehype/external-links.ts";
+import rehypeHeadingSlugs from "./src/plugins/rehype/heading-slugs.ts";
 
-const runLinkCheck = process.env.RUN_LINK_CHECK || false;
+import { sidebar } from "./src/util/sidebar.ts";
 
-async function autogenSections() {
-	const sections = (
-		await readdir("./src/content/docs/", {
-			withFileTypes: true,
-		})
-	)
-		.filter((x) => x.isDirectory())
-		.map((x) => x.name);
-	return sections.map((x) => {
-		return {
-			label: x,
-			autogenerate: {
-				directory: x,
-				collapsed: true,
-			},
-		};
-	});
-}
-const AnchorLinkIcon = h(
-	"span",
-	{
-		ariaHidden: "true",
-		class: "anchor-icon",
-	},
-	h(
-		"svg",
-		{
-			width: 16,
-			height: 16,
-			viewBox: "0 0 24 24",
-		},
-		h("path", {
-			fill: "currentcolor",
-			d: "m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z",
-		}),
-	),
-);
-const autolinkConfig: rehypeAutolinkHeadingsOptions = {
-	properties: {
-		class: "anchor-link",
-	},
-	behavior: "after",
-	group: ({ tagName }) =>
-		h("div", {
-			tabIndex: -1,
-			class: `heading-wrapper level-${tagName}`,
-		}),
-	content: () => [AnchorLinkIcon],
-};
+const runLinkCheck = process.env.RUN_LINK_CHECK || false;
 
 // https://astro.build/config
 export default defineConfig({
 	site: "https://developers.cloudflare.com",
 	markdown: {
 		smartypants: false,
 		rehypePlugins: [
-			[
-				rehypeMermaid,
-				{
-					strategy: "pre-mermaid",
-				},
-			],
-			[
-				rehypeExternalLinks,
-				{
-					content: {
-						type: "text",
-						value: " ↗",
-					},
-					properties: {
-						target: "_blank",
-					},
-					rel: ["noopener"],
-				},
-			],
+			rehypeMermaid,
+			rehypeExternalLinks,
 			rehypeHeadingSlugs,
-			[rehypeAutolinkHeadings, autolinkConfig],
-			// @ts-expect-error TODO: fix types
+			rehypeAutolinkHeadings,
+			// @ts-expect-error plugins types are outdated but functional
 			rehypeTitleFigure,
 		],
 	},
@@ -116,29 +48,15 @@ export default defineConfig({
 				src: "./src/assets/logo.svg",
 			},
 			favicon: "/favicon.png",
-			head: [
-				{
-					tag: "meta",
-					attrs: {
-						name: "image",
-						content: "https://developers.cloudflare.com/cf-twitter-card.png",
-					},
-				},
-				{
+			head: ["image", "og:image", "twitter:image"].map((name) => {
+				return {
 					tag: "meta",
 					attrs: {
-						name: "og:image",
+						name,
 						content: "https://developers.cloudflare.com/cf-twitter-card.png",
 					},
-				},
-				{
-					tag: "meta",
-					attrs: {
-						name: "twitter:image",
-						content: "https://developers.cloudflare.com/cf-twitter-card.png",
-					},
-				},
-			],
+				};
+			}),
 			social: {
 				github: "https://github.com/cloudflare/cloudflare-docs",
 				"x.com": "https://x.com/cloudflare",
@@ -161,18 +79,17 @@ export default defineConfig({
 				SkipLink: "./src/components/overrides/SkipLink.astro",
 				TableOfContents: "./src/components/overrides/TableOfContents.astro",
 			},
-			sidebar: await autogenSections(),
+			sidebar,
 			customCss: [
 				"./src/asides.css",
 				"./src/code.css",
+				"./src/footnotes.css",
 				"./src/headings.css",
 				"./src/input.css",
-				"./src/littlefoot.css",
 				"./src/mermaid.css",
 				"./src/table.css",
 				"./src/tailwind.css",
 				"./src/title.css",
-				"./src/tooltips.css",
 			],
 			pagination: false,
 			plugins: [

ec.config.mjs

@@ -2,9 +2,9 @@
 import darkTheme from "solarflare-theme/themes/cloudflare-dark-color-theme.json" with { type: "json" };
 import lightTheme from "solarflare-theme/themes/cloudflare-light-color-theme.json" with { type: "json" };
 
-import pluginWorkersPlayground from "./plugins/expressive-code/workers-playground.js";
-import pluginOutputFrame from "./plugins/expressive-code/output-frame.js";
-import pluginDefaultTitles from "./plugins/expressive-code/default-titles.js";
+import pluginWorkersPlayground from "./src/plugins/expressive-code/workers-playground.js";
+import pluginOutputFrame from "./src/plugins/expressive-code/output-frame.js";
+import pluginDefaultTitles from "./src/plugins/expressive-code/default-titles.js";
 
 import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";