Docs viewer improvements (#83)

* fixed some broken hyperdht.md anchors

* naming refactor in anchor scrolling

---------

Co-authored-by: rafapaezbas <rafa@holepunch.com>
This commit is contained in:
rafapaezbas
2024-03-01 10:44:09 +01:00
committed by GitHub
parent 1c7a120113
commit 675ac09c4f
2 changed files with 19 additions and 20 deletions

View File

@@ -18,7 +18,7 @@ Notable features include:
* [DHT.bootstrapper(port, host, \[options\])](hyperdht.md#dht.bootstrapper)
* [node.destroy(\[options\])](hyperdht.md#node.destroy)
* [Creating P2P servers:](hyperdht.md#creating-p2p-servers)
* [node.createServer(\[options\], \[onconnection\])](hyperdht.md#const-server--nodecreateserveroptions-onconnection)
* [node.createServer(\[options\], \[onconnection\])](hyperdht.md#node.createserver)
* Methods:
* [server.listen(keyPair)](hyperdht.md#server.listen)
* [server.refresh()](hyperdht.md#server.refresh)
@@ -34,7 +34,7 @@ Notable features include:
* [socket.remotePublicKey](hyperdht.md#socket.remotepublickey)
* [socket.publicKey](hyperdht.md#socket.publickey)
* Events:
* [open](hyperdht.md#socketonopen)
* [open](hyperdht.md#socket.onopen)
* [Additional Peer Discovery](hyperdht.md#additional-peer-discovery):
* Methods:
* [node.lookup(topic, \[options\])](hyperdht.md#node.lookup)
@@ -86,7 +86,7 @@ Any options passed are forwarded to dht-rpc.
Use this method to create a bootstrap node for in order to run a Hyperswarm network.
#### **`await node.destroy([options])`** {#dht.destroy}
#### **`await node.destroy([options])`** {#node.destroy}
Fully destroy this DHT node.
@@ -94,7 +94,7 @@ Fully destroy this DHT node.
### Creating P2P Servers
#### **`const server = node.createServer([options], [onconnection])`** {#server.createserver}
#### **`const server = node.createServer([options], [onconnection])`** {#node.createserver}
Creates a new server for accepting incoming encrypted P2P connections.

View File

@@ -19,22 +19,21 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
await element.load(page, opts)
const isDocumentationPage = pathname.startsWith('/documentation')
if (isDocumentationPage && !!opts.header) {
const anchor = opts.header
if (anchor) {
const element = this.routes['/documentation'].shadowRoot.getElementById(anchor)
element.scrollIntoView()
const elementY = Math.floor(element.getBoundingClientRect().y)
const pearHeaderHeight = 170
const extraScroll = 80
const isUnderPearHeader = elementY < pearHeaderHeight + extraScroll
if (isUnderPearHeader) {
window.scrollBy(0, -1 * (pearHeaderHeight + extraScroll - elementY))
}
const anchor = opts.anchor
const shouldShowSpecificSection = anchor && isDocumentationPage
if (shouldShowSpecificSection) {
const element = this.routes['/documentation'].shadowRoot.getElementById(anchor)
element.scrollIntoView()
const elementY = Math.floor(element.getBoundingClientRect().y)
const pearHeaderHeight = 170
const extraScroll = 80
const isUnderPearHeader = elementY < pearHeaderHeight + extraScroll
if (isUnderPearHeader) {
window.scrollBy(0, -1 * (pearHeaderHeight + extraScroll - elementY))
}
}
if (!opts.back) history.pushState({ pathname, header: opts.header }, null, pathname)
if (!opts.back) history.pushState({ pathname, anchor: opts.anchor }, null, pathname)
break
}
}
@@ -47,8 +46,8 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
const { tagName } = evt.target.getRootNode().host || {}
const route = tagName ? this.getAttribute(tagName) : ''
if (evt.target.pathname.startsWith(route)) {
const header = evt.target.href.split('#')[1]
this.load(evt.target.pathname, { header }).catch(console.error)
const anchor = evt.target.href.split('#')[1]
this.load(evt.target.pathname, { anchor }).catch(console.error)
} else {
this.load(route + evt.target.pathname).catch(console.error)
}
@@ -64,7 +63,7 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
this.addEventListener('click', (evt) => this.link(evt))
window.addEventListener('popstate', (evt) => {
this.load(evt.state?.pathname, { back: true, header: evt.state?.header }).catch(console.error)
this.load(evt.state?.pathname, { back: true, anchor: evt.state?.anchor }).catch(console.error)
})
window.addEventListener('load', () => {