llmd 0.1.1 → 0.2.0

package/README.md

@@ -2,23 +2,10 @@
 
 **Serve Markdown as beautiful HTML. Instantly.**
 
-A zero-config CLI tool for viewing Markdown files in your browser with syntax highlighting, live reload, and a clean interface. Built for developers reviewing LLM-generated documentation.
-
-## Features
-
-- **Zero config** - Point at a directory and go
-- **Syntax highlighting** - Powered by Shiki
-- **Live reload** - Watch mode reloads on file changes
-- **Copy buttons** - One-click code copying
-- **Dark/light themes** - With 3 font options
-- **Fast** - Built with Bun, instant startup
-- **Sidebar navigation** - Browse files with directory structure
-- **Table of contents** - Auto-generated from headings
+A minimal CLI tool for viewing Markdown files in your browser with syntax highlighting, live reload, and a clean interface. Built for developers reviewing LLM-generated documentation.
 
 ## Installation
 
-### npm (Recommended)
-
 ```bash
 npm install -g llmd
 ```
@@ -31,173 +18,60 @@ npx llmd
 
 Requires Node.js 22 or later.
 
-### From Source
+## Quick Start
 
-```bash
-git clone https://github.com/pbzona/llmd.git
-cd llmd
-bun install
-bun run build:npm
-npm install -g .
-```
-
-## Usage
+Want to see what llmd can do? **Try it on its own documentation:**
 
 ```bash
-# Serve current directory
-llmd
-
-# Serve specific directory
-llmd ./docs
-
-# Dark mode with live reload
-llmd ./docs --theme dark --watch
+# Install llmd
+npm install -g llmd
 
-# Custom port
-llmd ./docs --port 8080
+# View the documentation
+llmd docs
 ```
 
-## Font Combinations
+That's it! The docs will open in your browser. Click through the sidebar to explore.
 
-llmd includes 9 built-in font combinations:
-
-- **serif** - System serif fonts (Georgia, Times)
-- **sans** - System sans-serif fonts (default)
-- **mono** - System monospace fonts
-- **classic** - Baskerville headings + Geist body
-- **future** - Space Mono headings + Space Grotesk body
-- **modern** - Inter throughout + JetBrains Mono
-- **artsy** - Playfair Display + Fira Code
-- **literary** - Spectral headings + Newsreader body
-- **editorial** - Bitter headings + Lora body
-
-All custom fonts are loaded from Google Fonts CDN for fast, reliable delivery.
-
-### Custom Fonts
-
-Create custom font combinations in your `themes.json` config file.
-
-**Location:** `~/.config/llmd/themes.json` (or `$XDG_CONFIG_HOME/llmd/themes.json`)
-
-**Simple Example (Auto-loaded from Google Fonts):**
+## Features
 
-```json
-{
-  "fontThemes": {
-    "myfont": {
-      "heading": "Montserrat, sans-serif",
-      "body": "Open Sans, sans-serif",
-      "code": "Source Code Pro, monospace"
-    }
-  }
-}
-```
+- **Simple setup** - Point at a directory and go
+- **Syntax highlighting** - Powered by Shiki
+- **Live reload** - Watch mode reloads on file changes
+- **Copy buttons** - One-click code copying
+- **Dark/light themes** - With 9 font combinations
+- **Fast** - Built with Bun, instant startup
+- **Sidebar navigation** - Browse files with directory structure
+- **Table of contents** - Auto-generated from headings
+- **Usage Analytics** - Track which docs you view most (local-only, opt-in)
 
-Google Fonts are **loaded automatically** with weights 400 and 700. Just specify the font family names - no need to construct Google Fonts URLs manually!
-
-**Advanced Example (Custom Weights/Styles):**
-
-```json
-{
-  "fontThemes": {
-    "custom": {
-      "heading": "Poppins, sans-serif",
-      "body": "Inter, sans-serif",
-      "code": "Fira Code, monospace",
-      "googleFontsUrl": "https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Inter:wght@300;400;500&family=Fira+Code:wght@400;500&display=swap"
-    }
-  }
-}
-```
+## Documentation
 
-Use `googleFontsUrl` only if you need specific weights (like 300, 500, 600) or styles (italic, etc.). Get custom URLs from [Google Fonts](https://fonts.google.com).
+- [Installation](./docs/installation.md) - Installation methods
+- [Usage](./docs/usage.md) - Command-line options and examples
+- [Themes](./docs/themes.md) - Built-in and custom color themes
+- [Fonts](./docs/fonts.md) - Built-in and custom font combinations
+- [Analytics](./docs/analytics.md) - Local usage tracking
 
-**Usage:**
+## Basic Usage
 
 ```bash
-llmd --fonts myfont
-```
-
-**Requirements:**
-
-- `heading`, `body`, and `code` properties are required
-- Font names should include CSS fallbacks (e.g., `"Roboto, sans-serif"`)
-- System fonts (Arial, Georgia, etc.) don't load from Google Fonts
-- Invalid font names will show helpful errors listing all available fonts
-
-## Color Themes
-
-llmd includes 6 built-in color themes:
-
-- **dark** - Default dark theme (default)
-- **light** - Warm light theme
-- **nord** - Nord-inspired cool theme
-- **dracula** - Dracula-inspired purple theme
-- **solarized** - Solarized Light theme
-- **monokai** - Monokai-inspired theme
-
-### Custom Themes
+# View llmd documentation
+llmd docs
 
-Create custom color themes in your `themes.json` config file.
-
-**Location:** `~/.config/llmd/themes.json` (or `$XDG_CONFIG_HOME/llmd/themes.json`)
-
-**Format:**
-
-```json
-{
-  "colorThemes": {
-    "mytheme": {
-      "bg": "#1a1a1a",
-      "fg": "#e0e0e0",
-      "border": "#333",
-      "hover": "#2a2a2a",
-      "accent": "#4a9eff",
-      "codeBg": "#2d2d2d",
-      "sidebarBg": "#151515",
-      "folderIcon": "#a78bfa",
-      "fileIcon": "#fbbf24"
-    }
-  }
-}
-```
+# Serve current directory
+llmd
 
-**Unified Config:**
-You can combine both color themes and font themes in a single file:
-
-```json
-{
-  "colorThemes": {
-    "mytheme": { ... }
-  },
-  "fontThemes": {
-    "myfont": { ... }
-  }
-}
-```
+# Serve specific directory
+llmd ./docs
 
-**Usage:**
+# Dark mode with live reload
+llmd ./docs --theme dark --watch
 
-```bash
-llmd --theme mytheme --fonts myfont
+# Open directly to analytics
+llmd analytics
 ```
 
-If a theme or font is not found, llmd will list all available options.
-
-**Note:** The old flat format for color themes (without `colorThemes` key) is still supported for backward compatibility.
-
-## Options
-
-| Flag                   | Description                                                                                                | Default      |
-| ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------ |
-| `--port <number>`      | Port (0 = random)                                                                                          | `0` (random) |
-| `--host <string>`      | Host interface                                                                                             | `localhost`  |
-| `--theme <name>`       | Color theme: `dark`, `light`, `nord`, `dracula`, `solarized`, `monokai`, or custom                         | `dark`       |
-| `--fonts <name>`       | Font combination: `serif`, `sans`, `mono`, `classic`, `future`, `modern`, `artsy`, `literary`, `editorial` | `sans`       |
-| `--open / --no-open`   | Auto-open browser                                                                                          | `--open`     |
-| `--watch / --no-watch` | Live reload on changes                                                                                     | `--no-watch` |
-| `-h, --help`           | Show help                                                                                                  |              |
-| `--version`            | Show version                                                                                               |              |
+See [Usage](./docs/usage.md) for all options.
 
 ## Development
 
@@ -220,7 +94,7 @@ bun run build
 - **Runtime**: Bun
 - **Markdown**: marked (GFM support)
 - **Highlighting**: Shiki (VS Code themes)
-- **Server**: Bun.serve() with WebSocket
+- **Server**: Node.js http + ws
 - **Bundler**: Bun's built-in bundler
 
 ## License

package/dist/client.js

@@ -1 +1 @@
-var B=()=>{let t=document.querySelectorAll(".dir-label");for(let C of Array.from(t)){let p=C,y=document.createElement("span");y.className="dir-chevron",y.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>',p.insertBefore(y,p.firstChild),p.style.cursor="pointer",p.addEventListener("click",(m)=>{m.preventDefault();let o=p.closest(".dir-item");if(o)o.classList.toggle("collapsed")})}},M=()=>{let t=document.querySelector(".toc");if(!t)return;let C=t.querySelector("h3");if(!C)return;let p=document.createElement("span");p.className="toc-chevron",p.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>',C.style.cursor="pointer",C.insertBefore(p,C.firstChild),t.classList.add("collapsed"),C.addEventListener("click",()=>{t.classList.toggle("collapsed")})};if(typeof window<"u")window.addEventListener("DOMContentLoaded",()=>{B(),M()});var q=()=>{document.querySelectorAll("pre code").forEach((t)=>{let C=t.parentElement;if(!C)return;if(C.querySelector(".copy-button"))return;let p=document.createElement("button");p.className="copy-button",p.textContent="Copy",p.setAttribute("aria-label","Copy code to clipboard"),p.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(t.textContent||""),p.textContent="Copied!",p.classList.add("copied"),setTimeout(()=>{p.textContent="Copy",p.classList.remove("copied")},2000)}catch(y){console.error("Failed to copy:",y),p.textContent="Failed",setTimeout(()=>{p.textContent="Copy"},2000)}}),C.appendChild(p)})};if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",q);else q();var O=(t)=>{let p=`${window.location.protocol==="https:"?"wss:":"ws:"}//${window.location.host}/_ws`,y=null,m=null,o=()=>{y=new WebSocket(p),y.addEventListener("open",()=>{console.log("[llmd] Connected to file watcher"),y?.send(JSON.stringify({type:"watch",file:t}))}),y.addEventListener("message",(E)=>{try{let f=JSON.parse(E.data);if(f.type==="reload"&&f.file===t)console.log(`[llmd] File changed: ${t}, reloading...`),window.location.reload()}catch(f){console.error("[llmd] Failed to parse message:",f)}}),y.addEventListener("close",()=>{console.log("[llmd] Disconnected from file watcher"),m=window.setTimeout(()=>{console.log("[llmd] Reconnecting..."),o()},2000)}),y.addEventListener("error",(E)=>{console.error("[llmd] WebSocket error:",E),y?.close()})};o(),window.addEventListener("beforeunload",()=>{if(m)clearTimeout(m);y?.close()})};window.connectFileWatcher=O;var k=()=>{let t=document.querySelector(".sidebar");if(!t)return;let C=document.createElement("div");C.className="sidebar-resize-handle",t.appendChild(C);let p=!1,y=0,m=0,o=(u)=>{p=!0,y=u.clientX,m=t.offsetWidth,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",u.preventDefault()},E=(u)=>{if(!p)return;let A=u.clientX-y,j=m+A,x=Math.max(200,Math.min(600,j));t.style.width=`${x}px`,localStorage.setItem("llmd-sidebar-width",x.toString())},f=()=>{if(!p)return;p=!1,document.body.style.cursor="",document.body.style.userSelect=""};C.addEventListener("mousedown",o),document.addEventListener("mousemove",E),document.addEventListener("mouseup",f);let L=localStorage.getItem("llmd-sidebar-width");if(L){let u=Number.parseInt(L,10);if(u>=200&&u<=600)t.style.width=`${u}px`}};if(typeof window<"u")window.addEventListener("DOMContentLoaded",()=>{k()});console.log("[llmd] Client initialized");
+var Q=()=>{let y=document.querySelectorAll(".dir-label");for(let m of Array.from(y)){let C=m,L=document.createElement("span");L.className="dir-chevron",L.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>',C.insertBefore(L,C.firstChild),C.style.cursor="pointer",C.addEventListener("click",(q)=>{q.preventDefault();let B=C.closest(".dir-item");if(B)B.classList.toggle("collapsed")})}},Y=()=>{let y=document.querySelector(".toc");if(!y)return;let m=y.querySelector("h3");if(!m)return;let C=document.createElement("span");C.className="toc-chevron",C.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>',m.style.cursor="pointer",m.insertBefore(C,m.firstChild),y.classList.add("collapsed"),m.addEventListener("click",()=>{y.classList.toggle("collapsed")})};if(typeof window<"u")window.addEventListener("DOMContentLoaded",()=>{Q(),Y()});var u=()=>{for(let y of Array.from(document.querySelectorAll("pre code"))){let m=y.parentElement;if(!m)continue;if(m.querySelector(".copy-button"))continue;let C=document.createElement("button");C.className="copy-button",C.textContent="Copy",C.setAttribute("aria-label","Copy code to clipboard"),C.addEventListener("click",async()=>{try{await navigator.clipboard.writeText(y.textContent||""),C.textContent="Copied!",C.classList.add("copied"),setTimeout(()=>{C.textContent="Copy",C.classList.remove("copied")},2000)}catch(L){console.error("Failed to copy:",L),C.textContent="Failed",setTimeout(()=>{C.textContent="Copy"},2000)}}),m.appendChild(C)}};if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",u);else u();var Z=(y)=>{let C=`${window.location.protocol==="https:"?"wss:":"ws:"}//${window.location.host}/_ws`,L=null,q=null,B=()=>{L=new WebSocket(C),L.addEventListener("open",()=>{console.log("[llmd] Connected to file watcher"),L?.send(JSON.stringify({type:"watch",file:y}))}),L.addEventListener("message",(M)=>{try{let x=JSON.parse(M.data);if(x.type==="reload"&&x.file===y)console.log(`[llmd] File changed: ${y}, reloading...`),window.location.reload()}catch(x){console.error("[llmd] Failed to parse message:",x)}}),L.addEventListener("close",()=>{console.log("[llmd] Disconnected from file watcher"),q=window.setTimeout(()=>{console.log("[llmd] Reconnecting..."),B()},2000)}),L.addEventListener("error",(M)=>{console.error("[llmd] WebSocket error:",M),L?.close()})};B(),window.addEventListener("beforeunload",()=>{if(q)clearTimeout(q);L?.close()})};window.connectFileWatcher=Z;var _=()=>{let y=document.querySelector(".sidebar");if(!y)return;let m=document.createElement("div");m.className="sidebar-resize-handle",y.appendChild(m);let C=!1,L=0,q=0,B=(A)=>{C=!0,L=A.clientX,q=y.offsetWidth,document.body.style.cursor="ew-resize",document.body.style.userSelect="none",A.preventDefault()},M=(A)=>{if(!C)return;let K=A.clientX-L,O=q+K,k=Math.max(200,Math.min(600,O));y.style.width=`${k}px`,localStorage.setItem("llmd-sidebar-width",k.toString())},x=()=>{if(!C)return;C=!1,document.body.style.cursor="",document.body.style.userSelect=""};m.addEventListener("mousedown",B),document.addEventListener("mousemove",M),document.addEventListener("mouseup",x);let j=localStorage.getItem("llmd-sidebar-width");if(j){let A=Number.parseInt(j,10);if(A>=200&&A<=600)y.style.width=`${A}px`}};if(typeof window<"u")window.addEventListener("DOMContentLoaded",()=>{_()});var E=(y,m,C)=>{fetch("/api/events",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({type:y,path:m,resourceType:C})}).catch(()=>{})},G=(y)=>{E("open",y,"dir")},J=(y)=>{E("view",y,"file")};window.trackDirectoryOpen=G;window.trackFileView=J;console.log("[llmd] Client initialized");