feat: generate PWA icons and assets (#33)

- Create icon.svg with pantry shelves design - Generate icon-192x192.png and icon-512x512.png - Generate maskable variants for better Android support - Create favicon.ico and apple-touch-icon.png - Generate placeholder screenshots (mobile + desktop) - Add icon generation scripts using sharp - Add npm script for easy regeneration Icon design features: - Emerald gradient background (#10b981) - Pantry shelves with jars, boxes, and cans - Clean, recognizable silhouette - Works at all sizes Closes #33
2026-02-25 00:06:07 +00:00
parent 91a21e274f
commit 762ec56a3c
13 changed files with 782 additions and 3 deletions
--- a/app/scripts/generate-icons.js
+++ b/app/scripts/generate-icons.js
@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+import { readFile, writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, '..', 'public');
+const svgPath = join(publicDir, 'icon.svg');
+
+const sizes = [
+  { size: 192, name: 'icon-192x192.png', maskable: false },
+  { size: 512, name: 'icon-512x512.png', maskable: false },
+  { size: 192, name: 'icon-192x192-maskable.png', maskable: true },
+  { size: 512, name: 'icon-512x512-maskable.png', maskable: true },
+];
+
+async function generateIcons() {
+  console.log('Reading SVG icon...');
+  const svgBuffer = await readFile(svgPath);
+  
+  for (const { size, name, maskable } of sizes) {
+    console.log(`Generating ${name}...`);
+    
+    let buffer;
+    if (maskable) {
+      // Maskable icons need safe zone padding (80% of icon in center)
+      // Create a transparent canvas with padding
+      const paddedSize = size;
+      const iconSize = Math.floor(size * 0.8);
+      const offset = Math.floor((paddedSize - iconSize) / 2);
+      
+      // Resize SVG to icon size
+      const iconBuffer = await sharp(svgBuffer)
+        .resize(iconSize, iconSize)
+        .png()
+        .toBuffer();
+      
+      // Create transparent background and composite
+      buffer = await sharp({
+        create: {
+          width: paddedSize,
+          height: paddedSize,
+          channels: 4,
+          background: { r: 0, g: 0, b: 0, alpha: 0 }
+        }
+      })
+        .composite([{
+          input: iconBuffer,
+          top: offset,
+          left: offset
+        }])
+        .png()
+        .toBuffer();
+    } else {
+      // Regular icon - full size
+      buffer = await sharp(svgBuffer)
+        .resize(size, size)
+        .png()
+        .toBuffer();
+    }
+    
+    await writeFile(join(publicDir, name), buffer);
+    console.log(`✓ ${name}`);
+  }
+  
+  console.log('\n✅ All icons generated successfully!');
+}
+
+generateIcons().catch(console.error);
--- a/app/scripts/generate-screenshots.js
+++ b/app/scripts/generate-screenshots.js
@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+import { writeFile } from 'fs/promises';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import sharp from 'sharp';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const publicDir = join(__dirname, '..', 'public');
+
+async function generateScreenshots() {
+  // Mobile screenshot (390x844 - iPhone 12/13/14 size)
+  console.log('Generating mobile screenshot placeholder...');
+  const mobileBuffer = await sharp({
+    create: {
+      width: 390,
+      height: 844,
+      channels: 4,
+      background: { r: 249, g: 250, b: 251, alpha: 1 } // Tailwind gray-50
+    }
+  })
+    .composite([
+      {
+        input: Buffer.from(`
+          <svg width="390" height="844">
+            <!-- Header -->
+            <rect width="390" height="64" fill="#10b981"/>
+            <text x="195" y="42" font-family="Arial" font-size="20" fill="white" text-anchor="middle" font-weight="bold">Pantry</text>
+            
+            <!-- Content area -->
+            <text x="24" y="104" font-family="Arial" font-size="24" fill="#111827" font-weight="bold">My Pantry</text>
+            
+            <!-- Item cards -->
+            <rect x="16" y="130" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="160" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Milk</text>
+            <text x="32" y="185" font-family="Arial" font-size="14" fill="#6b7280">Fridge • 1L</text>
+            
+            <rect x="16" y="226" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="256" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Pasta</text>
+            <text x="32" y="281" font-family="Arial" font-size="14" fill="#6b7280">Pantry • 500g</text>
+            
+            <rect x="16" y="322" width="358" height="80" rx="8" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="352" font-family="Arial" font-size="16" fill="#111827" font-weight="600">Tomato Sauce</text>
+            <text x="32" y="377" font-family="Arial" font-size="14" fill="#6b7280">Pantry • 400ml</text>
+            
+            <!-- Bottom navigation -->
+            <rect y="780" width="390" height="64" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="78" y="820" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Home</text>
+            <text x="195" y="820" font-family="Arial" font-size="12" fill="#10b981" text-anchor="middle">Scan</text>
+            <text x="312" y="820" font-family="Arial" font-size="12" fill="#6b7280" text-anchor="middle">Settings</text>
+          </svg>
+        `),
+        top: 0,
+        left: 0
+      }
+    ])
+    .png()
+    .toBuffer();
+  
+  await writeFile(join(publicDir, 'screenshot-mobile.png'), mobileBuffer);
+  console.log('✓ screenshot-mobile.png');
+  
+  // Desktop screenshot (1920x1080)
+  console.log('Generating desktop screenshot placeholder...');
+  const desktopBuffer = await sharp({
+    create: {
+      width: 1920,
+      height: 1080,
+      channels: 4,
+      background: { r: 249, g: 250, b: 251, alpha: 1 } // Tailwind gray-50
+    }
+  })
+    .composite([
+      {
+        input: Buffer.from(`
+          <svg width="1920" height="1080">
+            <!-- Header -->
+            <rect width="1920" height="80" fill="#10b981"/>
+            <text x="960" y="50" font-family="Arial" font-size="32" fill="white" text-anchor="middle" font-weight="bold">Pantry - Smart Inventory Manager</text>
+            
+            <!-- Sidebar -->
+            <rect x="0" y="80" width="280" height="1000" fill="white" stroke="#e5e7eb" stroke-width="1"/>
+            <text x="32" y="130" font-family="Arial" font-size="18" fill="#10b981" font-weight="600">Dashboard</text>
+            <text x="32" y="180" font-family="Arial" font-size="18" fill="#6b7280">Scan Item</text>
+            <text x="32" y="230" font-family="Arial" font-size="18" fill="#6b7280">Settings</text>
+            
+            <!-- Main content -->
+            <text x="340" y="150" font-family="Arial" font-size="36" fill="#111827" font-weight="bold">My Pantry Items</text>
+            
+            <!-- Grid of items -->
+            <rect x="340" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="370" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Milk</text>
+            <text x="370" y="290" font-family="Arial" font-size="18" fill="#6b7280">Fridge • 1L • Expires in 5 days</text>
+            
+            <rect x="860" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="890" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Pasta</text>
+            <text x="890" y="290" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 500g</text>
+            
+            <rect x="1380" y="200" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="1410" y="250" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Tomato Sauce</text>
+            <text x="1410" y="290" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 400ml</text>
+            
+            <rect x="340" y="420" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="370" y="470" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Rice</text>
+            <text x="370" y="510" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 1kg</text>
+            
+            <rect x="860" y="420" width="480" height="180" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>
+            <text x="890" y="470" font-family="Arial" font-size="24" fill="#111827" font-weight="600">Olive Oil</text>
+            <text x="890" y="510" font-family="Arial" font-size="18" fill="#6b7280">Pantry • 750ml</text>
+          </svg>
+        `),
+        top: 0,
+        left: 0
+      }
+    ])
+    .png()
+    .toBuffer();
+  
+  await writeFile(join(publicDir, 'screenshot-desktop.png'), desktopBuffer);
+  console.log('✓ screenshot-desktop.png');
+  
+  console.log('\n✅ All screenshots generated successfully!');
+}
+
+generateScreenshots().catch(console.error);