[Docs Site] Create TutorialsGrid component

Author: KianNH

src/components/TutorialsGrid.astro

@@ -0,0 +1,151 @@
+---
+import { z } from "astro:schema";
+import {
+	getCollection,
+	getEntry,
+	reference,
+	type CollectionEntry,
+} from "astro:content";
+import type { ComponentProps } from "astro/types";
+import { Badge } from "@astrojs/starlight/components";
+
+type Props = z.infer<typeof props>;
+type Badge = ComponentProps<typeof Badge>;
+
+const props = z.object({
+	product: reference("products").optional(),
+	frontmatterBadges: z.string().array().optional(),
+});
+
+let { product, frontmatterBadges } = props.parse(Astro.props);
+
+type DocsEntry = CollectionEntry<"docs">;
+type VideoEntry = CollectionEntry<"videos">;
+
+const tutorials: Array<DocsEntry | VideoEntry> = [];
+
+if (!product) {
+	product = {
+		id: Astro.url.pathname.split("/").filter(Boolean)[0],
+		collection: "products",
+	};
+}
+
+const productEntry = await getEntry(product);
+
+if (!productEntry) {
+	throw new Error(
+		`[ListTutorials] Unable to find product YAML for ${product.id}.`,
+	);
+}
+
+const productTitle = productEntry.data.product.title;
+
+const docs = await getCollection("docs", (entry) => {
+	return (
+		// pcx_content_type: tutorial
+		entry.data.pcx_content_type === "tutorial" &&
+		// /src/content/r2/**/*.mdx
+		(entry.id.startsWith(`${productEntry.id}/`) ||
+			// products: [R2]
+			entry.data.products?.some(
+				(v: string) => v.toUpperCase() === productTitle.toUpperCase(),
+			))
+	);
+});
+
+tutorials.push(...docs);
+
+const videos = await getCollection("videos", (entry) => {
+	return entry.data.products.some(
+		(v: string) => v.toUpperCase() === productTitle.toUpperCase(),
+	);
+});
+
+tutorials.push(...videos);
+
+tutorials.sort((a, b) => Number(b.data.updated) - Number(a.data.updated));
+
+const difficulties = {
+	Beginner: "success",
+	Intermediate: "caution",
+	Advanced: "danger",
+} as Record<string, ComponentProps<typeof Badge>["variant"]>;
+---
+
+<div class="grid grid-cols-2 gap-4">
+	{
+		tutorials.map((tutorial) => {
+			const title =
+				tutorial.collection === "docs" ? tutorial.data.title : tutorial.id;
+
+			const href =
+				tutorial.collection === "docs"
+					? `/${tutorial.id}/`
+					: tutorial.data.link;
+
+			const difficulty = tutorial.data.difficulty;
+
+			if (!difficulty) {
+				throw new Error(`${tutorial.id} is missing difficulty property`);
+			}
+
+			const video = tutorial.collection === "videos";
+
+			const spotlight =
+				tutorial.collection === "docs" && tutorial.data.spotlight;
+
+			const badges: Badge[] = [
+				{
+					text: difficulty,
+					variant: difficulties[difficulty],
+				},
+			];
+
+			if (video) {
+				badges.push({
+					text: "Video",
+					variant: "note",
+				});
+			}
+
+			if (spotlight) {
+				badges.push({
+					text: "Spotlight",
+					variant: "tip",
+				});
+			}
+
+			if (frontmatterBadges) {
+				for (const frontmatterBadge of frontmatterBadges) {
+					const values =
+						tutorial.data[frontmatterBadge as keyof typeof tutorial.data];
+
+					if (values) {
+						if (Array.isArray(values)) {
+							for (const value of values) {
+								badges.push({ text: value.toString() });
+							}
+						} else {
+							badges.push({ text: values.toString() });
+						}
+					}
+				}
+			}
+
+			return (
+				<a
+					href={href}
+					class="flex flex-col rounded border border-cl1-gray-8 p-6 !text-black no-underline hover:bg-cl1-gray-9 dark:border-cl1-gray-2 dark:bg-cl1-gray-0 dark:hover:bg-cl1-gray-1"
+				>
+					<strong>{title}</strong>
+					<p class="!mt-auto">
+						{badges.map((badge) => (
+							<Badge {...badge} />
+						))}
+					</p>
+				</a>
+			);
+		})
+	}
+</div>

src/components/index.ts

@@ -52,6 +52,7 @@ export { default as SpotlightAuthorDetails } from "./SpotlightAuthorDetails.astr
 export { default as Stream } from "./Stream.astro";
 export { default as TroubleshootingList } from "./TroubleshootingList.astro";
 export { default as TunnelCalculator } from "./TunnelCalculator.astro";
+export { default as TutorialsGrid } from "./TutorialsGrid.astro";
 export { default as Type } from "./Type.astro";
 export { default as TypeScriptExample } from "./TypeScriptExample.astro";
 export { default as WranglerConfig } from "./WranglerConfig.astro";

src/content/docs/style-guide/components/tutorials-grid.mdx

@@ -0,0 +1,45 @@
+---
+title: Tutorials grid
+---
+
+This component fetches all pages with `pcx_content_type: tutorial` under a given product.
+
+## Import
+
+```mdx
+import { TutorialsGrid } from "~/components";
+```
+
+## Usage
+
+```mdx live
+import { TutorialsGrid } from "~/components";
+
+<TutorialsGrid product="workers" frontmatterBadges={["languages"]} />
+```
+
+## `<TutorialsGrid>` Props
+
+### `product`
+
+**type:** `string`
+
+The product to fetch tutorials for, based on the file location and the `products` frontmatter property.
+
+This property is optional, and will be inferred from the page it is used on if omitted.
+
+### `frontmatterBadges`
+
+**type:** `string[]`
+
+Frontmatter values to add badges from.
+
+For example, given the below frontmatter, the badges `foo` and `bar` would be added when `frontmatterBadges={["stuff"]}` is provided.
+
+```mdx
+---
+title: Example Title
+stuff:
+  - foo
+  - bar
+```

src/content/docs/workers/tutorials/index.mdx

@@ -7,12 +7,12 @@ sidebar:
   order: 4
 ---
 
-import { GlossaryTooltip, ListTutorials } from "~/components";
+import { GlossaryTooltip, TutorialsGrid } from "~/components";
 
 :::note
 [Explore our community-written tutorials contributed through the Developer Spotlight program.](/developer-spotlight/)
 :::
 
 View <GlossaryTooltip term="tutorial">tutorials</GlossaryTooltip> to help you get started with Workers.
 
-<ListTutorials />
+<TutorialsGrid frontmatterBadges={["languages"]} />