[Docs Site] Downgrade heading levels to h4 minimum in changelog (#21908)

Author: KianNH

package-lock.json

@@ -70,6 +70,7 @@
 		"fast-xml-parser": "5.2.1",
 		"github-slugger": "2.0.0",
 		"globals": "16.0.0",
+		"hast-util-heading-rank": "3.0.0",
 		"hast-util-select": "6.0.4",
 		"hastscript": "9.0.1",
 		"he": "1.2.0",

package.json

@@ -2,7 +2,6 @@
 import StarlightPage, {
 	type StarlightPageProps,
 } from "@astrojs/starlight/components/StarlightPage.astro";
-import { render } from "astro:content";
 
 import Header from "~/components/changelog/Header.astro";
 import ProductPills from "~/components/changelog/ProductPills.astro";
@@ -11,6 +10,10 @@ import { Steps } from "~/components";
 import { format } from "date-fns";
 import { getChangelogs } from "~/util/changelog";
 import { productsByGroup } from "~/util/products";
+import { entryToString } from "~/util/container";
+import { process } from "~/util/rehype";
+
+import rehypeShiftHeadings from "~/plugins/rehype/shift-headings.ts";
 
 const notes = await getChangelogs({
 	filter: (entry) => !entry.data.hidden,
@@ -42,7 +45,8 @@ const props = {
 				.map((group) => group[0])
 				.sort();
 
-			const { Content } = await render(entry);
+			const html = await entryToString(entry, Astro.locals);
+			const processed = await process(html, [[rehypeShiftHeadings]]);
 
 			return (
 				<div
@@ -76,9 +80,7 @@ const props = {
 									</h3>
 									<ProductPills products={entry.data.products} />
 								</div>
-								<p>
-									<Content />
-								</p>
+								<p set:html={processed} />
 							</li>
 						</ol>
 					</Steps>

src/pages/changelog/index.astro

@@ -0,0 +1,33 @@
+import { headingRank } from "hast-util-heading-rank";
+import { visit } from "unist-util-visit";
+import type { Root, Element } from "hast";
+
+export default function () {
+	return function (tree: Root) {
+		visit(tree, "element", function (element) {
+			const classNames = (element.properties.className as string[]) ?? [];
+
+			if (classNames.includes("heading-wrapper")) {
+				const heading = element.children.find(
+					(el) => el.type === "element" && headingRank(el),
+				) as Element | undefined;
+
+				if (heading) {
+					let level = headingRank(heading);
+
+					if (level && level < 4) {
+						const index = classNames.indexOf(`level-h${level}`);
+
+						level = 4;
+						element.children[element.children.indexOf(heading)] = {
+							...heading,
+							tagName: "h" + (level > 6 ? 6 : level < 1 ? 1 : level),
+						};
+
+						classNames[index] = `level-h${level}`;
+					}
+				}
+			}
+		});
+	};
+}