Initial commit

apps/web/scripts/generate-icons.mjs

@@ -0,0 +1,42 @@
+// One-off generator, not part of the app's runtime or build. Run manually
+// whenever the icon design changes:
+//   pnpm --filter @notizarr/web exec node scripts/generate-icons.mjs
+// Requires `sharp` (devDependency) — rasterizes the hand-written SVG
+// sources into the PNG sizes PWA manifests / iOS actually need. Output is
+// committed to public/icons/, so this script does not need to run in CI or
+// in the Docker build.
+import { mkdir, readFile, writeFile, copyFile } from 'node:fs/promises'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import sharp from 'sharp'
+
+const scriptsDir = fileURLToPath(new URL('.', import.meta.url))
+const outDir = path.resolve(scriptsDir, '../public/icons')
+
+async function render(svgPath, outPath, size) {
+  const svg = await readFile(svgPath)
+  await sharp(svg).resize(size, size).png().toFile(outPath)
+  console.log(`wrote ${path.relative(scriptsDir, outPath)} (${size}x${size})`)
+}
+
+async function main() {
+  await mkdir(outDir, { recursive: true })
+
+  const standard = path.join(scriptsDir, 'icon-standard.svg')
+  const maskable = path.join(scriptsDir, 'icon-maskable.svg')
+
+  await render(standard, path.join(outDir, 'icon-192.png'), 192)
+  await render(standard, path.join(outDir, 'icon-512.png'), 512)
+  await render(maskable, path.join(outDir, 'maskable-512.png'), 512)
+  await render(maskable, path.join(outDir, 'apple-touch-icon.png'), 180)
+
+  await copyFile(standard, path.join(outDir, 'favicon.svg'))
+  console.log('wrote favicon.svg')
+
+  await writeFile(path.join(outDir, '.gitkeep'), '')
+}
+
+main().catch((err) => {
+  console.error(err)
+  process.exit(1)
+})

apps/web/scripts/icon-maskable.svg

@@ -0,0 +1,20 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6366f1" />
+      <stop offset="1" stop-color="#4338ca" />
+    </linearGradient>
+  </defs>
+  <!-- Full-bleed, unrounded background: the OS applies its own mask shape.
+       Glyph is sized to stay within the ~80% "safe zone" circle so it
+       survives circular/squircle/rounded-square masking on any platform. -->
+  <rect width="512" height="512" fill="url(#bg)" />
+  <path
+    d="M206 316 L206 196 L306 316 L306 196"
+    fill="none"
+    stroke="#ffffff"
+    stroke-width="30"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>

apps/web/scripts/icon-standard.svg

@@ -0,0 +1,17 @@
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#6366f1" />
+      <stop offset="1" stop-color="#4338ca" />
+    </linearGradient>
+  </defs>
+  <rect width="512" height="512" rx="112" fill="url(#bg)" />
+  <path
+    d="M176 336 L176 176 L336 336 L336 176"
+    fill="none"
+    stroke="#ffffff"
+    stroke-width="44"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>