Port pwa config over from coracle

.env

@@ -1,4 +1,7 @@
 VITE_DEFAULT_PUBKEYS=fe7f6bc6f7338b76bbf80db402ade65953e20b2f23e66e898204b63cc42539a3,391819e2f2f13b90cac7209419eb574ef7c0d1f4e81867fc24c47a3ce5e8a248,84dee6e676e5bb67b4ad4e042cf70cbd8681155db535942fcc6a0533858a7240,dace63b00c42e6e017d00dd190a9328386002ff597b841eb5ef91de4f1ce8491,82341f882b6eabcd2ba7f1ef90aad961cf074af15b9ef44a09f9d2a8fbfbe6a2,58c741aa630c2da35a56a77c1d05381908bd10504fdd2d8b43f725efa6d23196,eeb11961b25442b16389fe6c7ebea9adf0ac36dd596816ea7119e521b8821b9e,b676ded7c768d66a757aa3967b1243d90bf57afb09d1044d3219d8d424e4aea0,61066504617ee79387021e18c89fb79d1ddbc3e7bff19cf2298f40466f8715e9
+VITE_PLATFORM_URL=https://flotilla.social
 VITE_PLATFORM_NAME=Flotilla
-VITE_PLATFORM_LOGO=/flotilla.png
+VITE_PLATFORM_LOGO=static/flotilla.png
 VITE_PLATFORM_RELAY=
+VITE_PLATFORM_ACCENT="#7161FF"
+VITE_PLATFORM_DESCRIPTION="Flotilla is nostr — for communities."

.gitignore

@@ -16,3 +16,12 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Generated assets
+static/favicons
+static/apple-touch-icon-180x180.png
+static/favicon.ico
+static/maskable-icon-512x512.png
+static/pwa-64x64.png
+static/pwa-192x192.png
+static/pwa-512x512.png

package.json

@@ -4,8 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "pwa-assets-generator && vite build",
-    "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --check . && eslint .",
@@ -48,6 +47,7 @@
     "@tiptap/extension-text": "^2.6.6",
     "@tiptap/suggestion": "^2.6.4",
     "@types/throttle-debounce": "^5.0.2",
+    "@vite-pwa/assets-generator": "^0.2.6",
     "@welshman/app": "~0.0.18",
     "@welshman/content": "~0.0.12",
     "@welshman/dvm": "~0.0.10",
@@ -59,13 +59,17 @@
     "@welshman/util": "~0.0.42",
     "daisyui": "^4.12.10",
     "date-picker-svelte": "^2.13.0",
+    "dotenv": "^16.4.5",
     "emoji-picker-element": "^1.22.8",
+    "favicons": "^7.2.0",
     "fuse.js": "^7.0.0",
     "idb": "^8.0.0",
     "nostr-editor": "^0.0.2",
     "nostr-tools": "^2.7.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "svelte-tiptap": "^1.1.3",
-    "throttle-debounce": "^5.0.2"
+    "throttle-debounce": "^5.0.2",
+    "vite-plugin-html-config": "^2.0.2",
+    "vite-plugin-pwa": "^0.20.5"
   }
 }

pwa-assets.config.js

@@ -0,0 +1,10 @@
+import dotenv from 'dotenv'
+import {defineConfig, minimalPreset as preset} from '@vite-pwa/assets-generator/config'
+
+dotenv.config({path: '.env.local'})
+dotenv.config({path: '.env'})
+
+export default defineConfig({
+  preset,
+  images: [process.env.VITE_PLATFORM_LOGO],
+})

src/app/state.ts

@@ -74,7 +74,7 @@ export const INDEXER_RELAYS = [
   "wss://relay.nostr.band/",
 ]
 
-export const PLATFORM_LOGO = import.meta.env.VITE_PLATFORM_LOGO
+export const PLATFORM_LOGO = "/pwa-192x192.png"
 
 export const PLATFORM_NAME = import.meta.env.VITE_PLATFORM_NAME
 

src/routes/+page.svelte

@@ -2,5 +2,5 @@
   import {onMount} from "svelte"
   import {goto} from "$app/navigation"
 
-  onMount(() => goto("/home"))
+  //  onMount(() => goto("/home"))
 </script>

static/nav-active.svg

@@ -1,3 +0,0 @@
-<svg viewBox="0 0 81 243" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M81 121V122V242.5C81 204 71 173 42.5 167C30.3292 164.438 0.796806 154.599 0.50222 121.5C0.796806 88.4011 30.3292 78.5623 42.5 76C71 70 81 39 81 0.5V121Z" fill="black"/>
-</svg>

svelte.config.js

@@ -14,5 +14,15 @@ export default {
       "@lib": "src/lib",
       "@assets": "src/assets",
     },
+    csp: {
+      directives: {
+        'script-src': ['self', 'plausible.io'],
+        'worker-src': ['self', 'blob:'],
+        'style-src': ['self', 'unsafe-inline'],
+        'frame-src': ['open.spotify.com', 'embed.tidal.com'],
+        'child-src': ['none'],
+        'form-action': ['none'],
+      },
+    },
   },
 }

tailwind.config.js

@@ -1,6 +1,10 @@
+import dotenv from "dotenv"
 import daisyui from "daisyui"
 import themes from "daisyui/src/theming/themes"
 
+dotenv.config({path: ".env.local"})
+dotenv.config({path: ".env"})
+
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
@@ -24,7 +28,7 @@ export default {
       {
         dark: {
           ...themes["dark"],
-          primary: "#7161FF",
+          primary: process.env.VITE_PLATFORM_ACCENT,
         },
       },
     ],

vite.config.ts

@@ -1,28 +1,160 @@
+import fs from "fs"
+import dotenv from "dotenv"
+import * as path from "path"
+import {defineConfig} from "vite"
+import {VitePWA} from "vite-plugin-pwa"
+import {favicons} from "favicons"
+import htmlPlugin from "vite-plugin-html-config"
 import {sveltekit} from "@sveltejs/kit/vite"
 import svg from "@poppanator/sveltekit-svg"
-import {defineConfig} from "vite"
 
-export default defineConfig({
+dotenv.config({path: ".env.local"})
-  server: {
+dotenv.config({path: ".env"})
-    port: 1847,
+
-  },
+const FAVICONS_DIR = "static/favicons"
-  plugins: [
+const name = process.env.VITE_PLATFORM_NAME
-    sveltekit(),
+const logo = process.env.VITE_PLATFORM_LOGO
-    svg({
+const accent = process.env.VITE_PLATFORM_ACCENT
-      svgoOptions: {
+const description = process.env.VITE_PLATFORM_DESCRIPTION
-        multipass: true,
+
-        plugins: [
+
-          {
+export default defineConfig(async () => {
-            name: "preset-default",
+  const icons = await favicons(logo)
-            params: {
+
-              overrides: {
+  if (!fs.existsSync(FAVICONS_DIR)) fs.mkdirSync(FAVICONS_DIR)
-                removeViewBox: false,
+
+  for (const {name, contents} of icons.images) {
+    fs.writeFileSync(`${FAVICONS_DIR}/${name}`, contents, "binary")
+  }
+
+  return {
+    server: {
+      port: 1847,
+    },
+    build: {
+      sourcemap: true,
+    },
+    plugins: [
+      sveltekit(),
+      svg({
+        svgoOptions: {
+          multipass: true,
+          plugins: [
+            {
+              name: "preset-default",
+              params: {
+                overrides: {
+                  removeViewBox: false,
+                },
               },
             },
-          },
+            "removeDimensions",
-          "removeDimensions",
+          ],
+        },
+      }),
+      htmlPlugin({
+        title: name,
+        metas: [
+          {name: "description", content: description},
+          {name: "theme-color", content: accent},
+          {name: "og:title", content: name},
+          {name: "og:type", content: "website"},
+          {name: "og:description", content: description},
+          {name: "og:image", content: "/banner.png"},
+          {name: "twitter:card", content: "summary_large_image"},
+          {name: "twitter:title", content: name},
+          {name: "twitter:description", content: description},
+          {name: "twitter:image", content: "/banner.png"},
+          {property: "og:url", content: process.env.VITE_APP_URL},
+          {name: "msapplication-TileColor", content: accent},
+          {name: "msapplication-TileImage", content: "/favicons/mstile-144x144.png"},
         ],
-      },
+        links: [
-    }),
+          {rel: "icon", href: "/favicons/favicon.ico", sizes: "48x48"},
-  ],
+          {rel: "icon", href: "/favicons/favicon-16x16.png", sizes: "any", type: "image/png"},
+          {rel: "icon", href: "/favicons/favicon-32x32.png", sizes: "any", type: "image/png"},
+          {rel: "icon", href: "/favicons/favicon-48x48.png", sizes: "any", type: "image/png"},
+          {rel: "apple-touch-icon", sizes: "57x57", href: "/favicons/apple-touch-icon-57x57.png"},
+          {rel: "apple-touch-icon", sizes: "60x60", href: "/favicons/apple-touch-icon-60x60.png"},
+          {rel: "apple-touch-icon", sizes: "72x72", href: "/favicons/apple-touch-icon-72x72.png"},
+          {rel: "apple-touch-icon", sizes: "76x76", href: "/favicons/apple-touch-icon-76x76.png"},
+          {rel: "apple-touch-icon", sizes: "114x114", href: "/favicons/apple-touch-icon-114x114.png"},
+          {rel: "apple-touch-icon", sizes: "120x120", href: "/favicons/apple-touch-icon-120x120.png"},
+          {rel: "apple-touch-icon", sizes: "144x144", href: "/favicons/apple-touch-icon-144x144.png"},
+          {rel: "apple-touch-icon", sizes: "152x152", href: "/favicons/apple-touch-icon-152x152.png"},
+          {rel: "apple-touch-icon", sizes: "180x180", href: "/favicons/apple-touch-icon-180x180.png"},
+          {
+            rel: "icon",
+            type: "image/png",
+            sizes: "192x192",
+            href: "/favicons/android-icon-192x192.png",
+          },
+          {rel: "icon", type: "image/png", sizes: "32x32", href: "/favicons/favicon-32x32.png"},
+          {rel: "icon", type: "image/png", sizes: "96x96", href: "/favicons/favicon-96x96.png"},
+          {rel: "icon", type: "image/png", sizes: "16x16", href: "/favicons/favicon-16x16.png"},
+          {rel: "mask-icon", href: "/logo.svg", color: "#FFFFFF"},
+          {
+            rel: "icon",
+            type: "image/png",
+            sizes: "144x144",
+            href: "/favicons/android-chrome-144x144.png",
+          },
+          {
+            rel: "icon",
+            type: "image/png",
+            sizes: "192x192",
+            href: "/favicons/android-chrome-192x192.png",
+          },
+          {
+            rel: "icon",
+            type: "image/png",
+            sizes: "256x256",
+            href: "/favicons/android-chrome-256x256.png",
+          },
+          {rel: "icon", type: "image/png", sizes: "36x36", href: "/favicons/android-chrome-36x36.png"},
+          {
+            rel: "icon",
+            type: "image/png",
+            sizes: "384x384",
+            href: "/favicons/android-chrome-384x384.png",
+          },
+          {rel: "icon", type: "image/png", sizes: "48x48", href: "/favicons/android-chrome-48x48.png"},
+          {
+            rel: "icon",
+            type: "image/png",
+            sizes: "512x512",
+            href: "/favicons/android-chrome-512x512.png",
+          },
+          {rel: "icon", type: "image/png", sizes: "72x72", href: "/favicons/android-chrome-72x72.png"},
+          {rel: "icon", type: "image/png", sizes: "96x96", href: "/favicons/android-chrome-96x96.png"},
+        ],
+      }),
+      VitePWA({
+        registerType: "autoUpdate",
+        injectRegister: "auto",
+        workbox: {
+          maximumFileSizeToCacheInBytes: 5 * 1024 ** 2, // 5 MB or set to something else
+        },
+        manifest: {
+          name: name,
+          short_name: name,
+          description: description,
+          theme_color: accent,
+          protocol_handlers: [{protocol: "web+nostr", url: "/%s"}],
+          permissions: ["clipboardRead", "clipboardWrite", "unlimitedStorage"],
+          icons: [
+            {src: "pwa-64x64.png", sizes: "64x64", type: "image/png"},
+            {src: "pwa-192x192.png", sizes: "192x192", type: "image/png"},
+            {src: "pwa-512x512.png", sizes: "512x512", type: "image/png", purpose: "any"},
+            {
+              src: "maskable-icon-512x512.png",
+              sizes: "512x512",
+              type: "image/png",
+              purpose: "maskable",
+            },
+          ],
+        },
+      }),
+    ],
+  }
 })