Files
claude-howto/scripts
Luong NGUYEN 3557d791f5 feat(scripts): add static website generator from markdown sources (#85) (#121)
* feat(scripts): add static website generator from markdown sources (#85)

Generate an elegant, mobile-friendly static site from the existing
tutorial markdown files. The markdown remains the single source of
truth — `scripts/build_website.py` reads from the same `.md` files the
EPUB builder uses, rewrites cross-references to site URLs, and rewrites
references to non-markdown repo files (`.json`, `.sh`, `.py`) to
GitHub blob URLs so users can jump to the source on github.com.

Highlights:
- Reuses the chapter ordering convention from `build_epub.py`
- Anchor algorithm mirrors `check_cross_references.heading_to_anchor`
  for parity with the validator
- Mermaid renders client-side via `mermaid.js` (no pre-render step)
- Tailwind CSS via CDN; light/dark theme toggle; sidebar nav; in-page
  TOC; prev/next page navigation; mobile responsive
- 27 unit + smoke tests covering anchors, link rewriting (including
  `<source srcset>` inside `<picture>`), Mermaid handling, and a full
  end-to-end build
- GitHub Pages deploy workflow at `.github/workflows/pages.yml`

Closes #85

* fix(website): use relative URLs in sidebar nav and avoid INDEX.html collision

Two bugs found by local browser dogfooding:

1. **Sidebar nav broke from deep pages.** `build_navigation` emitted raw
   `output_url` values (site-root-relative) which made every sidebar link
   404 from any page below the root. Moved the call inside the per-page
   render loop so each page gets nav links computed relative to its own
   URL — `01-slash-commands/index.html` from the root, `../01-slash-commands/...`
   from a depth-1 page, `../../01-slash-commands/...` from depth-2.

2. **`INDEX.md` overwrote `index.html`.** On case-insensitive filesystems
   (macOS/Windows), `INDEX.html` and `index.html` are the same file, so
   `INDEX.md` clobbered the rendered `README.md`. Added `_disambiguate_url`
   that detects case-insensitive collisions and suffixes the colliding
   page with its source stem (`INDEX-index.html`).

Added 2 tests; full suite stays at 83 passed.

* fix(scripts): skip URLs with port in localhost/127.0.0.1 skip list

`check_links.is_skipped()` did an exact-match comparison against the
host, so `http://localhost:8080` (used in scripts/README.md as a preview
example) was not skipped and CI's link check tried to fetch it, which
fails on the GitHub runner. Strip the port before comparing.

* chore(scripts): drop vestigial mypy ignore_errors for build_website

The override silenced all mypy errors for build_website, making the
"mypy: clean" claim technically vacuous. Removing it shows mypy is
actually clean — 0 issues on build_website after type annotations
were added during PR review.

* feat(website): self-host Tailwind, Mermaid, and Inter fonts

Drop all third-party CDN dependencies from rendered pages. The site
previously loaded Tailwind from cdn.tailwindcss.com (Play CDN — JIT
compile in browser, marked not-for-production), Mermaid from
cdn.jsdelivr.net, and Inter/JetBrains Mono from fonts.googleapis.com.

Replace with a vendored toolchain:

- scripts/vendor_assets.py downloads the Tailwind standalone CLI
  (Go binary, no Node toolchain), Mermaid's UMD bundle, and Google
  Fonts CSS + WOFF2 files. Cached under scripts/.vendor-cache/
  (gitignored), refetched only when missing.
- Tailwind compiles a per-build site/assets/tailwind.css with only
  the utility classes actually used by the rendered HTML.
- Mermaid and font files land in site/assets/vendor/ and load via
  relative URLs.
- Tailwind config + entry CSS live in scripts/website_templates/
  alongside the Jinja template.
- build_website grows a skip_vendor flag so the smoke test runs
  offline.
- pre-commit mypy hook gets types-Markdown so it can resolve the
  same imports as the project venv.

Verification: 86/86 pytest pass, ruff/mypy/bandit clean, full
build produces a working site with zero external requests (verified
in a headless browser — no console errors, no failed network calls,
Mermaid diagrams render).

* fix(website): use tree URLs for repo directory links (#85)

* fix(website): include additional top-level docs (#85)
2026-05-15 08:55:29 +02:00
..

Claude How To

Build Scripts

This directory contains two generators that turn the tutorial markdown files into distributable formats:

Both treat the .md files as the single source of truth — re-run the relevant script after editing markdown to regenerate the output.


EPUB Builder Script

Build an EPUB ebook from the Claude How-To markdown files.

Features

  • Organizes chapters by folder structure (01-slash-commands, 02-memory, etc.)
  • Renders Mermaid diagrams as PNG images via Kroki.io API
  • Async concurrent fetching - renders all diagrams in parallel
  • Generates a cover image from the project logo
  • Converts internal markdown links to EPUB chapter references
  • Strict error mode - fails if any diagram cannot be rendered

Requirements

  • Python 3.10+
  • uv
  • Internet connection for Mermaid diagram rendering

Quick Start

# Simplest way - uv handles everything
uv run scripts/build_epub.py

Development Setup

# Create virtual environment
uv venv

# Activate and install dependencies
source .venv/bin/activate
uv pip install -r requirements-dev.txt

# Run tests
pytest scripts/tests/ -v

# Run the script
python scripts/build_epub.py

Command-Line Options

usage: build_epub.py [-h] [--root ROOT] [--output OUTPUT] [--verbose]
                     [--timeout TIMEOUT] [--max-concurrent MAX_CONCURRENT]

options:
  -h, --help            show this help message and exit
  --root, -r ROOT       Root directory (default: repo root)
  --output, -o OUTPUT   Output path (default: claude-howto-guide.epub)
  --verbose, -v         Enable verbose logging
  --timeout TIMEOUT     API timeout in seconds (default: 30)
  --max-concurrent N    Max concurrent requests (default: 10)

Examples

# Build with verbose output
uv run scripts/build_epub.py --verbose

# Custom output location
uv run scripts/build_epub.py --output ~/Desktop/claude-guide.epub

# Limit concurrent requests (if rate-limited)
uv run scripts/build_epub.py --max-concurrent 5

Output

Creates claude-howto-guide.epub in the repository root directory.

The EPUB includes:

  • Cover image with project logo
  • Table of contents with nested sections
  • All markdown content converted to EPUB-compatible HTML
  • Mermaid diagrams rendered as PNG images

Running Tests

# With virtual environment
source .venv/bin/activate
pytest scripts/tests/ -v

# Or with uv directly
uv run --with pytest --with pytest-asyncio \
    --with ebooklib --with markdown --with beautifulsoup4 \
    --with httpx --with pillow --with tenacity \
    pytest scripts/tests/ -v

Dependencies

Managed via PEP 723 inline script metadata:

Package Purpose
ebooklib EPUB generation
markdown Markdown to HTML conversion
beautifulsoup4 HTML parsing
httpx Async HTTP client
pillow Cover image generation
tenacity Retry logic

Troubleshooting

Build fails with network error: Check internet connectivity and Kroki.io status. Try --timeout 60.

Rate limiting: Reduce concurrent requests with --max-concurrent 3.

Missing logo: The script generates a text-only cover if claude-howto-logo.png is not found.


Static Website Builder

Generate an elegant, mobile-friendly static website from the same markdown files used by the EPUB build. The website is the rendered view; the .md files remain the single source of truth.

Features

  • One HTML page per markdown source — internal .md links are rewritten to the corresponding pages on the site
  • References to non-markdown repo files (templates, scripts, JSON) become GitHub blob URLs that open the source on github.com
  • Mermaid diagrams render client-side via mermaid.min.js, served from the built site (no CDN at runtime)
  • Tailwind CSS compiled with the standalone CLI (Go binary, no Node.js) and served from the built site — responsive layout with sidebar nav, in-page TOC, dark mode toggle, and prev/next page navigation
  • Inter + JetBrains Mono fonts are self-hosted alongside the CSS — no third-party requests at page load
  • Mirrors the EPUB curriculum order (01-10- plus top-level docs)
  • Hostable as plain static files — designed to deploy to GitHub Pages

Quick Start

# Build the English website into ./site/
uv run scripts/build_website.py

# Preview locally
python -m http.server --directory site 8080
# then open http://localhost:8080

Command-Line Options

usage: build_website.py [-h] [--root ROOT] [--output OUTPUT]
                        [--lang {en,vi,zh,ja,uk}] [--repo-url REPO_URL]
                        [--branch BRANCH] [--verbose]

options:
  --root, -r ROOT       Source root (default: repo root)
  --output, -o OUTPUT   Output directory (default: <repo>/site)
  --lang LANG           Language to build: en | vi | zh | ja | uk
  --repo-url URL        GitHub repo for blob links (default: luongnv89/claude-howto)
  --branch BRANCH       Branch for blob links (default: main)
  --verbose, -v         Enable verbose logging

GitHub Pages Deploy

The repo ships a workflow at .github/workflows/pages.yml that builds the site on every push to main (when any .md or generator file changes) and publishes via actions/deploy-pages. Enable GitHub Pages in repo settings with Source: GitHub Actions to activate it.

Architecture

build_website.py reuses the chapter-ordering logic from build_epub.py and ships HTML templates under scripts/website_templates/:

  • page.html.j2 — per-page Jinja2 template with sidebar nav, TOC, prev/next
  • tailwind.config.js, tailwind.input.css — config + entry CSS for the Tailwind standalone CLI; the CLI scans the built HTML and produces site/assets/tailwind.css with just the utilities actually used
  • site.css — small layer of site-specific styles plus Pygments theme

The Tailwind CLI binary, Mermaid bundle, and font files are downloaded on first build into scripts/.vendor-cache/ (gitignored) — see scripts/vendor_assets.py.

Heading anchors are generated using the exact algorithm in check_cross_references.heading_to_anchor, so #anchor links validated by the pre-commit hook resolve correctly on the rendered site.