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 @@
+
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/lib/docs-viewer.js b/lib/docs-viewer.js
index fa54ac3..6043301 100644
--- a/lib/docs-viewer.js
+++ b/lib/docs-viewer.js
@@ -52,71 +52,70 @@ customElements.define('docs-viewer', class extends HTMLElement {
this.panel = this.root.querySelector('#panel')
- this.home = document.querySelector('#home')
+ this.status = document.querySelector('#status')
this.page = '/readme.md'
- this.home.style.display = 'none'
-
const observer = new MutationObserver(() => {
if (document.documentElement.classList.contains('light')) this.panel.classList.add('light')
else this.panel.classList.remove('light')
})
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')
+ }
+ if (targetUrl.hash === '#status') {
+ this.panel.style.display = 'none'
+ this.status.style.display = ''
}
})
- this.#load().catch((err) => this.#error(err))
+ window.addEventListener('popstate', async (evt) => {
+ console.log(evt)
+ if (evt.state === null) {
+ this.panel.style.display = 'none'
+ this.status.style.display = ''
+ return
+ }
+ const docsViewer = document.querySelector('docs-viewer')
+ await docsViewer.load(evt.state.page, { back: true })
+ })
+
+ 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
+ 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 7a3bc5e..6aa8df1 100644
--- a/pulse.html
+++ b/pulse.html
@@ -64,11 +64,6 @@
}
section {
- display: none;
- }
-
-
- section:target {
display: block;
padding-top: 156px;
}
@@ -106,50 +101,23 @@
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 {
+ 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;
- }
-
- #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;
- }
+ #mode {
+ top: 60px;
+ }
#bar {
backdrop-filter: blur(64px);
@@ -201,14 +169,13 @@
-
- ⌂
- ˿
+ 
+ 
-
+
__ \ _ \ _` | __|
| | __/ ( | |
.__/ \___| \__,_| _|