The manifest pointed at icon.svg and nothing else. Chrome and Firefox install happily on that; Safari does not read the manifest's icons at all and looks for /apple-touch-icon.png by name, so an installed PWA on iOS got a screenshot of the page as its home-screen icon. This was written down as blocked: there is no SVG renderer on this machine, which is why the references were removed rather than left pointing at files that did not exist. Playwright is an SVG renderer, and it has been a dependency the whole time. scripts/generate-icons.js renders the same SVG at 192, 512 and 180. 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 already fetches every icon the manifest names, and now asks for the Apple one by name too, so a reference with no file behind it fails there rather than on somebody's phone. Co-Authored-By: Claude Opus 5 <[email protected]>
35 lines
1.5 KiB
HTML
35 lines
1.5 KiB
HTML
<!doctype html>
|
|
<html lang="da" data-theme="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
|
<meta name="theme-color" content="#111312" />
|
|
<meta name="description" content="verdande — opgaver og projekter, delt." />
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
|
<link rel="icon" href="/icon.svg" type="image/svg+xml" />
|
|
<!-- Safari ignores the manifest's icons entirely and looks for this by name.
|
|
Without it an installed PWA on iOS gets a screenshot of the page as its
|
|
home-screen icon. Generated from the same SVG by scripts/generate-icons.js. -->
|
|
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
|
<title>verdande</title>
|
|
<script>
|
|
// Applied before first paint, so a dark-theme user never sees a white
|
|
// flash on load. Reading localStorage here is the only way to do that —
|
|
// anything inside the app runs after the document has already painted.
|
|
try {
|
|
const stored = localStorage.getItem('verdande:theme');
|
|
const theme =
|
|
stored ??
|
|
(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
|
document.documentElement.dataset.theme = theme;
|
|
} catch (e) {
|
|
// Private browsing can refuse localStorage; the dark default stands.
|
|
}
|
|
</script>
|
|
%sveltekit.head%
|
|
</head>
|
|
<body data-sveltekit-preload-data="hover">
|
|
<div style="display: contents">%sveltekit.body%</div>
|
|
</body>
|
|
</html>
|