Github Branch

Compare a branch against its base branch, including contributors, commits, changed files, and a compact diff view.

Usage

import { GithubBranch } from '@stoked-ui/github';
import { getApiUrl } from 'docs/src/modules/utils/getApiUrl';

<GithubBranch
  owner="stoked-ui"
  repo="sui"
  base="main"
  head="bug/fixAutoDeploySite"
  apiUrl={getApiUrl('/api/github/branch')}
/>

Private snapshots

Private mode consumes the generated snapshot JSON instead of fetching at runtime.

import { GithubBranch } from '@stoked-ui/github';
import branchSnapshot from '../../snapshots/github-branch-private.json';

<GithubBranch
  owner="stoked-ui"
  repo="sui"
  base={branchSnapshot.baseRef}
  head={branchSnapshot.headRef}
  private
  data={branchSnapshot}
/>

The docs snapshots are refreshed with pnpm github:snapshots.

Demos

Public repo runtime

For public repositories, the component can query GitHub directly at runtime.

Runtime through a docs API route

Use apiUrl when you want runtime fetching to flow through a server-side helper.

Private static snapshot

Use private and pre-generated data when the source branch data should stay static in the exported site.