Merge pull request 'Build in sandbox' (#44) from sandbox into main

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/44

app.js

@@ -19,18 +19,28 @@ customElements.define(
 )
 
 class Setup {
-  async run() {
+  async runWithSw() {
-    const sw = navigator.serviceWorker
+    navigator.serviceWorker.addEventListener(
-    
+      'controllerchange',
-    sw.addEventListener('controllerchange', () => {
+      () => {
-      if (this.registration.active) {
+        if (this.registration.active) {
-        window.location.reload(true)
+          window.location.reload(true)
+        }
       }
-    })
+    )
     await this.register()
     this.load()
   }
 
+  async runWithoutSw() {
+    const layout = document.createElement(
+      'm-layout'
+    )
+    layout.csp = undefined
+    layout.header.menu.handleLinks = true
+    document.body.appendChild(layout)
+  }
+
   async register() {
     try {
       this.registration =
@@ -54,4 +64,4 @@ class Setup {
   }
 }
 
-new Setup().run()
+new Setup().runWithSw()

components/layout.js

@@ -36,6 +36,9 @@ export class Layout extends HTMLElement {
     addEventListener('hashchange', () => {
       this.load()
     })
+    this.addEventListener('hash-change', () => {
+      this.load()
+    })
   }
 
   load() {

components/nav-menu.js

@@ -4,6 +4,7 @@ export class NavMenu extends HTMLElement {
     this.attachShadow({mode: 'open'})
     this.language = navigator.language
     this.pages = []
+    this.handleLinks = false
   }
 
   connectedCallback() {
@@ -42,9 +43,16 @@ export class NavMenu extends HTMLElement {
     this.renderPageList()
     this.shadowRoot.addEventListener('click', e => {
       if (e.target.classList.contains('page')) {
+        if (this.handleLinks) {
+          e.preventDefault()
+        }
         this.dispatchEvent(new CustomEvent(
           'close-menu', {bubbles: true}
         ))
+        if (this.handleLinks) {
+          const hash = '#' + e.target.innerText
+          location.hash = hash
+        }
       }
     })
   }

components/page.js

@@ -131,7 +131,7 @@ export class Page extends HTMLElement {
   }
 
   display(value) {
-    let doc = value
+    let doc = value || ''
     if (!(/<\w/).test(doc.substring(0, 30))) {
       doc = `<pre style="white-space: pre-wrap; margin: 8px 12px; font-family: monospace;">` +
         doc.replace("<", "&lt;").replace(">", "&gt;") +

sw.js

@@ -11,7 +11,7 @@ async function initCache() {
     '/dialog/dialog.js',
     '/forms/button-group.js',
     '/menu/dropdown.js',
-  ])
+  ]) //1
 }
 
 self.addEventListener("install", event => {