navigation refactor

lib/docs-viewer.js

@@ -54,6 +54,8 @@ customElements.define('docs-viewer', class extends HTMLElement {
 
     this.home = document.querySelector('#home')
 
+    this.status = document.querySelector('#status')
+
     this.page = '/readme.md'
 
     this.home.style.display = 'none'
@@ -64,59 +66,60 @@ customElements.define('docs-viewer', class extends HTMLElement {
     })
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 
-    this.panel.addEventListener('click', (evt) => {
+    this.panel.addEventListener('click', async (evt) => {
+      evt.preventDefault()
       if (evt.target?.tagName !== 'A') return
+      const targetUrl = new URL(evt.target.href)
+      if (targetUrl.hash === '#documentation') {
+        await this.load('/readme.md')
+        return
+      }
       const href = evt.target.href
       const { origin } = new URL(location.href)
       const url = new URL(href, location.href)
       if (url.origin !== origin) return window.open(href)
-      evt.preventDefault()
       this.load(evt.target.pathname)
     })
 
-    window.addEventListener('hashchange', () => {
-      if (location.hash === '#documentation' && this.page === '/readme.md') this.home.style.display = 'none'
-      else this.home.style.display = ''
-    })
-
-    window.addEventListener('popstate', (evt) => {
-      if (location.hash.startsWith('#documentation')) {
-        const home = location.hash.endsWith('-home')
-        if (home) {
-          this.page = '/readme.md'
-          history.replaceState(null, null, this.page + location.hash)
-          location.href = '/pulse.html#documentation'
-          return
-        }
-
-        if (location.pathname.endsWith('.md') === false) {
-          history.replaceState(null, null, this.page + location.hash)
-          return
-        }
 
+    window.addEventListener('click', async (evt) => {
       evt.preventDefault()
-        this.page = location.pathname
-        this.#load().catch((err) => this.#error(err))
+      if (evt.target?.tagName !== 'A') return
+      const targetUrl = new URL(evt.target.href)
+      if (targetUrl.hash === '#documentation') {
+        const docsViewer = document.querySelector('docs-viewer')
+        await docsViewer.load('/readme.md')
       }
     })
 
-    this.#load().catch((err) => this.#error(err))
+    window.addEventListener('popstate', async (evt) => {
+      console.log(evt)
+      if (evt.state === null) {
+        this.home.style.display = 'none'
+        this.panel.style.display = 'none'
+        this.status.style.display = ''
+        return
+      }
+      const docsViewer = document.querySelector('docs-viewer')
+      await docsViewer.load(evt.state.page, { back: true })
+      return
+    })
+
+    const config = global[Symbol.for('pear.config')] || {}
+    if (config.link && config.link !== 'pear:dev') {
+      window.addEventListener('load', async () => {
+        await this.load(config.link.slice(5))
+      })
+    }
   }
 
-  #error (err) {
-    try { this.panel.querySelector('slot').innerHTML = err.stack } catch (e) { console.error(err, e) }
-  }
-
-  load (page) {
-    document.documentElement.scrollTo(0, 0)
-    this.page = page
-    history.pushState(null, null, page + location.hash)
-    return this.#load().catch((err) => this.#error(err))
-  }
-
-  async #load () {
-    this.panel.querySelector('slot').innerHTML = marked.parse(await (await fetch(this.page)).text(), { headerIds: false, mangle: false })
-    if (location.hash === '#documentation' && this.page === '/readme.md') this.home.style.display = 'none'
-    else this.home.style.display = ''
+  async load (page, opts = {}) {
+    const html = await fetch(page)
+    const text = await marked.parse(await html.text())
+    this.panel.querySelector('slot').innerHTML = text, { headerIds: false, mangle: false }
+    this.home.style.display = ''
+    this.panel.style.display = ''
+    this.status.style.display = 'none'
+    if (!opts.back) history.pushState({ page }, null)
   }
 })

pulse.html

@@ -64,11 +64,6 @@
     }
   
     section {
-      display: none;
-    }
-  
-  
-    section:target {
       display: block;
       padding-top: 156px;
     }
@@ -209,12 +204,6 @@
         <a href="#status" style="text-indent: -1rem">System Status</a>
         <a href="#documentation">Documentation</a>
       </nav>
-      <pre>                             
-        __ \    _ \   _` |   __| 
-        |   |   __/  (   |  |    
-        .__/  \___| \__,_| _|    
-      _|                                 
-      </pre>
     </div>
   </header>
   <section id="status">