diff --git a/.github/workflows/publish-production.yml b/.github/workflows/publish-production.yml index f8f957bf553bf9..199144a384972e 100644 --- a/.github/workflows/publish-production.yml +++ b/.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 diff --git a/src/components/WorkersTemplates.astro b/src/components/WorkersTemplates.astro new file mode 100644 index 00000000000000..e2dabef6381907 --- /dev/null +++ b/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 ( +
+
+ + + Deploy to Cloudflare + +
+

{packageJson.description}

+ +
+ ); + }) +} diff --git a/src/components/index.ts b/src/components/index.ts index 87b3e91eac7126..d77b749112697d 100644 --- a/src/components/index.ts +++ b/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"; diff --git a/src/content/docs/style-guide/components/workers-templates.mdx b/src/content/docs/style-guide/components/workers-templates.mdx new file mode 100644 index 00000000000000..d35f2ecab75ead --- /dev/null +++ b/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"; + + +``` diff --git a/src/content/docs/workers/get-started/quickstarts.mdx b/src/content/docs/workers/get-started/quickstarts.mdx index 63b39fe5515c2b..3ae6ef9acc03c9 100644 --- a/src/content/docs/workers/get-started/quickstarts.mdx +++ b/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 -- --template -``` +## 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 - - - - - - - - - - - ---- - -## Frameworks - - - - - - - - + --- diff --git a/src/util/github.ts b/src/util/github.ts new file mode 100644 index 00000000000000..32ae1362b2ea7f --- /dev/null +++ b/src/util/github.ts @@ -0,0 +1,26 @@ +export async function fetchWithToken( + req: Parameters[0], + init?: Parameters[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}`, + }, + }); +}