e47a9f4401
- 2.1: packs/ -> archive/packs/ - 2.2: site/ -> archive/site/ - 2.3: src/lab/ -> archive/lab/ - 2.4: examples/ -> archive/examples-legacy/ (SSI-based)
110 lines
12 KiB
HTML
110 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!--#include virtual="/_include/head.html" -->
|
|
<title>Code — ASW Examples</title>
|
|
<meta name="description" content="Inline code, keyboard input, sample
|
|
output, code blocks, and syntax highlighting">
|
|
</head>
|
|
<body>
|
|
<!--#include virtual="/_include/nav.html" -->
|
|
|
|
<main>
|
|
<header>
|
|
<h1>Code</h1>
|
|
<p data-text="lead">Inline code, keyboard input, sample output,
|
|
code blocks, and syntax highlighting</p>
|
|
</header>
|
|
|
|
<p>Four semantic code elements: <code><code></code>,
|
|
<code><kbd></code>, <code><samp></code>,
|
|
<code><pre></code>. Syntax highlighting via Prism.js themed by ASW
|
|
tokens.</p>
|
|
<h2 id="inline-code">Inline code</h2>
|
|
<p>Use <code><code></code> for variable names, file paths,
|
|
attribute values, short snippets.</p>
|
|
<p>Set <code>data-layout="docs"</code> on the wrapper div.</p>
|
|
<p>The <code>--accent</code> token defaults to
|
|
<code>var(--green-5)</code>.</p>
|
|
<h2 id="keyboard-input">Keyboard input</h2>
|
|
<p><code><kbd></code> marks keys and shortcuts. Inverted palette —
|
|
dark background, light text — distinct from inline code.</p>
|
|
<p>Press <kbd>⌘ K</kbd> to open the command palette.</p>
|
|
<p>Save with <kbd>Ctrl</kbd> + <kbd>S</kbd>. Undo with <kbd>Ctrl</kbd> +
|
|
<kbd>Z</kbd>.</p>
|
|
<h2 id="sample-output">Sample output</h2>
|
|
<p><code><samp></code> marks program output — terminal responses,
|
|
log lines, error messages.</p>
|
|
<p>The command returned: <samp>✓ Built dist/agentic.css —
|
|
120KB</samp></p>
|
|
<p>Error: <samp>ENOENT: no such file or directory, open
|
|
'config.json'</samp></p>
|
|
<h2 id="code-block">Code block</h2>
|
|
<pre><code>function greet(name) {
|
|
return `Hello, ${name}!`;
|
|
}
|
|
|
|
console.log(greet("world"));</code></pre>
|
|
<h2 id="syntax-highlighting">Syntax highlighting</h2>
|
|
<p>Add <code>class="language-*"</code> to the inner
|
|
<code><code></code> element. Prism tokenizes; ASW colors the
|
|
tokens.</p>
|
|
<div class="sourceCode" id="cb2"><pre
|
|
class="sourceCode html"><code class="sourceCode html"><span id="cb2-1"><a href="#cb2-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">article</span> <span class="er">data-session</span><span class="ot">=</span><span class="st">"2026-04-02"</span><span class="dt">></span></span>
|
|
<span id="cb2-2"><a href="#cb2-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">header</span><span class="dt">></span></span>
|
|
<span id="cb2-3"><a href="#cb2-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">h1</span><span class="dt">></span>Session record<span class="dt"></</span><span class="kw">h1</span><span class="dt">></span></span>
|
|
<span id="cb2-4"><a href="#cb2-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span> <span class="er">data-text</span><span class="ot">=</span><span class="st">"dim"</span><span class="dt">></span>Vigilio Desto · autonomous<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span>
|
|
<span id="cb2-5"><a href="#cb2-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">header</span><span class="dt">></span></span>
|
|
<span id="cb2-6"><a href="#cb2-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">p</span><span class="dt">></span>The taxonomy is <span class="dt"><</span><span class="kw">strong</span><span class="dt">></span>complete<span class="dt"></</span><span class="kw">strong</span><span class="dt">></span>. 26 docs pages.<span class="dt"></</span><span class="kw">p</span><span class="dt">></span></span>
|
|
<span id="cb2-7"><a href="#cb2-7" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">article</span><span class="dt">></span></span></code></pre></div>
|
|
<div class="sourceCode" id="cb3"><pre
|
|
class="sourceCode css"><code class="sourceCode css"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="in">:root</span> {</span>
|
|
<span id="cb3-2"><a href="#cb3-2" aria-hidden="true" tabindex="-1"></a> <span class="va">--accent</span>: <span class="fu">var(</span><span class="va">--green-5</span><span class="fu">)</span><span class="op">;</span></span>
|
|
<span id="cb3-3"><a href="#cb3-3" aria-hidden="true" tabindex="-1"></a> <span class="va">--surface</span>: <span class="fu">var(</span><span class="va">--gray-15</span><span class="fu">)</span><span class="op">;</span></span>
|
|
<span id="cb3-4"><a href="#cb3-4" aria-hidden="true" tabindex="-1"></a> <span class="va">--text</span>: <span class="fu">var(</span><span class="va">--gray-1</span><span class="fu">)</span><span class="op">;</span></span>
|
|
<span id="cb3-5"><a href="#cb3-5" aria-hidden="true" tabindex="-1"></a>}</span>
|
|
<span id="cb3-6"><a href="#cb3-6" aria-hidden="true" tabindex="-1"></a></span>
|
|
<span id="cb3-7"><a href="#cb3-7" aria-hidden="true" tabindex="-1"></a><span class="im">@media</span> (<span class="kw">prefers-color-scheme</span>: <span class="dv">light</span>) {</span>
|
|
<span id="cb3-8"><a href="#cb3-8" aria-hidden="true" tabindex="-1"></a> <span class="in">:root</span> {</span>
|
|
<span id="cb3-9"><a href="#cb3-9" aria-hidden="true" tabindex="-1"></a> <span class="va">--accent</span>: <span class="fu">var(</span><span class="va">--green-8</span><span class="fu">)</span><span class="op">;</span></span>
|
|
<span id="cb3-10"><a href="#cb3-10" aria-hidden="true" tabindex="-1"></a> }</span>
|
|
<span id="cb3-11"><a href="#cb3-11" aria-hidden="true" tabindex="-1"></a>}</span></code></pre></div>
|
|
<div class="sourceCode" id="cb4"><pre
|
|
class="sourceCode javascript"><code class="sourceCode javascript"><span id="cb4-1"><a href="#cb4-1" aria-hidden="true" tabindex="-1"></a><span class="co">// Toc spy — highlight nav item for current scroll position</span></span>
|
|
<span id="cb4-2"><a href="#cb4-2" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> headings <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">querySelectorAll</span>(<span class="st">'article h2, article h3'</span>)<span class="op">;</span></span>
|
|
<span id="cb4-3"><a href="#cb4-3" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> links <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">querySelectorAll</span>(<span class="st">'[data-nav="toc"] a'</span>)<span class="op">;</span></span>
|
|
<span id="cb4-4"><a href="#cb4-4" aria-hidden="true" tabindex="-1"></a></span>
|
|
<span id="cb4-5"><a href="#cb4-5" aria-hidden="true" tabindex="-1"></a><span class="kw">const</span> observer <span class="op">=</span> <span class="kw">new</span> <span class="fu">IntersectionObserver</span>((entries) <span class="kw">=></span> {</span>
|
|
<span id="cb4-6"><a href="#cb4-6" aria-hidden="true" tabindex="-1"></a> entries<span class="op">.</span><span class="fu">forEach</span>(entry <span class="kw">=></span> {</span>
|
|
<span id="cb4-7"><a href="#cb4-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (entry<span class="op">.</span><span class="at">isIntersecting</span>) {</span>
|
|
<span id="cb4-8"><a href="#cb4-8" aria-hidden="true" tabindex="-1"></a> links<span class="op">.</span><span class="fu">forEach</span>(l <span class="kw">=></span> l<span class="op">.</span><span class="fu">removeAttribute</span>(<span class="st">'aria-current'</span>))<span class="op">;</span></span>
|
|
<span id="cb4-9"><a href="#cb4-9" aria-hidden="true" tabindex="-1"></a> <span class="kw">const</span> active <span class="op">=</span> <span class="bu">document</span><span class="op">.</span><span class="fu">querySelector</span>(<span class="vs">`[data-nav="toc"] a[href="#</span><span class="sc">${</span>entry<span class="op">.</span><span class="at">target</span><span class="op">.</span><span class="at">id</span><span class="sc">}</span><span class="vs">"]`</span>)<span class="op">;</span></span>
|
|
<span id="cb4-10"><a href="#cb4-10" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> (active) active<span class="op">.</span><span class="fu">setAttribute</span>(<span class="st">'aria-current'</span><span class="op">,</span> <span class="st">'true'</span>)<span class="op">;</span></span>
|
|
<span id="cb4-11"><a href="#cb4-11" aria-hidden="true" tabindex="-1"></a> }</span>
|
|
<span id="cb4-12"><a href="#cb4-12" aria-hidden="true" tabindex="-1"></a> })<span class="op">;</span></span>
|
|
<span id="cb4-13"><a href="#cb4-13" aria-hidden="true" tabindex="-1"></a>}<span class="op">,</span> { <span class="dt">rootMargin</span><span class="op">:</span> <span class="st">'-20% 0px -70% 0px'</span> })<span class="op">;</span></span>
|
|
<span id="cb4-14"><a href="#cb4-14" aria-hidden="true" tabindex="-1"></a></span>
|
|
<span id="cb4-15"><a href="#cb4-15" aria-hidden="true" tabindex="-1"></a>headings<span class="op">.</span><span class="fu">forEach</span>(h <span class="kw">=></span> observer<span class="op">.</span><span class="fu">observe</span>(h))<span class="op">;</span></span></code></pre></div>
|
|
<div class="sourceCode" id="cb5"><pre
|
|
class="sourceCode bash"><code class="sourceCode bash"><span id="cb5-1"><a href="#cb5-1" aria-hidden="true" tabindex="-1"></a><span class="co">#!/usr/bin/env bash</span></span>
|
|
<span id="cb5-2"><a href="#cb5-2" aria-hidden="true" tabindex="-1"></a><span class="bu">set</span> <span class="at">-euo</span> pipefail</span>
|
|
<span id="cb5-3"><a href="#cb5-3" aria-hidden="true" tabindex="-1"></a></span>
|
|
<span id="cb5-4"><a href="#cb5-4" aria-hidden="true" tabindex="-1"></a><span class="ex">./build.sh</span> <span class="kw">&&</span> <span class="bu">echo</span> <span class="st">"✓ Built dist/agentic.css"</span></span>
|
|
<span id="cb5-5"><a href="#cb5-5" aria-hidden="true" tabindex="-1"></a></span>
|
|
<span id="cb5-6"><a href="#cb5-6" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> add <span class="at">-A</span></span>
|
|
<span id="cb5-7"><a href="#cb5-7" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> commit <span class="at">-m</span> <span class="st">"build: recompile agentic.css"</span></span>
|
|
<span id="cb5-8"><a href="#cb5-8" aria-hidden="true" tabindex="-1"></a><span class="fu">git</span> push origin main</span></code></pre></div>
|
|
<div class="sourceCode" id="cb6"><pre
|
|
class="sourceCode python"><code class="sourceCode python"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a><span class="im">import</span> json</span>
|
|
<span id="cb6-2"><a href="#cb6-2" aria-hidden="true" tabindex="-1"></a><span class="im">from</span> pathlib <span class="im">import</span> Path</span>
|
|
<span id="cb6-3"><a href="#cb6-3" aria-hidden="true" tabindex="-1"></a></span>
|
|
<span id="cb6-4"><a href="#cb6-4" aria-hidden="true" tabindex="-1"></a><span class="kw">def</span> read_session(vault_path: <span class="bu">str</span>, session_id: <span class="bu">int</span>) <span class="op">-></span> <span class="bu">dict</span>:</span>
|
|
<span id="cb6-5"><a href="#cb6-5" aria-hidden="true" tabindex="-1"></a> path <span class="op">=</span> Path(vault_path) <span class="op">/</span> <span class="st">"daily"</span> <span class="op">/</span> <span class="ss">f"session-</span><span class="sc">{</span>session_id<span class="sc">}</span><span class="ss">.json"</span></span>
|
|
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a> <span class="cf">if</span> <span class="kw">not</span> path.exists():</span>
|
|
<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a> <span class="cf">raise</span> <span class="pp">FileNotFoundError</span>(<span class="ss">f"Session </span><span class="sc">{</span>session_id<span class="sc">}</span><span class="ss"> not found"</span>)</span>
|
|
<span id="cb6-8"><a href="#cb6-8" aria-hidden="true" tabindex="-1"></a> <span class="cf">return</span> json.loads(path.read_text())</span></code></pre></div>
|
|
</main>
|
|
|
|
<!--#include virtual="/_include/footer.html" -->
|
|
</body>
|
|
</html>
|