A personal knowledge base for deep reference documents. Each block is a detailed writeup on a specific topic with sources, code examples, and real-world use cases. Built with vanilla JS and Vite β no framework needed.
Features:
- Dark/light theme with system preference detection
- "Share with Claude" button exports structured markdown for AI conversations
- Interactive knowledge graph with d3-force layout, inspiration from uorb_graph
- Responsive design with manga-inspired aesthetic
- Claude Code skill (
/knowledge-block) to automate block creation from URLs or files
Interactive topic graph with connections
git clone https://github.com/YOUR_USERNAME/knowledge-blocks.git
cd knowledge-blocks
npm install
npm run devOpen http://localhost:3000 to see the block index.
If you have Claude Code installed:
/knowledge-block https://docs.example.com/topic-you-want-to-document
The skill reads the source, creates all files, and verifies the build.
What I do: I ask claude questions and let it generate a html visual guide / artifact which I would then parse the path of the html into the skill.
-
Create the guide content at
public/resources/my-topic.htmlusing the HTML class structure (seepublic/resources/example.htmlfor the full template). CLAUDE ARTIFACTS ARE PERFECT FOR THIS! -
Create the entry page at
blocks/my-topic.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>My Topic | Knowledge Blocks</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Caveat:wght@400;600&family=Inter:wght@400;500;600;700&family=Nunito:wght@400;600;700&family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;700&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet"> </head> <body> <nav class="nav" id="nav"></nav> <main id="blockDetail" data-block-slug="my-topic"></main> <footer class="footer" id="footer"></footer> <script type="module" src="../src/pages/block-detail.js"></script> </body> </html>
- Register the block in
src/shared/data.js:
{ slug: 'my-topic', title: 'My Topic', icon: 'π§', description: 'One-line summary of what this block covers', tags: ['tag1', 'tag2'], sources: [ { title: 'Source Name', url: 'https://example.com' } ] }
- Add to Vite config in
vite.config.js:
'block-my-topic': resolve(root, 'blocks/my-topic.html'),
- Run
npm run buildto verify.
Resource files use these CSS classes (no inline styles):
| Class | Purpose |
|---|---|
.hero |
Top banner with h1 and .subtitle |
.container |
Content wrapper (max-width 1200px) |
.nav |
Internal navigation pills |
.section |
Major topic section |
.section-header |
Contains .section-number span + h2 |
.prose |
Body text paragraphs |
.card-grid + .card |
Side-by-side concept cards |
.cfg + .cfg-head + pre |
Code/config blocks with label |
.tip |
Callout box with advice |
details + summary |
Collapsible sections |
.divider |
Visual separator |
.uc |
Use case block with .uc-head, .uc-body |
.tag |
Tag pills (.t1 through .t6 for colors) |
Syntax highlighting in <pre> tags:
<span class="c">β comment (muted)<span class="k">β keyword (purple)<span class="s">β string (green)<span class="n">β number (gold)<span class="b">β boolean (pink)
Edit CSS custom properties in src/styles/shared.css under :root:
--color-primary: #7C3AED; /* purple β headings, links, accents */ --color-secondary: #FBBF24; /* gold β highlights, gradients */ --color-accent: #EC4899; /* pink β badges, emphasis */ --color-background: #FDF8F0; /* cream β page background */
- Logo icon and text:
src/shared/navigation.js(line 34-35) - Footer text:
src/shared/footer.js - Page title:
index.html
Google Fonts loaded in HTML <head>. Change the import URL and update --font-heading, --font-body, --font-accent in shared.css.
npm run build
The dist/ folder is a static site. Deploy to GitHub Pages, Netlify, Vercel, or any static host.
MIT