Skip to content
Cloudflare Docs

GitHubCode

The GitHubCode component allows you to include files from Cloudflare repositories.

The remote content can be filtered by lines or a region enclosed in tags.

Import

import { GitHubCode } from "~/components";

Usage

import {
  WorkflowEntrypoint,
  WorkflowStep,
  WorkflowEvent,
} from "cloudflare:workers";


// User-defined params passed to your workflow
export class MyWorkflow extends WorkflowEntrypoint {
  async run(event, step) {
    // Can access bindings on `this.env`
    // Can access params on `event.payload`


    const files = await step.do("my first step", async () => {
      // Fetch a list of files from $SOME_SERVICE
      return {
        inputParams: event,
        files: [
          "doc_7392_rev3.pdf",
          "report_x29_final.pdf",
          "memo_2024_05_12.pdf",
          "file_089_update.pdf",
          "proj_alpha_v2.pdf",
          "data_analysis_q2.pdf",
          "notes_meeting_52.pdf",
          "summary_fy24_draft.pdf",
        ],
      };
    });


    const apiResponse = await step.do("some other step", async () => {
      let resp = await fetch("https://api.cloudflare.com/client/v4/ips");
      return await resp.json();
    });


    await step.sleep("wait on something", "1 minute");


    await step.do(
      "make a call to write that could maybe, just might, fail",
      // Define a retry strategy
      {
        retries: {
          limit: 5,
          delay: "5 second",
          backoff: "exponential",
        },
        timeout: "15 minutes",
      },
      async () => {
        // Do stuff here, with access to the state from our previous steps
        if (Math.random() > 0.5) {
          throw new Error("API call to $STORAGE_SYSTEM failed");
        }
      },
    );
  }
}


export default {
  async fetch(req, env) {
    let url = new URL(req.url);


    if (url.pathname.startsWith("/favicon")) {
      return Response.json({}, { status: 404 });
    }


    // Get the status of an existing instance, if provided
    let id = url.searchParams.get("instanceId");
    if (id) {
      let instance = await env.MY_WORKFLOW.get(id);
      return Response.json({
        status: await instance.status(),
      });
    }


    // Spawn a new instance and return the ID and status
    let instance = await env.MY_WORKFLOW.create();
    return Response.json({
      id: instance.id,
      details: await instance.status(),
    });
  },
};
 
<GitHubCode
    repo="cloudflare/workflows-starter"
    file="src/index.ts"
    commit="a844e629ec80968118d4b116d4b26f5dcb107137"
    lang="ts"
    code={{
      collapse: "2-3"
    }}
/>

Filtering by lines

import { GitHubCode } from "~/components";


{/*
import { foo } from "bar";


const baz = foo();


console.log(baz);
*/}
<GitHubCode
    repo="..."
    file="..."
    commit="..."
    lang="..."
    lines="1-3"
/>
{/*
import { foo } from "bar";


const baz = foo();
*/}

Filtering by tag

import { GitHubCode } from "~/components";


{/*
<docs-tag name="no-logging">
import { foo } from "bar";


const baz = foo();
</docs-tag name="no-logging">


console.log(baz);
*/}
<GitHubCode
    repo="..."
    file="..."
    commit="..."
    lang="..."
    tag="no-logging"
/>
{/*
import { foo } from "bar";


const baz = foo();
*/}

<GitHubCode> Props

repo

required type: string

The owner and repository to pull from, for example cloudflare/workers-rs.

file

required type: string

The file path to pull from, for example templates/hello-world/src/lib.rs.

commit

required type: string

The long (40-characters) Git commit hash to pull from, for example ab3951b5c95329a600a7baa9f9bb1a7a95f1aeaa.

lang

required type: string

The language to use for the code block, for example rs.

If the lang is ts, the TypeScriptExample component will be used to provide a JavaScript tab as well.

lines

type: string

A range of lines to filter the content using, for example 1-3.

tag

type: string

A region to filter the content with, for example no-logging.

This should be represented as starting <docs-tag name="no-logging"> and closing </docs-tag name="no-logging"> comments in the source file.

code

type: object

Props to pass to the Expressive Code component ↗.