teomrd · teomrd · Nov 14, 2024 · Nov 14, 2024 · Nov 14, 2024 · Nov 14, 2024
diff --git a/.lighthouserc.json b/.lighthouserc.json
@@ -23,13 +23,13 @@
         "categories.best-practices" : [
           "error",
           {
-            "minScore": 0.96
+            "minScore": 1
           }
         ],
         "categories.seo" : [
           "error",
           {
-            "minScore": 0.9
+            "minScore": 1
           }
         ]
       }

diff --git a/Makefile b/Makefile
@@ -7,8 +7,8 @@ MAKE_DIR := $(shell dirname $(realpath $(lastword $(MAKEFILE_LIST))))
 install:
 	deno install
 
-dev: install
-	open http://localhost:8000 && sh scripts/dev.sh
+dev: clean-build-output install prepare-static-files
+	open http://localhost:8000 && deno -A ./scripts/dev.js
 
 format: 
 	deno fmt
@@ -31,25 +31,31 @@ checks: install compile build verify-formatting lint
 lighthouse-audit: install build
 	lhci autorun
 
+# you will need to `make serve` first (in a separate terminal)
+# & with this: it will update the lighthouse score badges
+# in the docs folder where ReadMe refers to (you will need to commit the changes)
 lighthouse-badges:
-	npx lighthouse-badges -o docs/lighthouse/badges -u https://teomrd.github.io/miropad/
+	npx lighthouse-badges -o docs/lighthouse/badges -u http://localhost:3000/
 
 update-lighthouse-badges: lighthouse-badges
 	$(MAKE_DIR)/scripts/update-badges.sh
 
-clean:
+clean-build-output:
+	rm -rf ./dist
+
+clean: clean-build-output
 	deno clean
 	rm -rf ./node_modules
-	rm -rf ./out
-	rm -rf ./dist
-	rm -rf ./dev
 	rm -rf ./*lock*
 
 serve: build
 	serve $(MAKE_DIR)/dist
 
-build: install
-	$(MAKE_DIR)/scripts/build.sh
+prepare-static-files:
+	$(MAKE_DIR)/scripts/prepare-static-files.sh
+
+build: clean-build-output install prepare-static-files
+	deno -A ./scripts/build.js
 
 deploy: version build
 	$(MAKE_DIR)/scripts/deploy.sh
diff --git a/docs/lighthouse/badges/lighthouse_accessibility.svg b/docs/lighthouse/badges/lighthouse_accessibility.svg
diff --git a/docs/lighthouse/badges/lighthouse_seo.svg b/docs/lighthouse/badges/lighthouse_seo.svg
diff --git a/scripts/build.js b/scripts/build.js
@@ -2,7 +2,7 @@ import * as esbuild from "npm:esbuild";
 
 const VERSION = Deno.env.get("NEW_VERSION") || `v0.0.0`;
 
-const result = await esbuild.build({
+await esbuild.build({
   entryPoints: ["./src/index.ts"],
   bundle: true,
   platform: "browser",

diff --git a/scripts/build.sh b/scripts/build.sh
diff --git a/scripts/dev.js b/scripts/dev.js
@@ -1,10 +1,11 @@
 import * as esbuild from "esbuild";
 import miropad from "../package.json" with { type: "json" };
 
+const VERSION = `v0.0.0`;
 const context = await esbuild.context({
   entryPoints: ["src/index.ts"],
   bundle: true,
-  outfile: "dev/index.js",
+  outfile: "dist/index.js",
   target: ["es2020", "chrome100", "firefox100"],
   minify: true,
   sourcemap: true,
@@ -17,15 +18,15 @@ const context = await esbuild.context({
   define: {
     "process.env.NODE_ENV": '"development"',
     TITLE_NAME: JSON.stringify("✍️ MiroPad"),
-    VERSION: JSON.stringify(miropad.version),
+    VERSION: JSON.stringify(VERSION),
     global: "globalThis",
   },
 });
 
 await context.watch();
 
 const { host, port } = await context.serve({
-  servedir: "dev",
+  servedir: "dist",
 });
 
 console.log(`Running v${miropad.version} on ${host}:${port} 🚀`);
diff --git a/scripts/dev.sh b/scripts/dev.sh
diff --git a/scripts/prepare-static-files.sh b/scripts/prepare-static-files.sh
@@ -0,0 +1,14 @@
+#!/bin/bash
+
+## copy over static files from src
+rsync -r ./src/assets/images ./dist
+rsync ./src/assets/favicon.ico ./dist
+rsync ./src/index.html ./dist
+rsync ./src/manifest.json ./dist
+rsync ./src/service-worker.js ./dist
+./node_modules/.bin/workbox injectManifest ./workbox-config.js
+
+## versioning static file generation
+version="${NEW_VERSION:-"v0.0.0"}"
+echo -e "🛠️  Building ${COLOR_GREEN}MiroPad${NO_COLOR} ${COLOR_RED}${version}${NO_COLOR} \n"
+echo "$version" >./dist/version
diff --git a/src/index.html b/src/index.html
@@ -1,18 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8" />
-    <meta name="application-name" content="✍️ MiroPad" />
+    <meta charset="UTF-8">
+    <meta name="application-name" content="✍️ MiroPad">
     <meta
       name="description"
       content="Temporary note keeping app for the browser"
-    />
-    <meta name="author" content="teomrd" />
-    <link rel="icon" href="./favicon.ico" />
+    >
+    <meta name="author" content="teomrd">
+    <link rel="icon" href="./favicon.ico">
     <meta name="theme-color" content="#000000" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="manifest" href="./manifest.json" crossorigin="use-credentials" />
-    <link rel="apple-touch-icon" href="./images/icons/icon-192x192.png" />
+    <link rel="apple-touch-icon" href="./images/icons/icon-192x192.png">
+    <link rel="stylesheet" href="index.css">
     <title>
       MiroPad
     </title>
@@ -57,8 +58,8 @@ <h3>✍️ MiroPad</h3>
         <button
           id="note-info-button"
           class="icon-button"
-          title="info"
-          aria-label="show note information"
+          title="information"
+          aria-label="information"
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -145,5 +146,6 @@ <h3>INFO</h3>
     <footer>
       <div class="console hidden"></div>
     </footer>
+    <script type="module" src="./index.js"></script>
   </body>
 </html>
diff --git a/src/js/registerServiceWorker.js b/src/js/registerServiceWorker.js
@@ -10,7 +10,11 @@ export const requestNotificationPermission = async () => {
 export const registerServiceWorker = () => {
   if ("serviceWorker" in navigator) {
     navigator.serviceWorker.register(
-      `${globalThis.location.pathname}service-worker.js?v=${VERSION}`,
+      `${
+        globalThis.location.pathname.slice(-1) === "/"
+          ? globalThis.location.pathname
+          : `${globalThis.location.origin}/`
+      }service-worker.js?v=${VERSION}`,
     );
   }
 };
diff --git a/src/js/utils/fileSystem/fileSystem.ts b/src/js/utils/fileSystem/fileSystem.ts
@@ -47,8 +47,10 @@ export const saveFileAs = async (contents: string, title?: string) => {
 
 export const saveDataToFile = (() => {
   const a = document.createElement("a");
-  document.body.appendChild(a);
   a.setAttribute("style", "display: none");
+  a.setAttribute("id", "download-to-file");
+  a.setAttribute("href", "#");
+  document.body.appendChild(a);
   return (
     data: unknown,
     fileName = `MiroPad-${new Date().toISOString()}.json`,

diff --git a/src/manifest.json b/src/manifest.json
@@ -30,7 +30,7 @@
     }
   ],
   "orientation": "portrait",
-  "Scope": "https://teomrd.github.io/miropad/",
+  "scope": "https://teomrd.github.io/miropad/",
   "start_url": "https://teomrd.github.io/miropad",
   "icons": [
     {

diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/images/icons/icon-128x128.png b/static/images/icons/icon-128x128.png
diff --git a/static/images/icons/icon-144x144.png b/static/images/icons/icon-144x144.png
diff --git a/static/images/icons/icon-152x152.png b/static/images/icons/icon-152x152.png
diff --git a/static/images/icons/icon-192x192.png b/static/images/icons/icon-192x192.png
diff --git a/static/images/icons/icon-384x384.png b/static/images/icons/icon-384x384.png
diff --git a/static/images/icons/icon-512x512.png b/static/images/icons/icon-512x512.png
diff --git a/static/images/icons/icon-72x72.png b/static/images/icons/icon-72x72.png
diff --git a/static/images/icons/icon-96x96.png b/static/images/icons/icon-96x96.png
diff --git a/static/images/icons/maskable_icon.png b/static/images/icons/maskable_icon.png
diff --git a/static/index.html b/static/index.html