[Docs Site] Remove Container API usage from changelog

Author: KianNH

astro.config.ts

@@ -16,6 +16,7 @@ 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";
+import rehypeShiftHeadings from "./src/plugins/rehype/shift-headings.ts";
 
 async function autogenSections() {
 	const sections = (
@@ -67,6 +68,7 @@ export default defineConfig({
 			rehypeAutolinkHeadings,
 			// @ts-expect-error plugins types are outdated but functional
 			rehypeTitleFigure,
+			rehypeShiftHeadings,
 		],
 	},
 	image: {

src/pages/changelog/index.astro

@@ -10,10 +10,8 @@ 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";
+import { render } from "astro:content";
 
 const notes = await getChangelogs({
 	filter: (entry) => !entry.data.hidden,
@@ -45,8 +43,7 @@ const props = {
 				.map((group) => group[0])
 				.sort();
 
-			const html = await entryToString(entry, Astro.locals);
-			const processed = await process(html, [[rehypeShiftHeadings]]);
+			const { Content } = await render(entry);
 
 			return (
 				<div
@@ -62,7 +59,7 @@ const props = {
 				>
 					<time
 						datetime={entry.data.date.toISOString()}
-						class="whitespace-nowrap text-xs font-bold leading-6 sm:pr-4 sm:text-right"
+						class="text-xs leading-6 font-bold whitespace-nowrap sm:pr-4 sm:text-right"
 					>
 						{date}
 					</time>
@@ -80,7 +77,7 @@ const props = {
 									</h3>
 									<ProductPills products={entry.data.products} />
 								</div>
-								<p set:html={processed} />
+								<Content />
 							</li>
 						</ol>
 					</Steps>
@@ -91,7 +88,7 @@ const props = {
 	<div class="flex items-center justify-center">
 		<button
 			id="changelogs-next-button"
-			class="h-12 cursor-pointer rounded-sm bg-cl1-brand-orange px-6 font-medium text-cl1-black"
+			class="bg-cl1-brand-orange text-cl1-black h-12 cursor-pointer rounded-sm px-6 font-medium"
 		>
 			Load more items
 		</button>

src/plugins/rehype/shift-headings.ts

@@ -3,8 +3,16 @@ import { visit } from "unist-util-visit";
 import type { Root, Element } from "hast";
 
 export default function () {
-	return function (tree: Root) {
+	return function (tree: Root, file: any) {
 		visit(tree, "element", function (element) {
+			if (
+				!file.history.find((path: string) =>
+					path.includes("/src/content/changelog/"),
+				)
+			) {
+				return;
+			}
+
 			const classNames = (element.properties.className as string[]) ?? [];
 
 			if (classNames.includes("heading-wrapper")) {