Markdown-driven wiki / multi-page site extension for lobster.js.
lobster-wiki turns a folder of Markdown files into a wiki-style site — sidebar navigation, page routing, auto-generated table of contents — with almost no code beyond the Markdown itself.
Create a project with this structure:
my-wiki/
index.html
wiki.config.json
nav.md
content/
intro.md
guide.md
Write wiki.config.json:
{
"title": "My Wiki",
"navigation": "./nav.md",
"footer": "./footer.md",
"defaultPage": "intro",
"tableOfContents": true
}Write nav.md as a nested list with ?page= links:
- Getting Started
- [Introduction](?page=intro)
- [Guide](?page=guide)Write a minimal index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Wiki</title>
<link rel="stylesheet" href="https://hacknock.github.io/lobster-wiki/style.css" />
</head>
<body>
<script type="module">
import { initWiki } from "https://hacknock.github.io/lobster-wiki/lobster-wiki.js";
initWiki("./wiki.config.json");
</script>
</body>
</html>Write your content pages in content/ and serve with any static file server.
- SPA routing —
?page=slugquery parameters with browser history support - Sidebar navigation — loaded from a Markdown file (
nav.md) with active link highlighting - Auto-generated table of contents — builds an "On this page" section from headings (h2-h4)
- Shared header / footer — specify via
.mdfile path in config - Hash routing — optional
"routing": "hash"mode forfile://protocol compatibility - Responsive — sidebar collapses on mobile, TOC hides on narrow screens
- CSS-first — wiki layout uses
lbw-*classes; content uses lobster.jslbs-*classes
All options are defined in wiki.config.json:
| Key | Description | Default |
|---|---|---|
title |
Site title (used in <title>) |
— |
navigation |
Path to sidebar navigation Markdown file (required) | — |
header |
Path to header Markdown file | — |
footer |
Path to footer Markdown file | — |
contentDir |
Directory containing page Markdown files | ./content/ |
defaultPage |
Default page slug when no ?page= is specified |
intro |
tableOfContents |
Enable auto-generated table of contents (true or { "minLevel": 2, "maxLevel": 4 }) |
false |
routing |
Routing mode: query or hash |
query |
lobsterUrl |
URL to lobster.js | GitHub Pages CDN |
pnpm install
pnpm run build # Build dist/lobster-wiki.js
pnpm run build:docs # Build and copy to docs/ for GitHub PagesMIT