[Docs Site] Add WorkersTemplates component and use on Quickstarts page (#22098)

* [Docs Site] Add WorkersTemplates component and use on Quickstarts page

* small refactor

* add token

* move button, handle errors and missing package.json

Author: KianNH

.github/workflows/publish-production.yml

@@ -27,6 +27,7 @@ jobs:
       - run: npm run build
         name: Build
         env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_OPTIONS: --max-old-space-size=4096
       - run: npx wrangler deploy
         name: Deploy to Cloudflare Workers

src/components/WorkersTemplates.astro

@@ -0,0 +1,59 @@
+---
+import { AnchorHeading, PackageManagers } from "~/components";
+import { fetchWithToken } from "~/util/github";
+
+const REPO = "cloudflare/templates";
+
+const latestCommit = await fetchWithToken(
+	`https://api.github.com/repos/${REPO}/commits?sha=main&per_page=1`,
+)
+	.then((r) => r.json())
+	.then((r) => r[0].sha);
+
+const contents = await fetchWithToken(
+	`https://api.github.com/repos/${REPO}/contents/?ref=${latestCommit}`,
+).then((r) => r.json());
+
+const dirs = contents.filter((ent: any) => ent.type === "dir");
+---
+
+{
+	dirs
+		.filter((dir: any) => dir.name !== ".github")
+		.map(async (dir: any) => {
+			const packageJson = await fetch(
+				`https://gh-code.developers.cloudflare.com/${REPO}/${latestCommit}/${dir.path}/package.json`,
+			)
+				.then((r) => r.json())
+				.catch((reason) => {
+					console.warn(
+						`[WorkersTemplates] Failed to parse JSON for ${dir.path}`,
+						reason,
+					);
+				});
+
+			if (!packageJson) return;
+
+			return (
+				<div>
+					<div class="flex items-center justify-between gap-4">
+						<AnchorHeading depth={3} title={dir.name} />
+						<a
+							href={`https://deploy.workers.cloudflare.com/?url=https://github.com/cloudflare/templates/tree/main/${dir.path}`}
+						>
+							<img
+								src="https://deploy.workers.cloudflare.com/button"
+								alt="Deploy to Cloudflare"
+							/>
+						</a>
+					</div>
+					<p>{packageJson.description}</p>
+					<PackageManagers
+						type="create"
+						pkg="cloudflare@latest"
+						args={`--template=cloudflare/templates/${dir.path}`}
+					/>
+				</div>
+			);
+		})
+}

src/components/index.ts

@@ -65,6 +65,7 @@ export { default as Width } from "./Width.astro";
 export { default as WorkersArchitectureDiagram } from "./WorkersArchitectureDiagram.astro";
 export { default as WorkersIsolateDiagram } from "./WorkersIsolateDiagram.astro";
 export { default as WorkerStarter } from "./WorkerStarter.astro";
+export { default as WorkersTemplates } from "./WorkersTemplates.astro";
 export { default as YouTube } from "./YouTube.astro";
 export { default as YouTubeVideos } from "./YouTubeVideos.astro";
 

src/content/docs/style-guide/components/workers-templates.mdx

@@ -0,0 +1,13 @@
+---
+title: Workers Templates
+styleGuide:
+  component: WorkersTemplates
+---
+
+This component pulls in top-level folders from the [`cloudflare/templates`](https://github.com/cloudflare/templates/tree/main) repository and uses information from the `package.json` (such as `description`) to provide additional information.
+
+```mdx live
+import { WorkersTemplates } from "~/components";
+
+<WorkersTemplates />
+```

src/content/docs/workers/get-started/quickstarts.mdx

@@ -9,80 +9,13 @@ description: GitHub repositories that are designed to be a starting point for
   building a new Cloudflare Workers project.
 ---
 
-import { LinkButton, WorkerStarter } from "~/components";
+import { LinkButton, WorkersTemplates } from "~/components";
 
 Quickstarts are GitHub repositories that are designed to be a starting point for building a new Cloudflare Workers project. To start any of the projects below, run:
 
-```sh
-npm create cloudflare@latest <NEW_PROJECT_NAME> -- --template <GITHUB_REPO_URL>
-```
+## Templates
 
-- `new-project-name`
-
-  - A folder with this name will be created with your new project inside, pre-configured to [your Workers account](/workers/wrangler/configuration/).
-
-- `template`
-  - This is the URL of the GitHub repo starter, as below. Refer to the [create-cloudflare documentation](/pages/get-started/c3/) for a full list of possible values.
-
-## Example Projects
-
-<WorkerStarter
-	title="Sentry"
-	repo="mhart/cf-sentry"
-	description="Log exceptions and errors in your Workers application to Sentry.io - an error tracking tool."
-/>
-
-<WorkerStarter
-	title="Image Color"
-	repo="xtuc/img-color-worker"
-	description="Retrieve the dominant color of a PNG or JPEG image."
-/>
-
-<WorkerStarter
-	title="Cloud Storage"
-	repo="conzorkingkong/cloud-storage"
-	description="Serve private Amazon Web Services (AWS) bucket files from a Worker script."
-/>
-
-<WorkerStarter
-	title="BinAST"
-	repo="xtuc/binast-cf-worker-template"
-	description="Serve a JavaScript Binary AST via a Cloudflare Worker."
-/>
-
-<WorkerStarter
-	title="Edge-Side Rendering"
-	repo="frandiox/vitessedge-template"
-	description="Use Vite to render pages on Cloudflare's global network with great DX. Includes i18n, markdown support and more."
-/>
-
----
-
-## Frameworks
-
-<WorkerStarter
-	title="Apollo GraphQL Server"
-	repo="cloudflare/workers-graphql-server"
-	description="Lightning-fast, globally distributed Apollo GraphQL server, deployed on the Cloudflare global network using Cloudflare Workers."
-/>
-
-<WorkerStarter
-	title="GraphQL Yoga"
-	repo="the-guild-org/yoga-cloudflare-workers-template"
-	description="The most flexible, fastest, and lightest GraphQL server for all environments, Cloudflare Workers included."
-/>
-
-<WorkerStarter
-	title="Flareact"
-	repo="flareact/flareact"
-	description="Flareact is an edge-rendered React framework built for Cloudflare Workers. It features file-based page routing with dynamic page paths and edge-side data fetching APIs."
-/>
-
-<WorkerStarter
-	title="Sunder"
-	repo="sunderjs/sunder-worker-template"
-	description="Sunder is a minimal and unopinionated framework for Service Workers. This template uses Sunder, TypeScript, Miniflare, esbuild, Jest, and Sass, as well as Workers Sites for static assets."
-/>
+<WorkersTemplates />
 
 ---
 

src/util/github.ts

@@ -0,0 +1,26 @@
+export async function fetchWithToken(
+	req: Parameters<typeof fetch>[0],
+	init?: Parameters<typeof fetch>[1],
+) {
+	if (!import.meta.env.GITHUB_TOKEN) {
+		const res = await fetch(req);
+
+		if (res.status === 403 || res.status === 429) {
+			throw new Error(
+				`A request to the GitHub API (${res.url}) was made without a token and was rate limited.\nIf you have the "gh" CLI installed, you can get a token like so: "GITHUB_TOKEN=$(gh auth token) npx astro dev"`,
+			);
+		}
+
+		return res;
+	}
+
+	const request = new Request(req, init);
+
+	return fetch(request, {
+		...request,
+		headers: {
+			...request.headers,
+			Authorization: `Bearer ${import.meta.env.GITHUB_TOKEN}`,
+		},
+	});
+}