Skip to content

Local DE Coach v0.6.2 — Rebuilt docs UI with Markdown rendering

Choose a tag to compare

View all tags
@bif26 bif26 released this 13 Sep 03:24
· 11 commits to main since this release
v0.6.2
3bbddcf

🎨 Complete docs UI rewrite

The docs site (docs/index.html) has been completely rebuilt. It now renders the Markdown files at runtime, with the PDF cover page as the home page.

What's new

Cover page (home) — based on the PDF first page:

  • Hero section with gradient background, kicker, title, subtitle, summary
  • 4 stat cards: <2GB RAM, A1–C1 levels, 5 layers, ≤2× latency
  • 6 feature cards: dual-model ASR, 5-layer scorer, SRS, SQLite, controller, auto-recovery
  • Charts (rendered with Chart.js):
    • RAM budget bar chart (Controller / Cold / Scoring / Live / 2 GB ceiling)
    • Request flow latency chart (Preprocess / Wav2Vec2 / Score / SQLite / Response)
  • Quick start code block
  • Chapter navigation guide

Renders Markdown at runtime:

  • Uses marked.js (CDN) to parse .md files from docs/markdown/
  • Uses highlight.js (CDN) for syntax highlighting in code blocks
  • Uses Chart.js (CDN) for the charts on the cover page
  • Fetches .md files via fetch() — no hardcoded content
  • Markdown files are now the single source of truth
  • Edit a .md file → reload page → see changes (no rebuild needed)

Better UI/UX:

  • Left sidebar: 8 sections (Start / Overview / Architecture / Pipeline / Scoring / Persistence / API / Operations / Roadmap)
  • Right TOC: auto-generated from h2/h3 headings, scroll-spy highlighting
  • Search: ⌘K shortcut, searches across all 19 Markdown files client-side
  • Dark/light theme toggle (persisted in localStorage)
  • Mobile responsive (collapsible sidebar)
  • Loading spinner while fetching Markdown
  • Pagination (prev/next chapter) at bottom of each chapter
  • Syntax-highlighted code blocks (Python, SQL, bash, JSON)
  • Properly rendered Markdown tables with hover states

Architecture

Browser → docs/index.html
           ├─ loads marked.js + highlight.js + Chart.js (CDN)
           ├─ docs/assets/css/docs.css (styling)
           ├─ docs/assets/js/docs-app.js (app logic)
           │
           ├─ fetch('docs/markdown/01-executive-summary.md')
           │  → marked.parse() → HTML
           │  → highlight.js for code blocks
           │  → build TOC from headings
           │
           └─ Cover page (home) with charts

Three documentation formats

Format Location Best for
Markdown (source of truth) docs/markdown/ Editing, GitHub browsing
Web UI (renders Markdown) docs/index.html Interactive reading with charts/search/TOC
PDF docs/architecture.pdf Printing, offline

How to view

If you've enabled GitHub Pages (Settings → Pages → main / docs folder):

https://bif26.github.io/Local_DE_Coach/

The site loads instantly, fetches the Markdown files, and renders them with syntax highlighting + charts.

Full changelog: see git log v0.6.1..v0.6.2

Assets 2
Loading