[Docs Site] Fix index.md encoding on /plans/

Author: KianNH

src/components/ProductFeatures.astro

@@ -29,12 +29,12 @@ const entries = Object.entries(plan);
 				<h3>{value.title}</h3>
 				{value.link && (
 					<p>
-						<strong>Link: </strong>
-						<a href={value.link}>{value.title}</a>
+						<!-- prettier-ignore -->
+						<strong>Link:</strong>{" "}<a href={value.link}>{value.title}</a>
 					</p>
 				)}
 				{Object.values(value.properties).map((value: any) => (
-					<p>
+					<div>
 						<strong
 							set:html={marked.parseInline(
 								value.title === "Availability"
@@ -46,27 +46,27 @@ const entries = Object.entries(plan);
 							<p>{value.summary}</p>
 						)}
 						<ul>
-							{value.free && (
+							{value.free !== undefined && (
 								<li>
-									<strong>Free: </strong>
+									<strong>Free:</strong>{" "}
 									<Fragment
 										set:html={marked.parseInline(value.free.toString())}
 									/>
 								</li>
 							)}
 							{additional_descriptions && (
 								<>
-									{value.lite ? (
+									{value.lite !== undefined ? (
 										<li>
-											<strong>Lite: </strong>
+											<strong>Lite:</strong>{" "}
 											<Fragment
 												set:html={marked.parseInline(value.lite.toString())}
 											/>
 										</li>
 									) : (
-										value.free && (
+										value.free !== undefined && (
 											<li>
-												<strong>Lite: </strong>
+												<strong>Lite:</strong>{" "}
 												<Fragment
 													set:html={marked.parseInline(value.free.toString())}
 												/>
@@ -75,27 +75,27 @@ const entries = Object.entries(plan);
 									)}
 								</>
 							)}
-							{value.pro && (
+							{value.pro !== undefined && (
 								<li>
-									<strong>Pro: </strong>
+									<strong>Pro:</strong>{" "}
 									<Fragment
 										set:html={marked.parseInline(value.pro.toString())}
 									/>
 								</li>
 							)}
 							{additional_descriptions && (
 								<>
-									{value.pro_plus ? (
+									{value.pro_plus !== undefined ? (
 										<li>
-											<strong>Pro Plus: </strong>
+											<strong>Pro Plus:</strong>{" "}
 											<Fragment
 												set:html={marked.parseInline(value.pro_plus.toString())}
 											/>
 										</li>
 									) : (
-										value.pro && (
+										value.pro !== undefined && (
 											<li>
-												<strong>Pro Plus: </strong>
+												<strong>Pro Plus:</strong>{" "}
 												<Fragment
 													set:html={marked.parseInline(value.pro.toString())}
 												/>
@@ -104,24 +104,24 @@ const entries = Object.entries(plan);
 									)}
 								</>
 							)}
-							{value.biz && (
+							{value.biz !== undefined && (
 								<li>
-									<strong>Business: </strong>
+									<strong>Business:</strong>{" "}
 									<Fragment
 										set:html={marked.parseInline(value.biz.toString())}
 									/>
 								</li>
 							)}
-							{value.ent && (
+							{value.ent !== undefined && (
 								<li>
-									<strong>Enterprise: </strong>
+									<strong>Enterprise:</strong>{" "}
 									<Fragment
 										set:html={marked.parseInline(value.ent.toString())}
 									/>
 								</li>
 							)}
 						</ul>
-					</p>
+					</div>
 				))}
 			</div>
 		);

src/middleware/index.ts

@@ -1,16 +1,34 @@
 import { defineMiddleware } from "astro:middleware";
+import { htmlToMarkdown } from "~/util/markdown";
 
 // `astro dev` only middleware so that `/api/...` links can be viewed.
 export const onRequest = defineMiddleware(async (context, next) => {
 	if (import.meta.env.DEV) {
-		if (context.url.pathname.startsWith("/api/")) {
-			const url = new URL(context.url.pathname, import.meta.env.SITE);
+		const { pathname } = context.url;
+
+		if (pathname.startsWith("/api/")) {
+			const url = new URL(pathname, import.meta.env.SITE);
 
 			return fetch(url, {
 				headers: {
 					"accept-encoding": "identity",
 				},
 			});
+		} else if (pathname.endsWith("/index.md")) {
+			const htmlUrl = new URL(pathname.replace("index.md", ""), context.url);
+			const html = await (await fetch(htmlUrl)).text();
+
+			const markdown = await htmlToMarkdown(html);
+
+			if (!markdown) {
+				return new Response("Not Found", { status: 404 });
+			}
+
+			return new Response(markdown, {
+				headers: {
+					"content-type": "text/markdown; charset=utf-8",
+				},
+			});
 		}
 	}
 

src/util/markdown.ts

@@ -0,0 +1,30 @@
+import { parse } from "node-html-parser";
+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";
+import remarkStringify from "remark-stringify";
+
+export async function htmlToMarkdown(
+	html: string,
+): Promise<string | undefined> {
+	const content = parse(html).querySelector(".sl-markdown-content");
+
+	if (!content) {
+		return;
+	}
+
+	const markdown = await process(content.toString(), [
+		rehypeParse,
+		rehypeBaseUrl,
+		rehypeFilterElements,
+		[remarkGfm, { tablePipeAlign: false }],
+		rehypeRemark,
+		remarkStringify,
+	]);
+
+	return markdown;
+}

worker/index.ts

@@ -2,15 +2,7 @@ import { WorkerEntrypoint } from "cloudflare:workers";
 import { generateRedirectsEvaluator } from "redirects-in-workers";
 import redirectsFileContents from "../dist/__redirects";
 
-import { parse } from "node-html-parser";
-import { process } from "../src/util/rehype";
-
-import rehypeParse from "rehype-parse";
-import rehypeBaseUrl from "../src/plugins/rehype/base-url";
-import rehypeFilterElements from "../src/plugins/rehype/filter-elements";
-import remarkGfm from "remark-gfm";
-import rehypeRemark from "rehype-remark";
-import remarkStringify from "remark-stringify";
+import { htmlToMarkdown } from "../src/util/markdown";
 
 const redirectsEvaluator = generateRedirectsEvaluator(redirectsFileContents, {
 	maxLineLength: 10_000, // Usually 2_000
@@ -36,21 +28,12 @@ export default class extends WorkerEntrypoint<Env> {
 			) {
 				const html = await res.text();
 
-				const content = parse(html).querySelector(".sl-markdown-content");
+				const markdown = await htmlToMarkdown(html);
 
-				if (!content) {
+				if (!markdown) {
 					return new Response("Not Found", { status: 404 });
 				}
 
-				const markdown = await process(content.toString(), [
-					rehypeParse,
-					rehypeBaseUrl,
-					rehypeFilterElements,
-					[remarkGfm, { tablePipeAlign: false }],
-					rehypeRemark,
-					remarkStringify,
-				]);
-
 				return new Response(markdown, {
 					headers: {
 						"content-type": "text/markdown; charset=utf-8",