lerko/nib-v1
1
1
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(web): add vanilla JS/CSS SPA with embed.FS

Browse Source 
Stream view with date grouping, card view sorted by usage, capture
bar with client-side grammar parsing, tag rail filter, detail pane
with card affordances (template slot fill, checklist toggle, link
open), promote modal with auto-detect, keyboard shortcuts (j/k/n/p/
Enter/dd/1/2). Dark theme, responsive layout. Embedded in Go binary.
This commit is contained in:
Tyler Koenig
2026-05-14 11:38:45 -04:00
parent 6de174e474
commit 5b0d0a8f33
7 changed files with 1170 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/index.html
+64
View File
@@ -0,0 +1,64 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>nib</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div id="app">
<header>
<div class="header-left">
<h1 class="logo">nib</h1>
<nav>
<button data-view="stream" class="nav-btn active">stream</button>
<button data-view="cards" class="nav-btn">cards</button>
</nav>
</div>
<form id="capture-bar" autocomplete="off">
<input type="text" id="capture-input" placeholder="capture... (n to focus)" spellcheck="false">
</form>
</header>
<main>
<aside id="tag-rail"></aside>
<section id="entity-list"></section>
<aside id="detail-pane">
<div class="detail-empty">select an entity</div>
</aside>
</main>
</div>
<div id="promote-modal" class="modal hidden">
<div class="modal-backdrop"></div>
<div class="modal-content">
<h3>promote to card</h3>
<div class="type-picker">
<button data-type="snippet" class="type-btn">
<span class="type-glyph">◆</span>
<span>snippet</span>
</button>
<button data-type="template" class="type-btn">
<span class="type-glyph">◈</span>
<span>template</span>
</button>
<button data-type="checklist" class="type-btn">
<span class="type-glyph">☐</span>
<span>checklist</span>
</button>
<button data-type="decision" class="type-btn">
<span class="type-glyph">⚖</span>
<span>decision</span>
</button>
<button data-type="link" class="type-btn">
<span class="type-glyph">🔗</span>
<span>link</span>
</button>
</div>
<button class="modal-close">esc to cancel</button>
</div>
</div>
<script src="/app.js"></script>
</body>
</html>