Add the 'eyes' banner design; seed banners only on select sub pages

Banner designs can now ship arbitrary markup as banner.html (canvas +
style + script), taking precedence over banner.svg; the artwork is
inlined in a div[data-design] wrapper either way, which the editor's
live preview preserves (and never re-runs its scripts).

The bundled 'eyes' design (themes/eyes/banner.html + banner.css sizing
the stage) replaces the eyes canvas script that was embedded in the
notes-on-urls page's own banner — the page now just picks the design.
Seeds set banners only on select sub pages (the-long-read gradient,
canvas-nights stars): the front page no longer gets a banner image and
shows the theme's default design. Seed entries carry a banner_design
field.
This commit is contained in:
2026-08-18 06:36:05 +00:00
parent c5a91edac7
commit 0ec9be330e
9 changed files with 494 additions and 161 deletions
+6 -4
View File
@@ -775,12 +775,14 @@ function previewBanner() {
if (!el) return
if (banner.value.trim()) {
// Own banner code supplements the design: the inlined design artwork
// (marked svg[data-design]) stays in place, the author code goes after
// it so its styles win.
const artwork = [...el.querySelectorAll('svg[data-design]')]
// (marked with [data-design]) is detached while the author code is
// swapped in (so runScripts never re-runs the design's own scripts),
// then put back first — author code stays last so its styles win.
const artwork = [...el.querySelectorAll('[data-design]')]
for (const a of artwork) a.remove()
el.innerHTML = banner.value
el.prepend(...artwork)
runScripts(el)
el.prepend(...artwork)
} else {
// No banner code of its own: the region must show the inherited/design
// banner — re-render from the server (an empty write here would wipe it).
+9
View File
@@ -160,6 +160,15 @@ body {
will-change: transform;
}
/* The design artwork wrapper (div[data-design]) takes the sizing and
parallax above; an svg inside it fills it (it is what used to be the
direct child before designs got a wrapper). */
#page-banner [data-design]>svg {
display: block;
width: 100%;
height: 100%;
}
#brand,
#nav {
position: relative;