diff --git a/.npmrc b/.npmrc index c040fa6..6e6023a 100644 --- a/.npmrc +++ b/.npmrc @@ -1,3 +1,4 @@ registry=https://registry.npmjs.org/ fund=false audit=true +save-exact=true diff --git a/docs/DEMO.md b/docs/DEMO.md new file mode 100644 index 0000000..a3e40eb --- /dev/null +++ b/docs/DEMO.md @@ -0,0 +1,55 @@ +# OpenCompress demo recording guide + +A short real workflow GIF/video is the highest-value visual asset still missing from the repository. + +## Target + +Record a **15–25 second**, silent demo at **1280×720** or **1440×900**. Keep the UI large enough to read on a GitHub README. + +## Storyboard + +1. Start on an empty OpenCompress screen for ~1 second. +2. Drag 8–20 mixed product images into the drop zone. +3. Select **Auto Best local**. +4. Briefly show the WooCommerce preset or WebP output settings. +5. Click **Compress images**. +6. Show the completed batch summary and visible savings. +7. Drag the Before/After slider once. +8. Show the candidate comparison for one image. +9. End with the **Download ZIP** button and the savings summary visible. + +## What the demo must communicate + +The viewer should understand these four things without reading captions: + +- batch workflow +- local/private processing +- visible before/after comparison +- one-click ZIP export + +## Recording rules + +- Use non-confidential sample images. +- Hide personal paths, browser profiles and unrelated tabs. +- Do not show reSmush.it in the main demo; the strongest differentiator is local-first processing. +- Keep mouse movement deliberate and avoid idle time. +- Prefer a real recording over a mocked animation. +- Crop out browser chrome if it distracts from the app. + +## Suggested filename + +```text +docs/opencompress-demo.gif +``` + +For better quality and smaller GitHub payloads, also keep an MP4/WebM source outside the repository and export the README GIF at roughly 12–15 FPS. + +## README placement + +Once the real GIF exists, replace the static preview line near the top of `README.md` with: + +```markdown +![OpenCompress Studio demo](docs/opencompress-demo.gif) +``` + +Keep `docs/screenshot.svg` as a lightweight fallback/social asset source. diff --git a/docs/SOCIAL_PREVIEW.md b/docs/SOCIAL_PREVIEW.md new file mode 100644 index 0000000..e326065 --- /dev/null +++ b/docs/SOCIAL_PREVIEW.md @@ -0,0 +1,70 @@ +# GitHub social preview specification + +Use this as the source brief for the repository's GitHub Social Preview image. + +## Canvas + +- Size: **1280 × 640 px** +- Keep all important text inside the central safe area. +- Dark background matching the current OpenCompress UI. +- High contrast and readable at small card sizes. + +## Primary copy + +```text +OpenCompress Studio +Private-by-default batch image compression +``` + +## Secondary copy + +```text +Local • Batch • WebP/JPG/PNG • Before/After • ZIP export +``` + +## Visual hierarchy + +1. OpenCompress Studio wordmark/title +2. Short privacy-first promise +3. Simplified app frame with a visible Before/After split +4. A compact savings card, for example `2.4 MB → 680 KB · 72% smaller` +5. Small feature strip: `Local • Batch • Auto Best • ZIP` + +## Avoid + +- Tiny feature lists +- Fake benchmark claims +- Third-party logos as the main visual +- Screenshots containing personal filenames or browser chrome +- Text such as "free forever" unless that is intentionally guaranteed + +## Suggested GitHub topics + +Copy these into **About → Topics**: + +```text +image-compression +image-optimizer +batch-image-processing +webp +sharp +react +vite +ecommerce +woocommerce +privacy-first +local-first +image-converter +``` + +## Repository description + +Recommended GitHub description: + +```text +Private-by-default batch image compressor for shops and creators. Local WebP/JPG/PNG optimization, resize, target size, SEO rename, before/after preview and ZIP export. +``` + +## Social Preview upload + +After exporting the final artwork as PNG or JPG, open the repository settings and set it under **Social preview**. GitHub does not use a repository file automatically for this field. diff --git a/package.json b/package.json index 7951a19..e12fbbf 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "typescript": "latest" }, "engines": { - "node": ">=20.0.0", + "node": "^20.19.0 || >=22.12.0", "npm": ">=10.0.0" } }