Add fake traffic generator script

Uses Playwright to drive Chromium through real internal link clicks,
so pagerite.js analytics pings create normal visits. Also fires HTTP
GETs with crawler user-agents to record crawler hits.

Features:
- script-local deps via uv add --script (playwright, httpx)
- rotating pool of real public IPs via X-Forwarded-For
- Poisson inter-arrival delays between sessions/hits
- configurable browsers, crawlers, clicks, and dwell time

.gitignore

@@ -2,6 +2,8 @@
 !.gitignore
 *.lock
 *.kantadb
+pagerite.analytics.json
+dbip-*.mmdb*
 /pagerite/frontend-build
 package-lock.json
 

AGENTS.md

@@ -5,288 +5,38 @@
 
 Please instead ask the user to see from dev tools what you need, e.g. to look up something in DOM or log. Use console.log for debugging where needed (and otherwise for permanently kept useful messages in the app).
 
-## What this is
-
-Pagerite: a single-user CMS/blog. FastAPI serves HTML rendered in Python
-with html5tagger; content is persisted in a kanta database and rendered on
-the fly per request. Vue is used only for interactive bits (editing tools),
-not for the public pages. See `docs/design-principles.md` for the design.
-
 ## Layout
 
-- `pagerite/` — the Python backend package (hatchling build target).
+Pagerite is a CMS. See `docs` for the full design and implementation details. Key files for code changes:
-  - Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed)
+
-  - Dev mode `scripts/devserver.py` (which the user mostly uses for auto reloads, no build needed)
+- `pagerite/` — Python backend package (hatchling build target).
-  - Avoid running the server yourself, ask the user to test
+  - `app.py` — FastAPI app and route registration.
-  - `app.py` — the FastAPI app. FastAPI's built-in API docs are disabled
+  - `data.py` — msgspec Structs for the kanta database.
-    (`docs_url`/`redoc_url`/`openapi_url=None`) because `/docs` belongs to
+  - `markdown.py` — markdown-it-py renderer.
-    our content. Our own routes (content pages, `/_api/...`, `/_f/...`) are
+  - `views.py` — shared page layout and rendering.
-    registered BEFORE `frontend.route(app, "/")` is called: fastapi-vue
+  - `seed.py` — demo content, written only on first database creation.
-    inserts its file routes at the position where
+  - `analytics.py` — visit analytics collection (see `docs/analytics.md`).
-    `route()` was called (during `load()` in the lifespan), so anything
+- `frontend/src/` — Vue editor and public-page JS entries.
-    defined earlier wins. The one exception is the content catch-all
+  - `main.js` — Vue editor app entry.
-    `/{path:path}`, registered AFTER `frontend.route()` so that built
+  - `analytics-main.js` — analytics page entry (mounts `AnalyticsView` at `/_a`).
-    frontend assets still take priority over content slugs. The `Frontend`
+  - `pagerite.js` — public page entry.
-    is constructed with `spa=False` explicitly: it only serves the built
+  - `assets/` — base CSS, Pygments styles, fonts.
-    files without a catch-all. The build mirrors the URL space — hashed
+- `scripts/devserver.py` — dev server with auto reload (the user mostly uses this; avoid running the server yourself, ask the user to test).
-    immutable assets under `/_assets/`, `favicon.ico` at the site root —
+
-    and an `index.html` in the build would become a `/` route, so leave it
+Server run by CLI entry point `uv run pagerite` (no auto reloads, build needed). Dev mode is `scripts/devserver.py` (auto reloads, no build needed).
-    out of the build to keep `/` ours.
-  - `data.py` — msgspec Structs for the kanta database. The site structure
-    is a tree: `Data.menu` maps top-level slugs to `Node`s, each with
-    `children` keyed by slug — the URL path is the slug chain. The front
-    page is whichever top-level node has slug "" (parallel to the other
-    main level pages, not their parent); it cannot have children, and
-    renaming its slug away leaves no front page ("/" redirects to the
-    first nav item). `Node.content` is
-    the Markdown page, or None for a pure category label whose URL renders
-    a placeholder page (while nav links to it point at its first child);
-    every label's title and slug are editable. Siblings order by the fractional `Node.order` key: a moved
-    item gets a fresh key relative to its new siblings, all others keep
-    theirs. `resolve`/`find_slot` walk the tree by path; moves are slot
-    detach/attach carrying the whole subtree. Legacy flat `Data.pages`
-    (pre-tree databases) migrates into `menu` on startup. The app owns
-    the `Data` object; reads are plain attribute access, writes in
-    `kanta.transaction(...)`.
-    `Data.files` is a content-addressed store (blake3[:12] + extension)
-    mapping file names to bytes, served at `/_f/{name}` with immutable
-    caching; pages reference files by absolute `/_f/` URLs so hierarchy
-    moves never break them. `Node.banner` is a raw trusted HTML snippet
-    for the header banner (img, styled div, canvas+script...); empty
-    inherits from the node's ancestors (front page last). It is rendered
-    AFTER the banner design's artwork, so author code (e.g. a `<style>`
-    override) always wins over the design's own styles.
-    `Node.banner_design` picks a banner design: a theme folder name whose
-    `banner.css` styles it and whose `banner.html` (arbitrary markup:
-    canvas + style + script) or `banner.svg` supplies the inline artwork
-    (wrapped in `div[data-design]`); "" = explicitly no design, None =
-    inherit (nearest ancestor, front page last, then the active theme's
-    own design if it ships banner.css/banner.svg/banner.html). The design's banner.css
-    is linked in `<head>` (id `pagerite-banner`) between the theme and the
-    custom CSS.
-    `Data.version` is bumped on every write
-    and embedded in page ETags so nav-affecting changes invalidate caches.
-    `Data.brand` is the site name (header link + `<title>` suffix), editable
-    in the site editor via `/_api/settings`; empty = no header link and
-    no `<title>` suffix. `Data.brand_html` is raw trusted HTML replacing the
-    brand link entirely (rendered in a `#brand` div on top of the banner,
-    next to the nav) — site-wide, not per-page like banners; edited in the
-    site editor with image/video upload into `Data.files`. `Data.theme` is
-    the active theme name (empty =
-    none/base only); themes are folders in `pagerite/themes/{name}`
-    containing `theme.css` and/or `banner.css` (+ `banner.svg` artwork and
-    any extra assets the CSS references, like summer's `grass.svg`),
-    served by the backend at `/_themes/{name}/...` — read from disk per
-    request (etag by mtime), never built, so on-disk edits show on the
-    next page load even in prod. The theme selector and banner-design
-    selector enumerate these folders via `GET /_api/settings`.
-    `Data.custom_css` is raw trusted CSS injected inline in every page
-    `<head>` (id `pagerite-user`) and swapped during fetch-navigation;
-    editable in the site editor. Font picks (heading/body/brand) in the
-    site editor are stored as plain `:root` rows in `custom_css`
-    (`--font-body: var(--font-source-sans);` format — parsed out and
-    rewritten on change, the `:root` block added/removed as needed),
-    referencing the per-family variables (`--font-source-sans` etc.) from
-    pagerite.css;
-    the base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
-    `Data.favicon` names a file in the content-addressed `files` store,
-    uploaded/cleared in the site editor via `PUT`/`DELETE
-    /_api/settings/favicon`; when set it is linked as `<link rel="icon">`
-    on every page, otherwise browsers fall back to the build's
-    `/favicon.ico` by convention.
-  - `markdown.py` — markdown-it-py renderer (html passthrough + attrs,
-    footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript
-    plugins; typographer + breaks on). Custom
-    image rule: relative srcs resolve against the page path; an image
-    standing alone in its paragraph becomes a figure (captioned when
-    titled), while inline-with-text images and raw <img> HTML stay plain.
-    A `{dates}` line expands to the article's
-    published/updated dateline (`p.dateline`, from `Node.created`/
-    `modified`; left literal in previews of unsaved pages).
-  - `views.py` — the shared page layout as an html5tagger `Template` with
-    placeholders (`Title`, `Brand`, `Banner`, `Nav`, `Sidebar`, `Main`), nav
-    rendering straight from the `Data.menu` tree (siblings sorted by
-    `Node.order`; nav links to content-less labels point at their first
-    child via `first_leaf`, the first published descendant with content),
-    and page/404 rendering. If the markdown contains its own h1, the page title
-    is NOT rendered as an additional h1 (it still supplies <title> and nav
-    labels). The navbar holds
-    top-level items only; the current section's subitems go to a left
-    `#sidebar` as a nested list (the section's direct children plain,
-    deeper levels indented with article-list-style markers), which is
-    rendered when the section offers at least two
-    published items, or exactly one while viewing anything other than that
-    only page — the section index, a 404, a grandchild (so those pages can
-    reach the child), and also on that only page itself when it has
-    published children of its own; no aside element at all on the front
-    page, leaf
-    pages and the sole childless page of a one-page section. Also,
-    category labels are nodes without content — None *or* empty markdown —
-    and their nav links point at their first child page. Dynamic regions have stable ids
-    (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps
-    (`#sidebar` may be absent on either side of a swap).
-  - `seed.py` — demo content written on startup for paths missing from the
-    database (never overwrites existing pages).
-  - `frontend/src/` — the Vue editor and public-page entries.
-    - `main.js` — Vue editor app entry, mounts the tabbed EditorShell.
-    - `pagerite.js` — public page entry; runs fetch-navigation, scroll-reveal,
-      OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars
-      that never reserve layout space or shift the page when appearing;
-      native scroll APIs like `window.scrollTo` keep working; themed via the
-      `--os-*` variables in pagerite.css),
-      brand shrink-to-fit (the themed size is the maximum; JS reduces the
-      font-size so a long brand or narrow viewport still fits one line),
-      code copy buttons, and the auth check. It first probes `GET /auth/api/settings`
-      to detect whether Paskia SSO is available, then `GET /_api/settings` to
-      learn the current session's admin status. The same reverse proxy that
-      gates `/_api` returns 401 for anonymous users, 403 for users without
-      the admin permission, and 200 for admins. When Paskia is detected, a
-      🔑 login button (anonymous) or 🔐 profile button (logged in) is shown in
-      the banner corner; both open Paskia's iframe dialog via `showAuthIframe`
-      instead of navigating away. Admins also get the 🖊️ page/banner edit pens
-      and a ⚙️ site-settings pen (asset URLs from the
-      `pagerite:editor-src`/`-css` meta tags). If no Paskia SSO is
-      detected (dev/no proxy), editing is left open. Pages themselves render
-      identically for everyone; the real gate is the auth proxy in front of
-      all of `/_api`. The backend links the stylesheets in a fixed order —
-      base (Vite build), theme, banner design, custom CSS last — each with
-      a stable id so the site editor can swap them in place.
-    - `assets/` — shared styles and data files built by Vite and served hashed
-      under `/_assets/`: `pagerite.css` (base layout + conservative
-      variables), `pygments.css`,
-      and `fonts/` (self-hosted Source
-      Sans 3/Source Serif 4/Fraunces/Literata/Cormorant/Playfair
-      Display/Inter/Montserrat/Fira Code/Cause/Exo 2/New Rocker
-      variable woff2). The `::view-transition*` block at the end of `pagerite.css` (from
-      termotohtori.fi) is fragile — do not tweak. Themes are NOT built:
-      `pagerite/themes/{name}/theme.css` (theme overrides and font picks:
-      `purple` = dark dusk palette with Fraunces/Literata and a tilted
-      oversized gradient brand; `corporate` = light-first with automatic
-      `prefers-color-scheme` dark mode, Montserrat/Inter and a huge solid
-      brand; `nitro` = racing/HUD style following `prefers-color-scheme`
-      (warm light-grey page, deep violet in dark), Montserrat/Literata,
-      black as an accent only, a straight orange blade under the banner, and
-      an orange racing-tab nav clipped with a bezier `shape()`; `summer` =
-      light playful meadow, one palette sampled from its illustrated
-      `banner.svg` (sky/grass/sun/flower pink), Fraunces/Literata, a tilted
-      gradient brand, flower bullets, and a layered-parallax banner (sun
-      rises, clouds drift, nearer hills move less) with idle animations
-      (swaying flowers, floating clouds, breathing sun glow) wrapped in
-      `prefers-reduced-motion: no-preference`) and the
-      companion `banner.css` banner designs are served by the backend.
-    - Vite builds ES-module `.js` outputs; the backend renders `<script
-      type="module">` for them (module scripts defer by default).
-  - The database file is `pagerite.kantadb` in the cwd (`PAGERITE_DB`
-    overrides); gitignored. Do not delete it without asking.
-- `scripts/fastapi-vue/` — helper scripts from the fastapi-vue template
-  (build hook etc.), do not edit.
-- `frontend/` — the Vue editor as a single tabbed `EditorShell.vue` mounted
-  in a host div created inside the static document. The shell hosts four
-  kept-alive tabs (ordered site-wide first — site, structure — then, after a
-  visual break, the per-page tabs — article, banner): `PageEditor.vue`
-  (CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`,
-  previewing into the visible article; editor scroll drives the article
-  scroll — while any editor is open the window scroll is locked
-  (`body.editing`), the panel exactly fills the available window height, and
-  only `#main` scrolls; a format bar offers Markdown helpers — bold/italic/code/link/
-  table/image upload, with Ctrl/Cmd-B/I/S bindings — for the
-  hard-to-remember syntax) — edits content and
-  title only, never the path — `BannerEditor.vue`
-  (per-page banner HTML + banner design selector, previewed into
-  `#page-banner`), `SiteEditor.vue` (site brand + optional custom brand
-  HTML with image/video upload + theme selector + font picker + favicon
-  upload — clicking the preview tile picks a new one — +
-  site-wide custom CSS, CSS injected into
-  `<head id="pagerite-user">`), and `StructureEditor.vue` (the
-  vue-draggable structure tree with
-  always-editable title/slug inputs per row). Media uploads everywhere use
-  🖼️ icon buttons (pasting into the editor works too). The article, banner and
-  site-settings pens are shorthands that open the shell on the matching tab;
-  once open, clicking a pen switches tabs (and retargets the editors to the
-  current page) instead of closing/remounting. The ✕ in the tab bar closes
-  the shell (Escape too); tabs have no close buttons of their own. Closing
-  only HIDES the shell — the Vue app stays mounted, so page-editor state
-  (unsaved text included) survives until a real page reload; saving there is
-  explicit (💾/Ctrl+S) and refreshes the page regions in place. Admin panels
-  never reload the page. In-place
-  page re-rendering shared by the banner/site/structure tabs lives in
-  `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic
-  regions, replaceState). Placeholder texts are reserved for showing the
-  actual default in effect when a field is left empty (e.g. the pending
-  row's slug derived from its title); labels and help are real elements or
-  tooltips, never placeholders.
-  Everything saves immediately as you edit (brand/title/CSS debounced,
-  slug on commit since it renames the path), theme change swaps the
-  stylesheet in place, tree rows navigate in place without transitions when
-  focused, and the front page is a root-only row whose empty slug is
-  editable like any other. Every
-  non-empty list (and the root) ends with a non-draggable ➕ footer row
-  (vuedraggable `#footer` slot): clicking it starts a new pending page at
-  that level (its slug placeholder shows the slug derived live from the
-  title being typed), and while dragging it is the list's "end of list" drop
-  target. Committing a pending page PUTs it with empty markdown (creates
-  an empty page that renders with its title — saving never deletes;
-  deletion is the page editor's explicit choice: saving trimmed-empty
-  text issues a REST DELETE), then switches to the page editor tab for
-  the actual writing. Dropping ON the lower part of a row moves the page
-  under that row (the child list's container invisibly overlaps its own
-  row's bottom via negative margin — Sortable inserts it as the first child
-  natively), while a row's exposed top edge inserts a sibling before it. Row
-  indentation is structural (each nested list margin-indents itself), so a
-  dragged row previews its whole subtree at the target list's depth. The
-  shell is dynamic-imported onto the content page by pagerite.js when an edit
-  pen is clicked (the pens are injected by pagerite.js after the session
-  validates; they carry `data-editor-src`/`data-editor-css`/`data-editor-mode`).
-  In dev, modules load from the Vite dev server (`PAGERITE_VITE_URL`),
-  in prod from the hashed build assets resolved via
-  `frontend-build/.vite/manifest.json`. `vite.config.js` sets
-  `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`,
-  `assetsDir: '_/assets'` (so the build mirrors the URL space;
-  `frontend/public/favicon.ico` lands at the build root and is served at
-  `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus
-  `src/assets/pagerite.css` as a separate stylesheet entry; theme and
-  banner-design CSS are NOT built — they live in `pagerite/themes/{name}/`
-  and are served by the backend. There
-  is no `index.html` source (it would shadow `/` and turn missing dev paths
-  into an empty Vue shell). All outputs are ES modules. The build sets
-  `preserveEntrySignatures: 'exports-only'` because main.js is consumed
-  via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite
-  app builds otherwise strip unused entry exports, leaving dead edit pens.
-  In dev the backend links theme/banner-design stylesheets like in prod
-  (`/_themes/...`); only the base CSS is Vite-injected from JS, and
-  pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/
-  `#pagerite-user` elements to restore the canonical order (base < theme <
-  design < custom CSS). Theme switches in the site editor simply swap the
-  `#pagerite-theme` link href, identically in dev and prod.
-  vite-plugin-fastapi.js has an
-  auto-upgrade marker — edit `vite.config.js`, not the plugin.
-- `docs/` — design documentation.
 
 ## Toolchain
 
-- Python >= 3.14, managed with **uv**. Dependencies: `fastapi[standard]`,
+- Python >= 3.14, managed with **uv**. Dependencies: `fastapi[standard]`, `fastapi-vue`, `html5tagger`, `kanta`, `markdown-it-py`, `mdit-py-plugins`, `pygments`, `tracerite`; dev group has `httpx`. Run anything via `uv run ...` (the venv is `.venv`).
-  `fastapi-vue`, `html5tagger`, `kanta`, `markdown-it-py`, `mdit-py-plugins`,
-  `pygments`, `tracerite`; dev group has `httpx`. Run anything via
-  `uv run ...` (the venv is `.venv`).
 - Key libraries:
-  - **html5tagger** — all HTML generation (`E`, `Document`, `Template`,
+  - **html5tagger** — all HTML generation (`E`, `Document`, `Template`, `HTML` for trusted/raw HTML).
-    `HTML` for trusted/raw HTML).
     - To create stand alone pages, begin with `doc = Document(...)` that gives a HTML5 page header
     - Chain with `doc.p("text").br`: every attribute access creates element to doc (returning self), calls add content to current element.
     - Closing tags are not used where optional, e.g. no `</p>` or `</li>` is ever included in output. Due to this proper "nesting" of content is NOT required and should be avoided. Where needed, () directly after tag define attributes and content INSIDE the element, then close the element. `with doc.ul:` and such may be used for larger chunks.
-    - Prefer building directly on one builder with `with` blocks (recursing
+    - Prefer building directly on one builder with `with` blocks (recursing inside a with block for hierarchies) over preparing `E.` snippets into variables and composing them. Note `with doc.li:` alone fails (`li` has an optional end tag) — use `with doc.li.ul:` style chains, or `doc.li.a(...)` followed by a nested `with doc.ul:` block.
-      inside a with block for hierarchies) over preparing `E.` snippets into
+    - `Template(builder)` freezes a builder with **Capitalized** attribute placeholders (e.g. `E.Title`, `doc.main(E.Main, id="main")`); calling it fills the slots with escaping — pass `HTML(...)` for raw HTML. Passing a list to a template slot expands it; passing a list to a normal builder call does NOT (spread it: `E.ul(*items)`).
-      variables and composing them. Note `with doc.li:` alone fails (`li`
-      has an optional end tag) — use `with doc.li.ul:` style chains, or
-      `doc.li.a(...)` followed by a nested `with doc.ul:` block.
-    - `Template(builder)` freezes a builder with **Capitalized** attribute
-      placeholders (e.g. `E.Title`, `doc.main(E.Main, id="main")`); calling
-      it fills the slots with escaping — pass `HTML(...)` for raw HTML.
-      Passing a list to a template slot expands it; passing a list to a
-      normal builder call does NOT (spread it: `E.ul(*items)`).
     - To create plain HTML snippets use `E.div(E.p("content"))` etc using the `E` empty builder.
-  - **kanta** — asyncio-native embedded database: `Kanta(filename, data)`
+  - **kanta** — asyncio-native embedded database: `Kanta(filename, data)` root object, `transaction`, `flush`, snapshot/replay-log persistence.
-    root object, `transaction`, `flush`, snapshot/replay-log persistence.
     - `async with Kanta(Data(),...) as kanta:` (or await kanta.open/close)
     - `with kanta.transaction(...) as data:` - transactions only for writes
     - `data` may be referenced directly to read anywhere and to modify in transactions (`as data` is just a shorthand access)
@@ -294,32 +44,12 @@ not for the public pages. See `docs/design-principles.md` for the design.
       - We prefer objects rather than lists, as this works better in change diffs. E.g. `dict[str, True]` where the keys indicate presence and always have value `True`.
     - Maintaining and owning the app's own `Data` object is preferable; Kanta never copies this, only edits in place
     - Note: besides opening it every access is immediate direct variable access: no `await`, no locks, no delays
-  - **fastapi-vue** — template glue for serving/building the Vue frontend;
+  - **fastapi-vue** — template glue for serving/building the Vue frontend; keep its integration points (`Frontend`, build hook) intact.
-    keep its integration points (`Frontend`, build hook) intact.
+  - **markdown-it-py** — Markdown rendering with `html=True` raw passthrough; mdit-py-plugins for footnote/deflist/tasklists/attrs; **Pygments** for server-side code highlighting (`nowrap` spans, styled by `frontend/src/assets/pygments.css` which maps token classes 1:1 onto the `--code-*` variables; light/dark palette sets live in `pagerite.css` and resolve via `light-dark()` from the theme's `color-scheme` — themes pick a set, not individual colors).
-  - **markdown-it-py** — Markdown rendering with `html=True` raw
-    passthrough; mdit-py-plugins for footnote/deflist/tasklists/attrs;
-    **Pygments** for server-side code highlighting (`nowrap` spans, styled
-    by `frontend/src/assets/pygments.css` which maps token classes 1:1 onto
-    the `--code-*` variables; light/dark palette sets live in
-    `pagerite.css` and resolve via `light-dark()` from the theme's
-    `color-scheme` — themes pick a set, not individual colors).
 
 ## Conventions
 
 - Keep dependencies minimal; add via `uv add` and mention it.
-- The public URL space belongs to content (pretty slugs at root). Reserve
+- The public URL space belongs to content (pretty slugs at root). Reserve only `/_` for the machinery (`/_api/`, `/_f/`, `/_assets/`), plus `/favicon.ico` from the build. Slugs are lowercase ASCII letters, digits, hyphens and underscores `[a-z0-9_-]` (the site editor filters input live via `slugify.js`, built on the `transliteration` npm package — unicode folds to ASCII, spaces become hyphens; an empty slug on a new page is derived from its title), may not begin with `_` or `.`, and such URLs are never looked up as content.
-  only `/_` for the machinery (`/_api/`, `/_f/`, `/_assets/`), plus
+- No auth in core code; the SSO/reverse proxy gates all of `/_api` (forward-auth) and owns `/auth/` (login/logout, session validation). Pages render identically for everyone; pagerite.js adds the editing UI only after the auth server validates the session.
-  `/favicon.ico` from the build. Slugs are lowercase ASCII letters, digits,
+- Update the relevant MarkDown files when architecture, tooling, or conventions change.
-  hyphens and underscores `[a-z0-9_-]` (the site editor filters input live
-  via `slugify.js`, built on the `transliteration` npm package — unicode
-  folds to ASCII, spaces become hyphens; an empty slug on a new page is
-  derived from its title), may not begin with `_` or `.`, and such URLs are
-  never looked up as content.
-- No auth in core code; the SSO/reverse proxy gates all of `/_api`
-  (forward-auth) and owns `/auth/` (login/logout, session validation).
-  Pages render identically for everyone; pagerite.js adds the editing UI
-  only after the auth server validates the session. Never add output
-  sanitization "for safety" against the author — embedded HTML/scripts in
-  Markdown are passed through deliberately.
-- Update this file and `docs/design-principles.md` when architecture,
-  tooling, or conventions change.

README.md

@@ -1,5 +1,3 @@
 # Pagerite
 
-A single-user CMS/blog. FastAPI serves HTML rendered in Python with html5tagger,
+A single-user CMS/blog. FastAPI serves HTML rendered in Python with html5tagger, content is persisted in a kanta database and rendered on the fly per request. Vue is used only for the interactive editing tools, not for the public pages.
-content is persisted in a kanta database and rendered on the fly per request.
-Vue is used only for the interactive editing tools, not for the public pages.

docs/analytics.md

@@ -0,0 +1,182 @@
+# Analytics
+
+Server-side visit analytics. Data lives in a plain JSON file — a msgspec
+Struct dumped to disk — separate from the kanta content database, path from
+`PAGERITE_ANALYTICS` (default: the database path with `.kantadb` replaced by
+`.analytics.json`, e.g. `pagerite.analytics.json`).
+
+- `pagerite/analytics.py` — data model (`Analytics`, `Visit`) and the `Store`
+  (in-memory data + session map, atomic JSON persistence).
+- `pagerite/app.py` — entry-referer stashing in `show_page` (`_track_entry`),
+  the `POST /_a` ping endpoint, and `GET /_api/analytics` (admin-gated like
+  every `/_api` endpoint).
+- `frontend/src/pagerite.js` — client navigation pings and the 📊 pen.
+- `frontend/src/AnalyticsView.vue` — viewer component rendered inside the
+  normal site layout on the `/_a` analytics page.
+- `frontend/src/analytics-main.js` — page entry that mounts `AnalyticsView`
+  into `#analytics-app` inside `#main`.
+
+## What is collected
+
+The client (`pagerite.js`) POSTs fire-and-forget pings to `/_a` with
+`{fr, to}` (`fr` = source path):
+
+- **Initial page load**: `to` is the loaded path. This ping is what starts
+  the visit and counts the entry page view — the document GET alone records
+  nothing, so bots and admin browsing never register. Reloads are not
+  visits: the ping is skipped (PerformanceNavigationTiming `reload`), so a
+  refresh neither counts a second view nor logs a self-transition. The GET
+  handler stashes a cross-origin https `Referer` (origin part only) and any
+  `utm_*` query parameters in in-memory IP tables, consumed by the ping that
+  starts the visit; internal or absent referers never touch the referer table.
+- **Internal fetch-navigations**: `to` is the target path, sent only after
+  the swap actually happened (a failed swap falls back to a full load,
+  whose initial ping counts the view instead — no gap, no double count).
+- **External links** (`https` only): `to` is the link's origin. This is the
+  exit-link record; the user may continue navigating afterwards (new tab,
+  back), so the exit origin is not necessarily the last trail entry.
+- **Excluded**: back/forward (popstate) navigations, navigation involving
+  the analytics page itself (`/_a`), and everything while the user is known to
+  be an admin *and SSO is actually in use* — with no auth proxy (dev/test)
+  "admin" is everyone's state, so the gate is off and everything is recorded —
+  or has the editor open (`body.editing`). Admin noise, not visits.
+- The server validates `to`: internal paths must be valid slug paths
+  ("/" or `[a-z0-9_-]` segments), external ones are re-derived to the
+  https origin and accepted only when the client sent exactly that.
+- The initial ping also records the visitor's `User-Agent` and
+  `Accept-Language` headers. The first `Accept-Language` tag is stored as
+  `lang` (e.g. `en-us`) and its region subtag, if present, is stored as
+  an initial `country` (e.g. `US`).
+- The visitor IP is stored.  A reverse-DNS lookup is attempted for each new
+  visit and the result, when available, is cached in RAM and stored as
+  `host`; local/reserved/multicast addresses are skipped.
+- If a DB-IP MMDB file (`dbip-*.mmdb` or `dbip-*.mmdb.gz`) is present in the
+  repository root, it is loaded at startup and used to look up a more accurate
+  `country`.  The MMDB lookup and the reverse-DNS lookup run in background
+  tasks after the visit is stored, so the `/ _a` response is never delayed.
+  The decompressed `dbip-*.mmdb` file is kept in the repository root and
+  ignored by git.
+- **Crawler hits**: every document GET is queued in RAM as a pending crawler
+  hit.  If a ping from the same (IP, User-Agent) pair arrives within 10
+  seconds the hit is discarded; otherwise it is written to `crawlers`.
+  Crawlers do not count as visits or views.
+
+## Visits and sessions
+
+There are no cookies. A visit is tied together by the (IP, User-Agent) pair
+(IP from the first `X-Forwarded-For` hop — we sit behind a proxy — else the
+direct peer): the first ping from a pair starts a new visit, subsequent
+pings extend it. Pings arriving with no known session (server restart)
+start a fresh visit from the first ping — treated as missing data rather
+than dropped. The (IP, UA) → visit map and the IP → entry-referer/UTM
+tables are in-memory only, but the IP and any resolvable reverse-DNS host
+name are stored on the `Visit` record itself.
+
+Each `Visit` record:
+
+- `start` — timestamp of the first event,
+- `entry` — first page (path) seen,
+- `referer` — external https origin of the initial load, `""` for direct,
+- `ip` — visitor IP address (first `X-Forwarded-For` hop, or direct peer),
+- `host` — reverse-DNS host name for `ip` when resolvable, else `""`,
+- `trail` — everything seen afterwards in first-seen order: page paths and
+  external exit origins. Re-visiting an already seen page (incl. the entry)
+  does not append.
+- `lang` — first `Accept-Language` tag, lowercased (e.g. `en-us`),
+- `country` — two-letter country code.  Initially derived from the
+  `Accept-Language` region subtag, but overwritten by the DB-IP MMDB result
+  when a database is available,
+- `ua` — raw `User-Agent` string from the initial ping,
+- `ua_pretty` — compact display form of the UA (browser/OS/device) when
+  parsable, otherwise the raw string,
+- `utm` — `utm_*` query parameters from the landing URL, as a dict.
+
+Each `CrawlerHit` record:
+
+- `start` — timestamp of the document GET,
+- `entry` — page path requested,
+- `ip` — IP address,
+- `ua` — raw `User-Agent` header,
+- `ua_pretty` — compact display form of the UA when parsable,
+- `referer` — external https origin of the request, `""` for direct/none,
+- `query` — raw query string of the request.
+
+Crawler hits are grouped by User-Agent in the analytics viewer.
+
+## Aggregates
+
+- `transitions`: time series of page transitions, sparse nested dict
+  `from -> to -> bucket -> count` with the same 5-minute bucketing as
+  `views`. `from` is the referer origin or `"(direct)"` for initial loads,
+  a page path for pings.
+- `views`: time series of page loads, `path -> bucket -> count`, sparse: only
+  non-zero 5-minute buckets exist (bucket key is its floored ISO timestamp).
+  Every load counts, including repeats within a visit; external exit origins
+  are not page views and are not counted here.
+- `site_visits`: `bucket -> count` of new visits started, same sparse
+  5-minute bucketing.
+
+Sparseness keeps quiet sites small; dropping old data is a matter of deleting
+list/dict entries (`visits` is a plain append-only list, buckets plain keys).
+
+## Persistence
+
+The whole `Analytics` struct is JSON-encoded and written atomically
+(temp file + rename) on every recorded event. Traffic on a small CMS makes
+this cheap enough; batching can be added later without changing the format.
+
+## Viewing
+
+The 📊 pen in the banner corner (admins only, injected by pagerite.js next to
+the edit pens) links to `/_a`, the analytics page. It is a normal site page:
+the standard banner, navigation and footer stay in place, and the analytics
+content is rendered inside `#main`. The page itself is public, but the data
+still comes from `GET /_api/analytics`, which remains admin-gated like the
+rest of the management API; visitors without access see the viewer with a
+"could not be loaded" message.
+
+Because it is a real page, fetch-navigation handles it like any other internal
+link: clicking the 📊 pen (or any link to `/_a`) fetches the server-rendered
+HTML, swaps the dynamic regions and mounts the Vue analytics app in place. The
+range selector updates the URL query string (`?range=week` etc.) so links to
+a specific range can be shared.
+
+`AnalyticsView.vue` is no longer a full-screen overlay; the `body.analytics-open`
+page-chrome hiding and `#/analytics/<range>` hash routing have been removed.
+
+Charts are SVG curves (Catmull-Rom over an edge-aware adaptive Gaussian —
+a change-point detector splits the series at traffic-level shifts, then
+each segment is smoothed with a bandwidth that ramps with a broad pilot
+estimate of the local rate: isolated events stay narrow (~0.4-unit sigma,
+peaking at ~1 event/unit), busy traffic widens to a 1-unit sigma. The raw
+series is drawn faint underneath). Values are
+**per-unit rates** — per hour on the week view (5-minute bucket counts × 12,
+plotted at native 5-minute resolution), per day on the month+ ranges — and
+the smoothing time scale follows the unit: the month+ sigmas are 24× the
+hourly ones. The y max is derived from the smoothed curves so single-bucket
+spikes don't blow up the scale, and raw spikes are clamped into the plot.
+Axes always start at 0 and end at a multiple of a 1-2-5 major step (max 5
+labeled intervals, minor lines at fifths when integral; the floor is 1/h).
+The week range is aligned to Monday 00:00 UTC and overlays up to 8 previous
+weeks in the same accent color at decreasing opacity (the current week is
+truncated at the current bucket, never drawing fake zeroes for the future);
+its x labels are weekday names centered at midday UTC, without vertical grid
+lines (day boundaries would be misleading in the viewer's timezone). The
+month view labels days the same lineless way — day numbers at noon UTC,
+with the month name substituted for the 1st. Year and all are rolling
+windows ending at now, re-bucketed to daily points, with boundary lines at
+months/years. Below the charts: a radial **transition map** (all pages from
+`/_api/pages` — front page at the center, each slug level on its own ring,
+siblings clockwise in navigation order from the top, radial gap equal to
+the arc spacing — opposite transition directions joined into organic
+tapered connections whose middle width grows logarithmically with the
+count (a single count renders as a ~1 px line, uncapped), connections
+carrying less than 1% of the total traffic
+pruned; beads are simulated one by one in JS (requestAnimationFrame) and
+flow along each edge, emitted at a rate linearly proportional
+to the directional count with no in-flight limit, opposing directions
+offset onto parallel lanes. External referers show as a node row above the
+map, external exits as small nodes fanned outwards from their source
+page), per-page view
+counts, the top transitions and the 50 most recent visit trails. Data comes from `GET /_api/analytics`, which
+returns the raw JSON file contents.

docs/backend.md

@@ -0,0 +1,29 @@
+# Backend
+
+The Python backend lives in `pagerite/`.
+
+## `app.py`
+
+The FastAPI app. FastAPI's built-in API docs are disabled (`docs_url`/`redoc_url`/`openapi_url=None`) because `/docs` belongs to our content. Our own routes (content pages, `/_api/...`, `/_f/...`) are registered BEFORE `frontend.route(app, "/")` is called: fastapi-vue inserts its file routes at the position where `route()` was called (during `load()` in the lifespan), so anything defined earlier wins. The one exception is the content catch-all `/{path:path}`, registered AFTER `frontend.route()` so that built frontend assets still take priority over content slugs. The `Frontend` is constructed with `spa=False` explicitly: it only serves the built files without a catch-all.
+
+The build mirrors the URL space — hashed immutable assets under `/_assets/`, `favicon.ico` at the site root — and an `index.html` in the build would become a `/` route, so leave it out of the build to keep `/` ours.
+
+## `data.py`
+
+msgspec Structs for the kanta database. See `docs/content-model.md` for the full data model.
+
+## `markdown.py`
+
+markdown-it-py renderer (html passthrough + attrs, footnote, deflist, tasklists, admon, gfm_autolink, sub/superscript plugins; typographer + breaks on). Custom image rule: relative srcs resolve against the page path; an image standing alone in its paragraph becomes a figure (captioned when titled), while inline-with-text images and raw `<img>` HTML stay plain. A `{dates}` line expands to the article's published/updated dateline (`p.dateline`, from `Node.created`/`modified`; left literal in previews of unsaved pages).
+
+## `views.py`
+
+The shared page layout as an html5tagger `Template` with placeholders (`Title`, `Brand`, `Banner`, `Nav`, `Sidebar`, `Main`), nav rendering straight from the `Data.menu` tree (siblings sorted by `Node.order`; nav links to content-less labels point at their first child via `first_leaf`, the first published descendant with content), and page/404 rendering.
+
+Content pages get SEO/social meta (description, canonical link, Open Graph + twitter card) from heuristics over the rendered article: the description is the first paragraph's text, the share image prefers a `{.hero}`-classed image, then the first raster `<img>`, then the first SVG; the first `<video>` yields `og:video`; URLs are made absolute with the request base URL; `article:published/modified_time` come from `Node.created`/`modified`. If the markdown contains its own h1, the page title is NOT rendered as an additional h1 (it still supplies `<title>` and nav labels).
+
+The navbar holds top-level items only; the current section's subitems go to a left `#sidebar` as a nested list (the section's direct children plain, deeper levels indented with article-list-style markers), which is rendered when the section offers at least two published items, or exactly one while viewing anything other than that only page — the section index, a 404, a grandchild (so those pages can reach the child), and also on that only page itself when it has published children of its own; no aside element at all on the front page, leaf pages and the sole childless page of a one-page section. Also, category labels are nodes without content — None *or* empty markdown — and their nav links point at their first child page. Dynamic regions have stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`) for fetch-navigation swaps (`#sidebar` may be absent on either side of a swap).
+
+## `seed.py`
+
+Demo content written only when the database is first created, via a `@kanta.bootstrap` handler in `app.py`.

docs/content-model.md

@@ -0,0 +1,35 @@
+# Content model
+
+The site structure is stored in the kanta database managed by `pagerite/data.py`.
+
+## Site tree
+
+`Data.menu` maps top-level slugs to `Node`s, each with `children` keyed by slug — the URL path is the slug chain. The front page is whichever top-level node has slug "" (parallel to the other main level pages, not their parent); it cannot have children, and renaming its slug away leaves no front page ("/" redirects to the first nav item).
+
+`Node.content` is the Markdown page, or None for a pure category label whose URL renders a placeholder page (while nav links to it point at its first child); every label's title and slug are editable.
+
+Siblings order by the fractional `Node.order` key: a moved item gets a fresh key relative to its new siblings, all others keep theirs. `resolve`/`find_slot` walk the tree by path; moves are slot detach/attach carrying the whole subtree. Legacy flat `Data.pages` (pre-tree databases) migrates into `menu` on startup. The app owns the `Data` object; reads are plain attribute access, writes in `kanta.transaction(...)`.
+
+`Data.version` is bumped on every write and embedded in page ETags so nav-affecting changes invalidate caches.
+
+## Files
+
+`Data.files` is a content-addressed store (blake3[:12] + extension) mapping file names to bytes, served at `/_f/{name}` with immutable caching; pages reference files by absolute `/_f/` URLs so hierarchy moves never break them.
+
+## Banners
+
+`Node.banner` is a raw trusted HTML snippet for the header banner (img, styled div, canvas+script...); empty inherits from the node's ancestors (front page last). It is rendered AFTER the banner design's artwork, so author code (e.g. a `<style>` override) always wins over the design's own styles.
+
+`Node.banner_design` picks a banner design: a theme folder name whose `banner.css` styles it and whose `banner.html` (arbitrary markup: canvas + style + script) or `banner.svg` supplies the inline artwork (wrapped in `div[data-design]`); "" = explicitly no design, None = inherit (nearest ancestor, front page last, then the active theme's own design if it ships banner.css/banner.svg/banner.html). The design's banner.css is linked in `<head>` (id `pagerite-banner`) between the theme and the custom CSS.
+
+## Site settings
+
+`Data.brand` is the site name (header link + `<title>` suffix), editable in the site editor via `/_api/settings`; empty = no header link and no `<title>` suffix.
+
+`Data.brand_html` is raw trusted HTML replacing the brand link entirely (rendered in a `#brand` div on top of the banner, next to the nav) — site-wide, not per-page like banners; edited in the site editor with image/video upload into `Data.files`.
+
+`Data.theme` is the active theme name (empty = none/base only); themes are folders in `pagerite/themes/{name}` containing `theme.css` and/or `banner.css` (+ `banner.svg` artwork and any extra assets the CSS references, like summer's `grass.svg`), served by the backend at `/_themes/{name}/...` — read from disk per request (etag by mtime), never built, so on-disk edits show on the next page load even in prod. The theme selector and banner-design selector enumerate these folders via `GET /_api/settings`.
+
+`Data.custom_css` is raw trusted CSS injected inline in every page `<head>` (id `pagerite-user`) and swapped during fetch-navigation; editable in the site editor. Font picks (heading/body/brand) in the site editor are stored as plain `:root` rows in `custom_css` (`--font-body: var(--font-source-sans);` format — parsed out and rewritten on change, the `:root` block added/removed as needed), referencing the per-family variables (`--font-source-sans` etc.) from `pagerite.css`; the base stylesheet's `--font-brand` defaults to `var(--font-heading)`.
+
+`Data.favicon` names a file in the content-addressed `files` store, uploaded/cleared in the site editor via `PUT`/`DELETE /_api/settings/favicon`; when set it is linked as `<link rel="icon">` on every page, otherwise browsers fall back to the build's `/favicon.ico` by convention.

docs/design-principles.md

@@ -1,253 +1,55 @@
 # Pagerite Design Principles
 
-Pagerite is a single-user CMS/blog. This document records the initial
+Pagerite is a single-user CMS/blog. This document records the initial high-level design decisions; it will be refined as the implementation evolves.
-high-level design decisions; it will be refined as the implementation
-evolves.
 
 ## Architecture
 
-- **Server-side rendered.** FastAPI serves complete HTML pages, generated in
+- **Server-side rendered.** FastAPI serves complete HTML pages, generated in Python with **html5tagger**. There is no client-side templating or SPA for the public site.
-  Python with **html5tagger**. There is no client-side templating or SPA for
+- **Vue only where interactivity demands it.** Small interactive islands (editing tools mainly) are Vue components mounted into specific elements of the server-rendered pages. The public reading experience has no scripting requirement.
-  the public site.
+- **Persistence via kanta.** Content is stored in an asyncio-friendly kanta database. Rendering happens on the fly on each request — there are no pre-built static artifacts.
-- **Vue only where interactivity demands it.** Small interactive islands
-  (editing tools mainly) are Vue components mounted into specific elements of
-  the server-rendered pages. The public reading experience has no scripting
-  requirement.
-- **Persistence via kanta.** Content is stored in an asyncio-friendly kanta
-  database. Rendering happens on the fly on each request — there are no
-  pre-built static artifacts.
 
 ## Content model
 
-- Pages and blog articles are fundamentally the same kind of thing: named
+- Pages and blog articles are fundamentally the same kind of thing: named pieces of content. The blog/website distinction is blurred; an article is just a page (possibly with metadata such as a publication date and listing in a feed).
-  pieces of content. The blog/website distinction is blurred; an article is
+- **Pretty URLs.** Content is addressed by its name (slug), not by technical constructs — no `/cms/...` or `/blog/post1` prefixes. Slugs usually live directly at the site root; structured content may nest (`/docs/design-principles`-style). The URL space is the author's, so reserved prefixes must be kept few and deliberate: everything internal lives under `/_` (`/_api/`, `/_f/`, `/_assets/`). The only other reserved root path is `/favicon.ico`, served from the build. Slugs are lowercase ASCII letters, digits, hyphens and underscores (`[a-z0-9_-]`; input is transliterated and filtered as you type, and a new page's empty slug is derived from its title), may not begin with `_` or `.`, and such URLs are never looked up as content.
-  just a page (possibly with metadata such as a publication date and
+- **Single user, trusted author.** No auth concerns in the core design. Everything published is public; only editing tools will later sit behind access control (external SSO when that time comes). The author is trusted to create well-meaning slugs and content — no sanitization for safety, only for correctness.
-  listing in a feed).
+- **Commenting** is not planned now but the model should not preclude it later.
-- **Pretty URLs.** Content is addressed by its name (slug), not by technical
-  constructs — no `/cms/...` or `/blog/post1` prefixes. Slugs usually live
-  directly at the site root; structured content may nest
-  (`/docs/design-principles`-style). The URL space is the author's, so
-  reserved prefixes must be kept few and deliberate: everything internal
-  lives under `/_` (`/_api/`, `/_f/`, `/_assets/`). The only
-  other reserved root path is `/favicon.ico`, served from the build.
-  Slugs are lowercase ASCII letters, digits, hyphens and underscores
-  (`[a-z0-9_-]`; input is transliterated and filtered as you type, and a
-  new page's empty slug is derived from its title), may not begin with
-  `_` or `.`, and such URLs are never looked up as content.
-- **Single user, trusted author.** No auth concerns in the core design.
-  Everything published is public; only editing tools will later sit behind
-  access control (external SSO when that time comes). The author is trusted
-  to create well-meaning slugs and content — no sanitization for safety,
-  only for correctness.
-- **Commenting** is not planned now but the model should not preclude it
-  later.
 
 ## Authoring format
 
-- Content is written in **Markdown** with powerful extensions (tables,
+- Content is written in **Markdown** with powerful extensions (tables, footnotes, code highlighting, etc.).
-  footnotes, code highlighting, etc.).
+- **Embedded HTML is passed through unfiltered**, including inline scripts and other dynamic content the author wants to post. This is safe by the single-trusted-author assumption above.
-- **Embedded HTML is passed through unfiltered**, including inline scripts
+- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition lists, task lists, brace-attributes; tables and strikethrough from the default preset), with `html=True` for raw passthrough, `typographer=True` for SmartyPants-style replacements in body text (curly quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.), and `breaks=True` so single line breaks inside paragraphs become `<br>`. Code spans/blocks and raw HTML are left untouched. Fenced code blocks are highlighted server-side with **Pygments** (`nowrap` spans styled by `/_assets/pygments-*.css`, which maps every token class onto the `--code-*` variables; the base stylesheet defines light and dark palette sets resolved via `light-dark()`, so each theme gets the set matching its `color-scheme` and may only retint `--code-bg` to keep the well in the page's color family); a JS copy button appears on hover. Should this prove limiting, we implement our own renderer on top of html5tagger, which we already use for all HTML generation.
-  and other dynamic content the author wants to post. This is safe by the
+- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`) are stored by content hash — blake3, first 6 bytes hex + original extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs that survive page renames and dedupe identical content; pages no longer own files. An image standing alone in its paragraph becomes a block `<figure>` — with `<figcaption>` when it has a title; images inline with text and raw `<img>` HTML stay plain inline images. Positioning is by attribute classes: `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at 30% of the text column (the caption wraps within it; an explicit `width=300` makes the figure shrink-wrap the image instead), `{.wide}` goes full bleed (viewport edge to edge, or up to the docked editor; the sidebar stacks on top of it); plain attributes like `width=300` work too. Headings (h1/h2) clear floats, so images never overflow into the next section.
-  single-trusted-author assumption above.
-- Renderer: **markdown-it-py** with mdit-py-plugins (footnotes, definition
-  lists, task lists, brace-attributes; tables and strikethrough from the
-  default preset), with `html=True` for raw passthrough,
-  `typographer=True` for SmartyPants-style replacements in body text (curly
-  quotes, `--` / `---` → en / em dashes, `...` → ellipsis, `(c)` → ©, etc.),
-  and `breaks=True` so single line breaks inside paragraphs become `<br>`.
-  Code spans/blocks and raw HTML are left untouched. Fenced code blocks are
-  highlighted server-side with
-  **Pygments** (`nowrap` spans styled by
-  `/_assets/pygments-*.css`, which maps every token class onto the `--code-*`
-  variables; the base stylesheet defines light and dark palette sets resolved
-  via `light-dark()`, so each theme gets the set matching its `color-scheme`
-  and may only retint `--code-bg` to keep the well in the page's color
-  family); a JS copy button appears on hover. Should this
-  prove limiting, we implement our own renderer on top of html5tagger,
-  which we already use for all HTML generation.
-- **Files are content-addressed.** Uploads (`PUT /_api/files/{filename}`)
-  are stored by content hash — blake3, first 6 bytes hex + original
-  extension — and served immutable from `/_f/{hash}.ext`. Absolute URLs
-  that survive page renames and dedupe identical content; pages no longer
-  own files. An image standing alone in its paragraph becomes a block
-  `<figure>` — with `<figcaption>` when it has a title; images inline
-  with text and raw `<img>` HTML stay plain inline images. Positioning
-  is by attribute classes:
-  `![alt](/_f/….avif "Caption"){.right}` — `{.right}`, `{.left}` float at
-  30% of the text column (the caption wraps within it; an explicit
-  `width=300` makes the figure shrink-wrap the image instead),
-  `{.wide}` goes full bleed (viewport edge to edge, or up to the docked
-  editor; the sidebar stacks on top of it); plain attributes like `width=300`
-  work too. Headings (h1/h2) clear floats, so images never overflow into the
-  next section.
 
 ## Page structure and navigation
 
-- All pages share one static layout, defined once as an **html5tagger
+- All pages share one static layout, defined once as an **html5tagger Template** with capitalized placeholders (`Title`, `Banner`, `Nav`, `Sidebar`, `Main`) filled per request. The dynamic regions carry stable ids (`#page-banner`, `#nav`, `#sidebar`, `#main`).
-  Template** with capitalized placeholders (`Title`, `Banner`, `Nav`,
+- The page top is a **full-width banner header** with the site name and the navigation bar overlaid on it — no separate chrome header. The banner combines two layers, stacked in `#page-banner` (a grid, so they overlay): first the **banner design** — a named design living in a theme folder (`pagerite/themes/{name}/banner.css` plus artwork as `banner.html` — arbitrary markup like canvas + style + script — or `banner.svg`), chosen per page via `Node.banner_design` (a design name, "" for none, None to inherit from the nearest ancestor, then the front page, then the active theme's own design). The artwork is inlined into a `div[data-design]` wrapper: SVG artwork can be recolored from the theme stylesheet (corporate's single SVG serves both light and dark mode via `var()`-driven stops). Second, **per-page author code**: `Node.banner` holds an arbitrary trusted HTML snippet (an image, a styled div, canvas + script — anything), resolved by walking up the node's ancestors to the front page and rendered **after** the design artwork, so author styles always win over the design's own. The base stylesheet falls back to a plain gradient. There is deliberately no scrim fading the banner into the page background — any such fade would ruin user-supplied designs; themes that want one bake it into their SVG (purple does).
-  `Sidebar`, `Main`) filled per request. The dynamic regions carry stable
+- **Fetch-navigation.** Links are plain `<a href>`; a small script (`frontend/src/pagerite.js`) intercepts same-origin clicks, fetches the page, and swaps the `#page-banner`, `#nav`, `#sidebar` and `#main` regions, the document title, and the site-wide custom CSS (`<style id="pagerite-user">` in `<head>`), keeping the rest of `<head>` and the layout chrome. Without JS everything works as normal page loads. Scripts inside fetched banner and content regions are re-created so they execute. Swaps run inside `document.startViewTransition` for a rotating cube page transition (CSS adapted from termotohtori.fi — the `::view-transition*` block is fragile, do not tweak; skipped under `prefers-reduced-motion`). Navigation within the same top-level section crossfades instead of rotating; browser back navigation rotates in reverse.
-  ids (`#page-banner`, `#nav`, `#sidebar`, `#main`).
+- **The site structure is a tree of labels.** `Data.menu` holds the top-level items by slug, each with `children` keyed by slug — the URL path is the slug chain. The front page is a top-level node with slug "" (an item *parallel* to the other main level pages, not their parent) and cannot have children. The header navbar holds only the top level; a top-level item is highlighted when viewing any of its subpages. When the current page is inside a main level section with children, those direct children are listed in a **left sidebar** (`#sidebar`), one level deep. The sidebar exists only when there is something to navigate — sections with fewer than two published items, leaf pages and the front page render no aside element at all. Other sections' subitems are never shown without navigating into them first.
-- The page top is a **full-width banner header** with the site name and the
+- **Landing pages are optional.** Every label can either have content (`Node.content`, a Markdown page) or none — a content-less label renders a placeholder page (404 with a pen to create it) instead of redirecting, while nav links to it point straight at its first child, so categories need no filler content and normal navigation never sees the placeholder. Title and slug of every label are editable; renaming a slug moves the whole subtree. The sidebar never lists the section itself, avoiding title duplication with the navbar.
-  navigation bar overlaid on it — no separate chrome header. The banner
+- **Menu order is manual.** Each node has a fractional `order` key among its siblings; reordering/moving writes only the moved node (it takes a fresh value halfway between its new siblings; all other items keep theirs). New pages append at the end of their menu. Structure edits (reorder, move/rename with the whole subtree, retitle) go through `POST /_api/structure` and the editor's structure panel.
-  combines two layers, stacked in `#page-banner` (a grid, so they overlay):
-  first the **banner design** — a named design living in a theme folder
-  (`pagerite/themes/{name}/banner.css` plus artwork as `banner.html` —
-  arbitrary markup like canvas + style + script — or `banner.svg`),
-  chosen per page via
-  `Node.banner_design` (a design name, "" for none, None to inherit from
-  the nearest ancestor, then the front page, then the active theme's own
-  design). The artwork is inlined into a `div[data-design]` wrapper: SVG
-  artwork can be recolored from the theme stylesheet (corporate's single
-  SVG serves both light and dark mode via `var()`-driven stops). Second,
-  **per-page author code**: `Node.banner` holds an arbitrary trusted HTML
-  snippet (an image, a styled div, canvas + script — anything), resolved by
-  walking up the node's ancestors to the front page and rendered **after**
-  the design artwork, so author styles always win over the design's own.
-  The base stylesheet falls back to a plain gradient. There is deliberately
-  no scrim fading the banner into the page background — any such fade would
-  ruin user-supplied designs; themes that want one bake it into their SVG
-  (purple does).
-- **Fetch-navigation.** Links are plain `<a href>`; a small script
-  (`frontend/src/pagerite.js`) intercepts same-origin clicks, fetches the
-  page, and swaps the `#page-banner`, `#nav`, `#sidebar` and `#main` regions,
-  the document title, and the site-wide custom CSS (`<style id="pagerite-user">`
-  in `<head>`), keeping the rest of `<head>` and the layout chrome. Without JS
-  everything works as normal page loads. Scripts inside fetched banner and
-  content regions are re-created so they execute. Swaps run inside `document.startViewTransition` for a rotating
-  cube page transition (CSS adapted from termotohtori.fi — the
-  `::view-transition*` block is fragile, do not tweak; skipped under
-  `prefers-reduced-motion`). Navigation within the same top-level section
-  crossfades instead of rotating; browser back navigation rotates in
-  reverse.
-- **The site structure is a tree of labels.** `Data.menu` holds the
-  top-level items by slug, each with `children` keyed by slug — the URL
-  path is the slug chain. The front page is a top-level node with slug ""
-  (an item *parallel* to the other main level pages, not their parent) and
-  cannot have children. The header navbar holds only the top level; a
-  top-level item is highlighted when viewing any of its subpages. When the
-  current page is inside a main level section with children, those direct
-  children are listed in a **left sidebar** (`#sidebar`), one level deep.
-  The sidebar exists only when there is something to navigate — sections
-  with fewer than two published items, leaf pages and the front page render
-  no aside element at all. Other sections' subitems
-  are never shown without navigating into them first.
-- **Landing pages are optional.** Every label can either have content
-  (`Node.content`, a Markdown page) or none — a content-less label renders
-  a placeholder page (404 with a pen to create it) instead of redirecting,
-  while nav links to it point straight at its first child, so categories
-  need no filler content and normal navigation never sees the placeholder.
-  Title and slug of every label are editable; renaming a
-  slug moves the whole subtree. The sidebar never lists the section
-  itself, avoiding title duplication with the navbar.
-- **Menu order is manual.** Each node has a fractional `order` key among
-  its siblings; reordering/moving writes only the moved node (it takes a
-  fresh value halfway between its new siblings; all other items keep
-  theirs). New pages append at the end of their menu. Structure edits
-  (reorder, move/rename with the whole subtree, retitle) go through
-  `POST /_api/structure` and the editor's structure panel.
 - Unpublished pages are hidden from both nav and URL access (404).
 
 ## Reading experience
 
-- The article column is sized by the **viewport, never by content**: a
+- The article column is sized by the **viewport, never by content**: a symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps the layout stable across navigation. The sidebar occupies the left gutter, the right gutter balances it; wide screens get columns inside long articles without changing the article's width.
-  symmetric grid (`1fr minmax(0, 78rem) 1fr`) with flexible gutters keeps
+- A gentle **scroll-reveal** of headings, figures and block-level elements (IntersectionObserver). It is layout-level: articles need no support for it, and `prefers-reduced-motion` disables all motion.
-  the layout stable across navigation. The sidebar occupies the left
-  gutter, the right gutter balances it; wide screens get columns inside
-  long articles without changing the article's width.
-- A gentle **scroll-reveal** of headings, figures and block-level elements
-  (IntersectionObserver). It is layout-level: articles need no support
-  for it, and `prefers-reduced-motion` disables all motion.
 
 ## Styling
 
-- The base stylesheet `frontend/src/assets/pagerite.css` provides the layout,
+- The base stylesheet `frontend/src/assets/pagerite.css` provides the layout, typography and interaction rules with conservative CSS variables. A theme layer (`pagerite/themes/{name}/theme.css` — currently `purple`, `corporate` and `nitro`, served by the backend at `/_themes/{name}/theme.css` straight from disk, never built) overrides those variables and adds the visual styling; `Data.theme` selects the active theme (empty = none/base only) and the site editor can switch it, choosing from the theme folders found on disk. Vue may add per-component styles on top where needed. The corporate and nitro themes switch palettes automatically via `prefers-color-scheme` (corporate is light-first with a matching dark palette; nitro a warm light-grey page or, in dark mode, a deep violet one — its dark banner and orange accents carry over unchanged); purple (dusk) uses one fixed palette for everyone. Themes may restyle structural details the base leaves plain — heading colors and underlines, list markers, nav treatment, brand sizing. A theme folder may also ship a **banner design** (`banner.css` + `banner.svg`), selectable per page independently of the active theme. The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll parameter on `<html>` (event-driven, so it is still when the page is idle), the banner contents drift within their window (with scale overscan so no edge shows), and designs may key their own effects off the same parameter — purple's sun rises as you scroll.
-  typography and interaction rules with conservative CSS variables. A theme layer
+- Fonts, the shared stylesheet and pygments styles live under `frontend/src/assets/` and are emitted as hashed assets under `/_assets/` (Source Serif 4 for headings, Source Sans 3 for body, Fira Code for code by default; Fraunces, Literata, Cormorant, Playfair Display, Inter, Montserrat, Cause, Exo 2 and New Rocker kept as woff2 options with local `@font-face`, variable-weight where available). No third-party requests.
-  (`pagerite/themes/{name}/theme.css` — currently `purple`, `corporate`
-  and `nitro`, served by the backend at `/_themes/{name}/theme.css` straight
-  from disk, never built) overrides those variables and
-  adds the visual styling; `Data.theme` selects the active theme (empty = none/base
-  only) and the site editor can switch it, choosing from the theme folders
-  found on disk. Vue may add per-component styles on top
-  where needed. The corporate and nitro themes switch palettes automatically via
-  `prefers-color-scheme` (corporate is light-first with a matching dark palette;
-  nitro a warm light-grey page or, in dark mode, a deep violet one — its dark
-  banner and orange accents carry over unchanged); purple (dusk) uses one
-  fixed palette for everyone. Themes may restyle structural details the base
-  leaves plain — heading colors and underlines, list markers, nav treatment,
-  brand sizing. A theme folder may also ship a **banner design**
-  (`banner.css` + `banner.svg`), selectable per page independently of the
-  active theme. The banner artwork has scroll parallax: pagerite.js sets the
-  `--pry` scroll parameter on `<html>` (event-driven, so it is still when the
-  page is idle), the banner contents drift within their window (with scale
-  overscan so no edge shows), and designs may key their own effects off the
-  same parameter — purple's sun rises as you scroll.
-- Fonts, the shared stylesheet and pygments styles
-  live under `frontend/src/assets/` and are emitted as hashed assets under
-  `/_assets/`
-  (Source Serif 4 for headings, Source Sans 3 for body, Fira Code for code
-  by default; Fraunces, Literata, Cormorant, Playfair Display, Inter,
-  Montserrat, Cause, Exo 2 and New Rocker kept as woff2 options with
-  local `@font-face`, variable-weight where available). No third-party
-  requests.
 
 ## Editing
 
 - Editing happens **in place**, in two modes opened by two pens:
-  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which
+  - **Page mode** — the 🖊️ next to a page's heading (including 404s, which is how new pages start) opens a CodeMirror Markdown editor docked to the left of the article: the host sits inside `#content` (below the banner, never over the footer), the content shifts right and the sidebar hides while editing. Preview renders server-side per keystroke (no debouncing) straight into the visible article's heading and body.
-    is how new pages start) opens a CodeMirror Markdown editor docked to
+  - **Site mode** — the 🖊️ on the banner opens a panel with the site **brand** (applied to the header live), a **theme** selector (swapping the theme stylesheet in place), **font** picks (heading/body/brand — stored as plain `:root` rows inside the custom CSS, referencing the base stylesheet's per-family font variables), a **site-wide custom CSS** field (injected into `<style id="pagerite-user">` in the live page head and swapped during fetch-navigation), the page's **banner design** selector (inherit / none / any design found on disk, inherited by children), the page's **banner HTML** field (supplementing the design, previewed into the real banner region, so you see exactly which banner you're editing) and the **structure tree**. Everything saves immediately as you edit — no save button, no edit mode.
-    the left of the article: the host sits inside `#content` (below the
+- Clicking a pen again closes the editor (without saving; a dirty preview reloads the page). The pens are `<button>`s wired up by `pagerite.js` — editing is an action, not a navigation. The editor's WebSocket **reconnects automatically** with local text and pending saves preserved. (All users are trusted authors for now; access control later with SSO.)
-    banner, never over the footer), the content shifts right and the
+- **CodeMirror 6** for Markdown editing (no WYSIWYG), title/published controls. Images can be pasted straight into the editor or chosen via a file input: they upload to the content store (`PUT /_api/files/...`) and insert `![alt](/_f/hash.ext)` at the cursor.
-    sidebar hides while editing. Preview renders server-side per keystroke
+- The **structure panel** (vue-draggable tree of the whole site, in site mode) covers page management: reorder any menu level, drag across sections, add, delete (two clicks: the button arms, then deletes — no dialogs). Every node is a real label — content-less category rows offer a ➕ to give them a landing page. Deleting a category removes only its landing page (the label and its subpages stay). Every non-empty list ends with a ➕ row that starts a new page as a local-only tree row at that level; the row can be dragged into place before its title and slug are filled in and is persisted only on commit. While dragging, these ➕ rows double as "end of this list" drop targets; dropping ON the lower part of a row makes the page that row's first child (even a leaf's, creating a sublist), while a row's exposed top edge inserts a sibling before it. A dragged row's indentation previews the target list's depth. Rows are always editable: titles save while typing, slug edits commit on blur/Enter since they rename the path (moving the whole subtree). The front page is the root row with an empty slug — renaming it away leaves no front page ("/" redirects to the first nav item), and giving another top-level row the empty slug makes it the front page.
-    (no debouncing) straight into the visible article's heading and body.
+- Preview and saving go over a **WebSocket** (`/_api/ws/editor`) with a stateless JSON protocol (`open`/`render`/`save`; on save all fields are optional and absent ones keep their old values, `move_from` renames), avoiding REST polling and races. Rendering always stays server-side.
-  - **Site mode** — the 🖊️ on the banner opens a panel with the site
+- A REST API also exists for scripting, all under `/_api/`: `GET pages` (the full tree), `PUT/DELETE pages/{path}`, `GET/PUT settings` (site brand, theme and custom CSS), `POST structure` (reorder/move/retitle), file upload/removal via `PUT/DELETE files/{name}`.
-    **brand** (applied to the header live), a **theme** selector (swapping
+- On startup, seed pages from `pagerite/seed.py` are added **only if missing** — existing user content is never overwritten.
-    the theme stylesheet in place), **font** picks (heading/body/brand —
-    stored as plain `:root` rows inside the custom CSS, referencing the base
-    stylesheet's per-family font variables), a **site-wide custom CSS** field (injected
-    into `<style id="pagerite-user">` in the live page head and swapped during
-    fetch-navigation), the page's **banner design** selector (inherit /
-    none / any design found on disk, inherited by children), the page's
-    **banner HTML** field (supplementing the design, previewed into the
-    real banner region, so you see exactly which banner you're editing) and
-    the **structure tree**. Everything saves immediately as you edit — no
-    save button, no edit mode.
-- Clicking a pen again closes the editor (without saving; a dirty preview
-  reloads the page). The pens are `<button>`s wired up by `pagerite.js` —
-  editing is an action, not a navigation. The editor's WebSocket
-  **reconnects automatically** with local text and pending saves preserved.
-  (All users are trusted authors for now; access control later with
-  SSO.)
-- **CodeMirror 6** for Markdown editing (no WYSIWYG), title/published
-  controls.
-  Images can be pasted straight into the editor or chosen via a file
-  input: they upload to the content store (`PUT /_api/files/...`) and
-  insert `![alt](/_f/hash.ext)` at the cursor.
-- The **structure panel** (vue-draggable tree of the whole site, in site
-  mode) covers page management: reorder any menu level, drag across
-  sections, add, delete (two clicks: the button arms, then deletes — no
-  dialogs). Every node is a real label — content-less category rows offer
-  a ➕ to give them a landing page.
-  Deleting a category removes only its landing page (the label and its
-  subpages stay). Every non-empty list ends with a ➕ row that starts a
-  new page as a local-only tree row at that level; the row can be dragged
-  into place before its title and slug are filled in and is persisted only
-  on commit. While dragging, these ➕ rows double as "end of this list"
-  drop targets; dropping ON the lower part of a row makes the page that
-  row's first child (even a leaf's, creating a sublist), while a row's
-  exposed top edge inserts a sibling before it. A dragged row's
-  indentation previews the target list's depth. Rows are always
-  editable: titles save while typing, slug edits commit on blur/Enter
-  since they rename the path (moving the whole subtree). The front page
-  is the root row with an empty slug — renaming it away leaves no front
-  page ("/" redirects to the first nav item), and giving another
-  top-level row the empty slug makes it the front page.
-- Preview and saving go over a **WebSocket** (`/_api/ws/editor`) with a
-  stateless JSON protocol (`open`/`render`/`save`; on save all fields are
-  optional and absent ones keep their old values, `move_from` renames),
-  avoiding REST polling and races. Rendering always stays server-side.
-- A REST API also exists for scripting, all under `/_api/`:
-  `GET pages` (the full tree), `PUT/DELETE pages/{path}`,
-  `GET/PUT settings` (site brand, theme and custom CSS), `POST structure`
-  (reorder/move/retitle), file upload/removal via `PUT/DELETE files/{name}`.
-- On startup, seed pages from `pagerite/seed.py` are added **only if
-  missing** — existing user content is never overwritten.

docs/editing.md

@@ -0,0 +1,30 @@
+# Editing interface
+
+The Vue editor is a single tabbed `EditorShell.vue` mounted in a host div created inside the static document.
+
+## Tabs
+
+The shell hosts four kept-alive tabs (ordered site-wide first — site, structure — then, after a visual break, the per-page tabs — article, banner):
+
+- `PageEditor.vue` — CodeMirror + server-rendered preview over WebSocket `/_api/ws/editor`, previewing into the visible article; editor scroll drives the article scroll — while any editor is open the window scroll is locked (`body.editing`), the panel exactly fills the available window height, and only `#main` scrolls; a format bar offers Markdown helpers — bold/italic/code/link/table/image upload, with Ctrl/Cmd-B/I/S bindings — for the hard-to-remember syntax. Edits content and title only, never the path.
+- `BannerEditor.vue` — per-page banner HTML + banner design selector, previewed into `#page-banner`.
+- `SiteEditor.vue` — site brand + optional custom brand HTML with image/video upload + theme selector + font picker + favicon upload — clicking the preview tile picks a new one — + site-wide custom CSS, CSS injected into `<head id="pagerite-user">`.
+- `StructureEditor.vue` — the vue-draggable structure tree with always-editable title/slug inputs per row.
+
+Media uploads everywhere use the image icon buttons (pasting into the editor works too). The article, banner and site-settings pens are shorthands that open the shell on the matching tab; once open, clicking a pen switches tabs (and retargets the editors to the current page) instead of closing/remounting. The close button in the tab bar closes the shell (Escape too); tabs have no close buttons of their own. Closing only HIDES the shell — the Vue app stays mounted, so page-editor state (unsaved text included) survives until a real page reload; saving there is explicit (Ctrl+S) and refreshes the page regions in place. Admin panels never reload the page.
+
+In-place page re-rendering shared by the banner/site/structure tabs lives in `swapdoc.js` (`runScripts`/`loadPlain`: fetch a page, swap the dynamic regions, replaceState). Placeholder texts are reserved for showing the actual default in effect when a field is left empty (e.g. the pending row's slug derived from its title); labels and help are real elements or tooltips, never placeholders.
+
+## Saving behavior
+
+Everything saves immediately as you edit (brand/title/CSS debounced, slug on commit since it renames the path), theme change swaps the stylesheet in place, tree rows navigate in place without transitions when focused, and the front page is a root-only row whose empty slug is editable like any other.
+
+Every non-empty list (and the root) ends with a non-draggable plus footer row (vuedraggable `#footer` slot): clicking it starts a new pending page at that level (its slug placeholder shows the slug derived live from the title being typed), and while dragging it is the list's "end of list" drop target. Committing a pending page PUTs it with empty markdown (creates an empty page that renders with its title — saving never deletes; deletion is the page editor's explicit choice: saving trimmed-empty text issues a REST DELETE), then switches to the page editor tab for the actual writing.
+
+Dropping ON the lower part of a row moves the page under that row (the child list's container invisibly overlaps its own row's bottom via negative margin — Sortable inserts it as the first child natively), while a row's exposed top edge inserts a sibling before it. Row indentation is structural (each nested list margin-indents itself), so a dragged row previews its whole subtree at the target list's depth.
+
+The shell is dynamic-imported onto the content page by pagerite.js when an edit pen is clicked (the pens are injected by pagerite.js after the session validates; they carry `data-editor-src`/`data-editor-css`/`data-editor-mode`). In dev, modules load from the Vite dev server (`PAGERITE_VITE_URL`), in prod from the hashed build assets resolved via `frontend-build/.vite/manifest.json`.
+
+`vite.config.js` sets `appType: 'mpa'` (no SPA fallback) and builds with `manifest: true`, `assetsDir: '_/assets'` (so the build mirrors the URL space; `frontend/public/favicon.ico` lands at the build root and is served at `/favicon.ico`). JS inputs are `src/main.js` and `src/pagerite.js`, plus `src/assets/pagerite.css` as a separate stylesheet entry; theme and banner-design CSS are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. There is no `index.html` source (it would shadow `/` and turn missing dev paths into an empty Vue shell). All outputs are ES modules. The build sets `preserveEntrySignatures: 'exports-only'` because main.js is consumed via dynamic `import()` for its `openEditor`/`closeEditor` exports — Vite app builds otherwise strip unused entry exports, leaving dead edit pens. In dev the backend links theme/banner-design stylesheets like in prod (`/_themes/...`); only the base CSS is Vite-injected from JS, and pagerite.js then re-appends the `#pagerite-theme`/`#pagerite-banner`/`#pagerite-user` elements to restore the canonical order (base < theme < design < custom CSS). Theme switches in the site editor simply swap the `#pagerite-theme` link href, identically in dev and prod.
+
+`vite-plugin-fastapi.js` has an auto-upgrade marker — edit `vite.config.js`, not the plugin.

docs/frontend-runtime.md

@@ -0,0 +1,25 @@
+# Frontend runtime
+
+The public page runtime lives in `frontend/src/`.
+
+## `main.js`
+
+Vue editor app entry, mounts the tabbed `EditorShell`. See `docs/editing.md` for the editor UI.
+
+## `pagerite.js`
+
+Public page entry; runs fetch-navigation (backed by an in-memory page cache: every visible internal link — and the current page — is fetched once at load, clicks are then served from JS with no fetch, and the editors' `loadPlain` keeps the cache current via a `pagerite:page-fetched` event; articles are `cache-control: no-cache` on the wire), scroll-reveal, OverlayScrollbars on `document.body` (floating, auto-hiding scrollbars that never reserve layout space or shift the page when appearing; native scroll APIs like `window.scrollTo` keep working; themed via the `--os-*` variables in pagerite.css), brand shrink-to-fit (the themed size is the maximum; JS reduces the font-size so a long brand or narrow viewport still fits one line), code copy buttons, and the auth check.
+
+It first probes `GET /auth/api/settings` to detect whether Paskia SSO is available, then `GET /_api/settings` to learn the current session's admin status. The same reverse proxy that gates `/_api` returns 401 for anonymous users, 403 for users without the admin permission, and 200 for admins. When Paskia is detected, a login link (anonymous) or profile link (logged in) is shown in the banner corner; both are plain `<a href="/auth/">` links (Paskia does not support being iframed, so we navigate normally), and a `pageshow` handler re-probes auth when history navigation restores a cached page. Admins also get the page/banner edit pens and a site-settings pen (asset URLs from the `pagerite:editor-src`/`-css` meta tags). If no Paskia SSO is detected (dev/no proxy), editing is left open. Pages themselves render identically for everyone; the real gate is the auth proxy in front of all of `/_api`. The backend links the stylesheets in a fixed order — base (Vite build), theme, banner design, custom CSS last — each with a stable id so the site editor can swap them in place.
+
+## `assets/`
+
+Shared styles and data files built by Vite and served hashed under `/_assets/`: `pagerite.css` (base layout + conservative variables), `pygments.css`, and `fonts/` (self-hosted Source Sans 3/Source Serif 4/Fraunces/Literata/Cormorant/Playfair Display/Inter/Montserrat/Fira Code/Cause/Exo 2/New Rocker variable woff2).
+
+The `::view-transition*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak. Themes and banner designs are NOT built — they live in `pagerite/themes/{name}/` and are served by the backend. See `docs/themes-and-assets.md` for details.
+
+Vite builds ES-module `.js` outputs; the backend renders `<script type="module">` for them (module scripts defer by default).
+
+## Database file
+
+The database file is `pagerite.kantadb` in the cwd (`PAGERITE_DB` overrides); gitignored. Do not delete it without asking.

docs/overview.md

@@ -0,0 +1,5 @@
+# Pagerite overview
+
+Pagerite is a single-user CMS/blog. FastAPI serves HTML rendered in Python with html5tagger; content is persisted in a kanta database and rendered on the fly per request. Vue is used only for interactive bits (editing tools), not for the public pages.
+
+See `docs/design-principles.md` for the high-level design and the other `docs/*.md` files for implementation details.

docs/themes-and-assets.md

@@ -0,0 +1,37 @@
+# Themes and assets
+
+## Built assets
+
+Files under `frontend/src/assets/` are built by Vite and served hashed under `/_assets/`:
+
+- `pagerite.css` — base layout + conservative variables.
+- `pygments.css` — Pygments token styles mapped onto the `--code-*` variables.
+- `fonts/` — self-hosted variable woff2 files for Source Sans 3, Source Serif 4, Fraunces, Literata, Cormorant, Playfair Display, Inter, Montserrat, Fira Code, Cause, Exo 2 and New Rocker.
+
+The `::view-transition*` block at the end of `pagerite.css` (from termotohtori.fi) is fragile — do not tweak.
+
+## Themes
+
+Themes are folders in `pagerite/themes/{name}/` containing `theme.css` and/or `banner.css` (+ `banner.svg` artwork and any extra assets the CSS references, like summer's `grass.svg`). They are served by the backend at `/_themes/{name}/...` — read from disk per request (etag by mtime), never built, so on-disk edits show on the next page load even in prod.
+
+`Data.theme` selects the active theme (empty = none/base only) and the site editor can switch it, choosing from the theme folders found on disk. Vue may add per-component styles on top where needed.
+
+Current themes:
+
+- `purple` — dark dusk palette with Fraunces/Literata and a tilted oversized gradient brand.
+- `corporate` — light-first with automatic `prefers-color-scheme` dark mode, Montserrat/Inter and a huge solid brand.
+- `nitro` — racing/HUD style following `prefers-color-scheme` (warm light-grey page, deep violet in dark), Montserrat/Literata, black as an accent only, a straight orange blade under the banner, and an orange racing-tab nav clipped with a bezier `shape()`.
+- `summer` — light playful meadow, one palette sampled from its illustrated `banner.svg` (sky/grass/sun/flower pink), Fraunces/Literata, a tilted gradient brand, flower bullets, and a layered-parallax banner (sun rises, clouds drift, nearer hills move less) with idle animations (swaying flowers, floating clouds, breathing sun glow) wrapped in `prefers-reduced-motion: no-preference`.
+
+## Banner designs
+
+A theme folder may also ship a banner design (`banner.css` + `banner.html` arbitrary markup or `banner.svg`), selectable per page independently of the active theme. Standalone banner designs (no theme.css) ship as:
+
+- `eyes` — a canvas critter in the grass.
+- `stars` — a drifting starfield.
+
+The banner artwork has scroll parallax: pagerite.js sets the `--pry` scroll parameter on `<html>` (event-driven, so it is still when the page is idle), the banner contents drift within their window (with scale overscan so no edge shows), and designs may key their own effects off the same parameter.
+
+## Stylesheet order
+
+The backend links the stylesheets in a fixed order — base (Vite build), theme, banner design, custom CSS last — each with a stable id so the site editor can swap them in place. The base stylesheet's `--font-brand` defaults to `var(--font-heading)`.

frontend/package.json

@@ -18,8 +18,8 @@
     "@codemirror/view": "^6.43.8",
     "@lezer/highlight": "^1.2.3",
     "codemirror": "^6.0.2",
+    "country-flag-icons": "^1.6.20",
     "overlayscrollbars": "^2.16.0",
-    "paskia": "file:../../paskia/paskia-js",
     "transliteration": "^2.6.1",
     "vue": "^3.5.26",
     "vuedraggable": "^4.1.0"

frontend/src/AnalyticsView.vue

@@ -0,0 +1,354 @@
+<script setup>
+// Analytics viewer rendered as a normal page inside #main. Fetches the raw
+// collected data from /_api/analytics (admin-gated by the auth proxy) and
+// renders totals, smoothed visit/views curves, a transition map, and recent
+// visit/crawler tables. Read-only.
+// See docs/analytics.md for the data format.
+import { computed, onMounted, ref, watch } from 'vue'
+import { RANGES } from './analytics/time.js'
+import {
+  calcTotalViews,
+  copyIp,
+  countCrawlerUas,
+  formatCounts,
+  formatCrawlerRows,
+  formatVisitRows,
+} from './analytics/format.js'
+import * as flagSvgs from 'country-flag-icons/string/3x2'
+import TransitionGraph from './TransitionGraph.vue'
+import VisitorCharts from './VisitorCharts.vue'
+
+const props = defineProps({
+  initialRange: { type: String, default: 'week' },
+})
+
+const data = ref(null)
+const pageTree = ref(null)
+const error = ref('')
+
+onMounted(async () => {
+  try {
+    const res = await fetch('/_api/analytics')
+    if (!res.ok) throw new Error(res.statusText)
+    data.value = await res.json()
+  } catch {
+    error.value = 'analytics data could not be loaded'
+  }
+  // The site tree for the transition map (all pages in menu order). Not
+  // fatal: without it the map falls back to transition endpoints only.
+  try {
+    const res = await fetch('/_api/pages')
+    if (res.ok) pageTree.value = await res.json()
+  } catch { /* map just narrows to pages seen in transitions */ }
+})
+
+const visits = computed(() => data.value?.visits || [])
+const totalViews = computed(() => calcTotalViews(data.value?.views))
+
+const range = ref(RANGES[props.initialRange] ? props.initialRange : 'week')
+
+// Keep the URL shareable when the range changes.
+watch(range, (r) => {
+  const url = new URL(location.href)
+  url.searchParams.set('range', r)
+  history.replaceState(null, '', url)
+})
+
+const visitRows = computed(() => formatVisitRows(visits.value, pageTree.value))
+const crawlers = computed(() => data.value?.crawlers || [])
+const crawlerRows = computed(() => formatCrawlerRows(crawlers.value))
+const topCrawlerUas = computed(() => countCrawlerUas(crawlers.value).slice(0, 10))
+
+function flagSvg(code) {
+  return flagSvgs[code?.toUpperCase()] || ''
+}
+
+function countryName(code) {
+  if (!code) return ''
+  try {
+    return new Intl.DisplayNames(['en'], { type: 'region' }).of(code.toUpperCase())
+  } catch {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <div class="analytics-view">
+    <div class="analytics-panel">
+      <header>
+        <h1>Analytics</h1>
+        <nav class="ranges">
+          <button v-for="(r, key) in RANGES" :key="key" type="button"
+                  :class="{ active: range === key }" @click="range = key">
+            {{ r.label }}
+          </button>
+        </nav>
+        <a href="/" class="close" title="home">✕</a>
+      </header>
+      <p v-if="error" class="error">⚠️ {{ error }}</p>
+      <p v-else-if="!data" class="loading">loading…</p>
+      <template v-else>
+        <section class="totals">
+          <div><strong>{{ visits.length }}</strong> visits</div>
+          <div><strong>{{ totalViews }}</strong> page views</div>
+        </section>
+
+        <VisitorCharts :data="data" :range="range" />
+        <TransitionGraph :data="data" :range="range" :page-tree="pageTree" />
+
+        <section>
+          <h2>Recent visits</h2>
+          <div v-if="visitRows.length" class="visit-table-wrap">
+            <table class="visit-table">
+              <thead>
+                <tr>
+                  <th>when</th>
+                  <th>trail</th>
+                  <th>referer</th>
+                  <th>ip</th>
+                  <th>lang</th>
+                  <th>country</th>
+                  <th>ua</th>
+                  <th>utm</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(v, i) in visitRows" :key="i">
+                  <td class="when">{{ v.when }}</td>
+                  <td class="trail">
+                    <a v-for="(s, si) in v.trail" :key="si"
+                       :href="s.path" :title="s.title" @click="emit('close')">
+                      {{ s.slug }}
+                    </a>
+                  </td>
+                  <td>{{ v.referer }}</td>
+                  <td>
+                    <span class="clickable-ip"
+                          :title="`Click to copy full IP: ${v.ip}`"
+                          @click="copyIp(v.ip)">{{ v.ipDisplay }}</span>
+                  </td>
+                  <td>{{ v.lang }}</td>
+                  <td class="country">
+                    <span v-if="flagSvg(v.country)" class="flag" v-html="flagSvg(v.country)" :title="countryName(v.country) || v.country"></span>
+                    <template v-else>—</template>
+                  </td>
+                  <td class="ua" :title="v.uaRaw">{{ v.ua }}</td>
+                  <td>{{ v.utm }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p v-else class="empty">no visits recorded yet</p>
+        </section>
+
+        <section>
+          <h2>Crawlers</h2>
+          <div v-if="topCrawlerUas.length" class="crawler-top-uas">
+            <p><strong>top UAs:</strong> {{ formatCounts(topCrawlerUas) }}</p>
+          </div>
+          <div v-if="crawlerRows.length" class="visit-table-wrap">
+            <table class="visit-table">
+              <thead>
+                <tr>
+                  <th>when</th>
+                  <th>entry</th>
+                  <th>ip</th>
+                  <th>ua</th>
+                  <th>referer</th>
+                  <th>query</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(c, i) in crawlerRows" :key="i">
+                  <td class="when">{{ c.when }}</td>
+                  <td>{{ c.entry }}</td>
+                  <td>
+                    <span class="clickable-ip"
+                          :title="`Click to copy full IP: ${c.ip}`"
+                          @click="copyIp(c.ip)">{{ c.ipDisplay }}</span>
+                  </td>
+                  <td class="ua" :title="c.uaRaw">{{ c.ua }}</td>
+                  <td>{{ c.referer }}</td>
+                  <td>{{ c.query }}</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p v-else class="empty">no crawler hits recorded yet</p>
+        </section>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.analytics-view {
+  min-height: 100vh;
+  background: var(--bg, Canvas);
+  color: var(--text, CanvasText);
+}
+
+.analytics-panel {
+  margin: 0 auto;
+  width: min(60rem, 96vw);
+  padding: 1.5rem 2rem 4rem;
+}
+
+.analytics-panel header {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.analytics-panel h1 {
+  margin: 0;
+  font-size: 1.4rem;
+}
+
+.ranges {
+  display: flex;
+  gap: 0.25rem;
+  margin-left: auto;
+}
+
+.ranges button {
+  padding: 0.2rem 0.7rem;
+  font: inherit;
+  font-size: 0.85rem;
+  color: var(--muted);
+  background: none;
+  border: 1px solid var(--line);
+  border-radius: 1rem;
+  cursor: pointer;
+}
+
+.ranges button:hover { color: var(--text); }
+
+.ranges button.active {
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+.close {
+  padding: 0 0.3rem;
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 1.2rem;
+  cursor: pointer;
+}
+.close:hover { color: var(--text); }
+
+.analytics-panel h2 {
+  margin: 0 0 0.6rem;
+  font-size: 1rem;
+  color: var(--muted);
+}
+
+.analytics-panel section {
+  margin-top: 1.8rem;
+}
+
+.totals {
+  display: flex;
+  gap: 2rem;
+  font-size: 1.1rem;
+}
+.totals strong { font-size: 1.5rem; }
+
+.visit-table-wrap {
+  overflow-x: auto;
+}
+
+.visit-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: monospace;
+  font-size: 0.82rem;
+  line-height: 1.3;
+}
+
+.visit-table th,
+.visit-table td {
+  padding: 0.25rem 0.5rem;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+.visit-table th {
+  color: var(--muted);
+  font-weight: normal;
+  text-transform: lowercase;
+  position: sticky;
+  top: 0;
+  background: var(--bg, Canvas);
+}
+
+.visit-table .when {
+  white-space: nowrap;
+  color: var(--muted);
+}
+
+.visit-table .trail {
+  max-width: 20rem;
+  overflow-wrap: break-word;
+}
+
+.visit-table .trail a {
+  color: var(--text);
+  text-decoration: none;
+}
+
+.visit-table .trail a:hover { color: var(--accent); }
+
+.visit-table .trail a + a {
+  margin-left: 0.5rem;
+}
+
+.visit-table .clickable-ip {
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+.visit-table .clickable-ip:hover {
+  color: var(--accent);
+}
+
+.visit-table .ua {
+  max-width: 18rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.visit-table .country .flag {
+  display: inline-flex;
+  width: 18px;
+  height: 12px;
+  border-radius: 2px;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
+}
+
+.visit-table .country .flag :deep(svg) {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.crawler-top-uas {
+  font-size: 0.9rem;
+  margin-bottom: 0.6rem;
+}
+
+.crawler-top-uas strong {
+  color: var(--muted);
+}
+
+.empty, .loading, .error { color: var(--muted); }
+.error { color: var(--error, #c00); }
+</style>

frontend/src/SiteEditor.vue

@@ -561,7 +561,7 @@ onUnmounted(() => {
       </div>
     </section>
 
-    <section class="block" @paste="onBrandPaste">
+    <section class="block grow" @paste="onBrandPaste">
       <div class="block-head">
         <span class="field-label">brand code (replaces the brand link)</span>
         <button
@@ -581,7 +581,7 @@ onUnmounted(() => {
       <div ref="brandEl" class="brand-cm" />
     </section>
 
-    <section class="block">
+    <section class="block grow">
       <div class="block-head">
         <span class="field-label">custom CSS (applies to every page, on top of the theme)</span>
       </div>
@@ -595,6 +595,7 @@ onUnmounted(() => {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
+  background: var(--surface);
 }
 
 .block {
@@ -606,6 +607,13 @@ onUnmounted(() => {
   background: var(--surface);
 }
 
+/* Editor blocks (brand HTML, custom CSS) share the leftover panel height
+   equally; their CodeMirror windows fill the block and scroll internally. */
+.block.grow {
+  flex: 1;
+  min-height: 7rem;
+}
+
 .block-head {
   display: flex;
   align-items: center;
@@ -775,42 +783,29 @@ onUnmounted(() => {
   border-color: var(--accent);
 }
 
-/* Small CodeMirror window for the custom brand HTML; scrolls internally. */
+/* CodeMirror windows for the brand HTML and custom CSS: fill the growing
-.brand-cm {
+   block, scroll internally. */
-  border: 1px solid var(--line);
+.brand-cm,
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.brand-cm :deep(.cm-editor) {
-  max-height: 7rem;
-  font-size: 0.85rem;
-}
-
-.brand-cm :deep(.cm-scroller) {
-  overflow: auto;
-}
-
-.brand-cm :deep(.cm-gutters) {
-  display: none;
-}
-
-/* CodeMirror window for site-wide custom CSS. */
 .css-cm {
+  flex: 1;
+  min-height: 0;
   border: 1px solid var(--line);
   border-radius: 4px;
   overflow: hidden;
 }
 
+.brand-cm :deep(.cm-editor),
 .css-cm :deep(.cm-editor) {
-  max-height: 12rem;
+  height: 100%;
   font-size: 0.85rem;
 }
 
+.brand-cm :deep(.cm-scroller),
 .css-cm :deep(.cm-scroller) {
   overflow: auto;
 }
 
+.brand-cm :deep(.cm-gutters),
 .css-cm :deep(.cm-gutters) {
   display: none;
 }

frontend/src/StructureEditor.vue

@@ -228,23 +228,7 @@ async function commitSlug(node, ev) {
   }
 }
 
-// Two-step delete (no dialogs): the first click arms the row's button for
+// Deletion is immediate, no confirmation.
-// a few seconds, the second actually deletes.
-const arming = ref(null)
-let armTimer = null
-
-function armRemove(node) {
-  if (arming.value === node.path) {
-    clearTimeout(armTimer)
-    arming.value = null
-    removePage(node)
-  } else {
-    arming.value = node.path
-    clearTimeout(armTimer)
-    armTimer = setTimeout(() => { arming.value = null }, 3000)
-  }
-}
-
 async function removePage(node) {
   const res = await fetch(`/_api/pages/${node.path}`, { method: 'DELETE' })
   if (res.ok) {
@@ -267,8 +251,7 @@ async function removePage(node) {
 provide('structureHandlers', {
   current: () => path.value,
   open: navigate,
-  arming: () => arming.value,
+  removePage,
-  armRemove,
   reorder: onReorder,
   titleInput: onTitleInput,
   commitSlug,
@@ -284,7 +267,6 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  clearTimeout(armTimer)
   for (const t of Object.values(timers)) clearTimeout(t)
   removeEventListener('pagerite:editor-shown', onEditorShown)
 })

frontend/src/StructureTree.vue

@@ -144,12 +144,11 @@ function onEnd() {
                 v-if="element.has_content || !element.children.length"
                 type="button"
                 class="act del"
-                :class="{ armed: handlers.arming() === element.path }"
                 :title="element.children.length
                   ? 'delete the landing page (the category keeps its subpages)'
                   : 'delete page'"
-                @click="handlers.armRemove(element)"
+                @click="handlers.removePage(element)"
-              >{{ handlers.arming() === element.path ? 'delete?' : '✕' }}</button>
+              >✕</button>
             </span>
           </template>
         </div>
@@ -300,12 +299,6 @@ body.tree-dragging .treelist {
   white-space: nowrap;
 }
 
-/* Two-step delete: the first click arms the button, the second deletes. */
-.act.armed {
-  color: #e06c75;
-  font-weight: 600;
-}
-
 .del:hover {
   color: #e06c75;
 }

frontend/src/TransitionGraph.vue

@@ -0,0 +1,179 @@
+<script setup>
+/**
+ * Radial transition map filtered to the selected time range.
+ *
+ * Transitions are stored per 5-minute bucket (from -> to -> bucket ->
+ * count), so the graph sums the buckets falling inside the selected
+ * range, exactly like the charts and per-page views do.
+ */
+import { computed, onBeforeUnmount, shallowRef, watch } from 'vue'
+import { rangeWindow } from './analytics/time.js'
+import {
+  TNODE_R,
+  BEAD_R,
+  BEAD_SPEED,
+  buildTransitionGraph,
+  filterTransitionsByRange,
+  filterViewsByRange,
+} from './analytics/transitions.js'
+
+const props = defineProps({
+  data: { type: Object, default: null },
+  range: { type: String, required: true },
+  pageTree: { type: Array, default: null },
+})
+
+const window = computed(() => rangeWindow(props.range))
+
+const filteredData = computed(() => {
+  if (!props.data) return null
+  const { t0, t1 } = window.value
+  return {
+    transitions: filterTransitionsByRange(props.data.transitions, t0, t1),
+    views: filterViewsByRange(props.data.views, t0, t1),
+  }
+})
+
+const graph = computed(() =>
+  filteredData.value
+    ? buildTransitionGraph(filteredData.value, props.pageTree)
+    : null,
+)
+
+// Bead animation: every bead is simulated independently in JS. Each flow
+// (one per edge direction) emits a bead every `interval` seconds; beads
+// travel at BEAD_SPEED along the segment and are dropped at the end.
+// There is deliberately no cap on beads in flight.
+const beads = shallowRef([])
+let rafId = 0
+
+const startBeads = (flows) => {
+  cancelAnimationFrame(rafId)
+  beads.value = []
+  if (!flows?.length) return
+  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
+
+  const live = [] // { flow, t0 } — one entry per bead in flight
+  const now = performance.now()
+  const emitters = flows.map((flow) => {
+    const interval = flow.interval * 1000
+    // Pre-fill the traversal with evenly spaced beads (random phase), so
+    // the flow appears already running instead of starting empty.
+    const phase = Math.random() * interval
+    for (let t = now - (flow.len / BEAD_SPEED) * 1000 + phase; t <= now; t += interval) {
+      live.push({ flow, t0: t })
+    }
+    return { flow, interval, next: now + phase }
+  })
+
+  const tick = (t) => {
+    for (const e of emitters) {
+      while (e.next <= t) {
+        live.push({ flow: e.flow, t0: e.next })
+        e.next += e.interval
+      }
+    }
+    const out = []
+    for (let i = live.length - 1; i >= 0; i--) {
+      const b = live[i]
+      const p = ((t - b.t0) / 1000) * BEAD_SPEED / b.flow.len
+      if (p >= 1) {
+        live.splice(i, 1)
+        continue
+      }
+      out.push({
+        x: b.flow.x1 + (b.flow.x2 - b.flow.x1) * p,
+        y: b.flow.y1 + (b.flow.y2 - b.flow.y1) * p,
+      })
+    }
+    beads.value = out
+    rafId = requestAnimationFrame(tick)
+  }
+  rafId = requestAnimationFrame(tick)
+}
+
+watch(() => graph.value?.flows, startBeads, { immediate: true })
+onBeforeUnmount(() => cancelAnimationFrame(rafId))
+</script>
+
+<template>
+  <section v-if="graph">
+    <svg class="tmap" :viewBox="`${graph.bounds.x0} ${graph.bounds.y0} ${graph.bounds.x1 - graph.bounds.x0} ${graph.bounds.y1 - graph.bounds.y0}`"
+         role="img" aria-label="map of transitions between pages">
+      <path v-for="(a, i) in graph.arcs" :key="'a' + i"
+            :d="a.d" class="tarc" />
+      <path v-for="(e, i) in graph.edges" :key="'e' + i"
+            :d="e.d" class="tconn">
+        <title>{{ e.title }}</title>
+      </path>
+      <circle v-for="(b, i) in beads" :key="'b' + i"
+              :cx="b.x" :cy="b.y" :r="BEAD_R" class="tbead" />
+      <g v-for="(x, i) in graph.extNodes" :key="'x' + i">
+        <circle :cx="x.x" :cy="x.y" :r="x.r" class="txnode">
+          <title>{{ x.path }}</title>
+        </circle>
+        <text :x="x.x" :y="x.y + x.r + 11" class="txlabel">{{ x.label }}</text>
+      </g>
+      <g v-for="n in graph.nodes" :key="n.path">
+        <a :href="n.path" :title="n.title">
+          <circle :cx="n.x" :cy="n.y" :r="TNODE_R" class="tnode" />
+          <text :x="n.x" :y="n.y - 2" class="tnodeslug">{{ n.label }}</text>
+          <text :x="n.x" :y="n.y + 12" class="tnodecount">{{ n.views }}</text>
+        </a>
+      </g>
+    </svg>
+  </section>
+</template>
+
+<style scoped>
+/* Transition map: radial graph of internal page-to-page transitions. */
+.tmap {
+  display: block;
+  width: 100%;
+  max-width: 36rem;
+  margin: 0 auto;
+}
+.tmap .tconn {
+  fill: var(--accent);
+  opacity: 0.4; /* uniform, not strength-encoded: width carries that */
+}
+.tmap .tbead {
+  fill: var(--accent);
+  opacity: 0.85;
+  filter: drop-shadow(0 0 2.5px var(--accent));
+}
+.tmap .txnode {
+  fill: var(--bg, Canvas);
+  stroke: var(--muted);
+  stroke-width: 1;
+}
+.tmap .txlabel {
+  fill: var(--muted);
+  font-size: 9px;
+  text-anchor: middle;
+}
+.tmap .tarc {
+  fill: none;
+  stroke: var(--line);
+  stroke-width: 1;
+}
+.tmap .tnode {
+  fill: var(--bg, Canvas);
+  stroke: var(--accent);
+  stroke-width: 1.5;
+}
+.tmap .tnodeslug {
+  fill: var(--text);
+  font-size: 11px;
+  text-anchor: middle;
+}
+.tmap a { cursor: pointer; }
+.tmap a:hover .tnodeslug { fill: var(--accent); }
+.tmap .tnodecount {
+  fill: var(--muted);
+  font-size: 10px;
+  text-anchor: middle;
+}
+
+section { margin-top: 1.8rem; }
+</style>

frontend/src/VisitorCharts.vue

@@ -0,0 +1,189 @@
+<script setup>
+/**
+ * Visitor and page-view smoothed curves for a single shared time range.
+ */
+import { computed } from 'vue'
+import { makeSeries } from './analytics/time.js'
+import { CHART_H, CHART_W, buildChart, fmtY } from './analytics/chart.js'
+
+const props = defineProps({
+  data: { type: Object, default: null },
+  range: { type: String, required: true },
+})
+
+// Views across all pages combined into one raw bucket map.
+const allViews = computed(() => {
+  const all = {}
+  for (const buckets of Object.values(props.data?.views || {})) {
+    for (const [k, c] of Object.entries(buckets)) all[k] = (all[k] || 0) + c
+  }
+  return all
+})
+
+const visitSeries = computed(() => makeSeries(props.data?.site_visits, props.range))
+const viewSeries = computed(() => makeSeries(allViews.value, props.range))
+const unit = computed(() => (props.range === 'week' ? 'h' : 'day'))
+
+const visitChart = computed(() => buildChart(visitSeries.value))
+const viewChart = computed(() => buildChart(viewSeries.value))
+</script>
+
+<template>
+  <section v-for="c in [
+      { ylabel: 'visitors', chart: visitChart, empty: 'no visits recorded yet' },
+      { ylabel: 'views', chart: viewChart, empty: 'no views recorded yet' },
+    ]" :key="c.ylabel">
+    <template v-if="c.chart">
+      <div class="chartwrap">
+        <div class="plot">
+          <div class="plotarea">
+            <span class="yaxis-label">{{ c.ylabel }}/{{ unit }}</span>
+            <svg class="chart" :viewBox="`0 0 ${CHART_W} ${CHART_H}`"
+                 preserveAspectRatio="none" role="img" :aria-label="`${c.ylabel} per ${unit}`">
+              <line v-for="g in c.chart.majors.slice(1)" :key="'j' + g.value"
+                    :x1="0" :x2="CHART_W" :y1="g.y" :y2="g.y" class="major" />
+              <template v-for="t in c.chart.xticks" :key="'t' + t.x">
+                <line v-if="t.line" :x1="t.x" :x2="t.x" :y1="0" :y2="CHART_H"
+                      class="minor vertical" />
+              </template>
+              <template v-for="(s, i) in c.chart.series" :key="i">
+                <path v-if="s.area" :d="s.area" class="area" />
+                <path :d="s.line" class="line" :style="{ opacity: s.opacity }" />
+              </template>
+              <line :x1="0" :x2="CHART_W" :y1="CHART_H - 0.5" :y2="CHART_H - 0.5"
+                    class="axis" />
+            </svg>
+            <span v-for="g in c.chart.majors" :key="g.value" class="ylab"
+                  :style="{ bottom: g.bottom + '%' }">{{ fmtY(g.value) }}</span>
+          </div>
+          <div class="xlabels">
+            <span v-for="t in c.chart.xticks" :key="t.x" class="xlab"
+                  :style="{ left: t.left + '%' }">{{ t.label }}</span>
+          </div>
+        </div>
+      </div>
+      <div v-if="c.chart.series.length > 1" class="legend">
+        <span v-for="(s, i) in c.chart.series" :key="i" :style="{ opacity: s.opacity }">
+          ● {{ s.label }}
+        </span>
+      </div>
+    </template>
+    <p v-else class="empty">{{ c.empty }}</p>
+  </section>
+</template>
+
+<style scoped>
+/* The svg is stretched (preserveAspectRatio none), so all text lives in
+   HTML overlays positioned by the same fractions the geometry uses. */
+.chartwrap {
+  padding-left: 2.2rem; /* y labels */
+}
+
+.plot {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.plotarea {
+  position: relative;
+  height: 8rem;
+}
+
+.xlabels {
+  position: relative;
+  height: 1.2rem;
+}
+
+.chart {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ylab {
+  position: absolute;
+  left: -2.2rem;
+  width: 1.9rem;
+  text-align: right;
+  transform: translateY(50%);
+  font-size: 0.7rem;
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.xlab {
+  position: absolute;
+  top: 0.25rem;
+  transform: translateX(-50%);
+  font-size: 0.7rem;
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.xlabels .xlab:first-child { transform: none; }
+.xlabels .xlab:last-child { transform: translateX(-100%); }
+
+.chart .minor {
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  opacity: 0.35;
+}
+
+.chart .minor.vertical {
+  opacity: 0.25;
+}
+
+.chart .major {
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+  stroke-dasharray: 3 4;
+  opacity: 0.8;
+}
+
+.chart .axis {
+  stroke: var(--line);
+  stroke-width: 1;
+  vector-effect: non-scaling-stroke;
+}
+
+.chart .area {
+  fill: var(--accent);
+  opacity: 0.15;
+}
+
+.chart .line {
+  fill: none;
+  stroke: var(--accent);
+  stroke-width: 2;
+  vector-effect: non-scaling-stroke;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.legend {
+  display: flex;
+  gap: 1.2rem;
+  margin-top: 0.4rem;
+  font-size: 0.75rem;
+  color: var(--muted);
+}
+
+.legend span { color: var(--accent); }
+
+.yaxis-label {
+  position: absolute;
+  top: 50%;
+  left: -2.2rem;
+  font-size: 0.7rem;
+  color: var(--muted);
+  writing-mode: vertical-rl;
+  transform: translateY(-50%) rotate(180deg);
+}
+
+section { margin-top: 1.8rem; }
+
+.empty { color: var(--muted); }
+</style>

frontend/src/analytics-main.js

@@ -0,0 +1,24 @@
+// Analytics page entry: mounts AnalyticsView inside the normal page layout.
+// The backend renders #analytics-app inside #main and links this module for
+// the initial load; pagerite.js also imports it on fetch-navigation to /_a.
+import { createApp } from 'vue'
+import AnalyticsView from './AnalyticsView.vue'
+
+let app = null
+
+export function mount(container) {
+  if (app) return
+  app = createApp(AnalyticsView, {
+    initialRange: new URLSearchParams(location.search).get('range') || 'week',
+  })
+  app.mount(container)
+}
+
+export function unmount() {
+  app?.unmount()
+  app = null
+}
+
+// Auto-mount on a normal (non-fetch) page load.
+const container = document.getElementById('analytics-app')
+if (container) mount(container)

frontend/src/analytics/chart.js

@@ -0,0 +1,333 @@
+/**
+ * Chart geometry, smoothing, and SVG path generation for analytics charts.
+ *
+ * Fixed 720x180 viewBox, stretched to the panel width; values are per-unit
+ * rates (hour on the week view, day on month+).
+ */
+
+import { DAY, HOUR, WEEK, mondayUTC } from './time.js'
+
+export const CHART_W = 720
+export const CHART_H = 180
+export const PAD_TOP = 14 // room above the highest point
+
+/**
+ * Y always starts at 0; the max is a multiple of a 1-2-5 major step with at
+ * most 5 intervals, so labeled ticks are always round and evenly divided.
+ * Values are per-unit rates, so small scales are legitimate (a lone visit
+ * smoothes to well under 1/unit) — the floor is 1, not 10. Minor lines
+ * subdivide each major step in five when that yields integers.
+ */
+export function yScale(maxValue) {
+  let step = 1
+  outer: for (let exp = -3; exp < 8; exp++) {
+    for (const base of [1, 2, 5]) {
+      step = base * 10 ** exp
+      if (Math.ceil(maxValue / step) <= 5) break outer
+    }
+  }
+  let max = Math.ceil(maxValue / step) * step
+  if (max < 1) {
+    max = 1
+    step = 0.5
+  }
+  const minor = step >= 5 && step % 5 === 0 ? step / 5 : null
+  return { max, step, minor }
+}
+
+/**
+ * Edge-aware adaptive Gaussian smoothing. A change-point detector first
+ * finds traffic-level shifts (two-unit totals compared on both sides of
+ * each bucket; strong ratio + significance marks a candidate, and each run
+ * of candidates keeps only its best-scoring bucket as an edge). Each
+ * edge-delimited segment is then smoothed independently: a broad two-unit
+ * pilot estimates the local traffic rate, which ramps the Gaussian sigma
+ * from ~0.4 units (isolated events stay narrow, peaking at ~1 event/unit)
+ * up to 1 unit (busy traffic gets full smoothing), and every bucket spreads
+ * its count with its local sigma, clipped to the segment and renormalized
+ * so total visitor count is preserved exactly. The unit is one hour on the
+ * week view and one day on the month+ views, so the smoothing time scale
+ * follows the range (month+ sigmas are 24x the hourly ones). The raw series
+ * is drawn faintly behind the curve for reference. Operates on raw counts.
+ */
+export function smooth(counts, binMinutes, unitMinutes, {
+  minSigmaMinutes = unitMinutes / Math.sqrt(2 * Math.PI),
+  maxSigmaMinutes = unitMinutes,
+  pilotSigmaMinutes = 2 * unitMinutes,
+  detectorWindowMinutes = 2 * unitMinutes,
+  // Count thresholds are defined per hour and scale with the unit, so
+  // "low traffic" means the same thing on hourly and daily views
+  // (5-20 events/hour = 120-480/day on the month+ ranges).
+  highTrafficEvents = 10 * unitMinutes / 60,
+  minRatio = 2.5,
+  minSignificance = 4,
+  sigmaRampStart = 5 * unitMinutes / 60,
+  sigmaRampEnd = 20 * unitMinutes / 60,
+} = {}) {
+  const n = counts.length
+  if (!n) return counts
+  const detectorWindowBins = Math.max(1, Math.round(detectorWindowMinutes / binMinutes))
+
+  const cumsum = new Float64Array(n + 1)
+  for (let i = 0; i < n; i++) cumsum[i + 1] = cumsum[i] + counts[i]
+
+  // Detect abrupt regime changes from aggregated traffic on both sides.
+  // Individual bins are deliberately ignored because even high traffic
+  // produces many 0-1 count bins at five-minute resolution.
+  const score = new Float64Array(n)
+  const candidate = new Uint8Array(n)
+  for (let i = detectorWindowBins; i < n - detectorWindowBins; i++) {
+    const left = cumsum[i] - cumsum[i - detectorWindowBins]
+    const right = cumsum[i + detectorWindowBins] - cumsum[i]
+    const high = Math.max(left, right)
+    const low = Math.min(left, right)
+    if (high < highTrafficEvents) continue
+    const ratio = (high + 1) / (low + 1)
+    const significance = (high - low) / Math.sqrt(high + low + 1)
+    if (ratio >= minRatio && significance >= minSignificance) {
+      candidate[i] = 1
+      score[i] = significance * Math.log(ratio)
+    }
+  }
+
+  // Collapse each continuous detector region to its strongest boundary.
+  const edges = []
+  for (let i = 0; i < n;) {
+    if (!candidate[i]) { i++; continue }
+    let j = i + 1
+    while (j < n && candidate[j]) j++
+    let best = i
+    for (let k = i + 1; k < j; k++) {
+      if (score[k] > score[best]) best = k
+    }
+    edges.push(best)
+    i = j
+  }
+
+  const reflectIndex = (i, length) => {
+    while (i < 0 || i >= length) {
+      i = i < 0 ? -i - 1 : 2 * length - i - 1
+    }
+    return i
+  }
+
+  const gaussianFilterReflect = (values, sigmaBins) => {
+    const length = values.length
+    const radius = Math.ceil(4 * sigmaBins)
+    const kernel = new Float64Array(radius * 2 + 1)
+    let sum = 0
+    for (let k = -radius; k <= radius; k++) {
+      const w = Math.exp(-0.5 * (k / sigmaBins) ** 2)
+      kernel[k + radius] = w
+      sum += w
+    }
+    for (let i = 0; i < kernel.length; i++) kernel[i] /= sum
+    const out = new Float64Array(length)
+    for (let i = 0; i < length; i++) {
+      let value = 0
+      for (let k = -radius; k <= radius; k++) {
+        value += values[reflectIndex(i + k, length)] * kernel[k + radius]
+      }
+      out[i] = value
+    }
+    return out
+  }
+
+  // Process each discontinuity-delimited regime independently so neither
+  // the pilot nor the final Gaussian can see through a detected boundary.
+  const bounds = [0, ...edges, n]
+  const smoothed = new Float64Array(n)
+  for (let b = 0; b < bounds.length - 1; b++) {
+    const lo = bounds[b]
+    const length = bounds[b + 1] - lo
+    const segment = counts.slice(lo, lo + length)
+
+    // Broad pilot estimates only the generic local traffic level used for
+    // choosing sigma; it is not the final displayed curve.
+    const pilot = gaussianFilterReflect(segment, pilotSigmaMinutes / binMinutes)
+
+    // Keep isolated/sparse traffic at the minimum bandwidth through
+    // sigmaRampStart events, then ramp toward maxSigmaMinutes (thresholds
+    // are per-hour rates scaled to the unit: low traffic is low traffic
+    // on every range).
+    const sigmaMinutes = new Float64Array(length)
+    for (let i = 0; i < length; i++) {
+      const ratePerUnit = pilot[i] * unitMinutes / binMinutes
+      let mix = (ratePerUnit - sigmaRampStart) / (sigmaRampEnd - sigmaRampStart)
+      mix = Math.sqrt(Math.max(0, Math.min(1, mix)))
+      sigmaMinutes[i] = minSigmaMinutes + mix * (maxSigmaMinutes - minSigmaMinutes)
+    }
+
+    // Each input bin spreads its own count using its local sigma. The
+    // per-bin kernel is renormalized after clipping to the segment,
+    // preserving total visitor count apart from floating-point error.
+    for (let j = 0; j < length; j++) {
+      const count = segment[j]
+      if (!count) continue
+      const sigmaBins = sigmaMinutes[j] / binMinutes
+      const radius = Math.ceil(4 * sigmaBins)
+      const start = Math.max(0, j - radius)
+      const end = Math.min(length, j + radius + 1)
+      let weightSum = 0
+      for (let i = start; i < end; i++) {
+        const d = i - j
+        weightSum += Math.exp(-0.5 * (d / sigmaBins) ** 2)
+      }
+      for (let i = start; i < end; i++) {
+        const d = i - j
+        smoothed[lo + i] += count * Math.exp(-0.5 * (d / sigmaBins) ** 2) / weightSum
+      }
+    }
+  }
+  return [...smoothed]
+}
+
+/**
+ * Catmull-Rom spline through the (smoothed) points, control points clamped
+ * to the plot area so the curve can never dip below zero or above the max.
+ */
+export function spline(pts) {
+  if (pts.length < 3) {
+    return `M${pts.map((p) => `${p.x},${p.y}`).join('L')}`
+  }
+  const clampY = (y) => Math.min(CHART_H, Math.max(PAD_TOP, y))
+  let d = `M${pts[0].x},${pts[0].y}`
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] || pts[i]
+    const p1 = pts[i]
+    const p2 = pts[i + 1]
+    const p3 = pts[i + 2] || p2
+    const c1y = clampY(p1.y + (p2.y - p0.y) / 6)
+    const c2y = clampY(p2.y - (p3.y - p1.y) / 6)
+    d += `C${p1.x + (p2.x - p0.x) / 6},${c1y} `
+       + `${p2.x - (p3.x - p1.x) / 6},${c2y} ${p2.x},${p2.y}`
+  }
+  return d
+}
+
+/** Build a full chart model from a series descriptor produced by time.js. */
+export function buildChart(input) {
+  if (!input || !input.series.length) return null
+  const { series, t0, t1, rate, binMinutes, unitMinutes } = input
+  // Values are per-unit rates (hour on the week view, day on month+); the
+  // y max is derived from the *smoothed* curves so random single-bucket
+  // spikes don't blow up the scale. Smoothing works on raw counts (its edge
+  // detector thresholds are count-based), the result is scaled back to rates.
+  const smoothed = series.map((s) =>
+    smooth(s.points.map((p) => p.count), binMinutes, unitMinutes).map((v) => v * rate))
+  // Scale from the current/primary series only; older overlay weeks are drawn
+  // with the same scale and allowed to overflow if they are busier.
+  const highest = Math.max(0, ...smoothed[0])
+  const { max, step, minor } = yScale(highest)
+  const x = (t) => ((t - t0) / (t1 - t0)) * CHART_W
+  const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
+  const drawn = series.map((s, si) => {
+    const pts = s.points.map((p, i) => ({ x: x(p.t), y: y(smoothed[si][i]) }))
+    const line = spline(pts)
+    const first = pts[0]
+    const last = pts.at(-1)
+    return {
+      ...s,
+      line,
+      area: s.area ? `${line}L${last.x},${CHART_H}L${first.x},${CHART_H}Z` : null,
+    }
+  })
+  // Major (labeled) and minor (hairline) y grid ticks.
+  const majors = []
+  const minors = []
+  const nMajor = Math.round(max / step)
+  for (let k = 0; k <= nMajor; k++) {
+    const v = k * step
+    majors.push({ value: v, y: y(v), bottom: (1 - PAD_TOP / CHART_H) * (v / max) * 100 })
+  }
+  if (minor) {
+    for (let v = minor; v < max; v += minor) {
+      if (v % step !== 0) minors.push({ y: y(v) })
+    }
+  }
+  // X ticks. Week view: weekday labels centered at midday UTC, no vertical
+  // lines (day boundaries would be misleading in the viewer's timezone).
+  // Month view: likewise lineless, day numbers at noon UTC with the month
+  // name substituted for the 1st (marking the month change). Longer
+  // ranges: boundary lines at Mondays / months / years.
+  const isWeek = t1 - t0 === WEEK
+  const isMonth = !isWeek && t1 - t0 <= 31 * DAY
+  const xticks = isWeek
+    ? Array.from({ length: 7 }, (_, d) => {
+        const t = t0 + d * DAY + 12 * HOUR
+        return {
+          x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
+          label: new Date(t).toLocaleDateString(undefined, {
+            weekday: 'short', timeZone: 'UTC',
+          }),
+          line: false,
+        }
+      })
+    : isMonth
+      ? Array.from(
+          { length: Math.floor((t1 - Math.ceil(t0 / DAY) * DAY) / DAY) },
+          (_, d) => {
+            const day = Math.ceil(t0 / DAY) * DAY + d * DAY
+            const date = new Date(day)
+            const t = day + 12 * HOUR
+            return {
+              x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
+              label: date.getUTCDate() === 1
+                ? date.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
+                : String(date.getUTCDate()),
+              line: false,
+            }
+          },
+        )
+      : xticksFor(t0, t1).map((t) => ({
+          x: x(t), left: ((t - t0) / (t1 - t0)) * 100,
+          label: fmtTick(t, t1 - t0), line: true,
+        }))
+  return { max, majors, minors, series: drawn, xticks }
+}
+
+/** X ticks for year/all: Monday boundaries up to a quarter, UTC month
+ *  boundaries up to a few years, then years. */
+export function xticksFor(t0, t1) {
+  const span = t1 - t0
+  const ticks = []
+  if (span <= 100 * DAY) {
+    for (let t = mondayUTC(t0); t <= t1; t += WEEK) {
+      if (t >= t0) ticks.push(t)
+    }
+    return ticks
+  }
+  if (span <= 4 * 365 * DAY) {
+    const d = new Date(t0)
+    let t = Date.UTC(d.getUTCFullYear(), d.getUTCMonth() + 1, 1)
+    for (; t <= t1; ) {
+      ticks.push(t)
+      const m = new Date(t)
+      t = Date.UTC(m.getUTCFullYear(), m.getUTCMonth() + 1, 1)
+    }
+    return ticks
+  }
+  const d = new Date(t0)
+  for (let yr = d.getUTCFullYear() + 1; Date.UTC(yr, 0, 1) <= t1; yr++) {
+    ticks.push(Date.UTC(yr, 0, 1))
+  }
+  return ticks
+}
+
+export function fmtTick(t, span) {
+  const d = new Date(t)
+  if (span <= 100 * DAY) {
+    return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' })
+  }
+  if (span <= 4 * 365 * DAY) {
+    return d.getUTCMonth() === 0
+      ? d.toLocaleDateString(undefined, { year: 'numeric', timeZone: 'UTC' })
+      : d.toLocaleDateString(undefined, { month: 'short', timeZone: 'UTC' })
+  }
+  return d.toLocaleDateString(undefined, { year: 'numeric', timeZone: 'UTC' })
+}
+
+/** Y labels: integers when the step allows, one decimal for fractional steps. */
+export function fmtY(v) {
+  return Number.isInteger(v) ? String(v) : v.toFixed(1)
+}

frontend/src/analytics/format.js

@@ -0,0 +1,186 @@
+/**
+ * Formatters and aggregators for summary sections: totals and the recent
+ * visit trail.
+ */
+
+/**
+ * IPv4 unchanged, IPv6 returns the /64 network prefix in compact form.
+ * Falls back to the original value when parsing fails.
+ */
+export const hostIP = (ip) => {
+  try {
+    if (!ip || !ip.includes(':')) return ip
+    const strip = (s) => s.replace(/^\[|\]$/g, '')
+    const norm = strip(new URL(`http://[${ip}]/`).hostname)
+    const [l, r] = norm.split('::').map((s) => (s ? s.split(':') : []))
+    const full = r
+      ? [...l, ...Array(8 - l.length - r.length).fill('0'), ...r]
+      : l
+    return strip(
+      new URL(`http://[${full.slice(0, 4).join(':')}::]/`).hostname,
+    ).replace(/::$/, '')
+  } catch (e) {
+    console.error('hostIP processing failed for:', ip, e)
+    return ip
+  }
+}
+
+/** Copy the full IP to the clipboard, ignoring failures. */
+export async function copyIp(ip) {
+  if (!ip) return
+  try {
+    await navigator.clipboard.writeText(ip)
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Total page views across every page and every bucket. */
+export function calcTotalViews(views) {
+  let n = 0
+  for (const buckets of Object.values(views || {})) {
+    for (const c of Object.values(buckets)) n += c
+  }
+  return n
+}
+
+/** Build a path -> page title lookup from the site tree. */
+function buildTitleMap(pageTree) {
+  const titles = new Map()
+  const walk = (items) => {
+    for (const item of items || []) {
+      titles.set(`/${item.path}`, item.title)
+      walk(item.children)
+    }
+  }
+  walk(pageTree)
+  return titles
+}
+
+/** Last path segment for display; front page becomes a house icon. */
+function slugOf(path) {
+  return path === '/' ? '🏠' : path.split('/').pop()
+}
+
+/**
+ * Format recent visits for display, newest first. Each step is a linked slug
+ * pointing to its article; external referers/origins and direct entries are
+ * omitted. The link title shows the article heading when known.
+ */
+export function formatRecentVisits(visits, pageTree, limit = 50) {
+  const titles = buildTitleMap(pageTree)
+  return [...visits]
+    .reverse()
+    .map((v) => ({
+      when: new Date(v.start).toLocaleString(),
+      steps: [v.entry, ...(v.trail || [])]
+        .filter((p) => p?.startsWith('/'))
+        .map((p) => ({
+          path: p,
+          slug: slugOf(p),
+          title: titles.get(p) || '',
+        })),
+    }))
+    .filter((v) => v.steps.length)
+    .slice(0, limit)
+}
+
+/**
+ * Count distinct values of a visit field, sorted most-common first.
+ * Returns an array of [value, count] pairs.
+ */
+export function countByField(visits, field) {
+  const counts = {}
+  for (const v of visits || []) {
+    const value = v[field]
+    if (!value) continue
+    counts[value] = (counts[value] || 0) + 1
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])
+}
+
+/**
+ * Count UTM parameter occurrences across visits.  Each distinct
+ * ``parameter: value`` pair is counted separately.  Returns [pair, count].
+ */
+export function countUtmTags(visits) {
+  const counts = {}
+  for (const v of visits || []) {
+    for (const [key, value] of Object.entries(v.utm || {})) {
+      const label = `${key}: ${value}`
+      counts[label] = (counts[label] || 0) + 1
+    }
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])
+}
+
+/** Format a list of [value, count] pairs for inline display. */
+export function formatCounts(entries) {
+  return entries.map(([value, count]) => `${value} (${count})`).join(', ')
+}
+
+/**
+ * Count distinct User-Agent strings among crawler hits, most common first.
+ * Returns an array of [ua, count] pairs.
+ */
+export function countCrawlerUas(crawlers) {
+  const counts = {}
+  for (const c of crawlers || []) {
+    const value = c.ua_pretty || c.ua || '(no UA)'
+    counts[value] = (counts[value] || 0) + 1
+  }
+  return Object.entries(counts).sort((a, b) => b[1] - a[1])
+}
+
+/**
+ * Format raw crawler hit records as rows for a technical table.  Missing
+ * values become "—".
+ */
+export function formatCrawlerRows(crawlers) {
+  const dash = (s) => (s || '—')
+  return [...(crawlers || [])].reverse().map((c) => ({
+    when: new Date(c.start).toLocaleString(),
+    entry: dash(c.entry),
+    ip: c.ip || '',
+    ipDisplay: c.host || hostIP(c.ip) || c.ip || '—',
+    ua: c.ua_pretty || c.ua || '—',
+    uaRaw: c.ua || '',
+    referer: dash(c.referer),
+    query: dash(c.query),
+  }))
+}
+
+/**
+ * Format raw visit records as rows for a technical table.  Returns objects
+ * with display strings; missing values become "—".  ``trail`` joins page
+ * titles (when known) with " -> ".
+ */
+export function formatVisitRows(visits, pageTree) {
+  const titles = buildTitleMap(pageTree)
+  return [...(visits || [])].reverse().map((v) => {
+    const trail = [v.entry, ...(v.trail || [])]
+      .filter((p) => p?.startsWith('/'))
+      .map((p) => ({
+        path: p,
+        slug: slugOf(p),
+        title: titles.get(p) || '',
+      }))
+    const utm = Object.entries(v.utm || {})
+      .map(([k, value]) => `${k}=${value}`)
+      .join(', ')
+    const dash = (s) => (s || '—')
+    return {
+      when: new Date(v.start).toLocaleString(),
+      trail,
+      referer: dash(v.referer),
+      ip: v.ip || '',
+      ipDisplay: v.host || hostIP(v.ip) || v.ip || '—',
+      host: dash(v.host),
+      lang: dash(v.lang),
+      country: dash(v.country),
+      ua: v.ua_pretty || v.ua || '—',
+      uaRaw: v.ua || '',
+      utm: utm || '—',
+    }
+  })
+}

frontend/src/analytics/time.js

@@ -0,0 +1,141 @@
+/**
+ * Time ranges, week alignment and re-bucketing for analytics charts.
+ *
+ * Raw data comes as sparse 5-minute buckets; the range picks the x window
+ * and a coarser bucket size to keep point counts sane. The week range is
+ * aligned to Monday 00:00 UTC and overlays previous weeks' curves (fading
+ * with age), so weekly patterns compare directly.
+ */
+
+export const MIN5 = 5 * 60e3
+export const HOUR = 3600e3
+export const DAY = 86400e3
+export const WEEK = 7 * DAY
+
+export const RANGES = {
+  week: { label: 'week' },
+  month: { label: 'month', span: 30 * DAY, bucket: 6 * HOUR },
+  year: { label: 'year', span: 365 * DAY, bucket: DAY },
+  all: { label: 'all', span: null, bucket: DAY },
+}
+
+/** Monday 00:00 UTC of the week containing t (epoch day 0 was a Thursday). */
+export function mondayUTC(t) {
+  const d = Math.floor(t / DAY)
+  return (d - ((d + 3) % 7)) * DAY
+}
+
+/** Parse sparse timestamp buckets into a { epochMs: count } map. */
+export function rawTimes(buckets) {
+  const raw = {}
+  // Key by parsed timestamp: Python writes "+00:00", JS ISO uses "Z".
+  for (const [k, c] of Object.entries(buckets || {})) raw[Date.parse(k)] = c
+  return raw
+}
+
+/** Sum counts from raw 5-minute buckets between t0 (inclusive) and t1 (exclusive). */
+export function sumRange(raw, t0, t1) {
+  let n = 0
+  for (let s = t0; s < t1; s += MIN5) n += raw[s] || 0
+  return n
+}
+
+/**
+ * One series per overlaid week: [this week, 1 week ago, ...], at native
+ * 5-minute resolution, up to 8 weeks back (and only weeks that overlap the
+ * recorded data at all). The current week is truncated at the current bucket
+ * — no fake zeroes drawn for the future. Counts are rates per hour
+ * (bucket count * 12): a lone visit in a 5-minute bucket reads as "12/h".
+ * The coarser ranges use per-day rates instead (unitMinutes = 24*60).
+ */
+export function weeklySeries(buckets) {
+  const raw = rawTimes(buckets)
+  const times = Object.keys(raw).map(Number)
+  if (!times.length) return null
+  const now = Date.now()
+  const thisMonday = mondayUTC(now)
+  const oldest = Math.min(...times)
+  // Weeks back as far as the data reaches: difference in Monday indices.
+  const available = (thisMonday - mondayUTC(oldest)) / WEEK + 1
+  const count = Math.min(available, 8)
+  const out = []
+  for (let back = 0; back < count; back++) {
+    const start = thisMonday - back * WEEK
+    const end = back === 0
+      ? Math.min(start + WEEK, Math.floor(now / MIN5) * MIN5 + MIN5)
+      : start + WEEK
+    const points = []
+    for (let t = start; t < end; t += MIN5) {
+      points.push({ t, count: raw[t] || 0 })
+    }
+    out.push({
+      points,
+      label: back === 0 ? 'this week' : `${back}w ago`,
+      opacity: Math.max(0.15, 1 - back * 0.25),
+      area: back === 0,
+    })
+  }
+  return {
+    series: out,
+    t0: thisMonday,
+    t1: thisMonday + WEEK,
+    rate: HOUR / MIN5,
+    binMinutes: 5,
+    unitMinutes: 60,
+    unit: 'hour',
+  }
+}
+
+/**
+ * Rolling window for the non-week ranges (x max = now), counts converted
+ * to per-day rates (the unit the month+ charts are read in).
+ */
+export function rollingSeries(buckets, rangeKey) {
+  const raw = rawTimes(buckets)
+  const times = Object.keys(raw).map(Number)
+  if (!times.length) return null
+  const { span, bucket } = RANGES[rangeKey]
+  const t1 = Math.floor(Date.now() / bucket) * bucket + bucket
+  const t0 = span != null
+    ? t1 - span
+    : Math.floor(Math.min(...times) / bucket) * bucket
+  const points = []
+  for (let t = t0; t < t1; t += bucket) {
+    points.push({ t, count: sumRange(raw, t, t + bucket) })
+  }
+  return {
+    series: [{ points, label: '', opacity: 1, area: true }],
+    t0,
+    t1,
+    rate: DAY / bucket,
+    binMinutes: bucket / 60e3,
+    unitMinutes: 24 * 60,
+    unit: 'day',
+  }
+}
+
+/** Dispatch to weekly or rolling series based on the selected range. */
+export function makeSeries(buckets, rangeKey) {
+  return rangeKey === 'week'
+    ? weeklySeries(buckets)
+    : rollingSeries(buckets, rangeKey)
+}
+
+/**
+ * Absolute UTC time window for a given range key. Used to filter visits,
+ * transitions and views to the same period the charts are showing.
+ * Returns { t0, t1 } where null means unbounded.
+ */
+export function rangeWindow(rangeKey) {
+  const now = Date.now()
+  if (rangeKey === 'week') {
+    const start = mondayUTC(now)
+    return { t0: start, t1: start + WEEK }
+  }
+  if (rangeKey === 'all') {
+    return { t0: null, t1: null }
+  }
+  const { span, bucket } = RANGES[rangeKey]
+  const t1 = Math.floor(now / bucket) * bucket + bucket
+  return { t0: t1 - span, t1 }
+}

frontend/src/analytics/transitions.js

@@ -0,0 +1,616 @@
+/**
+ * Radial transition map and helpers.
+ *
+ * Radial site map: the front page at the center, each slug level on its own
+ * ring. All pages of the site are shown (from /_api/pages), plus any extra
+ * paths seen in transitions (deleted pages); siblings run clockwise in
+ * navigation order, starting at the top. Internal path -> path transitions
+ * join opposite directions into straight connections (middle width = total
+ * count, wrapping the node circles at both ends). Connection width grows
+ * logarithmically with the count (a single count renders as a ~1 px
+ * line, uncapped growth); connections carrying less than 1% of the total
+ * traffic are pruned, which naturally keeps the graph under ~100
+ * connections. Animated beads flow along every edge in each direction,
+ * emitted at time intervals inversely proportional (linear) to the
+ * directional count.
+ * External referers appear as nodes in a row above the map, external exits
+ * as small nodes just outside their source page, angled away from the
+ * center. Self-loops (reload pings) are skipped.
+ */
+
+export const TNODE_R = 34 // node circles hold the slug and the view count
+export const EXT_R = 16 // external referer/exit nodes
+
+// Edge width (half-width of the thin middle) grows logarithmically with
+// the count, anchored so a single recorded transition renders as a ~1 px
+// line. There is no cap — growth is slow enough that even very hot
+// connections stay reasonable. Connections carrying less than
+// PRUNE_FRACTION of the total traffic are not drawn at all (this also
+// keeps the number of drawn connections under ~100).
+const WMID_MIN = 0.5
+const WIDTH_GROWTH = 1.5
+const PRUNE_FRACTION = 0.01
+
+// Beads: each edge direction emits beads at count * BEAD_RATE beads per
+// second (linear in the count). The component simulates every bead
+// independently in JS at BEAD_SPEED along the edge, with no limit on
+// beads in flight.
+export const BEAD_SPEED = 180 // svg units per second
+export const BEAD_R = 2.2
+const BEAD_RATE = 0.12 // beads per second per recorded transition
+const FLOW_OFFSET = 3 // lane offset to the right of the travel direction
+
+const MAX_EXT_IN = 8 // referer nodes in the top row
+const MAX_EXT_OUT = 12 // exit nodes, at most MAX_EXT_OUT_PER_PAGE per page
+const MAX_EXT_OUT_PER_PAGE = 3
+
+/** Flatten the site tree into navigation order via DFS. */
+function buildNavigationOrder(pageTree) {
+  const order = new Map()
+  const walk = (items) => {
+    for (const item of items || []) {
+      const p = `/${item.path}`
+      if (!order.has(p)) order.set(p, order.size)
+      walk(item.children)
+    }
+  }
+  walk(pageTree)
+  return order
+}
+
+/** Map page paths to their article titles from the site tree. */
+function buildTitleMap(pageTree) {
+  const titles = new Map()
+  const walk = (items) => {
+    for (const item of items || []) {
+      titles.set(`/${item.path}`, item.title)
+      walk(item.children)
+    }
+  }
+  walk(pageTree)
+  return titles
+}
+
+/** Extract internal page-to-page transitions, excluding self-loops. */
+function collectInternalTransitions(transitions) {
+  const internal = []
+  for (const [fr, tos] of Object.entries(transitions || {})) {
+    if (!fr.startsWith('/')) continue
+    for (const [to, count] of Object.entries(tos)) {
+      if (to.startsWith('/') && to !== fr) internal.push({ fr, to, count })
+    }
+  }
+  return internal
+}
+
+/** Short display label for an external origin (protocol stripped). */
+function extLabel(ext) {
+  const s = ext.replace(/^https?:\/\//, '')
+  return s.length > 18 ? `${s.slice(0, 17)}…` : s
+}
+
+/**
+ * Collect external transitions: referer origin -> entry page (incoming) and
+ * page -> exit origin (outgoing). Aggregated per (origin, page) pair, with
+ * separate directional counts. "(direct)" entries are not links and skipped.
+ */
+function collectExternalPairs(transitions) {
+  const pairs = new Map() // `${ext} ${page}` -> {ext, page, in, out}
+  for (const [fr, tos] of Object.entries(transitions || {})) {
+    for (const [to, count] of Object.entries(tos)) {
+      const frExt = !fr.startsWith('/')
+      const toExt = !to.startsWith('/')
+      if (frExt === toExt) continue // internal-internal or ext-ext
+      const ext = frExt ? fr : to
+      const page = frExt ? to : fr
+      if (!ext.startsWith('http')) continue
+      const k = `${ext} ${page}`
+      const p = pairs.get(k) || { ext, page, in: 0, out: 0 }
+      p[frExt ? 'in' : 'out'] += count
+      pairs.set(k, p)
+    }
+  }
+  return [...pairs.values()]
+}
+
+/** Build nodes with depth and a path lookup map; children are wired to parents. */
+function buildNodeTree(internal, navOrder) {
+  const paths = new Set(['/', ...navOrder.keys()])
+  for (const e of internal) { paths.add(e.fr); paths.add(e.to) }
+
+  const depth = (p) => (p === '/' ? 0 : p.split('/').length - 1)
+  const nodes = [...paths].map((p) => ({
+    path: p, depth: depth(p), angle: 0, children: [],
+  }))
+  const byPath = new Map(nodes.map((n) => [n.path, n]))
+
+  // Parent is the nearest ancestor present in the map, front page last.
+  const parentOf = (p) => {
+    let q = p
+    while (q !== '/') {
+      q = q.slice(0, q.lastIndexOf('/')) || '/'
+      if (byPath.has(q)) return byPath.get(q)
+    }
+    return byPath.get('/')
+  }
+  for (const n of nodes) {
+    if (n.path !== '/') parentOf(n.path).children.push(n)
+  }
+
+  return { nodes, byPath, root: byPath.get('/') }
+}
+
+/** Sort children by navigation order and compute each subtree's angular weight. */
+function prepareWeights(root, navOrder) {
+  const byNav = (a, b) =>
+    (navOrder.get(a.path) ?? Infinity) - (navOrder.get(b.path) ?? Infinity)
+    || a.path.localeCompare(b.path)
+  const weight = (n) =>
+    n.children.length ? n.children.reduce((s, k) => s + weight(k), 0) : 1 / n.depth
+
+  const walkSort = (n) => {
+    n.children.sort(byNav)
+    n.children.forEach(walkSort)
+  }
+  walkSort(root)
+
+  return weight
+}
+
+/** Assign angles clockwise starting from the top (-PI/2). */
+function layoutAngles(root, unit, weight) {
+  const lay = (n, a0) => {
+    n.angle = a0
+    let a = a0
+    for (const k of n.children) {
+      lay(k, a)
+      a += weight(k) * unit
+    }
+  }
+  let a = -Math.PI / 2
+  for (const k of root.children) {
+    lay(k, a)
+    a += weight(k) * unit
+  }
+}
+
+/** Compute radial positions, view counts and labels for each node. */
+function positionNodes(nodes, maxDepth, unit, viewsData, titles) {
+  // Constant radial gap between rings, equal to the arc spacing of nodes
+  // along a ring: leaf arc = unit * GAP, so GAP scales up with `unit` on
+  // sparse trees (where closing the circle forces wider arcs) and with
+  // 1/unit on dense ones (keeping arcs at the node clearance).
+  const CLEAR = 2 * TNODE_R + 12
+  const GAP = CLEAR * Math.max(unit, 1 / unit)
+  const radius = (d) => d * GAP
+
+  const viewCount = (p) => {
+    let n = 0
+    for (const c of Object.values(viewsData?.[p] || {})) n += c
+    return n
+  }
+
+  for (const n of nodes) {
+    const r = radius(n.depth)
+    n.x = Math.cos(n.angle) * r
+    n.y = Math.sin(n.angle) * r
+    n.views = viewCount(n.path)
+    // Slug inside the circle; full title goes on the link title attribute.
+    const slug = n.path === '/' ? '🏠' : n.path.split('/').pop()
+    n.label = slug.length > 11 ? `${slug.slice(0, 10)}…` : slug
+    n.title = titles.get(n.path) || ''
+  }
+
+  return { radius, GAP }
+}
+
+/**
+ * Family structure at a glance: a radial spoke from each parent to its
+ * first child, and a ring arc across each sibling group from first to last
+ * child in navigation (clockwise) order.
+ */
+function buildFamilyArcs(nodes, radius) {
+  const arcs = []
+  for (const n of nodes) {
+    if (!n.children.length) continue
+    // The spoke aims along the FIRST CHILD's angle (the node's own angle
+    // coincides with it, except for the center page which has none).
+    const first = n.children[0]
+    const r1 = radius(n.depth) + TNODE_R
+    const r2 = radius(first.depth) - TNODE_R
+    arcs.push({
+      d: `M ${Math.cos(first.angle) * r1} ${Math.sin(first.angle) * r1} `
+       + `L ${Math.cos(first.angle) * r2} ${Math.sin(first.angle) * r2}`,
+    })
+    if (n.children.length < 2) continue
+    const r = radius(n.children[0].depth)
+    const a0 = n.children[0].angle
+    const a1 = n.children[n.children.length - 1].angle
+    if (a1 - a0 >= 2 * Math.PI - 1e-6) continue // full circle: degenerate arc
+    const large = a1 - a0 > Math.PI ? 1 : 0
+    arcs.push({
+      d: `M ${Math.cos(a0) * r} ${Math.sin(a0) * r} `
+       + `A ${r} ${r} 0 ${large} 1 ${Math.cos(a1) * r} ${Math.sin(a1) * r}`,
+    })
+  }
+  return arcs
+}
+
+/** Collapse opposite transition directions into one unordered pair per page pair. */
+function aggregatePairs(internal) {
+  const pairs = new Map() // unordered pair key -> [countAB, countBA]
+  for (const e of internal) {
+    const forward = e.fr < e.to
+    const k = forward ? `${e.fr} ${e.to}` : `${e.to} ${e.fr}`
+    const c = pairs.get(k) || [0, 0]
+    c[forward ? 0 : 1] += e.count
+    pairs.set(k, c)
+  }
+  return pairs
+}
+
+const fmtPt = (p) => `${p[0].toFixed(2)} ${p[1].toFixed(2)}`
+
+/**
+ * Build one ribbon edge between two nodes with counts ab and ba.
+ * `wMid` is the half-width of the thin middle (already strength-scaled by
+ * the caller); `ra`/`rb` are the radii of the node circles each end wraps.
+ */
+function buildRibbon(a, b, ab, ba, wMid, ra = TNODE_R, rb = TNODE_R) {
+  const count = ab + ba
+  const len = Math.hypot(b.x - a.x, b.y - a.y) || 1
+  const ux = (b.x - a.x) / len
+  const uy = (b.y - a.y) / len
+  const nx = -uy
+  const ny = ux
+
+  // Radius of each node surround and the attachment geometry on it.
+  const R2A = ra + 3
+  const R2B = rb + 3
+
+  // Attachment points sit somewhat forward from the side of the node,
+  // leaving enough room for the surround to flow naturally into the flare.
+  const BETA = (65 * Math.PI) / 180
+  const ENDA = R2A * Math.cos(BETA)
+  const wEndA = R2A * Math.sin(BETA)
+  const ENDB = R2B * Math.cos(BETA)
+  const wEndB = R2B * Math.sin(BETA)
+
+  // Flares take a fair share of the free span while leaving the
+  // count-scaled thin middle a visible share of the connection length.
+  const FLARE = Math.min(36, Math.max(0, (len - ENDA - ENDB) * 0.4))
+
+  // Point on the connection centerline at distance t from A, offset s
+  // perpendicular to it.
+  const P = (t, s) => [
+    a.x + t * ux + s * nx,
+    a.y + t * uy + s * ny,
+  ]
+
+  // Arc around a node from p to q the long way, passing its back side.
+  const wrap = (p, q, node, back, R2) => {
+    const ang = (pt2) =>
+      Math.atan2(pt2[1] - node[1], pt2[0] - node[0])
+
+    const TAU = 2 * Math.PI
+    const da = ((ang(back) - ang(p)) % TAU + TAU) % TAU
+    const db = ((ang(q) - ang(p)) % TAU + TAU) % TAU
+
+    return `A ${R2} ${R2} 0 1 ${da < db ? 1 : 0} ${fmtPt(q)} `
+  }
+
+  // Build one side of a flare in node -> middle order.
+  const flarePoints = (endT, midT, s, dir, R2, END, wEnd) => {
+    const span = Math.abs(midT - endT)
+    const pEnd = P(endT, s * wEnd)
+    const pMid = P(midT, s * wMid)
+
+    // At the node, leave tangent to the circular surround.
+    // The circle radius at the attachment is locally:
+    //   A: (+END, ±wEnd)
+    //   B: (-END, ±wEnd)
+    // A perpendicular tangent pointing into the connection therefore has
+    // these centerline/normal components.
+    const tangentT = dir * wEnd / R2
+    const tangentS = -s * END / R2
+
+    const hEnd = span * 0.65
+    const hMid = span * 0.4
+
+    const cEnd = P(
+      endT + tangentT * hEnd,
+      s * wEnd + tangentS * hEnd,
+    )
+
+    // At the thin end, arrive parallel with the centerline.
+    const cMid = P(
+      midT - dir * hMid,
+      s * wMid,
+    )
+
+    return { pEnd, cEnd, cMid, pMid }
+  }
+
+  // Emit a cubic in either traversal direction. Reversing a cubic requires
+  // swapping its control points, rather than recalculating the geometry.
+  const curve = (f, reverse = false) => {
+    if (!reverse) {
+      return `C ${fmtPt(f.cEnd)} ${fmtPt(f.cMid)} ${fmtPt(f.pMid)} `
+    }
+    return `C ${fmtPt(f.cMid)} ${fmtPt(f.cEnd)} ${fmtPt(f.pEnd)} `
+  }
+
+  const LA = P(ENDA, wEndA)
+  const RA = P(ENDA, -wEndA)
+  const LB = P(len - ENDB, wEndB)
+  const RB = P(len - ENDB, -wEndB)
+
+  const aLeft = flarePoints(ENDA, ENDA + FLARE, 1, 1, R2A, ENDA, wEndA)
+  const bLeft = flarePoints(len - ENDB, len - ENDB - FLARE, 1, -1, R2B, ENDB, wEndB)
+  const bRight = flarePoints(len - ENDB, len - ENDB - FLARE, -1, -1, R2B, ENDB, wEndB)
+  const aRight = flarePoints(ENDA, ENDA + FLARE, -1, 1, R2A, ENDA, wEndA)
+
+  const d = `M ${fmtPt(LA)} `
+    + curve(aLeft)
+    + `L ${fmtPt(bLeft.pMid)} `
+    + curve(bLeft, true)
+    + wrap(LB, RB, [b.x, b.y], P(len + R2B, 0), R2B)
+    + curve(bRight)
+    + `L ${fmtPt(aRight.pMid)} `
+    + curve(aRight, true)
+    + wrap(RA, LA, [a.x, a.y], P(-R2A, 0), R2A)
+    + 'Z'
+
+  return {
+    d,
+    title: `${a.path} ↔ ${b.path}: ${count} (${ab} / ${ba})`,
+  }
+}
+
+/**
+ * Flow descriptors for the bead animation, one per edge direction with a
+ * nonzero count: a straight segment running from inside the source node
+ * to inside the target node (beads render under the node circles, so
+ * they emerge from and vanish beneath the nodes rather than popping in
+ * at the surround), plus the emission interval (seconds between beads,
+ * inverse of count * BEAD_RATE). Each segment is offset to the
+ * right-hand side of its travel direction, so opposing flows on the same
+ * edge run on parallel lanes instead of colliding. The component turns
+ * these into independently simulated beads.
+ */
+function buildFlows(a, b, ra, rb, ab, ba) {
+  const len = Math.hypot(b.x - a.x, b.y - a.y) || 1
+  const ux = (b.x - a.x) / len
+  const uy = (b.y - a.y) / len
+  const t0 = ra / 3
+  const t1 = len - rb / 3
+  if (t1 - t0 < 12) return []
+
+  // Unit normal pointing to the visual right of the A -> B direction.
+  const rx = -uy
+  const ry = ux
+  const span = t1 - t0
+  const flow = (count, fromT, toT) => {
+    // Each direction shifts to its own right, away from the opposing lane.
+    const s = fromT < toT ? FLOW_OFFSET : -FLOW_OFFSET
+    return {
+      x1: a.x + fromT * ux + s * rx,
+      y1: a.y + fromT * uy + s * ry,
+      x2: a.x + toT * ux + s * rx,
+      y2: a.y + toT * uy + s * ry,
+      len: span,
+      interval: 1 / (count * BEAD_RATE),
+    }
+  }
+  const flows = []
+  if (ab) flows.push(flow(ab, t0, t1))
+  if (ba) flows.push(flow(ba, t1, t0))
+  return flows
+}
+
+/**
+ * Half-width for a connection middle: logarithmic in the count, anchored
+ * so a single count lands exactly at WMID_MIN (~1 px line), uncapped.
+ * Absolute on purpose — cool routes stay visible regardless of how hot
+ * the hottest connection is.
+ */
+const scaledWidth = (count) => WMID_MIN + WIDTH_GROWTH * Math.log1p(count - 1)
+
+/**
+ * Build ribbon edges and bead flows for every aggregated page-to-page
+ * pair. Pairs carrying less than PRUNE_FRACTION of the total internal
+ * traffic are pruned (this naturally bounds the graph to ~100 edges).
+ */
+function buildInternalEdges(pairs, byPath) {
+  let total = 0
+  for (const [, [ab, ba]] of pairs) total += ab + ba
+  const minCount = total * PRUNE_FRACTION
+
+  const edges = []
+  const flows = []
+  for (const [k, [ab, ba]] of pairs) {
+    if (ab + ba < minCount) continue
+    const [pf, pt] = k.split(' ')
+    const a = byPath.get(pf)
+    const b = byPath.get(pt)
+    edges.push(buildRibbon(a, b, ab, ba, scaledWidth(ab + ba)))
+    flows.push(...buildFlows(a, b, TNODE_R, TNODE_R, ab, ba))
+  }
+  return { edges, flows }
+}
+
+/**
+ * Sum the bucketed transition matrix (from -> to -> bucket ISO -> count)
+ * into a plain from -> to -> count matrix for the window [t0, t1).
+ */
+export function filterTransitionsByRange(transitions, t0, t1) {
+  const out = {}
+  for (const [fr, tos] of Object.entries(transitions || {})) {
+    for (const [to, buckets] of Object.entries(tos)) {
+      let n = 0
+      for (const [k, c] of Object.entries(buckets)) {
+        const t = Date.parse(k)
+        if ((t0 == null || t >= t0) && (t1 == null || t < t1)) n += c
+      }
+      if (n) {
+        out[fr] = out[fr] || {}
+        out[fr][to] = n
+      }
+    }
+  }
+  return out
+}
+
+/** Keep only the 5-minute view buckets that fall inside [t0, t1). */
+export function filterViewsByRange(views, t0, t1) {
+  const filtered = {}
+  for (const [path, buckets] of Object.entries(views || {})) {
+    const out = {}
+    for (const [k, c] of Object.entries(buckets)) {
+      const t = Date.parse(k)
+      if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out[k] = c
+    }
+    if (Object.keys(out).length) filtered[path] = out
+  }
+  return filtered
+}
+
+/**
+ * Place external referer and exit nodes and build their edges and bead
+ * flows.
+ * Referers (incoming links) form a row centered above the map, hottest
+ * first; exits sit just outside their source page, fanned away from the
+ * center and nudged outwards until they no longer overlap any node.
+ * Widths and pruning use the same log scale and traffic-share rule as
+ * internal connections.
+ */
+function buildExternal(external, byPath, radius, innerBounds) {
+  const extNodes = []
+  const edges = []
+  const flows = []
+  let extTotal = 0
+  for (const p of external) extTotal += p.in + p.out
+  const minCount = extTotal * PRUNE_FRACTION
+  const live = external.filter((p) => byPath.has(p.page))
+  if (!live.length) return { extNodes, edges, flows }
+
+  const width = scaledWidth
+
+  const overlaps = (x, y, r) =>
+    [...byPath.values(), ...extNodes].some(
+      (n) => Math.hypot(n.x - x, n.y - y) < (n.r ?? TNODE_R) + r + 10,
+    )
+
+  // Incoming: one referer node per origin, in a row centered above the
+  // map, with an edge to each page that origin led to.
+  const byExt = new Map() // ext -> pairs, sorted by total incoming count
+  for (const p of live.filter((p) => p.in >= minCount)) {
+    const g = byExt.get(p.ext) || []
+    g.push(p)
+    byExt.set(p.ext, g)
+  }
+  const origins = [...byExt]
+    .map(([ext, ps]) => ({ ext, ps, total: ps.reduce((s, p) => s + p.in, 0) }))
+    .sort((a, b) => b.total - a.total)
+    .slice(0, MAX_EXT_IN)
+  if (origins.length) {
+    const cx = (innerBounds.x0 + innerBounds.x1) / 2
+    const y = innerBounds.y0 - TNODE_R - 64
+    const spacing = 2 * EXT_R + 44
+    const x0 = cx - ((origins.length - 1) * spacing) / 2
+    origins.forEach(({ ext, ps }, i) => {
+      const xn = { path: ext, label: extLabel(ext), x: x0 + i * spacing, y, r: EXT_R }
+      extNodes.push(xn)
+      for (const p of ps) {
+        const page = byPath.get(p.page)
+        edges.push(buildRibbon(xn, page, p.in, 0, width(p.in), EXT_R, TNODE_R))
+        flows.push(...buildFlows(xn, page, EXT_R, TNODE_R, p.in, 0))
+      }
+    })
+  }
+
+  // Outgoing: small exit nodes fanned outwards from the source page.
+  const outgoing = live.filter((p) => p.out >= minCount)
+    .sort((a, b) => b.out - a.out).slice(0, MAX_EXT_OUT)
+  const perPage = new Map()
+  for (const p of outgoing) {
+    const used = perPage.get(p.page) || 0
+    if (used >= MAX_EXT_OUT_PER_PAGE) continue
+    perPage.set(p.page, used + 1)
+    const page = byPath.get(p.page)
+    // Fan multiple exits of one page symmetrically around the outward
+    // direction; the center page has no angle, so its exits point down
+    // (the top row above the map belongs to referers).
+    const base = page.depth ? page.angle : Math.PI / 2
+    const ang = base + [0, 0.4, -0.4][used]
+    let dist = TNODE_R + 40
+    let x = page.x + Math.cos(ang) * dist
+    let y = page.y + Math.sin(ang) * dist
+    for (let tries = 0; tries < 5 && overlaps(x, y, EXT_R); tries++) {
+      dist += 24
+      x = page.x + Math.cos(ang) * dist
+      y = page.y + Math.sin(ang) * dist
+    }
+    const xn = { path: p.ext, label: extLabel(p.ext), x, y, r: EXT_R }
+    extNodes.push(xn)
+    edges.push(buildRibbon(page, xn, p.out, 0, width(p.out), TNODE_R, EXT_R))
+    flows.push(...buildFlows(page, xn, TNODE_R, EXT_R, p.out, 0))
+  }
+
+  return { extNodes, edges, flows }
+}
+
+/**
+ * Build the radial transition map model.
+ * Returns { nodes, edges, flows, extNodes, arcs, bounds } or null when
+ * there is nothing to show.
+ */
+export function buildTransitionGraph(data, pageTree) {
+  const internal = collectInternalTransitions(data?.transitions)
+  const external = collectExternalPairs(data?.transitions)
+  const navOrder = buildNavigationOrder(pageTree)
+  const titles = buildTitleMap(pageTree)
+
+  if (!internal.length && !navOrder.size) return null
+
+  const { nodes, byPath, root } = buildNodeTree(internal, navOrder)
+  const weightFn = prepareWeights(root, navOrder)
+  const unit = (2 * Math.PI) / weightFn(root)
+  layoutAngles(root, unit, weightFn)
+
+  const maxDepth = Math.max(1, ...nodes.map((n) => n.depth))
+  const { radius } = positionNodes(nodes, maxDepth, unit, data?.views, titles)
+  const arcs = buildFamilyArcs(nodes, radius)
+  const pairs = aggregatePairs(internal)
+  const { edges, flows } = buildInternalEdges(pairs, byPath)
+
+  // Tight bounding box of the actual page nodes; internal edges and arcs
+  // stay within the node circles, so node bounds plus radius suffice.
+  // External nodes extend the box below.
+  const pad = 16
+  const xs = nodes.map((n) => n.x)
+  const ys = nodes.map((n) => n.y)
+  const bounds = {
+    x0: Math.min(...xs) - TNODE_R - pad,
+    y0: Math.min(...ys) - TNODE_R - pad,
+    x1: Math.max(...xs) + TNODE_R + pad,
+    y1: Math.max(...ys) + TNODE_R + pad,
+  }
+
+  const ext = buildExternal(external, byPath, radius, bounds)
+  for (const xn of ext.extNodes) {
+    bounds.x0 = Math.min(bounds.x0, xn.x - xn.r - pad)
+    bounds.y0 = Math.min(bounds.y0, xn.y - xn.r - pad)
+    bounds.x1 = Math.max(bounds.x1, xn.x + xn.r + pad)
+    bounds.y1 = Math.max(bounds.y1, xn.y + xn.r + pad)
+  }
+
+  return {
+    nodes,
+    edges: [...edges, ...ext.edges],
+    flows: [...flows, ...ext.flows],
+    extNodes: ext.extNodes,
+    arcs,
+    bounds,
+  }
+}

frontend/src/assets/pagerite.css

@@ -132,22 +132,35 @@ body {
   overflow: hidden;
   /* Stack the design artwork and the page's own banner code on top of
      each other (artwork first): the banner is a background layer, author
-     code overlays it. A single child behaves exactly as before. */
+     code overlays it. A single child behaves exactly as before. The track
+     is explicitly banner-sized: an auto row would size to the content
+     (an SVG's intrinsic aspect ratio makes it far taller than the banner),
+     and children's height:100% would resolve against that bloated row. */
   display: grid;
+  grid-template: 100% / 100%;
 }
 
 /* :not(style, script): author-level display:block would override the UA's
-   display:none on those and render their source as banner text. */
+   display:none on those and render their source as banner text. No
+   width/height: the default stretch alignment fills the track without a
+   percentage-resolution cycle. */
 #page-banner>*:not(style, script) {
   grid-area: 1 / 1;
   display: block;
-  width: 100%;
-  height: 100%;
   object-fit: cover;
+  /* Banner artwork is bottom-anchored: the meaningful content (horizon,
+     ground, characters) sits at the bottom, so on wide viewports — where
+     the fixed-height banner crops the artwork vertically — the sky/top is
+     what scrolls out of view. object-position covers replaced elements
+     (img, canvas); inline SVG is anchored by the transform-origin below
+     together with preserveAspectRatio="...YMax slice" in the artwork. */
+  object-position: bottom;
   /* Scroll parallax: pagerite.js sets --pry on <html>; the banner stays
      windowed in place while the artwork drifts inside it. The scale
-     provides overscan so the drift never reveals an edge. */
+     provides overscan so the drift never reveals an edge; scaling from the
+     bottom keeps the artwork's bottom edge pinned to the banner's. */
   transform: scale(1.25) translateY(var(--pry, 0px));
+  transform-origin: bottom;
   will-change: transform;
 }
 
@@ -316,13 +329,15 @@ body.editing #main {
   gap: 0.6rem;
 }
 
-.editor-pens button {
+.editor-pens button,
+.editor-pens a {
   position: static;
   font: inherit;
   border: none;
   cursor: pointer;
   background: none;
   padding: 0;
+  text-decoration: none;
 }
 
 #sidebar {
@@ -488,17 +503,17 @@ article h1 .edit-link {
   opacity: 1;
 }
 
-/* Login/profile buttons injected by pagerite.js when Paskia SSO is in use.
+/* Login/profile links injected by pagerite.js when Paskia SSO is in use.
    They live inside the .editor-pens flex container in the banner's top-right
    corner and inherit its reset; keep only their opacity/text-shadow tweaks. */
-button.login-link,
+.editor-pens a.login-link,
-button.profile-link {
+.editor-pens a.profile-link {
   opacity: 0.7;
   text-shadow: 0 0 0.1em black;
 }
 
-button.login-link:hover,
+.editor-pens a.login-link:hover,
-button.profile-link:hover {
+.editor-pens a.profile-link:hover {
   opacity: 1;
 }
 
@@ -581,7 +596,7 @@ blockquote p {
   background: color-mix(in srgb, var(--admonition-color, var(--accent)) 7%, transparent);
 }
 
-.admonition > :last-child {
+.admonition> :last-child {
   margin-bottom: 0;
 }
 
@@ -683,12 +698,6 @@ td {
       transparent 75%);
 }
 
-tbody tr:nth-child(even) td {
-  background: linear-gradient(160deg,
-      color-mix(in srgb, var(--table-tint, var(--accent)) 9%, transparent),
-      color-mix(in srgb, var(--table-tint, var(--accent)) 3%, transparent) 75%);
-}
-
 tbody tr+tr td {
   border-top: 1px solid color-mix(in srgb, var(--table-tint, var(--accent)) 12%, transparent);
 }

frontend/src/cmtheme.js

@@ -14,7 +14,22 @@ export const cmTheme = EditorView.theme({
     color: "var(--text)",
   },
   ".cm-scroller": { fontFamily: '"Fira Code", monospace' },
-  ".cm-content": { caretColor: "var(--text)" },
+  // Fira Code in CodeMirror: set the font on .cm-content (not only the
+  // scroller) and force every span inside to inherit it, so highlighting
+  // spans can't drift to a different font/metrics. Ligatures are disabled
+  // entirely — CodeMirror measures per character, and ligature glyphs
+  // render wider than the measured sum of their parts.
+  ".cm-content": {
+    caretColor: "var(--text)",
+    fontFamily: '"Fira Code", monospace',
+    fontVariantLigatures: "none",
+    fontFeatureSettings: '"calt" 0',
+    letterSpacing: "normal",
+  },
+  ".cm-content *": {
+    fontFamily: "inherit",
+    letterSpacing: "inherit",
+  },
   ".cm-cursor": { borderLeftColor: "var(--text)" },
   // basicSetup's active-line highlight assumes a dark theme.
   ".cm-activeLine": { backgroundColor: "transparent" },

frontend/src/main.js

@@ -96,3 +96,5 @@ export function closeEditor() {
       if (!visible && restoreTitle != null) document.title = restoreTitle
     })
 }
+
+

frontend/src/pagerite.js

@@ -4,7 +4,6 @@
 //
 // Also: scroll-reveal effects and code copy buttons. These need no
 // support from the article itself and are re-applied after each swap.
-import { showAuthIframe } from 'paskia'
 import { OverlayScrollbars } from "overlayscrollbars";
 import "overlayscrollbars/overlayscrollbars.css";
 
@@ -47,14 +46,13 @@ import "overlayscrollbars/overlayscrollbars.css";
   // /_api/settings endpoint: the same reverse proxy that gates /_api returns
   // 401/403 here, and a 200 means the permission is present.
   //
-  // When Paskia SSO is in use, 401/403 responses carry `auth.iframe`, which
+  // When Paskia SSO is in use (probed via /auth/api/settings), the banner
-  // we use to open the login/profile dialogs inline instead of navigating
+  // corner gets a plain link to /auth/ — 🔑 log in for anonymous visitors,
-  // away. A separate probe to /auth/api/settings tells us whether Paskia is
+  // 🔐 profile when logged in. Normal navigation: Paskia does not support
-  // available at all; if it isn't, we treat the site as dev/no-proxy and
+  // being iframed, and history.back() returns to the page as-is (the
-  // leave editing open.
+  // pageshow handler below re-probes auth to refresh the pens).
   let ssoAvailable = false;
   let isAdmin = false;
-  let loginIframeUrl = null;
   let editorMeta = null;
 
   function makePen(mode) {
@@ -86,65 +84,48 @@ import "overlayscrollbars/overlayscrollbars.css";
     }
   }
 
-  function makeLoginButton(url) {
+  function makeAuthLink(admin) {
-    const btn = document.createElement("button");
+    const a = document.createElement("a");
-    btn.type = "button";
+    a.className = admin ? "profile-link" : "login-link";
-    btn.className = "login-link";
+    a.href = "/auth/";
-    btn.title = "log in";
+    a.title = admin ? "profile" : "log in";
-    btn.textContent = "🔑";
+    a.textContent = admin ? "\u{1F510}" : "\u{1F511}";
-    btn.addEventListener("click", async () => {
+    return a;
-      try {
-        await showAuthIframe(url);
-        // Successful login: refresh the auth UI (may now show edit pens).
-        setupAuth();
-      } catch {
-        // Cancelled or error: leave the button in place.
-      }
-    });
-    return btn;
-  }
-
-  function makeProfileButton() {
-    const btn = document.createElement("button");
-    btn.type = "button";
-    btn.className = "profile-link";
-    btn.title = "profile";
-    btn.textContent = "🔐";
-    btn.addEventListener("click", () => {
-      showAuthIframe("/auth/").catch(() => {});
-    });
-    return btn;
   }
 
   function renderAuthUi() {
     // Editing is open for admins and, as a dev/no-proxy fallback, when no
     // Paskia SSO is detected at all.
     const canEdit = isAdmin || !ssoAvailable;
+    // The analytics page is a read-only dashboard: editing pens and the side
+    // panel do not apply there. Login/logout links are still useful.
+    const onAnalytics = currentPath === "/_a";
     const banner = document.getElementById("page-banner");
     if (banner) {
       const old = banner.parentElement.querySelector(".editor-pens");
       if (old) old.remove();
       const pens = document.createElement("div");
       pens.className = "editor-pens";
-      if (canEdit) {
+      if (canEdit && !onAnalytics) {
         pens.append(makePen("banner"));
         pens.append(makePen("site"));
+        // Analytics viewer is now a normal page at /_a.
+        const a = document.createElement("a");
+        a.className = "edit-link analytics-link";
+        a.href = "/_a";
+        a.title = "analytics";
+        a.textContent = "📊";
+        pens.append(a);
       }
-      if (isAdmin && ssoAvailable) {
+      if (ssoAvailable) pens.append(makeAuthLink(isAdmin));
-        pens.append(makeProfileButton());
-      } else if (!isAdmin && ssoAvailable && loginIframeUrl) {
-        pens.append(makeLoginButton(loginIframeUrl));
-      } else if (!isAdmin && ssoAvailable) {
-        pens.append(makeProfileButton());
-      }
       banner.after(pens);
     }
-    if (canEdit) injectPagePen();
+    if (canEdit && !onAnalytics) injectPagePen();
   }
 
   async function setupAuth() {
     const src = document.querySelector('meta[name="pagerite:editor-src"]')?.content;
-    if (!src) return;
+    if (!src) { pingEntryOnce(); return; }
     editorMeta = {
       src,
       css: document.querySelector('meta[name="pagerite:editor-css"]')?.content,
@@ -160,23 +141,22 @@ import "overlayscrollbars/overlayscrollbars.css";
 
     // Check whether the current session has pagerite:admin.
     isAdmin = false;
-    loginIframeUrl = null;
-    let status = 0;
     try {
-      const res = await fetch("/_api/settings");
+      isAdmin = (await fetch("/_api/settings")).status === 200;
-      status = res.status;
-      if (status === 401) {
-        const data = await res.json().catch(() => ({}));
-        loginIframeUrl = data.auth?.iframe || null;
-      }
     } catch {
       // No auth proxy / dev.
     }
-    if (status === 200) isAdmin = true;
 
     renderAuthUi();
+    pingEntryOnce();
   }
 
+  // Returning to the page via history back/forward may restore a cached
+  // copy whose auth UI predates a login/logout — re-probe and re-render.
+  addEventListener("pageshow", (ev) => {
+    if (ev.persisted) setupAuth();
+  });
+
   function runScripts(root) {
     // Scripts inserted via DOM swapping do not execute; re-create them.
     for (const old of root.querySelectorAll("script")) {
@@ -299,29 +279,31 @@ import "overlayscrollbars/overlayscrollbars.css";
     }
   }
 
-  // --- Preloading ------------------------------------------------------
+  // --- Page cache / preloading ------------------------------------------
-  // Warm the HTTP cache with all linked pages and their resources, so
+  // Articles are deliberately NOT HTTP-cacheable, so speed comes from an
-  // navigation (and the cube transition) is instant. Pages carry ETags,
+  // in-memory cache instead: at load (and after each swap) every visible
-  // so re-running this after each navigation revalidates cheaply (304)
+  // internal link is fetched exactly once, and navigation is served from
-  // and picks up changed content and images.
+  // memory with no fetch at all. Editor re-renders (swapdoc.loadPlain)
+  // announce their fresh copies via pagerite:page-fetched, keeping the
+  // cache in sync after edits.
+  const pageCache = new Map(); // pathname -> HTML text
+  addEventListener("pagerite:page-fetched", (ev) => {
+    pageCache.set(new URL(ev.detail.url, location.href).pathname, ev.detail.html);
+  });
+
   function preload() {
-    const urls = new Set();
+    const urls = new Set([location.pathname]);
-    for (const a of document.querySelectorAll('#nav a[href^="/"], #main a[href^="/"]')) {
+    for (const a of document.querySelectorAll(
+      '#nav a[href^="/"], #sidebar a[href^="/"], #main a[href^="/"]',
+    )) {
       urls.add(a.pathname);
     }
     for (const url of urls) {
-      if (url === location.pathname) continue;
+      if (pageCache.has(url)) continue;
       fetch(url)
-        .then((r) => (r.ok ? r.text() : ""))
+        .then((r) => (r.ok && (r.headers.get("content-type") || "").includes("text/html")
-        .then((html) => {
+          ? r.text() : ""))
-          if (!html) return;
+        .then((html) => { if (html) pageCache.set(url, html); })
-          // Off-screen parse: load the page's images and other resources
-          const doc = new DOMParser().parseFromString(html, "text/html");
-          for (const img of doc.querySelectorAll("img")) {
-            const i = new Image();
-            i.src = img.src;
-          }
-        })
         .catch(() => {});
     }
   }
@@ -355,6 +337,74 @@ import "overlayscrollbars/overlayscrollbars.css";
     }, { passive: true });
   }
 
+  // --- Analytics pings ---------------------------------------------------
+  // Fire-and-forget POST /_a {fr, to}: on the initial page load (starts the
+  // visit — the server counts nothing from the document GET alone), for
+  // internal fetch-navigations and for external https exits. Excluded:
+  // back/forward (popstate never pings) and everything while we know the
+  // user is an admin — but only when SSO is actually in use; with no auth
+  // (dev/test) "admin" is everyone's state and nothing would be recorded —
+  // or has the editor open (admin noise, not visits). The analytics page
+  // itself (/_a) is also excluded even though fetch-navigation treats it like
+  // a normal article.
+  // See docs/analytics.md.
+  function ping(to, fr = currentPath) {
+    if ((ssoAvailable && isAdmin) || document.body.classList.contains("editing")
+        || to === "/_a" || fr === "/_a") return;
+    try {
+      fetch("/_a", {
+        method: "POST",
+        keepalive: true,
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ fr, to }),
+      });
+    } catch { /* analytics must never break navigation */ }
+  }
+
+  // The initial page load pings too — it is what starts the visit and
+  // counts the entry page view (the document GET alone records nothing).
+  // Sent once per load, after the auth probes so the admin gate applies;
+  // the pageshow re-probe must not ping again. Reloads are not visits:
+  // pinging them would double-count the view and log a self-transition.
+  let entryPinged = false;
+  function pingEntryOnce() {
+    if (entryPinged) return;
+    entryPinged = true;
+    const nav = performance.getEntriesByType?.("navigation")[0];
+    if (nav ? nav.type === "reload" : performance.navigation?.type === 1) return;
+    ping(currentPath);
+  }
+
+  // --- Analytics page mount/unmount --------------------------------------
+  // The analytics page is a normal page whose body is rendered by the server
+  // but whose content is a Vue app. We load the entry module on demand so the
+  // analytics bundle is only fetched when visiting /_a, and unmount the app
+  // before swapping away so Vue teardown runs cleanly.
+  let analyticsUnmount = null;
+
+  function teardownAnalytics() {
+    analyticsUnmount?.();
+    analyticsUnmount = null;
+  }
+
+  async function mountAnalytics(doc) {
+    const src = doc.querySelector('meta[name="pagerite:analytics-src"]')?.content;
+    if (!src) {
+      teardownAnalytics();
+      return;
+    }
+    try {
+      const mod = await import(/* @vite-ignore */ src);
+      const container = document.getElementById("analytics-app");
+      if (container) {
+        mod.mount(container);
+        analyticsUnmount = mod.unmount;
+      }
+    } catch (e) {
+      console.error("analytics mount failed:", e);
+    }
+  }
+
   // --- Fetch navigation ------------------------------------------------
   async function load(url, push = true, back = false) {
     // Navigating with the editor open closes it; unsaved edits are lost
@@ -362,22 +412,28 @@ import "overlayscrollbars/overlayscrollbars.css";
     if (document.body.classList.contains("editing")) {
       editorModule?.then((m) => m.closeEditor());
     }
+    teardownAnalytics();
     let doc;
     let finalUrl = url;
-    try {
+    const cached = pageCache.get(new URL(url, location.href).pathname);
-      const res = await fetch(url);
+    if (cached) {
-      const type = res.headers.get("content-type") || "";
+      doc = new DOMParser().parseFromString(cached, "text/html");
-      if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
+    } else {
-      // Reflect any redirect the server issued.
+      try {
-      if (res.redirected) finalUrl = res.url;
+        const res = await fetch(url);
-      doc = new DOMParser().parseFromString(await res.text(), "text/html");
+        const type = res.headers.get("content-type") || "";
-    } catch {
+        if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
-      location.href = url; // fall back to a normal navigation
+        // Reflect any redirect the server issued.
-      return;
+        if (res.redirected) finalUrl = res.url;
+        doc = new DOMParser().parseFromString(await res.text(), "text/html");
+      } catch {
+        location.href = url; // fall back to a normal navigation
+        return false;
+      }
     }
     if (REGIONS.some((id) => !doc.getElementById(id))) {
       location.href = url;
-      return;
+      return false;
     }
     const doit = () => {
       for (const id of REGIONS) {
@@ -415,6 +471,7 @@ import "overlayscrollbars/overlayscrollbars.css";
       runScripts(document.getElementById("page-banner"));
       runScripts(document.getElementById("main"));
       applyEffects();
+      mountAnalytics(document);
     };
     // Rotating cube page transition (see the FRAGILE block in pagerite.css);
     // mirrored when navigating back through history. Navigation within the
@@ -434,6 +491,7 @@ import "overlayscrollbars/overlayscrollbars.css";
     currentPath = new URL(finalUrl, location.href).pathname;
     if (push) history.pushState(null, "", finalUrl);
     scrollTo(0, 0);
+    return true;
   }
 
   addEventListener("click", (ev) => {
@@ -471,16 +529,29 @@ import "overlayscrollbars/overlayscrollbars.css";
     const a = ev.target.closest("a[href]");
     if (!a || a.target || a.hasAttribute("download")) return;
     const url = new URL(a.href, location.href);
-    if (url.origin !== location.origin) return;
+    if (url.origin !== location.origin) {
+      // External link: the browser navigates; just record the exit (https
+      // origins only, stripped to the origin part server-side anyway).
+      if (url.protocol === "https:") ping(url.origin);
+      return;
+    }
     // Same-page anchor links (footnotes etc.): let the browser handle them
     if (url.pathname === location.pathname && url.hash) return;
-    // Machinery and auth endpoints are never fetch-navigated.
+    // Machinery and auth endpoints are never fetch-navigated, except the
-    if (url.pathname.startsWith("/_") || url.pathname.startsWith("/auth")) return;
+    // public analytics viewer page at /_a.
+    if ((url.pathname.startsWith("/_") && url.pathname !== "/_a")
+        || url.pathname.startsWith("/auth")) return;
     ev.preventDefault();
-    load(url);
+    // Capture the source now: load() updates currentPath before pinging.
+    const from = currentPath;
+    load(url).then((ok) => { if (ok) ping(url.pathname, from); });
   });
 
-  addEventListener("popstate", () => load(location.href, false, true));
+  addEventListener("popstate", () => {
+    // Hash-only history entries are not navigations.
+    if (location.pathname === currentPath) return;
+    load(location.href, false, true);
+  });
 
   // --- Task-list checkboxes ------------------------------------------------
   // Checkboxes in the rendered article are live: toggling them edits the
@@ -546,4 +617,5 @@ import "overlayscrollbars/overlayscrollbars.css";
 
   setupAuth();
   applyEffects();
+  mountAnalytics(document);
 })();

frontend/src/swapdoc.js

@@ -100,18 +100,22 @@ function swapRegions(doc) {
 export async function loadPlain(p) {
   let doc
   let finalUrl = `/${p}`
+  let html
   try {
     const res = await fetch(finalUrl)
     const type = res.headers.get('content-type') || ''
     if (!type.includes('text/html')) return null
     if (res.redirected) finalUrl = res.url
-    doc = new DOMParser().parseFromString(await res.text(), 'text/html')
+    html = await res.text()
+    doc = new DOMParser().parseFromString(html, 'text/html')
   } catch { return null }
   if (!doc.getElementById('main')) return null
   swapRegions(doc)
   history.replaceState(null, '', finalUrl)
   runScripts(document.getElementById('page-banner'))
   runScripts(document.getElementById('main'))
+  // Keep pagerite.js's in-memory page cache in sync with the fresh copy.
+  dispatchEvent(new CustomEvent('pagerite:page-fetched', { detail: { url: finalUrl, html } }))
   dispatchEvent(new CustomEvent('pagerite:preview')) // re-inject + re-tuck the edit pens
   return finalUrl
 }

frontend/vite.config.js

@@ -9,13 +9,14 @@ const backendUrl = process.env.PAGERITE_BACKEND_URL || 'http://localhost:3200'
 
 // Proxy content pages (/slug, /path/to/slug) to the FastAPI backend in dev.
 // Excludes Vite internals (/@..., /src, /node_modules, /__...) and the
-// backend's /_ prefix. /_api and /_f are handled by the fastapi-vue plugin.
+// backend's /_ prefix. /_api, /_f, /_themes and the /_a analytics ping are
+// handled by the fastapi-vue plugin.
 const CONTENT_PROXY = '^\\/(?!_|@|src|node_modules|__)(?:[^./?]+(?:\\/[^./?]+)*)?(?:\\?.*)?$'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
-    fastapiVue({ paths: ["/_api", "/_f", "/_themes"] }),
+    fastapiVue({ paths: ["/_api", "/_f", "/_themes", "/_a"] }),
     vue(),
     vueDevTools(),
   ],
@@ -39,6 +40,7 @@ export default defineConfig({
       input: {
         main: fileURLToPath(new URL('./src/main.js', import.meta.url)),
         pagerite: fileURLToPath(new URL('./src/pagerite.js', import.meta.url)),
+        analytics: fileURLToPath(new URL('./src/analytics-main.js', import.meta.url)),
         // Only the base CSS is built; theme/banner-design stylesheets live
         // in pagerite/themes/{name}/ and are served by the backend as-is.
         pagerite_base: fileURLToPath(new URL('./src/assets/pagerite.css', import.meta.url)),

pagerite/analytics.py

@@ -0,0 +1,388 @@
+"""Server-side visit analytics (collection only; see docs/analytics.md).
+
+Events come from navigation pings POSTed to /_a by pagerite.js: the first
+ping on page load starts a visit, later pings extend it, and pings with no
+known session start a fresh one (missing data, not dropped). The document
+GET handler stashes the entry referer (external https origin) and any
+utm_* query parameters in in-memory IP tables, consumed when the ping
+starts the visit; nothing is counted without a ping (bots and admin
+browsing stay invisible). The session map is in-memory only.  The visitor
+IP and, when available, its reverse-DNS host name are stored on the visit
+record itself.
+
+Data is a msgspec Struct JSON-dumped to its own file (not the kanta db),
+rewritten atomically on every recorded event.
+"""
+
+import os
+import re
+import tempfile
+from datetime import UTC, datetime, timedelta
+from pathlib import Path
+from urllib.parse import parse_qs, urlparse
+
+import msgspec
+from ua_parser import parse
+
+
+def _compact_user_agent(ua: str) -> str:
+    """Format a User-Agent string into a compact display form.
+
+    Returns the original UA when the parser cannot identify the browser/OS.
+    """
+    if not ua or not ua.strip() or ua == "-":
+        return ""
+    r = parse(ua)
+    browser = r.user_agent.family if r.user_agent else None
+    ver = r.user_agent.major if r.user_agent else ""
+    os_name = r.os.family if r.os else None
+    dev = r.device.family if r.device else None
+    if browser in (None, "Other") and os_name in (None, "Other"):
+        return ua
+    browser = browser if browser and browser != "Other" else ""
+    os_name = os_name if os_name and os_name != "Other" else ""
+    if dev in (None, "Other") or dev == browser:
+        dev = ""
+    parts = [f"{browser}/{ver}" if browser else "", os_name, dev]
+    return " ".join(p for p in parts if p).strip()
+
+
+class Visit(msgspec.Struct, omit_defaults=True):
+    """One visit: the initial-load data plus everything seen afterwards.
+
+    ``trail`` holds page paths and external exit origins in first-seen
+    order; re-visiting an already seen page does not append. The entry
+    page itself is in ``entry``, not in the trail.
+    """
+
+    start: datetime
+    entry: str
+    #: External https origin of the initial load, "" for direct visits.
+    referer: str = ""
+    #: Visitor IP address (first X-Forwarded-For hop or direct peer).
+    ip: str = ""
+    #: Reverse-DNS host name for ``ip`` when resolvable, else "".
+    host: str = ""
+    trail: list[str] = []
+    #: First Accept-Language tag, lowercased (e.g. "en-us").
+    lang: str = ""
+    #: Two-letter region subtag derived from ``lang`` (e.g. "US"), or "".
+    country: str = ""
+    #: Raw User-Agent header from the initial ping.
+    ua: str = ""
+    #: Compact display form of ``ua`` (browser/OS/device) when parsable.
+    ua_pretty: str = ""
+    #: UTM query parameters from the landing URL, keyed by parameter name.
+    utm: dict[str, str] = {}
+
+
+class CrawlerHit(msgspec.Struct, omit_defaults=True):
+    """A document GET that was never followed by an analytics ping."""
+
+    start: datetime
+    entry: str
+    ip: str = ""
+    ua: str = ""
+    #: Compact display form of ``ua`` when parsable.
+    ua_pretty: str = ""
+    #: External https origin of the initial load, "" for direct/none.
+    referer: str = ""
+    #: Raw query string of the landing URL (UTM tags can be parsed from it).
+    query: str = ""
+
+
+class Analytics(msgspec.Struct, omit_defaults=True):
+    """Root of the analytics JSON file. Append-only by design: old data is
+    dropped by deleting list entries / bucket keys."""
+
+    visits: list[Visit] = []
+    #: Document GETs that never produced a ping, treated as crawler/bot hits.
+    crawlers: list[CrawlerHit] = []
+    #: Page transitions per 5-minute bucket (sparse):
+    #: from -> to -> bucket ISO -> count. ``from`` is the referer origin or
+    #: "(direct)" for initial loads, a page path for pings.
+    transitions: dict[str, dict[str, dict[str, int]]] = {}
+    #: Page views per 5-minute bucket: path -> bucket ISO -> count (sparse).
+    views: dict[str, dict[str, int]] = {}
+    #: New visits per 5-minute bucket: bucket ISO -> count (sparse).
+    site_visits: dict[str, int] = {}
+
+
+def _bucket(now: datetime) -> str:
+    """Start of the 5-minute interval containing ``now``, as ISO string."""
+    return now.replace(minute=now.minute // 5 * 5, second=0, microsecond=0).isoformat()
+
+
+def _origin(url: str) -> str | None:
+    """The origin part of an https URL (scheme://host[:port]), else None."""
+    try:
+        parsed = urlparse(url)
+    except ValueError:
+        return None
+    if parsed.scheme != "https" or not parsed.netloc:
+        return None
+    return f"https://{parsed.netloc}"
+
+
+_SEGMENT = re.compile(r"[a-z0-9][a-z0-9_-]*")
+
+
+def _internal_path(to: str) -> str | None:
+    """A valid internal page path ("/" or slug segments), else None."""
+    path = to.split("?")[0].split("#")[0].strip("/")
+    if not path:
+        return "/"
+    if all(_SEGMENT.fullmatch(seg) for seg in path.split("/")):
+        return f"/{path}"
+    return None
+
+
+def _parse_accept_language(value: str) -> tuple[str, str]:
+    """First Accept-Language tag and the region/country subtag if present.
+
+    ``en-US, fr;q=0.9`` -> ("en-us", "US").  Wildcards and missing regions
+    produce an empty country.  The region is intentionally approximate:
+    it reflects the browser's language preference, not geo-location.
+    """
+    if not value:
+        return "", ""
+    tag = value.split(",")[0].split(";")[0].strip()
+    if not tag or tag == "*":
+        return "", ""
+    lang = tag.lower()
+    country = ""
+    # Region subtags follow the initial language tag (en-US, zh-Hans-CN).
+    # A bare two-letter tag such as "fr" is a language code, not a region.
+    for part in reversed(tag.split("-")[1:]):
+        if len(part) == 2 and part.isalpha():
+            country = part.upper()
+            break
+    return lang, country
+
+
+def _utm_tags(query: str) -> dict[str, str]:
+    """UTM parameters from a query string, keeping only the first value."""
+    if not query:
+        return {}
+    parsed = parse_qs(query, keep_blank_values=True)
+    return {k: v[0] for k, v in parsed.items() if k.startswith("utm_")}
+
+
+_CRAWLER_TIMEOUT = timedelta(seconds=10)
+
+
+class Store:
+    """In-memory analytics data plus the (IP, UA) -> visit session map."""
+
+    def __init__(self, path: Path) -> None:
+        self.path = path
+        self.data = Analytics()
+        if path.exists():
+            try:
+                self.data = msgspec.json.decode(path.read_bytes(), type=Analytics)
+            except msgspec.DecodeError, OSError:
+                pass  # legacy schema / corrupt or unreadable file: start fresh
+        #: (ip, user-agent) -> index of the current visit in data.visits
+        self.sessions: dict[tuple[str, str], int] = {}
+        #: ip -> external https origin of the latest document GET carrying
+        #: one, stashed for the visit the client's initial ping starts.
+        #: Internal or absent referers never touch the table.
+        self.pending_referers: dict[str, str] = {}
+        #: ip -> utm_* query parameters from the latest document GET that
+        #: carried any, stashed for the visit the client's initial ping starts.
+        #: Only non-empty sets are stored, so a later parameter-less page
+        #: does not overwrite an earlier tagged landing URL.
+        self.pending_utms: dict[str, dict[str, str]] = {}
+        #: Document GETs that have not yet been matched by a ping.  Kept
+        #: in RAM only; expired entries are written to ``data.crawlers``.
+        self.pending_crawlers: list[CrawlerHit] = []
+
+    def _save(self) -> None:
+        """Rewrite the JSON file atomically (temp file + rename)."""
+        try:
+            fd, tmp = tempfile.mkstemp(
+                dir=self.path.parent, prefix=self.path.name, suffix=".tmp"
+            )
+            with os.fdopen(fd, "wb") as f:
+                f.write(msgspec.json.encode(self.data))
+            os.replace(tmp, self.path)
+        except OSError:
+            pass  # analytics must never break page serving
+
+    def _flush_crawlers(self, now: datetime | None = None) -> None:
+        """Move expired pending crawler hits into persistent ``data.crawlers``."""
+        if not self.pending_crawlers:
+            return
+        now = now or datetime.now(UTC)
+        cutoff = now - _CRAWLER_TIMEOUT
+        expired: list[CrawlerHit] = []
+        remaining: list[CrawlerHit] = []
+        for hit in self.pending_crawlers:
+            (expired if hit.start <= cutoff else remaining).append(hit)
+        if expired:
+            self.pending_crawlers = remaining
+            self.data.crawlers.extend(expired)
+            self._save()
+
+    def _count(self, table: dict[str, int], key: str) -> None:
+        table[key] = table.get(key, 0) + 1
+
+    def _count_transition(self, fr: str, to: str, now: datetime) -> None:
+        """Count one transition in its 5-minute bucket (sparse matrix)."""
+        buckets = self.data.transitions.setdefault(fr, {}).setdefault(to, {})
+        self._count(buckets, _bucket(now))
+
+    def _new_visit(
+        self,
+        entry: str,
+        referer: str,
+        key: tuple[str, str],
+        ip: str = "",
+        lang: str = "",
+        country: str = "",
+        ua: str = "",
+        utm: dict[str, str] | None = None,
+    ) -> Visit:
+        now = datetime.now(UTC)
+        visit = Visit(
+            start=now,
+            entry=entry,
+            referer=referer,
+            ip=ip,
+            lang=lang,
+            country=country,
+            ua=ua,
+            ua_pretty=_compact_user_agent(ua),
+            utm=utm or {},
+        )
+        self.data.visits.append(visit)
+        self.sessions[key] = len(self.data.visits) - 1
+        self._count(self.data.site_visits, _bucket(now))
+        self._count(self.data.views.setdefault(entry, {}), _bucket(now))
+        self._count_transition(referer or "(direct)", entry, now)
+        return visit
+
+    def enrich_visit(
+        self,
+        index: int,
+        *,
+        host: str = "",
+        country: str = "",
+    ) -> None:
+        """Fill in host/geoip fields on an existing visit after async lookups."""
+        if index < 0 or index >= len(self.data.visits):
+            return
+        visit = self.data.visits[index]
+        changed = False
+        if host and not visit.host:
+            visit.host = host
+            changed = True
+        if country:
+            visit.country = country
+            changed = True
+        if changed:
+            self._save()
+
+    def track_entry(
+        self,
+        referer: str,
+        own_origin: str,
+        ip: str,
+        ua: str,
+        entry: str,
+        query: str = "",
+    ) -> None:
+        """Stash the entry referer/UTM tags and queue a pending crawler hit.
+
+        Nothing is counted here — the client's initial /_a ping starts the
+        visit (only non-admin clients ping). Only a cross-origin https
+        referer updates the table; an internal or absent referer leaves any
+        stashed origin untouched.  UTM parameters are kept only when the
+        landing URL actually carries them, so a subsequent parameter-less page
+        does not erase an earlier tagged landing.
+
+        Every document GET is also queued as a pending crawler hit.  If a ping
+        from the same (IP, UA) pair arrives within ``_CRAWLER_TIMEOUT``, the
+        hit is discarded; otherwise it is flushed to ``data.crawlers``.
+        """
+        now = datetime.now(UTC)
+        self._flush_crawlers(now)
+        if referer:
+            origin = _origin(referer)
+            if origin is not None and origin != own_origin:
+                self.pending_referers[ip] = origin
+        utms = _utm_tags(query)
+        if utms:
+            self.pending_utms[ip] = utms
+        self.pending_crawlers.append(
+            CrawlerHit(
+                start=now,
+                entry=entry,
+                ip=ip,
+                ua=ua,
+                ua_pretty=_compact_user_agent(ua),
+                referer=self.pending_referers.get(ip, ""),
+                query=query,
+            )
+        )
+
+    def ping(
+        self,
+        from_: str,
+        to: str,
+        ip: str,
+        ua: str,
+        accept_language: str = "",
+    ) -> int | None:
+        """Record a client navigation ping ({from, to} from pagerite.js).
+
+        ``to`` is an internal path ("/...") or an https origin for exit
+        links; anything else is ignored. The transition is always counted;
+        the trail only grows on first sight of a page within the visit.
+        A ping with no known session starts a fresh visit, consuming the
+        referer and UTM tags stashed by the document GET if there are any.
+
+        Returns the index of the new visit when one is created, so callers
+        can enrich it later with non-blocking lookups (host, geoip country).
+        """
+        self._flush_crawlers()
+        # A real visitor ping cancels any pending crawler hits from this
+        # (IP, UA) pair.
+        self.pending_crawlers = [
+            hit for hit in self.pending_crawlers if not (hit.ip == ip and hit.ua == ua)
+        ]
+        if to.startswith("/") and not to.startswith("//"):
+            target = _internal_path(to) or ""
+        else:
+            target = _origin(to) or ""
+        if not target or (not to.startswith("/") and target != to):
+            return None
+        key = (ip, ua)
+        index = self.sessions.get(key)
+        fr = (_internal_path(from_) or "(direct)") if from_ else "(direct)"
+        if index is None or index >= len(self.data.visits):
+            # No known session: the initial ping of a fresh page load (or
+            # missing data after a server restart) — start a visit.
+            lang, country = _parse_accept_language(accept_language)
+            index = len(self.data.visits)
+            self._new_visit(
+                target,
+                self.pending_referers.pop(ip, ""),
+                key,
+                ip=ip,
+                lang=lang,
+                country=country,
+                ua=ua,
+                utm=self.pending_utms.pop(ip, {}),
+            )
+        else:
+            visit = self.data.visits[index]
+            now = datetime.now(UTC)
+            if target.startswith("/"):
+                self._count(self.data.views.setdefault(target, {}), _bucket(now))
+            self._count_transition(fr, target, now)
+            # First-seen only: repeat pages and repeated exits don't append.
+            if visit.entry != target and target not in visit.trail:
+                visit.trail.append(target)
+        self._save()
+        return index if index is not None and index < len(self.data.visits) else None

pagerite/app.py

@@ -12,23 +12,31 @@ walking the tree (``resolve``), moves are slot detach/attach
 (``find_slot``) with a fresh order key from the new siblings.
 """
 
+import asyncio
+import gzip
+import ipaddress
 import mimetypes
 import os
 import re
+import shutil
+import socket
 from collections.abc import AsyncIterator
 from contextlib import asynccontextmanager
 from datetime import UTC, datetime
 from email.utils import format_datetime
+from functools import lru_cache
 from pathlib import Path
+from urllib.parse import urlparse
 
 import blake3
+import msgspec
 from fastapi import FastAPI, HTTPException, Request, WebSocket, WebSocketDisconnect
 from fastapi.responses import HTMLResponse, RedirectResponse, Response
 from fastapi_vue import Frontend
 from kanta import Kanta
 from pydantic import BaseModel
 
-from pagerite import seed, views
+from pagerite import analytics, seed, views
 from pagerite.__main__ import DEVMODE
 from pagerite.data import (
     Data,
@@ -43,6 +51,80 @@ from pagerite.markdown import has_h1, render, toggle_task
 
 DB_PATH = os.getenv("PAGERITE_DB", "pagerite.kantadb")
 
+# Visit analytics go to their own JSON file, not the kanta database.
+ANALYTICS_PATH = Path(
+    os.getenv("PAGERITE_ANALYTICS", DB_PATH.replace(".kantadb", "") + ".analytics.json")
+)
+analytics_store = analytics.Store(ANALYTICS_PATH)
+
+
+# Repository root from this file's location (pagerite/app.py -> ..).
+_REPO_ROOT = Path(__file__).resolve().parent.parent
+
+
+def _geoip_db_path() -> Path | None:
+    """Find a DB-IP MMDB in the repo root, preferring an already-decompressed
+    ``.mmdb`` over the matching ``.mmdb.gz``.  Returns None if none is present.
+    """
+    mmdb = sorted(_REPO_ROOT.glob("dbip-*.mmdb"))
+    if mmdb:
+        return mmdb[0]
+    gz = sorted(_REPO_ROOT.glob("dbip-*.mmdb.gz"))
+    if gz:
+        return gz[0]
+    return None
+
+
+class GeoIP:
+    """Lazy DB-IP MMDB reader.  Call ``_load()`` once at startup before
+    concurrent requests arrive; ``country()`` is read-only and safe to call
+    from ``asyncio.to_thread`` workers afterwards.
+    """
+
+    def __init__(self) -> None:
+        self._reader: object | None = None
+
+    def _decompress(self, source: Path, target: Path) -> None:
+        if target.exists():
+            return
+        tmp = target.with_suffix(target.suffix + ".tmp")
+        with gzip.open(source, "rb") as src, open(tmp, "wb") as dst:
+            shutil.copyfileobj(src, dst)
+        os.replace(tmp, target)
+
+    def _load(self) -> None:
+        if self._reader is not None:
+            return
+        source = _geoip_db_path()
+        if source is None:
+            return
+        if source.suffix == ".gz":
+            target = source.with_suffix("")
+            self._decompress(source, target)
+            source = target
+        try:
+            import maxminddb
+
+            self._reader = maxminddb.open_database(str(source))
+        except Exception:
+            pass
+
+    def country(self, ip: str) -> str:
+        """Two-letter ISO country code for ``ip``, or "" when unavailable."""
+        if not ip or self._reader is None:
+            return ""
+        try:
+            rec = self._reader.get(ip)
+            if rec:
+                return (rec.get("country") or {}).get("iso_code", "")
+        except Exception:
+            pass
+        return ""
+
+
+_geoip = GeoIP()
+
+
 # Our own data root; kanta edits it in place, reads are plain attribute access.
 data = Data()
 kanta = Kanta(DB_PATH, data)
@@ -121,25 +203,34 @@ def _migrate_legacy() -> None:
         data.version += 1
 
 
+@kanta.bootstrap
+def _seed(data: Data) -> None:
+    """Write the demo pages on database creation (never on existing dbs)."""
+    for path in seed.PAGES:
+        title, markdown, files, banner, order, design = seed.PAGES[path]
+        for orig, body in files.items():
+            markdown, banner = _store_seed_file(markdown, banner, orig, body)
+        node = _ensure(data.menu, path)
+        node.title = title
+        # Empty markdown means a pure category label (e.g. "showcase",
+        # seeded only to carry a banner design): leave content as None so
+        # the node renders the placeholder and nav points at its children.
+        if markdown:
+            node.content = markdown
+        node.banner = banner
+        node.banner_design = design
+        node.order = order
+
+
 @asynccontextmanager
 async def lifespan(_app: FastAPI) -> AsyncIterator[None]:
-    """Open the database, migrate/seed content, load assets."""
+    """Open the database, migrate legacy content, load assets, load GeoIP."""
     await kanta.open()
     _migrate_legacy()
-    missing = [p for p in seed.PAGES if resolve(data.menu, p) is None]
-    if missing:
-        with kanta.transaction("seed missing pages"):
-            for path in missing:
-                title, markdown, files, banner, order, design = seed.PAGES[path]
-                for orig, body in files.items():
-                    markdown, banner = _store_seed_file(markdown, banner, orig, body)
-                node = _ensure(data.menu, path)
-                node.title = title
-                node.content = markdown
-                node.banner = banner
-                node.banner_design = design
-                node.order = order
     await frontend.load()
+    # Decompress/open the DB-IP MMDB once at startup.  Lookups are then
+    # read-only and safe to run in background ``to_thread`` workers.
+    await asyncio.to_thread(_geoip._load)
     yield
     await kanta.close()
 
@@ -489,6 +580,120 @@ async def delete_page(path: str) -> None:
 _SLUG_RE = re.compile(r"^[a-z0-9][a-z0-9_-]*$")
 
 
+def _client_ip(request: Request) -> str:
+    """Client IP: first X-Forwarded-For hop (we sit behind a proxy), else
+    the direct peer."""
+    forwarded = request.headers.get("x-forwarded-for", "").split(",")[0].strip()
+    return forwarded or (request.client.host if request.client else "")
+
+
+@lru_cache(maxsize=4096)
+def _cached_ptr(ip: str) -> str:
+    """Reverse-DNS lookup with in-RAM LRU cache.  Returns the host name or ""."""
+    if not ip:
+        return ""
+    try:
+        addr = ipaddress.ip_address(ip)
+    except ValueError:
+        return ""
+    if addr.is_private or addr.is_loopback or addr.is_reserved or addr.is_multicast or addr.is_link_local:
+        return ""
+    try:
+        host, _, _ = socket.gethostbyaddr(ip)
+    except socket.herror:
+        return ""
+    return host
+
+
+async def _lookup_host(ip: str) -> str:
+    """Async wrapper around ``_cached_ptr``; runs the blocking lookup in a thread."""
+    return await asyncio.to_thread(_cached_ptr, ip)
+
+
+async def _geoip_country(ip: str) -> str:
+    """Async wrapper around the DB-IP MMDB lookup."""
+    return await asyncio.to_thread(_geoip.country, ip)
+
+
+async def _enrich_visit(index: int, ip: str) -> None:
+    """Run non-blocking reverse-DNS and geoip enrichment for a new visit."""
+    if not ip:
+        return
+    host = await _lookup_host(ip)
+    country = await _geoip_country(ip)
+    analytics_store.enrich_visit(index, host=host, country=country)
+
+
+class AnalyticsPing(BaseModel):
+    """Navigation ping from pagerite.js (see docs/analytics.md)."""
+
+    fr: str = ""
+    to: str
+
+
+@app.get("/_a", response_model=None)
+async def analytics_page(request: Request) -> HTMLResponse:
+    """Render the analytics viewer as a normal site page at /_a.
+
+    The page itself is public, but the data endpoint (/_api/analytics) stays
+    admin-gated like the rest of /_api, so only authorized users see the
+    statistics; others get the viewer with a "could not be loaded" message.
+    """
+    return HTMLResponse(
+        views.render_analytics(
+            data.menu, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html
+        ),
+        headers={"cache-control": "no-cache"},
+    )
+
+
+@app.post("/_a", status_code=204)
+async def analytics_ping(ping: AnalyticsPing, request: Request) -> None:
+    """Record a navigation ping ({fr, to}); fire-and-forget, never fails.
+
+    The reverse-DNS and DB-IP geoip lookups happen in a background task so
+    the response is never delayed by slow DNS or the first MMDB decompress.
+    """
+    ip = _client_ip(request)
+    index = analytics_store.ping(
+        ping.fr,
+        ping.to,
+        ip,
+        request.headers.get("user-agent", ""),
+        request.headers.get("accept-language", ""),
+    )
+    if index is not None:
+        asyncio.create_task(_enrich_visit(index, ip))
+
+
+def _track_entry(path: str, request: Request) -> None:
+    """Stash the referer/UTM tags and queue a pending crawler hit for the GET.
+
+    Nothing is counted on the GET itself — the client's /_a ping starts the
+    visit, so bots and admin browsing never register as visits.
+
+    The devserver's health probe (``GET /?from=devserver.py`` from
+    ``127.0.0.1``) is ignored: it is not real traffic and would otherwise be
+    logged as a crawler hit.  The root-path and localhost checks prevent
+    remote visitors from hiding traffic with the same query string.
+    """
+    if (
+        path == ""
+        and str(request.url.query) == "from=devserver.py"
+        and _client_ip(request) == "127.0.0.1"
+    ):
+        return
+    own_origin = f"https://{urlparse(str(request.base_url)).netloc}"
+    analytics_store.track_entry(
+        request.headers.get("referer", ""),
+        own_origin,
+        _client_ip(request),
+        request.headers.get("user-agent", ""),
+        "/" if path == "" else f"/{path}",
+        str(request.url.query),
+    )
+
+
 def _http_date(dt: datetime) -> str:
     """RFC 7231 date for the Last-Modified header."""
     return format_datetime(dt.astimezone(UTC), usegmt=True)
@@ -504,6 +709,15 @@ def _is_reserved(path: str) -> bool:
     return any(not _SLUG_RE.match(seg) for seg in path.split("/"))
 
 
+def _is_trackable_path(path: str) -> bool:
+    """Content URLs only: skip auth endpoints and reserved/machinery paths."""
+    if not path:
+        return True
+    if path == "auth" or path.startswith("auth/"):
+        return False
+    return not _is_reserved(path)
+
+
 def _check_reserved(path: str) -> None:
     """Reject paths that do not follow the slug charset."""
     if _is_reserved(path):
@@ -513,6 +727,18 @@ def _check_reserved(path: str) -> None:
         )
 
 
+@app.get("/_api/analytics")
+async def get_analytics() -> Response:
+    """The collected visit analytics as JSON (see docs/analytics.md).
+
+    Admin-only via the /_api forward-auth gate, like every management
+    endpoint. Powers the analytics viewer rendered at /_a.
+    """
+    return Response(
+        msgspec.json.encode(analytics_store.data), media_type="application/json"
+    )
+
+
 @app.websocket("/_api/ws/editor")
 async def editor_ws(ws: WebSocket) -> None:
     """Editor session: open pages, render previews, save — over one socket.
@@ -684,16 +910,19 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
     chain = resolve(data.menu, path)
     node = chain[-1] if chain else None
     if node is not None and node.published and node.content is not None:
-        # ETag on content + render version; clients revalidate cheaply,
+        # no-cache forbids serving a stored page without revalidation
-        # which keeps prefetched pages warm and current. no-cache forces
+        # (browsers would otherwise cache heuristically and serve stale
-        # that revalidation: with Last-Modified but no Cache-Control,
+        # pages, e.g. after a theme change). In-session speed instead comes
-        # browsers would otherwise cache heuristically and serve stale
+        # from pagerite.js's in-memory page cache (preload everything, never
-        # pages (e.g. after a theme change) without asking us at all.
+        # fetch on navigation); the ETag just makes those one-time preload
+        # fetches and any revalidation cheap.
         etag = f'"{path}@{node.modified.timestamp()}v{data.version}"'
         if request.headers.get("if-none-match") == etag:
             return Response(status_code=304)
+        if _is_trackable_path(path):
+            _track_entry(path, request)
         return HTMLResponse(
-            views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html),
+            views.render_page(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html, str(request.base_url).rstrip("/")),
             headers={
                 "etag": etag,
                 "last-modified": _http_date(node.modified),
@@ -703,6 +932,8 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
     if node is not None and node.published and node.content is None:
         # Category label without a landing page: placeholder with the pen
         # to create it (404 — no page here, but the node is real).
+        if _is_trackable_path(path):
+            _track_entry(path, request)
         return HTMLResponse(
             views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html),
             404,
@@ -717,4 +948,6 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
         for slug, item in sorted_nodes(data.menu):
             if item.published:
                 return RedirectResponse(f"/{slug}")
+    if _is_trackable_path(path):
+        _track_entry(path, request)
     return HTMLResponse(views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html), 404)

pagerite/data.py

@@ -91,8 +91,8 @@ class Data(msgspec.Struct):
     #: banner artwork, next to the nav. Empty = the plain brand link.
     brand_html: str = ""
     #: Active theme name (empty = none/base only). Themes live in
-    #: frontend/src/assets/themes/{theme}/theme.css, with their banner
+    #: pagerite/themes/{theme}/ (theme.css and/or banner.css/banner.svg/
-    #: artwork at pagerite/themes/{theme}/banner.svg (inlined server-side).
+    #: banner.html), served by the backend from disk.
     theme: str = "purple"
     #: Raw site-wide custom CSS, injected inline in every page <head>.
     #: Trusted author content; not sanitized.

pagerite/seed.py

@@ -1,147 +1,341 @@
-"""Seed content written to the database on first run (when it is empty).
+"""Seed content written to the database on first creation only
+(``@kanta.bootstrap`` in ``app.py``).
 
-Demonstrates the formatting options: images attached to pages and served
+A "welcome to your new site" starter: a structured docs section (three
-from the page path, figures with captions, attribute classes for
+menu levels deep) covering editing and the full Markdown feature set —
-positioning, footnotes, definition lists, task lists, tables and raw HTML.
+each feature shown as its Markdown source in a code block followed by
+the rendered result — and a showcase section with image positioning,
+long-form layout and a simple custom banner.
+
+Binary seed images live in ``seed-assets/`` (public domain, from
+Wikimedia Commons: the two whale engravings are Augustus Burnham
+Shute's illustrations for an 1892 edition of Moby-Dick; the wave is
+Hokusai's "The Great Wave off Kanagawa").
 """
 
+from pathlib import Path
+
+ASSETS = Path(__file__).with_name("seed-assets")
+
+
+def _asset(name: str) -> bytes:
+    return (ASSETS / name).read_bytes()
+
 WELCOME = """\
-Welcome to your new **Pagerite** site. Pages are written in Markdown — including raw HTML — and served from pretty URLs.
+Welcome to your new **Pagerite** site. Everything you see is a page written in Markdown, served from a pretty URL, and editable right here in the browser.
 
-Have a look around:
+Where to go next:
 
-- The [docs](/docs) section explains [how to write content](/docs/editing), including images and positioning.
+- The [docs](/docs/editing) section explains how to edit this site and shows every supported Markdown feature, source and result side by side.
-- [The Long Read](/blog/the-long-read) demonstrates a longer article with scroll effects.
+- The [showcase](/showcase/gallery) section shows what finished pages can look like: image positioning, banners, a long read.
-- The [about](/about) page shows off assorted formatting.
+- Click the 🖊️ pen on any page to open the editor, and the ⚙️ pen for site settings and the structure tree.
 
-![Abstract waves](waves.svg "Generated SVG artwork, attached to this page")
+![Abstract waves](waves.svg "Generated SVG artwork, attached to this page"){width=420}
+
+*Delete or rewrite any of these pages — they are only here to get you started.*
 """
 
-ABOUT = """\
+EDITING = """\
-This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content written in Markdown.
+Everything on the site is editable in place. Log in, and pens appear: 🖊️ on the page and banner, ⚙️ in the banner corner for site settings.
 
-Some formatting samples:
+## The editor
 
-- [x] Write content in Markdown
+The 🖊️ pens open a tabbed editor over the page you are viewing:
-- [x] Attach images to pages
-- [ ] Add editing UI
 
-Term
+- **Article** — the page's title and Markdown, with a live preview. The format bar inserts the harder-to-remember syntax (links, tables, images); Ctrl/Cmd-B, I and S do what you expect. Saving is explicit: 💾 or Ctrl+S.
-: A definition list entry, rendered by the deflist plugin.
+- **Banner** — per-page banner HTML and a banner design picker. Banners are raw HTML (an image, a styled div, a canvas with a script) and subpages inherit the nearest banner up their path.
+- **Site** — brand, theme, fonts, favicon and custom CSS, all applied immediately.
+- **Structure** — the page tree. Drag rows to reorder or nest, rename titles and slugs inline, ➕ adds a page, ✕ deletes one.
 
-And a table:
+## URLs and structure
+
+The URL is the structure: a page at `docs/markdown/basics` lives under `docs` and `markdown`, and the menus are derived from that. Slugs are lowercase ASCII (`a-z 0-9 - _`). A node without content is a category label — it renders a placeholder and its menu link points at its first child page.
+
+Images and files uploaded anywhere land in a content-addressed store served from `/_f/{hash}.ext`, so links survive page moves. The article editor's format bar and copy-paste both upload images for you.
+
+{dates}
+"""
+
+MD_BASICS = """\
+# Markdown Basics
+
+Every feature below is shown twice: first the Markdown source, then how it renders.
+
+## Headings and text
+
+```markdown
+## A section heading
+### A subsection
+
+*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a
+[link to the front page](/). Plain URLs become links automatically:
+https://example.com — and a hard line break
+is just a newline.
+```
+
+## A section heading
+### A subsection
+
+*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a [link to the front page](/). Plain URLs become links automatically: https://example.com — and a hard line break
+is just a newline.
+
+## Lists and quotes
+
+```markdown
+- One
+- Two
+  - Nested
+
+1. First
+2. Second
+
+> A blockquote. The URL space is the author's:
+> pretty slugs at the root, nesting only where
+> the content is genuinely structured.
+```
+
+- One
+- Two
+  - Nested
+
+1. First
+2. Second
+
+> A blockquote. The URL space is the author's:
+> pretty slugs at the root, nesting only where
+> the content is genuinely structured.
+
+## Code
+
+Fenced blocks get server-side syntax highlighting:
+
+````markdown
+```python
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
+```
+````
+
+```python
+def greet(name: str) -> str:
+    return f"Hello, {name}!"
+```
+
+## Tables
+
+```markdown
+| Feature | Status |
+|---------|--------|
+| Pages   | done   |
+| Images  | done   |
+```
 
 | Feature | Status |
 |---------|--------|
 | Pages   | done   |
 | Images  | done   |
-| Comments| later  |
+"""
 
-Footnotes work too.[^1]
+MD_EXTENSIONS = """\
+# Markdown Extensions
+
+Markdown extensions enabled on this site, source first, then rendered.
+
+## Footnotes
+
+```markdown
+Footnotes work inline.[^1]
 
 [^1]: Rendered at the bottom of the page, with a back-reference.
+```
+
+Footnotes work inline.[^1]
+
+[^1]: Rendered at the bottom of the page, with a back-reference.
+
+## Definition lists
+
+```markdown
+Term
+: A definition list entry.
+
+Another term
+: With its definition.
+```
+
+Term
+: A definition list entry.
+
+Another term
+: With its definition.
+
+## Task lists
+
+```markdown
+- [x] Write content in Markdown
+- [x] Attach images to pages
+- [x] Make tasks clickable on the rendered page
+```
+
+- [x] Write content in Markdown
+- [x] Attach images to pages
+- [x] Make tasks clickable on the rendered page
+
+## Admonitions
+
+```markdown
+!!! note
+    An admonition block for notes, warnings, tips...
+```
+
+!!! note
+    An admonition block for notes, warnings, tips...
+
+## Sub- and superscript
+
+```markdown
+H~2~O and x^2^ + y^2^ = z^2^.
+```
+
+H~2~O and x^2^ + y^2^ = z^2^.
+
+## Raw HTML
+
+HTML passes through untouched — useful for `<kbd>` keys, `<details>` sections, embedded media:
+
+```html
+<details><summary>Click to expand</summary>Hidden content.</details>
+```
+
+<details><summary>Click to expand</summary>Hidden content.</details>
+
+## Smart typography
+
+The typographer is on, so straight quotes become curly, `--` becomes -- and `...` becomes ...
 """
 
-EDITING = """\
+MD_LAYOUT = """\
-Pages are written in Markdown with extensions. Everything below is plain Markdown source — no special support from the article is needed for the site's layout or scroll effects.
+## Images and figures
 
-## Images
+An image standing alone in its paragraph becomes a `<figure>`; its title becomes the caption. Inline images within text stay plain.
 
-Upload a file (`PUT /_api/files/{filename}`) and it lands in the content-addressed store, served immutable from `/_f/{hash}.ext` — an absolute URL that survives page moves:
+```markdown
-
+![Abstract shapes](shapes.svg "A captioned figure")
-```
-![Abstract shapes](/_f/....svg "A captioned figure"){.right width=280}
 ```
 
-![Abstract shapes](shapes.svg "A captioned figure, floated right with an attribute class"){.right width=280}
+![Abstract shapes](shapes.svg "A captioned figure")
 
-The title becomes a `<figcaption>`, and brace attributes (the attrs plugin) control positioning: `{.right}`, `{.left}`, `{.wide}`, plus plain attributes like `width=280`. Absolute and external URLs pass through unchanged.
+## Positioning with attributes
 
-## Text
+Brace attributes (the attrs plugin) control placement: `{.right}` and `{.left}` float, `{.wide}` breaks out of the text column, and plain attributes like `width=280` pass through.
 
-*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and [links](/about) as usual. Blockquotes:
+```markdown
-
+![Abstract shapes](shapes.svg "Floated right"){.right width=280}
-> The URL space is the author's. Pretty slugs at the root, nesting only
-> where the content is genuinely structured.
-
-## Code
-
-```python
-def render(text: str, page_path: str) -> str:
-    return md.render(text, {"page_path": page_path})
 ```
-"""
 
-LONG_READ = """\
+![Abstract shapes](shapes.svg "Floated right — text wraps around it"){.right width=280}
-*An essay long enough to scroll, to demonstrate the gentle reveal of headings, figures and code blocks as they enter the viewport.*
+
+Floated images let the text wrap around them, like this paragraph does. Relative image paths resolve against the page's own path, so attached files travel with the page. Uploaded files get content-addressed `/_f/` URLs that never break, no matter where the page moves.
+
+{.wide} artwork spans the full content width:
+
+```markdown
+![Dunes](dunes.svg "Full-width artwork"){.wide}
+```
+
+![Dunes](dunes.svg "Full-width artwork between sections"){.wide}
+
+## Datelines
+
+A `{dates}` line on its own expands to the article's published/updated dateline:
+
+```markdown
+{dates}
+```
 
 {dates}
 
-![Layered dunes](dunes.svg "Full-width artwork between sections"){.wide}
+## The page title
 
-## Chapter one
+If your Markdown contains its own `# heading`, the page title is not repeated as a second h1 — it still supplies the `<title>` and the menu labels.
-
-The distinction between a blog and a website is largely an accident of history. Early content management systems filed everything under "posts", stamped them with a date, and arranged them in reverse chronological order under a `/blog/` prefix. Anything else was a "page", which lived somewhere else entirely, often in a separate editing interface with separate rules.
-
-But readers do not think in these terms. A reader follows a link, reads what is there, and follows another link. The URL is a promise about where something lives, not about which database table it came from. Pagerite therefore treats every piece of content as a page: named, addressable, and rendered on the fly.
-
-## Chapter two
-
-Consider what happens to URLs when the tooling leads the design. You get addresses like `/cms/frontpage` or `/blog/post1` — the name of the machine leaking into the name of the thing. The slug should be chosen by the author, the way a book's title is chosen, and it should sit at the root of the site like the title sits on the cover.
-
-Nesting still has its place. Structured content — documentation, a series, a portfolio — benefits from paths that mirror the structure. The navigation on this very site is derived from the paths: open a section, and you see what it contains. No menu editor, no duplication of structure in two places.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
-
-## Chapter three
-
-On the reading experience itself: motion on the web is usually either absent or obnoxious. The interesting middle ground is motion that acknowledges the reader's own movement — the scroll. Elements that fade in as they enter the viewport give the page a sense of depth, as if the content were arriving just in time.
-
-Crucially, none of this may depend on the article. The author writes Markdown; the effects come from the layout. And when the reader prefers reduced motion, everything must hold still.
-
-Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
-
-```text
-Quis autem vel eum iure reprehenderit
-qui in ea voluptate velit esse quam nihil
-molestiae consequatur, vel illum qui
-dolorem eum fugiat quo voluptas nulla pariatur?
-```
-
-At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
-
-## Chapter four
-
-Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
-
-Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. And so we arrive back where we started: the blog and the website were one thing all along. [Return to the front page](/).
 """
 
-NOTES_ON_URLS = """\
+GALLERY = """\
-A URL is part of the content. A few rules of thumb I keep coming back to:
+Pages can attach images and position them freely. The vector artwork here is generated SVG; the woodblock print is Hokusai's *The Great Wave off Kanagawa* (public domain, via Wikimedia Commons).
 
-- Pick slugs like book titles, not like database keys.
+![The Great Wave off Kanagawa](great-wave.jpg "Hokusai, c. 1831 — full-bleed with {.wide}"){.wide}
-- Nest only when the structure is real.
-- Once published, a URL is a promise. Redirect if you must break it.
 
-> Cool URIs don't change; uncool ones at least apologise.
+A wide image escapes the text column for emphasis between sections. No HTML needed — just Markdown and an attribute.
 
-That's all. Short posts are posts too.
+![Shapes](shapes.svg "Floated left with {.left}"){.left width=240}
+
+This text wraps around a left-floated figure. The caption comes from the image title, the float from `{.left width=240}` — brace attributes on the image itself.
+
+![Abstract waves](waves.svg "Floated right with {.right}"){.right width=240}
+
+Mixing floats in one article is fine. Both images were uploaded to this page and referenced by relative path, so the whole page (images included) can be moved in the structure tree without breaking anything.
 """
 
-CANVAS_NIGHTS = """\
+NIGHT_SKY = """\
-This post's banner is not an image at all — it's a `<canvas>` animated by a few lines of JavaScript embedded in the page's banner HTML.
+This page's banner is not an image or a code snippet — it's the **stars** banner design, picked from a dropdown in the banner editor (🖊️ in the banner corner). Nothing is stored in the page beyond that choice.
 
-Banners on this site are arbitrary markup: an image, a gradient div, or a small animated scene like the one above. Subpages inherit the nearest banner up their path, so a whole section can share one look.
+Banner designs are folders in `pagerite/themes/{name}/` — a `banner.css` plus a `banner.html` or `banner.svg` — so a design can be anything from a static gradient to an animated canvas like the starfield above. This site ships `stars` and `eyes` (a critter in the grass), and themes can bring their own.
 
-```js
+Subpages inherit the nearest banner and design up their path, so a whole section can share one look. This page is a leaf: set a design here and nothing else is affected.
-// the essence of the banner above
-stars.forEach(s => { s.x = (s.x + s.speed * dt) % 1 })
-```
 
-No build step, no framework — the snippet is stored with the page and dropped into the header as-is.
+A page can also carry its own banner HTML — an `<img>`, a styled div, a canvas with a script — which renders *on top of* the design's artwork, so author code always wins. But most of the time, picking a design is all you need.
+"""
+
+# Moby-Dick; or, The Whale (1851), Herman Melville — public domain.
+# Chapter 1, abridged and headed. A real long-read: flowing sections,
+# figures, a list — not a feature showcase. (Engravings: Augustus
+# Burnham Shute's illustrations for the 1892 edition, public domain.)
+LOOMINGS = """\
+*The opening of Herman Melville's Moby-Dick (1851), abridged — here to show what a longer article feels like: the multi-column layout on wide screens, images breaking up the text, and the gentle reveal as sections scroll into view.*
+
+{dates}
+
+![Dunes at dusk](dunes.svg "Full-width artwork between sections"){.wide}
+
+## The watery part of the world
+
+Call me Ishmael. Some years ago — never mind how long precisely — having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off — then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.
+
+![Moby Dick breeches a whaleboat](md-whale.jpg "Augustus Burnham Shute, 1892 — public domain"){.right width=320}
+
+There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs — commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.
+
+Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see? — Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster — tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?
+
+But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand — miles of them — leagues. Inlanders all, they come from lanes and alleys, streets and avenues — north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?
+
+## Meditation and water
+
+Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries — stand that man on his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region. Should you ever be athirst in the great American desert, try this experiment, if your caravan happen to be supplied with a metaphysical professor. Yes, as every one knows, meditation and water are wedded for ever.
+
+### The artist's problem
+
+But here is an artist. He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. What is the chief element he employs? There stand his trees, each with a hollow trunk, as if a hermit and a crucifix were within; and here sleeps his meadow, and there sleep his cattle; and up from yonder cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way, reaching to overlapping spurs of mountains bathed in their hill-side blue. But though the picture lies thus tranced, and though this pine-tree shakes down its sighs like leaves upon this shepherd's head, yet all were vain, unless the shepherd's eye were fixed upon the magic stream before him.
+
+Why did the poor poet of Tennessee, upon suddenly receiving two handfuls of silver, deliberate whether to buy him a coat, which he sadly needed, or invest his money in a pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy with a robust healthy soul in him, at some time or other crazy to go to sea? Why upon your first voyage as a passenger, did you yourself feel such a mystical vibration, when you were first told that you and your ship were now out of sight of land? Why did the old Persians hold the sea holy? Why did the Greeks give it a separate deity, and own brother of Jove? Surely all this is not without meaning. And still deeper the meaning of that story of Narcissus, who because he could not grasp the tormenting, mild image he saw in the fountain, plunged into it and was drowned. But that same image, we ourselves see in all rivers and oceans. It is the image of the ungraspable phantom of life; and this is the key to it all.
+
+## A simple sailor, right before the mast
+
+Now, when I say that I am in the habit of going to sea whenever I begin to grow hazy about the eyes, and begin to be over conscious of my lungs, I do not mean to have it inferred that I ever go to sea as a passenger. For to go as a passenger you must needs have a purse, and a purse is but a rag unless you have something in it. Besides, passengers get sea-sick — grow quarrelsome — don't sleep of nights — do not enjoy themselves much, as a general thing; — no, I never go as a passenger; nor, though I am something of a salt, do I ever go to sea as a Commodore, or a Captain, or a Cook. I abandon the glory and distinction of such offices to those who like them. For my part, I abominate all honorable respectable toils, trials, and tribulations of every kind whatsoever. It is quite as much as I can do to take care of myself, without taking care of ships, barques, brigs, schooners, and what not.
+
+No, when I go to sea, I go as a simple sailor, right before the mast, plumb down into the forecastle, aloft there to the royal mast-head. True, they rather order me about some, and make me jump from spar to spar, like a grasshopper in a May meadow. And at first, this sort of thing is unpleasant enough. It touches one's sense of honor, particularly if you come of an old established family in the land, the Van Rensselaers, or Randolphs, or Hardicanutes. And more than all, if just previous to putting your hand into the tar-pot, you have been lording it as a country schoolmaster, making the tallest boys stand in awe of you. The transition is a keen one, I assure you, from a schoolmaster to a sailor, and requires a strong decoction of Seneca and the Stoics to enable you to grin and bear it. But even this wears off in time.
+
+![The final chase](md-chase.jpg "A. Burnham Shute's illustration of the final chase, 1892 — public domain")
+
+What of it, if some old hunks of a sea-captain orders me to get a broom and sweep down the decks? What does that indignity amount to, weighed, I mean, in the scales of the New Testament? Do you think the archangel Gabriel thinks anything the less of me, because I promptly and respectfully obey that old hunks in that particular instance? Who ain't a slave? Tell me that. Well, then, however the old sea-captains may order me about — however they may thump and punch me about, I have the satisfaction of knowing that it is all right; that everybody else is one way or other served in much the same way — either in a physical or metaphysical point of view, that is; and so the universal thump is passed round, and all hands should rub each other's shoulder-blades, and be content.
+
+And finally, what shall I say of the reasons for going a-whaling? Chief among them:
+
+- The overwhelming idea of the great whale himself — such a portentous and mysterious monster roused all my curiosity.
+- The undeliverable, nameless perils of the whale, and the attendants of the wondrous world of waters.
+- The tormenting, mild image of the ungraspable phantom of life, seen in all rivers and oceans.
+
+These were the things that finally drew me to the sea — and if they but knew it, almost all men cherish very nearly the same feelings towards the ocean with me.
 """
 
 SMALL_RELEASES = """\
@@ -154,39 +348,15 @@ Software wants to be shipped. The longer a change sits unmerged, the more it rot
 A release is a conversation with reality. Small releases keep the conversation lively.
 """
 
-CANVAS_BANNER = """\
+ABOUT = """\
-<canvas id="stars"></canvas>
+This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content written in Markdown and rendered on the fly.
-<script>
-(() => {
-  const c = document.getElementById("stars");
-  const ctx = c.getContext("2d");
-  const fit = () => { c.width = c.clientWidth; c.height = c.clientHeight; };
-  fit();
-  addEventListener("resize", fit);
-  const stars = Array.from({ length: 110 }, () => ({
-    x: Math.random(), y: Math.random(),
-    r: Math.random() * 1.4 + 0.3, v: Math.random() * 0.05 + 0.01,
-  }));
-  let prev = performance.now();
-  (function frame(now) {
-    if (!c.isConnected) return;
-    const dt = Math.min(now - prev, 100); prev = now;
-    ctx.fillStyle = "#0b0e1d";
-    ctx.fillRect(0, 0, c.width, c.height);
-    ctx.fillStyle = "#cdd6ff";
-    for (const s of stars) {
-      s.x = (s.x + s.v * dt / 1000) % 1;
-      ctx.beginPath();
-      ctx.arc(s.x * c.width, s.y * c.height, s.r, 0, 7);
-      ctx.fill();
-    }
-    requestAnimationFrame(frame);
-  })(prev);
-})();
-</script>
-"""
 
-BLOG_BANNER = '<div style="background: linear-gradient(100deg, #14243d, #3d2b6b 45%, #7c5cff 75%, #ff5c8a)"></div>'
+- [How to edit this site](/docs/editing)
+- [Markdown features](/docs/markdown/basics)
+- [The showcase](/showcase/gallery)
+
+*Replace this page with whatever your site is about.*
+"""
 
 WAVES_SVG = """\
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 400">
@@ -231,33 +401,61 @@ DUNES_SVG = """\
 """
 
 #: path -> (title, markdown, {filename: bytes}, banner HTML, menu order,
-#: banner design). Banners are deliberately set only on select sub pages
+#: banner design). Designs demonstrate inheritance: the "showcase" label
-#: (not the front page), so the theme's default design shows elsewhere.
+#: picks "eyes" (all its pages show the critter), and the leaf
-#: Note there are deliberately no "docs" or "blog" landing pages: those
+#: "showcase/night-sky" overrides that with "stars". Elsewhere the active
-#: labels are created without content, so they render a placeholder page
+#: theme's own design shows.
-#: and their nav links point at the first child (see views.first_leaf).
+#: Note there are deliberately no "docs" or "showcase" landing pages:
+#: those labels are created without content, so they render a placeholder
+#: page and their nav links point at the first child (see
+#: views.first_leaf). "showcase" is seeded explicitly (empty markdown,
+#: which the seeder leaves as content=None) just to carry the design.
 PAGES: dict[str, tuple[str, str, dict[str, bytes], str, float, str | None]] = {
     "": ("Welcome", WELCOME, {"waves.svg": WAVES_SVG.encode()}, "", 1, None),
-    "about": ("About", ABOUT, {}, "", 2, None),
+    "about": ("About", ABOUT, {}, "", 3, None),
-    "docs/editing": (
+    "docs/editing": ("Editing This Site", EDITING, {}, "", 1, None),
-        "Writing Content",
+    "docs/markdown/basics": (
-        EDITING,
+        "Basics",
-        {"shapes.svg": SHAPES_SVG.encode()},
+        MD_BASICS,
+        {},
         "",
         1,
         None,
     ),
-    "blog/the-long-read": (
+    "docs/markdown/extensions": ("Extensions", MD_EXTENSIONS, {}, "", 2, None),
-        "The Long Read",
+    "docs/markdown/images-and-layout": (
-        LONG_READ,
+        "Images and Layout",
-        {"dunes.svg": DUNES_SVG.encode()},
+        MD_LAYOUT,
-        BLOG_BANNER,
+        {"shapes.svg": SHAPES_SVG.encode(), "dunes.svg": DUNES_SVG.encode()},
+        "",
+        3,
+        None,
+    ),
+    "showcase": ("Showcase", "", {}, "", 4, "eyes"),
+    "showcase/gallery": (
+        "Gallery",
+        GALLERY,
+        {
+            "great-wave.jpg": _asset("great-wave.jpg"),
+            "shapes.svg": SHAPES_SVG.encode(),
+            "waves.svg": WAVES_SVG.encode(),
+        },
+        "",
         1,
         None,
     ),
-    # The eyes critter is a named banner design (pagerite/themes/eyes/),
+    "showcase/loomings": (
-    # not code embedded in the page.
+        "Loomings — a Long Read",
-    "blog/notes-on-urls": ("Notes on URLs", NOTES_ON_URLS, {}, "", 2, "eyes"),
+        LOOMINGS,
-    "blog/canvas-nights": ("Canvas Nights", CANVAS_NIGHTS, {}, CANVAS_BANNER, 3, None),
+        {
-    "blog/small-releases": ("Small Releases", SMALL_RELEASES, {}, "", 4, None),
+            "dunes.svg": DUNES_SVG.encode(),
+            "md-whale.jpg": _asset("md-whale.jpg"),
+            "md-chase.jpg": _asset("md-chase.jpg"),
+        },
+        "",
+        2,
+        None,
+    ),
+    "showcase/night-sky": ("Night Sky", NIGHT_SKY, {}, "", 3, "stars"),
+    "showcase/small-releases": ("Small Releases", SMALL_RELEASES, {}, "", 4, None),
 }

pagerite/themes/corporate/banner.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMax slice">
   <defs>
     <linearGradient id="cbg" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0" class="cb-bg0"/>

pagerite/themes/nitro/banner.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 360" preserveAspectRatio="xMidYMax slice">
   <defs>
     <linearGradient id="flare" x1="0" y1="0" x2="1" y2="0">
       <stop offset="0" stop-color="#ff6a00"/>

pagerite/themes/purple/banner.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMid slice">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 300" preserveAspectRatio="xMidYMax slice">
   <defs>
     <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
       <stop offset="0" stop-color="#2b1b4d"/>

pagerite/themes/stars/banner.css

@@ -0,0 +1,7 @@
+/* Stars banner design: a drifting starfield (banner.html — canvas + script
+   inlined by the backend into #page-banner). Fixed-height stage matching
+   the canvas. */
+
+#banner {
+  height: 240px;
+}

pagerite/themes/stars/banner.html

@@ -0,0 +1,52 @@
+<canvas id="stars"></canvas>
+<style>
+  #stars {
+    width: 100%;
+    height: 240px;
+    display: block;
+  }
+</style>
+<script><!--
+(() => {
+  const c = document.getElementById('stars')
+  const ctx = c.getContext('2d')
+  const DPR = devicePixelRatio || 1
+
+  const fit = () => {
+    const w = Math.max(1, c.clientWidth)
+    const h = Math.max(1, c.clientHeight)
+    c.width = Math.round(w * DPR)
+    c.height = Math.round(h * DPR)
+    ctx.setTransform(DPR, 0, 0, DPR, 0, 0)
+  }
+
+  fit()
+  addEventListener('resize', fit)
+
+  const stars = Array.from({ length: 110 }, () => ({
+    x: Math.random(),
+    y: Math.random(),
+    r: Math.random() * 1.4 + 0.3,
+    v: Math.random() * 0.05 + 0.01
+  }))
+
+  let prev = performance.now()
+  ;(function frame(now) {
+    if (!c.isConnected) return
+    const w = c.clientWidth
+    const h = c.clientHeight
+    const dt = Math.min(now - prev, 100)
+    prev = now
+    ctx.fillStyle = '#0b0e1d'
+    ctx.fillRect(0, 0, w, h)
+    ctx.fillStyle = '#cdd6ff'
+    for (const s of stars) {
+      s.x = (s.x + (s.v * dt) / 1000) % 1
+      ctx.beginPath()
+      ctx.arc(s.x * w, s.y * h, s.r, 0, 7)
+      ctx.fill()
+    }
+    requestAnimationFrame(frame)
+  })(prev)
+})()
+</script>

pagerite/themes/summer/banner.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 1600 320"
-     preserveAspectRatio="xMidYMid slice">
+     preserveAspectRatio="xMidYMax slice">
 
   <defs>
     <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">

pagerite/views.py

@@ -15,8 +15,10 @@ own URL renders a placeholder page (render_category).
 """
 
 from pathlib import Path
+from html import unescape
 import json
 import os
+import re
 
 from html5tagger import HTML, Document, E, Template
 
@@ -110,27 +112,45 @@ def _editor_css_url(vite_url: str | None) -> str | None:
 
 def _layout(
     modules: list[str] = (),
+    stylesheets: list[str] = (),
     custom_css: str = "",
     theme: str = "",
     banner_design: str = "",
     favicon: str = "",
+    social: dict[str, str] | None = None,
+    extra_meta: dict[str, str] | None = None,
 ) -> Template:
     """Page layout template with standard asset URLs and ES-module scripts.
 
     Stylesheets use ``blocking="render"`` so the browser waits for them before
     showing the page, avoiding a flash of unstyled content. Order matters and
     is fixed: base (Vite build, absent in dev where Vite injects it from JS),
-    theme and banner design (backend-served from pagerite/themes/), then the
+    theme and banner design (backend-served from pagerite/themes/), entry-
-    user's custom CSS last so it always wins.
+    specific stylesheets (e.g. overlayscrollbars.css), then the user's custom
+    CSS last so it always wins.
 
     In dev, pagerite.js re-appends the backend-rendered theme/design links
     (and the custom CSS) after the Vite-injected base styles, keeping this
     order intact.
+
+    ``social`` maps meta keys to contents: ``og:*``/``article:*`` go out as
+    property attributes, everything else (description, twitter:*) as name.
+
+    ``extra_meta`` is emitted as plain ``<meta name="..." content="...">``
+    tags after the editor meta tags; used for page-specific import hints.
     """
     doc = Document(E.Title, lang="en")
     # Responsive layout (see the 48rem breakpoint in pagerite.css) needs
     # the real device width, not the default 980px layout viewport.
     doc.meta(name="viewport", content="width=device-width, initial-scale=1")
+    for key, value in (social or {}).items():
+        if value:
+            if key.startswith(("og:", "article:")):
+                doc.meta(property=key, content=value)
+            elif key == "canonical":
+                doc.link(rel="canonical", href=value)
+            else:
+                doc.meta(name=key, content=value)
     # A custom favicon (from the site editor) is linked explicitly; without
     # one, browsers fall back to the build's /favicon.ico by convention.
     if favicon:
@@ -142,6 +162,8 @@ def _layout(
     doc.meta(name="pagerite:editor-src", content=script[-1])
     if editor_css:
         doc.meta(name="pagerite:editor-css", content=editor_css)
+    for key, value in (extra_meta or {}).items():
+        doc.meta(name=key, content=value)
     # Stylesheet links carry stable ids so the site editor's hot swap can
     # keep each sheet at its rendered position (see swapRegions).
     vite_url = os.environ.get("PAGERITE_VITE_URL")
@@ -153,6 +175,8 @@ def _layout(
     for id_, url in sheets:
         if url:
             doc.link(rel="stylesheet", href=url, blocking="render", id=id_)
+    for url in stylesheets:
+        doc.link(rel="stylesheet", href=url, blocking="render")
     for src in modules:
         doc.script(src=src, type="module")
     if custom_css.strip():
@@ -426,6 +450,87 @@ def page_content(menu: dict[str, Node], path: str) -> HTML:
     return HTML(str(doc))
 
 
+_FIRST_P = re.compile(r"<p[^>]*>(.*?)</p>", re.S)
+_TAG = re.compile(r"<[^>]+>")
+_IMG_TAG = re.compile(r"<img\b[^>]*>")
+_VIDEO_TAG = re.compile(r"<video\b[^>]*>")
+_ATTR_SRC = re.compile(r'src="([^"]+)"')
+_ATTR_CLASS = re.compile(r'class="([^"]*)"')
+
+
+def _share_media(html: str, base_url: str) -> tuple[str, str]:
+    """(image, video) share URLs from the rendered article.
+
+    Image preference: an image with class "hero" (author override, may
+    appear anywhere in the article), then the first raster image (SVGs
+    rasterize poorly or not at all on many social scrapers), then the
+    first SVG. Video: the first <video> — og:video is in the OGP spec and
+    honored mainly by Facebook; X/Twitter ignores it. Absolute URLs are
+    built from the request base, scrapers cannot use relative ones.
+    """
+    if not base_url:
+        return "", ""
+
+    def absolute(src: str) -> str:
+        src = unescape(src)
+        return src if src.startswith(("http://", "https://")) else f"{base_url}{src}"
+
+    hero = raster = svg = video = ""
+    for tag in _IMG_TAG.findall(html):
+        if not (src := _ATTR_SRC.search(tag)):
+            continue
+        src = src.group(1)
+        cls = _ATTR_CLASS.search(tag)
+        if cls and "hero" in cls.group(1).split():
+            hero = src
+            break
+        if src.lower().split("?")[0].endswith(".svg"):
+            svg = svg or src
+        else:
+            raster = raster or src
+            # Keep scanning: a later hero still wins.
+    for tag in _VIDEO_TAG.findall(html):
+        if m := _ATTR_SRC.search(tag):
+            video = m.group(1)
+            break
+    image = hero or raster or svg
+    return (absolute(image) if image else "", absolute(video) if video else "")
+
+
+def _social_meta(
+    node: Node, path: str, title: str, html: str, brand: str, base_url: str,
+) -> dict[str, str]:
+    """Open Graph/Twitter/SEO meta tags for a content page.
+
+    Heuristics over the rendered article: the description is the first
+    paragraph's text (truncated at ~200 chars on a word boundary), the
+    share image the article's first <img> — authors lead with their most
+    representative figure. Absolute URLs are built from the request's base
+    (social scrapers cannot use relative ones).
+    """
+    url = f"{base_url}/{path}" if base_url else ""
+    m = _FIRST_P.search(html)
+    text = unescape(_TAG.sub("", m.group(1) if m else ""))
+    text = " ".join(text.split())
+    if len(text) > 200:
+        text = text[:200].rsplit(" ", 1)[0] + "…"
+    image, video = _share_media(html, base_url)
+    return {
+        "description": text,
+        "canonical": url,
+        "og:type": "article",
+        "og:title": title,
+        "og:description": text,
+        "og:url": url,
+        "og:site_name": brand,
+        "og:image": image,
+        "og:video": video,
+        "article:published_time": node.created.isoformat(),
+        "article:modified_time": node.modified.isoformat(),
+        "twitter:card": "summary_large_image" if image else "summary",
+    }
+
+
 def render_page(
     menu: dict[str, Node],
     path: str,
@@ -434,18 +539,24 @@ def render_page(
     theme: str = "",
     favicon: str = "",
     brand_html: str = "",
+    base_url: str = "",
 ) -> str:
     """Render a full HTML page for the slug path."""
     node = resolve(menu, path)[-1]
     title = _title(path.rpartition("/")[2], node)
+    main = page_content(menu, path)
+    social = _social_meta(node, path, title, str(main), brand, base_url)
     return str(
-        _layout(_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
+        _layout(
+            *_page_assets(), custom_css, theme, banner_design(menu, path, theme),
+            favicon, social,
+        )(
             Title=f"{title} – {brand}" if brand else title,
             Brand=_brand_link(brand, brand_html),
             Nav=nav_html(menu, path),
             Sidebar=sidebar_html(menu, path),
             Banner=banner_html(menu, path, theme),
-            Main=page_content(menu, path),
+            Main=main,
         ),
     )
 
@@ -476,7 +587,7 @@ def render_category(
         else:
             doc.p("This section has no page of its own yet.")
     return str(
-        _layout(_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
+        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
             Title=f"{title} – {brand}" if brand else title,
             Brand=_brand_link(brand, brand_html),
             Nav=nav_html(menu, path),
@@ -502,7 +613,7 @@ def render_not_found(
         doc.h1("Not Found")
         doc.p(f"No article at /{path}. If there was before, it may have been deleted.")
     return str(
-        _layout(_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
+        _layout(*_page_assets(), custom_css, theme, banner_design(menu, path, theme), favicon)(
             Title=f"Not Found – {brand}" if brand else "Not Found",
             Brand=_brand_link(brand, brand_html),
             Nav=nav_html(menu, path),
@@ -513,19 +624,23 @@ def render_not_found(
     )
 
 
-def _page_assets() -> list[str]:
+def _page_assets() -> tuple[list[str], list[str]]:
-    """Script URLs for public pages (pagerite entry).
+    """Script and stylesheet URLs for public pages (pagerite entry).
 
     Dev mode loads the entry from the Vite dev server; production uses
-    the Vite build manifest to resolve the hashed asset names.
+    the Vite build manifest to resolve the hashed asset names. CSS imported
+    by the entry (e.g. overlayscrollbars.css) is extracted by Vite and must
+    be linked separately.
     """
     vite_url = os.environ.get("PAGERITE_VITE_URL")
     if vite_url:
-        return [f"{vite_url}/src/pagerite.js"]
+        return [f"{vite_url}/src/pagerite.js"], []
     if "page" not in _asset_cache:
         manifest = _manifest()
         entry = manifest["src/pagerite.js"]
-        _asset_cache["page"] = [f"/{entry['file']}"]
+        scripts = [f"/{entry['file']}"]
+        stylesheets = [f"/{css}" for css in entry.get("css", [])]
+        _asset_cache["page"] = scripts, stylesheets
     return _asset_cache["page"]
 
 
@@ -543,3 +658,53 @@ def _editor_assets() -> tuple[list[str], str | None]:
         entry = manifest["src/main.js"]
         _asset_cache["editor"] = [f"/{entry['file']}"], _editor_css_url(None)
     return _asset_cache["editor"]
+
+
+def _analytics_assets() -> tuple[list[str], list[str]]:
+    """Script and stylesheet URLs for the analytics page entry."""
+    vite_url = os.environ.get("PAGERITE_VITE_URL")
+    if vite_url:
+        return [f"{vite_url}/src/analytics-main.js"], []
+    if "analytics" not in _asset_cache:
+        manifest = _manifest()
+        entry = manifest["src/analytics-main.js"]
+        scripts = [f"/{entry['file']}"]
+        stylesheets = [f"/{css}" for css in entry.get("css", [])]
+        _asset_cache["analytics"] = scripts, stylesheets
+    return _asset_cache["analytics"]
+
+
+def render_analytics(
+    menu: dict[str, Node],
+    brand: str = SITE_NAME,
+    custom_css: str = "",
+    theme: str = "",
+    favicon: str = "",
+    brand_html: str = "",
+) -> str:
+    """Render the analytics viewer as a normal page at /_a."""
+    page_scripts, page_stylesheets = _page_assets()
+    analytics_scripts, analytics_stylesheets = _analytics_assets()
+    scripts = page_scripts + analytics_scripts
+    stylesheets = page_stylesheets + analytics_stylesheets
+    doc = E.article
+    with doc:
+        doc.div(id="analytics-app")
+    return str(
+        _layout(
+            scripts,
+            stylesheets,
+            custom_css,
+            theme,
+            banner_design(menu, "_a", theme),
+            favicon,
+            extra_meta={"pagerite:analytics-src": analytics_scripts[0]},
+        )(
+            Title=f"Analytics – {brand}" if brand else "Analytics",
+            Brand=_brand_link(brand, brand_html),
+            Nav=nav_html(menu, "_a"),
+            Sidebar=sidebar_html(menu, "_a"),
+            Banner=banner_html(menu, "_a", theme),
+            Main=HTML(str(doc)),
+        ),
+    )

pyproject.toml

@@ -22,8 +22,10 @@ dependencies = [
     "html5tagger>=2.0.0",
     "kanta>=0.8.1",
     "markdown-it-py>=4.2.0",
+    "maxminddb>=3.1.1",
     "mdit-py-plugins>=0.6.1",
     "pygments>=2.20.0",
+    "ua-parser>=1.0.2",
 ]
 
 [project.scripts]
@@ -45,8 +47,9 @@ packages = ["pagerite"]
 
 [tool.hatch.build]
 # `only-packages` drops directories without an __init__.py, so the theme
-# files must be force-included as artifacts (like the frontend build).
+# files and seed image assets must be force-included as artifacts (like
-artifacts = ["pagerite/frontend-build", "pagerite/themes"]
+# the frontend build).
+artifacts = ["pagerite/frontend-build", "pagerite/themes", "pagerite/seed-assets"]
 only-packages = true
 
 [tool.hatch.build.targets.sdist.hooks.custom]

scripts/fake_traffic.py

@@ -0,0 +1,420 @@
+#!/usr/bin/env -S uv run --script
+# /// script
+# requires-python = ">=3.14"
+# dependencies = [
+#     "httpx>=0.28.1",
+#     "playwright>=1.45.0",
+# ]
+# ///
+"""Generate fake browser visits and crawler hits for a Pagerite site.
+
+The script drives a real Chromium browser with Playwright, clicking visible
+internal links so the site's own analytics JavaScript records normal visits
+(POST /_a).  Browser sessions and crawler GETs send a small rotating pool of
+real public IPs in X-Forwarded-For, so the backend can reverse-DNS and GeoIP
+them instead of seeing every hit as 127.0.0.1.
+
+Sessions start with a Poisson inter-arrival delay (``--arrival-rate``) to
+spread traffic out a little, while still keeping the overall run fast.
+
+Run against a local dev server, e.g.:
+
+    uv run scripts/fake_traffic.py http://localhost:3200 -b 8 -c 20
+
+Repeat whenever you want more traffic; each run appends new events to the
+site's analytics file.
+"""
+
+from __future__ import annotations
+
+import argparse
+import logging
+import random
+import sys
+import time
+from collections.abc import Sequence
+from dataclasses import dataclass
+from datetime import UTC, datetime
+from typing import Any
+from urllib.parse import urljoin, urlparse
+
+import httpx
+
+logging.basicConfig(level=logging.INFO, format="%(message)s")
+logger = logging.getLogger("fake-traffic")
+
+
+@dataclass(frozen=True)
+class BrowserProfile:
+    name: str
+    user_agent: str
+    accept_language: str
+    viewport: tuple[int, int]
+
+
+@dataclass(frozen=True)
+class CrawlerProfile:
+    name: str
+    user_agent: str
+
+
+BROWSER_PROFILES: list[BrowserProfile] = [
+    BrowserProfile(
+        "chrome-desktop",
+        "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
+        "(KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
+        "en-US,en;q=0.9",
+        (1366, 768),
+    ),
+    BrowserProfile(
+        "safari-desktop",
+        "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 "
+        "(KHTML, like Gecko) Version/17.5 Safari/605.1.15",
+        "en-GB,en;q=0.9",
+        (1440, 900),
+    ),
+    BrowserProfile(
+        "firefox-desktop",
+        "Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
+        "en-CA,en;q=0.8,fr;q=0.5",
+        (1920, 1080),
+    ),
+    BrowserProfile(
+        "chrome-mobile",
+        "Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 "
+        "(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36",
+        "es-ES,es;q=0.9",
+        (390, 844),
+    ),
+]
+
+CRAWLER_PROFILES: list[CrawlerProfile] = [
+    CrawlerProfile(
+        "googlebot",
+        "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Chrome/128.0.0.0 Safari/537.36",
+    ),
+    CrawlerProfile(
+        "bingbot",
+        "Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm) Chrome/128.0.0.0 Safari/537.36",
+    ),
+    CrawlerProfile(
+        "duckduckbot", "DuckDuckBot/1.1; (+http://duckduckgo.com/duckduckbot.html)"
+    ),
+    CrawlerProfile("curl", "curl/8.5.0"),
+]
+
+# Small pool of real public resolver IPs. They have real reverse-DNS and GeoIP
+# entries, and cycling through a handful avoids hammering DNS during traffic
+# generation.
+SOURCE_IPS: list[str] = [
+    "8.8.8.8",
+    "1.1.1.1",
+    "9.9.9.9",
+    "208.67.222.222",
+    "185.228.168.9",
+    "94.140.14.14",
+]
+
+
+def _sleep(base: float, jitter: float) -> None:
+    time.sleep(max(0.0, base + random.uniform(-jitter, jitter)))
+
+
+def _source_ip(index: int) -> str:
+    """Pick one of the small pool of real public IPs."""
+    return SOURCE_IPS[index % len(SOURCE_IPS)]
+
+
+def _poisson_wait(rate: float) -> float:
+    """Return an exponential inter-arrival time for the given Poisson rate."""
+    if rate <= 0:
+        return 0.0
+    return random.expovariate(rate)
+
+
+def _collect_links(page: Any) -> list[dict[str, Any]]:
+    """Return internal links from the current page, excluding the current page."""
+    return page.evaluate(
+        """() => {
+            const loc = new URL(location.href);
+            return Array.from(document.querySelectorAll('a[href]'))
+                .filter(a => {
+                    try {
+                        const u = new URL(a.href);
+                        return u.origin === loc.origin
+                            && !u.pathname.startsWith('/_')
+                            && !u.pathname.startsWith('/auth')
+                            && u.pathname !== '/favicon.ico'
+                            && u.pathname !== loc.pathname;
+                    } catch { return false; }
+                })
+                .map(a => {
+                    const rect = a.getBoundingClientRect();
+                    return {
+                        href: a.href,
+                        text: (a.innerText || a.title || '').trim().slice(0, 60),
+                        visible: !!(rect.width && rect.height && rect.top < window.innerHeight && rect.bottom > 0),
+                    };
+                });
+        }"""
+    )
+
+
+def _click_link(page: Any, link: dict[str, Any], timeout: float = 10.0) -> bool:
+    """Click an internal link and wait for the client-side URL to change."""
+    start_url = page.url
+    try:
+        # Prefer Playwright's native click; fall back to a JS click if the
+        # locator cannot be resolved or times out.
+        try:
+            page.locator(f"a[href='{link['href']}']").first.click(timeout=2000)
+        except Exception:  # noqa: BLE001
+            clicked = page.evaluate(
+                """(href) => {
+                    const a = Array.from(document.querySelectorAll('a[href]'))
+                        .find(el => el.href === href);
+                    if (a) { a.click(); return true; }
+                    return false;
+                }""",
+                link["href"],
+            )
+            if not clicked:
+                return False
+        # Wait for the client-side navigation to update the URL.
+        deadline = time.time() + timeout
+        while time.time() < deadline:
+            if page.url != start_url:
+                return True
+            page.wait_for_timeout(100)
+        return False
+    except Exception as exc:  # noqa: BLE001
+        logger.debug("click failed on %s: %s", link.get("href"), exc)
+        return False
+
+
+def _run_browser_session(
+    base: str,
+    paths: Sequence[str],
+    profile: BrowserProfile,
+    session_index: int,
+    max_clicks: int,
+    stay: tuple[float, float],
+    headless: bool,
+    fake_ip: str,
+) -> dict[str, Any]:
+    from playwright.sync_api import sync_playwright
+
+    trail: list[str] = []
+    start_time = datetime.now(UTC)
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(
+                headless=headless,
+                args=["--no-sandbox", "--disable-dev-shm-usage"],
+            )
+            context = browser.new_context(
+                user_agent=profile.user_agent,
+                viewport={"width": profile.viewport[0], "height": profile.viewport[1]},
+                extra_http_headers={
+                    "X-Forwarded-For": fake_ip,
+                    "Accept-Language": profile.accept_language,
+                },
+            )
+            page = context.new_page()
+            entry = random.choice(paths) if paths else "/"
+            page.goto(urljoin(base, entry), wait_until="networkidle")
+            trail.append(page.url)
+
+            for _ in range(max_clicks):
+                _sleep(random.uniform(*stay) / 2, 0.3)
+                links = _collect_links(page)
+                visible = [item for item in links if item.get("visible")]
+                if not visible:
+                    visible = links
+                if not visible:
+                    break
+                link = random.choice(visible)
+                ok = _click_link(page, link)
+                if not ok:
+                    # Retry once with any link (sometimes visible calc misses nav).
+                    alt = random.choice(links) if links else None
+                    if alt and alt is not link:
+                        ok = _click_link(page, alt)
+                    if not ok:
+                        break
+                page.wait_for_load_state("networkidle")
+                trail.append(page.url)
+                _sleep(random.uniform(*stay), 0.5)
+
+            browser.close()
+
+        return {
+            "profile": profile.name,
+            "entry": entry,
+            "ip": fake_ip,
+            "pages": len(trail),
+            "trail": [urlparse(u).path or "/" for u in trail],
+            "duration": (datetime.now(UTC) - start_time).total_seconds(),
+        }
+    except Exception as exc:  # noqa: BLE001
+        logger.warning("browser session failed: %s", exc)
+        return {"profile": profile.name, "error": str(exc), "trail": trail}
+
+
+def _run_crawler_hit(
+    base: str,
+    paths: Sequence[str],
+    profile: CrawlerProfile,
+    profile_index: int,
+    session_index: int,
+) -> dict[str, Any]:
+    path = random.choice(paths) if paths else "/"
+    url = urljoin(base, path)
+    fake_ip = _source_ip(session_index)
+    headers = {
+        "User-Agent": profile.user_agent,
+        "X-Forwarded-For": fake_ip,
+        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+        "Accept-Language": "en-US,en;q=0.5",
+    }
+    try:
+        with httpx.Client(follow_redirects=True, timeout=15.0) as client:
+            r = client.get(url, headers=headers)
+        return {
+            "profile": profile.name,
+            "path": path,
+            "status": r.status_code,
+            "ip": fake_ip,
+        }
+    except Exception as exc:  # noqa: BLE001
+        return {"profile": profile.name, "path": path, "error": str(exc)}
+
+
+def _parse_args(argv: Sequence[str] | None) -> argparse.Namespace:
+    parser = argparse.ArgumentParser(
+        description="Generate fake traffic for a Pagerite site.",
+        formatter_class=argparse.ArgumentDefaultsHelpFormatter,
+    )
+    parser.add_argument("url", help="Base URL of the Pagerite site")
+    parser.add_argument(
+        "-b",
+        "--browsers",
+        type=int,
+        default=5,
+        help="Number of simulated browser sessions",
+    )
+    parser.add_argument(
+        "-c", "--crawlers", type=int, default=10, help="Number of crawler HTTP GETs"
+    )
+    parser.add_argument(
+        "--max-clicks",
+        type=int,
+        default=6,
+        help="Max internal link clicks per browser session",
+    )
+    parser.add_argument(
+        "--stay",
+        type=float,
+        nargs=2,
+        default=[2.0, 6.0],
+        metavar=("MIN", "MAX"),
+        help="Seconds to stay on a page before clicking again",
+    )
+    parser.add_argument(
+        "--headless",
+        action=argparse.BooleanOptionalAction,
+        default=True,
+        help="Run browsers headlessly",
+    )
+    parser.add_argument(
+        "--arrival-rate",
+        type=float,
+        default=1.0,
+        help="Average arrivals per second (Poisson). 0 disables inter-arrival waits",
+    )
+    parser.add_argument("--seed", type=int, default=None, help="Random seed")
+    parser.add_argument("-v", "--verbose", action="store_true", help="Debug logging")
+    return parser.parse_args(argv)
+
+
+def main(argv: Sequence[str] | None = None) -> int:
+    args = _parse_args(argv)
+    if args.verbose:
+        logger.setLevel(logging.DEBUG)
+
+    random.seed(args.seed)
+    base = args.url.rstrip("/")
+
+    # Discover content paths from the public page tree if we can.
+    paths: list[str] = []
+    try:
+        r = httpx.get(urljoin(base, "/_api/pages"), timeout=10.0)
+        if r.status_code == 200:
+            paths = [page["path"] for page in r.json() if page.get("has_content")]
+    except Exception as exc:  # noqa: BLE001
+        logger.debug("could not fetch page list: %s", exc)
+    if not paths:
+        paths = ["/"]
+
+    logger.info(
+        "Generating fake traffic against %s (%d content paths, %d browsers, %d crawlers)",
+        base,
+        len(paths),
+        args.browsers,
+        args.crawlers,
+    )
+
+    results: list[dict[str, Any]] = []
+
+    for i in range(args.browsers):
+        if i > 0:
+            wait = _poisson_wait(args.arrival_rate)
+            logger.debug("waiting %.2fs before next browser session", wait)
+            time.sleep(wait)
+        profile = random.choice(BROWSER_PROFILES)
+        fake_ip = _source_ip(i)
+        logger.info(
+            "[%d/%d] browser session: %s (ip=%s)",
+            i + 1,
+            args.browsers,
+            profile.name,
+            fake_ip,
+        )
+        result = _run_browser_session(
+            base,
+            paths,
+            profile,
+            i,
+            args.max_clicks,
+            (args.stay[0], args.stay[1]),
+            args.headless,
+            fake_ip,
+        )
+        results.append(result)
+        logger.debug("  trail: %s", result.get("trail", []))
+
+    for i in range(args.crawlers):
+        if i > 0:
+            wait = _poisson_wait(args.arrival_rate)
+            logger.debug("waiting %.2fs before next crawler hit", wait)
+            time.sleep(wait)
+        profile_index = i % len(CRAWLER_PROFILES)
+        profile = CRAWLER_PROFILES[profile_index]
+        fake_ip = _source_ip(i)
+        logger.info(
+            "[%d/%d] crawler hit: %s (ip=%s)",
+            i + 1,
+            args.crawlers,
+            profile.name,
+            fake_ip,
+        )
+        result = _run_crawler_hit(base, paths, profile, profile_index, i)
+        results.append(result)
+
+    ok = sum(1 for r in results if "error" not in r)
+    logger.info("Done: %d/%d requests succeeded.", ok, len(results))
+    return 0 if ok == len(results) else 1
+
+
+if __name__ == "__main__":
+    sys.exit(main())