Use nue

.github/workflows/publish.yml

@@ -27,14 +27,14 @@ jobs:
         run: bun run bundle
 
       - name: Bundle source
-        run: git archive --format=zip ${{ github.event.release.tag_name }} --output .out/replace_maps_source.zip
+        run: git archive --format=zip ${{ github.event.release.tag_name }} --output .dist/replace_maps_source.zip
 
       - name: Release
         uses: browser-actions/release-firefox-addon@latest
         with:
           addon-id: [email protected]
-          addon-path: .out/replace_maps.zip
-          source-path: .out/replace_maps_source.zip
+          addon-path: .dist/replace_maps.zip
+          source-path: .dist/replace_maps_source.zip
           approval-note: Follow the instructions in AMO-README.md
           release-note: ${{ github.event.release.body }}  # TODO: convert md to html, h1-6 not allowed... Currently ignoring this problem, as the field is needed for publishing
           license: MPL-2.0

.gitignore

@@ -1,6 +1,7 @@
 node_modules/
 .dist/
-.out/
 
 .version-update
 .env
+
+src/@lib/**/*.png

AMO-README.md

@@ -18,4 +18,4 @@ This uses the `package-lock.json` file for installation to avoid package changes
 bun run build && bun run bundle
 ```
 
-This minifies the JavaScript, copies static resources and bundles the output to `.out/replace_maps.zip`.
+This minifies the JavaScript, copies static resources and bundles the output to `.dist/replace_maps.zip`.

README.md

@@ -27,67 +27,12 @@ As a result, the response is an extension page that contains a [Leaflet](https:/
 
 You can turn the extension off for every hostname by using the browser action button or by using the settings page.
 
-### Extension Flowchart
-
-```mermaid
-flowchart TD
-
-subgraph action [Browser Action]
-actionclick(Action Icon) -->|add / remove| storage[(Disabled Hostnames)]
-settings(Settings Page) -->|add / remove| storage
-end
-
-
-subgraph reqres [Request-Response Sytem]
-    req([Frame Request]) --> url{Matches\nGoogle Maps\nURL?}
-    url -->|no| nomatch([Continue Original Request])
-
-    url -->|yes| match{Hostname\nDisabled?}
-    storage -->|provide hostnames| match
-    match -->|no| res([Redirect to extension map page])
-    match -->|yes| nomatch
-
-end
-
-res -->|use params| params
-
-subgraph dec [Search-Param Decoding]
-    params(Search Params) -->|has q| q([readQ])
-    q -->|with title| pos[Marker/s]
-    params -->|has z| zoom[Zoom]
-
-    params -->|has pb| pb([readPB])
-    pb -->|has| minfo[Marker Info]
-    pb -->|has| marea[Map Area]
-
-    minfo -->|has\nsearch string| q
-    minfo -->|has\n0x...:0x...| cid[CID]
-    cid -.->|unknown usage| pos
-    minfo -->|has\nDMS coords| dms([parseDMS])
-    dms --> pos
-
-    pb -->|has| mtype[Map Type]
-
-    marea -->|has\ncoords| mcoords[Map Coords]
-    marea -->|has\naltitude| mzoom([getMapZoom])
-    mzoom --> zoom
-
-    pos --> mdata[(Map Data)]
-    mtype --> mdata
-    mcoords --> mdata
-    zoom --> mdata
-end
-
-mdata -->|use map data| mview([Load Leaflet Map])
-```
-
 ### Known issues
 
 - Sometimes the zoom level is completely wrong
 - Not working when a website does not use an iFrame / embed
 - Not working when iFrame uses only CIDs
 - No routes, just positions
-- If insufficient information is gathered, the map stays blank
 
 <!-- Badges & Links -->
 [badge-license]: https://img.shields.io/github/license/nobkd/replace-maps

build-icons.js

@@ -3,7 +3,7 @@ import { join } from 'path'
 import { mkdirSync } from 'fs'
 
 const indir = 'icons'
-const outdir = 'public/icons'
+const outdir = 'src/icons'
 const svgs = ['icon-grey.svg', 'icon.svg']
 const sizes = [48, 96]
 

bump.js

@@ -1,6 +1,6 @@
 import { writeFileSync } from 'node:fs'
 import { version } from './package.json' with { type: 'json' }
-import manifest from './public/manifest.json' with { type: 'json' }
+import manifest from './src/manifest.json' with { type: 'json' }
 
 manifest.version = version
-writeFileSync('./public/manifest.json', JSON.stringify(manifest, null, 2))
+writeFileSync('./src/manifest.json', JSON.stringify(manifest, null, 2))

src/test/parseDMS.test.js → map-utils/test/parseDMS.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from 'bun:test'
-import { parseDMS } from '../map/utils/parseDMS.js'
+import { parseDMS } from '../parseDMS.js'
 
 test('Parse Degrees Minutes Seconds Direction: Example', () => {
   const res = parseDMS(`10°60'36.0"N 10°60'36.0"E`)

src/test/parsePB.test.js → map-utils/test/parsePB.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from 'bun:test'
-import { parsePB, tileTypes } from '../map/utils/parsePB.js'
+import { parsePB, tileTypes } from '../parsePB.js'
 
 test('Parse PB: empty list', () => {
   const res = parsePB([])

src/test/read.test.js → map-utils/test/read.test.js

@@ -1,5 +1,5 @@
 import { test, expect, mock } from 'bun:test'
-import { readPB, readQ, nominatimQ } from '../map/utils/read.js'
+import { readPB, readQ, nominatimQ } from '../read.js'
 
 globalThis.fetch = mock()
 

package.json

@@ -15,16 +15,20 @@
     "url": "git+https://github.com/nobkd/replace-maps.git"
   },
   "scripts": {
+    "postinstall": "bun -e \"import {$} from 'bun'; $`cp -r 'node_modules/leaflet/dist/images' 'node_modules/leaflet-fullscreen/dist/fullscreen.png' 'node_modules/leaflet-fullscreen/dist/[email protected]' 'src/@lib/'`\"",
     "icons": "bun i --no-save oslllo-svg2 && bun build-icons.js",
-    "dev": "run-p -rl build:dev serve",
-    "build": "sh build.sh",
-    "build:dev": "sh build.sh dev",
-    "serve": "web-ext run -s .dist",
-    "bundle": "web-ext build -s .dist -a .out --overwrite-dest -n replace_maps.zip",
+    "dev": "run-p -rl build:dev serve:dev",
+    "prod": "run-s -l build serve",
+    "build": "nue build -pr src",
+    "build:dev": "nue -r src",
+    "serve": "web-ext run -s src/.dist/prod",
+    "serve:dev": "web-ext run -s src/.dist/dev",
+    "bundle": "web-ext build -s src/.dist/prod -a .dist --overwrite-dest -n replace_maps.zip",
     "release": "bun i --no-save release-it release-it-changelogen && release-it"
   },
   "devDependencies": {
     "npm-run-all": "^4.1.5",
+    "nuekit": "^1.0.0-RC.3",
     "web-ext": "^8.5.0"
   },
   "dependencies": {

src/@global/bootstrap.js

@@ -0,0 +1,9 @@
+import { router } from '/@nue/app-router.js'
+
+router.configure({
+  route: '/:',
+  url_params: ['q', 'pb', 'z'],
+  persistent_params: ['theme', 'disabled_hosts', 'resizable'],
+})
+
+router.initialize({ root: document.body })

src/@global/layout.html

@@ -0,0 +1,8 @@
+<head>
+  <slot for="head" />
+  <meta name="color-scheme" content="light dark">
+</head>
+
+<main>
+  <slot for="content"/>
+</main>

src/bg/bg.js → src/@lib/bg-script.js

@@ -1,15 +1,48 @@
-import { runtime, webRequest, tabs, windows } from 'webextension-polyfill'
+import { changeHostnameState, getHostnameState, nueStateChange } from '/@util/helper.js'
+import { browserAction, tabs, webRequest, windows, runtime } from '/@util/webext.js'
 
-import { disabledHosts, getHostname } from './utils/storage.js'
-import { updateActiveTabIcon } from './utils/actionIcon.js'
-import domainEnds from './utils/domainEnds.json' with { type: 'json' }
 
-const gLocales = domainEnds.join('|') // TODO: collect more locales
-export const matcher = new RegExp(
+/*** action ***/
+
+function updateIcon(url) {
+  browserAction.setIcon({
+    path: !getHostnameState(url) ? {
+      48: '/icons/48-icon.png',
+      96: '/icons/96-icon.png',
+    } : {
+      48: '/icons/48-icon-grey.png',
+      96: '/icons/96-icon-grey.png',
+    },
+  })
+}
+
+async function updateActiveTabIcon() {
+  let browserTabs = await tabs.query({ active: true, currentWindow: true })
+
+  let tab = browserTabs[0]
+  if (tab && tab.url) updateIcon(tab.url)
+}
+
+function actionClick(tab) {
+  if (!tab.url || !tab.id) return
+  else if (tab.url.startsWith('about:')) return
+
+  changeHostnameState(tab.url)
+  updateActiveTabIcon()
+  tabs.reload(tab.id, { bypassCache: true })
+}
+
+
+/*** bg ***/
+
+const gLocales = (await (await fetch('/domain-ends.json')).json()).join('|')
+
+const matcher = new RegExp(
   // TODO: fix regex to fit more patterns
   `^(https?:\/\/)?(maps\.google\.(${gLocales})\/maps.*\?.*output=embed|(www\.)?google\.(${gLocales})\/maps\/embed.*\?)`
 )
-export const runtimeMapUrl = runtime.getURL('map.html')
+
+const runtimeMapUrl = runtime.getURL('map.html')
 
 /**
  * Checks if `frames` send a request to Maps.
@@ -21,23 +54,28 @@ export const runtimeMapUrl = runtime.getURL('map.html')
 function redirect(req) {
   // TODO: check if originUrl always matches current tab url -> e.g. in frames with subframes
   if (req.originUrl && req.url.match(matcher)) {
-    if (!disabledHosts.includes(getHostname(req.originUrl))) {
+    if (!getHostnameState(req.originUrl)) {
       return {
-        redirectUrl: runtimeMapUrl + '?' + req.url.split('?').pop(),
+        redirectUrl: `${runtimeMapUrl}?${req.url.split('?').pop()}`,
       }
     }
   }
   return {}
 }
 
+
+/*** onload ***/
+
+browserAction.onClicked.addListener(actionClick)
+
 // Listens to web requests from frames, redirects when fitting `matcher`
 webRequest.onBeforeRequest.addListener(
   redirect,
   {
     urls: ['<all_urls>'],
     types: ['sub_frame'],
   },
-  ['blocking']
+  ['blocking'],
 )
 
 // listen to tab URL changes
@@ -51,3 +89,5 @@ windows.onFocusChanged.addListener(updateActiveTabIcon)
 
 // update icon at startup
 updateActiveTabIcon()
+
+nueStateChange(updateActiveTabIcon)

src/@lib/map.css

@@ -0,0 +1,17 @@
+@import "leaflet/dist/leaflet.css";
+@import "leaflet-fullscreen/dist/leaflet.fullscreen.css";
+
+
+html, body, div { margin: 0; padding: 0; }
+
+#map { width: 100%; height: 100vh; }
+
+.leaflet-container {
+  &[data-theme="dark"] { background: #111 !important; }
+  @media (prefers-color-scheme: dark) { &[data-theme="system"] { background: #111 !important; } }
+}
+
+.leaflet-layer, .leaflet-popup, .leaflet-tooltip, .leaflet-control, .leaflet-control-layers-toggle, .leaflet-attribution-flag {
+  [data-theme="dark"] & { filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(120%); }
+  @media (prefers-color-scheme: dark) { [data-theme="system"] & { filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(120%); } }
+}

src/@lib/map.dhtml

@@ -0,0 +1,18 @@
+<script>
+  import { router } from '/@nue/app-router.js'
+  import { nueStateChange } from '/@util/helper.js'
+  import { init } from '/@util/leaflet.js'
+</script>
+
+<div @name="maps" :data-theme="router.state.theme || 'system'" id="map">
+
+  <script>
+    router = router
+
+    mounted() {
+      router.on('theme resizable', this.update)
+      nueStateChange(this.update)
+      init(this.root, router.state)
+    }
+  </script>
+</div>

src/@lib/options.css

@@ -0,0 +1,61 @@
+html, body, ul, p { margin: 0; padding: 0; }
+
+* { box-sizing: border-box; font: inherit; }
+
+:root {
+  --text: black;
+  --bg: white;
+
+  --table-even: #d3d2db;
+  --table-odd: #c3c2cb;
+
+  @media (prefers-color-scheme: dark) {
+    --text: #ccc;
+    --bg: #1c1b22;
+
+    --table-even: #53525b;
+    --table-odd: #33323b;
+  }
+
+  font-family: system-ui, sans-serif;
+  font-size: 14px;
+}
+
+body, main, main > div { width: 100%; min-height: 100vh; }
+
+main > div { color: var(--text); background-color: var(--bg); }
+
+label { font-weight: bold; }
+
+input, button, select { padding: 0.5rem; border-radius: 0.5rem; border-style: solid; border-color: color-mix(in srgb, var(--text), transparent); }
+
+section { padding: 0.5rem; display: grid; gap: 0.75rem; }
+
+.items, .form :is(form, li) {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.form ul {
+  display: grid;
+  gap: 0.25rem;
+
+  li {
+    border-radius: 0.25rem;
+    padding: 0.5rem;
+
+    &:nth-child(even) { background-color: var(--table-even); }
+    &:nth-child(odd) { background-color: var(--table-odd); }
+
+    button { 
+      width: 1.75rem;
+      height: 1.75rem;
+      color: red;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}