sys status start

lib/docs-viewer.js

@@ -43,7 +43,11 @@ customElements.define('docs-viewer', class extends HTMLElement {
 
     this.panel = this.root.querySelector('#panel')
     
-    this.page = 'readme.md'
+    this.home = document.querySelector('#home')
+
+    this.page = '/readme.md'
+
+    this.home.style.display = 'none'
 
     const observer = new MutationObserver(() => {
       if (document.documentElement.classList.contains('light')) this.panel.classList.add('light')
@@ -61,6 +65,11 @@ customElements.define('docs-viewer', class extends HTMLElement {
       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')
@@ -99,5 +108,7 @@ customElements.define('docs-viewer', class extends HTMLElement {
 
   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 = ''
   }
 })

lib/system-status.js

@@ -0,0 +1,72 @@
+import fs from 'fs'
+import path from 'path'
+import { config } from 'pear'
+
+const pearBin = path.join(config.pearDir, 'bin')
+
+const paths = process.env.PATH.split(path.delimiter)
+
+customElements.define('system-status', class extends HTMLElement {
+  constructor () {
+    super()
+    this.vianode = false
+    this.installed = paths.some((p) => {
+      if (p.includes('node') && p.includes('bin')) this.vianode = fs.existsSync(path.join(p, 'pear'))
+      return p === pearBin
+    })
+    this.template = document.createElement('template')
+    this.template.innerHTML = `
+    <div id="panel">
+      <style>
+        #panel { user-select: none; }
+        blockquote { outline: 1px solid #323532; margin-inline-start: 0; margin-inline-end: 0; display: block; margin-block-start: 1rem; margin-block-end: 0; padding: 1px; font-size: .825rem }
+        blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; }
+        button { background: #151517; color: #B0D944; border: 1px solid; padding: .575em .65em; cursor: pointer; margin-top: 2.65rem; font-size: 1.25rem; }
+        #tip { text-indent: 4px; margin-top: -.25rem }
+        code { padding: .25rem; }
+        #tip > p { margin: 0; padding: 0}
+        h1 { 
+          padding: 0.5rem;
+          display: inline-block;
+          padding-right: 0.75em;
+          font-weight: bold;
+          font-size: 2.46rem;
+          margin-left: -0.7rem;
+          margin-top: 1rem;
+          margin-bottom: 1.25rem;
+        }
+      </style>
+      <h1>System Status</h1>
+      ${
+        this.installed ? `
+          <blockquote>
+           <p>Pear is installed.</p>
+          </blockquote>
+          <p>✔ Pear is in the system PATH and ready to go.</p>
+        ` : `
+          <blockquote>
+           <p>Pear setup is nearly complete.</p>
+          </blockquote>
+          <p><button> Complete Pear Setup </button><p>
+          <p id=tip><small>Click the button to add </small><code>${pearBin}</code><small> to the system PATH<small></p>
+        `
+      }
+    </div>
+    `
+    this.root = this.attachShadow({ mode: 'open' })
+
+    this.root.appendChild(this.template.content.cloneNode(true))
+    
+    this.button = this.root.querySelector('button')
+
+    if (this.button) {
+      const listener = () => {
+        this.button.removeEventListener('click', listener)
+
+      }
+      this.button.addEventListener('click', listener)
+    }
+  
+  }
+
+})

package.json

@@ -10,6 +10,7 @@
         }
     },
     "dependencies": {
+        "bare-path": "^2.1.0",
         "overpass": "github:RedHatOfficial/Overpass#71f18db"
     }
 }

pulse.html

@@ -32,7 +32,6 @@
     }
 
     a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none;  }
-    a:hover { color: #d944c8; }
   
     #logo {
       float: left;
@@ -86,6 +85,7 @@
       transform: scale(0.92);
       width: 72rem;
       margin: 0 auto;
+      user-select: none;
     }
   
     h1 { padding: .5rem; border-right: 1px solid #B0D944; border-bottom: 1px solid #B0D944; display: inline-block; padding-right: 0.75em; padding-left: 0.5em; font-weight: bold; font-size: 1.6rem; margin-block-start: 0.67em; margin-block-end: 0.67em; }
@@ -119,17 +119,24 @@
       font-size: 2.4rem;
       user-select: none;
     }
+
     #home {
       transform: scale(2.2, 2);
       position: absolute;
       right: .75rem;
       bottom: -3.5rem;
       cursor: pointer;
+      display: none;
     }
+
     html.light #home {
       color: #7c9735;
       font-weight: bold;
     }
+
+    header:has(~ #documentation:target) > #headin > #home {
+      display: inline;
+    }
   </style>
   <header>
     <div id="headin">
@@ -172,13 +179,10 @@
   </header>
   <section id="status">
     <div class="col">
-      <h1>Pear by Holepunch</h1>
-      <blockquote>
-        <p>Pear is installed.</p>
-      </blockquote>
-      <p>Pear is ready to go.</p>
+      <system-status></system-status>
     </div>
   </section>
+  <script type='module' src='./lib/system-status.js'></script>
   <section id="documentation">
     <div class="col">
       <docs-viewer></docs-viewer>