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

use worker::*;

#[event(fetch)]
async fn fetch(
    _req: Request,
    _env: Env,
    _ctx: Context,
) -> Result<Response> {
    console_error_panic_hook::set_once();
    Response::ok("Hello World!")
}

import { GitHubCode } from "~/components";

<GitHubCode
    repo="cloudflare/workers-rs"
    file="templates/hello-world/src/lib.rs"
    commit="ab3951b5c95329a600a7baa9f9bb1a7a95f1aeaa"
    lang="rs"
/>

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.

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.