pwa: add manifest and related app icons

That nostr.ch has a pretty app icon when adding to home screen.
2 years ago · b86cf6f687
parent 343413355f
commit b86cf6f687
6 changed files with 34 additions and 4 deletions
--- a/esbuildconf.js
+++ b/esbuildconf.js
@ -8,19 +8,22 @@ import { replaceOnCopyPlugin } from './tools/esbuild-helper.js'
 // see docs at https://esbuild.github.io/api/
 export const options = {
  entryPoints: [
-    'src/main.js',
-    'src/main.css',
-    'src/index.html',
    'src/about.html',
    'src/assets/comment.svg',
    'src/assets/heart-fill.svg',
+    'src/assets/nostr-favicon.png',
+    'src/assets/nostr-favicon.svg',
    'src/assets/star.svg',
    'src/assets/star-fill.svg',
    'src/favicon.ico',
+    'src/index.html',
+    'src/main.css',
+    'src/main.js',
+    'src/manifest.json',
  ],
  outdir: 'dist',
  //entryNames: '[name]-[hash]', TODO: replace urls in index.html with hashed paths
-  loader: {'.html': 'copy', '.svg': 'copy', '.ico': 'copy'},
+  loader: {'.html': 'copy', '.ico': 'copy', '.png': 'copy', '.svg': 'copy'},
  bundle: true,
  platform: 'browser',
  minify: false, // TODO: true for release and enable sourcemap
@ -36,6 +39,7 @@ export const options = {
    }),
    NodeGlobalsPolyfillPlugin({buffer: true}),
    replaceOnCopyPlugin(/about\.html$/),
+    replaceOnCopyPlugin(/manifest\.json$/),
  ]
 };

--- a/src/about.html
+++ b/src/about.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>about / nostr</title>
    <link rel="stylesheet" href="main.css" type="text/css">
+    <link rel="manifest" href="/manifest.json">
  </head>
  <body>
    <main class="text">
--- a/src/assets/nostr-favicon.png
+++ b/src/assets/nostr-favicon.png
--- a/src/assets/nostr-favicon.svg
+++ b/src/assets/nostr-favicon.svg
@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="331.088" height="331.088" viewBox="0 0 87.6 87.6">
+  <circle cx="90.953" cy="119.632" r="37.72" style="fill:none;fill-opacity:1;stroke:#f0f;stroke-width:12.16;stroke-dasharray:none;stroke-opacity:1" transform="translate(-47.152 -75.832)"/>
+</svg>
--- a/src/index.html
+++ b/src/index.html
@ -5,6 +5,7 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nostr</title>
    <link rel="stylesheet" href="main.css" type="text/css">
+    <link rel="manifest" href="/manifest.json">
  </head>
  <body>
    <main class="tabbed">
--- a/src/manifest.json
+++ b/src/manifest.json
@ -0,0 +1,21 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "background_color": "#191919",
+  "categories": ["news", "social"],
+  "description": "a nostr news client to connect with the world.",
+  "display": "fullscreen",
+  "name": "nostr",
+  "short_name": "nostr",
+  "start_url": "https://nostr.ch/",
+  "icons": [{
+    "src": "assets/nostr-favicon.png",
+    "sizes": "256x256",
+    "type": "image/png"
+  }, {
+    "src": "favicon.ico",
+    "sizes": "32x32"
+  }, {
+    "src": "assets/nostr-favicon.svg",
+    "sizes": "any"
+  }]
+}