docs home

lib/docs-viewer.js

@@ -34,7 +34,6 @@ customElements.define('docs-viewer', class extends HTMLElement {
         blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
         img { display: block; max-width: 63em; margin: 0 auto; margin-block-start: 1.625rem; margin-block-end: 1.625rem; box-shadow: rgb(123 115 168 / 15%) 0px 13px 24px 0px; }
       </style>
-      <header></header>
       <div id="panel" class="${lightMode ? 'light' : ''}"><slot></slot></div>
     </div>
     `
@@ -43,7 +42,6 @@ customElements.define('docs-viewer', class extends HTMLElement {
     this.root.appendChild(this.template.content.cloneNode(true))
 
     this.panel = this.root.querySelector('#panel')
-    this.header = this.root.querySelector('header')
     
     this.page = 'readme.md'
 
@@ -60,21 +58,27 @@ customElements.define('docs-viewer', class extends HTMLElement {
       const url = new URL(href, location.href)
       if (url.origin !== origin) return window.open(href)
       evt.preventDefault()
-      document.documentElement.scrollTo(0, 0)
+      this.load(evt.target.pathname)
-      this.page = evt.target.pathname
-      history.pushState(null, null, evt.target.pathname + location.hash)
-      this.#load().catch((err) => this.#error(err))
     })
-    
+
     window.addEventListener('popstate', (evt) => {
-      if (location.hash === '#documentation') {
+      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)
-        } else {
+          return
-          evt.preventDefault()
+        } 
-          this.page = location.pathname
+
-          this.#load().catch((err) => this.#error(err))
+        evt.preventDefault()
-        }
+        this.page = location.pathname
+        this.#load().catch((err) => this.#error(err))
 
       }
     })
@@ -86,6 +90,13 @@ customElements.define('docs-viewer', class extends HTMLElement {
     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})
   }

pulse.html

@@ -32,6 +32,7 @@
     }
 
     a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none;  }
+    a:hover { color: #d944c8; }
   
     #logo {
       float: left;
@@ -118,7 +119,17 @@
       font-size: 2.4rem;
       user-select: none;
     }
-  
+    #home {
+      transform: scale(2.2, 2);
+      position: absolute;
+      right: .75rem;
+      bottom: -3.5rem;
+      cursor: pointer;
+    }
+    html.light #home {
+      color: #7c9735;
+      font-weight: bold;
+    }
   </style>
   <header>
     <div id="headin">
@@ -145,6 +156,7 @@
         </defs>
       </svg>
       <span id="mode" onclick="document.documentElement.classList[document.documentElement.classList.contains('light') ? 'remove' : 'add']('light');"></span>
+      <span id="home"><a onclick="document.querySelector('docs-viewer').load('/readme.md')">⌂</a></span>
       <span id="back" onclick="history.back()">˿</span>
       <nav>
         <a href="#status" style="text-indent: -1rem">System Status</a>