docs: add application screenshot to README

fix: add PNG icons for PWA compatibility (Android/iOS)
2026-02-12 20:03:31 +01:00 · 2026-02-12 19:49:15 +01:00 · 2026-02-12 19:47:00 +01:00
11 changed files with 1773 additions and 8 deletions
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@

 ## Description

+![Nonograms Application Screenshot](public/screenshot.png)
+
 Nonograms is a modern, fast, and accessible logic puzzle game (also known as Picross or Griddlers). Solve pixel-art puzzles by marking cells according to numeric clues for rows and columns. The app features:
 - Clean UX with keyboard and touch support
 - Multiple languages and PWA support (installable on desktop and mobile)
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/nonograms.svg" />
-    <link rel="apple-touch-icon" href="/nonograms.svg" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="mask-icon" href="/nonograms.svg" color="#00f2fe" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nonograms Pro - Vue 3 SOLID</title>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vue-nonograms-solid",
-  "version": "1.12.0",
+  "version": "1.12.2",
  "homepage": "https://nonograms.7u.pl/",
  "type": "module",
  "scripts": {
@@ -20,6 +20,8 @@
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/test-utils": "^2.4.6",
    "jsdom": "^28.0.0",
+    "puppeteer": "^24.37.2",
+    "sharp": "^0.34.5",
    "vite": "^5.1.4",
    "vite-plugin-pwa": "^0.20.5",
    "vitest": "^4.0.18"
--- a/public/apple-touch-icon.png
+++ b/public/apple-touch-icon.png
--- a/public/pwa-192x192.png
+++ b/public/pwa-192x192.png
--- a/public/pwa-512x512.png
+++ b/public/pwa-512x512.png
--- a/public/screenshot.png
+++ b/public/screenshot.png
--- a/scripts/generate-icons.js
+++ b/scripts/generate-icons.js
@@ -0,0 +1,42 @@
+import sharp from 'sharp';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const INPUT_FILE = path.join(__dirname, '../public/nonograms.svg');
+const OUTPUT_DIR = path.join(__dirname, '../public');
+
+async function generateIcons() {
+  console.log('Generating icons from ' + INPUT_FILE);
+
+  try {
+    // 192x192
+    await sharp(INPUT_FILE)
+      .resize(192, 192)
+      .png()
+      .toFile(path.join(OUTPUT_DIR, 'pwa-192x192.png'));
+    console.log('Created pwa-192x192.png');
+
+    // 512x512
+    await sharp(INPUT_FILE)
+      .resize(512, 512)
+      .png()
+      .toFile(path.join(OUTPUT_DIR, 'pwa-512x512.png'));
+    console.log('Created pwa-512x512.png');
+
+    // Apple Touch Icon (180x180)
+    await sharp(INPUT_FILE)
+      .resize(180, 180)
+      .png()
+      .toFile(path.join(OUTPUT_DIR, 'apple-touch-icon.png'));
+    console.log('Created apple-touch-icon.png');
+    
+  } catch (err) {
+    console.error('Error generating icons:', err);
+    process.exit(1);
+  }
+}
+
+generateIcons();
--- a/scripts/take-screenshot.js
+++ b/scripts/take-screenshot.js
@@ -0,0 +1,46 @@
+import puppeteer from 'puppeteer';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function takeScreenshot() {
+  console.log('Launching browser...');
+  const browser = await puppeteer.launch({
+    headless: "new",
+    args: ['--no-sandbox', '--disable-setuid-sandbox']
+  });
+  const page = await browser.newPage();
+  
+  // Set viewport to a nice desktop size
+  await page.setViewport({ width: 1280, height: 800, deviceScaleFactor: 2 });
+
+  console.log('Navigating to app...');
+  try {
+    // Try local network IP if localhost fails, but localhost should work in this env
+    await page.goto('http://localhost:5173', { waitUntil: 'networkidle0', timeout: 10000 });
+  } catch (e) {
+    console.log('Retrying with networkidle2...');
+    try {
+        await page.goto('http://localhost:5173', { waitUntil: 'networkidle2', timeout: 10000 });
+    } catch (e2) {
+        console.error('Could not load page:', e2.message);
+        await browser.close();
+        process.exit(1);
+    }
+  }
+
+  // Wait for animations/rendering
+  await new Promise(r => setTimeout(r, 2000));
+
+  const screenshotPath = path.join(__dirname, '../public/screenshot.png');
+  console.log(`Taking screenshot to ${screenshotPath}...`);
+  
+  await page.screenshot({ path: screenshotPath });
+  
+  await browser.close();
+  console.log('Done.');
+}
+
+takeScreenshot();
--- a/vite.config.js
+++ b/vite.config.js
@@ -31,14 +31,14 @@ export default defineConfig({
        theme_color: '#00f2fe',
        icons: [
          {
-            src: '/pwa-192x192.svg',
+            src: '/pwa-192x192.png',
            sizes: '192x192',
-            type: 'image/svg+xml'
+            type: 'image/png'
          },
          {
-            src: '/pwa-512x512.svg',
+            src: '/pwa-512x512.png',
            sizes: '512x512',
-            type: 'image/svg+xml'
+            type: 'image/png'
          }
        ]
      }
Author	SHA1	Message	Date
Grzegorz Kucmierz	9a65dfe55d	docs: add application screenshot to README	2026-02-12 20:03:31 +01:00
Grzegorz Kucmierz	2a88362d00	fix: add PNG icons for PWA compatibility (Android/iOS)	2026-02-12 19:49:15 +01:00
Grzegorz Kucmierz	8e3ae3e7d6	fix: add PNG icons for PWA compatibility (Android/iOS)	2026-02-12 19:47:00 +01:00