From 09d575d90e64c27b0ddaac4da4adc7081ee47b2e Mon Sep 17 00:00:00 2001 From: rafapaezbas Date: Tue, 23 Jan 2024 13:44:14 +0100 Subject: [PATCH 1/5] navigation refactor --- lib/docs-viewer.js | 83 ++++++++++++++++++++++++---------------------- pulse.html | 11 ------ 2 files changed, 43 insertions(+), 51 deletions(-) diff --git a/lib/docs-viewer.js b/lib/docs-viewer.js index fa54ac3..69134e4 100644 --- a/lib/docs-viewer.js +++ b/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 - } - - evt.preventDefault() - this.page = location.pathname - this.#load().catch((err) => this.#error(err)) + window.addEventListener('click', async (evt) => { + evt.preventDefault() + 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) } }) diff --git a/pulse.html b/pulse.html index 08ad979..cedcf28 100644 --- a/pulse.html +++ b/pulse.html @@ -64,11 +64,6 @@ } section { - display: none; - } - - - section:target { display: block; padding-top: 156px; } @@ -209,12 +204,6 @@ System Status Documentation - 
                             
-        __ \    _ \   _` |   __| 
-        |   |   __/  (   |  |    
-        .__/  \___| \__,_| _|    
-      _|                                 
-
From 1df21b74309851a7069e4a1a7ae360c1f19f5207 Mon Sep 17 00:00:00 2001 From: rafapaezbas Date: Tue, 23 Jan 2024 16:18:26 +0100 Subject: [PATCH 2/5] added svgs --- .gitignore | 3 ++- assets/arrow.svg | 1 + assets/home.svg | 1 + assets/light.svg | 1 + pulse.html | 56 ++++++++++++++++++------------------------------ 5 files changed, 26 insertions(+), 36 deletions(-) create mode 100644 assets/arrow.svg create mode 100644 assets/home.svg create mode 100644 assets/light.svg diff --git a/.gitignore b/.gitignore index 439b248..42a2401 100644 --- a/.gitignore +++ b/.gitignore @@ -128,4 +128,5 @@ dist .yarn/build-state.yml .yarn/install-state.gz .pnp.* -package-lock.json \ No newline at end of file +package-lock.json +todo.* diff --git a/assets/arrow.svg b/assets/arrow.svg new file mode 100644 index 0000000..91d6ce7 --- /dev/null +++ b/assets/arrow.svg @@ -0,0 +1 @@ + arrow-left-square Created with Sketch Beta. diff --git a/assets/home.svg b/assets/home.svg new file mode 100644 index 0000000..8d29124 --- /dev/null +++ b/assets/home.svg @@ -0,0 +1 @@ + diff --git a/assets/light.svg b/assets/light.svg new file mode 100644 index 0000000..1f28eab --- /dev/null +++ b/assets/light.svg @@ -0,0 +1 @@ + diff --git a/pulse.html b/pulse.html index cedcf28..8b7a009 100644 --- a/pulse.html +++ b/pulse.html @@ -101,41 +101,27 @@ blockquote::before { content: "ℹ"; float: left; font-size: 1.625rem; margin-left: 1rem; margin-right: 0.625rem; } .col { max-width: 63rem; margin: 0 auto; margin-top: 1rem; } - #mode { - position: absolute; - font-size: 2rem; - right: 0.4rem; - bottom: 0rem; - cursor: pointer; - opacity: .65; - color: #B0D944; - user-select: none; - } + #back, #mode, #home { + width: 32px; + height: 32px; + position: absolute; + right: 0.4rem; + cursor: pointer; + user-select: none; + opacity: .65; + } - #mode::after { content: "☀"; } - - html.light #mode::after { content: "☾"; } + #back { + top: 10px; + } - #back { - position: absolute; - right: 0.4rem; - top: -1.9rem; - cursor: pointer; - opacity: .65; - color: #B0D944; - font-weight: bold; - font-size: 2.4rem; - user-select: none; - } + #mode { + top: 60px; + } - #home { - transform: scale(2.2, 2); - position: absolute; - right: .75rem; - bottom: -3.5rem; - cursor: pointer; - display: none; - } + #home { + top: 110px; + } html.light #home { color: #7c9735; @@ -197,9 +183,9 @@ - - ⌂ - ˿ + + +