A repository's own look for its shared demo pages

Below is the same shared demo page, rendered by the pull request's code for a sample repository. On the left the repository has no theme. On the right its default branch has a .obeya/theme.css (shown underneath).

The logo is a file next to the theme in .obeya/ and is embedded in the page. The @import of a font from the internet is dropped: a themed page loads nothing from other servers.

/* .obeya/theme.css on the default branch (shortened) */
:root { --bg: #f4f1ff; --card: #ffffff; --ink: #1c1640; --muted: #6b6490;
        --line: #ddd6f5; --chip: #ebe6ff; --accent: #e85d3a; }
@import url("https://fonts.example.com/inter.css");   /* dropped */
body, h1 { font-family: Helvetica, Arial, sans-serif; }
h1 { font-weight: 800; letter-spacing: -0.02em; }
.top::before { content: ""; display: block; width: 120px; height: 32px;
               background: url(logo.svg) no-repeat; }   /* embedded */
video, ol { border-radius: 14px; }

When the theme changes, pages already shared with the old look show as outdated with the reason “Theme changed” and can be shared again. „Ausblenden“ hides such a page until its repository's theme changes again or the page is shared again.

Hidden references stay out

A theme is read the way a browser reads CSS, so references written in roundabout ways are dropped too. The same theme as read by the pull request's first version and by the version with the fixes; only the logo from .obeya/ goes in:

.top { background: \75 rl(https://tracker.example/pixel.png); }
h1 { background: image-set("https://tracker.example/hero.png" 1x); }
main { --img: "/private/notes.png";
       background: image-set(var(--img) 1x); }
@import "data:text/css,body%7Bbackground:url("")%7D";
.logo { background: url(data:image/svg+xml;base64,…); }

.top { background: url(""); }
h1 { background: image-set("" 1x); }
main { --img: "/private/notes.png";
       background: image-set("" 1x); }

.logo { background: url(data:image/svg+xml;base64,…); }

The theme as written: an escaped url(, a string in image-set(), a value put in through a custom property, and a stylesheet hidden in a data: URL. Pages with a theme also carry a content policy that blocks other servers, so even the first version loaded nothing from the internet; the fixes make sure the references do not get into the page in the first place.

The theme is also read only when the repository's main branch moves, not each time the canvas is drawn.