Skip to content

Commit 0fa42cc

Browse files
CptPlasticCptPlastic
committed
Revamp homepage layout and add styles
Overhaul the docs homepage and supporting styles: adjust h3 padding and remove its flex layout, simplify footer selector, and add new CSS for spells, feature-grid, feature-card, quote-block, incantation syntax colors, and responsive tweaks. Replace the previous hero/header with a redesigned page structure and many new informational sections (cover, What is Lore?, artefacts, export architecture, scrying glass, relics/distillation, incantations, trust model, hooks/daemon/health, grimoire of commands), update install/usage snippets, and update the document title capitalization. Overall this commit modernizes the landing content and introduces new UI/typography elements and grid cards for the docs site.
1 parent 6a938be commit 0fa42cc

File tree

2 files changed

+297
-37
lines changed

2 files changed

+297
-37
lines changed

‎docs/assets/stylesheets/homebrew-legacy.css‎

Lines changed: 81 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -109,12 +109,9 @@ h3 {
109109
max-width: 860px;
110110
width: min(100%, 860px);
111111
margin: 0 auto;
112-
padding: 3.5rem 1.5rem 6rem;
112+
padding: 3rem 2rem 6rem;
113113
position: relative;
114114
z-index: 1;
115-
display: flex;
116-
flex-direction: column;
117-
align-items: center;
118115
}
119116

120117
.docs-page {
@@ -413,7 +410,7 @@ h3 {
413410
opacity: 0.7;
414411
}
415412

416-
.legacy-home footer {
413+
footer {
417414
text-align: center;
418415
color: rgba(200, 151, 58, 0.4);
419416
font-family: "Cinzel", serif;
@@ -425,6 +422,83 @@ h3 {
425422
width: 100%;
426423
}
427424

425+
/* ── spell list ── */
426+
427+
.spells {
428+
list-style: none;
429+
padding: 0;
430+
margin: 0;
431+
}
432+
433+
.spells li {
434+
padding: 0.5rem 0 0.5rem 1.8rem;
435+
border-bottom: 1px dashed rgba(200, 151, 58, 0.3);
436+
position: relative;
437+
color: var(--ink);
438+
}
439+
440+
.spells li:last-child {
441+
border-bottom: none;
442+
}
443+
444+
.spells li::before {
445+
content: "⚜";
446+
position: absolute;
447+
left: 0;
448+
color: var(--gold);
449+
font-size: 0.85em;
450+
top: 0.65rem;
451+
}
452+
453+
.spells li strong {
454+
font-family: "Cinzel", serif;
455+
font-size: 0.9rem;
456+
color: var(--red);
457+
letter-spacing: 0.06em;
458+
}
459+
460+
/* ── feature grid ── */
461+
462+
.feature-grid {
463+
display: grid;
464+
grid-template-columns: repeat(2, minmax(0, 1fr));
465+
gap: 1rem;
466+
margin-top: 1rem;
467+
}
468+
469+
.feature-card {
470+
background: rgba(0, 0, 0, 0.05);
471+
border: 1px solid rgba(200, 151, 58, 0.28);
472+
padding: 1rem 1.1rem;
473+
position: relative;
474+
}
475+
476+
.feature-card h3 {
477+
margin-top: 0;
478+
}
479+
480+
.feature-card p:last-child {
481+
margin-bottom: 0;
482+
}
483+
484+
/* ── quote block ── */
485+
486+
.quote-block {
487+
margin: 1.2rem 0;
488+
padding: 1.1rem 1.2rem;
489+
border-top: 1px solid rgba(200, 151, 58, 0.4);
490+
border-bottom: 1px solid rgba(200, 151, 58, 0.4);
491+
color: var(--ink-faded);
492+
font-style: italic;
493+
text-align: center;
494+
}
495+
496+
/* ── incantation syntax colours ── */
497+
498+
.incantation .comment { color: #5c7a3a; }
499+
.incantation .cmd { color: #e8b84b; }
500+
.incantation .arg { color: #c8d89a; }
501+
428502
@media (max-width: 900px) {
429503
.parchment {
430504
padding: 2rem 1.5rem;
@@ -454,7 +528,8 @@ h3 {
454528
}
455529

456530
.target-list,
457-
.command-columns {
531+
.command-columns,
532+
.feature-grid {
458533
grid-template-columns: 1fr;
459534
}
460535
}

‎docs/index.html‎

Lines changed: 216 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,55 +3,240 @@
33
<head>
44
<meta charset="utf-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
6-
<title>Lore — The spellbook for your codebase</title>
6+
<title>Lore — The Spellbook for Your Codebase</title>
77
<meta name="description" content="Local AI memory for software projects. Chronicle decisions and context your tools can actually read." />
88
<link rel="canonical" href="https://cptplastic.github.io/lore-book/" />
99
<link rel="stylesheet" href="assets/stylesheets/homebrew-legacy.css" />
1010
</head>
1111
<body>
1212
<canvas id="sparkles"></canvas>
1313

14-
<header class="site-nav-wrap">
15-
<nav class="site-nav" aria-label="Primary">
16-
<span class="site-brand">Lore</span>
17-
<a class="site-link" href="https://github.com/CptPlastic/lore-book">GitHub ↗</a>
18-
</nav>
19-
</header>
14+
<div class="page">
2015

21-
<main class="page">
22-
<div class="hero">
16+
<!-- ══ COVER ══ -->
17+
<header class="cover">
2318
<div class="sigil">📜</div>
2419
<h1>Lore</h1>
25-
<p class="tagline">Local AI memory for your codebase.<br>Chronicle decisions, context, and lessons your tools can actually read.</p>
26-
<div class="install-strip">
27-
<div class="incantation one-liner">pip install lore-book</div>
28-
<div class="install-then">then</div>
29-
<div class="incantation one-liner">lore onboard</div>
20+
<p class="subtitle">Keeper of the Chronicle</p>
21+
<p class="tagline">"The spellbook for your codebase — chronicle decisions, context,<br>and lessons your AI companions can actually read."</p>
22+
</header>
23+
24+
<!-- ══ WHAT IS THIS ══ -->
25+
<section class="parchment">
26+
<h2><span class="rune">✦</span> What is Lore?</h2>
27+
<p>AI coding tools are <em>stateless</em>. They don't remember why you chose PostgreSQL over SQLite, that the auth layer must never bypass JWT validation, or that the frontend team deprecated the v1 API six months ago. You end up re-explaining the same context in every session.</p>
28+
<p><strong>Lore</strong> fixes that. It is a local AI memory system for software projects. You capture knowledge once as plain YAML alongside your code — then Lore publishes it as instruction files that GitHub Copilot, Claude, Cursor, Codex, and other AI tools read automatically.</p>
29+
<p>By default, Lore exports <code>CHRONICLE.md</code> plus lean adapter files so the same project description, security preamble, and memory entry points stay consistent everywhere.</p>
30+
<p>No external database. No API keys. No cloud sync. Everything lives in <code>.lore/</code> next to your code.</p>
31+
<div class="badge-row">
32+
<span class="ver-badge">LOCAL YAML STORE</span>
33+
<span class="ver-badge">CHRONICLE FIRST</span>
34+
<span class="ver-badge">NO CLOUD SYNC</span>
35+
<span class="ver-badge">TOOL-AGNOSTIC</span>
36+
</div>
37+
</section>
38+
39+
<!-- ══ THE THREE ARTEFACTS ══ -->
40+
<section class="parchment">
41+
<h2><span class="rune">⚜</span> The Three Artefacts</h2>
42+
<h3>Spell <em style="font-weight:400;color:var(--ink-faded)">(a memory)</em></h3>
43+
<p>A single piece of knowledge: a decision, a fact, a hard-won lesson. Short, specific, retrievable by semantic search.</p>
44+
<h3>Tome <em style="font-weight:400;color:var(--ink-faded)">(a category)</em></h3>
45+
<p>A named collection of spells. Default tomes: <strong>decisions</strong>, <strong>facts</strong>, <strong>preferences</strong>, <strong>summaries</strong>. Add your own in <code>.lore/config.yaml</code>.</p>
46+
<h3>Relic <em style="font-weight:400;color:var(--ink-faded)">(a raw artifact)</em></h3>
47+
<p>A raw artifact saved as-is for later distillation — a pasted session log, a git diff, a Slack thread. It lands in <code>.lore/relics/</code> untouched until you're ready to extract spells from it.</p>
48+
</section>
49+
50+
<!-- ══ HOW THE MAGIC FLOWS ══ -->
51+
<section class="parchment">
52+
<h2><span class="rune">✧</span> How the Magic Flows</h2>
53+
<div class="scroll-diagram">Your decisions, facts &amp; lessons
54+
↓ lore add / lore relic
55+
.lore/ (plain YAML)
56+
↓ lore export
57+
CHRONICLE.md ← full project memory (one source of truth)
58+
↓ referenced by lean instruction files:
59+
copilot-instructions.md · AGENTS.md · CLAUDE.md
60+
.cursor/rules/memory.md · GEMINI.md · .clinerules
61+
↓ on demand in Copilot Chat:
62+
/lore → reads CHRONICLE.md into context
63+
↓
64+
Every AI tool reads your repo context
65+
— without you repeating yourself</div>
66+
</section>
67+
68+
<!-- ══ FIRST INVOCATION ══ -->
69+
<section class="parchment">
70+
<h2><span class="rune">✶</span> First Invocation</h2>
71+
<p>New users should start with onboarding. Lore walks through the store layout, security policy, your first spell, and publishing in one guided ritual.</p>
72+
<div class="incantation"><span class="cmd">lore onboard</span></div>
73+
<ol class="ritual-steps">
74+
<li><strong>Initialize the spellbook</strong> with a project description and local store defaults.</li>
75+
<li><strong>Record real knowledge</strong> as decisions, facts, preferences, or summaries.</li>
76+
<li><strong>Export the chronicle</strong> so every supported AI tool inherits the same context.</li>
77+
<li><strong>Enable dense semantic search</strong> later with <code>lore setup semantic</code> if you want embeddings beyond TF-IDF fallback.</li>
78+
</ol>
79+
<div class="note">Requirements: Python 3.10+. Dense vector search is optional. If model loading fails, Lore falls back to TF-IDF so search still works.</div>
80+
</section>
81+
82+
<!-- ══ EXPORT ARCHITECTURE ══ -->
83+
<section class="parchment">
84+
<h2><span class="rune">⌘</span> Export Architecture</h2>
85+
<p>Lore uses a two-layer export model: one canonical chronicle, then thin instruction files that point back to it. That keeps token overhead low while preserving full project memory when needed.</p>
86+
<div class="target-list">
87+
<div class="target-item">
88+
<strong>CHRONICLE.md</strong>
89+
Complete project memory grouped by tome. This is the single source of truth.
90+
</div>
91+
<div class="target-item">
92+
<strong>.github/copilot-instructions.md</strong>
93+
Lean GitHub Copilot adapter with project summary, security preamble, and chronicle reference.
94+
</div>
95+
<div class="target-item">
96+
<strong>AGENTS.md and CLAUDE.md</strong>
97+
Small tool-specific adapters for Codex, agent frameworks, and Claude.
98+
</div>
99+
<div class="target-item">
100+
<strong>.github/prompts/lore.prompt.md</strong>
101+
Enables the <code>/lore</code> prompt in Copilot Chat to pull chronicle context on demand.
102+
</div>
103+
<div class="target-item">
104+
<strong>Cursor, Gemini, Cline, Windsurf, Aider</strong>
105+
Optional adapters you can keep enabled or disable through <code>.lore/config.yaml</code>.
106+
</div>
107+
<div class="target-item">
108+
<strong>Atomic exports</strong>
109+
Regeneration is all-or-nothing so a crash mid-write does not leave partial instruction files behind.
110+
</div>
111+
</div>
112+
<div class="incantation"><span class="cmd">lore export</span><br><span class="cmd">lore export</span> <span class="arg">--format chronicle</span><br><span class="cmd">lore export</span> <span class="arg">--format prompt</span></div>
113+
</section>
114+
115+
<!-- ══ THE SCRYING GLASS ══ -->
116+
<section class="parchment">
117+
<h2><span class="rune">🜂</span> The Scrying Glass</h2>
118+
<p><strong>Lore</strong> ships a retro phosphor-green terminal browser — a full interactive TUI for browsing, searching, writing, and exporting your spellbook without leaving the command line.</p>
119+
<div class="incantation"><span class="cmd">lore ui</span></div>
120+
<ul class="spells" style="margin-top:1rem;">
121+
<li><strong>Search</strong> — Semantic search across all spells as you type</li>
122+
<li><strong>Browse</strong> — Navigate tomes and read entries in a split pane</li>
123+
<li><strong>Add</strong> — Write new spells directly from the interface</li>
124+
<li><strong>Export</strong> — Publish your Chronicle without leaving the TUI</li>
125+
<li><strong>Live reload</strong> — Watches <code>.lore/</code> on disk and updates instantly</li>
126+
</ul>
127+
<p style="margin-top:1rem;font-style:italic;color:var(--ink-faded);">Open it in a split pane while you code — your full project memory, always one glance away.</p>
128+
</section>
129+
130+
<!-- ══ RELICS AND DISTILLATION ══ -->
131+
<section class="parchment">
132+
<h2><span class="rune">🝮</span> Relics and Distillation</h2>
133+
<p>When things are moving too fast to curate, capture the raw artifact first. Relics preserve noisy context as-is, then let you distill the verified parts into proper spells later.</p>
134+
<div class="feature-grid">
135+
<div class="feature-card">
136+
<h3>Capture</h3>
137+
<p>Paste notes, import a file, snapshot a git diff, read from clipboard, or pipe in text from another tool.</p>
138+
<div class="incantation"><span class="cmd">lore relic capture</span><br><span class="cmd">lore relic capture</span> <span class="arg">--git-diff --title "Pre-deploy changes"</span></div>
139+
</div>
140+
<div class="feature-card">
141+
<h3>Distill</h3>
142+
<p>Walk the artifact spell by spell, choose the right tome, and keep a traceable link back to the source relic.</p>
143+
<div class="incantation"><span class="cmd">lore relic distill</span> <span class="arg">&lt;id&gt;</span></div>
144+
</div>
30145
</div>
31-
</div>
146+
</section>
32147

148+
<!-- ══ INCANTATIONS ══ -->
33149
<section class="parchment">
34-
<p class="lead">AI tools are stateless. They don't remember why you chose Postgres, what rules can't be bypassed, or the tradeoffs that already shaped your codebase. <strong>Lore</strong> gives them persistent memory — stored as plain YAML next to your code, no cloud, no API keys.</p>
150+
<h2><span class="rune">🜏</span> Incantations</h2>
151+
<h3>Install via Homebrew</h3>
152+
<div class="incantation"><span class="comment"># Bind the tap</span><br><span class="cmd">brew tap</span> <span class="arg">cptplastic/lore-book</span><br><span class="cmd">brew install</span> <span class="arg">lore-book</span></div>
153+
<h3>Install via pip</h3>
154+
<div class="incantation"><span class="cmd">pip install</span> <span class="arg">lore-book</span></div>
155+
<h3>Cast your first spells</h3>
156+
<div class="incantation"><span class="comment"># Record a decision</span><br><span class="cmd">lore add</span> <span class="arg">decisions</span> <span class="arg">"Use PostgreSQL — we need JSONB and row-level locking"</span><br><br><span class="comment"># Record a fact</span><br><span class="cmd">lore add</span> <span class="arg">facts</span> <span class="arg">"Auth service is the sole issuer of JWTs — never bypass it"</span><br><br><span class="comment"># Publish to all AI instruction files</span><br><span class="cmd">lore export</span></div>
157+
</section>
35158

36-
<h3>Record knowledge</h3>
37-
<div class="incantation">lore add decisions "Use Postgres for row-level locking"
38-
lore add facts "Auth service is the sole JWT issuer"</div>
159+
<!-- ══ TRUST MODEL ══ -->
160+
<section class="parchment">
161+
<h2><span class="rune">⟁</span> Trust Model</h2>
162+
<p>Lore is designed for layered trust. The chronicle should be reviewed, reliable memory. Raw intake belongs in relics first.</p>
163+
<ul class="spells">
164+
<li><strong>Shared trusted memory</strong> — Commit <code>CHRONICLE.md</code> when a fact or decision is reviewed and ready for everyone to inherit.</li>
165+
<li><strong>Local working memory</strong> — Keep generated adapter files local by default so teams can share the chronicle without forcing every personal wrapper into git.</li>
166+
<li><strong>Raw untrusted intake</strong> — Capture noisy sources with <code>lore relic capture</code>, then distill only verified points into spells.</li>
167+
<li><strong>Confidence signals</strong> — Use tomes and tags like <code>verified</code>, <code>needs-review</code>, or <code>deprecated</code> to express trust clearly.</li>
168+
<li><strong>Automated scoring</strong> — Recompute trust from git metadata with <code>lore trust refresh</code> and explain one score with <code>lore trust explain &lt;id&gt;</code>.</li>
169+
</ul>
170+
<div class="quote-block">Add candidate memory. Validate against code, tests, and docs. Export the chronicle. Commit only what you want every collaborator and every agent to inherit.</div>
171+
</section>
39172

40-
<h3>Search and export</h3>
41-
<div class="incantation">lore search "why postgres"
42-
lore export # → CHRONICLE.md</div>
173+
<!-- ══ HOOKS, DAEMON, HEALTH ══ -->
174+
<section class="parchment">
175+
<h2><span class="rune">☄</span> Hooks, Daemon, and Health</h2>
176+
<div class="feature-grid">
177+
<div class="feature-card">
178+
<h3>Git Hooks</h3>
179+
<p>Install a post-commit hook that can extract knowledge from commits and regenerate all export files automatically.</p>
180+
<div class="incantation"><span class="cmd">lore hook install</span><br><span class="cmd">lore extract</span> <span class="arg">--last 20</span></div>
181+
</div>
182+
<div class="feature-card">
183+
<h3>Background Daemon</h3>
184+
<p>Watch <code>.lore/</code> for changes and export the moment the memory store changes.</p>
185+
<div class="incantation"><span class="cmd">lore awaken</span><br><span class="cmd">lore awaken</span> <span class="arg">--background</span><br><span class="cmd">lore slumber</span></div>
186+
</div>
187+
<div class="feature-card">
188+
<h3>Health Check</h3>
189+
<p>Verify store readability, semantic search mode, endpoint reachability, and spell counts in one command.</p>
190+
<div class="incantation"><span class="cmd">lore doctor</span></div>
191+
</div>
192+
<div class="feature-card">
193+
<h3>Release Smoke Test</h3>
194+
<p>Run a clean isolated CLI smoke test before publishing to catch packaging and command regressions.</p>
195+
<div class="incantation"><span class="cmd">./smoke.sh</span></div>
196+
</div>
197+
</div>
198+
</section>
43199

44-
<p class="note">CHRONICLE.md is automatically wired into Copilot, Claude, Cursor, and AGENTS instruction files on export.</p>
200+
<!-- ══ GRIMOIRE OF COMMANDS ══ -->
201+
<section class="parchment">
202+
<h2><span class="rune">📖</span> Grimoire of Commands</h2>
203+
<div class="command-columns">
204+
<div class="command-item">
205+
<strong>Store</strong>
206+
<p><code>lore onboard</code>, <code>lore init</code>, <code>lore add</code>, <code>lore list</code>, <code>lore remove</code></p>
207+
</div>
208+
<div class="command-item">
209+
<strong>Search</strong>
210+
<p><code>lore search &lt;query&gt;</code>, <code>lore index rebuild</code>, <code>lore setup semantic</code></p>
211+
</div>
212+
<div class="command-item">
213+
<strong>Relics</strong>
214+
<p><code>lore relic capture</code>, <code>lore relic list</code>, <code>lore relic view</code>, <code>lore relic distill</code></p>
215+
</div>
216+
<div class="command-item">
217+
<strong>Publishing</strong>
218+
<p><code>lore export</code>, <code>lore export --format prompt</code>, <code>lore config &lt;key&gt; &lt;value&gt;</code></p>
219+
</div>
220+
<div class="command-item">
221+
<strong>Trust and Security</strong>
222+
<p><code>lore security</code>, <code>lore trust refresh</code>, <code>lore trust explain &lt;id&gt;</code></p>
223+
</div>
224+
<div class="command-item">
225+
<strong>Automation</strong>
226+
<p><code>lore hook install</code>, <code>lore awaken</code>, <code>lore slumber</code>, <code>lore doctor</code>, <code>lore ui</code></p>
227+
</div>
228+
</div>
229+
<div class="links">
230+
<a class="link-rune" href="https://github.com/CptPlastic/lore-book">✦ Source Repository</a>
231+
<a class="link-rune" href="https://pypi.org/project/lore-book/">⚜ PyPI Package</a>
232+
</div>
45233
</section>
46234

47-
<footer class="site-footer">
48-
<a href="https://github.com/CptPlastic/lore-book">Source</a>
49-
<span>·</span>
50-
<a href="https://pypi.org/project/lore-book/">PyPI</a>
51-
<span>·</span>
52-
<span>FSL-1.1-MIT</span>
53-
</footer>
54-
</main>
235+
<div class="divider">— ✦ — ✦ — ✦ —</div>
236+
237+
<footer>LORE &nbsp;·&nbsp; CANONICAL DOCUMENTATION &nbsp;·&nbsp; FSL-1.1-MIT</footer>
238+
239+
</div>
55240

56241
<script src="assets/javascripts/homebrew-legacy.js"></script>
57242
</body>

0 commit comments

Comments
 (0)