mirror of
https://github.com/aljazceru/pear-docs.git
synced 2025-12-17 14:34:19 +01:00
Merge pull request #19 from holepunchto/navigation-refactor
Navigation refactor
This commit is contained in:
David Mark Clements
1
.gitignore
vendored
1
.gitignore
vendored
@@ -129,3 +129,4 @@ dist
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
package-lock.json
|
||||
todo.*
|
||||
|
||||
1
assets/arrow.svg
Normal file
1
assets/arrow.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="64px" height="64px" viewBox="0 0 32.00 32.00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#B0D944" stroke="#B0D944"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="0.384"></g><g id="SVGRepo_iconCarrier"> <title>arrow-left-square</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke-width="0.48" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-412.000000, -983.000000)" fill="#b0D944"> <path d="M434,998 L423.414,998 L427.535,993.879 C427.926,993.488 427.926,992.855 427.535,992.465 C427.145,992.074 426.512,992.074 426.121,992.465 L420.465,998.121 C420.225,998.361 420.15,998.689 420.205,999 C420.15,999.311 420.225,999.639 420.465,999.879 L426.121,1005.54 C426.512,1005.93 427.145,1005.93 427.535,1005.54 C427.926,1005.15 427.926,1004.51 427.535,1004.12 L423.414,1000 L434,1000 C434.553,1000 435,999.553 435,999 C435,998.448 434.553,998 434,998 L434,998 Z M442,1011 C442,1012.1 441.104,1013 440,1013 L416,1013 C414.896,1013 414,1012.1 414,1011 L414,987 C414,985.896 414.896,985 416,985 L440,985 C441.104,985 442,985.896 442,987 L442,1011 L442,1011 Z M440,983 L416,983 C413.791,983 412,984.791 412,987 L412,1011 C412,1013.21 413.791,1015 416,1015 L440,1015 C442.209,1015 444,1013.21 444,1011 L444,987 C444,984.791 442.209,983 440,983 L440,983 Z" id="arrow-left-square" sketch:type="MSShapeGroup"> </path> </g> </g> </g></svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
1
assets/light.svg
Normal file
1
assets/light.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.75 5.5C11.1977 5.5 10.75 5.05228 10.75 4.5V2C10.75 1.44772 11.1977 1 11.75 1H12.25C12.8023 1 13.25 1.44772 13.25 2V4.5C13.25 5.05228 12.8023 5.5 12.25 5.5H11.75Z" fill="#B0D944"></path> <path d="M16.4194 7.22698C16.0289 6.83646 16.0289 6.20329 16.4194 5.81277L18.1872 4.045C18.5777 3.65447 19.2109 3.65447 19.6014 4.045L19.9549 4.39855C20.3455 4.78908 20.3455 5.42224 19.9549 5.81277L18.1872 7.58053C17.7967 7.97106 17.1635 7.97106 16.773 7.58053L16.4194 7.22698Z" fill="#B0D944"></path> <path d="M18.5 11.75C18.5 11.1977 18.9477 10.75 19.5 10.75H22C22.5523 10.75 23 11.1977 23 11.75V12.25C23 12.8023 22.5523 13.25 22 13.25H19.5C18.9477 13.25 18.5 12.8023 18.5 12.25V11.75Z" fill="#B0D944"></path> <path d="M16.7728 16.4194C17.1633 16.0289 17.7965 16.0289 18.187 16.4194L19.9548 18.1872C20.3453 18.5777 20.3453 19.2109 19.9548 19.6014L19.6012 19.9549C19.2107 20.3455 18.5775 20.3455 18.187 19.9549L16.4192 18.1872C16.0287 17.7967 16.0287 17.1635 16.4192 16.773L16.7728 16.4194Z" fill="#B0D944"></path> <path d="M12.25 18.5C12.8023 18.5 13.25 18.9477 13.25 19.5V22C13.25 22.5523 12.8023 23 12.25 23H11.75C11.1977 23 10.75 22.5523 10.75 22V19.5C10.75 18.9477 11.1977 18.5 11.75 18.5H12.25Z" fill="#B0D944"></path> <path d="M7.58059 16.773C7.97111 17.1635 7.97111 17.7967 7.58059 18.1872L5.81282 19.955C5.4223 20.3455 4.78913 20.3455 4.39861 19.955L4.04505 19.6014C3.65453 19.2109 3.65453 18.5778 4.04505 18.1872L5.81282 16.4195C6.20334 16.0289 6.83651 16.0289 7.22703 16.4195L7.58059 16.773Z" fill="#B0D944"></path> <path d="M5.5 12.25C5.5 12.8023 5.05228 13.25 4.5 13.25H2C1.44772 13.25 1 12.8023 1 12.25V11.75C1 11.1977 1.44772 10.75 2 10.75H4.5C5.05228 10.75 5.5 11.1977 5.5 11.75V12.25Z" fill="#B0D944"></path> <path d="M7.22722 7.58059C6.8367 7.97111 6.20353 7.97111 5.81301 7.58059L4.04524 5.81282C3.65472 5.4223 3.65472 4.78913 4.04524 4.39861L4.3988 4.04505C4.78932 3.65453 5.42248 3.65453 5.81301 4.04505L7.58078 5.81282C7.9713 6.20334 7.9713 6.83651 7.58078 7.22703L7.22722 7.58059Z" fill="#B0D944"></path> <path d="M7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z" fill="#B0D944"></path> </g></svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -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
|
||||
}
|
||||
|
||||
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')
|
||||
}
|
||||
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)
|
||||
}
|
||||
})
|
||||
|
||||
51
pulse.html
51
pulse.html
@@ -64,11 +64,6 @@
|
||||
}
|
||||
|
||||
section {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
section:target {
|
||||
display: block;
|
||||
padding-top: 156px;
|
||||
}
|
||||
@@ -106,49 +101,22 @@
|
||||
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 {
|
||||
#back, #mode {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
right: 0.4rem;
|
||||
bottom: 0rem;
|
||||
cursor: pointer;
|
||||
opacity: .65;
|
||||
color: #B0D944;
|
||||
user-select: none;
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
#mode::after { content: "☀"; }
|
||||
|
||||
html.light #mode::after { content: "☾"; }
|
||||
|
||||
#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;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#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 {
|
||||
@@ -201,9 +169,8 @@
|
||||
</clipPath>
|
||||
</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>
|
||||
<img id="mode" src="/assets/light.svg" onclick="document.documentElement.classList.toggle('light');"></img>
|
||||
<img id="back" src="/assets/arrow.svg" onclick="history.back()"></img>
|
||||
<nav>
|
||||
<a href="#status" style="text-indent: -1rem">System Status</a>
|
||||
<a href="#documentation">Documentation</a>
|
||||
|
||||
Reference in New Issue
Block a user