[Docs Site] Refactor single-file collections, handle external links (#19900)

Author: KianNH

src/components/AnchorHeading.astro

@@ -3,7 +3,7 @@ import { z } from "astro:schema";
 import { marked } from "marked";
 import { slug as GithubSlug } from "github-slugger";
 
-import { rehype } from "rehype";
+import { process } from "~/util/rehype";
 import rehypeAutoLinkHeadings from "~/plugins/rehype/autolink-headings";
 
 type Props = z.infer<typeof props>;
@@ -20,14 +20,10 @@ const slugified = GithubSlug(slug ?? title);
 
 const tag = `h${depth}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
 
-const file = await rehype()
-	.data("settings", {
-		fragment: true,
-	})
-	.use(rehypeAutoLinkHeadings)
-	.process(`<${tag} id=${slugified}>${marked.parseInline(title)}</${tag}>`);
-
-const html = file.toString();
+const html = await process(
+	`<${tag} id=${slugified}>${marked.parseInline(title)}</${tag}>`,
+	[rehypeAutoLinkHeadings],
+);
 ---
 
 <Fragment set:html={html} />

src/components/ExternalResources.astro

@@ -1,7 +1,10 @@
 ---
-import { getEntry } from "astro:content";
+import { getCollection } from "astro:content";
 import { z } from "astro:schema";
 
+import { process } from "~/util/rehype";
+import rehypeExternalLinks from "~/plugins/rehype/external-links";
+
 type Props = z.infer<typeof props>;
 
 const props = z.object({
@@ -13,33 +16,34 @@ const props = z.object({
 
 const { type, tags, products, cloudflareOnly } = props.parse(Astro.props);
 
-const resources = await getEntry(type, "index");
-
-if (!resources) {
-	throw new Error("Failed to load data");
-}
-
-const filtered = resources.data.entries.filter((entry) => {
+const resources = await getCollection(type, (e) => {
 	return (
-		(cloudflareOnly ? entry.cloudflare : true) &&
-		(tags ? entry.tags?.some((v: string) => tags.includes(v)) : true) &&
+		(cloudflareOnly ? e.data.cloudflare : true) &&
+		(tags ? e.data.tags?.some((v: string) => tags.includes(v)) : true) &&
 		(products
-			? entry.products?.some((v: string) => products.includes(v))
+			? e.data.products?.some((v: string) => products.includes(v))
 			: true)
 	);
 });
 
-filtered.sort((a, b) => Number(b.updated) - Number(a.updated));
+if (!resources) {
+	throw new Error("Failed to load data");
+}
+
+resources.sort((a, b) => Number(b.data.updated) - Number(a.data.updated));
 ---
 
 <ul>
 	{
-		filtered.map((entry) => {
-			const title = "name" in entry ? entry.name : entry.title;
+		resources.map(async (e) => {
+			const anchor = await process(`<a href=${e.data.link}>${e.id}:</a>`, [
+				rehypeExternalLinks,
+			]);
+
 			return (
 				<li>
-					<a href={entry.link}>{title}:</a>
-					<span>{entry.description}</span>
+					<Fragment set:html={anchor} />
+					<span>{e.data.description}</span>
 				</li>
 			);
 		})

src/components/ListTutorials.astro

@@ -1,7 +1,15 @@
 ---
-import { getCollection, getEntry, type InferEntrySchema } from "astro:content";
+import { getCollection, getEntry, type CollectionEntry } from "astro:content";
 import { formatDistance } from "date-fns";
 
+import { process } from "~/util/rehype";
+import rehypeExternalLinks from "~/plugins/rehype/external-links";
+
+type DocsEntry = CollectionEntry<"docs">;
+type VideoEntry = CollectionEntry<"videos">;
+
+const tutorials: Array<DocsEntry | VideoEntry> = [];
+
 const currentSection = Astro.params.slug?.split("/")[0];
 const currentProduct = await getEntry("products", currentSection!);
 
@@ -13,7 +21,7 @@ if (!currentProduct) {
 
 const productTitle = currentProduct.data.product.title;
 
-const tutorials = await getCollection("docs", (entry) => {
+const docs = await getCollection("docs", (entry) => {
 	return (
 		// pcx_content_type: tutorial
 		entry.data.pcx_content_type === "tutorial" &&
@@ -26,47 +34,17 @@ const tutorials = await getCollection("docs", (entry) => {
 	);
 });
 
-type VideoEntry = InferEntrySchema<"videos">["entries"][number];
-
-type FinalTutorials = {
-	slug?: string;
-	data:
-		| ({ type: "docs" } & InferEntrySchema<"docs">)
-		| ({ type: "videos" } & VideoEntry);
-}[];
-
-const finalTutorials: FinalTutorials = tutorials.map((x) => ({
-	slug: x.id,
-	data: {
-		type: "docs",
-		...x.data,
-	},
-}));
-
-const videos = await getEntry("videos", "index");
-
-if (!videos) {
-	throw new Error("Failed to load data");
-}
+tutorials.push(...docs);
 
-const filteredVideos = videos.data.entries.filter((x) =>
-	x.products.some(
+const videos = await getCollection("videos", (entry) => {
+	return entry.data.products.some(
 		(v: string) => v.toUpperCase() === productTitle.toUpperCase(),
-	),
-);
-
-if (filteredVideos) {
-	filteredVideos.forEach((x) =>
-		finalTutorials.push({
-			data: {
-				type: "videos",
-				...x,
-			},
-		}),
 	);
-}
+});
+
+tutorials.push(...videos);
 
-finalTutorials.sort((a, b) => Number(b.data.updated) - Number(a.data.updated));
+tutorials.sort((a, b) => Number(b.data.updated) - Number(a.data.updated));
 
 const timeAgo = (date?: Date) => {
 	if (!date) return undefined;
@@ -85,15 +63,23 @@ const timeAgo = (date?: Date) => {
 	</thead>
 	<tbody>
 		{
-			finalTutorials.map((tutorial) => {
+			tutorials.map(async (tutorial) => {
+				const title =
+					tutorial.collection === "docs" ? tutorial.data.title : tutorial.id;
+
 				const href =
-					tutorial.data.type === "docs"
-						? `/${tutorial.slug}/`
+					tutorial.collection === "docs"
+						? `/${tutorial.id}/`
 						: tutorial.data.link;
+
+				const anchor = await process(`<a href=${href}>${title}</a>`, [
+					rehypeExternalLinks,
+				]);
+
 				return (
 					<tr>
 						<td>
-							<a href={href}>{tutorial.data.title}</a>
+							<Fragment set:html={anchor} />
 						</td>
 						<td>{timeAgo(tutorial.data.updated)}</td>
 						<td>{tutorial.data.content_type}</td>

src/content.config.ts

@@ -3,7 +3,7 @@ import { z, defineCollection } from "astro:content";
 import { docsLoader, i18nLoader } from "@astrojs/starlight/loaders";
 import { docsSchema, i18nSchema } from "@astrojs/starlight/schema";
 
-import { glob } from "astro/loaders";
+import { glob, file } from "astro/loaders";
 
 import {
 	appsSchema,
@@ -95,11 +95,11 @@ export const collections = {
 		schema: workersAiModelsSchema,
 	}),
 	videos: defineCollection({
-		loader: dataLoader("videos"),
+		loader: file("src/content/videos/index.yaml"),
 		schema: videosSchema,
 	}),
 	apps: defineCollection({
-		loader: dataLoader("apps"),
+		loader: file("src/content/apps/index.yaml"),
 		schema: appsSchema,
 	}),
 	"warp-releases": defineCollection({