${visual}${link}${changeMark(summary, entry.rel, entry.isDir)}${mark} ${entry.isDir ? "—" : escapeHtml(formatSize(entry.size))} ${entry.isDir ? "—" : escapeHtml(formatDate(entry.mtimeMs))} `;
}
export interface DirectoryPage {
rootLabel: string;
rel: string;
listing: Listing;
tree: TreeNode;
thumbnails: boolean;
maxThumbBytes: number;
git?: GitStatus;
/** Changed-path index for the header chip and markers. */
summary?: ChangeSummary;
}
/** Render a directory listing page. */
export function renderDirectoryPage(page: DirectoryPage): string {
// At the root there is no folder name to show, so the served folder names it.
const folderName = page.rel ? lastSegment(page.rel) : lastSegment(page.rootLabel) || "/";
const heading = `${escapeHtml(folderName)} `;
let body = `
Name Size Modified
${page.listing.entries.map((entry) => renderRow(entry, page.maxThumbBytes, page.thumbnails, page.summary)).join("\n")}
`;
if (page.listing.entries.length === 0) body = `This folder is empty.
`;
else if (page.listing.truncated)
body += `Showing the first ${page.listing.entries.length} of ${page.listing.total} entries.
`;
return renderLayout({
title: `browse · ${page.rel || folderName}`,
rootLabel: page.rootLabel,
tree: page.tree,
currentRel: page.rel,
breadcrumbs: renderBreadcrumbs(page.rel),
keys: pageKeys(),
main: ` ${heading}\n ${body}`,
footerNote: `${page.listing.total} entr${page.listing.total === 1 ? "y" : "ies"}`,
git: page.git,
summary: page.summary,
});
}
export interface FilePage {
rootLabel: string;
rel: string;
file: FileView;
tree: TreeNode;
maxFileBytes: number;
git?: GitStatus;
/** Show the Markdown source instead of the rendered HTML. */
markdownRaw?: boolean;
/** True when this file has uncommitted changes, for the changes action. */
changed?: boolean;
/** Changed-path index for the header chip and the tree markers. */
summary?: ChangeSummary;
}
/** The root-relative directory of a file, for resolving its Markdown links. */
function markdownBaseDir(rel: string): string {
const slash = rel.lastIndexOf("/");
return slash === -1 ? "" : rel.slice(0, slash);
}
function renderCodeLines(lines: string[], language?: HighlightLanguage): string {
const rendered = language ? highlightLines(lines, language) : lines.map((line) => escapeHtml(line));
return rendered.map((html) => `${html.length > 0 ? html : " "} `).join("");
}
/** The last segment of a root-relative path, or the path itself when it has none. */
function lastSegment(path: string): string {
const trimmed = path.replace(/[/\\]+$/, "");
const slash = Math.max(trimmed.lastIndexOf("/"), trimmed.lastIndexOf("\\"));
return slash === -1 ? trimmed : trimmed.slice(slash + 1);
}
/** The shortcuts every page shares, plus whatever the page adds. */
function pageKeys(...extra: KeyHint[]): KeyHint[] {
return [{ keys: "/ ⌘K", label: "Quick open a file" }, ...extra, { keys: "?", label: "This sheet" }];
}
/** An "on this page" outline from the headings the Markdown renderer emitted. */
function renderOutline(headings: MarkdownHeading[]): string {
if (headings.length < 4) return "";
const base = Math.min(...headings.map((heading) => heading.level));
const items = headings
.map((heading) => {
const depth = Math.min(heading.level - base, 3);
const label = heading.text.replace(/\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/[`*_~]/g, "");
return `${escapeHtml(label)} On this page changes `,
);
}
if (isMarkdown) {
const rendered = page.markdownRaw
? `rendered `
: `rendered `;
const raw = page.markdownRaw
? `raw `
: `raw `;
groups.push(`${rendered}${raw} `);
}
if (page.file.kind === "text" || (isMarkdown && page.markdownRaw)) {
groups.push(
`wrap `,
);
}
if (page.file.kind === "text" || isMarkdown) {
groups.push(
`copy contents `,
);
}
groups.push(
`copy path `,
);
return `${groups.join("")} `;
}
/** Render a file page (text, Markdown, image, binary, or over-size). */
export function renderFilePage(page: FilePage): string {
const name = page.rel.slice(page.rel.lastIndexOf("/") + 1);
const spec = languageOf(name);
const language = page.file.kind === "text" ? detectLanguage(name) : undefined;
// Text is always served as octet-stream, so the response type says nothing
// about the file; the language label, size, and date are the useful metadata.
const meta = `${spec.label} · ${formatSize(page.file.size)} · ${formatDate(page.file.mtimeMs)}`;
const download = `download `;
const head = `${iconMarkup(spec)}
${escapeHtml(name)} ${escapeHtml(meta)} ${document.html} `;
} else {
content = `${renderCodeLines(page.file.lines, language)}Showing the first ${page.file.lines.length} of ${page.file.totalLines} lines.
`;
} else if (page.file.kind === "image") {
content = ``;
} else if (page.file.kind === "tooLarge") {
content = `File is ${escapeHtml(formatSize(page.file.size))}.
Larger than the ${escapeHtml(formatSize(page.maxFileBytes))} inline limit.
${download}
Looks like a binary file.
${escapeHtml(formatSize(page.file.size))} · ${escapeHtml(page.file.mime)}
${download}
${head}${content}
\n ${note}`,
footerNote: escapeHtml(page.rel),
git: page.git,
summary: page.summary,
});
}
/** Map a status letter to an accessible label. */
const STATUS_LABEL: Record = {
M: "modified",
A: "added",
D: "deleted",
R: "renamed",
C: "copied",
T: "type changed",
U: "unmerged",
"?": "untracked",
};
function statusWord(letter: string): string {
return STATUS_LABEL[letter] ?? "changed";
}
/**
* The inner HTML per diff line. Hunk bodies are highlighted by rebuilding the
* old side (context + deleted) and the new side (context + added), so the
* tokenizer carries state within a hunk; meta, hunk, and note lines stay plain.
* State does not cross hunks, since the unchanged lines between them are absent.
*/
function highlightDiffText(lines: DiffLine[], language?: HighlightLanguage): string[] {
if (!language) return lines.map((line) => escapeHtml(line.text));
const out: string[] = new Array(lines.length);
let index = 0;
while (index < lines.length) {
const kind = lines[index].kind;
if (kind !== "ctx" && kind !== "add" && kind !== "del") {
out[index] = escapeHtml(lines[index].text);
index++;
continue;
}
const start = index;
const oldDoc: string[] = [];
const newDoc: string[] = [];
while (index < lines.length) {
const body = lines[index].kind;
if (body !== "ctx" && body !== "add" && body !== "del") break;
if (body === "ctx") {
oldDoc.push(lines[index].text);
newDoc.push(lines[index].text);
} else if (body === "add") {
newDoc.push(lines[index].text);
} else {
oldDoc.push(lines[index].text);
}
index++;
}
const oldHtml = highlightLines(oldDoc, language);
const newHtml = highlightLines(newDoc, language);
let oldIndex = 0;
let newIndex = 0;
for (let cursor = start; cursor < index; cursor++) {
const body = lines[cursor].kind;
if (body === "ctx") {
out[cursor] = newHtml[newIndex];
newIndex++;
oldIndex++;
} else if (body === "add") {
out[cursor] = newHtml[newIndex];
newIndex++;
} else {
out[cursor] = oldHtml[oldIndex];
oldIndex++;
}
}
}
return out;
}
/** Render unified-diff lines with a two-column gutter and per-kind styling. */
export function renderDiffLines(lines: DiffLine[], language?: HighlightLanguage): string {
const html = highlightDiffText(lines, language);
// Every hunk is a section so its sticky header is bounded by its own body;
// the section also gives the keyboard a stable, non-sticky scroll target.
const out: string[] = [];
let hunks = 0;
let open = false;
lines.forEach((line, index) => {
if (line.kind === "hunk") {
if (open) out.push("");
hunks += 1;
out.push(``);
open = true;
}
const sign = line.kind === "add" ? "+" : line.kind === "del" ? "-" : line.kind === "ctx" ? " " : "";
const gutter = `${line.oldNo ?? ""} ${line.newNo ?? ""} `;
const marker = `${sign} `;
out.push(
`${gutter}${marker}${html[index]} `,
);
});
if (open) out.push(" ");
return out.join("");
}
/** The scope label for a mode. */
function modeScope(mode: DiffMode): string {
if (mode === "staged") return "staged vs HEAD";
if (mode === "worktree") return "unstaged";
return "vs HEAD";
}
/** The `head | staged | worktree` segmented control; `build` returns each href. */
function renderModeControl(mode: DiffMode, build: (mode: DiffMode) => string): string {
const items = DIFF_MODES.map((candidate) => {
const current = candidate === mode ? ` aria-current="page"` : "";
return `${candidate} `;
}).join("");
return `${items} `;
}
export interface DiffPage {
rootLabel: string;
mode: DiffMode;
files: ChangedFile[];
stat: string;
tree: TreeNode;
git?: GitStatus;
summary?: ChangeSummary;
}
/** The change overview: `git diff --stat` plus every changed path. */
export function renderDiffPage(page: DiffPage): string {
const modeHref = (mode: DiffMode) => (mode === "head" ? "/diff" : `/diff?mode=${mode}`);
const body =
page.files.length === 0
? `No changes ${escapeHtml(modeScope(page.mode))}.
The working tree matches this scope.
Status Path Changes
${page.files.map((file) => renderChangedRow(file, page.mode)).join("\n")}
`;
const stat = page.stat ? `${escapeHtml(page.stat)} ` : "";
return renderLayout({
title: "browse · changes",
rootLabel: page.rootLabel,
tree: page.tree,
currentRel: "",
breadcrumbs: renderBreadcrumbs(""),
mainClass: "browse-page",
keys: pageKeys(),
main: ` Changes ${escapeHtml(modeScope(page.mode))} \n ${renderModeControl(page.mode, modeHref)}
\n ${stat}\n ${body}`,
footerNote: `${page.files.length} changed`,
git: page.git,
summary: page.summary,
});
}
function renderChangedRow(file: ChangedFile, mode: DiffMode): string {
const letter = statusLetter(file);
const label = statusWord(letter);
const badge = `browse-diff-badge browse-diff-badge--${letter === "?" ? "Q" : letter}`;
const orig = file.origRel ? ` from ${escapeHtml(file.origRel)} ` : "";
const href = `/diff/${encodePath(file.rel)}${mode === "head" ? "" : `?mode=${mode}`}`;
return `${escapeHtml(letter)} ${iconMarkup(languageOf(file.rel))}${escapeHtml(file.rel)} ${orig} ${escapeHtml(label)} view file `,
`wrap `,
`download `,
`copy path `,
];
// A per-file change summary and hunk count, so the scope is visible before scrolling.
const adds = page.diff.lines.filter((line) => line.kind === "add").length;
const dels = page.diff.lines.filter((line) => line.kind === "del").length;
const hunks = page.diff.lines.filter((line) => line.kind === "hunk").length;
const summary =
hunks > 0
? `+${adds} −${dels} ${hunks} hunk${hunks === 1 ? "" : "s"} `
: "";
const keys = pageKeys(
{ keys: "u", label: "Toggle line wrapping" },
...(hunks > 0 ? [{ keys: "n p", label: "Next and previous change" }] : []),
);
const head = `${iconMarkup(spec)}
${escapeHtml(name)} ${escapeHtml(modeScope(page.mode))} ${summary}${actions.join("")} `;
let content: string;
let note = "";
if (page.diff.binary) {
content = `Binary or unreadable change.
No text diff is shown for this file.
download No changes for this file.
It is unchanged in the selected scope.
${renderDiffLines(page.diff.lines, detectLanguage(name))}Showing the first ${page.diff.lines.length} diff lines.
`;
}
return renderLayout({
title: `browse · ${page.rel}`,
rootLabel: page.rootLabel,
tree: page.tree,
currentRel: page.rel,
breadcrumbs: renderBreadcrumbs(page.rel),
mainClass: "browse-page",
keys,
main: ` ${head}${content}
\n ${note}`,
footerNote: `diff · ${escapeHtml(modeScope(page.mode))}`,
git: page.git,
summary: page.summary,
});
}
export interface ErrorPage {
rootLabel: string;
status: number;
message: string;
tree: TreeNode;
rel: string;
git?: GitStatus;
}
/** Render a status/error page with the same chrome. */
export function renderErrorPage(page: ErrorPage): string {
return renderLayout({
title: `browse · ${page.status}`,
rootLabel: page.rootLabel,
tree: page.tree,
currentRel: "",
breadcrumbs: renderBreadcrumbs(""),
main: ` `,
footerNote: "error",
git: page.git,
});
}