feat: generate PWA icons and assets (#33)
Some checks failed
Deploy to Coolify / Deploy to Development (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Production (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Test (pull_request) Has been cancelled
Pull Request Checks / Validate PR (pull_request) Has been cancelled
Deploy to Coolify / Code Quality (pull_request) Has been cancelled
Deploy to Coolify / Run Tests (pull_request) Has been cancelled
Some checks failed
Deploy to Coolify / Deploy to Development (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Production (pull_request) Has been cancelled
Deploy to Coolify / Deploy to Test (pull_request) Has been cancelled
Pull Request Checks / Validate PR (pull_request) Has been cancelled
Deploy to Coolify / Code Quality (pull_request) Has been cancelled
Deploy to Coolify / Run Tests (pull_request) Has been cancelled
- 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
This commit is contained in:
Pantry Lead Agent
124
app/scripts/generate-screenshots.js
Normal file
124
app/scripts/generate-screenshots.js
Normal file
@@ -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);
|
||||
Reference in New Issue
Block a user