From 30947df16b4a0977aa8a9b14376e77118b7c3825 Mon Sep 17 00:00:00 2001 From: Leo Vasanko Date: Tue, 18 Aug 2026 05:46:02 +0000 Subject: [PATCH] Backend-served themes and selectable, inheritable banner designs Themes move from Vite-built frontend assets to pagerite/themes/{name}/ folders holding theme.css and/or banner.css (+ banner.svg), served by the backend at /_themes/{name}/... and re-read from disk per request (etag by mtime), so on-disk edits show on the next page load even in prod and new themes need no build or config. The theme and banner-design selectors enumerate these folders via GET /_api/settings. Banner designs: Node.banner_design picks a design per page (None inherits from ancestors, then the front page, then the active theme's own design; "" = none). The design's banner.css is linked in (id pagerite-banner, between theme and custom CSS) and its banner.svg inlined into #page-banner first (marked svg[data-design]); the page's own Node.banner HTML renders after it, so author code always wins. #page-banner is now a stacking grid so artwork and author code overlay. Dev/prod hot loading unified: the backend renders the theme/design links in both modes; in dev pagerite.js only re-appends them (and the custom CSS) after the Vite-injected base styles. Theme switches just swap the link href. The pagerite:theme meta and Vite theme build entries are gone. --- AGENTS.md | 70 +++--- docs/design-principles.md | 38 +-- frontend/src/SiteEditor.vue | 108 ++++++-- frontend/src/assets/pagerite.css | 12 +- frontend/src/pagerite.js | 23 +- frontend/vite.config.js | 13 +- pagerite/app.py | 52 +++- pagerite/data.py | 8 +- pagerite/themes/corporate/banner.css | 79 ++++++ .../themes/corporate/theme.css | 79 +----- pagerite/themes/nitro/banner.css | 79 ++++++ .../themes/nitro/theme.css | 74 ------ pagerite/themes/purple/banner.css | 21 ++ .../themes/purple/theme.css | 19 -- pagerite/views.py | 233 ++++++++++++------ 15 files changed, 560 insertions(+), 348 deletions(-) create mode 100644 pagerite/themes/corporate/banner.css rename {frontend/src/assets => pagerite}/themes/corporate/theme.css (78%) create mode 100644 pagerite/themes/nitro/banner.css rename {frontend/src/assets => pagerite}/themes/nitro/theme.css (85%) create mode 100644 pagerite/themes/purple/banner.css rename {frontend/src/assets => pagerite}/themes/purple/theme.css (82%) diff --git a/AGENTS.md b/AGENTS.md index 860a4e4..33d5a11 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -53,18 +53,27 @@ not for the public pages. See `docs/design-principles.md` for the design. 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), then the active - theme's banner artwork: an inline SVG from - `pagerite/themes/{theme}/banner.svg`, inlined into `#page-banner` by - the backend only when no user banner applies (so it is recolorable - from the theme CSS via `var(...)` and never fights user designs; the - base stylesheet falls back to a plain gradient). + inherits from the node's ancestors (front page last). It is rendered + AFTER the banner design's artwork, so author code (e.g. a `