mirror of
https://github.com/aljazceru/pear-docs.git
synced 2025-12-17 14:34:19 +01:00
David Mark Clements
105
index.html
105
index.html
@@ -1,4 +1,5 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<body>
|
||||
<style>
|
||||
@font-face {
|
||||
@@ -7,12 +8,14 @@
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'overpass-mono';
|
||||
src: url('~redhat-overpass-font/webfonts/overpass-mono-webfont/overpass-mono-bold.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #151517;
|
||||
box-sizing: border-box;
|
||||
@@ -51,9 +54,8 @@
|
||||
nav {
|
||||
height: 146px;
|
||||
float: left;
|
||||
padding-left: 2em;
|
||||
padding-left: .75rem;
|
||||
padding-top: 2em;
|
||||
margin-right: 30rem;
|
||||
}
|
||||
|
||||
nav>a {
|
||||
@@ -97,12 +99,46 @@
|
||||
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; }
|
||||
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; }
|
||||
.col { max-width: 63rem; margin: 0 auto; margin-top: 1rem; }
|
||||
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;
|
||||
}
|
||||
|
||||
#back, #mode {
|
||||
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;
|
||||
}
|
||||
|
||||
.col {
|
||||
max-width: 63rem;
|
||||
margin: 0 auto;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#back,
|
||||
#mode {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
@@ -135,29 +171,57 @@
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#bar:hover {
|
||||
outline: #B0D944;
|
||||
}
|
||||
|
||||
pear-ctrl {
|
||||
margin-top: 9px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
pear-ctrl[data-platform="dawrin"] { float: left; margin-top: 4px; }
|
||||
|
||||
system-status, docs-viewer { position: relative; top: 156px }
|
||||
pear-ctrl[data-platform="dawrin"] {
|
||||
float: left;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
a:visited, a:active, a { color: #B0D944; outline: none; text-decoration: none; }
|
||||
app-router a:visited, app-router a:active, app-router a {
|
||||
system-status,
|
||||
docs-viewer,
|
||||
developer-tooling {
|
||||
position: relative;
|
||||
top: 156px
|
||||
}
|
||||
|
||||
|
||||
a:visited,
|
||||
a:active,
|
||||
a {
|
||||
color: #B0D944;
|
||||
outline: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
app-router a:visited,
|
||||
app-router a:active,
|
||||
app-router a {
|
||||
color: #B0D944;
|
||||
}
|
||||
app-router[data-load="system-status"] a[href='/'], app-router[data-load="system-status"] a:active[href='/'], app-router[data-load="system-status"] a:visited[href='/'],
|
||||
app-router[data-load="docs-viewer"] a[href='/documentation'], app-router[data-load="docs-viewer"] a:active[href='/documentation'], app-router[data-load="docs-viewer"] a:visited[href='/documentation'] {
|
||||
|
||||
app-router[data-load="system-status"] a[href='/'],
|
||||
app-router[data-load="system-status"] a:active[href='/'],
|
||||
app-router[data-load="system-status"] a:visited[href='/'],
|
||||
app-router[data-load="docs-viewer"] a[href='/documentation'],
|
||||
app-router[data-load="docs-viewer"] a:active[href='/documentation'],
|
||||
app-router[data-load="docs-viewer"] a:visited[href='/documentation'],
|
||||
app-router[data-load="developer-tooling"] a[href='/devtools'],
|
||||
app-router[data-load="developer-tooling"] a:active[href='/devtools'],
|
||||
app-router[data-load="developer-tooling"] a:visited[href='/devtools'] {
|
||||
color: rgb(78, 250, 92);
|
||||
}
|
||||
|
||||
</style>
|
||||
<div id="bar"><pear-ctrl></pear-ctrl></div>
|
||||
<app-router docs-viewer="/documentation" system-status="/" data-load="system-status">
|
||||
<app-router docs-viewer="/documentation" developer-tooling="/devtools" system-status="/" data-load="system-status">
|
||||
<header>
|
||||
<div id="headin">
|
||||
<svg id="logo" width="102" height="146" viewBox="0 0 102 146" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
@@ -185,8 +249,9 @@
|
||||
<img id="mode" src="/assets/light.svg" onclick="document.documentElement.classList.toggle('light');">
|
||||
<img id="back" src="/assets/arrow.svg" onclick="history.back()">
|
||||
<nav>
|
||||
<a href="/" style="text-indent: -1rem">System Status</a>
|
||||
<a href="/">System Status</a>
|
||||
<a href="/documentation">Documentation</a>
|
||||
<a href="/devtools">Developer Tooling</a>
|
||||
</nav>
|
||||
<pre>
|
||||
__ \ _ \ _` | __|
|
||||
@@ -196,14 +261,18 @@
|
||||
</pre>
|
||||
</div>
|
||||
</header>
|
||||
<section id="status">
|
||||
<section>
|
||||
<div class="col"><system-status></system-status></div>
|
||||
</section>
|
||||
<script type='module' src='./lib/system-status.js'></script>
|
||||
<section id="documentation">
|
||||
<section>
|
||||
<div class="col"><docs-viewer></docs-viewer></div>
|
||||
</section>
|
||||
<script type='module' src='./lib/docs-viewer.js'></script>
|
||||
<section>
|
||||
<div class="col"><developer-tooling></devtools></div>
|
||||
</section>
|
||||
<script type='module' src='./lib/devtools.js'></script>
|
||||
</app-router>
|
||||
<script type='module' src='./lib/app-router.js'></script>
|
||||
</body>
|
||||
|
||||
@@ -49,6 +49,8 @@ customElements.define('app-router', class AppRouter extends HTMLElement {
|
||||
window.addEventListener('load', () => {
|
||||
if (Pear.config.link.indexOf('pear://pulse') === 0) {
|
||||
this.load(Pear.config.link.slice(12)).catch(console.error)
|
||||
} else {
|
||||
this.load('/')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
278
lib/devtools.js
Normal file
278
lib/devtools.js
Normal file
@@ -0,0 +1,278 @@
|
||||
/* eslint-env browser */
|
||||
import http from 'http'
|
||||
import { WebSocketServer } from 'ws'
|
||||
import { Session } from '@holepunchto/pear-inspect'
|
||||
import b4a from 'b4a'
|
||||
|
||||
customElements.define('developer-tooling', class extends HTMLElement {
|
||||
router = null
|
||||
|
||||
constructor () {
|
||||
super()
|
||||
this.template = document.createElement('template')
|
||||
this.template.innerHTML = `
|
||||
<div>
|
||||
<style>
|
||||
#add-key-input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#add-key-error {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#no-apps.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.app .title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.app:hover .remove {
|
||||
display: block;
|
||||
}
|
||||
.app .remove {
|
||||
cursor: pointer;
|
||||
padding-right: 10px;
|
||||
margin-left: calc(-1rem - 10px);
|
||||
width: 1rem;
|
||||
display: none;
|
||||
}
|
||||
#remote-inspect-explain {
|
||||
float:left;
|
||||
max-width:55%;
|
||||
}
|
||||
#remote-inspect {
|
||||
float:right;
|
||||
max-width:40%;
|
||||
}
|
||||
|
||||
h2 { margin: 0 }
|
||||
p {
|
||||
margin-block-start: 0.75em;
|
||||
margin-block-end: 0.75em;
|
||||
}
|
||||
|
||||
input {
|
||||
all: unset;
|
||||
border: 1px ridge #B0D944;
|
||||
background: #000;
|
||||
color: #B0D944;
|
||||
padding: .45rem;
|
||||
font-family: monospace;
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
code {
|
||||
background: #3a4816;
|
||||
color: #efeaea;
|
||||
padding: 0.25rem;
|
||||
padding-top: 0.1rem;
|
||||
padding-bottom: 0.15rem;
|
||||
font-family: 'overpass-mono';
|
||||
border-radius: 1px;
|
||||
font-size: .9em;
|
||||
}
|
||||
pre > code { display: block; line-height: 1.025rem; padding-left: 1em; background: #181e19 }
|
||||
</style>
|
||||
|
||||
<div>
|
||||
<h1>Developer Tooling</h1>
|
||||
<div id=remote-inspect-explain>
|
||||
<h2>Remotely inspect Pear applications.</h2>
|
||||
|
||||
<p> Some application setup is required to enable remote debugging </p>
|
||||
<p> First install the <code>pear-inspect</code> module into the application </p>
|
||||
<pre><code>npm install pear-inspect</code></pre>
|
||||
<p> Then add the following JavaScript code to the application, at the top: </p>
|
||||
|
||||
<pre><code>if (Pear.config.dev) {
|
||||
const { Inspector } = await import('pear-inspect')
|
||||
const inpector = await new Inspector()
|
||||
const key = await inpector.enable()
|
||||
console.log('Pear Inspector key:', key.toString('hex'))
|
||||
}</code></pre>
|
||||
|
||||
<p>When the application is opened in development mode the inspection key will be logged.</p>
|
||||
<p>Paste the logged key into the input and use a compatible inspect protocol tool, such as chrome://inspect to view the remote target</p>
|
||||
</div>
|
||||
<div id=remote-inspect>
|
||||
<div>
|
||||
<form id="add-key-form">
|
||||
<input id="add-key-input" type="text" placeholder="Paste Pear Inspector Key Here"/>
|
||||
<p id="add-key-error"></p>
|
||||
</form>
|
||||
</div>
|
||||
<h2>Apps</h2>
|
||||
<h3 id="no-apps">No apps added. Add an inspect key to start debugging.</h3>
|
||||
<div id="apps"></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
this.root = this.attachShadow({ mode: 'open' })
|
||||
this.root.appendChild(this.template.content.cloneNode(true))
|
||||
|
||||
this.addKeyFormElem = this.root.querySelector('#add-key-form')
|
||||
this.addKeyInputElem = this.root.querySelector('#add-key-input')
|
||||
this.addKeyErrorElem = this.root.querySelector('#add-key-error')
|
||||
this.appsElem = this.root.querySelector('#apps')
|
||||
this.noAppsElem = this.root.querySelector('#no-apps')
|
||||
this.apps = new Map()
|
||||
|
||||
this.addKeyInputElem.addEventListener('keypress', e => {
|
||||
this.addKeyErrorElem.textContent = ''
|
||||
})
|
||||
|
||||
this.addKeyFormElem.addEventListener('submit', e => {
|
||||
e.preventDefault()
|
||||
const inspectorKey = this.addKeyInputElem.value
|
||||
if (inspectorKey.length !== 64) {
|
||||
this.addKeyErrorElem.textContent = 'Key needs to be 64 characters long'
|
||||
return
|
||||
}
|
||||
|
||||
const sessionId = generateUuid()
|
||||
const inspectorSession = new Session({ inspectorKey: b4a.from(inspectorKey, 'hex') })
|
||||
const app = {
|
||||
inspectorKey,
|
||||
title: '',
|
||||
url: '',
|
||||
inspectorSession
|
||||
}
|
||||
|
||||
inspectorSession.on('close', () => {
|
||||
this.apps.delete(sessionId)
|
||||
this.renderApps()
|
||||
})
|
||||
inspectorSession.on('info', ({ filename }) => {
|
||||
app.url = filename
|
||||
app.title = filename.split('/').pop()
|
||||
this.apps.set(sessionId, app)
|
||||
this.renderApps()
|
||||
})
|
||||
|
||||
this.addKeyInputElem.value = ''
|
||||
this.addKeyErrorElem.textContent = ''
|
||||
this.renderApps()
|
||||
})
|
||||
|
||||
const devtoolsHttpServer = http.createServer()
|
||||
const devToolsWsServer = new WebSocketServer({ noServer: true })
|
||||
|
||||
devtoolsHttpServer.listen(9229, () => console.log('[devtoolsHttpServer] running on port 9229'))
|
||||
devtoolsHttpServer.on('request', (req, res) => {
|
||||
if (req.url !== '/json/list') {
|
||||
res.writeHead(404)
|
||||
res.end()
|
||||
return
|
||||
}
|
||||
|
||||
const targets = [...this.apps].map(([sessionId, app]) => ({
|
||||
description: 'node.js instance', // `Pear app: ${app.name}`,
|
||||
devtoolsFrontendUrl: `devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`,
|
||||
devtoolsFrontendUrlCompat: `devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/${sessionId}`,
|
||||
faviconUrl: 'https://nodejs.org/static/images/favicons/favicon.ico',
|
||||
id: sessionId,
|
||||
title: app.title,
|
||||
type: 'node',
|
||||
url: `file://${app.url}`,
|
||||
webSocketDebuggerUrl: `ws://127.0.0.1:9229/${sessionId}`
|
||||
}))
|
||||
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'application/json; charset=UTF-8',
|
||||
'Cache-Control': 'no-cache',
|
||||
'Content-Length': JSON.stringify(targets).length
|
||||
})
|
||||
res.end(JSON.stringify(targets))
|
||||
})
|
||||
devtoolsHttpServer.on('upgrade', (request, socket, head) => {
|
||||
console.log(`[devtoolsHttpServer] UPGRADE. url=${request.url}`)
|
||||
const sessionId = request.url.substr(1)
|
||||
const sessionIdExists = this.apps.has(sessionId)
|
||||
if (!sessionIdExists) return socket.destroy()
|
||||
|
||||
devToolsWsServer.handleUpgrade(request, socket, head, ws => devToolsWsServer.emit('connection', ws, request))
|
||||
})
|
||||
|
||||
devToolsWsServer.on('connection', (devtoolsSocket, request) => {
|
||||
const sessionId = request.url.substr(1)
|
||||
const app = this.apps.get(sessionId)
|
||||
if (!app) return devtoolsSocket.destroy()
|
||||
|
||||
const { inspectorSession } = app
|
||||
|
||||
const onMessage = msg => {
|
||||
const { pearInspectMethod } = msg
|
||||
const isACDPMessage = !pearInspectMethod
|
||||
|
||||
if (isACDPMessage) return devtoolsSocket.send(JSON.stringify(msg))
|
||||
}
|
||||
inspectorSession.connect()
|
||||
inspectorSession.on('message', onMessage)
|
||||
devtoolsSocket.on('message', msg => inspectorSession.post(JSON.parse(msg)))
|
||||
devtoolsSocket.on('close', () => {
|
||||
inspectorSession.disconnect()
|
||||
inspectorSession.off('message', onMessage)
|
||||
app.connected = false
|
||||
this.renderApps()
|
||||
})
|
||||
|
||||
app.connected = true
|
||||
this.renderApps()
|
||||
})
|
||||
}
|
||||
|
||||
renderApps () {
|
||||
this.appsElem.replaceChildren(...[...this.apps].map(([sessionId, app]) => {
|
||||
const div = document.createElement('div')
|
||||
div.innerHTML = `
|
||||
<div class="app">
|
||||
<div class="remove" data-session-id="${sessionId}">✕</div>
|
||||
<div class="title">${app.title} (${app.url})</div>
|
||||
</div>
|
||||
`
|
||||
div.querySelector('.remove').addEventListener('click', () => {
|
||||
this.apps.delete(sessionId)
|
||||
this.renderApps()
|
||||
})
|
||||
|
||||
return div
|
||||
}))
|
||||
|
||||
if (this.apps.size > 0) {
|
||||
this.noAppsElem.classList.add('hidden')
|
||||
} else {
|
||||
this.noAppsElem.classList.remove('hidden')
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
load () {
|
||||
this.style.display = ''
|
||||
}
|
||||
|
||||
unload () {
|
||||
this.style.display = 'none'
|
||||
}
|
||||
})
|
||||
|
||||
// Can't use `uuid` module for some reason as it results in a throw with `crypto` when importing
|
||||
function generateUuid () {
|
||||
let result, i, j
|
||||
result = ''
|
||||
for (j = 0; j < 32; j++) {
|
||||
if (j === 8 || j === 12 || j === 16 || j === 20) {
|
||||
result = result + '-'
|
||||
}
|
||||
i = Math.floor(Math.random() * 16).toString(16)
|
||||
result = result + i
|
||||
}
|
||||
return result
|
||||
}
|
||||
@@ -10,6 +10,10 @@
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"redhat-overpass-font": "^1.0.0"
|
||||
"@holepunchto/pear-inspect": "^3.0.1",
|
||||
"b4a": "^1.6.4",
|
||||
"bare-path": "^2.1.0",
|
||||
"redhat-overpass-font": "^1.0.0",
|
||||
"ws": "^8.16.0"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user