mazipan / mazipan/html-tools

Add web app manifest for installability

Open
#7 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement pwa seo
Dominant language
HTML
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Background

A web app manifest enables browser install prompts (Chrome desktop/mobile, Edge), theme integration with the OS, and is occasionally surfaced by Google as an "installable app" in search results.

Proposal

Add src/manifest.webmanifest and link it from every HTML page.

{
  "name": "HTML Tools",
  "short_name": "HTML Tools",
  "description": "Browser-native utilities for developers — no installs, no servers, no tracking.",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#030712",
  "theme_color": "#030712",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png" },
    { "src": "/icon-maskable.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
  ]
}

Tasks

  • Create src/manifest.webmanifest
  • Design src/icon.svg (simple "HT" or wrench mark on the brand background)
  • In scripts/build.mjs, render icon-192.png, icon-512.png, and icon-maskable.png from the SVG via @resvg/resvg-js (already a devDep)
  • Add <link rel="manifest" href="/manifest.webmanifest"> to all HTML files
  • Add <link rel="apple-touch-icon" href="/icon-192.png"> for iOS install
  • Update AGENTS.md to note the manifest convention

Notes

  • The maskable icon needs ~10% safe-area padding from the icon edge.
  • Coordinate with #_ (service worker) — manifest + SW together unlock the full installable PWA experience.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the existing HTML files, scripts/build.mjs, and the current AGENTS.md conventions. Create src/manifest.webmanifest and src/icon.svg, then trace the build entry point to render the three PNG icons with the existing @resvg/resvg-js dependency. Done means every HTML page has both install links, the manifest references the generated icons, and AGENTS.md documents the convention.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, javascript
Domain
build-system, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
52/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.