@magland/mochi 0.3.1 → 0.4.1

package/dist/views.js

@@ -3,14 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.encPath = encPath;
 exports.repoUrl = repoUrl;
 exports.csrfField = csrfField;
+exports.userLink = userLink;
+exports.gitAuthor = gitAuthor;
 exports.layout = layout;
 exports.repoOpts = repoOpts;
 exports.copyButton = copyButton;
 exports.copyRow = copyRow;
+exports.agePassInput = agePassInput;
 exports.repoHeader = repoHeader;
+exports.topicChips = topicChips;
 exports.homePage = homePage;
 exports.aboutPage = aboutPage;
 exports.collectionPage = collectionPage;
+exports.topicsIndexPage = topicsIndexPage;
+exports.topicPage = topicPage;
 exports.treePage = treePage;
 exports.searchPage = searchPage;
 exports.findFilePage = findFilePage;
@@ -26,6 +32,8 @@ const render_1 = require("./render");
 const session_1 = require("./session");
 const assets_1 = require("./assets");
 const pagescript_1 = require("./pagescript");
+const agescript_1 = require("./agescript");
+const agefile_1 = require("./agefile");
 const themes_1 = require("./themes");
 const logo_1 = require("./logo");
 const icons_1 = require("./icons");
@@ -43,9 +51,39 @@ function repoUrl(ctx) {
 function csrfField(viewer) {
     return (0, html_1.html) `<input type="hidden" name="csrf" value="${viewer.csrf}">`;
 }
+/**
+ * A vault username as a link to their profile page at /<name>. The link keeps
+ * the weight and colour of the text around it, so a name reads the same
+ * whether or not it is one; only hover says it goes somewhere. `face` puts
+ * the identicon before the name at that size, and `bold` matches the places
+ * that already set the name in bold.
+ */
+function userLink(name, opts = {}) {
+    const label = opts.bold ? (0, html_1.html) `<b>${name}</b>` : (0, html_1.html) `${name}`;
+    return (0, html_1.html) `<a class="user-link" href="/${encodeURIComponent(name)}">${opts.face ? (0, avatar_1.avatar)(name, opts.face) : ''}${label}</a>`;
+}
+/**
+ * A git author identity, linked to a profile when the email resolves to a
+ * vault user and shown exactly as git reported it when it does not. The
+ * identicon is drawn from the account where there is one, so the same person
+ * wears the same face whatever author emails their commits carry.
+ */
+function gitAuthor(ctx, name, email, opts = {}) {
+    const account = email ? (ctx.accountFor?.(email) ?? null) : null;
+    if (account) {
+        const label = opts.bold ? (0, html_1.html) `<b>${name}</b>` : (0, html_1.html) `${name}`;
+        return (0, html_1.html) `<a class="user-link" href="/${encodeURIComponent(account)}" title="${account}">${opts.face ? (0, avatar_1.avatar)(account, opts.face) : ''}${label}</a>`;
+    }
+    const label = opts.bold ? (0, html_1.html) `<b>${name}</b>` : (0, html_1.html) `${name}`;
+    return (0, html_1.html) `${opts.face ? (0, avatar_1.avatar)(email || name, opts.face) : ''}${label}`;
+}
 const FOLDER_ICON = (0, icons_1.icon)('folder', 'icon');
 const FILE_ICON = (0, icons_1.icon)('file', 'icon file');
+// An age-encrypted file wears the lock wherever files are listed, so what is
+// encrypted can be seen without opening anything.
+const AGE_ICON = (0, icons_1.icon)('lock', 'icon file');
 const REPO_ICON = (0, icons_1.icon)('repo', 'icon');
+const fileIcon = (name) => ((0, agefile_1.isAgeFile)(name) ? AGE_ICON : FILE_ICON);
 function userBox(opts) {
     const viewer = opts.viewer ?? null;
     if (!viewer) {
@@ -63,6 +101,8 @@ function userBox(opts) {
 <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>
+  <a class="dd-item" href="/${encodeURIComponent(name)}">${(0, icons_1.icon)('person')}<span>Your profile</span></a>
+  <a class="dd-item" href="/account">${(0, icons_1.icon)('lock')}<span>Your account</span></a>
   ${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>
@@ -96,6 +136,14 @@ function themeMenu() {
 </div>
 </details>`;
 }
+/**
+ * The way to /about from every page. A visitor can land anywhere in a vault,
+ * on a file or an issue rather than the front page, so what this site is has
+ * to be reachable from wherever they arrived rather than from one listing.
+ */
+function aboutLink() {
+    return (0, html_1.html) `<a class="topbar-icon" href="/about" aria-label="About" title="About this vault">${(0, icons_1.icon)('info')}</a>`;
+}
 function jumpDialog(jump) {
     const data = jump
         ? // The payload is JSON in a script tag, where escaping entities would
@@ -140,6 +188,9 @@ function layout(title, content, opts = {}) {
     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;
+    // Deferred: nothing on it is needed before the DOM exists, and the page's
+    // own script must not wait behind 300 KB of cryptography.
+    const age = opts.ageScript ? (0, html_1.html) `<script src="/assets/age.js?v=${(0, agescript_1.ageScript)().tag}" defer></script>` : '';
     // 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.
@@ -153,10 +204,10 @@ function layout(title, content, opts = {}) {
 <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>
+<script src="/assets/page.js?v=${script}"></script>${age}
 </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>
+<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()}${aboutLink()}${themeMenu()}${userBox(opts)}</div></div></header>
 <main class="container">
 ${content}
 </main>
@@ -219,6 +270,17 @@ function copyButton(label = '', text, title = '') {
 function copyRow(cmd) {
     return (0, html_1.html) `<div class="cmd-row"><code>${cmd}</code>${copyButton()}</div>`;
 }
+/**
+ * A passphrase input wrapped with a show/hide toggle. The input never carries
+ * a name, so no form can ever post its value; /assets/age.js wires the
+ * toggle, and both eye glyphs are drawn here so the script draws nothing.
+ * With an `id` the field is labelled by its <label>; without one it carries
+ * its placeholder as the accessible name.
+ */
+function agePassInput(opts) {
+    const label = opts.placeholder ?? 'Passphrase';
+    return (0, html_1.html) `<span class="age-pass-wrap"><input type="password"${opts.id ? (0, html_1.html) ` id="${opts.id}"` : ''}${opts.placeholder ? (0, html_1.html) ` placeholder="${opts.placeholder}"` : ''}${opts.id ? '' : (0, html_1.html) ` aria-label="${label}"`} autocomplete="${opts.autocomplete}" spellcheck="false"${opts.required ? (0, html_1.raw)(' required') : ''}><button type="button" class="age-eye" aria-label="Show the passphrase" aria-pressed="false">${(0, icons_1.icon)('eye', 'glyph-eye')}${(0, icons_1.icon)('eye-off', 'glyph-eye-off')}</button></span>`;
+}
 /**
  * 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>
@@ -279,7 +341,11 @@ function repoHeader(ctx, active) {
     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>`
-        : '';
+        : ctx.upstream
+            ? (0, html_1.html) `<div class="fork-note muted small">${(0, icons_1.icon)('repo-forked')}<span>forked from ${ctx.upstream.web
+                ? (0, html_1.html) `<a href="${ctx.upstream.web}" rel="noopener">${ctx.upstream.label}</a>`
+                : ctx.upstream.label}${ctx.canPush ? (0, html_1.html) ` &middot; <a href="${base}/sync">Sync</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}
@@ -327,6 +393,17 @@ function listFilter(target, placeholder, rowCount) {
 function noMatches(target) {
     return (0, html_1.html) `<div class="empty-state" id="${target}-empty" hidden>No match.</div>`;
 }
+/**
+ * Topic chips, each leading to the vault-wide page for that topic. One look
+ * everywhere on purpose: a topic is the same topic wherever it appears, so it
+ * wears one colour from the theme rather than a colour of its own the way an
+ * issue label does.
+ */
+function topicChips(topics) {
+    if (!topics || topics.length === 0)
+        return '';
+    return (0, html_1.html) `<span class="topic-chips">${(0, html_1.joinHtml)(topics.map((t) => (0, html_1.html) `<a class="chip topic" href="/topics/${encodeURIComponent(t)}">${t}</a>`))}</span>`;
+}
 const CI_MARKS = {
     running: { glyph: 'dot', label: 'running' },
     success: { glyph: 'check-circle', label: 'passed' },
@@ -353,12 +430,19 @@ function repoCard(r, showCollection) {
         ? (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>` : '';
+    // The card clips to two lines with CSS, but the clipping is visual only:
+    // the bytes still travel, and a listing repeats them per repository, so a
+    // description larger than the model now accepts (one written before the cap
+    // existed) is cut here rather than shipped whole to every reader.
+    const shown = r.description && r.description.length > 400 ? `${r.description.slice(0, 400)}…` : r.description;
+    const desc = shown ? (0, html_1.html) `<p class="rc-desc">${shown}</p>` : '';
+    const topics = topicChips(r.topics);
     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}
+${topics ? (0, html_1.html) `<div class="rc-topics">${topics}</div>` : ''}
 <div class="rc-meta">${when}</div>
 </li>`;
 }
@@ -366,7 +450,9 @@ ${desc}
  * 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.
+ * is the one I already know the name of. Narrowing by topic is a link for the
+ * same reason, and each link carries the rest of the choice, so picking a
+ * sort never loses the topic and picking a topic never loses the sort.
  */
 function repoListing(repos, opts) {
     const sorted = [...repos];
@@ -376,29 +462,54 @@ function repoListing(repos, opts) {
     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 topic = opts.topics?.current ?? '';
+    const listUrl = (sort, t) => {
+        const params = new URLSearchParams();
+        if (sort !== 'recent')
+            params.set('sort', sort);
+        if (t !== '')
+            params.set('topic', t);
+        const q = params.toString();
+        return q === '' ? opts.sortBase : `${opts.sortBase}?${q}`;
+    };
+    const sortLink = (id, label) => (0, html_1.html) `<a${opts.sort === id ? (0, html_1.raw)(' class="current" aria-current="true"') : ''} href="${listUrl(id, topic)}">${label}</a>`;
+    const inUse = opts.topics?.inUse ?? [];
+    const topicMenu = inUse.length !== 0 || topic !== ''
+        ? (0, html_1.html) `<details class="dropdown topic-menu">
+<summary class="btn">${(0, icons_1.icon)('tag')}<span>${topic || 'Topics'}</span>${(0, icons_1.icon)('chevron-down', 'caret')}</summary>
+<div class="dropdown-menu"><div class="dd-scroll">${(0, html_1.joinHtml)([
+            (0, html_1.html) `<a class="dd-item${topic === '' ? ' current' : ''}" href="${listUrl(opts.sort, '')}"><span class="dd-check"></span><span class="dd-label">Any topic</span></a>`,
+            ...inUse.map((t) => (0, html_1.html) `<a class="dd-item${topic === t.topic ? ' current' : ''}" href="${listUrl(opts.sort, t.topic)}">${topic === t.topic ? (0, icons_1.icon)('check', 'dd-check') : (0, html_1.raw)('<span class="dd-check"></span>')}<span class="dd-label">${t.topic}</span><span class="muted small">${t.count}</span></a>`),
+        ])}</div></div>
+</details>`
+        : '';
     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">
+${topicMenu}
 <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')}`;
+    // The controls stay once a topic is chosen, whatever the count: a narrowing
+    // that hides the way back out would be a trap.
+    return (0, html_1.html) `${repos.length > 5 || topic !== '' ? 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) {
+function homePage(rootLabel, collections, repos, sort, viewer, topics = { current: '', inUse: [] }) {
     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: '/' });
+        ? topics.current !== ''
+            ? (0, html_1.html) `<div class="empty-state">No repositories carry the topic <b>${topics.current}</b>. <a href="/">Show all</a>.</div>`
+            : (0, html_1.html) `<div class="empty-state">No repositories yet.${viewer ? ' Create one with the buttons above, or push to a new path.' : ''}</div>`
+        : repoListing(repos, { showCollection: true, sort, sortBase: '/', topics });
     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>`;
+        : topics.current !== ''
+            ? (0, html_1.html) `<p class="lede">${total} ${total === 1 ? 'repository' : 'repositories'} with the topic <b>${topics.current}</b>.</p>`
+            : (0, html_1.html) `<p class="lede">${total} ${total === 1 ? 'repository' : 'repositories'} in ${collections.length} ${collections.length === 1 ? 'collection' : 'collections'}.</p>`;
     const content = (0, html_1.html) `<div class="page-head"><h1>Repositories</h1><span class="right-group">${newBtn}</span></div>
 ${summary}
 ${chips}
@@ -410,39 +521,21 @@ ${
     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.
+ * What this place is, in as few lines as answer the question. A visitor who
+ * wants more detail than this has the vault itself and the project on GitHub;
+ * a visitor who landed here cold wants one paragraph, not a manual.
  */
 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>
+<p class="lede">This site is a <i>vault</i>: a small self-hosted git forge, holding git repositories grouped into
+collections.</p>
+<p>Browsing and cloning are anonymous, apart from private repositories:</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>
+<p>Writing needs an account, which this vault's administrator creates; there is no sign-up. Your token is the password
+git asks for, and it also <a href="/login">signs you in</a> here.</p>
+<p>The software is <a href="https://github.com/magland/mochiforge">Mochi Forge</a>, open source under the Apache 2.0
+license.</p>
 </div>`;
     return layout('About - Mochi Forge', content, { viewer, path: '/about' });
 }
@@ -453,19 +546,25 @@ 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) {
+profile = null, 
+// Present when a vault user bears the collection's name: the page is then
+// their profile page too, and this is what the profile part shows.
+owner = null, topics = { current: '', inUse: [] }) {
     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>`
+        ? topics.current !== ''
+            ? (0, html_1.html) `<div class="empty-state">No repositories here carry the topic <b>${topics.current}</b>. <a href="/${encodeURIComponent(collection)}">Show all</a>.</div>`
+            : (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)}`,
+            topics,
         });
     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>`
+        ? (0, html_1.html) `<a class="btn" href="/import?collection=${encodeURIComponent(collection)}">${(0, icons_1.icon)('download')}<span>Import or fork</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
@@ -475,13 +574,53 @@ profile = null) {
         : 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}`;
+    // A user's namespace page opens with who they are; a plain collection's
+    // with what it is called. The avatar keeps the shape it has everywhere
+    // else: round for a person, square for a collection.
+    const editProfileBtn = owner?.isViewer
+        ? (0, html_1.html) `<a class="btn" href="/settings/profile">${(0, icons_1.icon)('pencil')}<span>Edit profile</span></a>`
+        : '';
+    const head = owner
+        ? (0, html_1.html) `<div class="page-head"><h1 class="with-avatar">${(0, avatar_1.avatar)(collection, 32)}${owner.displayName ?? collection}${owner.displayName ? (0, html_1.html) ` <span class="profile-username">${collection}</span>` : ''}${owner.siteAdmin ? (0, html_1.html) ` <span class="counter" title="Administers this vault">Admin</span>` : ''}</h1><span class="right-group">${editProfileBtn}${settingsBtn}${newBtn}</span></div>${owner.bio ? (0, html_1.html) `<p class="profile-bio">${owner.bio}</p>` : ''}${owner.links.length
+            ? (0, html_1.html) `<div class="profile-links">${(0, html_1.joinHtml)(owner.links.map((l) => (0, html_1.html) `<a href="${l}" rel="nofollow noopener noreferrer">${(0, icons_1.icon)('link')}<span>${l.replace(/^https?:\/\//, '')}</span></a>`))}</div>`
+            : ''}`
+        : (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>`;
+    const content = (0, html_1.html) `${head}${profileBox}${body}`;
     return layout(collection, content, {
         crumbs: (0, html_1.html) ` / <a href="/${encodeURIComponent(collection)}">${collection}</a>`,
         viewer,
         path: `/${encodeURIComponent(collection)}`,
     });
 }
+/**
+ * Every topic in use across the vault, as this viewer sees it: the same
+ * repositories the front page would list, counted rather than repeated. The
+ * page exists so a topic chip has somewhere vault-wide to lead, and so the
+ * set of topics can be surveyed without opening repositories to collect it.
+ */
+function topicsIndexPage(topics, viewer) {
+    const body = topics.length === 0
+        ? (0, html_1.html) `<div class="empty-state">No repository carries a topic yet.${viewer ? ' Add some from a repository’s About panel or settings.' : ''}</div>`
+        : (0, html_1.html) `<ul class="topic-index">${(0, html_1.joinHtml)(topics.map((t) => (0, html_1.html) `<li><a class="chip topic" href="/topics/${encodeURIComponent(t.topic)}">${t.topic}</a><span class="muted small">${t.count} ${t.count === 1 ? 'repository' : 'repositories'}</span></li>`), '\n')}</ul>`;
+    const content = (0, html_1.html) `<div class="page-head"><h1>Topics</h1></div>
+<p class="lede">What the repositories in this vault say they are about, across every collection.</p>
+${body}`;
+    return layout('Topics', content, { viewer, path: '/topics' });
+}
+/** One topic's page: every visible repository carrying it, vault-wide. */
+function topicPage(topic, repos, sort, viewer) {
+    const body = repos.length === 0
+        ? (0, html_1.html) `<div class="empty-state">No repository carries this topic. <a href="/topics">All topics</a>.</div>`
+        : repoListing(repos, { showCollection: true, sort, sortBase: `/topics/${encodeURIComponent(topic)}` });
+    const content = (0, html_1.html) `<div class="page-head"><h1 class="topic-title">${(0, icons_1.icon)('tag')}${topic}</h1></div>
+<p class="lede">${repos.length} ${repos.length === 1 ? 'repository' : 'repositories'} with this topic &middot; <a href="/topics">all topics</a></p>
+${body}`;
+    return layout(`${topic} - Topics`, content, {
+        crumbs: (0, html_1.html) ` / <a href="/topics">topics</a> / <a href="/topics/${encodeURIComponent(topic)}">${topic}</a>`,
+        viewer,
+        path: `/topics/${encodeURIComponent(topic)}`,
+    });
+}
 /** "1,284" - counts in the interface are grouped, as they are on GitHub. */
 function count(n) {
     return n.toLocaleString('en-US');
@@ -516,9 +655,9 @@ function languagesBlock(languages) {
 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.
+ * panel. A face with an account behind it leads to that user's profile page;
+ * one without leads to that identity's commits here, which is all the vault
+ * knows about them.
  */
 function contributorsBlock(ctx, people) {
     if (people.length === 0)
@@ -529,7 +668,9 @@ function contributorsBlock(ctx, people) {
     // 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>`);
+        .map((p) => (0, html_1.html) `<a class="contributor" href="${p.account
+        ? `/${encodeURIComponent(p.account)}`
+        : `${base}/commits/${encPath(ctx.ref)}?author=${encodeURIComponent(p.email || p.name)}`}" title="${p.account ?? 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>`
         : '';
@@ -557,6 +698,24 @@ function aboutPanel(ctx, view) {
     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>`;
+    // Topics, and for a writer the place to change them without leaving the
+    // page: a details element holding the one-line form, so the editor costs no
+    // script and appears only when opened. The form posts the whole set, which
+    // is what the API takes too.
+    const topicEditor = ctx.canPush && ctx.viewer
+        ? (0, html_1.html) `<details class="dropdown topic-edit"><summary class="chip topic-add" title="Edit topics" aria-label="Edit topics">${view.topics.length ? (0, icons_1.icon)('pencil') : (0, html_1.html) `${(0, icons_1.icon)('plus')}<span>Add topics</span>`}</summary>
+<div class="dropdown-menu dd-right topic-edit-menu"><form method="post" action="${repoUrl(ctx)}/settings/topics">
+${csrfField(ctx.viewer)}
+<input type="hidden" name="next" value="repo">
+<label class="muted small" for="side-topics">Topics, separated by spaces</label>
+<input type="text" id="side-topics" name="topics" value="${view.topics.join(' ')}" placeholder="webgpu numbl mri">
+<p class="muted small">Lowercase letters, digits, and hyphens.</p>
+<button type="submit" class="btn btn-primary">${(0, icons_1.icon)('check')}<span>Save</span></button>
+</form></div></details>`
+        : '';
+    const topicsRow = view.topics.length || topicEditor
+        ? (0, html_1.html) `<div class="side-topics">${topicChips(view.topics)}${topicEditor}</div>`
+        : '';
     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>`,
@@ -569,6 +728,7 @@ function aboutPanel(ctx, view) {
 <div class="side-block">
   <h3>About${settings}</h3>
   ${description}
+  ${topicsRow}
   ${links.length ? (0, html_1.html) `<div class="side-links">${links}</div><hr class="rule">` : ''}
   <div class="side-links">${facts}</div>
 </div>
@@ -594,7 +754,7 @@ function treePage(ctx, view) {
             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>`;
+            name = (0, html_1.html) `${fileIcon(e.name)}<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>`;
@@ -611,7 +771,7 @@ function treePage(ctx, view) {
     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-main">${gitAuthor(ctx, latest.author, latest.email, { bold: true })} <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>`
         : '';
@@ -640,6 +800,7 @@ function treePage(ctx, view) {
         ? (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')}
+${view.msg ? (0, html_1.html) `<div class="flash">${view.msg}</div>` : ''}
 <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>
@@ -728,7 +889,7 @@ function findFilePage(ctx, paths, total) {
     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>`;
+        return (0, html_1.html) `<a class="find-item" href="${base}/blob/${encPath(ctx.ref)}/${encPath(p)}">${fileIcon(p)}<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>`
@@ -747,7 +908,7 @@ 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 editable = (view.kind === 'code' || view.kind === 'markdown' || view.kind === 'age') && 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>`
         : '';
@@ -794,6 +955,29 @@ function blobPage(ctx, path, view, isMarkdown = false) {
 <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 if (view.kind === 'age') {
+        // The card is inert markup; /assets/age.js (loaded by this page alone)
+        // wires the form, fetches the ciphertext from the raw URL, and decrypts
+        // in the page. The passphrase inputs never carry a name, so no form
+        // mishap can post one. On unlock the card gives way to a slim bar over
+        // the output: what happened, a copy of the exact plaintext, and the lock
+        // that puts the card back.
+        body = (0, html_1.html) `${meta((0, render_1.formatSize)(view.size))}
+<div class="age-box" data-age-view data-age-raw="${rawUrl}" data-age-inner="${view.markdownInner ? 'markdown' : 'text'}">
+<div class="blob-binary age-card">
+<p class="age-head">${(0, icons_1.icon)('lock')}<b>Encrypted with age</b></p>
+<p class="muted small">The vault stores this file as ciphertext it cannot read. The passphrase decrypts it here, in this page, and is sent nowhere.</p>
+<form class="age-unlock">${agePassInput({ placeholder: 'Passphrase', autocomplete: 'off', required: true })}<button type="submit" class="btn btn-primary" data-busy-label="Decrypting&hellip;">Decrypt</button></form>
+<p class="age-error form-error" hidden></p>
+<noscript><p class="muted small">Decrypting in the browser needs JavaScript. Without it, take the raw file and the age CLI.</p></noscript>
+</div>
+<div class="age-bar" data-age-bar hidden>
+<span class="age-bar-note">${(0, icons_1.icon)('lock')}<span>Decrypted in your browser; the vault still holds only the ciphertext.</span></span>
+<span class="age-bar-actions"><button type="button" class="btn" data-age-copy title="Copy the decrypted text"><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><button type="button" class="btn" data-age-lock title="Clear the plaintext from the page">${(0, icons_1.icon)('lock')}<span>Lock</span></button></span>
+</div>
+<div class="age-output" hidden></div>
 </div>`;
     }
     else {
@@ -804,7 +988,8 @@ function blobPage(ctx, path, view, isMarkdown = false) {
   <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));
+    const opts = view.kind === 'age' ? { ...repoOpts(ctx, blobUrl), ageScript: true } : repoOpts(ctx, blobUrl);
+    return layout(`${path} at ${ctx.ref} - ${ctx.collection}/${ctx.repo}`, content, opts);
 }
 /**
  * The blame view: every line of a file beside the commit that last touched
@@ -824,7 +1009,7 @@ function blamePage(ctx, path, highlighted, lines, size) {
             ? (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}`
+            ? (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">${gitAuthor(ctx, l.author, l.email)} ${(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>`;
     });
@@ -843,7 +1028,7 @@ function commitsPage(ctx, path, commits, page, totalPages, totalCount, author) {
     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>`;
+    const row = (c) => (0, html_1.html) `<div class="commit-row"><span class="commit-main">${(0, avatar_1.avatar)((c.email && ctx.accountFor?.(c.email)) || c.email || c.author, 20)}<span><a class="title" href="${base}/commit/${c.sha}">${c.subject}</a><div class="muted small">${gitAuthor(ctx, c.author, c.email)} 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 = [];
@@ -892,7 +1077,7 @@ function commitPage(ctx, detail, diffHtml) {
   <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>${gitAuthor(ctx, detail.author, detail.email, { bold: true })} &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>` : ''}

package/dist/web.js

@@ -58,7 +58,9 @@ const releases_1 = require("./releases");
 const perms_1 = require("./perms");
 const scan_1 = require("./scan");
 const session_1 = require("./session");
+const sitesettings_1 = require("./sitesettings");
 const site_1 = require("./site");
+const vault_1 = require("./vault");
 const views = __importStar(require("./views"));
 // Helpers shared by the HTML route modules.
 function ah(fn) {
@@ -153,6 +155,11 @@ async function makeCtx(root, req, loaded, ref, viewer) {
     // Where the Site tab points. A site with an origin of its own is linked there
     // directly rather than through the forge path that would only redirect.
     const siteOrigin = (0, site_1.siteHostUrl)(root, req, loaded.repo.collection, loaded.repo.name);
+    // Ties names on the page back to vault users: commit author emails resolve
+    // to accounts, and @mentions resolve to profile links. The vault is read
+    // once per page; a vault that failed to load just resolves nobody.
+    const state = (0, vault_1.loadVault)(root);
+    const vault = state.status === 'ok' ? state.vault : null;
     return {
         collection: loaded.repo.collection,
         repo: loaded.repo.name,
@@ -162,7 +169,7 @@ async function makeCtx(root, req, loaded, ref, viewer) {
         branches: loaded.branches,
         tags: loaded.tags,
         cloneUrl,
-        hasSite: (0, scan_1.siteDir)(root, loaded.repo.collection, loaded.repo.name) !== null,
+        hasSite: (0, sitesettings_1.siteSettings)(loaded.repo.dir).enabled && (0, scan_1.siteDir)(root, loaded.repo.collection, loaded.repo.name) !== null,
         siteUrl: siteOrigin
             ? `${siteOrigin}/`
             : `/${encodeURIComponent(loaded.repo.collection)}/${encodeURIComponent(loaded.repo.name)}/site/`,
@@ -171,10 +178,13 @@ async function makeCtx(root, req, loaded, ref, viewer) {
         openIssues: (0, issues_1.issueCounts)(root, loaded.repo.collection, loaded.repo.name).open,
         openPulls: (0, pulls_1.pullCounts)(root, loaded.repo.collection, loaded.repo.name).open,
         forkedFrom: (0, scan_1.forkParent)(loaded.repo.dir),
+        upstream: (0, scan_1.upstreamOf)(loaded.repo.dir),
         viewer,
         isPrivate: (0, perms_1.repoIsPrivate)(loaded.repo.dir),
         canPush: (0, perms_1.atLeast)(loaded.role, 'write'),
         canAdmin: (0, perms_1.atLeast)(loaded.role, 'admin'),
+        accountFor: (email) => (vault ? (0, vault_1.accountForEmail)(vault, email) : null),
+        hasUser: (name) => (vault ? Object.prototype.hasOwnProperty.call(vault.users, name) : false),
     };
 }
 function baseUrlOf(req) {