Add PWA support and expandable draw canvas

PWA: - manifest.json with name, icons, theme/background color, standalone display - PNG icons (192, 512, 180 apple-touch) generated via pure Node.js (no deps) - index.html: manifest link, theme-color, apple-mobile-web-app-* meta tags, viewport-fit=cover for iPhone notch/Dynamic Island - service worker extended to cache app shell (static assets + index.html) with network-first for navigation, cache-first for hashed assets, network-first-with-cache-fallback for external Bible APIs Expandable canvas: - "Add More Space" button below each draw canvas adds a full notebook page - Existing ink rescales to preserve visual pixel positions (no stretching) - Page count embedded as metadata in the strokes array so it survives navigation without a separate state key Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-08-12 11:28:23 -04:00
parent a947b128b9
commit 692595c629
8 changed files with 298 additions and 50 deletions
@@ -2,8 +2,23 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <title>Bible Study Project</title>
+
+    <!-- PWA manifest -->
+    <link rel="manifest" href="/manifest.json" />
+
+    <!-- Theme / status bar -->
+    <meta name="theme-color" content="#0f172a" />
+
+    <!-- iOS PWA -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta name="apple-mobile-web-app-title" content="Bible Study" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+
+    <!-- Fallback icon for browsers -->
+    <link rel="icon" type="image/png" sizes="192x192" href="/icon-192.png" />
  </head>
  <body class="bg-slate-50 text-slate-900">
    <div id="root"></div>