test markdown changelogs, refine filter elements plugin

Author: KianNH

package-lock.json

@@ -84,11 +84,15 @@
 		"react-icons": "5.4.0",
 		"react-markdown": "9.0.3",
 		"redirects-in-workers": "0.0.5",
-		"rehype": "13.0.2",
 		"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.0",
+		"remark-stringify": "11.0.0",
 		"sharp": "0.33.5",
 		"solarflare-theme": "0.0.2",
 		"starlight-image-zoom": "0.10.1",
@@ -102,6 +106,7 @@
 		"tsx": "4.19.2",
 		"typescript": "5.7.3",
 		"typescript-eslint": "8.20.0",
+		"unified": "11.0.5",
 		"unist-util-visit": "5.0.0",
 		"vitest": "2.1.9",
 		"wrangler": "3.103.2"

package.json

@@ -0,0 +1,20 @@
+import rss from "@astrojs/rss";
+import type { APIRoute } from "astro";
+import { getChangelogs, getRSSItems } from "~/util/changelogs";
+
+export const GET: APIRoute = async ({ locals }) => {
+	const notes = await getChangelogs({});
+
+	const items = await getRSSItems({
+		notes,
+		locals,
+		markdown: true,
+	});
+
+	return rss({
+		title: "Changelogs",
+		description: `Cloudflare changelogs - If you would like content as HTML, rather than Markdown, please use https://developers.cloudflare.com/changelog-next/index.xml`,
+		site: "https://developers.cloudflare.com/changelog-next/",
+		items,
+	});
+};

src/pages/changelog-next/rss/index.md.xml.ts

@@ -12,7 +12,7 @@ export const GET: APIRoute = async ({ locals }) => {
 
 	return rss({
 		title: "Changelogs",
-		description: `Cloudflare changelogs`,
+		description: `Cloudflare changelogs - If you would like content as Markdown, rather than HTML, please use https://developers.cloudflare.com/changelog-next/index.md.xml`,
 		site: "https://developers.cloudflare.com/changelog-next/",
 		items,
 	});

src/pages/changelog-next/rss/index.xml.ts

@@ -101,7 +101,7 @@ const ALLOWED_ATTRIBUTES: Record<string, string[]> = {
 
 const UNWRAP_CLASS_NAMES = ["heading-wrapper"];
 
-const DISALLOWED_CLASS_NAMES = ["external-link"];
+const DISALLOWED_CLASS_NAMES = ["external-link", "anchor-link"];
 
 export default function () {
 	return function (tree: Root) {
@@ -114,14 +114,14 @@ export default function () {
 					return remove(index, parent);
 				}
 
-				if (UNWRAP_CLASS_NAMES.some((v) => classNames.includes(v))) {
-					return unwrap(index, parent, element);
-				}
-
 				if (DISALLOWED_CLASS_NAMES.some((v) => classNames.includes(v))) {
 					return remove(index, parent);
 				}
 
+				if (UNWRAP_CLASS_NAMES.some((v) => classNames.includes(v))) {
+					return unwrap(index, parent, element);
+				}
+
 				for (const key of Object.keys(element.properties)) {
 					if (!ALLOWED_ATTRIBUTES[tag]?.includes(key)) {
 						delete element.properties[key];

src/plugins/rehype/filter-elements.ts

@@ -1,9 +1,18 @@
 import type { RSSFeedItem } from "@astrojs/rss";
 import { getCollection, getEntries, type CollectionEntry } from "astro:content";
-import { rehype } from "rehype";
 import { entryToString } from "~/util/container";
+
+import { unified, type PluggableList } from "unified";
+
+import rehypeParse from "rehype-parse";
+import rehypeStringify from "rehype-stringify";
+import rehypeBaseUrl from "~/plugins/rehype/base-url";
 import rehypeFilterElements from "~/plugins/rehype/filter-elements";
 
+import rehypeRemark from "rehype-remark";
+import remarkGfm from "remark-gfm";
+import remarkStringify from "remark-stringify";
+
 type DocsToChangelogOptions = {
 	name: string;
 	product: string;
@@ -114,13 +123,32 @@ export async function getChangelogs({
 }
 
 type GetRSSItemsOptions = {
+	/**
+	 * An array of changelog entries from the `getChangelogs({})` function.
+	 * @see {@link getChangelogs}
+	 */
 	notes: Array<CollectionEntry<"changelogs-next">>;
+	/**
+	 * `locals`, either from `Astro.locals` in custom pages or
+	 * `context.locals` in endpoints.
+	 * @see {@link https://docs.astro.build/en/reference/api-reference/#locals}
+	 */
 	locals: App.Locals;
+	/**
+	 * Returns Markdown in the `<content:encoded>` field instead of HTML.
+	 * Markdown will contain `\n` in the output, as fast-xml-parser outputs
+	 * single-line strings.
+	 *
+	 * @example
+	 * # heading\n\ntext\ntext
+	 */
+	markdown?: boolean;
 };
 
 export async function getRSSItems({
 	notes,
 	locals,
+	markdown,
 }: GetRSSItemsOptions): Promise<Array<RSSFeedItem>> {
 	return await Promise.all(
 		notes.map(async (note) => {
@@ -130,14 +158,27 @@ export async function getRSSItems({
 			const productTitles = productEntries.map((p) => p.data.name);
 
 			const html = await entryToString(note, locals);
-			const file = await rehype()
+
+			let plugins: PluggableList = [
+				rehypeParse,
+				rehypeBaseUrl,
+				rehypeFilterElements,
+			];
+
+			if (markdown) {
+				plugins = plugins.concat([rehypeRemark, remarkGfm, remarkStringify]);
+			} else {
+				plugins = plugins.concat([rehypeStringify]);
+			}
+
+			const file = await unified()
 				.data("settings", {
 					fragment: true,
 				})
-				.use(rehypeFilterElements)
+				.use(plugins)
 				.process(html);
 
-			const content = String(file);
+			const content = String(file).trim();
 
 			return {
 				title: `${productTitles.join(", ")} - ${title}`,