@magland/mochi 0.3.1

package/dist/views.js

@@ -0,0 +1,1007 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.encPath = encPath;
+exports.repoUrl = repoUrl;
+exports.csrfField = csrfField;
+exports.layout = layout;
+exports.repoOpts = repoOpts;
+exports.copyButton = copyButton;
+exports.copyRow = copyRow;
+exports.repoHeader = repoHeader;
+exports.homePage = homePage;
+exports.aboutPage = aboutPage;
+exports.collectionPage = collectionPage;
+exports.treePage = treePage;
+exports.searchPage = searchPage;
+exports.findFilePage = findFilePage;
+exports.blobPage = blobPage;
+exports.blamePage = blamePage;
+exports.commitsPage = commitsPage;
+exports.commitPage = commitPage;
+exports.refListPage = refListPage;
+exports.emptyRepoPage = emptyRepoPage;
+exports.errorPage = errorPage;
+const html_1 = require("./html");
+const render_1 = require("./render");
+const session_1 = require("./session");
+const assets_1 = require("./assets");
+const pagescript_1 = require("./pagescript");
+const themes_1 = require("./themes");
+const logo_1 = require("./logo");
+const icons_1 = require("./icons");
+const avatar_1 = require("./avatar");
+const version_1 = require("./version");
+function encPath(p) {
+    return p
+        .split('/')
+        .map(encodeURIComponent)
+        .join('/');
+}
+function repoUrl(ctx) {
+    return `/${encodeURIComponent(ctx.collection)}/${encodeURIComponent(ctx.repo)}`;
+}
+function csrfField(viewer) {
+    return (0, html_1.html) `<input type="hidden" name="csrf" value="${viewer.csrf}">`;
+}
+const FOLDER_ICON = (0, icons_1.icon)('folder', 'icon');
+const FILE_ICON = (0, icons_1.icon)('file', 'icon file');
+const REPO_ICON = (0, icons_1.icon)('repo', 'icon');
+function userBox(opts) {
+    const viewer = opts.viewer ?? null;
+    if (!viewer) {
+        const next = opts.path && opts.path.startsWith('/') ? opts.path : '/';
+        return (0, html_1.html) `<a class="btn" href="/login?next=${encodeURIComponent(next)}">Sign in</a>`;
+    }
+    // The signed-in header is an avatar that opens a menu, as GitHub's is: the
+    // name and what you can do with the account are one click away rather than
+    // spread across the bar.
+    const name = viewer.auth.username;
+    const admin = (0, session_1.viewerIsAdmin)(viewer)
+        ? (0, html_1.html) `<a class="dd-item" href="/admin">${(0, icons_1.icon)('sliders')}<span>Admin</span></a>`
+        : '';
+    return (0, html_1.html) `<details class="dropdown user-menu">
+<summary aria-label="Account menu">${(0, avatar_1.avatar)(name, 24)}${(0, icons_1.icon)('chevron-down', 'caret')}</summary>
+<div class="dropdown-menu dd-right">
+  <div class="dd-section">Signed in as <b>${name}</b></div>
+  ${admin}
+  <form method="post" action="/logout">${csrfField(viewer)}<button type="submit" class="dd-item">${(0, icons_1.icon)('sign-out')}<span>Sign out</span></button></form>
+</div>
+</details>`;
+}
+/**
+ * The jump box. A vault is many repositories and one collection page, so the
+ * way between any two of them was previously up and back down; this is the
+ * one control that goes straight there, from every page, on one keystroke.
+ * The button carries the keystroke on its face, since a shortcut nothing
+ * mentions is a shortcut nobody finds.
+ */
+function jumpButton() {
+    return (0, html_1.html) `<button type="button" class="jump-open" data-jump-open aria-haspopup="dialog" aria-label="Jump to a repository">${(0, icons_1.icon)('search')}<span class="jump-label">Jump to</span><kbd class="jump-key">/</kbd></button>`;
+}
+/**
+ * Which appearance the reader wants. The vault's theme is what the operator
+ * chose and stays the default, but the reader is the one looking at it, on
+ * their screen and at their hour, so they get the last word. The choice is
+ * kept in their own browser: nothing about it reaches the vault, and a vault
+ * that is read anonymously has nowhere to keep it anyway.
+ */
+function themeMenu() {
+    const item = (name, label) => (0, html_1.html) `<button type="button" class="dd-item theme-item" role="menuitemradio" aria-checked="false" data-theme-name="${name}"><span class="theme-check">${(0, icons_1.icon)('check')}</span><span>${label}</span></button>`;
+    return (0, html_1.html) `<details class="dropdown theme-menu">
+<summary aria-label="Appearance">${(0, icons_1.icon)('appearance')}</summary>
+<div class="dropdown-menu dd-right" role="menu">
+  <div class="dd-section">Appearance</div>
+  ${item('auto', 'Match my system')}
+  ${(0, html_1.joinHtml)(themes_1.THEMES.map((t) => item(t.name, t.label)), '\n  ')}
+</div>
+</details>`;
+}
+function jumpDialog(jump) {
+    const data = jump
+        ? // The payload is JSON in a script tag, where escaping entities would
+            // corrupt it; < is neutralized in the JSON's own spelling instead.
+            (0, html_1.html) `<script type="application/json" id="jump-data">${(0, html_1.raw)(JSON.stringify(jump).replace(/</g, '\\u003c'))}</script>`
+        : '';
+    return (0, html_1.html) `${data}<dialog class="jump" id="jump" aria-label="Jump to">
+<div class="jump-field">${(0, icons_1.icon)('search', 'jump-glyph')}<input id="jump-q" type="text" autocomplete="off" spellcheck="false" placeholder="Jump to a repository" aria-label="Jump to a repository" aria-controls="jump-list"></div>
+<ul class="jump-list" id="jump-list" role="listbox" aria-label="Results"></ul>
+<div class="jump-foot"><kbd>↑</kbd><kbd>↓</kbd> move<kbd>↵</kbd>open<kbd>esc</kbd>close</div>
+</dialog>`;
+}
+/**
+ * What this vault is running, at the foot of every page. An operator who has
+ * just deployed something needs to know whether they are looking at it, and a
+ * version alone cannot say: main carries the last release's version until the
+ * next bump, so several different builds answer to "0.3.0". The commit narrows
+ * it to one and the date says when that one was compiled. A vault running from
+ * source has no build to name and says that instead of showing a date it would
+ * have had to invent. See src/version.ts for where the stamp comes from.
+ */
+function buildStamp() {
+    const build = (0, version_1.buildInfo)();
+    const parts = [(0, html_1.html) `Mochi Forge <span class="mono">${build.version}</span>`];
+    if (build.commit)
+        parts.push((0, html_1.html) `build <span class="mono">${build.commit}</span>`);
+    const iso = build.builtAt;
+    const built = iso ? new Date(iso) : null;
+    parts.push(iso && built && !isNaN(built.getTime())
+        ? // The day, not "3 days ago": what this gets compared against is a date
+            // kept somewhere else, a release or a deploy log, and the exact time is
+            // a hover away for anyone telling two builds of one day apart.
+            (0, html_1.html) `built <time datetime="${built.toISOString()}" title="${(0, render_1.formatDateFull)(iso)}">${(0, render_1.formatDay)(iso)}</time>`
+        : (0, html_1.html) `running from source`);
+    return (0, html_1.joinHtml)(parts, ' <span class="foot-sep">\u00b7</span> ');
+}
+function layout(title, content, opts = {}) {
+    // The theme name rides along as a query parameter so a changed theme busts
+    // any cache in front of the stylesheets, and the stylesheet carries a tag of
+    // its own contents so that an upgrade does too. Between them the sheet can
+    // then be kept for good instead of revalidated on every navigation.
+    const theme = (0, themes_1.activeTheme)().name;
+    const sheet = (0, assets_1.styleSheet)((0, themes_1.activeTheme)()).tag;
+    const script = (0, pagescript_1.pageScript)().tag;
+    // The theme pair rides on <html> rather than in the script, which is what
+    // lets /assets/page.js be one cacheable file for every vault: the script
+    // reads these two attributes instead of being generated around them.
+    return (0, html_1.html) `<!doctype html>
+<html lang="en" data-theme-vault="${theme}" data-theme-dark="${(0, themes_1.darkFor)((0, themes_1.activeTheme)())}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+<link rel="stylesheet" href="/assets/style.css?t=${encodeURIComponent(theme)}&amp;v=${sheet}">
+<link id="hl-css" rel="stylesheet" href="/assets/hl.css?t=${encodeURIComponent(theme)}">
+<link rel="stylesheet" href="/assets/katex/katex.css">
+<link rel="icon" href="/favicon.svg?t=${encodeURIComponent(theme)}" type="image/svg+xml">
+<script src="/assets/page.js?v=${script}"></script>
+</head>
+<body>
+<header class="topbar"><div class="container"><a class="brand" href="/">${(0, html_1.raw)(logo_1.WORDMARK)}</a><span class="crumbs">${opts.crumbs}</span><div class="userbox">${jumpButton()}${themeMenu()}${userBox(opts)}</div></div></header>
+<main class="container">
+${content}
+</main>
+<footer class="pagefoot"><div class="container">${buildStamp()}</div></footer>
+${jumpDialog(opts.jump ?? null)}
+</body>
+</html>`.text;
+}
+function repoOpts(ctx, path) {
+    // Every repository page puts its address in the top bar as well as at the
+    // head of the page. The bar is what stays in view once the reader has
+    // scrolled into a long file or a long thread, so it is the one place that
+    // can always answer "where am I, and how do I get back up from here".
+    const crumbs = (0, html_1.html) ` / <a href="/${encodeURIComponent(ctx.collection)}">${ctx.collection}</a> / <a href="${repoUrl(ctx)}">${ctx.repo}</a>`;
+    return { viewer: ctx.viewer, path, crumbs, jump: jumpContext(ctx) };
+}
+/**
+ * What the jump box offers from inside a repository: the sections its tabs
+ * lead to, and the two searches that take what has been typed rather than
+ * matching against it. The list mirrors the tab row, so a section that is not
+ * shown there is not reachable here either.
+ */
+function jumpContext(ctx) {
+    const base = repoUrl(ctx);
+    const sections = [
+        { label: 'Code', href: base },
+        { label: 'Commits', href: `${base}/commits/${encPath(ctx.ref)}` },
+        { label: 'Issues', href: `${base}/issues` },
+        { label: 'Pull requests', href: `${base}/pulls` },
+        { label: 'Branches', href: `${base}/branches` },
+        { label: 'Tags', href: `${base}/tags` },
+        { label: 'Releases', href: `${base}/releases` },
+    ];
+    if (ctx.hasCi)
+        sections.push({ label: 'Actions', href: `${base}/actions` });
+    if (ctx.hasSite)
+        sections.push({ label: 'Site', href: ctx.siteUrl });
+    if (ctx.canPush || ctx.canAdmin)
+        sections.push({ label: 'Settings', href: `${base}/settings` });
+    return {
+        repo: ctx.repo,
+        sections,
+        searchUrl: `${base}/search?ref=${encodeURIComponent(ctx.ref)}&q=`,
+        findUrl: `${base}/find/${encPath(ctx.ref)}`,
+    };
+}
+/**
+ * The copy button that sits after a <code> or <input> holding the text.
+ * Confirmation is a class the script toggles rather than replaced markup, so
+ * the idle and copied faces are both in the page and neither needs escaping
+ * at click time.
+ */
+function copyButton(label = '', text, title = '') {
+    const face = (glyph, caption, cls) => (0, html_1.html) `<span class="${cls}">${(0, icons_1.icon)(glyph)}${label ? (0, html_1.html) `<span>${caption}</span>` : ''}</span>`;
+    // With no text of its own the button copies the element before it, which is
+    // how the command rows and the clone box use it.
+    const payload = text === undefined ? '' : (0, html_1.html) ` data-copy="${text}"`;
+    return (0, html_1.html) `<button class="copy-btn" type="button"${payload}${title ? (0, html_1.html) ` title="${title}"` : ''} aria-label="Copy${label ? ` ${label.toLowerCase()}` : ''}">${face('copy', label, 'copy-idle')}${face('check', 'Copied', 'copy-done')}</button>`;
+}
+function copyRow(cmd) {
+    return (0, html_1.html) `<div class="cmd-row"><code>${cmd}</code>${copyButton()}</div>`;
+}
+/**
+ * The branch and tag picker: a button carrying the current ref, opening a
+ * menu of every ref with a filter box, as on GitHub. It is a <details>
+ * element, so it opens, closes, and takes the keyboard without a component
+ * framework; the page script closes it on an outside click and filters the
+ * list as you type.
+ */
+function refPicker(ctx, urlForRef) {
+    const isTag = ctx.tags.some((t) => t.name === ctx.ref);
+    const known = isTag || ctx.branches.some((b) => b.name === ctx.ref);
+    const item = (r) => {
+        const current = r.name === ctx.ref;
+        return (0, html_1.html) `<a class="dd-item${current ? ' current' : ''}" href="${urlForRef(r.name)}">${current ? (0, icons_1.icon)('check', 'dd-check') : (0, html_1.raw)('<span class="dd-check"></span>')}<span class="dd-label">${r.name}</span></a>`;
+    };
+    const group = (label, refs) => refs.length === 0
+        ? ''
+        : (0, html_1.html) `<div class="dd-group"><div class="dd-section">${label}</div>${refs.map(item)}</div>`;
+    // A ref that is neither branch nor tag is a raw commit the reader navigated
+    // to; name it on the button so the picker never lies about where they are.
+    const glyph = known ? (isTag ? 'tag' : 'git-branch') : 'git-commit';
+    const shown = known ? ctx.ref : ctx.ref.slice(0, 7);
+    return (0, html_1.html) `<details class="dropdown ref-picker">
+<summary class="btn" title="Switch branches or tags">${(0, icons_1.icon)(glyph)}<b class="dd-current">${shown}</b>${(0, icons_1.icon)('chevron-down', 'caret')}</summary>
+<div class="dropdown-menu">
+  <input class="dd-filter" type="text" placeholder="Find a branch or tag" aria-label="Filter branches and tags">
+  <div class="dd-scroll">${group('Branches', ctx.branches)}${group('Tags', ctx.tags)}</div>
+</div>
+</details>`;
+}
+/**
+ * The way in to the file finder. The data attribute is what the page script
+ * watches for, so that t reaches the finder from any page that offers it, as
+ * on GitHub.
+ */
+function findButton(ctx) {
+    const href = `${repoUrl(ctx)}/find/${encPath(ctx.ref)}`;
+    return (0, html_1.html) `<a class="btn" href="${href}" data-find-url="${href}" title="Go to file (t)">${(0, icons_1.icon)('search')}<span>Go to file</span></a>`;
+}
+/** The green Code button: the clone URL, and the source as an archive. */
+function cloneMenu(ctx) {
+    const archive = (ext, label) => (0, html_1.html) `<a class="dd-item" href="${repoUrl(ctx)}/archive/${encPath(ctx.ref)}.${ext}">${(0, icons_1.icon)('file-zip')}<span class="dd-label">${label}</span></a>`;
+    return (0, html_1.html) `<details class="dropdown clone-menu">
+<summary class="btn btn-primary">${(0, icons_1.icon)('code')}<span>Code</span>${(0, icons_1.icon)('chevron-down', 'caret')}</summary>
+<div class="dropdown-menu dd-right">
+  <div class="dd-section">Clone with HTTP</div>
+  <div class="cmd-row"><input readonly value="${ctx.cloneUrl}" data-select-all>${copyButton()}</div>
+  <p class="muted small">Anyone can clone. Pushing asks for a username and a token.</p>
+  <div class="dd-group"><div class="dd-section">Download ${ctx.ref}</div>
+${archive('zip', 'Source as zip')}${archive('tar.gz', 'Source as tar.gz')}</div>
+</div>
+</details>`;
+}
+function repoHeader(ctx, active) {
+    const base = repoUrl(ctx);
+    const tab = (id, label, href, glyph, count) => (0, html_1.html) `<a class="tab${active === id ? ' active' : ''}" href="${href}">${(0, icons_1.icon)(glyph)}<span>${label}</span>${count !== undefined ? (0, html_1.html) `<span class="counter">${count}</span>` : ''}</a>`;
+    // The search box rides in the title row, so searching this repository is a
+    // keystroke away from every one of its pages.
+    const search = (0, html_1.html) `<form class="repo-search" method="get" action="${base}/search" role="search"><input type="hidden" name="ref" value="${ctx.ref}"><input class="search-input" type="search" name="q" placeholder="Search this repository" aria-label="Search this repository">${(0, icons_1.icon)('search', 'search-glyph')}</form>`;
+    const parent = ctx.forkedFrom
+        ? (0, html_1.html) `<div class="fork-note muted small">${(0, icons_1.icon)('repo-forked')}<span>forked from <a href="/${encodeURIComponent(ctx.forkedFrom.collection)}/${encodeURIComponent(ctx.forkedFrom.repo)}">${ctx.forkedFrom.collection}/${ctx.forkedFrom.repo}</a></span></div>`
+        : '';
+    const badge = ctx.isPrivate ? (0, html_1.html) ` <span class="counter" title="Only collaborators, owners, and site admins can see this repository">Private</span>` : '';
+    return (0, html_1.html) `<div class="repo-title">${REPO_ICON}<a href="/${encodeURIComponent(ctx.collection)}">${ctx.collection}</a> <span class="muted">/</span> <a href="${base}"><b>${ctx.repo}</b></a>${badge}${search}</div>
+${parent}
+<nav class="tabs">
+${tab('code', 'Code', base, 'code')}
+${tab('commits', 'Commits', `${base}/commits/${encPath(ctx.ref)}`, 'history')}
+${tab('issues', 'Issues', `${base}/issues`, 'issue-opened', ctx.openIssues)}
+${tab('pulls', 'Pull requests', `${base}/pulls`, 'git-pull-request', ctx.openPulls)}
+${ctx.hasCi || active === 'actions' ? tab('actions', 'Actions', `${base}/actions`, 'play') : ''}
+${tab('branches', 'Branches', `${base}/branches`, 'git-branch', ctx.branches.length)}
+${tab('tags', 'Tags', `${base}/tags`, 'tag', ctx.tags.length)}
+${ctx.releases.length || active === 'releases' ? tab('releases', 'Releases', `${base}/releases`, 'rocket', ctx.releases.length) : ''}
+${ctx.hasSite ? tab('site', 'Site', ctx.siteUrl, 'globe') : ''}
+${ctx.canPush || ctx.canAdmin ? tab('settings', 'Settings', `${base}/settings`, 'sliders') : ''}
+</nav>`;
+}
+function breadcrumb(ctx, path) {
+    const base = repoUrl(ctx);
+    const parts = path === '' ? [] : path.split('/');
+    const pieces = [(0, html_1.html) `<a href="${base}/tree/${encPath(ctx.ref)}">${ctx.repo}</a>`];
+    let acc = '';
+    parts.forEach((part, i) => {
+        acc = acc === '' ? part : `${acc}/${part}`;
+        const last = i === parts.length - 1;
+        if (last) {
+            pieces.push((0, html_1.html) `<b>${part}</b>`);
+        }
+        else {
+            pieces.push((0, html_1.html) `<a href="${base}/tree/${encPath(ctx.ref)}/${encPath(acc)}">${part}</a>`);
+        }
+    });
+    return (0, html_1.html) `<span class="crumb">${(0, html_1.joinHtml)(pieces, ' / ')}</span>`;
+}
+/**
+ * The "find a repository" box GitHub puts above a long listing. It filters
+ * rows in the page rather than asking the server, which is honest about what
+ * it is: a way to find a name you already know in a list you can already see.
+ * Short lists do not get one, since scanning five names is faster than typing.
+ */
+function listFilter(target, placeholder, rowCount) {
+    if (rowCount <= 5)
+        return '';
+    return (0, html_1.html) `<div class="toolbar"><div class="left"><input class="list-filter" type="text" placeholder="${placeholder}" data-target="${target}" data-filter="rows" aria-label="${placeholder}"></div></div>`;
+}
+function noMatches(target) {
+    return (0, html_1.html) `<div class="empty-state" id="${target}-empty" hidden>No match.</div>`;
+}
+const CI_MARKS = {
+    running: { glyph: 'dot', label: 'running' },
+    success: { glyph: 'check-circle', label: 'passed' },
+    failure: { glyph: 'x-circle', label: 'failed' },
+    cancelled: { glyph: 'stop', label: 'cancelled' },
+    skipped: { glyph: 'skip', label: 'skipped' },
+};
+function ciMark(ci, repoName) {
+    const state = ci.running ? 'running' : (ci.conclusion ?? 'skipped');
+    const mark = CI_MARKS[state] ?? CI_MARKS.skipped;
+    return (0, html_1.html) `<a class="ci-mark ci-${state}" href="${ci.url}" aria-label="Last workflow run for ${repoName}: ${mark.label}" title="Last workflow run ${mark.label}">${(0, icons_1.icon)(mark.glyph)}</a>`;
+}
+/**
+ * A repository in a listing. Everything a reader decides on from a list of
+ * names is here and nothing else is: what it is called, what it is, when it
+ * was last touched, whether it publishes a site, and whether its last build
+ * passed. The name is the only link that fills the card, so the site and the
+ * build are reachable without opening the repository to find them.
+ */
+function repoCard(r, showCollection) {
+    const href = `/${encodeURIComponent(r.collection)}/${encodeURIComponent(r.name)}`;
+    const prefix = showCollection ? (0, html_1.html) `<span class="rc-collection">${r.collection}/</span>` : '';
+    const site = r.siteUrl
+        ? (0, html_1.html) `<a class="site-link" href="${r.siteUrl}" title="Site" aria-label="Site for ${r.name}">${(0, icons_1.icon)('globe')}</a>`
+        : '';
+    const ci = r.ci ? ciMark(r.ci, r.name) : '';
+    const desc = r.description ? (0, html_1.html) `<p class="rc-desc">${r.description}</p>` : '';
+    const when = r.updated ? (0, html_1.html) `<span class="rc-when">${(0, render_1.timeTag)(r.updated)}</span>` : '';
+    const badge = r.isPrivate ? (0, html_1.html) `<span class="counter">Private</span>` : '';
+    return (0, html_1.html) `<li class="repo-card">
+<div class="rc-top"><a class="rc-name" href="${href}">${prefix}${r.name}</a>${badge}<span class="rc-marks">${site}${ci}</span></div>
+${desc}
+<div class="rc-meta">${when}</div>
+</li>`;
+}
+/**
+ * The listing itself. Sorting is a link rather than a script, so the order a
+ * reader chose is in the address they can keep, and the two orders answer the
+ * two questions a listing is asked: what has been happening lately, and where
+ * is the one I already know the name of.
+ */
+function repoListing(repos, opts) {
+    const sorted = [...repos];
+    if (opts.sort === 'name') {
+        sorted.sort((a, b) => a.name.localeCompare(b.name) || a.collection.localeCompare(b.collection));
+    }
+    else {
+        sorted.sort((a, b) => (b.updated ?? '').localeCompare(a.updated ?? ''));
+    }
+    const sortLink = (id, label) => (0, html_1.html) `<a${opts.sort === id ? (0, html_1.raw)(' class="current" aria-current="true"') : ''} href="${opts.sortBase}${id === 'recent' ? '' : `?sort=${id}`}">${label}</a>`;
+    const controls = (0, html_1.html) `<div class="listing-controls">
+<input class="list-filter" type="text" placeholder="Filter repositories" data-target="repo-list" data-filter="cards" aria-label="Filter repositories">
+<span class="seg">${sortLink('recent', 'Recent')}${sortLink('name', 'A–Z')}</span>
+</div>`;
+    return (0, html_1.html) `${repos.length > 5 ? controls : ''}<ul class="repo-grid" id="repo-list">${(0, html_1.joinHtml)(sorted.map((r) => repoCard(r, opts.showCollection)), '\n')}</ul>${noMatches('repo-list')}`;
+}
+function homePage(rootLabel, collections, repos, sort, viewer) {
+    const total = repos.length;
+    const chips = collections.length
+        ? (0, html_1.html) `<nav class="collection-chips" aria-label="Collections">${collections.map((c) => (0, html_1.html) `<a class="coll-chip" href="/${encodeURIComponent(c.name)}">${(0, avatar_1.avatar)(c.name, 18, 'square')}<span>${c.name}</span><span class="coll-count">${c.repoCount}</span></a>`)}</nav>`
+        : '';
+    const body = total === 0
+        ? (0, html_1.html) `<div class="empty-state">No repositories yet.${viewer ? ' Create one with the buttons above, or push to a new path.' : ''} <a href="/about">What is this?</a></div>`
+        : repoListing(repos, { showCollection: true, sort, sortBase: '/' });
+    const newBtn = viewer
+        ? (0, html_1.html) `<a class="btn" href="/new/collection">${(0, icons_1.icon)('plus')}<span>New collection</span></a><a class="btn btn-primary" href="/new">${(0, icons_1.icon)('plus')}<span>New repository</span></a>`
+        : '';
+    // The about link is how a visitor who landed here cold finds out what they
+    // are looking at, so it rides on the first line they read.
+    const summary = total === 0
+        ? ''
+        : (0, html_1.html) `<p class="lede">${total} ${total === 1 ? 'repository' : 'repositories'} in ${collections.length} ${collections.length === 1 ? 'collection' : 'collections'}. <a class="muted" href="/about">What is this?</a></p>`;
+    const content = (0, html_1.html) `<div class="page-head"><h1>Repositories</h1><span class="right-group">${newBtn}</span></div>
+${summary}
+${chips}
+${body}
+${
+    // Where the vault sits on disk is the operator's business and not a
+    // visitor's, so the path is shown to someone who could act on it.
+    (0, session_1.viewerIsAdmin)(viewer) ? (0, html_1.html) `<p class="muted small vault-note">Serving ${rootLabel}</p>` : ''}`;
+    return layout('Mochi Forge', content, { viewer, path: '/' });
+}
+/**
+ * What this place is and how to use it, for the visitor who landed on a
+ * listing with no idea what they are looking at. One page, self-contained:
+ * the vault serves no other documentation, so nothing here may point into
+ * docs a visitor cannot reach.
+ */
+function aboutPage(baseUrl, viewer) {
+    const content = (0, html_1.html) `<div class="about-page">
+<h1>About this vault</h1>
+<p class="lede">This site is a <i>vault</i>: a self-hosted git forge run by its operator, holding git repositories
+grouped into collections.</p>
+
+<h2>Reading</h2>
+<p>Reading is anonymous. Browse files, history, and diffs; read issues and pull requests; search inside a repository
+(press <span class="mono">/</span> anywhere); download any ref as an archive. Cloning needs no account either:</p>
+${copyRow(`git clone ${baseUrl}/<collection>/<repository>`)}
+
+<h2>Writing</h2>
+<p>Every write is authorized by a token. There is no sign-up: tokens are minted by this vault's administrator, so if you
+should be able to push here, ask whoever runs the vault. A token is used two ways, with your username: as the password
+when git asks for credentials, and to <a href="/login">sign in</a> on the web, which unlocks editing files, opening
+issues and pull requests, and drafting releases in the browser.</p>
+<p>Pushing to a repository that does not exist yet creates it, if your token's scope covers that path:</p>
+${copyRow(`git push ${baseUrl}/<collection>/<new-repository> main`)}
+
+<h2>What repositories carry</h2>
+<p>Beside its files, a repository here can have issues, pull requests, releases tied to tags, GitHub-style workflows run
+by the operator's own runners, and a static site served from the repository at
+<span class="mono">/&lt;collection&gt;/&lt;repository&gt;/site/</span>. Workflows run without credentials: a vault holds
+no secrets, so jobs are limited to work that needs none, such as building and publishing a site.</p>
+
+<h2>The software</h2>
+<p>This vault runs <a href="https://github.com/magland/mochi">Mochi Forge</a>, an open-source forge: one process, no
+database, every repository an ordinary bare git repository on the operator's own disk.</p>
+</div>`;
+    return layout('About - Mochi Forge', content, { viewer, path: '/about' });
+}
+function collectionPage(collection, repoList, sort, viewer, 
+// Whether the viewer may reach the collection's settings, which is the only
+// way to the rename. A control nobody can use is not shown, as elsewhere.
+canAdminCollection, 
+// The collection's profile README, read from its .mochi repository; see
+// src/profile.ts. Rendered above the listing, since it is what the page is
+// for once a collection has one.
+profile = null) {
+    const body = repoList.length === 0
+        ? (0, html_1.html) `<div class="empty-state">No repositories in this collection yet.${viewer ? ' Create one with the buttons above, or push to a new path.' : ''}</div>`
+        : repoListing(repoList, {
+            showCollection: false,
+            sort,
+            sortBase: `/${encodeURIComponent(collection)}`,
+        });
+    const settingsBtn = canAdminCollection
+        ? (0, html_1.html) `<a class="btn" href="/${encodeURIComponent(collection)}/settings">${(0, icons_1.icon)('sliders')}<span>Settings</span></a>`
+        : '';
+    const newBtn = viewer
+        ? (0, html_1.html) `<a class="btn" href="/import?collection=${encodeURIComponent(collection)}">${(0, icons_1.icon)('download')}<span>Import</span></a><a class="btn btn-primary" href="/new?collection=${encodeURIComponent(collection)}">${(0, icons_1.icon)('plus')}<span>New repository</span></a>`
+        : '';
+    // The prompt to write a profile goes only to a viewer who could administer
+    // the collection, and only while there is none: a page with a profile says
+    // what it has to say, and the file is edited from the repository holding it.
+    const profileBox = profile?.readme
+        ? (0, html_1.html) `<div class="box profile-box" id="profile"><div class="box-header">${(0, icons_1.icon)('book')}<a href="${profile.readme.url}">${profile.readme.name}</a></div><div class="box-body markdown-body">${(0, html_1.raw)(profile.readme.html)}</div></div>`
+        : profile && canAdminCollection
+            ? (0, html_1.html) `<p class="muted small profile-hint">This collection has no profile README. <a href="${profile.addUrl}">Add one</a> at <span class="mono">.mochi/profile/README.md</span> to introduce it here.</p>`
+            : '';
+    const content = (0, html_1.html) `<div class="page-head"><h1 class="with-avatar">${(0, avatar_1.avatar)(collection, 28, 'square')}${collection}</h1><span class="right-group">${settingsBtn}${newBtn}</span></div>${profileBox}${body}`;
+    return layout(collection, content, {
+        crumbs: (0, html_1.html) ` / <a href="/${encodeURIComponent(collection)}">${collection}</a>`,
+        viewer,
+        path: `/${encodeURIComponent(collection)}`,
+    });
+}
+/** "1,284" - counts in the interface are grouped, as they are on GitHub. */
+function count(n) {
+    return n.toLocaleString('en-US');
+}
+/**
+ * What the repository is written in: one bar in the languages' own colours and
+ * the list that names them. The bar is the same information as the list and no
+ * more, so it is hidden from a screen reader rather than repeated to one.
+ *
+ * The colours are inline because they belong to the languages rather than to
+ * the theme (the rule that structural CSS names no colour holds for the rest
+ * of style.ts); they come from the table in languages.ts and never from
+ * anything a repository contains.
+ */
+function languagesBlock(languages) {
+    if (languages.length === 0)
+        return '';
+    const pct = (share) => `${share.toFixed(1)}%`;
+    const segments = languages.map((l) => (0, html_1.html) `<span class="lang-seg" style="width:${l.share.toFixed(2)}%;background:${l.color}"></span>`);
+    const items = languages.map((l) => (0, html_1.html) `<li><span class="lang-dot" style="background:${l.color}"></span><span class="lang-name">${l.name}</span> <span class="lang-pct muted">${pct(l.share)}</span></li>`);
+    return (0, html_1.html) `<div class="side-block">
+  <h3>Languages</h3>
+  <div class="lang-bar" aria-hidden="true">${segments}</div>
+  <ul class="lang-list">${items}</ul>
+</div>`;
+}
+/**
+ * The About panel beside the repository root: what the repository says it is,
+ * and the way in to the documents a reader looks for first.
+ */
+/** The most faces the panel shows before it counts the rest as a number. */
+const SHOWN_CONTRIBUTORS = 12;
+/**
+ * Who wrote this repository, by commit count, as GitHub lists in its About
+ * panel. Each face leads to that person's commits rather than to a profile
+ * page, since a vault has no profiles: the history is what it knows about
+ * them.
+ */
+function contributorsBlock(ctx, people) {
+    if (people.length === 0)
+        return '';
+    const base = repoUrl(ctx);
+    // A contributor with an account gets the account's identicon, so the same
+    // person wears the same face here as they do on the admin pages, whatever
+    // git author emails their commits carry.
+    const faces = people
+        .slice(0, SHOWN_CONTRIBUTORS)
+        .map((p) => (0, html_1.html) `<a class="contributor" href="${base}/commits/${encPath(ctx.ref)}?author=${encodeURIComponent(p.email || p.name)}" title="${p.name} - ${count(p.commits)} commit${p.commits === 1 ? '' : 's'}">${(0, avatar_1.avatar)(p.account ?? (p.email || p.name), 28)}</a>`);
+    const more = people.length > SHOWN_CONTRIBUTORS
+        ? (0, html_1.html) `<span class="muted small">+${count(people.length - SHOWN_CONTRIBUTORS)} more</span>`
+        : '';
+    return (0, html_1.html) `<div class="side-block">
+  <h3>Contributors <span class="counter">${count(people.length)}</span></h3>
+  <div class="contributors">${faces}${more}</div>
+</div>`;
+}
+function aboutPanel(ctx, view) {
+    const base = repoUrl(ctx);
+    const blob = (name) => `${base}/blob/${encPath(ctx.ref)}/${encPath(name)}`;
+    const license = view.entries.find((e) => e.type === 'blob' && /^(licen[cs]e|copying)(\.[a-z]+)?$/i.test(e.name));
+    const links = [];
+    if (view.readmeName)
+        links.push((0, html_1.html) `<a href="#readme">${(0, icons_1.icon)('book')}<span>Readme</span></a>`);
+    if (license)
+        links.push((0, html_1.html) `<a href="${blob(license.name)}">${(0, icons_1.icon)('law')}<span>${license.name}</span></a>`);
+    if (ctx.hasSite)
+        links.push((0, html_1.html) `<a href="${ctx.siteUrl}">${(0, icons_1.icon)('globe')}<span>Site</span></a>`);
+    if (ctx.releases.length)
+        links.push((0, html_1.html) `<a href="${base}/releases">${(0, icons_1.icon)('rocket')}<span>${count(ctx.releases.length)} release${ctx.releases.length === 1 ? '' : 's'}</span></a>`);
+    const settings = ctx.canPush || ctx.canAdmin
+        ? (0, html_1.html) `<a class="side-edit" href="${base}/settings" title="Edit repository details" aria-label="Edit repository details">${(0, icons_1.icon)('sliders')}</a>`
+        : '';
+    const description = view.description
+        ? (0, html_1.html) `<p class="side-desc">${view.description}</p>`
+        : (0, html_1.html) `<p class="side-desc muted">No description provided.</p>`;
+    const facts = [
+        (0, html_1.html) `<a href="${base}/commits/${encPath(ctx.ref)}">${(0, icons_1.icon)('history')}<span>${count(view.commitCount)} commit${view.commitCount === 1 ? '' : 's'}</span></a>`,
+        (0, html_1.html) `<a href="${base}/branches">${(0, icons_1.icon)('git-branch')}<span>${count(ctx.branches.length)} branch${ctx.branches.length === 1 ? '' : 'es'}</span></a>`,
+        (0, html_1.html) `<a href="${base}/tags">${(0, icons_1.icon)('tag')}<span>${count(ctx.tags.length)} tag${ctx.tags.length === 1 ? '' : 's'}</span></a>`,
+    ];
+    // The documents a reader looks for and the counts they navigate by are both
+    // facts about the repository, so they sit in the one About block rather than
+    // under a second rule with no caption on it. A hairline keeps them apart.
+    return (0, html_1.html) `<aside class="repo-side">
+<div class="side-block">
+  <h3>About${settings}</h3>
+  ${description}
+  ${links.length ? (0, html_1.html) `<div class="side-links">${links}</div><hr class="rule">` : ''}
+  <div class="side-links">${facts}</div>
+</div>
+${contributorsBlock(ctx, view.contributors)}
+${languagesBlock(view.languages)}
+</aside>`;
+}
+function treePage(ctx, view) {
+    const base = repoUrl(ctx);
+    const { path, entries } = view;
+    const refBase = `${base}/tree/${encPath(ctx.ref)}`;
+    const atRoot = path === '';
+    const rows = [];
+    if (!atRoot) {
+        const parent = path.split('/').slice(0, -1).join('/');
+        const up = parent === '' ? refBase : `${refBase}/${encPath(parent)}`;
+        rows.push((0, html_1.html) `<tr><td class="tree-name"><a href="${up}" aria-label="Parent directory">..</a></td><td></td><td></td></tr>`);
+    }
+    for (const e of entries) {
+        const childPath = atRoot ? e.name : `${path}/${e.name}`;
+        let name;
+        if (e.type === 'tree') {
+            name = (0, html_1.html) `${FOLDER_ICON}<a href="${refBase}/${encPath(childPath)}">${e.name}</a>`;
+        }
+        else if (e.type === 'blob') {
+            name = (0, html_1.html) `${FILE_ICON}<a href="${base}/blob/${encPath(ctx.ref)}/${encPath(childPath)}">${e.name}</a>`;
+        }
+        else {
+            name = (0, html_1.html) `${FOLDER_ICON}<span>${e.name}</span> <span class="muted small mono">@ ${e.sha.slice(0, 7)}</span>`;
+        }
+        // The message and age columns are what a directory listing on GitHub
+        // shows, and they answer the question a listing is usually asked: what
+        // changed here lately.
+        const commit = view.entryCommits.get(childPath);
+        const message = commit
+            ? (0, html_1.html) `<a href="${base}/commit/${commit.sha}" title="${commit.subject}">${commit.subject}</a>`
+            : '';
+        rows.push((0, html_1.html) `<tr><td class="tree-name">${name}</td><td class="tree-message muted small">${message}</td><td class="tree-age right small">${commit ? (0, render_1.timeTag)(commit.date) : ''}</td></tr>`);
+    }
+    const latest = view.latest;
+    const latestBar = latest
+        ? (0, html_1.html) `<div class="latest-commit">
+  <span class="lc-main"><b>${latest.author}</b> <a href="${base}/commit/${latest.sha}">${latest.subject}</a></span>
+  <span class="lc-meta"><a class="sha" href="${base}/commit/${latest.sha}">${latest.sha.slice(0, 7)}</a> ${(0, render_1.timeTag)(latest.date)} <a class="lc-history" href="${base}/commits/${encPath(ctx.ref)}">${(0, icons_1.icon)('history')}<b>${count(view.commitCount)}</b> <span>Commits</span></a></span>
+</div>`
+        : '';
+    const addFileUrl = `${base}/new/${encPath(ctx.ref)}${atRoot ? '' : `/${encPath(path)}`}`;
+    // The history of this directory, which at the root is the history of the
+    // repository: the same button GitHub puts above a listing.
+    const historyBtn = (0, html_1.html) `<a class="btn" href="${base}/commits/${encPath(ctx.ref)}${atRoot ? '' : `/${encPath(path)}`}" title="Commits touching this directory">${(0, icons_1.icon)('history')}<span>History</span></a>`;
+    // Forking is offered to anyone who can sign in; where the copy may go is
+    // settled on the form, where the answer can be explained.
+    const forkBtn = atRoot
+        ? (0, html_1.html) `<a class="btn" href="${ctx.viewer ? `${base}/fork` : `/login?next=${encodeURIComponent(`${base}/fork`)}`}" title="Copy this repository elsewhere in the vault">${(0, icons_1.icon)('repo-forked')}<span>Fork</span></a>`
+        : '';
+    // GitHub's "Add file" is a menu of two: write one here, or upload some.
+    const uploadUrl = `${base}/upload/${encPath(ctx.ref)}${atRoot ? '' : `/${encPath(path)}`}`;
+    const addFileBtn = ctx.canPush && ctx.refIsBranch
+        ? (0, html_1.html) `<details class="dropdown">
+<summary class="btn">${(0, icons_1.icon)('plus')}<span>Add file</span>${(0, icons_1.icon)('chevron-down', 'caret')}</summary>
+<div class="dropdown-menu dd-right">
+<a class="dd-item" href="${addFileUrl}">${(0, icons_1.icon)('file')}<span class="dd-label">Create new file</span></a>
+<a class="dd-item" href="${uploadUrl}">${(0, icons_1.icon)('upload')}<span class="dd-label">Upload files</span></a>
+</div>
+</details>`
+        : '';
+    const readmePath = atRoot ? view.readmeName : `${path}/${view.readmeName}`;
+    const readme = view.readmeHtml
+        ? (0, html_1.html) `<div class="box" id="readme"><div class="box-header">${(0, icons_1.icon)('book')}<a href="${base}/blob/${encPath(ctx.ref)}/${encPath(readmePath ?? 'README')}">${view.readmeName ?? 'README'}</a></div><div class="box-body markdown-body">${(0, html_1.raw)(view.readmeHtml)}</div></div>`
+        : '';
+    const content = (0, html_1.html) `${repoHeader(ctx, 'code')}
+<div class="toolbar">
+  <div class="left">${refPicker(ctx, (ref) => `${base}/tree/${encPath(ref)}`)}${breadcrumb(ctx, path)}</div>
+  <div class="right-group">${findButton(ctx)}${historyBtn}${forkBtn}${addFileBtn}${cloneMenu(ctx)}</div>
+</div>
+<div class="repo-layout">
+<div class="repo-main">
+${latestBar}
+<table class="listing tree"><tbody>${rows}</tbody></table>
+${readme}
+</div>
+${atRoot ? aboutPanel(ctx, view) : ''}
+</div>`;
+    return layout(`${ctx.collection}/${ctx.repo}${path ? ` at ${path}` : ''}`, content, repoOpts(ctx, atRoot ? repoUrl(ctx) : `${refBase}/${encPath(path)}`));
+}
+/**
+ * Show one matching line with the query marked in it. The positions come from
+ * the raw text, so the slices around them are escaped individually rather
+ * than searching escaped HTML for something that may no longer look the same.
+ * A long line is cut around its first match: a result list is for finding the
+ * file, not for reading it.
+ */
+function markMatches(text, query) {
+    const hay = text.toLowerCase();
+    const needle = query.toLowerCase();
+    let from = needle === '' ? -1 : hay.indexOf(needle);
+    const first = from;
+    const WINDOW = 240;
+    let start = 0;
+    let cut = text;
+    if (text.length > WINDOW && first > WINDOW / 2) {
+        start = first - Math.floor(WINDOW / 3);
+        cut = text.slice(start);
+    }
+    if (cut.length > WINDOW)
+        cut = cut.slice(0, WINDOW);
+    const body = cut.toLowerCase();
+    let out = '';
+    let at = 0;
+    for (let i = needle === '' ? -1 : body.indexOf(needle); i !== -1; i = body.indexOf(needle, at)) {
+        out += (0, render_1.esc)(cut.slice(at, i)) + `<mark>${(0, render_1.esc)(cut.slice(i, i + needle.length))}</mark>`;
+        at = i + needle.length;
+    }
+    out += (0, render_1.esc)(cut.slice(at));
+    // Escaped by hand above, around positions found in the raw text; the whole
+    // is therefore already HTML.
+    return (0, html_1.raw)(`${start > 0 ? '&hellip;' : ''}${out}${start + cut.length < text.length ? '&hellip;' : ''}`);
+}
+/** Search results: the matching lines, grouped by the file they are in. */
+function searchPage(ctx, query, view) {
+    const base = repoUrl(ctx);
+    const searchUrl = (ref) => `${base}/search?q=${encodeURIComponent(query)}&ref=${encodeURIComponent(ref)}`;
+    const form = (0, html_1.html) `<form class="search-form" method="get" action="${base}/search" role="search"><input type="hidden" name="ref" value="${ctx.ref}"><input class="search-input" type="search" name="q" value="${query}" placeholder="Search this repository" aria-label="Search this repository" autofocus>${(0, icons_1.icon)('search', 'search-glyph')}</form>`;
+    const boxes = view.files.map((f) => {
+        const fileUrl = `${base}/blob/${encPath(ctx.ref)}/${encPath(f.path)}`;
+        const lines = f.hits.map((h) => (0, html_1.html) `<a class="search-hit" href="${fileUrl}#L${h.line}"><span class="lnum">${h.line}</span><span class="ltext">${markMatches(h.text, query)}</span></a>`);
+        const more = f.more
+            ? (0, html_1.html) `<a class="search-more" href="${fileUrl}">${count(f.more)} more match${f.more === 1 ? '' : 'es'} in this file</a>`
+            : '';
+        return (0, html_1.html) `<div class="box search-file"><div class="box-header">${FILE_ICON}<a href="${fileUrl}">${f.path}</a></div><div class="search-hits">${lines}${more}</div></div>`;
+    });
+    const notes = [];
+    if (view.truncated)
+        notes.push('There were more matches than this page can show.');
+    if (view.capped)
+        notes.push('Matches in further files were left out.');
+    let body;
+    if (query.trim() === '') {
+        body = (0, html_1.html) `<div class="empty-state">Type to search the files at ${ctx.ref}. Matching is literal text, not a pattern.</div>`;
+    }
+    else if (view.files.length === 0) {
+        body = (0, html_1.html) `<div class="empty-state">No file at ${ctx.ref} contains ${query}.</div>`;
+    }
+    else {
+        body = (0, html_1.html) `<p class="muted small">${count(view.total)} matching line${view.total === 1 ? '' : 's'} in ${count(view.files.length)} file${view.files.length === 1 ? '' : 's'}${notes.length ? (0, html_1.html) ` &middot; ${notes.join(' ')}` : ''}</p>${boxes}`;
+    }
+    const content = (0, html_1.html) `${repoHeader(ctx, 'code')}
+<div class="toolbar">
+  <div class="left">${refPicker(ctx, searchUrl)}${form}</div>
+  <div class="right-group">${findButton(ctx)}</div>
+</div>
+${body}`;
+    return layout(`${query ? `Search: ${query}` : 'Search'} - ${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, `${base}/search`));
+}
+function findFilePage(ctx, paths, total) {
+    const base = repoUrl(ctx);
+    const items = paths.map((p) => {
+        const cut = p.lastIndexOf('/');
+        const dir = cut === -1 ? '' : (0, html_1.html) `<span class="muted">${p.slice(0, cut + 1)}</span>`;
+        return (0, html_1.html) `<a class="find-item" href="${base}/blob/${encPath(ctx.ref)}/${encPath(p)}">${FILE_ICON}<span>${dir}${p.slice(cut + 1)}</span></a>`;
+    });
+    const capped = total > paths.length
+        ? (0, html_1.html) `<p class="muted small">Showing the first ${count(paths.length)} of ${count(total)} files.</p>`
+        : '';
+    const content = (0, html_1.html) `${repoHeader(ctx, 'code')}
+<div class="toolbar">
+  <div class="left">${refPicker(ctx, (ref) => `${base}/find/${encPath(ref)}`)}<span class="muted small">${count(total)} file${total === 1 ? '' : 's'}</span></div>
+</div>
+<input class="find-input" type="text" placeholder="Go to file" autofocus autocomplete="off" spellcheck="false" aria-label="Go to file">
+${capped}
+<div class="find-list" id="find-list">${items}</div>
+<div class="empty-state" id="find-empty" hidden>No file matches.</div>`;
+    return layout(`Find a file - ${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, `${base}/find/${encPath(ctx.ref)}`));
+}
+function blobPage(ctx, path, view, isMarkdown = false) {
+    const base = repoUrl(ctx);
+    const blobUrl = `${base}/blob/${encPath(ctx.ref)}/${encPath(path)}`;
+    const rawUrl = `${base}/raw/${encPath(ctx.ref)}/${encPath(path)}`;
+    const editable = (view.kind === 'code' || view.kind === 'markdown') && view.editable;
+    const editBtns = editable
+        ? (0, html_1.html) `<a class="btn" href="${base}/edit/${encPath(ctx.ref)}/${encPath(path)}" title="Edit this file">${(0, icons_1.icon)('pencil')}<span>Edit</span></a><a class="btn btn-danger-outline" href="${base}/delete/${encPath(ctx.ref)}/${encPath(path)}" title="Delete this file">${(0, icons_1.icon)('trash')}<span>Delete</span></a>`
+        : '';
+    // GitHub spells the source view of a rendered file ?plain=1; we follow that.
+    const seg = (label, glyph, href, current) => (0, html_1.html) `<a${current ? (0, html_1.raw)(' class="current"') : ''} href="${href}">${(0, icons_1.icon)(glyph)}<span>${label}</span></a>`;
+    const toggle = isMarkdown
+        ? (0, html_1.html) `<span class="seg">${seg('Preview', 'book', blobUrl, view.kind === 'markdown')}${seg('Code', 'code', `${blobUrl}?plain=1`, view.kind !== 'markdown')}</span>`
+        : '';
+    let body;
+    const historyBtn = (0, html_1.html) `<a class="btn" href="${base}/commits/${encPath(ctx.ref)}/${encPath(path)}" title="Commits touching this file">${(0, icons_1.icon)('history')}<span>History</span></a>`;
+    // Blame is for anything we render as text, which includes a markdown file
+    // being shown as a document rather than as source.
+    const blameBtn = view.kind === 'code' || view.kind === 'markdown'
+        ? (0, html_1.html) `<a class="btn" href="${base}/blame/${encPath(ctx.ref)}/${encPath(path)}" title="Who last changed each line">${(0, icons_1.icon)('versions')}<span>Blame</span></a>`
+        : '';
+    const meta = (left, extra = '') => (0, html_1.html) `<div class="code-meta"><span class="muted small">${left}</span><span class="right-group">${toggle}${extra}${blameBtn}${historyBtn}<a class="btn" href="${rawUrl}" title="View the file as it was committed">${(0, icons_1.icon)('download')}<span>Raw</span></a>${editBtns}</span></div>`;
+    if (view.kind === 'code') {
+        // One element per line, each an anchor: linking to a line is how people
+        // point at code, and #L12 is the address GitHub taught them to expect.
+        // The line text is highlight.js output, already escaped by its renderer.
+        const rows = (0, render_1.highlightedLines)(view.html).map((line, i) => {
+            const n = i + 1;
+            return (0, html_1.html) `<div class="cline" id="L${n}"><a class="lnum" href="#L${n}" aria-label="Line ${n}">${n}</a><span class="ltext">${(0, html_1.raw)(line)}</span></div>`;
+        });
+        const copyRaw = (0, html_1.html) `<button class="btn" type="button" data-copy-lines title="Copy the file's contents"><span class="copy-idle">${(0, icons_1.icon)('copy')}<span>Copy</span></span><span class="copy-done">${(0, icons_1.icon)('check')}<span>Copied</span></span></button>`;
+        body = (0, html_1.html) `${meta((0, html_1.html) `${view.lineCount} line${view.lineCount === 1 ? '' : 's'} &middot; ${(0, render_1.formatSize)(view.size)}`, copyRaw)}
+<div class="code-lines">${rows}</div>`;
+    }
+    else if (view.kind === 'markdown') {
+        body = (0, html_1.html) `${meta((0, render_1.formatSize)(view.size))}
+<div class="rendered markdown-body">${(0, html_1.raw)(view.html)}</div>`;
+    }
+    else if (view.kind === 'image') {
+        body = (0, html_1.html) `${meta((0, render_1.formatSize)(view.size))}<div class="blob-image"><img src="${rawUrl}" alt="${path}"></div>`;
+    }
+    else if (view.kind === 'too-large') {
+        body = (0, html_1.html) `${meta((0, render_1.formatSize)(view.size))}<div class="blob-binary">File is too large to display. <a href="${rawUrl}">View raw</a></div>`;
+    }
+    else if (view.kind === 'lfs') {
+        // The size comes from the pointer, so no storage request is needed to
+        // render this card.
+        body = (0, html_1.html) `${meta((0, render_1.formatSize)(view.size))}<div class="blob-binary">
+<p><b>Stored with Git LFS</b></p>
+<p>This file is ${(0, render_1.formatSize)(view.size)}; the repository holds a pointer to it.</p>
+<p class="muted small mono">sha256:${view.oid}</p>
+<p><a class="btn btn-primary" href="${rawUrl}">${(0, icons_1.icon)('download')}<span>Download</span></a></p>
+</div>`;
+    }
+    else {
+        body = (0, html_1.html) `${meta((0, render_1.formatSize)(view.size))}<div class="blob-binary">Binary file. <a href="${rawUrl}">View raw</a></div>`;
+    }
+    const content = (0, html_1.html) `${repoHeader(ctx, 'code')}
+<div class="toolbar">
+  <div class="left">${refPicker(ctx, (ref) => `${base}/blob/${encPath(ref)}/${encPath(path)}`)}${breadcrumb(ctx, path)}</div>
+</div>
+${body}`;
+    return layout(`${path} at ${ctx.ref} - ${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, blobUrl));
+}
+/**
+ * The blame view: every line of a file beside the commit that last touched
+ * it, with consecutive lines from the same commit forming a block, as on
+ * GitHub. A block that has a previous revision also offers the blame as it
+ * stood before that change, which is how a reader walks a line backwards
+ * through history.
+ */
+function blamePage(ctx, path, highlighted, lines, size) {
+    const base = repoUrl(ctx);
+    const blobUrl = `${base}/blob/${encPath(ctx.ref)}/${encPath(path)}`;
+    const texts = (0, render_1.highlightedLines)(highlighted);
+    const rows = lines.map((l, i) => {
+        const n = i + 1;
+        const starts = i === 0 || lines[i - 1].sha !== l.sha;
+        const prior = starts && l.previous
+            ? (0, html_1.html) `<a class="blame-prior" href="${base}/blame/${encPath(l.previous.sha)}/${encPath(l.previous.path)}" title="Blame this file before this change" aria-label="Blame this file before this change">${(0, icons_1.icon)('versions')}</a>`
+            : '';
+        const about = starts
+            ? (0, html_1.html) `<a class="sha" href="${base}/commit/${l.sha}">${l.sha.slice(0, 7)}</a><a class="blame-subject" href="${base}/commit/${l.sha}" title="${l.summary}">${l.summary}</a><span class="blame-when small muted">${l.author} ${(0, render_1.timeTag)(l.date)}</span>${prior}`
+            : '';
+        return (0, html_1.html) `<div class="blame-row${starts ? ' blame-start' : ''}" id="L${n}"><span class="blame-commit">${about}</span><a class="lnum" href="#L${n}" aria-label="Line ${n}">${n}</a><span class="ltext">${(0, html_1.raw)(texts[i] ?? '')}</span></div>`;
+    });
+    const toggle = (0, html_1.html) `<span class="seg"><a href="${blobUrl}">Code</a><a class="current" href="${base}/blame/${encPath(ctx.ref)}/${encPath(path)}">Blame</a></span>`;
+    const content = (0, html_1.html) `${repoHeader(ctx, 'code')}
+<div class="toolbar">
+  <div class="left">${refPicker(ctx, (ref) => `${base}/blame/${encPath(ref)}/${encPath(path)}`)}${breadcrumb(ctx, path)}</div>
+</div>
+<div class="code-meta"><span class="muted small">${lines.length} line${lines.length === 1 ? '' : 's'} &middot; ${(0, render_1.formatSize)(size)}</span><span class="right-group">${toggle}<a class="btn" href="${base}/commits/${encPath(ctx.ref)}/${encPath(path)}" title="Commits touching this file">${(0, icons_1.icon)('history')}<span>History</span></a></span></div>
+<div class="blame">${rows}</div>`;
+    return layout(`Blame ${path} at ${ctx.ref} - ${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, `${base}/blame/${encPath(ctx.ref)}/${encPath(path)}`));
+}
+function commitsPage(ctx, path, commits, page, totalPages, totalCount, author) {
+    const base = repoUrl(ctx);
+    const suffix = path === '' ? '' : `/${encPath(path)}`;
+    const query = author ? `?author=${encodeURIComponent(author)}` : '';
+    // Each row carries what a reader might want next from that commit: to read
+    // it, to take its id, or to browse the tree as it stood then.
+    const row = (c) => (0, html_1.html) `<div class="commit-row"><span class="commit-main">${(0, avatar_1.avatar)(c.author, 20)}<span><a class="title" href="${base}/commit/${c.sha}">${c.subject}</a><div class="muted small">${c.author} committed ${(0, render_1.timeTag)(c.date)}</div></span></span><span class="commit-actions"><a class="sha" href="${base}/commit/${c.sha}">${c.sha.slice(0, 7)}</a>${copyButton('', c.sha, 'Copy the full commit id')}<a class="btn" href="${base}/tree/${c.sha}" title="Browse the repository at this commit" aria-label="Browse the repository at this commit">${(0, icons_1.icon)('code')}</a></span></div>`;
+    // Commits are grouped under the day they landed, as on GitHub: a history
+    // reads as a sequence of days, and the dates stop repeating on every row.
+    const groups = [];
+    for (const c of commits) {
+        const day = (0, render_1.formatDay)(c.date);
+        const last = groups[groups.length - 1];
+        if (last && last.day === day)
+            last.rows.push(row(c));
+        else
+            groups.push({ day, rows: [row(c)] });
+    }
+    const rows = groups.map((g) => (0, html_1.html) `<div class="commit-day">${(0, icons_1.icon)('git-commit')}<span>Commits on ${g.day}</span></div><div class="commit-group">${g.rows}</div>`);
+    const pager = [];
+    const pageUrl = (p) => `${base}/commits/${encPath(ctx.ref)}${suffix}?page=${p}${author ? `&author=${encodeURIComponent(author)}` : ''}`;
+    if (page > 1)
+        pager.push((0, html_1.html) `<a class="btn" href="${(0, html_1.raw)(pageUrl(page - 1))}">&larr; Newer</a>`);
+    if (page < totalPages)
+        pager.push((0, html_1.html) `<a class="btn" href="${(0, html_1.raw)(pageUrl(page + 1))}">Older &rarr;</a>`);
+    const scope = path === ''
+        ? (0, html_1.html) `<span class="muted small">${count(totalCount)} commit${totalCount === 1 ? '' : 's'}</span>`
+        : (0, html_1.html) `${breadcrumb(ctx, path)}<span class="muted small">${count(totalCount)} commit${totalCount === 1 ? '' : 's'} touching this path</span>`;
+    const empty = author
+        ? (0, html_1.html) `No commits here are by ${author}.`
+        : path === ''
+            ? (0, html_1.html) `No commits on this ref.`
+            : (0, html_1.html) `Nothing in this ref's history touches ${path}.`;
+    // A filter the reader can see is a filter they can take off again.
+    const byAuthor = author
+        ? (0, html_1.html) `<span class="filter-chip">${(0, icons_1.icon)('person')}<span>${author}</span><a href="${base}/commits/${encPath(ctx.ref)}${suffix}" title="Show every author" aria-label="Show every author">${(0, icons_1.icon)('x')}</a></span>`
+        : '';
+    const feed = (0, html_1.html) `<a class="btn" href="${base}/commits/${encPath(ctx.ref)}${suffix}.atom" title="Atom feed of this history">${(0, icons_1.icon)('rss')}<span>Feed</span></a>`;
+    const content = (0, html_1.html) `${repoHeader(ctx, 'commits')}
+<div class="toolbar"><div class="left">${refPicker(ctx, (ref) => `${base}/commits/${encPath(ref)}${suffix}${query}`)}${byAuthor}${scope}</div><div class="right-group">${feed}</div></div>
+${rows.length ? rows : (0, html_1.html) `<div class="empty-state">${empty}</div>`}
+${pager.length ? (0, html_1.html) `<div class="pagination">${pager}</div>` : ''}`;
+    return layout(`Commits${path ? ` for ${path}` : ''} at ${ctx.ref} - ${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, `${base}/commits/${encPath(ctx.ref)}${suffix}`));
+}
+function commitPage(ctx, detail, diffHtml) {
+    const base = repoUrl(ctx);
+    const lines = detail.message.split('\n');
+    const subject = lines[0] ?? '';
+    const body = lines.slice(1).join('\n').trim();
+    const parents = (0, html_1.joinHtml)(detail.parents.map((p) => (0, html_1.html) `<a class="sha" href="${base}/commit/${p}">${p.slice(0, 7)}</a>`), ' ');
+    const content = (0, html_1.html) `${repoHeader(ctx, 'commits')}
+<div class="commit-head">
+  <div class="subject">${subject}</div>
+  ${body ? (0, html_1.html) `<div class="body">${body}</div>` : ''}
+  <div class="meta">
+    <span><b>${detail.author}</b> &lt;${detail.email}&gt;</span>
+    <span>committed ${(0, render_1.timeTag)(detail.date, '')}</span>
+    <span>commit <span class="sha">${detail.sha.slice(0, 12)}</span></span>
+    ${detail.parents.length ? (0, html_1.html) `<span>parent${detail.parents.length > 1 ? 's' : ''} ${parents}</span>` : ''}
+    <span><a href="${base}/tree/${detail.sha}">Browse files</a></span>
+  </div>
+</div>
+${(0, html_1.raw)(diffHtml)}`;
+    return layout(`${subject} - ${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, `${base}/commit/${detail.sha}`));
+}
+function refListPage(ctx, kind) {
+    const base = repoUrl(ctx);
+    const refs = kind === 'branches' ? ctx.branches : ctx.tags;
+    const viewer = ctx.viewer;
+    const noun = kind === 'branches' ? 'branch' : 'tag';
+    const listId = `${kind}-list`;
+    const rows = refs.map((r) => {
+        let action = '';
+        if (ctx.canPush && viewer && (kind === 'tags' || r.name !== ctx.defaultBranch)) {
+            action = (0, html_1.html) `<form method="post" action="${base}/${kind}/delete" data-confirm="Delete ${noun} ${r.name}?">${csrfField(viewer)}<input type="hidden" name="name" value="${r.name}"><button type="submit" class="btn btn-danger-outline" title="Delete this ${noun}" aria-label="Delete ${r.name}">${(0, icons_1.icon)('trash')}</button></form>`;
+        }
+        // A tag is what people download a release from, so its row carries the
+        // archives, as the tags page on GitHub does.
+        const archives = kind === 'tags'
+            ? (0, html_1.html) `<a class="btn" href="${base}/archive/${encPath(r.name)}.zip" title="Download this tag as a zip">${(0, icons_1.icon)('file-zip')}<span>zip</span></a><a class="btn" href="${base}/archive/${encPath(r.name)}.tar.gz" title="Download this tag as a tar.gz">${(0, icons_1.icon)('file-zip')}<span>tar.gz</span></a>`
+            : '';
+        const badge = kind === 'branches' && r.name === ctx.defaultBranch ? (0, html_1.html) ` <span class="badge">Default</span>` : '';
+        // A tag with notes leads to them; one without invites whoever may push
+        // to write them, which is the only way a release is ever created.
+        const release = kind === 'tags'
+            ? ctx.releases.includes(r.name)
+                ? (0, html_1.html) `<a class="btn" href="${base}/releases/tag/${encPath(r.name)}" title="Release notes for ${r.name}">${(0, icons_1.icon)('rocket')}<span>Release</span></a>`
+                : ctx.canPush
+                    ? (0, html_1.html) `<a class="btn" href="${base}/releases/new?tag=${encodeURIComponent(r.name)}" title="Write release notes for ${r.name}">${(0, icons_1.icon)('rocket')}<span>Draft release</span></a>`
+                    : ''
+            : '';
+        // Every ref but the default one can be compared against it, which is
+        // the question a list of branches invites: what is on this one?
+        const compare = ctx.defaultBranch && r.name !== ctx.defaultBranch
+            ? (0, html_1.html) `<a class="btn" href="${base}/compare/${encPath(ctx.defaultBranch)}...${encPath(r.name)}" title="Compare with ${ctx.defaultBranch}">${(0, icons_1.icon)('git-compare')}<span>Compare</span></a>`
+            : '';
+        return (0, html_1.html) `<tr>
+<td class="ref-name">${(0, icons_1.icon)(kind === 'branches' ? 'git-branch' : 'tag', 'icon')}<a href="${base}/tree/${encPath(r.name)}"><b>${r.name}</b></a>${badge}
+<div class="muted small">Updated ${(0, render_1.timeTag)(r.date)} &middot; ${r.subject}</div></td>
+<td class="right"><a class="sha" href="${base}/commit/${r.sha}">${r.sha.slice(0, 7)}</a></td>
+<td class="right"><span class="right-group">${release}${compare}${archives}${action}</span></td>
+</tr>`;
+    });
+    const body = rows.length
+        ? (0, html_1.html) `${listFilter(listId, `Find a ${noun}`, refs.length)}<table class="listing" id="${listId}"><tbody>${rows}</tbody></table>${noMatches(listId)}`
+        : (0, html_1.html) `<div class="empty-state">No ${kind} yet.</div>`;
+    let createMenu = '';
+    if (ctx.canPush && viewer && ctx.branches.length > 0) {
+        const fromOptions = ctx.branches.map((b) => (0, html_1.html) `<option value="${b.name}"${b.name === ctx.defaultBranch ? (0, html_1.raw)(' selected') : ''}>${b.name}</option>`);
+        const form = kind === 'branches'
+            ? (0, html_1.html) `<form method="post" action="${base}/branches/create">${csrfField(viewer)}
+<div class="field"><label for="new-ref">New branch name</label><input type="text" id="new-ref" name="name" placeholder="new-branch-name" required></div>
+<div class="field"><label for="ref-from">From</label><select id="ref-from" name="from">${fromOptions}</select></div>
+<button type="submit" class="btn btn-primary">Create branch</button></form>`
+            : (0, html_1.html) `<form method="post" action="${base}/tags/create">${csrfField(viewer)}
+<div class="field"><label for="new-ref">Tag name</label><input type="text" id="new-ref" name="name" placeholder="v1.0.0" required></div>
+<div class="field"><label for="ref-at">At</label><select id="ref-at" name="at">${fromOptions}</select></div>
+<button type="submit" class="btn btn-primary">Create tag</button></form>`;
+        createMenu = (0, html_1.html) `<details class="dropdown">
+<summary class="btn btn-primary">${(0, icons_1.icon)('plus')}<span>New ${noun}</span>${(0, icons_1.icon)('chevron-down', 'caret')}</summary>
+<div class="dropdown-menu dd-right ref-form">${form}</div>
+</details>`;
+    }
+    const content = (0, html_1.html) `${repoHeader(ctx, kind)}<div class="page-head"><h2>${kind === 'branches' ? 'Branches' : 'Tags'}</h2>${createMenu}</div>${body}`;
+    return layout(`${kind} - ${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, `${base}/${kind}`));
+}
+/**
+ * The quick-setup page GitHub shows for a repository with no commits: the
+ * address to push to, and the two command sequences that are the usual next
+ * step. It is the one place in the interface that teaches git commands,
+ * because it is the one place where the answer really is a command.
+ */
+function emptyRepoPage(ctx) {
+    const base = repoUrl(ctx);
+    const url = ctx.cloneUrl;
+    const block = (lines) => (0, html_1.html) `<div class="cmd-block"><pre>${lines.join('\n')}</pre>${copyButton()}</div>`;
+    const readmeBtn = ctx.canPush
+        ? (0, html_1.html) `<a class="btn btn-primary" href="${base}/new/main">${(0, icons_1.icon)('plus')}<span>Create a README</span></a>`
+        : '';
+    const content = (0, html_1.html) `${repoHeader(ctx, 'code')}
+<div class="box">
+  <div class="box-header">${(0, icons_1.icon)('repo')}Quick setup, if you have done this before</div>
+  <div class="box-body">
+    <div class="cmd-row"><code>${url}</code>${copyButton()}</div>
+    <p class="muted">Cloning is anonymous. Pushing asks for your username and a token; <span class="mono">mochi login</span> hands the token to git once so it stops asking.</p>
+    ${readmeBtn}
+  </div>
+</div>
+<h3 class="setup-head">&hellip;or create a new repository on the command line</h3>
+${block([
+        `echo "# ${ctx.repo}" >> README.md`,
+        'git init',
+        'git add README.md',
+        'git commit -m "first commit"',
+        'git branch -M main',
+        `git remote add origin ${url}`,
+        'git push -u origin main',
+    ])}
+<h3 class="setup-head">&hellip;or push an existing repository from the command line</h3>
+${block([`git remote add origin ${url}`, 'git branch -M main', 'git push -u origin main'])}`;
+    return layout(`${ctx.collection}/${ctx.repo}`, content, repoOpts(ctx, base));
+}
+function errorPage(status, message, opts = {}) {
+    const back = opts.backUrl
+        ? (0, html_1.html) `<p><a href="${opts.backUrl}">Go back</a></p>`
+        : (0, html_1.html) `<p><a href="/">Back to home</a></p>`;
+    return layout(`${status}`, (0, html_1.html) `<div class="error-page"><div class="code">${status}</div><p>${message}</p>${back}</div>`, opts);
+}