aljaz/pear-docs
1
0
Fork 0
mirror of https://github.com/aljazceru/pear-docs.git synced 2025-12-17 14:34:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

align voice, routing, display, instructions, rm optional dep

Browse Source
This commit is contained in:
dmc
2024-01-30 22:52:33 +01:00
parent 30dda87d51
commit a7383cefb9
3 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
index.html
View File

@@ -214,14 +214,14 @@
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='/developer-tooling'],
app-router[data-load="developer-tooling"] a:active[href='/developer-tooling'],
app-router[data-load="developer-tooling"] a:visited[href='/developer-tooling'] {
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" developer-tooling="/developer-tooling" 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">
@@ -251,7 +251,7 @@
<nav>
<a href="/">System Status</a>
<a href="/documentation">Documentation</a>
<a href="/developer-tooling">Developer Tooling</a>
<a href="/devtools">Developer Tooling</a>
</nav>
<pre>
__ \ _ \ _` | __|
@@ -270,9 +270,9 @@
</section>
<script type='module' src='./lib/docs-viewer.js'></script>
<section>
<div class="col"><developer-tooling></developer-tooling></div>
<div class="col"><developer-tooling></devtools></div>
</section>
<script type='module' src='./lib/developer-tooling.js'></script>
<script type='module' src='./lib/devtools.js'></script>
</app-router>
<script type='module' src='./lib/app-router.js'></script>
</body>

98
lib/developer-tooling.js → lib/devtools.js
View File

@@ -25,12 +25,6 @@ customElements.define('developer-tooling', class extends HTMLElement {
display: none;
}
#code-installation {
white-space: pre-line;
padding-bottom: 1rem;
font-size: 10px;
}
.app {
display: flex;
align-items: center;
@@ -50,37 +44,75 @@ customElements.define('developer-tooling', class extends HTMLElement {
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>
<h1>Inspector</h1>
<div>
Use DevTools to debug your Pear apps
</div>
<ol>
<li>npm install pear-inspect in your app</li>
<li>
Add this code to your app:
<div id="code-installation">
import inspector from 'inspector'
import { Inspector } from 'pear-inspect'
const pearInspector = await new Inspector({ inspector }).enable()
const inspectorKey = await pearInspector.enable()
console.log('Pear Inspector key:', inspectorKey.toString('hex'))
<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>
</li>
<li>Running your program and the Pear Inspector key will be logged</li>
<li>Paste the logged key here</li>
<li>In Chrome, open chrome://inspect and the app should appear under Targets</li>
</ol>
<div>
<form id="add-key-form">
<input id="add-key-input" type="text" placeholder="Pear Inspector key"/>
<p id="add-key-error"></p>
</form>
</div>
<h2>Apps</h2>
<h3 id="no-apps">No apps added. Add a key above, to start debugging.</h3>
<div id="apps"></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' })

3
package.json
View File

@@ -15,8 +15,5 @@
"bare-path": "^2.1.0",
"redhat-overpass-font": "^1.0.0",
"ws": "^8.16.0"
},
"optionalDependencies": {
"bufferutil": "^4.0.8"
}
}