Compare commits

...
29 Commits
Author SHA1 Message Date
LeoVasanko 29f8fac013 Slightly prettier analytics URL 2026-08-21 23:58:00 +00:00
LeoVasanko 6199e5a69e Support for UTM tags in transition graph as source sites. 2026-08-21 23:50:01 +00:00
LeoVasanko 375b4b6bdb analytics: unify visitor cell across visits, crawlers and abuse tables 2026-08-21 23:32:46 +00:00
LeoVasanko fdb3e42d6f analytics: shared Client struct, grouped abuse paths, unified visitor cell 2026-08-21 23:16:15 +00:00
LeoVasanko 51a6a16221 Neater abuse table formatting. 2026-08-21 22:31:37 +00:00
LeoVasanko 0798e24d24 Desaturated house emojis 2026-08-21 22:03:55 +00:00
LeoVasanko 3be2d08ac9 SI formatting of large visitor numbers. 2026-08-21 21:36:57 +00:00
LeoVasanko b7d5b23ae6 Cleaner formatting of utm tags in visitor table. 2026-08-21 21:22:16 +00:00
LeoVasanko 6eaa1c1a8b analytics: 24h day view with bar chart for precise realtime stats. Tables redesigned with cleaner layout. Tracking article read times. Adjust connection graph visualizations by time range. Other cleanup and supporting systems. 2026-08-21 20:14:04 +00:00
LeoVasanko f341d22aa0 Improved fake traffic generation with abuse bots, utm tags etc. 2026-08-21 20:10:41 +00:00
LeoVasanko 1a479ceb24 Add --dbip CLI flag to auto-download/update the DB-IP MMDB database.
Downloads the latest dbip-city-lite-YYYY-MM.mmdb.gz before starting the
server, skipping when the local database is current, falling back to the
previous month on 404, and removing older databases after an update.
Promotes httpx to a runtime dependency.
2026-08-21 03:09:04 +00:00
LeoVasanko ff553d018a Default scheme, host and port for fake_traffic script. 2026-08-21 02:52:53 +00:00
LeoVasanko c807d48a13 Add more external content in seed data. 2026-08-21 02:50:36 +00:00
LeoVasanko 9c383c1c8b Change default port mapping to 8100/8200/8210 (prod/vite/dev). Vite gets different port to avoid caching problems when switching between it and prod. 2026-08-21 02:49:18 +00:00
LeoVasanko 462e995adc Add external link (referer/outgoing) display on connection graph. 2026-08-21 02:44:54 +00:00
LeoVasanko ea069b98da Fix analytics app not mounting on fetch-navigation to /_a
load() queried the live document for the pagerite:analytics-src meta,
but the swap never touches <head> — the meta only exists in the fetched
doc, so the app never mounted unless /_a was loaded directly. Also cache
the fetched HTML so the post-swap preload doesn't re-GET the page we
just navigated to.
2026-08-21 01:53:39 +00:00
LeoVasanko deb5419c47 analytics improvements:
- keep visitor charts y-axis minimum range at 10
- keep 'all' chart x-axis minimum span at 30 days
- group crawler hits by (ip, ua) and list top pages visited, show crawler page load counts as N× prefix
- store and display geoip city, keep geoip country overwrite
- stream live updates over WebSocket /_api/ws/analytics
- include family ring arcs in transition map crop bounds
- remove top UA summary, limit crawlers to 10 and visits to 20
- human-readable relative timestamps with UTC tooltip
2026-08-21 01:36:58 +00:00
LeoVasanko 242b62784c 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
2026-08-20 23:37:02 +00:00
LeoVasanko f78229bd30 Refactor analytics to /_a instead of under article pages. 2026-08-20 23:16:51 +00:00
LeoVasanko 7f4bc8efa4 Ignore devserver health probe in analytics tracking
The devserver polls /?from=devserver.py to check backend readiness.
Without this exclusion each poll is recorded as a crawler hit. Only
exclude the exact case: front page, that query string, and 127.0.0.1,
so remote visitors cannot hide traffic by copying the parameter.
2026-08-20 22:16:11 +00:00
LeoVasanko 3100010335 Transition map: count-scaled edges, bead flows, external links
- Edge widths grow logarithmically with the connection count (~1 px at
  a single count, uncapped); connections below 1% of total traffic are
  pruned, bounding the graph to ~100 edges.
- Beads: per-direction flows emitted at a rate linear in the count,
  each bead simulated independently in JS (no in-flight limit), offset
  onto right-hand lanes so opposing flows don't collide, running under
  the node circles with a glow.
- External links: referer origins as a node row above the map, exit
  origins fanned outwards from their source page.
- Transitions are now stored per 5-minute bucket (sparse
  from -> to -> bucket -> count) so the graph filters by time range
  like the other series; legacy analytics files are discarded.
2026-08-20 22:06:29 +00:00
LeoVasanko 7556bb7f4f analytics: add crawler tracking, pretty UA/IP display and copy-to-clipboard 2026-08-20 20:31:04 +00:00
LeoVasanko 1a1a21712e Add country flags. 2026-08-20 19:47:56 +00:00
LeoVasanko f0e6162f02 Extended analytics data collection. 2026-08-20 19:40:05 +00:00
LeoVasanko b4e8fad090 Implement analytics feature
Add server-side visit analytics collection, a public-page ping endpoint,
and a full-screen AnalyticsView for admins.

Backend:
- Add pagerite/analytics.py: Analytics/Visit model, Store, and persistence
- Wire /_a ping endpoint and GET /_api/analytics into pagerite/app.py

Frontend:
- Add full-screen AnalyticsView with visitor charts and transition map
- Add VisitorCharts and TransitionGraph subcomponents
- Add analytics JS helpers in frontend/src/analytics/
- Send navigation pings from frontend/src/pagerite.js
- Mount AnalyticsView from frontend/src/main.js
- Document the feature in docs/analytics.md and update AGENTS.md
2026-08-20 18:43:57 +00:00
LeoVasanko 11f8de2df5 Fix pretty scrollbars not appearing in production. 2026-08-19 16:33:44 +00:00
LeoVasanko 81f08e7760 Updated docs 2026-08-19 16:11:42 +00:00
LeoVasanko 1d65a57fdf SEO/social meta for content pages; full-height site editor
- views.py: description, canonical, Open Graph and twitter:card tags
  from heuristics over the rendered article — first paragraph as
  description, share image prefers a {.hero} image, then first raster,
  then first SVG; first <video> becomes og:video; published/modified
  times from the node. Absolute URLs from the request base.
- SiteEditor: panel fills the full window height; the brand-HTML and
  custom-CSS CodeMirror windows grow to share leftover space equally
  instead of fixed max-heights.
2026-08-19 15:52:24 +00:00
LeoVasanko e175b39f35 Full height site editor panel. 2026-08-19 02:19:30 +00:00
36 changed files with 6004 additions and 606 deletions
+2
View File
@@ -2,6 +2,8 @@
!.gitignore !.gitignore
*.lock *.lock
*.kantadb *.kantadb
pagerite.analytics.json
dbip-*.mmdb*
/pagerite/frontend-build /pagerite/frontend-build
package-lock.json package-lock.json
+27 -306
View File
@@ -5,297 +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). 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 ## 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 only when the database is first
created, via a `@kanta.bootstrap` handler in `app.py`.
- `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 (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 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`); standalone banner designs
(no theme.css) ship as `eyes` (a canvas critter in the grass) and
`stars` (a drifting starfield)) 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 ## 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: - 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 - 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. - 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. - 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. - 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) - `async with Kanta(Data(),...) as kanta:` (or await kanta.open/close)
- `with kanta.transaction(...) as data:` - transactions only for writes - `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) - `data` may be referenced directly to read anywhere and to modify in transactions (`as data` is just a shorthand access)
@@ -303,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`. - 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 - 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 - 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 ## Conventions
- Keep dependencies minimal; add via `uv add` and mention it. - 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.
+1 -3
View File
@@ -1,5 +1,3 @@
# Pagerite # 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.
+249
View File
@@ -0,0 +1,249 @@
# 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`, `Client`, `Visit`,
`CrawlerHit`, `AbuseHit`) 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 `WebSocket /_api/ws/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 full URL. This is the
exit-link record; the user may continue navigating afterwards (new tab,
back), so the exit URL is not necessarily the last trail entry. Outbound
links are stored by full URL so several links to the same domain remain
distinct.
- **Excluded**: back/forward (popstate) navigations, navigation involving
the analytics page itself (`/_a`), and everything while the user has the
editor open (`body.editing`). Admin noise, not visits.
- **Admins**: when SSO is in use and the session is known to be an admin,
the client still pings but adds `hide=1`. The server then records
nothing — and if the same client session already had a visit from before
logging in, that visit is removed from the JSON along with the counts
recorded when it was created (site visit, entry view, entry transition).
Views/transitions logged by later pings inside such a visit lack
per-event timestamps and are left as-is. With no auth proxy (dev/test)
"admin" is everyone's state, so `hide` stays 0 and everything is recorded.
- 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.
- **Client records**: the visitor's IP (IPv4 or IPv6 /64 network), raw
`User-Agent` and extracted `Accept-Language` tag are hashed with blake3;
the first 6 bytes identify a shared `Client` record. The `Client` stores
the full IP, `User-Agent`, compact `ua_pretty`, `lang`, initial
`country` from the language-region subtag, and asynchronously-filled
`country`/`city` from DB-IP geoip plus reverse-DNS `host`. Visits,
crawler hits and abuse hits all reference this record by its hash, so
client metadata is stored once instead of repeated per event.
- The visitor IP is stored in the `Client`. A reverse-DNS lookup is
attempted for each new client and the result, when available, is 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 `country`/`city`. These
lookups run in background tasks after the event is stored, so the `/_a`
response is never delayed. The decompressed `dbip-*.mmdb` file is kept in
the repository root and ignored by git. The CLI flag `--dbip`
(`uv run pagerite --dbip`) downloads the latest
`dbip-city-lite-YYYY-MM.mmdb.gz` from DB-IP before the server starts,
skipping the download when the local database is already current and
removing older versions after an update; without the flag only an existing
file is used.
- **Crawler hits**: every document GET is queued in RAM as a pending crawler
hit. If a ping from the same client arrives within 10 seconds the hit is
discarded; otherwise it is written to `crawlers`. Crawlers do not count as
visits or views. The `Accept-Language` header is stored on the shared
`Client` immediately; reverse-DNS host names and DB-IP geoip
country/city are filled in asynchronously, just like for real visits. In
the analytics viewer, crawler hits are grouped by client hash and shown as
a trail of internal pages that crawler visited; the crawler table lists
the most active crawlers first rather than the most recent hits.
- **Abuse (scanner) hits**: a 404 for a telltale path — any URL segment
starting with a dot (`/.env`, `/.git/config`) or ending in `.php`
classifies the source IP as abuse immediately, and ten plain 404s from one
IP do too. Classification reclassifies history: all earlier crawler hits
from that IP (persisted and pending) move to the `abuse` list, so a
random-UA scanner no longer pollutes the crawler stats of the legitimate
bot it impersonates. Once classified, every document GET and 404 from the
IP is recorded as an abuse hit with the full request path (query string
included), and its pings are ignored. The classified IP set (`abuse_ips`)
is persisted in the JSON file; the plain-404 counters are RAM-only. In the
viewer, abuse hits are grouped by IP (never by client/UA — scanners
randomize theirs) in a separate "Abuse" table. Identical paths are
collapsed into one entry with their hit count; flagged paths that
triggered classification are lifted to the top, followed by other 404s and
then document GETs from the abuser. Raw User-Agent strings are shown one
per line with their occurrence counts, and the full lists are click-to-copy.
## Visits and sessions
There are no cookies. A visit is tied together by a client hash — the first
6 bytes of a blake3 digest over the prettified IP (IPv4 unchanged, IPv6
/64 network), the raw `User-Agent` string and the extracted
`Accept-Language` tag. The first ping from a client hash 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 client-hash → visit map and the IP →
entry-referer/UTM tables are in-memory only; client metadata is stored in
`Analytics.clients` keyed by the client hash.
Each `Client` record:
- `ip` — visitor IP address (first `X-Forwarded-For` hop, or direct peer),
- `host` — reverse-DNS host name for `ip` when resolvable, else `""`,
- `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,
- `city` — city name from the DB-IP MMDB lookup, when available,
- `ua` — raw `User-Agent` string,
- `ua_pretty` — compact display form of the UA (browser/OS/device) when
parsable, otherwise the raw string.
Each `Visit` record:
- `start` — timestamp of the first event,
- `entry` — first page (path) seen,
- `referer` — external https origin of the initial load, `""` for direct,
- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
- `trail` — everything seen afterwards in first-seen order: page paths and
external exit URLs. Re-visiting an already seen page (incl. the entry)
does not append.
- `utm``utm_*` query parameters from the landing URL, as a dict.
- `read` — active reading time per path (seconds), keyed by path.
Each `CrawlerHit` record:
- `start` — timestamp of the document GET,
- `entry` — page path requested,
- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
- `referer` — external https origin of the request, `""` for direct/none,
- `query` — raw query string of the request.
Each `AbuseHit` record:
- `start` — timestamp of the request,
- `path` — full request path including the query string (e.g. `/.env?x=1`),
- `client` — 6-byte blake3 hash referencing `Analytics.clients`,
- `flag` — true for the path that triggered abuse classification (telltale
path or the 404 that crossed the threshold),
- `is_404` — true for 404 responses, false for document GETs from the
abuser.
Crawler hits are grouped by client hash in the analytics viewer; abuse hits
are grouped by IP alone (resolved from the referenced `Client`). In the
Abuse table identical paths are collapsed with their counts; flagged paths
that triggered classification are lifted to the top, followed by other 404s
and then document GETs from the abuser. Within each category paths are
sorted by count descending, then by their earliest hit.
## 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
stream comes from `WebSocket /_api/ws/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 hash (`#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 minimum y-axis
range is 10 so tiny values such as a single visit are not stretched to a
fractional scale).
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 is a rolling 365-day window ending at now, re-bucketed to daily points,
with boundary lines at months/years. All uses the full data reach, but keeps
at least the past 30 days so the chart never collapses to a tiny sliver when
the site is young. 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 sources show as a node row above the
map: each visit is attributed to `utm_campaign`, then `utm_source`, then the
referer origin, then any other `utm_*` tag, so UTM-tagged visits are grouped
under their campaign/source value rather than the referer domain. A UTM
source node only links to its referer when every visit carrying that tag
came from the same origin. External exits are small nodes fanned outwards
from their source page), per-page view
counts, the top transitions and the 50 most recent visit trails. Data is
streamed live over `WebSocket /_api/ws/analytics`, which pushes the latest
JSON snapshot on connect and again whenever the analytics file is updated
(with a small server-side debounce to avoid flooding under high traffic).
+29
View File
@@ -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`.
+35
View File
@@ -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.
+30 -228
View File
@@ -1,253 +1,55 @@
# Pagerite Design Principles # 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 ## 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 ## 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 ## 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 ## 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). - Unpublished pages are hidden from both nav and URL access (404).
## Reading experience ## 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 ## 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
- Editing happens **in place**, in two modes opened by two pens: - 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.
+30
View File
@@ -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.
+25
View File
@@ -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.
+5
View File
@@ -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.
+37
View File
@@ -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)`.
+1
View File
@@ -18,6 +18,7 @@
"@codemirror/view": "^6.43.8", "@codemirror/view": "^6.43.8",
"@lezer/highlight": "^1.2.3", "@lezer/highlight": "^1.2.3",
"codemirror": "^6.0.2", "codemirror": "^6.0.2",
"country-flag-icons": "^1.6.20",
"overlayscrollbars": "^2.16.0", "overlayscrollbars": "^2.16.0",
"transliteration": "^2.6.1", "transliteration": "^2.6.1",
"vue": "^3.5.26", "vue": "^3.5.26",
+451
View File
@@ -0,0 +1,451 @@
<script setup>
// Analytics viewer rendered as a normal page inside #main. Receives live
// analytics data over /_api/ws/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, onUnmounted, ref, watch } from 'vue'
import { RANGES } from './analytics/time.js'
import {
calcReadStats,
calcTotalViews,
copyIp,
copyList,
formatCount,
formatAbuseRows,
formatCrawlerRows,
formatVisitRows,
} from './analytics/format.js'
import TrailLink from './TrailLink.vue'
import VisitorCell from './VisitorCell.vue'
import TransitionGraph from './TransitionGraph.vue'
import VisitorCharts from './VisitorCharts.vue'
const props = defineProps({
initialRange: { type: String, default: 'week' },
})
const ABUSE_MAX_LINES = 5
const data = ref(null)
const pageTree = ref(null)
const error = ref('')
const now = ref(Date.now())
let ws = null
let reconnectTimeout = null
let timeInterval = null
function connectAnalytics() {
if (ws) return
const proto = location.protocol === 'https:' ? 'wss:' : 'ws:'
ws = new WebSocket(`${proto}//${location.host}/_api/ws/analytics`)
ws.onopen = () => { error.value = '' }
ws.onmessage = (event) => {
try {
data.value = JSON.parse(event.data)
} catch {
error.value = 'analytics data could not be loaded'
}
}
ws.onerror = () => {
error.value = 'analytics data could not be loaded'
}
ws.onclose = () => {
ws = null
reconnectTimeout = setTimeout(connectAnalytics, 2000)
}
}
onMounted(async () => {
connectAnalytics()
now.value = Date.now()
timeInterval = setInterval(() => { now.value = Date.now() }, 1000)
// The site tree for the transition map (all pages in menu order). Not
// fatal: without it the map just narrows to pages seen in transitions.
try {
const res = await fetch('/_api/pages')
if (res.ok) pageTree.value = await res.json()
} catch { /* map just narrows to pages seen in transitions */ }
})
onUnmounted(() => {
if (reconnectTimeout) clearTimeout(reconnectTimeout)
if (timeInterval) clearInterval(timeInterval)
if (ws) {
ws.onclose = null
ws.close()
ws = null
}
})
const visits = computed(() => data.value?.visits || [])
const totalViews = computed(() => calcTotalViews(data.value?.views))
const readStats = computed(() => calcReadStats(visits.value))
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.hash = r
history.replaceState(null, '', url)
})
const clients = computed(() => data.value?.clients || {})
const visitRows = computed(() => formatVisitRows(visits.value, clients.value, pageTree.value, now.value))
const crawlers = computed(() => data.value?.crawlers || [])
const crawlerRows = computed(() => formatCrawlerRows(crawlers.value, clients.value, pageTree.value, now.value))
const abuseRows = computed(() => formatAbuseRows(data.value?.abuse || [], clients.value, now.value))
</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 :title="String(visits.length)">{{ formatCount(visits.length) }}</strong> visits</div>
<div><strong :title="String(totalViews)">{{ formatCount(totalViews) }}</strong> page views</div>
<div><strong>{{ readStats.avgMinPerVisit }}</strong> min/visit</div>
<div><strong>{{ readStats.avgArticleMedianMin }}</strong> min article read</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>trail</th>
<th>visitor</th>
<th class="last-seen">last seen</th>
</tr>
</thead>
<tbody>
<tr v-for="(v, i) in visitRows" :key="i">
<td class="trail">
<TrailLink v-if="v.refererStep" :step="v.refererStep" @close="$emit('close')" />
<span v-if="v.utm && v.utm !== '—'" class="utm-tag small muted" :title="v.utmTitle">{{ v.utm }}</span>
<TrailLink v-for="(s, si) in v.trail" :key="si" :step="s" @close="$emit('close')" />
</td>
<VisitorCell
:ip="v.ip"
:ip-display="v.ipDisplay"
:ua="v.ua"
:ua-raw="v.uaRaw"
:country="v.country"
:city="v.city"
:lang="v.lang"
:lang-display="v.langDisplay"
:is-host="v.isHost"
/>
<td class="last-seen muted"
:title="v.lastSeenLocal"
@click="copyList(v.lastSeenIso, $event)">{{ v.lastSeen }}</td>
</tr>
</tbody>
</table>
</div>
<p v-else class="empty">no visits recorded yet</p>
<div v-if="crawlerRows.length" class="visit-table-wrap">
<table class="visit-table">
<thead>
<tr>
<th>pages crawled</th>
<th>visitor</th>
<th class="last-seen">last seen</th>
</tr>
</thead>
<tbody>
<tr v-for="(c, i) in crawlerRows" :key="i">
<td class="trail">
<TrailLink v-for="(s, si) in c.pages" :key="si" :step="s" :count="s.count" @close="$emit('close')" />
</td>
<VisitorCell
:ip="c.ip"
:ip-display="c.ipDisplay"
:ua="c.ua"
:ua-raw="c.uaRaw"
:country="c.country"
:city="c.city"
:lang="c.lang"
:lang-display="c.langDisplay"
:is-host="c.isHost"
/>
<td class="last-seen muted"
:title="c.lastSeenLocal"
@click="copyList(c.lastSeenIso, $event)">{{ c.lastSeen }}</td>
</tr>
</tbody>
</table>
</div>
<p v-else class="empty">no crawler hits recorded yet</p>
<div v-if="abuseRows.length" class="visit-table-wrap">
<table class="visit-table">
<thead>
<tr>
<th>paths abused</th>
<th>visitor</th>
<th class="last-seen">last seen</th>
</tr>
</thead>
<tbody>
<tr v-for="(a, i) in abuseRows" :key="i">
<td class="trail abuse-list clickable-list"
@click="copyList(a.allPaths, $event)">
<div class="abuse-items">
<span v-for="(p, pi) in a.paths.slice(0, ABUSE_MAX_LINES)" :key="pi"
class="inline-item">
<small v-if="p.count > 1" class="muted">{{ formatCount(p.count) }}×</small>{{ p.path }}
</span>
<small v-if="a.paths.length > ABUSE_MAX_LINES" class="muted">+{{ a.paths.length - ABUSE_MAX_LINES }} more</small>
</div>
</td>
<VisitorCell
:ip="a.ip"
:ip-display="a.ipDisplay"
:ua="a.ua"
:ua-raw="a.uaRaw"
:country="a.country"
:city="a.city"
:lang="a.lang"
:lang-display="a.langDisplay"
:is-host="a.isHost"
:variant-count="a.clientCount"
/>
<td class="last-seen muted"
:title="a.lastSeenLocal"
@click="copyList(a.lastSeenIso, $event)">{{ a.lastSeen }}</td>
</tr>
</tbody>
</table>
</div>
</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;
}
.analytics-view a {
color: var(--text);
text-decoration: none;
}
.analytics-view a:hover { color: var(--accent); }
.analytics-view :deep(.muted) { color: var(--muted); }
.analytics-view :deep(.small) { font-size: 0.75em; }
.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-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 .last-seen {
width: 5rem;
text-align: right;
white-space: nowrap;
cursor: pointer;
}
.visit-table .trail {
max-width: 20rem;
overflow-wrap: break-word;
}
.visit-table .trail a,
.visit-table .trail-link {
display: inline-block;
max-width: 8rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
.visit-table .trail > * + * {
margin-left: 0.5rem;
}
.visit-table .utm-tag {
display: inline-block;
max-width: 100%;
padding: 0.05rem 0.4rem;
border: 1px solid var(--line);
border-radius: 0.25rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
}
.visit-table .clickable-list {
cursor: pointer;
max-width: 22rem;
}
.visit-table .abuse-items {
display: flex;
flex-wrap: wrap;
gap: 0.15rem 0.5rem;
align-items: baseline;
}
.visit-table .inline-item {
max-width: 18rem;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
word-break: keep-all;
hyphens: none;
}
.visit-table :deep(.clickable-ip),
.visit-table .clickable-list,
.visit-table .last-seen {
cursor: pointer;
position: relative;
}
.visit-table :deep(.copy-popup) {
position: absolute;
bottom: calc(100% + 0.25rem);
left: 50%;
transform: translateX(-50%);
padding: 0.15rem 0.4rem;
background: var(--text, CanvasText);
color: var(--bg, Canvas);
border-radius: 0.25rem;
font-size: 0.75rem;
white-space: nowrap;
pointer-events: none;
z-index: 10;
}
.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>
+19 -24
View File
@@ -561,7 +561,7 @@ onUnmounted(() => {
</div> </div>
</section> </section>
<section class="block" @paste="onBrandPaste"> <section class="block grow" @paste="onBrandPaste">
<div class="block-head"> <div class="block-head">
<span class="field-label">brand code (replaces the brand link)</span> <span class="field-label">brand code (replaces the brand link)</span>
<button <button
@@ -581,7 +581,7 @@ onUnmounted(() => {
<div ref="brandEl" class="brand-cm" /> <div ref="brandEl" class="brand-cm" />
</section> </section>
<section class="block"> <section class="block grow">
<div class="block-head"> <div class="block-head">
<span class="field-label">custom CSS (applies to every page, on top of the theme)</span> <span class="field-label">custom CSS (applies to every page, on top of the theme)</span>
</div> </div>
@@ -595,6 +595,7 @@ onUnmounted(() => {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow-y: auto; overflow-y: auto;
background: var(--surface);
} }
.block { .block {
@@ -606,6 +607,13 @@ onUnmounted(() => {
background: var(--surface); 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 { .block-head {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -775,42 +783,29 @@ onUnmounted(() => {
border-color: var(--accent); 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 { .css-cm {
flex: 1;
min-height: 0;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
} }
.brand-cm :deep(.cm-editor),
.css-cm :deep(.cm-editor) { .css-cm :deep(.cm-editor) {
max-height: 12rem; height: 100%;
font-size: 0.85rem; font-size: 0.85rem;
} }
.brand-cm :deep(.cm-scroller),
.css-cm :deep(.cm-scroller) { .css-cm :deep(.cm-scroller) {
overflow: auto; overflow: auto;
} }
.brand-cm :deep(.cm-gutters),
.css-cm :deep(.cm-gutters) { .css-cm :deep(.cm-gutters) {
display: none; display: none;
} }
+22
View File
@@ -0,0 +1,22 @@
<script setup>
import { formatCount } from './analytics/format.js'
defineProps({
step: { type: Object, required: true },
count: { type: Number, default: 0 },
})
defineEmits(['close'])
</script>
<template>
<a class="trail-link"
:href="step.path"
:title="count > 1 ? `${step.title} (${count} hits)` : step.title"
:target="step.external ? '_blank' : undefined"
:rel="step.external ? 'noopener' : undefined"
@click="(e) => { if (!step.external) $emit('close') }">
<small v-if="count > 1" class="muted">{{ formatCount(count) }}×</small>
<span>{{ step.slug }}</span>
</a>
</template>
+239
View File
@@ -0,0 +1,239 @@
<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, WEEK } from './analytics/time.js'
import { formatCount } from './analytics/format.js'
import {
TNODE_R,
BEAD_R,
BEAD_SPEED,
buildTransitionGraph,
filterTransitionsByRange,
filterViewsByRange,
filterVisitsByRange,
} 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 visualScale = computed(() => {
const { t0, t1 } = window.value
if (t0 != null && t1 != null) return WEEK / (t1 - t0)
// 'all': scale by the actual data span.
const times = new Set()
for (const buckets of Object.values(props.data?.views || {})) {
for (const k of Object.keys(buckets)) times.add(Date.parse(k))
}
const arr = [...times]
if (arr.length < 2) return 1
return WEEK / (Math.max(...arr) - Math.min(...arr))
})
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 filteredVisits = computed(() =>
filterVisitsByRange(props.data?.visits, window.value.t0, window.value.t1),
)
const graph = computed(() =>
filteredData.value
? buildTransitionGraph(filteredData.value, props.pageTree, filteredVisits.value, visualScale.value)
: 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 MAX_BEAD_RATE = 120 // upper bound on total beads per second
const startBeads = (flows) => {
cancelAnimationFrame(rafId)
beads.value = []
if (!flows?.length) return
if (matchMedia('(prefers-reduced-motion: reduce)').matches) return
// Cap the total bead emission rate so a busy range cannot spawn enough
// beads to kill the page. Existing per-range time scaling is preserved;
// this is only a proportional emergency throttle when the limit is hit.
const totalRate = flows.reduce((s, f) => s + 1 / f.interval, 0)
const scale = totalRate > MAX_BEAD_RATE ? MAX_BEAD_RATE / totalRate : 1
const live = [] // { flow, t0 } — one entry per bead in flight
const now = performance.now()
const emitters = flows.map((flow) => {
const interval = (flow.interval / scale) * 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">
<defs>
<!-- Unit-radius circle; only the portion near the bottom is used. -->
<path id="tnode-label-arc" d="M 0,-1 A 1,1 0 1,0 0,1 A 1,1 0 1,0 -0.001,-1" />
</defs>
<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', e.external && 'tconn-exit']">
<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">
<a v-if="x.href" :href="x.href" target="_blank" rel="noopener" :title="x.path">
<circle :cx="x.x" :cy="x.y" :r="x.r"
:class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
<text :transform="`translate(${x.x}, ${x.y}) scale(${x.r - 4})`" class="tnodeslug" :style="{ '--node-r': x.r - 4 }">
<textPath href="#tnode-label-arc" startOffset="50%" text-anchor="middle" side="right">{{ x.label }}</textPath>
</text>
<text :x="x.x" :y="x.y + 4" class="tnodecount">{{ formatCount(x.count) }}</text>
</a>
<g v-else :title="x.path">
<circle :cx="x.x" :cy="x.y" :r="x.r"
:class="['txnode', x.kind === 'source' ? 'txnode-source' : 'txnode-exit']" />
<text :transform="`translate(${x.x}, ${x.y}) scale(${x.r - 4})`" class="tnodeslug" :style="{ '--node-r': x.r - 4 }">
<textPath href="#tnode-label-arc" startOffset="50%" text-anchor="middle" side="right">{{ x.label }}</textPath>
</text>
<text :x="x.x" :y="x.y + 4" class="tnodecount">{{ formatCount(x.count) }}</text>
</g>
</g>
<g v-for="n in graph.nodes" :key="n.path">
<a v-if="!n.hidden" :href="n.path" :title="n.title">
<circle :cx="n.x" :cy="n.y" :r="TNODE_R" class="tnode" />
<text :transform="`translate(${n.x}, ${n.y}) scale(${TNODE_R - 4})`" class="tnodeslug" :style="{ '--node-r': TNODE_R - 4 }">
<textPath href="#tnode-label-arc" startOffset="50%" text-anchor="middle" side="right">{{ n.label }}</textPath>
</text>
<text :x="n.x" :y="n.y + 4" class="tnodecount">
{{ n.readMin ? `${formatCount(n.views)}×${n.readMin}m` : formatCount(n.views) }}
</text>
</a>
<template v-else>
<text :x="n.x" :y="n.y"
:transform="`rotate(${n.angle * 180 / Math.PI}, ${n.x}, ${n.y})`"
class="tnodehidden" text-anchor="start" dominant-baseline="middle"></text>
<text :x="n.x + Math.cos(n.angle) * 10"
:y="n.y + Math.sin(n.angle) * 10"
:transform="`rotate(${(n.angle + (Math.cos(n.angle) < 0 ? Math.PI : 0)) * 180 / Math.PI}, ${n.x + Math.cos(n.angle) * 10}, ${n.y + Math.sin(n.angle) * 10})`"
:text-anchor="Math.cos(n.angle) < 0 ? 'end' : 'start'"
class="tnodehidden" dominant-baseline="middle">{{ n.label }}</text>
</template>
</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 .tconn-exit {
fill: var(--text);
}
.tmap .tbead {
fill: var(--accent);
opacity: 0.85;
filter: drop-shadow(0 0 2.5px var(--accent));
}
.tmap .txnode {
fill: var(--bg, Canvas);
stroke-width: 1.5;
}
.tmap .txnode-source { stroke: var(--text); }
.tmap .txnode-exit { stroke: var(--text); }
.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: calc(11px / var(--node-r, 34));
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;
}
.tmap .tnodehidden {
fill: var(--text);
font-size: 9px;
}
section { margin-top: 1.8rem; }
</style>
+156
View File
@@ -0,0 +1,156 @@
<script setup>
// Visitor metadata cell shared by the recent-visits, crawlers, and abuse tables.
// Displays IP/network/host, country flag/city, UA, and language when available.
// Clicking the IP copies the full address to the clipboard.
// ``variantCount`` overrides the UA line to warn when multiple client
// fingerprints share the same IP (e.g. a scanner rotating UAs).
import { computed } from 'vue'
import * as flagSvgs from 'country-flag-icons/string/3x2'
import { copyIp, formatLang } from './analytics/format.js'
const props = defineProps({
ip: { type: String, default: '' },
ipDisplay: { type: String, default: '—' },
ua: { type: String, default: '' },
uaRaw: { type: String, default: '' },
country: { type: String, default: '' },
city: { type: String, default: '' },
lang: { type: String, default: '' },
langDisplay: { type: String, default: '' },
isHost: { type: Boolean, default: false },
variantCount: { type: Number, default: 1 },
})
const hasCountry = computed(() => !!(props.country && props.country !== '—'))
const hasCity = computed(() => !!(props.city && props.city !== '—'))
const hasLocale = computed(() => hasCountry.value || hasCity.value)
const langValue = computed(() => props.langDisplay || formatLang(props.lang))
const showLang = computed(() => langValue.value && langValue.value !== '—')
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>
<td class="visitor-cell" :class="{ 'host-cell': isHost }">
<div class="visitor-rows">
<div class="visitor-row">
<div class="locale-line">
<span v-if="flagSvg(country)" class="flag" v-html="flagSvg(country)" :title="countryName(country) || country"></span>
<template v-if="hasCity"><small class="city-name muted">{{ city }}</small></template>
<template v-else-if="!hasLocale"></template>
</div>
<div class="ip-line">
<span class="clickable-ip small muted"
:title="ip"
@click="copyIp(ip, $event)">{{ ipDisplay }}</span>
</div>
</div>
<div class="visitor-row">
<div class="ua-line">
<small v-if="variantCount > 1" class="muted variant-hint">{{ variantCount }} client variations</small>
<small v-else class="muted" :title="uaRaw">{{ ua || '—' }}</small>
</div>
<div v-if="showLang && variantCount <= 1" class="locale-lang"><small class="muted">{{ langValue }}</small></div>
</div>
</div>
</td>
</template>
<style scoped>
.visitor-cell {
width: 18em;
max-width: 18em;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
}
.visitor-cell.host-cell {
text-align: right;
}
.visitor-rows {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.visitor-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.visitor-row > * {
min-width: 0;
}
.locale-line,
.ip-line,
.ua-line {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.locale-line {
text-align: left;
display: flex;
align-items: center;
gap: 0.3rem;
}
.ip-line {
text-align: right;
}
.ua-line {
text-align: left;
}
.locale-lang {
flex: 0 0 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: right;
}
.city-name {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: middle;
}
.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;
vertical-align: middle;
}
.flag :deep(svg) {
width: 100%;
height: 100%;
display: block;
}
</style>
+216
View File
@@ -0,0 +1,216 @@
<script setup>
/**
* Visitor and page-view smoothed curves for a single shared time range.
*/
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { makeSeries } from './analytics/time.js'
import { CHART_H, CHART_W, buildChart, fmtY } from './analytics/chart.js'
const DAY_REFRESH_MS = 15000
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))
function freqLabel(unit) {
return unit === '5min' ? '5 min' : unit === 'hour' ? 'hourly' : 'daily'
}
const now = ref(Date.now())
let refreshInterval = null
onMounted(() => {
refreshInterval = setInterval(() => { now.value = Date.now() }, DAY_REFRESH_MS)
})
onUnmounted(() => {
if (refreshInterval) clearInterval(refreshInterval)
})
const visitChart = computed(() => buildChart(visitSeries.value, now.value))
const viewChart = computed(() => buildChart(viewSeries.value, now.value))
</script>
<template>
<section v-for="c in [
{ ylabel: 'visits', 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">{{ freqLabel(c.chart.unit) }} {{ c.ylabel }}</span>
<svg class="chart" :viewBox="`0 0 ${CHART_W} ${CHART_H}`"
preserveAspectRatio="none" role="img" :aria-label="`${freqLabel(c.chart.unit)} ${c.ylabel}`">
<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-if="c.chart.bars">
<rect v-for="(b, i) in c.chart.bars" :key="'b' + i"
:x="b.x" :y="b.y" :width="b.width" :height="b.height" class="bar" />
<path :d="c.chart.skyline" class="line" />
</template>
<template v-else>
<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>
</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 && 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.8rem; /* 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.8rem;
width: 2.6rem;
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 .bar {
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.8rem;
font-size: 0.7rem;
color: var(--muted);
writing-mode: vertical-rl;
white-space: nowrap;
transform: translateY(-50%) rotate(180deg);
}
section { margin-top: 1.8rem; }
.empty { color: var(--muted); }
</style>
+24
View File
@@ -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: location.hash.slice(1) || '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)
+419
View File
@@ -0,0 +1,419 @@
/**
* 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, MIN5, WEEK, mondayUTC } from './time.js'
import { formatCount } from './format.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.
* A minimum range of 10 keeps tiny near-zero values (e.g. a single visit)
* from being enlarged to a fractional scale; 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 < 10) {
max = 10
step = 2
}
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, now = Date.now()) {
if (!input || !input.series.length) return null
if (input.unit === '5min') return buildDayChart(input, now)
const { series, t0, t1, rate, binMinutes, unitMinutes, unit } = 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, unit }
}
/**
* Day view: 5-minute bars for the last 24 hours. Bars are drawn at raw
* counts; the skyline uses a projected full-bucket value for the still-open
* final bucket. The y scale is derived from the projected skyline maximum.
*/
export function buildDayChart(input, now = Date.now()) {
const { series, t0, t1 } = input
const points = series[0]?.points || []
const n = points.length
if (!n) return null
const bucketMs = (t1 - t0) / n
const bucketWidth = CHART_W / n
const gap = 0.2
const barWidth = Math.max(0.2, bucketWidth - gap)
const x = (i) => i * bucketWidth + gap / 2
const prevRaw = n > 1 ? points[n - 2].count : 0
const projected = points.map((p, i) => {
if (i !== n - 1) return p.count
const bucketStart = t0 + i * bucketMs
const elapsed = Math.max(1, Math.min(bucketMs, now - bucketStart))
// Blend the observed partial bucket with the previous full bucket:
// the longer the current bucket has run, the less we borrow from it.
const share = elapsed / bucketMs
return p.count + prevRaw * (1 - share)
})
const highest = Math.max(0, ...projected)
const { max, step, minor } = yScale(highest)
const y = (v) => PAD_TOP + (1 - Math.max(0, v) / max) * (CHART_H - PAD_TOP)
const bars = points.map((p, i) => {
const bx = x(i)
const by = y(p.count)
return {
x: bx,
y: by,
width: barWidth,
height: CHART_H - by,
raw: p.count,
projected: projected[i],
}
})
let skyline = ''
for (let i = 0; i < bars.length; i++) {
const b = bars[i]
const top = y(b.projected)
if (i === 0) {
skyline += `M${b.x},${top} H${b.x + b.width}`
} else {
skyline += ` V${top} H${b.x + b.width}`
}
}
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) })
}
}
const xticks = []
const tickStep = 3 * HOUR
const firstTick = Math.ceil(t0 / tickStep) * tickStep
for (let t = firstTick; t < t1; t += tickStep) {
if (t < t0) continue
const d = new Date(t)
xticks.push({
x: ((t - t0) / (t1 - t0)) * CHART_W,
left: ((t - t0) / (t1 - t0)) * 100,
label: `${String(d.getUTCHours()).padStart(2, '0')}:00`,
line: false,
})
}
return { bars, skyline: skyline.trim(), max, majors, minors, xticks, unit: '5min', series: [] }
}
/** 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 use the same compact formatter as text labels. */
export function fmtY(v) {
return formatCount(v)
}
+532
View File
@@ -0,0 +1,532 @@
/**
* 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
}
}
function showCopiedFeedback(el) {
if (!el || typeof document === 'undefined') return
const popup = document.createElement('span')
popup.textContent = 'Copied!'
popup.className = 'copy-popup'
popup.style.cssText =
'position:absolute;bottom:calc(100% + 0.25rem);left:50%;' +
'transform:translateX(-50%);padding:0.15rem 0.4rem;' +
'background:var(--text, CanvasText);color:var(--bg, Canvas);' +
'border-radius:0.25rem;font-size:0.75rem;white-space:nowrap;' +
'pointer-events:none;z-index:10;'
el.classList.add('has-copy-popup')
el.appendChild(popup)
setTimeout(() => {
popup.remove()
el.classList.remove('has-copy-popup')
}, 1200)
}
/** Copy the full IP to the clipboard and show a brief "Copied!" popup. */
export async function copyIp(ip, event) {
if (!ip) return
const el = event?.currentTarget
try {
await navigator.clipboard.writeText(ip)
showCopiedFeedback(el)
} catch {
/* ignore */
}
}
/** Copy arbitrary text to the clipboard and show a brief "Copied!" popup. */
export async function copyList(text, event) {
if (!text) return
const el = event?.currentTarget
try {
await navigator.clipboard.writeText(text)
showCopiedFeedback(el)
} 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
}
// Very short reads are navigation/skims, not real reading time.
export const MIN_READ_SECONDS = 10
/** Average minutes per visit and average of per-article median read minutes. */
export function calcReadStats(visits) {
const perArticle = {}
let totalVisitSeconds = 0
let visitCount = 0
for (const v of visits || []) {
const secs = Object.values(v.read || {}).filter((s) => s >= MIN_READ_SECONDS)
if (!secs.length) continue
visitCount++
totalVisitSeconds += secs.reduce((a, b) => a + b, 0)
for (const [path, s] of Object.entries(v.read || {})) {
if (s >= MIN_READ_SECONDS) {
;(perArticle[path] || (perArticle[path] = [])).push(s)
}
}
}
const avgMinPerVisit = visitCount
? Math.max(1, Math.round(totalVisitSeconds / visitCount / 60))
: 0
let articleMedianSum = 0
const articleCount = Object.keys(perArticle).length
for (const arr of Object.values(perArticle)) {
arr.sort((a, b) => a - b)
const mid = Math.floor(arr.length / 2)
const median = arr.length % 2 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2
articleMedianSum += Math.max(MIN_READ_SECONDS, median)
}
const avgArticleMedianMin = articleCount
? Math.max(1, Math.round(articleMedianSum / articleCount / 60))
: 0
return { avgMinPerVisit, avgArticleMedianMin }
}
/** 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()
}
/** Host name of an external https origin, with scheme and www. stripped. */
function externalSlug(origin) {
try {
return new URL(origin).host.replace(/^www\./, '')
} catch {
return origin.replace(/^https?:\/\//, '').replace(/^www\./, '')
}
}
/** Format one trail step: an internal page or an external https origin. */
function stepOf(path, titles) {
if (path?.startsWith('/')) {
return { path, slug: slugOf(path), title: titles.get(path) || '', external: false, home: path === '/' }
}
if (path?.startsWith('https://')) {
return {
path,
slug: externalSlug(path),
title: 'External site',
external: true,
}
}
return null
}
/**
* Human-readable relative timestamp. Adapted from cista-storage: uses
* ``Intl.RelativeTimeFormat`` for short intervals and a compact date for
* anything older than a week.
*/
export function formatWhen(ts, now = Date.now()) {
const date = new Date(ts)
const diff = date.getTime() - now
const adiff = Math.abs(diff)
const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
if (adiff <= 5000) return 'now'
if (adiff <= 60000) {
return formatter
.format(Math.round(diff / 1000), 'second')
.replace(' ago', '')
.replaceAll(' ', '\u202F')
}
if (adiff <= 3600000) {
return formatter
.format(Math.round(diff / 60000), 'minute')
.replace('utes', '')
.replace('ute', '')
.replaceAll(' ', '\u202F')
}
if (adiff <= 86400000) {
return formatter
.format(Math.round(diff / 3600000), 'hour')
.replaceAll(' ', '\u202F')
}
if (adiff <= 604800000) {
return formatter
.format(Math.round(diff / 86400000), 'day')
.replaceAll(' ', '\u202F')
}
let d = date
.toLocaleDateString('en-ie', {
weekday: 'short',
year: 'numeric',
month: 'short',
day: 'numeric',
})
.replace('Sept', 'Sep')
if (d.length === 14) d = d.replace(' ', ' \u2007')
d = d.replaceAll(' ', '\u202F').replace('\u202F', '\u00A0')
d = d.slice(0, -4) + d.slice(-2)
return d
}
/** Full UTC timestamp for tooltips, e.g. "2026-08-21 00:20:48 UTC". */
export function formatWhenTooltip(ts) {
return new Date(ts).toISOString().replace('T', ' ').replace('Z', ' UTC')
}
/** Full local timestamp for tooltips, e.g. "21 Aug 2026, 17:38:48". */
export function formatWhenLocal(ts) {
return new Date(ts).toLocaleString('en-ie', {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
})
}
/** Preserve locale case with the region/country subtag upper-cased. */
export function formatLang(value) {
if (!value || value === '—') return value
const parts = value.split('-')
if (parts.length > 1) {
parts[parts.length - 1] = parts[parts.length - 1].toUpperCase()
}
return parts.join('-')
}
/** ISO 8601 UTC timestamp without subseconds, e.g. "2026-08-21T00:20:48Z". */
export function formatWhenIso(ts) {
return `${new Date(ts).toISOString().split('.')[0]}Z`
}
/**
* Compact visitor counts: plain below 1k, then 1.2k / 10k / 1.2M.
* Truncated, not rounded.
*/
export function formatCount(n) {
if (n < 1000) return String(n)
if (n < 10000) return `${Math.trunc(n / 1000)}.${Math.trunc((n % 1000) / 100)}k`
if (n < 1_000_000) return `${Math.trunc(n / 1000)}k`
return `${Math.trunc(n / 1_000_000)}.${Math.trunc((n % 1_000_000) / 100_000)}M`
}
/**
* Format recent visits for display, newest first. Each step is a linked slug
* pointing to its article; external referers/origins are shown as their
* domain name with the full origin as the link href. The link title shows the
* article heading when known, or "External site" for origins.
*/
export function formatRecentVisits(visits, pageTree, limit = 50) {
const titles = buildTitleMap(pageTree)
return [...visits]
.reverse()
.map((v) => ({
when: new Date(v.start).toLocaleString(),
steps: [v.referer, v.entry, ...(v.trail || [])]
.map((p) => stepOf(p, titles))
.filter(Boolean),
}))
.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. ``clients`` maps client hashes to
* client records.
*/
export function countCrawlerUas(crawlers, clients) {
const counts = {}
for (const c of crawlers || []) {
const client = (clients || {})[c.client] || {}
const value = client.ua_pretty || client.ua || '(no UA)'
counts[value] = (counts[value] || 0) + 1
}
return Object.entries(counts).sort((a, b) => b[1] - a[1])
}
/**
* Reduce a reverse-DNS hostname to its right-most components that fit
* within ``limit`` characters. This keeps the meaningful main domain
* while avoiding absurdly long subdomains like ``xxx.yyy.zzz...provider.net``.
*/
export function mainDomain(host, limit = 24) {
if (!host) return host
const labels = host.split('.').filter(Boolean)
if (!labels.length) return host
const parts = [labels.pop()]
while (labels.length) {
const next = labels[labels.length - 1]
const candidate = `${next}.${parts.join('.')}`
if (candidate.length > limit) break
parts.unshift(labels.pop())
}
return parts.join('.')
}
/**
* Group raw crawler hits by client hash and format each group as a row showing
* every internal page that crawler visited. Rows are sorted by total hits,
* most active crawler first, rather than by most recent hit.
* ``clients`` maps client hashes to client records.
*/
export function formatCrawlerRows(crawlers, clients, pageTree, now = Date.now()) {
const titles = buildTitleMap(pageTree)
const groups = new Map()
for (const c of crawlers || []) {
const client = (clients || {})[c.client] || {}
const g = groups.get(c.client) || {
clientHash: c.client,
client,
lastStart: 0,
pages: new Map(),
}
const start = new Date(c.start).getTime()
if (start > g.lastStart) g.lastStart = start
if (c.entry?.startsWith('/')) {
g.pages.set(c.entry, (g.pages.get(c.entry) || 0) + 1)
}
groups.set(c.client, g)
}
const totalHits = (g) => {
let n = 0
for (const c of g.pages.values()) n += c
return n
}
return [...groups.values()]
.sort((a, b) => totalHits(b) - totalHits(a) || b.lastStart - a.lastStart)
.slice(0, 10)
.map((g) => {
const client = g.client || {}
const host = client.host || ''
const isHost = !!host
return {
lastSeen: formatWhen(g.lastStart, now),
lastSeenIso: formatWhenIso(g.lastStart),
lastSeenLocal: formatWhenLocal(g.lastStart),
pages: [...g.pages.entries()]
.sort((a, b) => b[1] - a[1])
.map(([path, count]) => ({ ...stepOf(path, titles), count })),
ip: client.ip || '',
ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
isHost,
ua: client.ua_pretty || client.ua || '—',
uaRaw: client.ua || '',
lang: client.lang || '—',
langDisplay: formatLang(client.lang),
country: client.country || '—',
city: client.city || '—',
total: totalHits(g),
}
})
}
/**
* Group abuse hits by IP and format each group as a row with the full paths
* probed. Identical paths are collapsed into one entry with their hit count.
* Flagged paths (the ones that triggered abuse classification) are lifted to
* the top, followed by other 404s, then document GETs from the abuser. Within
* each category paths are sorted by count descending, then earliest first.
* Rows are sorted by most recent hit first. Visitor metadata comes from the
* latest client hash seen for the IP; ``clientCount`` tells the visitor cell
* how many distinct client variations the IP produced. Paths are shown
* verbatim (query string included), not resolved against the page tree.
* ``clients`` maps client hashes to client records.
*/
export function formatAbuseRows(abuse, clients, now = Date.now()) {
const groups = new Map()
for (const a of abuse || []) {
const client = (clients || {})[a.client] || {}
const ip = client.ip || ''
const g = groups.get(ip) || {
ip,
pathCounts: new Map(),
clientHashes: new Set(),
lastStart: 0,
lastClient: a.client,
}
const start = new Date(a.start).getTime()
if (start > g.lastStart) {
g.lastStart = start
g.lastClient = a.client
}
const path = a.path || ''
const existing = g.pathCounts.get(path) || {
path,
count: 0,
firstStart: start,
flag: a.flag || false,
is_404: a.is_404 || false,
}
existing.count += 1
if (start < existing.firstStart) existing.firstStart = start
if (a.flag) existing.flag = true
if (!a.is_404) existing.is_404 = false
g.pathCounts.set(path, existing)
g.clientHashes.add(a.client)
groups.set(ip, g)
}
const totalHits = (g) => {
let n = 0
for (const p of g.pathCounts.values()) n += p.count
return n
}
return [...groups.values()]
.sort((a, b) => b.lastStart - a.lastStart)
.slice(0, 10)
.map((g) => {
const pathCategory = (p) => (p.flag ? 0 : p.is_404 ? 1 : 2)
const paths = [...g.pathCounts.values()].sort(
(a, b) =>
pathCategory(a) - pathCategory(b) ||
b.count - a.count ||
a.firstStart - b.firstStart,
)
const client = (clients || {})[g.lastClient] || {}
const host = client.host || ''
const isHost = !!host
return {
lastSeen: formatWhen(g.lastStart, now),
lastSeenIso: formatWhenIso(g.lastStart),
lastSeenLocal: formatWhenLocal(g.lastStart),
paths: paths.map((p) => ({
path: p.path,
count: p.count,
flag: p.flag,
is_404: p.is_404,
})),
allPaths: paths
.map((p) => (p.count > 1 ? `${p.count}× ${p.path}` : p.path))
.join('\n'),
clientCount: g.clientHashes.size,
ip: client.ip || g.ip,
ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip || g.ip) || client.ip || g.ip || '—',
isHost,
ua: client.ua_pretty || client.ua || '—',
uaRaw: client.ua || '',
lang: client.lang || '—',
langDisplay: formatLang(client.lang),
country: client.country || '—',
city: client.city || '—',
total: totalHits(g),
}
})
}
/**
* Format raw visit records as rows for a technical table. Returns objects
* with display strings; missing values become "—". ``trail`` starts with the
* external referer (when present), then the entry page and any further internal
* pages or external exit origins. Only the 20 most recent visits are shown.
* ``clients`` maps client hashes to client records.
*/
export function formatVisitRows(visits, clients, pageTree, now = Date.now()) {
const titles = buildTitleMap(pageTree)
return [...(visits || [])].reverse().slice(0, 20).map((v) => {
const client = (clients || {})[v.client] || {}
const trail = [v.entry, ...(v.trail || [])]
.map((p) => stepOf(p, titles))
.filter(Boolean)
const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
const utmValues = utmKeys.map((k) => (v.utm || {})[k]).filter(Boolean)
const utm = utmValues.length ? utmValues.join(' · ') : ''
const utmTitle = Object.entries(v.utm || {})
.map(([k, value]) => `${k}=${value}`)
.join(', ')
const dash = (s) => (s || '—')
const host = client.host || ''
const isHost = !!host
return {
lastSeen: formatWhen(v.start, now),
lastSeenIso: formatWhenIso(v.start),
lastSeenLocal: formatWhenLocal(v.start),
langDisplay: formatLang(client.lang),
trail,
refererStep: stepOf(v.referer, titles),
referer: dash(v.referer),
ip: client.ip || '',
ipDisplay: isHost ? mainDomain(host) : hostIP(client.ip) || client.ip || '—',
isHost,
lang: dash(client.lang),
country: dash(client.country),
city: dash(client.city),
ua: client.ua_pretty || client.ua || '—',
uaRaw: client.ua || '',
utm: utm || '—',
utmTitle,
}
})
}
+170
View File
@@ -0,0 +1,170 @@
/**
* 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 = {
day: { label: 'day', span: DAY, bucket: MIN5 },
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, minSpan: 30 * 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).
* Ranges without a fixed span use the full data reach, but never less than
* their configured minSpan so the chart keeps a readable minimum x scale.
*/
export function rollingSeries(buckets, rangeKey) {
const raw = rawTimes(buckets)
const times = Object.keys(raw).map(Number)
if (!times.length) return null
const { span, bucket, minSpan = 0 } = RANGES[rangeKey]
const t1 = Math.floor(Date.now() / bucket) * bucket + bucket
const earliest = Math.floor(Math.min(...times) / bucket) * bucket
const t0 = span != null
? t1 - span
: Math.min(earliest, t1 - minSpan)
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',
}
}
/**
* Day view: raw 5-minute bucket counts for the current 24-hour window.
* No smoothing or rate conversion is applied; counts are used as-is.
*/
export function daySeries(buckets) {
const raw = rawTimes(buckets)
const now = Date.now()
const { span, bucket } = RANGES.day
const t1 = Math.floor(now / bucket) * bucket + bucket
const t0 = t1 - span
const points = []
for (let t = t0; t < t1; t += bucket) {
points.push({ t, count: raw[t] || 0 })
}
return {
series: [{ points, label: '', opacity: 1, area: false }],
t0,
t1,
rate: 1,
binMinutes: bucket / 60e3,
unitMinutes: bucket / 60e3,
unit: '5min',
}
}
/** Dispatch to daily, weekly or rolling series based on the selected range. */
export function makeSeries(buckets, rangeKey) {
if (rangeKey === 'day') return daySeries(buckets)
if (rangeKey === 'week') return weeklySeries(buckets)
return 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 }
}
+806
View File
@@ -0,0 +1,806 @@
/**
* 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 sources appear as nodes in a row above the map. Sources are
* identified from visit records in this order: utm_campaign, utm_source,
* referer, then other utm_* tags. Visits with a UTM tag are grouped under
* that tag's value, not under the referer domain. A UTM source node only
* becomes a clickable link when every visit carrying that UTM tag came
* from the same referer. External exits are full-size nodes just outside
* their source page, angled away from the center. Each distinct full exit
* URL is its own node. Self-loops (reload pings) are skipped.
*/
import { MIN_READ_SECONDS } from './format.js'
export const TNODE_R = 34 // node circles hold the slug and the view count
export const EXT_R = 34 // external referer/exit nodes use the same full size
// Edge width (half-width of the thin middle) grows logarithmically with
// the count. The constants are scaled down by ~10× so busy ranges (day,
// year) do not overwhelm the graph with fat connectors. A single recorded
// transition still renders as a faint ~0.4 px line. Connections carrying
// less than PRUNE_FRACTION of the total traffic are not drawn at all (this
// also keeps the graph under ~100 connections).
const WMID_MIN = 0.2
const WIDTH_GROWTH = 0.15
const PRUNE_FRACTION = 0.01
// Beads: each edge direction emits beads at count * BEAD_RATE beads per
// second (linear in the count). The rate is reduced ~10× across all time
// scales to keep the animation lightweight. 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.012 // 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
}
/** Domain-only label for an external origin (path and www. removed). */
function extLabel(ext) {
try {
const host = new URL(ext).hostname.replace(/^www\./, '')
return host.length > 25 ? `${host.slice(0, 24)}` : host
} catch {
const s = ext.replace(/^https?:\/\//, '').replace(/^www\./, '').split('/')[0]
return s.length > 25 ? `${s.slice(0, 24)}` : s
}
}
/**
* Collect outgoing external transitions: page path -> full exit URL.
* Aggregated per (URL, page) pair. Incoming external links are now derived
* from visit records (which carry UTM tags), so only exits remain here.
*/
function collectExitPairs(transitions) {
const pairs = new Map() // `${ext} ${page}` -> {ext, page, out}
for (const [fr, tos] of Object.entries(transitions || {})) {
if (!fr.startsWith('/')) continue // ignore external -> anything
for (const [to, count] of Object.entries(tos)) {
if (!to.startsWith('http')) continue
const k = `${to} ${fr}`
const p = pairs.get(k) || { ext: to, page: fr, out: 0 }
p.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 median reading time per article in whole minutes. */
function buildReadMinutes(visits) {
const times = {}
for (const v of visits || []) {
for (const [path, sec] of Object.entries(v.read || {})) {
if (sec >= MIN_READ_SECONDS) {
;(times[path] || (times[path] = [])).push(sec)
}
}
}
const minutes = {}
for (const [path, arr] of Object.entries(times)) {
arr.sort((a, b) => a - b)
const mid = Math.floor(arr.length / 2)
const median =
arr.length % 2 ? arr[mid] : (arr[mid - 1] + arr[mid]) / 2
minutes[path] = Math.max(1, Math.round(median / 60))
}
return minutes
}
/** Compute radial positions, view counts and labels for each node. */
function positionNodes(nodes, maxDepth, unit, viewsData, titles, readMinutes) {
// 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)
n.readMin = readMinutes[n.path] || 0
// Slug inside the circle; full title goes on the link title attribute.
const slug = n.path === '/' ? '🏠︎' : n.path.split('/').pop()
n.label = slug.length > 16 ? `${slug.slice(0, 15)}` : slug
n.title = titles.get(n.path) || ''
// Category (non-leaf) pages with no views in this window are left
// blank to keep the layout, but their circle/label is not drawn.
n.hidden = n.children.length > 0 && n.views === 0
}
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}`,
r,
a0,
a1,
})
}
return arcs
}
/** Bounding box of a circular arc centred at the origin, sampled. */
function arcBounds(r, a0, a1) {
let x0 = Infinity
let y0 = Infinity
let x1 = -Infinity
let y1 = -Infinity
const steps = 36
for (let i = 0; i <= steps; i++) {
const t = a0 + (a1 - a0) * (i / steps)
const x = Math.cos(t) * r
const y = Math.sin(t) * r
if (x < x0) x0 = x
if (y < y0) y0 = y
if (x > x1) x1 = x
if (y > y1) y1 = y
}
return { x0, y0, x1, y1 }
}
/** 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, external = false) {
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})`,
external,
}
}
/**
* 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, visualScale = 1) {
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 * visualScale),
}
}
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) => {
if (count <= 0) return 0
return 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, visualScale = 1) {
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)
const wMid = scaledWidth((ab + ba) * visualScale)
if (wMid <= 0) continue
edges.push(buildRibbon(a, b, ab, ba, wMid))
flows.push(...buildFlows(a, b, TNODE_R, TNODE_R, ab, ba, visualScale))
}
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
}
/** Keep only visits whose start time falls inside [t0, t1). */
export function filterVisitsByRange(visits, t0, t1) {
const out = []
for (const v of visits || []) {
const t = Date.parse(v.start)
if ((t0 == null || t >= t0) && (t1 == null || t < t1)) out.push(v)
}
return out
}
const UTM_PRIORITY = ['utm_campaign', 'utm_source']
const UTM_FALLBACK = ['utm_medium', 'utm_content', 'utm_term', 'utm_id']
/** Identify the source of a visit according to the requested priority. */
function identifySource(visit) {
const utm = visit.utm || {}
for (const k of UTM_PRIORITY) {
const v = utm[k]
if (v) return { value: v, isUtm: true }
}
if (visit.referer?.startsWith('http')) {
return { value: visit.referer, isUtm: false }
}
for (const k of UTM_FALLBACK) {
const v = utm[k]
if (v) return { value: v, isUtm: true }
}
return null
}
/**
* Collect source -> entry page pairs from visit records. Sources are
* identified by UTM campaign/source (then referer, then other UTM tags).
* A UTM source only gets a link href when every visit using that source
* came from the same referer; referer sources always link to their origin.
*/
function collectSourcePairs(visits) {
const groups = new Map() // `${source}\0${page}` -> pair
for (const v of visits || []) {
const src = identifySource(v)
if (!src) continue
const k = `${src.value}\0${v.entry}`
const p = groups.get(k) || {
source: src.value,
page: v.entry,
in: 0,
refs: new Set(),
missingRef: false,
href: null,
isUtm: src.isUtm,
}
p.in += 1
if (v.referer?.startsWith('http')) {
p.refs.add(v.referer)
} else {
p.missingRef = true
}
groups.set(k, p)
}
for (const p of groups.values()) {
if (p.isUtm && !p.missingRef && p.refs.size === 1) {
const ref = [...p.refs][0]
if (ref.startsWith('http')) p.href = ref
} else if (!p.isUtm && p.source.startsWith('http')) {
p.href = p.source
}
}
return [...groups.values()]
}
/**
* Place external source and exit nodes and build their edges and bead
* flows.
* Sources (incoming links) are derived from visit UTM/referer data and form
* a row centered above the map, hottest first; exits come from the
* transition matrix and sit just outside their source page.
* Widths and pruning use the same log scale and traffic-share rule as
* internal connections.
*/
function buildExternal({ sources, exits }, byPath, radius, innerBounds, visualScale = 1) {
const extNodes = []
const edges = []
const flows = []
let extTotal = 0
for (const p of sources) extTotal += p.in
for (const p of exits) extTotal += p.out
const minCount = extTotal * PRUNE_FRACTION
const liveSources = sources.filter((p) => byPath.has(p.page))
const liveExits = exits.filter((p) => byPath.has(p.page))
if (!liveSources.length && !liveExits.length) return { extNodes, edges, flows }
const width = (count) => scaledWidth(count * visualScale)
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 source node per identified source, in a row centered
// above the map, with an edge to each page that source led to.
const bySource = new Map() // source -> pairs, sorted by total incoming count
for (const p of liveSources.filter((p) => p.in >= minCount)) {
const g = bySource.get(p.source) || []
g.push(p)
bySource.set(p.source, g)
}
const origins = [...bySource]
.map(([source, ps]) => ({
source,
ps,
total: ps.reduce((s, p) => s + p.in, 0),
href: ps[0].href,
isUtm: ps[0].isUtm,
}))
.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(({ source, ps, total, href, isUtm }, i) => {
const label = isUtm ? source : extLabel(source)
const xn = {
path: source,
href,
label: label.length > 25 ? `${label.slice(0, 24)}` : label,
x: x0 + i * spacing,
y,
r: EXT_R,
count: total,
kind: 'source',
}
extNodes.push(xn)
for (const p of ps) {
const page = byPath.get(p.page)
const wMid = width(p.in)
if (wMid <= 0) continue
edges.push(buildRibbon(xn, page, p.in, 0, wMid, EXT_R, TNODE_R, true))
flows.push(...buildFlows(xn, page, EXT_R, TNODE_R, p.in, 0, visualScale))
}
})
}
// Outgoing: group by full URL so several links to the same domain stay
// distinct. Each exit node is placed one ring-gap outside its source page
// (same radial spacing internal rings use), fanned around the source angle,
// and shows the total count across all pages that link to that URL.
const GAP = radius(1) - radius(0)
const outgoing = liveExits.filter((p) => p.out >= minCount)
.sort((a, b) => b.out - a.out)
const perPage = new Map()
const selected = []
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)
selected.push(p)
if (selected.length >= MAX_EXT_OUT) break
}
const exitNodes = new Map() // full URL -> node
const placedPerPage = new Map() // for angle fanning of the placement anchor
for (const p of selected) {
const page = byPath.get(p.page)
let xn = exitNodes.get(p.ext)
if (!xn) {
const used = placedPerPage.get(p.page) || 0
placedPerPage.set(p.page, used + 1)
const base = page.depth ? page.angle : Math.PI / 2
const ang = base + [0, 0.4, -0.4][used]
let dist = GAP
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 += GAP * 0.3
x = page.x + Math.cos(ang) * dist
y = page.y + Math.sin(ang) * dist
}
xn = {
path: p.ext,
href: p.ext,
label: extLabel(p.ext),
x,
y,
r: EXT_R,
count: 0,
kind: 'exit',
}
exitNodes.set(p.ext, xn)
extNodes.push(xn)
}
xn.count += p.out
const wMid = width(p.out)
if (wMid <= 0) continue
edges.push(buildRibbon(page, xn, p.out, 0, wMid, TNODE_R, EXT_R, true))
flows.push(...buildFlows(page, xn, TNODE_R, EXT_R, p.out, 0, visualScale))
}
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, visits = [], visualScale = 1) {
const internal = collectInternalTransitions(data?.transitions)
const sources = collectSourcePairs(visits)
const exits = collectExitPairs(data?.transitions)
const navOrder = buildNavigationOrder(pageTree)
const titles = buildTitleMap(pageTree)
const readMinutes = buildReadMinutes(visits)
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, readMinutes)
const arcs = buildFamilyArcs(nodes, radius)
const pairs = aggregatePairs(internal)
const { edges, flows } = buildInternalEdges(pairs, byPath, visualScale)
// Tight bounding box of the actual page nodes; family ring arcs can sweep
// outside the node circle (e.g. a large arc between two siblings on the
// left side reaching around the right), so their geometry is included too.
// 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,
}
for (const arc of arcs) {
if (arc.a0 == null) continue
const b = arcBounds(arc.r, arc.a0, arc.a1)
bounds.x0 = Math.min(bounds.x0, b.x0)
bounds.y0 = Math.min(bounds.y0, b.y0)
bounds.x1 = Math.max(bounds.x1, b.x1)
bounds.y1 = Math.max(bounds.y1, b.y1)
}
const ext = buildExternal({ sources, exits }, byPath, radius, bounds, visualScale)
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,
}
}
-6
View File
@@ -698,12 +698,6 @@ td {
transparent 75%); 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 { tbody tr+tr td {
border-top: 1px solid color-mix(in srgb, var(--table-tint, var(--accent)) 12%, transparent); border-top: 1px solid color-mix(in srgb, var(--table-tint, var(--accent)) 12%, transparent);
} }
+2
View File
@@ -96,3 +96,5 @@ export function closeEditor() {
if (!visible && restoreTitle != null) document.title = restoreTitle if (!visible && restoreTitle != null) document.title = restoreTitle
}) })
} }
+199 -11
View File
@@ -97,25 +97,35 @@ import "overlayscrollbars/overlayscrollbars.css";
// Editing is open for admins and, as a dev/no-proxy fallback, when no // Editing is open for admins and, as a dev/no-proxy fallback, when no
// Paskia SSO is detected at all. // Paskia SSO is detected at all.
const canEdit = isAdmin || !ssoAvailable; 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"); const banner = document.getElementById("page-banner");
if (banner) { if (banner) {
const old = banner.parentElement.querySelector(".editor-pens"); const old = banner.parentElement.querySelector(".editor-pens");
if (old) old.remove(); if (old) old.remove();
const pens = document.createElement("div"); const pens = document.createElement("div");
pens.className = "editor-pens"; pens.className = "editor-pens";
if (canEdit) { if (canEdit && !onAnalytics) {
pens.append(makePen("banner")); pens.append(makePen("banner"));
pens.append(makePen("site")); 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 (ssoAvailable) pens.append(makeAuthLink(isAdmin)); if (ssoAvailable) pens.append(makeAuthLink(isAdmin));
banner.after(pens); banner.after(pens);
} }
if (canEdit) injectPagePen(); if (canEdit && !onAnalytics) injectPagePen();
} }
async function setupAuth() { async function setupAuth() {
const src = document.querySelector('meta[name="pagerite:editor-src"]')?.content; const src = document.querySelector('meta[name="pagerite:editor-src"]')?.content;
if (!src) return; if (!src) { pingEntryOnce(); return; }
editorMeta = { editorMeta = {
src, src,
css: document.querySelector('meta[name="pagerite:editor-css"]')?.content, css: document.querySelector('meta[name="pagerite:editor-css"]')?.content,
@@ -138,6 +148,7 @@ import "overlayscrollbars/overlayscrollbars.css";
} }
renderAuthUi(); renderAuthUi();
pingEntryOnce();
} }
// Returning to the page via history back/forward may restore a cached // Returning to the page via history back/forward may restore a cached
@@ -326,6 +337,152 @@ import "overlayscrollbars/overlayscrollbars.css";
}, { passive: true }); }, { passive: true });
} }
// --- Analytics pings ---------------------------------------------------
// Fire-and-forget POST /_a {fr, to, read}: on the initial page load
// (starts the visit — the server counts nothing from the document GET
// alone), for internal fetch-navigations, for external https exits, and
// on window close. ``read`` is the active time (ms) spent on ``fr``.
// Reading time pauses after 1 minute of inactivity and resumes on the
// next mouse/touch/scroll/keyboard event.
// Excluded: back/forward (popstate never pings), everything while the
// editor is open (body.editing — admin noise, not visits), and the
// analytics page itself (/_a), even though fetch-navigation treats it
// like a normal article.
// Admins (when SSO is actually in use — with no auth proxy "admin" is
// everyone's state) ping normally but with hide=1: the server then
// records nothing and scrubs any session the same browser accumulated
// before logging in, so admins never show up as visits or crawlers.
// See docs/analytics.md.
function ping(to, fr = currentPath, read = 0) {
if (document.body.classList.contains("editing")) return;
if ((to && to === "/_a") || fr === "/_a") return;
const hide = ssoAvailable && isAdmin ? 1 : 0;
const body = JSON.stringify({
fr, to, hide,
read: Math.max(0, Math.round(read / 1000)),
});
try {
fetch("/_a", {
method: "POST",
keepalive: true,
headers: { "content-type": "application/json" },
body,
});
} catch { /* analytics must never break navigation */ }
}
// Active reading time for the current page. The clock stops after 1 minute
// without activity and restarts on the next mouse/touch/scroll/keyboard
// event.
const INACTIVE_MS = 60_000;
let readStart = performance.now();
let readElapsed = 0;
let reading = true;
let readInactivityTimer = null;
let closePingedFor = null;
function markReadActivity() {
if (!reading) {
reading = true;
readStart = performance.now();
}
clearTimeout(readInactivityTimer);
readInactivityTimer = setTimeout(() => {
if (reading) {
readElapsed += performance.now() - readStart;
reading = false;
}
}, INACTIVE_MS);
}
function takeReadTime() {
if (reading) {
readElapsed += performance.now() - readStart;
readStart = performance.now();
}
const ms = Math.max(0, Math.round(readElapsed));
readElapsed = 0;
return ms;
}
function resetReadTime() {
readElapsed = 0;
reading = true;
readStart = performance.now();
clearTimeout(readInactivityTimer);
}
function sendClosePing() {
if (closePingedFor === currentPath) return;
const read = Math.max(0, Math.round(takeReadTime() / 1000));
if (read <= 0) return;
const hide = ssoAvailable && isAdmin ? 1 : 0;
const body = JSON.stringify({ fr: currentPath, hide, read });
const blob = new Blob([body], { type: "application/json" });
try {
if (navigator.sendBeacon) {
navigator.sendBeacon("/_a", blob);
} else {
fetch("/_a", {
method: "POST",
keepalive: true,
headers: { "content-type": "application/json" },
body,
});
}
} catch { /* analytics must never break navigation */ }
closePingedFor = currentPath;
}
for (const ev of ["mousemove", "mousedown", "touchstart", "touchmove", "scroll", "keydown"]) {
addEventListener(ev, markReadActivity, { passive: true });
}
addEventListener("pagehide", sendClosePing);
// 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 ------------------------------------------------ // --- Fetch navigation ------------------------------------------------
async function load(url, push = true, back = false) { async function load(url, push = true, back = false) {
// Navigating with the editor open closes it; unsaved edits are lost // Navigating with the editor open closes it; unsaved edits are lost
@@ -333,6 +490,7 @@ import "overlayscrollbars/overlayscrollbars.css";
if (document.body.classList.contains("editing")) { if (document.body.classList.contains("editing")) {
editorModule?.then((m) => m.closeEditor()); editorModule?.then((m) => m.closeEditor());
} }
teardownAnalytics();
let doc; let doc;
let finalUrl = url; let finalUrl = url;
const cached = pageCache.get(new URL(url, location.href).pathname); const cached = pageCache.get(new URL(url, location.href).pathname);
@@ -345,15 +503,19 @@ import "overlayscrollbars/overlayscrollbars.css";
if (!res.ok || !type.includes("text/html")) throw new Error("not a page"); if (!res.ok || !type.includes("text/html")) throw new Error("not a page");
// Reflect any redirect the server issued. // Reflect any redirect the server issued.
if (res.redirected) finalUrl = res.url; if (res.redirected) finalUrl = res.url;
doc = new DOMParser().parseFromString(await res.text(), "text/html"); const html = await res.text();
// Populate the cache too, or the post-swap preload (which includes
// location.pathname) would fetch the very page we just loaded again.
pageCache.set(new URL(finalUrl, location.href).pathname, html);
doc = new DOMParser().parseFromString(html, "text/html");
} catch { } catch {
location.href = url; // fall back to a normal navigation location.href = url; // fall back to a normal navigation
return; return false;
} }
} }
if (REGIONS.some((id) => !doc.getElementById(id))) { if (REGIONS.some((id) => !doc.getElementById(id))) {
location.href = url; location.href = url;
return; return false;
} }
const doit = () => { const doit = () => {
for (const id of REGIONS) { for (const id of REGIONS) {
@@ -391,6 +553,9 @@ import "overlayscrollbars/overlayscrollbars.css";
runScripts(document.getElementById("page-banner")); runScripts(document.getElementById("page-banner"));
runScripts(document.getElementById("main")); runScripts(document.getElementById("main"));
applyEffects(); applyEffects();
// The fetched doc carries the analytics meta; the live document's
// <head> is never swapped, so querying it would never find the entry.
mountAnalytics(doc);
}; };
// Rotating cube page transition (see the FRAGILE block in pagerite.css); // Rotating cube page transition (see the FRAGILE block in pagerite.css);
// mirrored when navigating back through history. Navigation within the // mirrored when navigating back through history. Navigation within the
@@ -410,6 +575,7 @@ import "overlayscrollbars/overlayscrollbars.css";
currentPath = new URL(finalUrl, location.href).pathname; currentPath = new URL(finalUrl, location.href).pathname;
if (push) history.pushState(null, "", finalUrl); if (push) history.pushState(null, "", finalUrl);
scrollTo(0, 0); scrollTo(0, 0);
return true;
} }
addEventListener("click", (ev) => { addEventListener("click", (ev) => {
@@ -447,16 +613,37 @@ import "overlayscrollbars/overlayscrollbars.css";
const a = ev.target.closest("a[href]"); const a = ev.target.closest("a[href]");
if (!a || a.target || a.hasAttribute("download")) return; if (!a || a.target || a.hasAttribute("download")) return;
const url = new URL(a.href, location.href); const url = new URL(a.href, location.href);
if (url.origin !== location.origin) return; if (url.origin !== location.origin) {
// External link: the browser navigates; record the full https URL so
// different links to the same domain stay distinct in analytics.
if (url.protocol === "https:") {
closePingedFor = currentPath;
ping(url.href, currentPath, takeReadTime());
}
return;
}
// Same-page anchor links (footnotes etc.): let the browser handle them // Same-page anchor links (footnotes etc.): let the browser handle them
if (url.pathname === location.pathname && url.hash) return; 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(); ev.preventDefault();
load(url); // Capture the source now: load() updates currentPath before pinging.
const from = currentPath;
load(url).then((ok) => {
if (!ok) return;
closePingedFor = null;
ping(url.pathname, from, takeReadTime());
resetReadTime();
});
}); });
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 ------------------------------------------------ // --- Task-list checkboxes ------------------------------------------------
// Checkboxes in the rendered article are live: toggling them edits the // Checkboxes in the rendered article are live: toggling them edits the
@@ -522,4 +709,5 @@ import "overlayscrollbars/overlayscrollbars.css";
setupAuth(); setupAuth();
applyEffects(); applyEffects();
mountAnalytics(document);
})(); })();
+1 -1
View File
@@ -11,7 +11,7 @@
*/ */
export default function fastapiVue({ paths = ["/api"] } = {}) { export default function fastapiVue({ paths = ["/api"] } = {}) {
const backendUrl = process.env.PAGERITE_BACKEND_URL || "http://localhost:3200" const backendUrl = process.env.PAGERITE_BACKEND_URL || "http://localhost:8210"
// Build proxy configuration for each path // Build proxy configuration for each path
const proxy = {} const proxy = {}
+4 -2
View File
@@ -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. // Proxy content pages (/slug, /path/to/slug) to the FastAPI backend in dev.
// Excludes Vite internals (/@..., /src, /node_modules, /__...) and the // 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|__)(?:[^./?]+(?:\\/[^./?]+)*)?(?:\\?.*)?$' const CONTENT_PROXY = '^\\/(?!_|@|src|node_modules|__)(?:[^./?]+(?:\\/[^./?]+)*)?(?:\\?.*)?$'
// https://vite.dev/config/ // https://vite.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [ plugins: [
fastapiVue({ paths: ["/_api", "/_f", "/_themes"] }), fastapiVue({ paths: ["/_api", "/_f", "/_themes", "/_a"] }),
vue(), vue(),
vueDevTools(), vueDevTools(),
], ],
@@ -39,6 +40,7 @@ export default defineConfig({
input: { input: {
main: fileURLToPath(new URL('./src/main.js', import.meta.url)), main: fileURLToPath(new URL('./src/main.js', import.meta.url)),
pagerite: fileURLToPath(new URL('./src/pagerite.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 // Only the base CSS is built; theme/banner-design stylesheets live
// in pagerite/themes/{name}/ and are served by the backend as-is. // 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_base: fileURLToPath(new URL('./src/assets/pagerite.css', import.meta.url)),
+69 -2
View File
@@ -1,14 +1,74 @@
# auto-upgrade@fastapi-vue-setup - remove this if you modify this file
"""Command-line entry point for running the backend server.""" """Command-line entry point for running the backend server."""
import argparse import argparse
import gzip
import os import os
import sys
from datetime import date
from pathlib import Path
import httpx
from fastapi_vue import server from fastapi_vue import server
DEFAULT_PORT = 3100 DEFAULT_PORT = 8100
DEVMODE = os.getenv("PAGERITE_DEV") == "1" DEVMODE = os.getenv("PAGERITE_DEV") == "1"
# Repository root (pagerite/__main__.py -> ..), where the MMDB lives.
_REPO_ROOT = Path(__file__).resolve().parent.parent
DBIP_URL = "https://download.db-ip.com/free/dbip-city-lite-{month}.mmdb.gz"
def _download_dbip() -> None:
"""Download the latest dbip-city-lite MMDB if ours is missing or older."""
today = date.today()
months = [f"{today:%Y-%m}"]
# The current month's file may not be published yet; fall back to last month.
prev = (today.replace(day=1) - date.resolution).replace(day=1)
months.append(f"{prev:%Y-%m}")
existing = sorted(
p.stem.removeprefix("dbip-city-lite-").removesuffix(".mmdb")
for p in _REPO_ROOT.glob("dbip-city-lite-*.mmdb*")
)
if existing and existing[-1] >= months[0]:
print(f"pagerite: DB-IP database is current ({existing[-1]}), skipping download")
return
for month in months:
url = DBIP_URL.format(month=month)
target = _REPO_ROOT / f"dbip-city-lite-{month}.mmdb.gz"
tmp = target.with_suffix(".mmdb.gz.tmp")
print(f"pagerite: downloading {url}")
try:
with httpx.stream("GET", url, follow_redirects=True, timeout=120) as r:
if r.status_code == 404:
continue
r.raise_for_status()
with open(tmp, "wb") as f:
for chunk in r.iter_bytes():
f.write(chunk)
except httpx.HTTPError as e:
print(f"pagerite: DB-IP download failed: {e}", file=sys.stderr)
tmp.unlink(missing_ok=True)
continue
# Verify it is actually gzip data before installing it.
try:
with gzip.open(tmp, "rb") as f:
f.read(1)
except OSError:
print(f"pagerite: DB-IP download for {month} was not valid gzip", file=sys.stderr)
tmp.unlink(missing_ok=True)
continue
os.replace(tmp, target)
# Drop older databases so the app never picks up a stale one.
for old in _REPO_ROOT.glob("dbip-city-lite-*.mmdb*"):
if old.name != target.name:
old.unlink()
print(f"pagerite: DB-IP database updated to {target.name}")
return
print("pagerite: could not download a DB-IP database", file=sys.stderr)
def main() -> None: def main() -> None:
"""Run the backend server with optional arguments.""" """Run the backend server with optional arguments."""
@@ -19,7 +79,14 @@ def main() -> None:
action="append", action="append",
help=(f"Endpoint (default: localhost:{DEFAULT_PORT})."), help=(f"Endpoint (default: localhost:{DEFAULT_PORT})."),
) )
parser.add_argument(
"--dbip",
action="store_true",
help="Download/update the DB-IP city lite database before starting.",
)
args = parser.parse_args() args = parser.parse_args()
if args.dbip:
_download_dbip()
dev = {"reload": True, "reload_dirs": ["pagerite"]} if DEVMODE else {} dev = {"reload": True, "reload_dirs": ["pagerite"]} if DEVMODE else {}
server.run( server.run(
"pagerite.app:app", "pagerite.app:app",
+729
View File
@@ -0,0 +1,729 @@
"""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 stay invisible).
Admin clients ping with ``hide=1``, which records nothing and removes any
visit the session accumulated before logging in. Scanner telltale 404s
(dotpaths, *.php) classify the source IP as abuse; its hits — including
earlier crawler hits — are moved to the abuse list, which the viewer
groups by IP with full request paths. Client metadata (IP, UA, language,
country/city, host) is stored once per unique client hash and referenced
from visits, crawler hits and abuse hits. The session map is in-memory
only.
Data is a msgspec Struct JSON-dumped to its own file (not the kanta db),
rewritten atomically on every recorded event.
"""
import ipaddress
import os
import re
import tempfile
from collections.abc import Callable
from contextlib import suppress
from datetime import UTC, datetime, timedelta
from pathlib import Path
from urllib.parse import parse_qs, urlparse
import blake3
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
if browser and browser != "Other":
browser = browser.split()[0]
else:
browser = ""
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 Client(msgspec.Struct, omit_defaults=True):
"""Client metadata shared by visits, crawler hits and abuse hits.
Identified by a 6-byte blake3 hash of the IPv4 address or IPv6 /64
network, the full User-Agent string and the extracted language tag.
Country/city/host are filled in asynchronously after the first event.
"""
#: Visitor IP address (first X-Forwarded-For hop or direct peer).
ip: str = ""
#: Reverse-DNS host name for ``ip`` when resolvable, else "".
host: str = ""
#: First Accept-Language tag, lowercased (e.g. "en-us").
lang: str = ""
#: Two-letter country code from the DB-IP geoip lookup, or "".
country: str = ""
#: City name from the DB-IP geoip lookup, or "".
city: str = ""
#: Raw User-Agent header.
ua: str = ""
#: Compact display form of ``ua`` (browser/OS/device) when parsable.
ua_pretty: str = ""
class Visit(msgspec.Struct, omit_defaults=True):
"""One visit: the initial-load data plus everything seen afterwards.
``trail`` holds page paths and external exit URLs in first-seen
order; re-visiting an already seen page does not append. The entry
page itself is in ``entry``, not in the trail. Client metadata is
held in ``Analytics.clients`` keyed by ``client``.
"""
start: datetime
entry: str
#: External https origin of the initial load, "" for direct visits.
referer: str = ""
#: 6-byte blake3 hash referencing ``Analytics.clients``.
client: bytes = b""
trail: list[str] = []
#: UTM query parameters from the landing URL, keyed by parameter name.
utm: dict[str, str] = {}
#: Active reading time per path (seconds), keyed by path.
read: dict[str, int] = {}
class CrawlerHit(msgspec.Struct, omit_defaults=True):
"""A document GET that was never followed by an analytics ping.
Client metadata is held in ``Analytics.clients`` keyed by ``client``.
"""
start: datetime
entry: str
#: 6-byte blake3 hash referencing ``Analytics.clients``.
client: bytes = b""
#: 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 AbuseHit(msgspec.Struct, omit_defaults=True):
"""A request from an IP classified as a scanner/abuser.
Unlike crawler hits the full request path (query string included) is
kept: the interesting part is exactly which paths were probed.
``flag`` marks the path that triggered classification; ``is_404``
distinguishes 404 responses from document GETs made by the abuser.
Client metadata is held in ``Analytics.clients`` keyed by ``client``.
"""
start: datetime
#: Full request path including the query string (e.g. "/.env?x=1").
path: str
#: 6-byte blake3 hash referencing ``Analytics.clients``.
client: bytes = b""
#: True when this path triggered abuse classification (telltale path
#: or the 404 that crossed the threshold).
flag: bool = False
#: True for 404 responses; false for document GETs from the abuser.
is_404: bool = False
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] = []
#: Requests from abusive IPs (see AbuseHit), grouped by IP in the viewer.
abuse: list[AbuseHit] = []
#: Client metadata keyed by 6-byte blake3 hash.
clients: dict[bytes, Client] = {}
#: IPs classified as scanners/abusers (keys; values always True).
abuse_ips: dict[str, bool] = {}
#: 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}"
def _external_target(url: str) -> str | None:
"""A valid https URL (origin or full page), else None."""
try:
parsed = urlparse(url)
except ValueError:
return None
if parsed.scheme != "https" or not parsed.netloc:
return None
return url
_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)
#: Plain-404 count per IP that classifies it as abuse even without a
#: telltale path hit.
_ABUSE_404_THRESHOLD = 10
#: Paths that instantly classify an IP as abuse when they 404: any segment
#: starting with a dot ("/.env", "/.git/config") or ending in ".php".
_ABUSE_PATH = re.compile(r"(^|/)\.|\.php$", re.IGNORECASE)
def _is_abuse_path(path: str) -> bool:
"""Telltale scanner path: dot segment or *.php."""
return bool(_ABUSE_PATH.search(path.split("?")[0]))
def _network_ip(ip: str) -> str:
"""IPv4 address unchanged, IPv6 collapsed to its /64 network address.
We hash the network rather than the full address so that clients in the
same /64 (a typical end-user allocation) are treated as one visitor.
"""
if not ip:
return ip
try:
addr = ipaddress.ip_address(ip)
except ValueError:
return ip
if isinstance(addr, ipaddress.IPv6Address):
return str(ipaddress.IPv6Network(f"{ip}/64", strict=False).network_address)
return ip
def _client_hash(ip: str, ua: str, lang: str) -> bytes:
"""6-byte blake3 digest identifying a visitor/client tuple.
The key is the prettified IP (IPv6 /64), the raw UA string and the
extracted language tag, separated by null bytes.
"""
return blake3.blake3(
f"{_network_ip(ip)}\0{ua}\0{lang}".encode()
).digest()[:6]
class Store:
"""In-memory analytics data plus the client-hash -> 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
#: client hash -> index of the current visit in data.visits
self.sessions: dict[bytes, 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] = []
#: ip -> number of plain (non-telltale) 404s seen, in RAM only;
#: reaching ``_ABUSE_404_THRESHOLD`` classifies the IP as abuse.
self.not_found_counts: dict[str, int] = {}
#: Callables to notify when persisted data changes. Registered by the
#: analytics WebSocket broadcaster.
self._on_change: list[Callable[[], None]] = []
def subscribe(self, callback: Callable[[], None]) -> None:
"""Register a callback to be called after every persisted change."""
if callback not in self._on_change:
self._on_change.append(callback)
def unsubscribe(self, callback: Callable[[], None]) -> None:
"""Remove a previously registered change callback."""
with suppress(ValueError):
self._on_change.remove(callback)
def _notify(self) -> None:
for callback in self._on_change:
callback()
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
else:
self._notify()
def _flush_crawlers(self, now: datetime | None = None) -> list[bytes]:
"""Move expired pending crawler hits into persistent ``data.crawlers``.
Returns the client hashes of the newly flushed hits so callers can
schedule async enrichment.
"""
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 not expired:
return []
self.pending_crawlers = remaining
self.data.crawlers.extend(expired)
self._save()
return [hit.client for hit in expired]
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 _uncount(self, table: dict[str, int], key: str) -> None:
"""Reverse one ``_count``: decrement and drop empty keys."""
if key in table:
table[key] -= 1
if table[key] <= 0:
del table[key]
def _remove_visit(self, index: int) -> None:
"""Delete a visit and reverse the counts its creation recorded.
Used when a known visitor turns out to be an admin (hide=1 ping):
the session is scrubbed from the stats. Views/transitions logged
by later pings inside the visit lack per-event timestamps and are
left as-is.
"""
visit = self.data.visits[index]
bucket = _bucket(visit.start)
self._uncount(self.data.site_visits, bucket)
views = self.data.views.get(visit.entry)
if views is not None:
self._uncount(views, bucket)
if not views:
del self.data.views[visit.entry]
fr_map = self.data.transitions.get(visit.referer or "(direct)")
if fr_map is not None:
buckets = fr_map.get(visit.entry)
if buckets is not None:
self._uncount(buckets, bucket)
if not buckets:
del fr_map[visit.entry]
if not fr_map:
del self.data.transitions[visit.referer or "(direct)"]
del self.data.visits[index]
# Sessions store list indices; shift the ones past the removed visit.
for key, i in list(self.sessions.items()):
if i > index:
self.sessions[key] = i - 1
def _client_ip(self, client_hash: bytes) -> str:
"""Return the IP stored for ``client_hash``, or "" if missing."""
client = self.data.clients.get(client_hash)
return client.ip if client else ""
def _ensure_client(
self,
ip: str,
ua: str,
lang: str,
*,
country: str = "",
) -> bytes:
"""Get or create a ``Client`` record; return its 6-byte hash."""
h = _client_hash(ip, ua, lang)
if h not in self.data.clients:
self.data.clients[h] = Client(
ip=ip,
ua=ua,
ua_pretty=_compact_user_agent(ua),
lang=lang,
country=country,
)
self._save()
return h
def enrich_client(
self,
client_hash: bytes,
*,
host: str = "",
country: str = "",
city: str = "",
) -> None:
"""Fill in host/geoip fields on a client record after async lookups."""
client = self.data.clients.get(client_hash)
if client is None:
return
changed = False
if host and not client.host:
client.host = host
changed = True
if country:
client.country = country
changed = True
if city:
client.city = city
changed = True
if changed:
self._save()
def _abuse_hit(
self,
client_hash: bytes,
path: str,
start: datetime | None = None,
*,
flag: bool = False,
is_404: bool = False,
) -> None:
"""Append one abuse hit referencing a client by hash."""
self.data.abuse.append(
AbuseHit(
start=start or datetime.now(UTC),
path=path,
client=client_hash,
flag=flag,
is_404=is_404,
)
)
def classify_abuse(
self,
ip: str,
client_hash: bytes,
path: str,
*,
flag: bool = False,
is_404: bool = False,
) -> None:
"""Classify an IP as a scanner/abuser and record the triggering hit.
All earlier crawler hits from the same IP (persisted and pending)
are moved to the abuse list — a random-UA scanner must not pollute
the crawler stats of the legitimate bots it impersonates.
"""
if ip not in self.data.abuse_ips:
self.data.abuse_ips[ip] = True
moved = [h for h in self.data.crawlers if self._client_ip(h.client) == ip]
if moved:
self.data.crawlers = [h for h in self.data.crawlers if self._client_ip(h.client) != ip]
for h in moved:
self._abuse_hit(
h.client,
h.entry + (f"?{h.query}" if h.query else ""),
start=h.start,
)
pending = [h for h in self.pending_crawlers if self._client_ip(h.client) == ip]
if pending:
self.pending_crawlers = [h for h in self.pending_crawlers if self._client_ip(h.client) != ip]
for h in pending:
self._abuse_hit(
h.client,
h.entry + (f"?{h.query}" if h.query else ""),
start=h.start,
)
self._abuse_hit(client_hash, path, flag=flag, is_404=is_404)
self._save()
def track_404(
self,
ip: str,
ua: str,
path: str,
accept_language: str = "",
) -> bytes:
"""Record a 404 response for ``path`` (full path, query included).
A telltale path (dot segment or *.php) classifies the IP as abuse
immediately; enough plain 404s from one IP do too. Hits from
already-classified IPs go straight to the abuse list.
Returns the client hash so callers can schedule async enrichment.
"""
lang, country = _parse_accept_language(accept_language)
client_hash = self._ensure_client(ip, ua, lang, country=country)
if ip in self.data.abuse_ips:
self._abuse_hit(client_hash, path, flag=_is_abuse_path(path), is_404=True)
self._save()
return client_hash
if _is_abuse_path(path):
self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
return client_hash
self.not_found_counts[ip] = self.not_found_counts.get(ip, 0) + 1
if self.not_found_counts[ip] >= _ABUSE_404_THRESHOLD:
self.classify_abuse(ip, client_hash, path, flag=True, is_404=True)
return client_hash
return client_hash
def _new_visit(
self,
entry: str,
referer: str,
client_hash: bytes,
utm: dict[str, str] | None = None,
) -> Visit:
now = datetime.now(UTC)
visit = Visit(
start=now,
entry=entry,
referer=referer,
client=client_hash,
utm=utm or {},
)
self.data.visits.append(visit)
self.sessions[client_hash] = 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 track_entry(
self,
referer: str,
own_origin: str,
ip: str,
ua: str,
full_path: str,
accept_language: str = "",
) -> list[bytes]:
"""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 client arrives within ``_CRAWLER_TIMEOUT``, the hit is
discarded; otherwise it is flushed to ``data.crawlers``. The
Accept-Language header is stored on the client record immediately;
host/geoip are filled in later by async enrichment.
GETs from IPs already classified as abuse are recorded as abuse hits
with the full request path (query string included).
Returns the client hashes of any hits flushed to persistent storage,
so callers can schedule async enrichment.
"""
entry = full_path.split("?")[0]
query = full_path.split("?", 1)[1] if "?" in full_path else ""
lang, country = _parse_accept_language(accept_language)
client_hash = self._ensure_client(ip, ua, lang, country=country)
if ip in self.data.abuse_ips:
flushed = self._flush_crawlers()
self._abuse_hit(client_hash, full_path, is_404=False, flag=False)
self._save()
return flushed
now = datetime.now(UTC)
flushed = 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,
client=client_hash,
referer=self.pending_referers.get(ip, ""),
query=query,
)
)
return flushed
def _add_read(self, client_hash: bytes, path: str, seconds: int) -> None:
"""Add ``seconds`` of reading time for ``path`` to the current visit."""
if seconds <= 0:
return
index = self.sessions.get(client_hash)
if index is None or index >= len(self.data.visits):
return
visit = self.data.visits[index]
visit.read[path] = visit.read.get(path, 0) + seconds
def ping(
self,
from_: str,
to: str | None,
ip: str,
ua: str,
accept_language: str = "",
hide: bool = False,
read: int = 0,
) -> tuple[int | None, list[bytes]]:
"""Record a client navigation ping ({from, to, read} from pagerite.js).
``to`` is an internal path ("/...") or an https URL for exit links; a
missing/empty ``to`` means the page is being closed and only the
``read`` time should be recorded. The transition is always counted when
``to`` is present; the trail only grows on first sight of a page within
the visit. ``read`` is the active time (seconds) spent on ``from_``.
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.
``hide`` is set by admin clients: the ping cancels pending crawler
hits as usual, and any existing visit for this client session is
removed from the stats (the admin browsed anonymously before logging
in). Nothing new is recorded.
Pings from IPs classified as abuse are ignored entirely.
Returns the index of the new visit when one is created (or None) and
the client hashes of any crawler hits flushed by this call, so callers
can schedule async enrichment (host, geoip country/city).
"""
flushed = self._flush_crawlers()
lang, country = _parse_accept_language(accept_language)
client_hash = _client_hash(ip, ua, lang)
if hide:
# Admin ping: cancel pending crawler hits and scrub the session.
self.pending_crawlers = [
hit for hit in self.pending_crawlers if hit.client == client_hash
]
index = self.sessions.pop(client_hash, None)
if index is not None and index < len(self.data.visits):
self._remove_visit(index)
self._save()
return None, flushed
if ip in self.data.abuse_ips:
return None, flushed
# A real visitor ping cancels any pending crawler hits from this client.
self.pending_crawlers = [
hit for hit in self.pending_crawlers if hit.client != client_hash
]
fr_path = _internal_path(from_) if from_ else ""
if fr_path and read > 0:
self._add_read(client_hash, fr_path, read)
if not to:
if read > 0:
self._save()
return None, flushed
if to.startswith("/") and not to.startswith("//"):
target = _internal_path(to) or ""
else:
target = _external_target(to) or ""
if not target:
return None, flushed
index = self.sessions.get(client_hash)
fr = fr_path or "(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.
index = len(self.data.visits)
self._ensure_client(ip, ua, lang, country=country)
self._new_visit(
target,
self.pending_referers.pop(ip, ""),
client_hash,
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()
visit_index = index if index is not None and index < len(self.data.visits) else None
return visit_index, flushed
+346 -3
View File
@@ -12,23 +12,31 @@ walking the tree (``resolve``), moves are slot detach/attach
(``find_slot``) with a fresh order key from the new siblings. (``find_slot``) with a fresh order key from the new siblings.
""" """
import asyncio
import gzip
import ipaddress
import mimetypes import mimetypes
import os import os
import re import re
import shutil
import socket
from collections.abc import AsyncIterator from collections.abc import AsyncIterator
from contextlib import asynccontextmanager from contextlib import asynccontextmanager
from datetime import UTC, datetime from datetime import UTC, datetime
from email.utils import format_datetime from email.utils import format_datetime
from functools import lru_cache
from pathlib import Path from pathlib import Path
from urllib.parse import urlparse
import blake3 import blake3
import msgspec
from fastapi import FastAPI, HTTPException, Request, WebSocket, WebSocketDisconnect from fastapi import FastAPI, HTTPException, Request, WebSocket, WebSocketDisconnect
from fastapi.responses import HTMLResponse, RedirectResponse, Response from fastapi.responses import HTMLResponse, RedirectResponse, Response
from fastapi_vue import Frontend from fastapi_vue import Frontend
from kanta import Kanta from kanta import Kanta
from pydantic import BaseModel from pydantic import BaseModel
from pagerite import seed, views from pagerite import analytics, seed, views
from pagerite.__main__ import DEVMODE from pagerite.__main__ import DEVMODE
from pagerite.data import ( from pagerite.data import (
Data, Data,
@@ -43,6 +51,104 @@ from pagerite.markdown import has_h1, render, toggle_task
DB_PATH = os.getenv("PAGERITE_DB", "pagerite.kantadb") 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)
# Live WebSocket clients for the analytics stream.
_analytics_ws_clients: set[WebSocket] = set()
_analytics_broadcast_task: asyncio.Task | None = None
# 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 ""
def city(self, ip: str) -> str:
"""City name for ``ip``, or "" when unavailable.
GeoIP sometimes appends district names in parentheses (e.g.
"Berlin (Bezirk Tempelhof-Schöneberg)"); those are stripped before
the value is stored.
"""
if not ip or self._reader is None:
return ""
try:
rec = self._reader.get(ip)
if rec:
city = (rec.get("city") or {}).get("names", {}).get("en", "")
if city:
city = re.sub(r"\s*\([^)]*\)", "", city).strip()
return city
except Exception:
pass
return ""
_geoip = GeoIP()
# Our own data root; kanta edits it in place, reads are plain attribute access. # Our own data root; kanta edits it in place, reads are plain attribute access.
data = Data() data = Data()
kanta = Kanta(DB_PATH, data) kanta = Kanta(DB_PATH, data)
@@ -142,11 +248,16 @@ def _seed(data: Data) -> None:
@asynccontextmanager @asynccontextmanager
async def lifespan(_app: FastAPI) -> AsyncIterator[None]: async def lifespan(_app: FastAPI) -> AsyncIterator[None]:
"""Open the database, migrate legacy content, load assets.""" """Open the database, migrate legacy content, load assets, load GeoIP."""
await kanta.open() await kanta.open()
_migrate_legacy() _migrate_legacy()
await frontend.load() 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)
analytics_store.subscribe(_schedule_analytics_broadcast)
yield yield
analytics_store.unsubscribe(_schedule_analytics_broadcast)
await kanta.close() await kanta.close()
@@ -495,6 +606,183 @@ async def delete_page(path: str) -> None:
_SLUG_RE = re.compile(r"^[a-z0-9][a-z0-9_-]*$") _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 "")
def _query_suffix(request: Request) -> str:
"""The request's query string as a "?..." suffix, or "" when absent."""
query = str(request.url.query)
return f"?{query}" if query 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 _geoip_city(ip: str) -> str:
"""Async wrapper around the DB-IP MMDB city lookup."""
return await asyncio.to_thread(_geoip.city, ip)
async def _enrich_client(client_hash: bytes) -> None:
"""Run non-blocking reverse-DNS and geoip enrichment for a client."""
client = analytics_store.data.clients.get(client_hash)
if not client or not client.ip:
return
host = await _lookup_host(client.ip)
country = await _geoip_country(client.ip)
city = await _geoip_city(client.ip)
analytics_store.enrich_client(client_hash, host=host, country=country, city=city)
def _schedule_client_enrichment(client_hashes: list[bytes]) -> None:
"""Start background host/geoip enrichment for the given client hashes."""
for client_hash in client_hashes:
asyncio.create_task(_enrich_client(client_hash))
async def _broadcast_analytics() -> None:
"""Send the current analytics snapshot to every connected WS client."""
if not _analytics_ws_clients:
return
payload = msgspec.json.encode(analytics_store.data).decode()
closed = set()
for ws in _analytics_ws_clients:
try:
await ws.send_text(payload)
except Exception:
closed.add(ws)
for ws in closed:
_analytics_ws_clients.discard(ws)
async def _debounced_analytics_broadcast() -> None:
"""Wait briefly, then broadcast the latest snapshot once."""
await asyncio.sleep(0.2)
await _broadcast_analytics()
def _schedule_analytics_broadcast() -> None:
"""Schedule a single debounced broadcast, ignoring duplicate triggers."""
global _analytics_broadcast_task
if _analytics_broadcast_task is not None and not _analytics_broadcast_task.done():
return
_analytics_broadcast_task = asyncio.get_running_loop().create_task(
_debounced_analytics_broadcast()
)
class AnalyticsPing(BaseModel):
"""Navigation ping from pagerite.js (see docs/analytics.md)."""
fr: str = ""
to: str | None = None
#: 1 from admin clients: scrub the session instead of recording it.
hide: int = 0
#: Active reading time on ``fr`` (ms), if any.
read: int = 0
@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 stream (/_api/ws/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)
visit_index, flushed_clients = analytics_store.ping(
ping.fr,
ping.to,
ip,
request.headers.get("user-agent", ""),
request.headers.get("accept-language", ""),
hide=bool(ping.hide),
read=ping.read,
)
if visit_index is not None:
visit = analytics_store.data.visits[visit_index]
asyncio.create_task(_enrich_client(visit.client))
_schedule_client_enrichment(flushed_clients)
def _track_entry(path: str, request: Request) -> list[bytes]:
"""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 never register as visits. (Admin clients ping too, but
with hide=1, which scrubs their session instead of recording it.)
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.
Returns the client hashes of any pending crawler hits flushed to persistent
storage, so callers can schedule async geoip and reverse-DNS enrichment.
"""
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}"
full_path = f"{request.url.path}{_query_suffix(request)}"
return analytics_store.track_entry(
request.headers.get("referer", ""),
own_origin,
_client_ip(request),
request.headers.get("user-agent", ""),
full_path,
request.headers.get("accept-language", ""),
)
def _http_date(dt: datetime) -> str: def _http_date(dt: datetime) -> str:
"""RFC 7231 date for the Last-Modified header.""" """RFC 7231 date for the Last-Modified header."""
return format_datetime(dt.astimezone(UTC), usegmt=True) return format_datetime(dt.astimezone(UTC), usegmt=True)
@@ -510,6 +798,15 @@ def _is_reserved(path: str) -> bool:
return any(not _SLUG_RE.match(seg) for seg in path.split("/")) 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: def _check_reserved(path: str) -> None:
"""Reject paths that do not follow the slug charset.""" """Reject paths that do not follow the slug charset."""
if _is_reserved(path): if _is_reserved(path):
@@ -519,6 +816,25 @@ def _check_reserved(path: str) -> None:
) )
@app.websocket("/_api/ws/analytics")
async def analytics_websocket(ws: WebSocket) -> None:
"""Stream the analytics snapshot, then push updates as they happen.
Admin-only via the /_api forward-auth gate, like every management
endpoint. Powers the analytics viewer rendered at /_a.
"""
await ws.accept()
await ws.send_text(msgspec.json.encode(analytics_store.data).decode())
_analytics_ws_clients.add(ws)
try:
while True:
await ws.receive_text()
except Exception:
pass
finally:
_analytics_ws_clients.discard(ws)
@app.websocket("/_api/ws/editor") @app.websocket("/_api/ws/editor")
async def editor_ws(ws: WebSocket) -> None: async def editor_ws(ws: WebSocket) -> None:
"""Editor session: open pages, render previews, save — over one socket. """Editor session: open pages, render previews, save — over one socket.
@@ -683,9 +999,20 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
placeholder page (nav links point straight at its first child). placeholder page (nav links point straight at its first child).
""" """
path = path.strip("/") path = path.strip("/")
ua = request.headers.get("user-agent", "")
accept_language = request.headers.get("accept-language", "")
if path and _is_reserved(path): if path and _is_reserved(path):
# Invalid slug shape: not a content URL, let FastAPI return its # Invalid slug shape: not a content URL, let FastAPI return its
# built-in 404 instead of rendering an editable article page. # built-in 404 instead of rendering an editable article page.
# Scanner telltales (dotpaths like /.env, *.php) classify the IP
# as abuse in analytics.
client_hash = analytics_store.track_404(
_client_ip(request),
ua,
f"/{path}{_query_suffix(request)}",
accept_language,
)
asyncio.create_task(_enrich_client(client_hash))
raise HTTPException(404) raise HTTPException(404)
chain = resolve(data.menu, path) chain = resolve(data.menu, path)
node = chain[-1] if chain else None node = chain[-1] if chain else None
@@ -699,8 +1026,11 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
etag = f'"{path}@{node.modified.timestamp()}v{data.version}"' etag = f'"{path}@{node.modified.timestamp()}v{data.version}"'
if request.headers.get("if-none-match") == etag: if request.headers.get("if-none-match") == etag:
return Response(status_code=304) return Response(status_code=304)
if _is_trackable_path(path):
flushed = _track_entry(path, request)
_schedule_client_enrichment(flushed)
return HTMLResponse( 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={ headers={
"etag": etag, "etag": etag,
"last-modified": _http_date(node.modified), "last-modified": _http_date(node.modified),
@@ -710,6 +1040,9 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
if node is not None and node.published and node.content is None: if node is not None and node.published and node.content is None:
# Category label without a landing page: placeholder with the pen # Category label without a landing page: placeholder with the pen
# to create it (404 — no page here, but the node is real). # to create it (404 — no page here, but the node is real).
if _is_trackable_path(path):
flushed = _track_entry(path, request)
_schedule_client_enrichment(flushed)
return HTMLResponse( return HTMLResponse(
views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html), views.render_category(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html),
404, 404,
@@ -724,4 +1057,14 @@ async def show_page(request: Request, path: str) -> HTMLResponse | Response:
for slug, item in sorted_nodes(data.menu): for slug, item in sorted_nodes(data.menu):
if item.published: if item.published:
return RedirectResponse(f"/{slug}") return RedirectResponse(f"/{slug}")
if _is_trackable_path(path):
client_hash = analytics_store.track_404(
_client_ip(request),
ua,
f"/{path}{_query_suffix(request)}",
accept_language,
)
asyncio.create_task(_enrich_client(client_hash))
flushed = _track_entry(path, request)
_schedule_client_enrichment(flushed)
return HTMLResponse(views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html), 404) return HTMLResponse(views.render_not_found(data.menu, path, data.brand, data.custom_css, data.theme, data.favicon, data.brand_html), 404)
+5 -3
View File
@@ -29,6 +29,7 @@ Where to go next:
- The [docs](/docs/editing) section explains how to edit this site and shows every supported Markdown feature, source and result side by side. - The [docs](/docs/editing) section explains how to edit this site and shows every supported Markdown feature, source and result side by side.
- The [showcase](/showcase/gallery) section shows what finished pages can look like: image positioning, banners, a long read. - The [showcase](/showcase/gallery) section shows what finished pages can look like: image positioning, banners, a long read.
- Click the 🖊️ pen on any page to open the editor, and the ⚙️ pen for site settings and the structure tree. - Click the 🖊️ pen on any page to open the editor, and the ⚙️ pen for site settings and the structure tree.
- Elsewhere on the web: [![xkcd 927: Standards](https://imgs.xkcd.com/comics/standards.png "xkcd 927: Standards"){width=240}](https://xkcd.com/927/) — a cautionary tale about adding one more standard.
![Abstract waves](waves.svg "Generated SVG artwork, attached to this page"){width=420} ![Abstract waves](waves.svg "Generated SVG artwork, attached to this page"){width=420}
@@ -68,15 +69,15 @@ Every feature below is shown twice: first the Markdown source, then how it rende
### A subsection ### A subsection
*Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a *Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a
[link to the front page](/). Plain URLs become links automatically: [link to the front page](/). An image that links to its page:
https://example.com — and a hard line break [![xkcd 1179: ISO 8601](https://imgs.xkcd.com/comics/iso_8601.png "xkcd 1179: ISO 8601"){width=240}](https://xkcd.com/1179/) — and a hard line break
is just a newline. is just a newline.
``` ```
## A section heading ## A section heading
### A subsection ### 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 *Emphasis*, **strong**, ~~strikethrough~~, `inline code`, and a [link to the front page](/). An image that links to its page: [![xkcd 1179: ISO 8601](https://imgs.xkcd.com/comics/iso_8601.png "xkcd 1179: ISO 8601"){width=240}](https://xkcd.com/1179/) — and a hard line break
is just a newline. is just a newline.
## Lists and quotes ## Lists and quotes
@@ -354,6 +355,7 @@ This site runs on **Pagerite**: FastAPI + html5tagger + kanta, with content writ
- [How to edit this site](/docs/editing) - [How to edit this site](/docs/editing)
- [Markdown features](/docs/markdown/basics) - [Markdown features](/docs/markdown/basics)
- [The showcase](/showcase/gallery) - [The showcase](/showcase/gallery)
- [![xkcd 2347: Dependency](https://imgs.xkcd.com/comics/dependency.png "xkcd 2347: Dependency"){width=240}](https://xkcd.com/2347/) — a small comic about small dependencies
*Replace this page with whatever your site is about.* *Replace this page with whatever your site is about.*
""" """
+176 -11
View File
@@ -15,8 +15,10 @@ own URL renders a placeholder page (render_category).
""" """
from pathlib import Path from pathlib import Path
from html import unescape
import json import json
import os import os
import re
from html5tagger import HTML, Document, E, Template from html5tagger import HTML, Document, E, Template
@@ -110,27 +112,45 @@ def _editor_css_url(vite_url: str | None) -> str | None:
def _layout( def _layout(
modules: list[str] = (), modules: list[str] = (),
stylesheets: list[str] = (),
custom_css: str = "", custom_css: str = "",
theme: str = "", theme: str = "",
banner_design: str = "", banner_design: str = "",
favicon: str = "", favicon: str = "",
social: dict[str, str] | None = None,
extra_meta: dict[str, str] | None = None,
) -> Template: ) -> Template:
"""Page layout template with standard asset URLs and ES-module scripts. """Page layout template with standard asset URLs and ES-module scripts.
Stylesheets use ``blocking="render"`` so the browser waits for them before Stylesheets use ``blocking="render"`` so the browser waits for them before
showing the page, avoiding a flash of unstyled content. Order matters and 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), 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 In dev, pagerite.js re-appends the backend-rendered theme/design links
(and the custom CSS) after the Vite-injected base styles, keeping this (and the custom CSS) after the Vite-injected base styles, keeping this
order intact. 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") doc = Document(E.Title, lang="en")
# Responsive layout (see the 48rem breakpoint in pagerite.css) needs # Responsive layout (see the 48rem breakpoint in pagerite.css) needs
# the real device width, not the default 980px layout viewport. # the real device width, not the default 980px layout viewport.
doc.meta(name="viewport", content="width=device-width, initial-scale=1") 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 # A custom favicon (from the site editor) is linked explicitly; without
# one, browsers fall back to the build's /favicon.ico by convention. # one, browsers fall back to the build's /favicon.ico by convention.
if favicon: if favicon:
@@ -142,6 +162,8 @@ def _layout(
doc.meta(name="pagerite:editor-src", content=script[-1]) doc.meta(name="pagerite:editor-src", content=script[-1])
if editor_css: if editor_css:
doc.meta(name="pagerite:editor-css", content=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 # Stylesheet links carry stable ids so the site editor's hot swap can
# keep each sheet at its rendered position (see swapRegions). # keep each sheet at its rendered position (see swapRegions).
vite_url = os.environ.get("PAGERITE_VITE_URL") vite_url = os.environ.get("PAGERITE_VITE_URL")
@@ -153,6 +175,8 @@ def _layout(
for id_, url in sheets: for id_, url in sheets:
if url: if url:
doc.link(rel="stylesheet", href=url, blocking="render", id=id_) 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: for src in modules:
doc.script(src=src, type="module") doc.script(src=src, type="module")
if custom_css.strip(): if custom_css.strip():
@@ -426,6 +450,87 @@ def page_content(menu: dict[str, Node], path: str) -> HTML:
return HTML(str(doc)) 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( def render_page(
menu: dict[str, Node], menu: dict[str, Node],
path: str, path: str,
@@ -434,18 +539,24 @@ def render_page(
theme: str = "", theme: str = "",
favicon: str = "", favicon: str = "",
brand_html: str = "", brand_html: str = "",
base_url: str = "",
) -> str: ) -> str:
"""Render a full HTML page for the slug path.""" """Render a full HTML page for the slug path."""
node = resolve(menu, path)[-1] node = resolve(menu, path)[-1]
title = _title(path.rpartition("/")[2], node) title = _title(path.rpartition("/")[2], node)
main = page_content(menu, path)
social = _social_meta(node, path, title, str(main), brand, base_url)
return str( 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, Title=f"{title} {brand}" if brand else title,
Brand=_brand_link(brand, brand_html), Brand=_brand_link(brand, brand_html),
Nav=nav_html(menu, path), Nav=nav_html(menu, path),
Sidebar=sidebar_html(menu, path), Sidebar=sidebar_html(menu, path),
Banner=banner_html(menu, path, theme), Banner=banner_html(menu, path, theme),
Main=page_content(menu, path), Main=main,
), ),
) )
@@ -476,7 +587,7 @@ def render_category(
else: else:
doc.p("This section has no page of its own yet.") doc.p("This section has no page of its own yet.")
return str( 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, Title=f"{title} {brand}" if brand else title,
Brand=_brand_link(brand, brand_html), Brand=_brand_link(brand, brand_html),
Nav=nav_html(menu, path), Nav=nav_html(menu, path),
@@ -502,7 +613,7 @@ def render_not_found(
doc.h1("Not Found") doc.h1("Not Found")
doc.p(f"No article at /{path}. If there was before, it may have been deleted.") doc.p(f"No article at /{path}. If there was before, it may have been deleted.")
return str( 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", Title=f"Not Found {brand}" if brand else "Not Found",
Brand=_brand_link(brand, brand_html), Brand=_brand_link(brand, brand_html),
Nav=nav_html(menu, path), 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 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") vite_url = os.environ.get("PAGERITE_VITE_URL")
if 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: if "page" not in _asset_cache:
manifest = _manifest() manifest = _manifest()
entry = manifest["src/pagerite.js"] 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"] return _asset_cache["page"]
@@ -543,3 +658,53 @@ def _editor_assets() -> tuple[list[str], str | None]:
entry = manifest["src/main.js"] entry = manifest["src/main.js"]
_asset_cache["editor"] = [f"/{entry['file']}"], _editor_css_url(None) _asset_cache["editor"] = [f"/{entry['file']}"], _editor_css_url(None)
return _asset_cache["editor"] 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)),
),
)
+4 -3
View File
@@ -20,10 +20,13 @@ dependencies = [
"fastapi-vue>=1.3.1", "fastapi-vue>=1.3.1",
"fastapi[standard]>=0.141.1", "fastapi[standard]>=0.141.1",
"html5tagger>=2.0.0", "html5tagger>=2.0.0",
"httpx>=0.28.1",
"kanta>=0.8.1", "kanta>=0.8.1",
"markdown-it-py>=4.2.0", "markdown-it-py>=4.2.0",
"maxminddb>=3.1.1",
"mdit-py-plugins>=0.6.1", "mdit-py-plugins>=0.6.1",
"pygments>=2.20.0", "pygments>=2.20.0",
"ua-parser>=1.0.2",
] ]
[project.scripts] [project.scripts]
@@ -33,9 +36,7 @@ pagerite = "pagerite.__main__:main"
Repository = "https://git.zi.fi/LeoVasanko/pagerite" Repository = "https://git.zi.fi/LeoVasanko/pagerite"
[dependency-groups] [dependency-groups]
dev = [ dev = []
"httpx>=0.28.1",
]
[tool.hatch.version] [tool.hatch.version]
source = "vcs" source = "vcs"
+2 -2
View File
@@ -19,8 +19,8 @@ from devutil import (
setup_vite, setup_vite,
) )
DEFAULT_VITE_PORT = 3100 DEFAULT_VITE_PORT = 8200
DEFAULT_DEV_PORT = 3200 DEFAULT_DEV_PORT = 8210
HEALTH = "/?from=devserver.py" HEALTH = "/?from=devserver.py"
+941
View File
@@ -0,0 +1,941 @@
#!/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, crawler hits, and abuse scans for a Pagerite site.
Browser sessions (ordinary users) come from realistic residential IPv4 and IPv6
addresses and stay mostly stable; an IPv6 host part may rotate once mid-session,
and an IPv4 session may switch to another residential address. Crawler hits come
from datacenter IPs, with each crawler profile paired to a matching provider IP
when possible. Abuse scanners fire bursts of vulnerability probes from pinned
datacenter IPs.
Run against a local dev server, e.g.:
uv run scripts/fake_traffic.py http://localhost:3200
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 urlencode, 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
ip: 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",
"66.249.64.66", # US, Google
),
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",
"40.77.167.0", # US, Microsoft
),
CrawlerProfile(
"duckduckbot",
"DuckDuckBot/1.1; (+http://duckduckgo.com/duckduckbot.html)",
"95.217.0.1", # Germany, Hetzner VPS
),
CrawlerProfile(
"curl",
"curl/8.5.0",
"139.162.0.1", # Singapore, Linode VPS
),
]
# Residential IPv4 addresses and IPv6 /64 prefixes used for ordinary browser
# sessions. IPv6 entries keep the network part stable and randomise only the
# host part; the host may rotate once mid-session.
RESIDENTIAL_SOURCE_IPS: list[str] = [
# Residential IPv4
"91.154.140.209", # Finland, Elisa
"84.143.145.207", # Germany, Deutsche Telekom
"220.165.255.254", # China, Chinanet / China Telecom
"84.235.83.162", # Saudi Arabia, SaudiNet / STC
# Residential IPv6 /64 prefixes
"2a02:8109:ac82:6f0c::/64", # Germany, Deutsche Telekom
"240e:45d:1e60:5b0::/64", # China, China Telecom
"2409:8904:6720:4123::/64", # China, China Unicom
]
# Concrete datacenter IPs used for abuse scanner bursts. They stay pinned for
# the whole scan burst.
# Index 0 randomises its UA per request, index 1 uses a fixed browser UA,
# and index 2 uses a fixed crawler UA.
ABUSE_SOURCE_IPS: list[str] = [
"45.63.0.12", # US, Vultr VPS
"138.197.0.89", # US, DigitalOcean / Cloudways
"2a01:4f8:0:2::1234", # Germany, Hetzner VPS
]
# Paths commonly probed by attackers looking for exposed config, admin panels,
# version control, credentials, backups, or debug endpoints.
SUSPICIOUS_PATHS: list[str] = [
"/.env",
"/env",
"/.env.local",
"/env.development",
"/config",
"/config.json",
"/config.yaml",
"/config.yml",
"/configuration.json",
"/configuration.yaml",
"/configuration.yml",
"/settings.json",
"/settings.yaml",
"/settings.yml",
"/app.config",
"/appsettings.json",
"/appsettings.Development.json",
"/credentials",
"/credentials.json",
"/secrets",
"/secrets.json",
"/.aws/credentials",
"/.ssh/id_rsa",
"/id_rsa",
"/id_rsa.pub",
"/known_hosts",
"/sftp-config.json",
"/admin",
"/administrator",
"/adminer.php",
"/login",
"/signin",
"/auth/login",
"/api/login",
"/api/.env",
"/api/config",
"/api/v1/config",
"/api/v2/config",
"/webhook",
"/webhooks",
"/callback",
"/proxy",
"/image",
"/images",
"/preview",
"/download",
"/downloads",
"/log",
"/logs",
"/debug",
"/trace",
"/phpinfo.php",
"/info.php",
"/phpmyadmin",
"/pma",
"/myadmin",
"/phpMyAdmin",
"/wp-admin",
"/wp-login.php",
"/wp-config.php",
"/xmlrpc.php",
"/wp-json/wp/v2/users",
"/.git/config",
"/.git/HEAD",
"/git/config",
"/swagger-ui.html",
"/v2/api-docs",
"/actuator/env",
"/actuator/health",
"/actuator/configprops",
"/server-status",
"/.htaccess",
"/web.config",
"/package.json",
"/composer.json",
"/vendor/autoload.php",
"/docker-compose.yml",
"/Dockerfile",
"/manage",
"/console",
"/manager",
"/manager/html",
"/metrics",
"/prometheus",
"/healthz",
"/_api",
"/api",
"/api/v1/",
"/api/v2/",
"/graphql",
"/query",
"/feed",
"/rss",
"/_debug",
"/test",
"/testing",
"/tmp",
"/temp",
"/backup",
"/backups",
"/dump",
"/dumps",
"/sql",
"/db",
"/database",
"/dump.sql",
"/backup.sql",
"/db.sql",
"/backup.zip",
"/backup.tar.gz",
"/site.zip",
"/site.tar.gz",
"/source.zip",
"/src.zip",
"/upload",
"/uploads",
"/import",
"/export",
"/token",
"/tokens",
"/oauth",
"/oauth2",
"/openid",
"/jwks",
"/keys",
"/key",
"/private",
"/public",
]
# Realistic external referers. Most sessions arrive with a generic referer;
# a subset carries matching UTM tags on the landing URL.
PLAIN_REFERRERS: list[str] = [
"https://example.com/",
"https://somedomain.com/",
"https://another-site.org/",
"https://friend-site.net/",
]
# (referer origin, utm parameter dict) pairs used for tagged traffic.
TAGGED_REFERRERS: list[tuple[str, dict[str, str]]] = [
("https://chatgpt.com/", {"utm_source": "chatgpt.com"}),
("https://www.google.com/", {"utm_source": "google", "utm_medium": "organic"}),
("https://twitter.com/", {"utm_source": "twitter", "utm_medium": "social"}),
("https://www.linkedin.com/", {"utm_source": "linkedin", "utm_medium": "social"}),
("https://github.com/", {"utm_source": "github", "utm_medium": "referral"}),
("https://news.ycombinator.com/", {"utm_source": "hackernews", "utm_medium": "referral"}),
("https://www.reddit.com/", {"utm_source": "reddit", "utm_medium": "social"}),
("https://medium.com/", {"utm_source": "medium", "utm_medium": "referral"}),
("https://www.producthunt.com/", {"utm_source": "producthunt", "utm_medium": "referral"}),
]
# Fraction of referered sessions that also carry UTM tags.
UTM_RATE = 0.25
# Innocent-looking paths that do not exist on a Pagerite site. Hitting many of
# these from a single IP is itself a telltale of a spray-and-pray scanner.
NORMAL_404_PATHS: list[str] = [
"/about",
"/about-us",
"/services",
"/products",
"/contact",
"/contact-us",
"/team",
"/careers",
"/jobs",
"/pricing",
"/features",
"/demo",
"/trial",
"/docs",
"/documentation",
"/api-docs",
"/support",
"/help",
"/faq",
"/knowledge-base",
"/terms",
"/terms-of-service",
"/privacy",
"/privacy-policy",
"/legal",
"/blog",
"/news",
"/articles",
"/press",
"/events",
"/webinars",
"/podcast",
"/videos",
"/resources",
"/whitepapers",
"/case-studies",
"/customers",
"/clients",
"/testimonials",
"/reviews",
"/partners",
"/integrations",
"/api-reference",
"/developers",
"/status",
"/security",
"/trust",
"/compliance",
"/gdpr",
"/ccpa",
"/sitemap",
"/archive",
"/tags",
"/categories",
"/search",
"/users",
"/accounts",
"/dashboard",
"/profile",
"/settings",
"/preferences",
"/notifications",
"/messages",
"/inbox",
"/calendar",
"/reports",
"/analytics",
"/billing",
"/invoice",
"/orders",
"/cart",
"/checkout",
"/store",
"/shop",
"/home",
"/main",
"/start",
"/welcome",
"/intro",
"/overview",
"/summary",
"/portfolio",
"/projects",
"/work",
"/solutions",
]
ABUSE_USER_AGENTS: list[str] = [
# Desktop browsers
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 "
"(KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36",
"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",
"Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0",
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0",
"Mozilla/5.0 (Linux; Android 14; SM-S918B) AppleWebKit/537.36 "
"(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36",
"Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 "
"(KHTML, like Gecko) Version/17.5 Mobile/15E148 Safari/604.1",
# Well-known crawlers / bots
"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",
"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",
"Mozilla/5.0 (compatible; DuckDuckBot/1.1; +http://duckduckgo.com/duckduckbot.html)",
"Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)",
"Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 "
"(KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36 "
"(compatible; Googlebot/2.1; +http://www.google.com/bot.html)",
"Mozilla/5.0 (compatible; YandexBot/3.0; +http://yandex.com/bots)",
"Mozilla/5.0 (compatible; DotBot/1.2; +https://opensiteexplorer.org/dotbot; help@moz.com)",
"Mozilla/5.0 (compatible; SemrushBot/7~bl; +http://www.semrush.com/bot.html)",
"Mozilla/5.0 (compatible; AhrefsBot/7.0; +http://ahrefs.com/robot/)",
# Social / service fetchers
"facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)",
"Twitterbot/1.0",
"LinkedInBot/1.0 (compatible; Mozilla/5.0; Apache-HttpClient +http://www.linkedin.com)",
"Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)",
"WhatsApp/2.23.20.0",
# Command-line / library clients
"curl/8.5.0",
"Wget/1.21.4 (linux-gnu)",
"python-requests/2.32.3",
"Go-http-client/1.1",
"Node.js/20.5.1",
]
def _random_ipv6_host(prefix: str) -> str:
"""Return a concrete address within an IPv6 /64 prefix.
The host part is generated randomly, mimicking a fresh OS privacy address.
The input prefix must end in ``::/64`` (e.g. ``2a02:8109:ac82:6f0c::/64``).
"""
if "/" not in prefix:
return prefix
base, mask = prefix.split("/")
if mask != "64":
raise ValueError(f"only /64 IPv6 prefixes are supported, got {prefix!r}")
if base.endswith("::"):
base = base[:-2]
host = ":".join(f"{random.randint(0, 0xffff):04x}" for _ in range(4))
return f"{base}:{host}"
def _concretize_ip(entry: str) -> str:
"""Return a concrete IP address; randomise the host part for IPv6 /64 prefixes."""
if ":" in entry and "/" in entry:
return _random_ipv6_host(entry)
return entry
class _SessionIP:
"""Stable IP for a browser session, with one optional mid-session rotation.
IPv6 prefixes get a fresh random host part; IPv4 addresses are swapped for
another address from the residential pool.
"""
def __init__(self, entry: str, pool: Sequence[str]):
self.entry = entry
self.pool = pool
self._value = _concretize_ip(entry)
def current(self) -> str:
return self._value
def rotate(self) -> None:
if ":" in self.entry and "/" in self.entry:
self._value = _random_ipv6_host(self.entry)
return
# IPv4: switch to another IPv4 address from the residential pool.
for _ in range(20):
candidate_entry = random.choice(self.pool)
if ":" in candidate_entry and "/" in candidate_entry:
continue
candidate = _concretize_ip(candidate_entry)
if candidate != self._value:
self._value = candidate
return
def _sleep(base: float, jitter: float) -> None:
time.sleep(max(0.0, base + random.uniform(-jitter, jitter)))
def _normalize_url(url: str) -> str:
"""Return a usable base URL, adding missing scheme/host/port parts.
- bare ``:PORT`` becomes ``http://localhost:PORT``
- missing scheme becomes ``http://``
- otherwise returned as-is
Raises ``ValueError`` when the result is not a valid http(s) URL.
"""
raw = url.strip()
if not raw:
raise ValueError("empty URL")
if raw.startswith(":"):
raw = f"http://localhost{raw}"
elif raw.isdigit():
raw = f"http://localhost:{raw}"
elif not raw.startswith(("http://", "https://")):
raw = f"http://{raw}"
parsed = urlparse(raw)
if parsed.scheme not in ("http", "https") or not parsed.netloc:
raise ValueError(f"invalid URL: {url!r}")
return raw
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, include_external: bool = False) -> list[dict[str, Any]]:
"""Return links from the current page, excluding the current page.
Internal links stay on the site; external links are real https URLs found
in the page content and are marked with ``external: true``.
"""
return page.evaluate(
"""(includeExternal) => {
const loc = new URL(location.href);
const out = [];
for (const a of document.querySelectorAll('a[href]')) {
try {
const u = new URL(a.href);
const rect = a.getBoundingClientRect();
const item = {
href: a.href,
text: (a.innerText || a.title || '').trim().slice(0, 60),
visible: !!(rect.width && rect.height && rect.top < window.innerHeight && rect.bottom > 0),
};
if (u.origin === loc.origin
&& !u.pathname.startsWith('/_')
&& !u.pathname.startsWith('/auth')
&& u.pathname !== '/favicon.ico'
&& u.pathname !== loc.pathname) {
out.push(item);
} else if (includeExternal && u.protocol === 'https:' && u.origin !== loc.origin) {
out.push({ ...item, external: true });
}
} catch { /* ignore malformed hrefs */ }
}
return out;
}""",
include_external,
)
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,
ip_entry: str,
) -> dict[str, Any]:
from playwright.sync_api import sync_playwright
MAX_CLICKS = 6
STAY = (2.0, 6.0)
HEADLESS = True
REFERER_RATE = 0.75
INCLUDE_EXTERNAL = True
ip_provider = _SessionIP(ip_entry, RESIDENTIAL_SOURCE_IPS)
ips_used: list[str] = [ip_provider.current()]
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"],
)
extra_headers = {
"X-Forwarded-For": ip_provider.current(),
"Accept-Language": profile.accept_language,
}
# Most sessions arrive from an external origin; some are direct.
# A subset of referered sessions carries realistic UTM tags on the
# landing URL; the referer origin is paired with the UTM source.
tagged: dict[str, str] = {}
if random.random() < REFERER_RATE:
if random.random() < UTM_RATE:
referer, tagged = random.choice(TAGGED_REFERRERS)
else:
referer = random.choice(PLAIN_REFERRERS)
extra_headers["Referer"] = referer
context = browser.new_context(
user_agent=profile.user_agent,
viewport={"width": profile.viewport[0], "height": profile.viewport[1]},
extra_http_headers=extra_headers,
)
page = context.new_page()
# Update X-Forwarded-For per request; the value stays stable unless we
# explicitly rotate it once mid-session.
def _route_handler(route, request):
headers = dict(request.headers)
headers["X-Forwarded-For"] = ip_provider.current()
ips_used.append(headers["X-Forwarded-For"])
route.continue_(headers=headers)
page.route("**/*", _route_handler)
# Pick one point during the session to emulate an IP rotation.
rotate_at = random.randint(0, MAX_CLICKS - 1) if MAX_CLICKS > 0 else -1
entry = random.choice(paths) if paths else "/"
landing = urljoin(base, entry)
if tagged:
sep = "&" if "?" in landing else "?"
landing += sep + urlencode(tagged)
page.goto(landing, wait_until="networkidle")
trail.append(page.url)
for click_idx in range(MAX_CLICKS):
_sleep(random.uniform(*STAY) / 2, 0.3)
if click_idx == rotate_at:
ip_provider.rotate()
ips_used.append(ip_provider.current())
logger.debug("rotated session IP to %s", ip_provider.current())
links = _collect_links(page, INCLUDE_EXTERNAL)
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
if link.get("external"):
# Outbound navigation: the analytics exit ping is already
# in flight. Record the external URL and end the session.
trail.append(page.url)
_sleep(0.5, 0.2)
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": ips_used[0],
"ips_seen": len(set(ips_used)),
"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,
) -> dict[str, Any]:
path = random.choice(paths) if paths else "/"
url = urljoin(base, path)
fake_ip = profile.ip
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 _abuse_ua() -> str:
"""Return a randomized, syntactically valid user agent for an abuse scan."""
return random.choice(ABUSE_USER_AGENTS)
def _run_abuse_scanner(base: str, ip_index: int) -> dict[str, Any]:
"""Fire a burst of vulnerability probes from a single fake IP.
Scanner 0 randomises its user agent every request, scanner 1 uses a fixed
browser UA, and scanner 2 uses a fixed crawler UA.
"""
ip_entry = ABUSE_SOURCE_IPS[ip_index % len(ABUSE_SOURCE_IPS)]
if ":" in ip_entry and "/" in ip_entry:
fake_ip = _random_ipv6_host(ip_entry)
else:
fake_ip = ip_entry
MIN_HITS = 15
MAX_HITS = 25
total_hits = random.randint(MIN_HITS, MAX_HITS)
# Ensure the burst contains both telltales: suspicious paths and more
# than ten normal-looking 404 paths.
suspicious_count = max(5, total_hits // 3)
normal_count = total_hits - suspicious_count
if normal_count < 11:
normal_count = 11
suspicious_count = max(3, total_hits - normal_count)
paths = random.choices(SUSPICIOUS_PATHS, k=suspicious_count) + random.choices(
NORMAL_404_PATHS, k=normal_count
)
random.shuffle(paths)
ua_mode = ip_index % 3
if ua_mode == 0:
get_ua = _abuse_ua
elif ua_mode == 1:
def get_ua() -> str:
return BROWSER_PROFILES[0].user_agent
else:
def get_ua() -> str:
return CRAWLER_PROFILES[0].user_agent
scan_results: list[dict[str, Any]] = []
with httpx.Client(follow_redirects=True, timeout=15.0) as client:
for path in paths:
headers = {
"User-Agent": get_ua(),
"X-Forwarded-For": fake_ip,
"Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
"Accept-Language": random.choice(
["en-US,en;q=0.9", "en-GB,en;q=0.8", "en;q=0.7"]
),
}
try:
r = client.get(urljoin(base, path), headers=headers)
scan_results.append(
{"path": path, "status": r.status_code, "ua": headers["User-Agent"]}
)
except Exception as exc: # noqa: BLE001
scan_results.append({"path": path, "error": str(exc)})
_sleep(0.15, 0.1)
return {
"scanner": ip_index + 1,
"ip": fake_ip,
"hits": len(scan_results),
"results": scan_results,
}
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",
nargs="?",
default="http://localhost:8200",
help="Base URL of the Pagerite site (default: http://localhost:8200). "
"A bare :PORT or PORT is treated as http://localhost:PORT; a "
"missing scheme defaults to http://.",
)
parser.add_argument(
"-t",
"--duration",
type=float,
default=60.0,
metavar="SECONDS",
help="Rough maximum time to generate traffic (0 runs one preset batch)",
)
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)
try:
base = _normalize_url(args.url).rstrip("/")
except ValueError as exc:
logger.error("%s", exc)
return 2
# 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, duration=%ss)",
base,
len(paths),
args.duration,
)
results: list[dict[str, Any]] = []
arrival_rate = 1.0
def _wait() -> None:
wait = _poisson_wait(arrival_rate)
logger.debug("waiting %.2fs before next session", wait)
time.sleep(wait)
if args.duration <= 0:
# One preset batch.
for i in range(5):
if i > 0:
_wait()
profile = random.choice(BROWSER_PROFILES)
ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
logger.info(
"browser session: %s (ip=%s)",
profile.name,
_concretize_ip(ip_entry),
)
result = _run_browser_session(base, paths, profile, i, ip_entry)
results.append(result)
logger.debug(" trail: %s", result.get("trail", []))
for i in range(10):
if i > 0:
_wait()
profile = random.choice(CRAWLER_PROFILES)
logger.info(
"crawler hit: %s (ip=%s)",
profile.name,
profile.ip,
)
result = _run_crawler_hit(base, paths, profile)
results.append(result)
for i in range(3):
if i > 0:
_wait()
ip_entry = ABUSE_SOURCE_IPS[i % len(ABUSE_SOURCE_IPS)]
logger.info("abuse scanner: %s", ip_entry)
result = _run_abuse_scanner(base, i)
results.append(result)
logger.debug(
" hits: %s", [r.get("path") for r in result.get("results", [])]
)
else:
deadline = time.time() + args.duration
session_index = 0
while time.time() < deadline:
if session_index > 0:
_wait()
phase = session_index % 3
if phase == 0:
profile = random.choice(BROWSER_PROFILES)
ip_entry = random.choice(RESIDENTIAL_SOURCE_IPS)
logger.info(
"browser session: %s (ip=%s)",
profile.name,
_concretize_ip(ip_entry),
)
result = _run_browser_session(
base, paths, profile, session_index, ip_entry
)
logger.debug(" trail: %s", result.get("trail", []))
elif phase == 1:
profile = random.choice(CRAWLER_PROFILES)
logger.info(
"crawler hit: %s (ip=%s)",
profile.name,
profile.ip,
)
result = _run_crawler_hit(base, paths, profile)
else:
ip_entry = ABUSE_SOURCE_IPS[session_index % len(ABUSE_SOURCE_IPS)]
logger.info("abuse scanner: %s", ip_entry)
result = _run_abuse_scanner(base, session_index // 3)
logger.debug(
" hits: %s",
[r.get("path") for r in result.get("results", [])],
)
results.append(result)
session_index += 1
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())