Recipe: isomorphic-git

Render commits read entirely in-browser by isomorphic-git. The shape returned by git.log maps to Commit with a one-pass .map().

import git from "isomorphic-git";
import http from "isomorphic-git/http/web";
import LightningFS from "@isomorphic-git/lightning-fs";
import type { Commit } from "@/components/git-graph/types";

const fs = new LightningFS("repo");
const dir = "/repo";

await git.clone({
  fs, http, dir,
  url: "https://github.com/anthropics/claude-code",
  depth: 200,
});

const log = await git.log({ fs, dir });

const commits: Commit[] = log.map((entry) => ({
  sha: entry.oid,
  parents: entry.commit.parent,
  author: {
    name: entry.commit.author.name,
    email: entry.commit.author.email,
  },
  // Headline only — <GitGraph> renders one line per commit.
  message: entry.commit.message.split("\n", 1)[0] ?? "",
  timestamp: entry.commit.author.timestamp,
}));

Notes