feat(urd): mærket bliver ð, og frontend-bygget bliver deterministisk
## Mærket Urds oplagte mærke var ᚢ uruz — bogstavet navnet begynder med i den ældre futhark, præcis som Verdandes er ᚹ wunjo. Det blev tegnet sådan først. Men uruz er allerede et af husets egne produkter, og dets egen `scripts/gen-icons.ts` siger i sin kommentar at den "draws the Uruz rune (ᚢ) in rune-gold" med "a tall left vertical, a shoulder across the top, and a shorter" — altså samme glyf, samme konstruktion, kun en anden farve. To af samme persons apps side om side på en hjemmeskærm, hvilket er nøjagtig det sted mærket skal kunne skelnes. ᚦ thurisaz blev forkastet et niveau nede af samme grund: en stav med en trekant til højre, og det er ᚹ også. Ved 16px er de én form. Så bogstavet frem for runen: ð, ethet i Urðr. Centreret ved at tælle malede pixels frem for ud fra path-tallene, fordi en centreret kasse ikke er en centreret glyf: verdande ᚹ blæk x 53–108 midte 80.5 · y 18–131 midte 74.5 urd ð blæk x 39–110 midte 74.5 · y 15–134 midte 74.5 Verdandes +5.5 i x er dens egen bevidste forskydning — en tung stav ved siden af et let flag skal sidde til højre for midten for at se centreret ud. ð er symmetrisk nok til at undvære den, og de to er enige i y. Læsbarhed, målt: ð læses fra 32px og op. Ved 16px er det en klat, og det er ᚹ også — en favicon er ikke det, der skiller to installerede apps i en dock. `productRune` hedder nu `productMark`, fordi ð ikke er en rune. ## Determinisme SvelteKits `kit.version.name` er som standard `Date.now()`. Millisekundet landede i version.json, i index.html og i service-workeren, ændrede indholdshashen på hver chunk der refererer dem, og dermed deres filnavne. To bygninger af samme commit havde forskellige filer i sig. Dockerfilen har i et år sagt at `-trimpath` og en tom buildid "keep the output reproducible". Flagene gjorde deres arbejde; frontenden i binæren bar et tidsstempel. Sætningen var falsk, og ingen læste den. Fastgjort til VERSION, som udgivelsen allerede sender ind, og `dev` når intet sætter den. Målt ved at bygge to gange og diffe træet, før og efter. Prisen er at et lokalt `npm run build` ikke længere ligner en ny version for service-workeren — hvilket kun betyder noget på en udrullet instans, hvor udgivelsen sender det rigtige mærkat. Det gør også CI's nye påstand mulig: de to images deler alle lag, så urd bærer samme binær som verdande frem for en genbygning der tilfældigvis matcher. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
kristianwind
co-authored by
Claude Opus 5
Claude Opus 5
parent
b451fd585d
commit
ff988d26bb
+29
-5
@@ -141,11 +141,11 @@ test('fanen, mærket og manifestet siger alle urd', async ({ page }) => {
|
||||
|
||||
const mærke = page.getByRole('navigation', { name: 'Hovedmenu' }).locator('.brand');
|
||||
await expect(mærke.locator('.name')).toHaveText('urd');
|
||||
// ᚢ uruz, det bogstav navnet begynder med i den ældre futhark — og ikke ᚹ
|
||||
// wunjo, som er Verdandes. Begge er navngivne værdier frem for "der er en
|
||||
// rune": en tom span og den forkerte rune ser ens ud for en prøve, der kun
|
||||
// spørger om der står noget.
|
||||
await expect(mærke.locator('.rune')).toHaveText('ᚢ');
|
||||
// ð, ikke ᚹ wunjo og ikke ᚢ uruz. Begge de to er navngivne værdier frem for
|
||||
// "der står noget": en tom span, Verdandes mærke og uruz-appens ser ens ud for
|
||||
// en prøve, der kun spørger, om feltet er udfyldt.
|
||||
await expect(mærke.locator('.rune')).toHaveText('ð');
|
||||
await expect(mærke.locator('.rune')).not.toHaveText('ᚢ');
|
||||
|
||||
const manifest = await (await page.request.get('/manifest.webmanifest')).json();
|
||||
expect(manifest.name).toBe('urd');
|
||||
@@ -246,3 +246,27 @@ test('ingen side kalder en rute, udgaven ikke har', async ({ page }) => {
|
||||
// Tallet med på det grønne: elleve sider og et projekt, frem for "ingen fejl".
|
||||
expect(trouble, `besøgte ${sider.length} sider`).toEqual([]);
|
||||
});
|
||||
|
||||
test('ikonet er urds, hele vejen ud', async ({ page }) => {
|
||||
// Målt på stregerne i SVG'en frem for på "der kom et billede": en tom
|
||||
// respons, verdandes mærke og urds ser alle ens ud for en prøve, der kun
|
||||
// spørger, om der står noget.
|
||||
const svg = await (await page.request.get('/icon.svg')).text();
|
||||
expect(svg, 'ð: skålen').toContain('cx="32" cy="42" r="12"');
|
||||
expect(svg, 'ð: ascenderen').toContain('M44 36L27 10');
|
||||
expect(svg, 'ð: tværstregen, som er det der skiller ð fra et d').toContain('M25 20h18');
|
||||
expect(svg, 'og ikke ᚹ wunjos flag').not.toContain('M26 15l17');
|
||||
|
||||
// De tre PNG'er har ingen streger at læse, så de måles på at de er urds —
|
||||
// sammenlignet med filen under sit eget navn, som ligger i samme byg.
|
||||
for (const [sti, egen] of [
|
||||
['/icon-192.png', '/urd-icon-192.png'],
|
||||
['/icon-512.png', '/urd-icon-512.png'],
|
||||
['/apple-touch-icon.png', '/urd-apple-touch-icon.png']
|
||||
]) {
|
||||
const a = await (await page.request.get(sti)).body();
|
||||
const b = await (await page.request.get(egen)).body();
|
||||
expect(a.length, `${sti} er tom`).toBeGreaterThan(1000);
|
||||
expect(a.equals(b), `${sti} er ikke urds`).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -5498,7 +5498,7 @@ test('the full edition still calls itself verdande', async ({ page }) => {
|
||||
|
||||
const brand = page.getByRole('navigation', { name: /Hovedmenu|Main menu/ }).locator('.brand');
|
||||
await expect(brand.locator('.name')).toHaveText('verdande');
|
||||
// ᚹ wunjo, not ᚢ uruz.
|
||||
// ᚹ wunjo, not ð.
|
||||
await expect(brand.locator('.rune')).toHaveText('ᚹ');
|
||||
|
||||
await page.goto('/noter');
|
||||
@@ -5507,4 +5507,11 @@ test('the full edition still calls itself verdande', async ({ page }) => {
|
||||
const manifest = await (await page.request.get('/manifest.webmanifest')).json();
|
||||
expect(manifest.name).toBe('verdande');
|
||||
expect(manifest.description).toBe('Opgaver og projekter, delt.');
|
||||
|
||||
// The other half of the icon alias: this edition must still get Wunjo. Both
|
||||
// sets of files are in the same binary, so a swap that fired in both editions
|
||||
// would pass in edition.spec.js and quietly change this program's mark.
|
||||
const icon = await (await page.request.get('/icon.svg')).text();
|
||||
expect(icon).toContain('M26 15l17');
|
||||
expect(icon).not.toContain('M44 36L27 10');
|
||||
});
|
||||
|
||||
@@ -1,40 +1,71 @@
|
||||
/**
|
||||
* Renders static/icon.svg to the PNGs the manifest and iOS need.
|
||||
* Renders each edition's icon SVG to the PNGs the manifest and iOS need.
|
||||
*
|
||||
* node scripts/generate-icons.js
|
||||
*
|
||||
* A script rather than a test, so CI never runs it and never rewrites a tracked
|
||||
* binary. Run it when the icon changes; the smoke test fetches every icon the
|
||||
* binary. Run it when an icon changes; the smoke test fetches every icon the
|
||||
* manifest names, so a reference with no file behind it fails there.
|
||||
*
|
||||
* It drives Chromium because there is no SVG renderer on this machine — which is
|
||||
* why these references were once removed rather than left pointing at files that
|
||||
* did not exist. Playwright is a renderer, and it is already a dependency.
|
||||
*
|
||||
* Two sets, because there are two editions. Both ship in the one binary and the
|
||||
* server decides which to serve at /icon.svg and friends — see
|
||||
* internal/httpapi/shell.go. The alternative, rewriting the manifest to point at
|
||||
* urd-icon-192.png, would have left `apple-touch-icon.png` behind: Safari looks
|
||||
* for that one BY NAME and ignores the manifest entirely, so a renamed path there
|
||||
* is a home-screen icon that is a screenshot of the page.
|
||||
*/
|
||||
import { chromium } from '@playwright/test';
|
||||
import { readFileSync, writeFileSync } from 'node:fs';
|
||||
|
||||
// The three sizes, and why each is here.
|
||||
const SIZES = [
|
||||
// The two the manifest asks for: 192 for a launcher, 512 for a splash screen.
|
||||
{ file: 'static/icon-192.png', size: 192 },
|
||||
{ file: 'static/icon-512.png', size: 512 },
|
||||
// And the one Safari wants by name. It ignores the manifest's icons entirely
|
||||
// and looks for this, which is why an installed PWA on iOS otherwise gets a
|
||||
// screenshot of the page as its home-screen icon.
|
||||
{ file: 'static/apple-touch-icon.png', size: 180 }
|
||||
{ suffix: '-192.png', size: 192 },
|
||||
{ suffix: '-512.png', size: 512 },
|
||||
// And the one Safari wants by name.
|
||||
{ suffix: '-apple-touch.png', size: 180 }
|
||||
];
|
||||
|
||||
// `out` is spelled out per set rather than built from the prefix, because
|
||||
// verdande's three were named before there was a second set and renaming them
|
||||
// would move the paths the manifest and app.html already point at.
|
||||
const SETS = [
|
||||
{
|
||||
source: 'static/icon.svg',
|
||||
out: {
|
||||
'-192.png': 'static/icon-192.png',
|
||||
'-512.png': 'static/icon-512.png',
|
||||
'-apple-touch.png': 'static/apple-touch-icon.png'
|
||||
}
|
||||
},
|
||||
{
|
||||
source: 'static/urd-icon.svg',
|
||||
out: {
|
||||
'-192.png': 'static/urd-icon-192.png',
|
||||
'-512.png': 'static/urd-icon-512.png',
|
||||
'-apple-touch.png': 'static/urd-apple-touch-icon.png'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const svg = readFileSync('static/icon.svg', 'utf8');
|
||||
const browser = await chromium.launch();
|
||||
const page = await browser.newPage();
|
||||
|
||||
for (const { file, size } of SIZES) {
|
||||
await page.setViewportSize({ width: size, height: size });
|
||||
await page.setContent(
|
||||
`<style>html,body{margin:0;padding:0}svg{display:block;width:${size}px;height:${size}px}</style>${svg}`
|
||||
);
|
||||
writeFileSync(file, await page.locator('svg').screenshot());
|
||||
console.log(`${file} ${size}×${size}`);
|
||||
for (const set of SETS) {
|
||||
const svg = readFileSync(set.source, 'utf8');
|
||||
for (const { suffix, size } of SIZES) {
|
||||
const file = set.out[suffix];
|
||||
await page.setViewportSize({ width: size, height: size });
|
||||
await page.setContent(
|
||||
`<style>html,body{margin:0;padding:0}svg{display:block;width:${size}px;height:${size}px}</style>${svg}`
|
||||
);
|
||||
writeFileSync(file, await page.locator('svg').screenshot());
|
||||
console.log(`${file} ${size}×${size}`);
|
||||
}
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
|
||||
@@ -480,12 +480,14 @@
|
||||
|
||||
<nav class="sidebar" aria-label={t('nav.main')}>
|
||||
<div class="brand">
|
||||
<!-- The mark: one rune, the letter the Norn's name starts with in the elder
|
||||
futhark — Wunjo for Verdande, Uruz for Urd. Both come from the store
|
||||
rather than from here, because the two editions of this program are two
|
||||
products with two names, and a wordmark is the one place a reader
|
||||
decides which one they are looking at. -->
|
||||
<span class="rune" aria-hidden="true">{app.productRune}</span>
|
||||
<!-- The mark — ᚹ Wunjo for Verdande, ð for Urd. Not two runes, though it
|
||||
was meant to be: uruz is already another of this author's apps and
|
||||
carries that glyph. See web/static/urd-icon.svg.
|
||||
|
||||
Both come from the store rather than from here, because the two editions
|
||||
of this program are two products with two names, and a wordmark is the
|
||||
one place a reader decides which one they are looking at. -->
|
||||
<span class="rune" aria-hidden="true">{app.productMark}</span>
|
||||
<span class="name">{app.productSlug}</span>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -86,11 +86,20 @@ class AppState {
|
||||
}
|
||||
|
||||
/**
|
||||
* Mærket: én rune, det bogstav navnet begynder med i den ældre futhark.
|
||||
* ᚹ wunjo for Verdande, ᚢ uruz for Urd.
|
||||
* Mærket: ᚹ wunjo for Verdande, ð for Urd.
|
||||
*
|
||||
* Ikke to runer, selvom det var meningen. Urds oplagte mærke var ᚢ uruz,
|
||||
* bogstavet navnet begynder med i den ældre futhark, præcis som Verdandes er
|
||||
* wunjo — og det blev tegnet sådan først. Men uruz er allerede et af husets
|
||||
* egne produkter, og dets `gen-icons.ts` tegner samme glyf i guld. To af samme
|
||||
* persons apps side om side på en hjemmeskærm, hvilket er nøjagtig det sted,
|
||||
* mærket skal kunne skelnes. ᚦ thurisaz blev forkastet et niveau nede af samme
|
||||
* grund: en stav med en trekant til højre, og det er ᚹ også.
|
||||
*
|
||||
* Så bogstavet frem for runen. Hele historien står i web/static/urd-icon.svg.
|
||||
*/
|
||||
get productRune() {
|
||||
return this.notesOnly ? '\u16A2' : '\u16B9';
|
||||
get productMark() {
|
||||
return this.notesOnly ? 'ð' : '\u16B9';
|
||||
}
|
||||
|
||||
/** Transient messages: a failed save, a rolled-back change. */
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,42 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<!-- Urd's mark: ð, the eth in Urðr. Drawn in Verdande's strokes so the two read
|
||||
as one family — same width, same round caps, same plate.
|
||||
|
||||
NOT a rune, and that is the whole story of this file. The obvious mark was
|
||||
ᚢ uruz, the letter the name begins with in the elder futhark, exactly as
|
||||
Verdande's is ᚹ wunjo. It was drawn that way first. Then: uruz is already
|
||||
one of this author's products, and uruz/scripts/gen-icons.ts says in its own
|
||||
comment that it "draws the Uruz rune (ᚢ) in rune-gold" with "a tall left
|
||||
vertical, a shoulder across the top, and a shorter" one — the same glyph,
|
||||
the same construction, differing only in colour. Two of one person's apps
|
||||
side by side on a home screen, which is precisely where this mark is meant
|
||||
to be distinguishable.
|
||||
|
||||
ᚦ thurisaz was considered next, for the ð itself, and rejected for the same
|
||||
reason one level down: it is a stave with a triangle on its right, and so is
|
||||
ᚹ. At 16px they are one shape.
|
||||
|
||||
So the letter rather than the rune. ð is unmistakably Nordic, nothing else
|
||||
here uses it, and it is a closed bowl where both neighbours are open staves.
|
||||
|
||||
Centred by counting painted pixels — white on black, headless Chromium, the
|
||||
plate removed so the card is not what gets measured — rather than from the
|
||||
path numbers, because a centred box is not a centred glyph:
|
||||
|
||||
verdande ᚹ ink x 53–108 centre 80.5 · y 18–131 centre 74.5
|
||||
urd ð ink x 39–110 centre 74.5 · y 15–134 centre 74.5
|
||||
|
||||
Verdande's +5.5 in x is its own deliberate nudge: a heavy stave beside a
|
||||
light flag has to sit right of centre for the ink to look centred. ð is
|
||||
symmetric enough not to need it, and the two agree exactly in y.
|
||||
|
||||
Legibility, measured rather than hoped: it reads as ð at 32px and above. At
|
||||
16px it is a blob — and so is ᚹ, and a favicon is not what tells two
|
||||
installed apps apart in a dock. -->
|
||||
<rect width="64" height="64" rx="14" fill="#111312"/>
|
||||
<g fill="none" stroke="#5fbf8f" stroke-width="6.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="32" cy="42" r="12"/>
|
||||
<path d="M44 36L27 10"/>
|
||||
<path d="M25 20h18"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -14,6 +14,37 @@ export default {
|
||||
}),
|
||||
alias: {
|
||||
$lib: 'src/lib'
|
||||
},
|
||||
|
||||
/**
|
||||
* The build's own version string, which SvelteKit puts in
|
||||
* `_app/version.json` and the service worker reads to decide whether a new
|
||||
* version has been deployed.
|
||||
*
|
||||
* Its default is `Date.now()`, and that made every build of this frontend
|
||||
* produce different bytes: the millisecond lands in version.json, in
|
||||
* index.html and in service-worker.js, which changes the content hash of
|
||||
* every chunk that references them, which changes those chunks' filenames.
|
||||
* So two builds of the same commit had different file names in them.
|
||||
*
|
||||
* That is not an aesthetic problem, and it had two costs. The Dockerfile
|
||||
* said `-trimpath` and an empty buildid "keep the output reproducible", and
|
||||
* that sentence had been false for a year — the flags did their job and the
|
||||
* frontend embedded in the binary carried a millisecond. And the Dockerfile
|
||||
* builds one binary into two images, verdande and urd, where the claim is
|
||||
* that they are the same program rather than a fork; with a timestamp in the
|
||||
* build, that claim could not be checked, because no two builds ever
|
||||
* matched. CI checks it now.
|
||||
*
|
||||
* Measured by building twice and diffing the tree, before and after.
|
||||
*
|
||||
* `dev` when nothing sets it, so a local build is stable too. The cost is
|
||||
* that a local `npm run build` no longer looks like a new version to the
|
||||
* service worker — which only matters on a deployed instance, where the
|
||||
* release workflow passes the real tag.
|
||||
*/
|
||||
version: {
|
||||
name: process.env.VERDANDE_VERSION ?? 'dev'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user