oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2026-08-08 02:02:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ship PWA app icons and correct the manifest theme color

Browse Source
This commit is contained in:
Oleh Omelchenko
2026-06-10 01:32:52 +03:00
parent 7599acd25e
commit a5e5d1a2ad
5 changed files with 104 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="mask-icon" href="/icon-mono.svg" color="#0e7490" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Astrolabe</title>
</head>
public/favicon.svg
+43 -6
View File
@@ -1,7 +1,44 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<circle cx="16" cy="16" r="14" fill="none" stroke="#1a1a2e" stroke-width="2" />
<circle cx="16" cy="16" r="6" fill="none" stroke="#1a1a2e" stroke-width="1.5" />
<line x1="16" y1="2" x2="16" y2="30" stroke="#1a1a2e" stroke-width="1.5" />
<line x1="2" y1="16" x2="30" y2="16" stroke="#1a1a2e" stroke-width="1.5" />
<circle cx="16" cy="16" r="1.5" fill="#1a1a2e" />
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<radialGradient id="sky" cx="50%" cy="42%" r="75%">
<stop offset="0%" stop-color="#0E7490"/>
<stop offset="100%" stop-color="#06323E"/>
</radialGradient>
</defs>
<!-- mater / background -->
<rect width="64" height="64" rx="14" fill="url(#sky)"/>
<!-- throne: the suspension loop that says "astrolabe", not "compass" -->
<circle cx="32" cy="8.5" r="3" fill="none" stroke="#5EEAD4" stroke-width="2"/>
<!-- limb ring -->
<circle cx="32" cy="32" r="22" fill="none" stroke="#5EEAD4" stroke-width="3"/>
<!-- degree ticks (skip the heading where the star sits) -->
<g stroke="#5EEAD4" stroke-width="2" stroke-linecap="round" opacity="0.55">
<line x1="32" y1="13" x2="32" y2="16.5"/>
<line x1="32" y1="51" x2="32" y2="47.5"/>
<line x1="13" y1="32" x2="16.5" y2="32"/>
<line x1="51" y1="32" x2="47.5" y2="32"/>
<line x1="18.6" y1="18.6" x2="21" y2="21"/>
<line x1="18.6" y1="45.4" x2="21" y2="43"/>
<line x1="45.4" y1="45.4" x2="43" y2="43"/>
</g>
<!-- alidade, rotated to sight the star -->
<g transform="rotate(-32 32 32)">
<path d="M 13.5 32 L 20 29.6 L 44 29.6 L 50.5 32 L 44 34.4 L 20 34.4 Z"
fill="#FFCB2E"/>
</g>
<!-- pivot -->
<circle cx="32" cy="32" r="3.4" fill="#FFCB2E"/>
<circle cx="32" cy="32" r="1.3" fill="#06323E"/>
<!-- the sighted star, pinned on the limb at the alidade's heading -->
<g transform="translate(50.7 20.3)">
<path d="M 0 -6.2 C 0.9 -2.1 2.1 -0.9 6.2 0 C 2.1 0.9 0.9 2.1 0 6.2 C -0.9 2.1 -2.1 0.9 -6.2 0 C -2.1 -0.9 -0.9 -2.1 0 -6.2 Z"
fill="#FFCB2E"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 441 B

After

Width:  |  Height:  |  Size: 1.6 KiB

public/icon-maskable.svg
+34
View File
@@ -0,0 +1,34 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<defs>
<radialGradient id="sky" cx="50%" cy="42%" r="75%">
<stop offset="0%" stop-color="#0E7490"/>
<stop offset="100%" stop-color="#06323E"/>
</radialGradient>
</defs>
<!-- full-bleed background: the OS applies its own mask shape -->
<rect width="64" height="64" fill="url(#sky)"/>
<!-- artwork scaled to the 80% safe zone -->
<g transform="translate(32 32) scale(0.8) translate(-32 -32)">
<circle cx="32" cy="8.5" r="3" fill="none" stroke="#5EEAD4" stroke-width="2.4"/>
<circle cx="32" cy="32" r="22" fill="none" stroke="#5EEAD4" stroke-width="3"/>
<g stroke="#5EEAD4" stroke-width="2" stroke-linecap="round" opacity="0.55">
<line x1="32" y1="13" x2="32" y2="16.5"/>
<line x1="32" y1="51" x2="32" y2="47.5"/>
<line x1="13" y1="32" x2="16.5" y2="32"/>
<line x1="51" y1="32" x2="47.5" y2="32"/>
<line x1="18.6" y1="18.6" x2="21" y2="21"/>
<line x1="18.6" y1="45.4" x2="21" y2="43"/>
<line x1="45.4" y1="45.4" x2="43" y2="43"/>
</g>
<g transform="rotate(-32 32 32)">
<path d="M 13.5 32 L 20 29.6 L 44 29.6 L 50.5 32 L 44 34.4 L 20 34.4 Z" fill="#FFCB2E"/>
</g>
<circle cx="32" cy="32" r="3.4" fill="#FFCB2E"/>
<circle cx="32" cy="32" r="1.3" fill="#06323E"/>
<g transform="translate(50.7 20.3)">
<path d="M 0 -6.2 C 0.9 -2.1 2.1 -0.9 6.2 0 C 2.1 0.9 0.9 2.1 0 6.2 C -0.9 2.1 -2.1 0.9 -6.2 0 C -2.1 -0.9 -0.9 -2.1 0 -6.2 Z" fill="#FFCB2E"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

public/icon-mono.svg
+13
View File
@@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" fill="none">
<!-- single-color mark: inherits currentColor, works light or dark -->
<g stroke="currentColor" fill="currentColor">
<circle cx="32" cy="8.5" r="3" fill="none" stroke-width="2.4"/>
<circle cx="32" cy="32" r="22" fill="none" stroke-width="3.2"/>
<g transform="rotate(-32 32 32)" stroke="none">
<path d="M 13.5 32 L 20 29.4 L 44 29.4 L 50.5 32 L 44 34.6 L 20 34.6 Z"/>
</g>
<g transform="translate(50.7 20.3)" stroke="none">
<path d="M 0 -6.6 C 0.95 -2.2 2.2 -0.95 6.6 0 C 2.2 0.95 0.95 2.2 0 6.6 C -0.95 2.2 -2.2 0.95 -6.6 0 C -2.2 -0.95 -0.95 -2.2 0 -6.6 Z"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 692 B

vite.config.ts
+13 -6
View File
@@ -35,18 +35,25 @@ export default defineConfig({
react(),
VitePWA({
registerType: 'prompt',
includeAssets: ['favicon.svg'],
includeAssets: ['favicon.svg', 'icon-maskable.svg', 'icon-mono.svg'],
manifest: {
name: 'Astrolabe',
short_name: 'Astrolabe',
description: 'A browser-based snippet manager for Vega-Lite visualizations.',
theme_color: '#1a1a2e',
// theme_color tints the OS/browser chrome; background_color is the splash
// behind the icon. theme_color is the app accent (`--accent`, light theme);
// background_color matches the light `--bg` the app boots into.
theme_color: '#0e7490',
background_color: '#ffffff',
display: 'standalone',
// TODO: theme_color/background_color are stale placeholders — '#1a1a2e' was
// the old --color-text hex, retired by the M1.5 token rename. Re-pick from
// the settled palette (and reconcile with light/dark) when icons land.
icons: [],
// SVG marks scale to any size — Chrome/Edge/desktop install accept SVG
// icons. (iOS home-screen still prefers a PNG apple-touch-icon; tracked as
// a known residual.) maskable = Android adaptive; monochrome = tinted mark.
icons: [
{ src: 'favicon.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'any' },
{ src: 'icon-maskable.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'maskable' },
{ src: 'icon-mono.svg', sizes: 'any', type: 'image/svg+xml', purpose: 'monochrome' },
],
},
workbox: {
// Workbox's default globPatterns omit woff2; add it so the self-hosted