[INFO] cloning repository https://github.com/paradise-runner/glowdoc
[INFO] running `Command { std: "git" "-c" "credential.helper=" "-c" "credential.helper=/workspace/cargo-home/bin/git-credential-null" "clone" "--bare" "https://github.com/paradise-runner/glowdoc" "/workspace/cache/git-repos/https%3A%2F%2Fgithub.com%2Fparadise-runner%2Fglowdoc", kill_on_drop: false }`
[INFO] [stderr] Cloning into bare repository '/workspace/cache/git-repos/https%3A%2F%2Fgithub.com%2Fparadise-runner%2Fglowdoc'...
[INFO] running `Command { std: "git" "rev-parse" "HEAD", kill_on_drop: false }`
[INFO] [stdout] 78933245a4b5313f2bdd0e3acfe668e2cd9199d5
[INFO] testing paradise-runner/glowdoc against try#bd7d74411512a3dd3b35d2f699c51dd2557c7e7e+cargoflags=-Zbuild-dir-new-layout for pr-149852-1
[INFO] running `Command { std: "git" "clone" "/workspace/cache/git-repos/https%3A%2F%2Fgithub.com%2Fparadise-runner%2Fglowdoc" "/workspace/builds/worker-7-tc2/source", kill_on_drop: false }`
[INFO] [stderr] Cloning into '/workspace/builds/worker-7-tc2/source'...
[INFO] [stderr] done.
[INFO] started tweaking git repo https://github.com/paradise-runner/glowdoc
[INFO] finished tweaking git repo https://github.com/paradise-runner/glowdoc
[INFO] tweaked toml for git repo https://github.com/paradise-runner/glowdoc written to /workspace/builds/worker-7-tc2/source/Cargo.toml
[INFO] validating manifest of git repo https://github.com/paradise-runner/glowdoc on toolchain bd7d74411512a3dd3b35d2f699c51dd2557c7e7e
[INFO] running `Command { std: CARGO_HOME="/workspace/cargo-home" RUSTUP_HOME="/workspace/rustup-home" "/workspace/cargo-home/bin/cargo" "+bd7d74411512a3dd3b35d2f699c51dd2557c7e7e" "metadata" "--manifest-path" "Cargo.toml" "--no-deps", kill_on_drop: false }`
[INFO] crate git repo https://github.com/paradise-runner/glowdoc already has a lockfile, it will not be regenerated
[INFO] running `Command { std: CARGO_HOME="/workspace/cargo-home" RUSTUP_HOME="/workspace/rustup-home" "/workspace/cargo-home/bin/cargo" "+bd7d74411512a3dd3b35d2f699c51dd2557c7e7e" "fetch" "--manifest-path" "Cargo.toml", kill_on_drop: false }`
[INFO] running `Command { std: "docker" "create" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/target:/opt/rustwide/target:rw,Z" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/source:/opt/rustwide/workdir:ro,Z" "-v" "/var/lib/crater-agent-workspace/cargo-home:/opt/rustwide/cargo-home:ro,Z" "-v" "/var/lib/crater-agent-workspace/rustup-home:/opt/rustwide/rustup-home:ro,Z" "-e" "SOURCE_DIR=/opt/rustwide/workdir" "-e" "CARGO_TARGET_DIR=/opt/rustwide/target" "-e" "CARGO_HOME=/opt/rustwide/cargo-home" "-e" "RUSTUP_HOME=/opt/rustwide/rustup-home" "-w" "/opt/rustwide/workdir" "-m" "1610612736" "--user" "0:0" "--network" "none" "ghcr.io/rust-lang/crates-build-env/linux@sha256:98afbf2d16093dec2546ff8915fddc74e65664aa03fc460b3712b1c2c54a33e4" "/opt/rustwide/cargo-home/bin/cargo" "+bd7d74411512a3dd3b35d2f699c51dd2557c7e7e" "metadata" "--no-deps" "--format-version=1", kill_on_drop: false }`
[INFO] [stdout] 45e93a88d0ff17d5f788f1ba547c35a8c6c3615ca716a500318d1d1f8097fac8
[INFO] running `Command { std: "docker" "start" "-a" "45e93a88d0ff17d5f788f1ba547c35a8c6c3615ca716a500318d1d1f8097fac8", kill_on_drop: false }`
[INFO] running `Command { std: "docker" "inspect" "45e93a88d0ff17d5f788f1ba547c35a8c6c3615ca716a500318d1d1f8097fac8", kill_on_drop: false }`
[INFO] running `Command { std: "docker" "rm" "-f" "45e93a88d0ff17d5f788f1ba547c35a8c6c3615ca716a500318d1d1f8097fac8", kill_on_drop: false }`
[INFO] [stdout] 45e93a88d0ff17d5f788f1ba547c35a8c6c3615ca716a500318d1d1f8097fac8
[INFO] running `Command { std: "docker" "create" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/target:/opt/rustwide/target:rw,Z" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/source:/opt/rustwide/workdir:ro,Z" "-v" "/var/lib/crater-agent-workspace/cargo-home:/opt/rustwide/cargo-home:ro,Z" "-v" "/var/lib/crater-agent-workspace/rustup-home:/opt/rustwide/rustup-home:ro,Z" "-e" "SOURCE_DIR=/opt/rustwide/workdir" "-e" "CARGO_TARGET_DIR=/opt/rustwide/target" "-e" "CARGO_INCREMENTAL=0" "-e" "RUST_BACKTRACE=full" "-e" "RUSTFLAGS=--cap-lints=forbid" "-e" "RUSTDOCFLAGS=--cap-lints=forbid" "-e" "CARGO_HOME=/opt/rustwide/cargo-home" "-e" "RUSTUP_HOME=/opt/rustwide/rustup-home" "-w" "/opt/rustwide/workdir" "-m" "1610612736" "--user" "0:0" "--network" "none" "ghcr.io/rust-lang/crates-build-env/linux@sha256:98afbf2d16093dec2546ff8915fddc74e65664aa03fc460b3712b1c2c54a33e4" "/opt/rustwide/cargo-home/bin/cargo" "+bd7d74411512a3dd3b35d2f699c51dd2557c7e7e" "build" "--frozen" "--message-format=json" "-Zbuild-dir-new-layout", kill_on_drop: false }`
[INFO] [stdout] 4d27cf896e9550054a8078dd8229b32490558577ae10d52ed725d886957b5460
[INFO] running `Command { std: "docker" "start" "-a" "4d27cf896e9550054a8078dd8229b32490558577ae10d52ed725d886957b5460", kill_on_drop: false }`
[INFO] [stderr]    Compiling libc v0.2.174
[INFO] [stderr]    Compiling smallvec v1.15.1
[INFO] [stderr]    Compiling writeable v0.6.1
[INFO] [stderr]    Compiling litemap v0.8.0
[INFO] [stderr]    Compiling icu_properties_data v2.0.1
[INFO] [stderr]    Compiling icu_normalizer_data v2.0.0
[INFO] [stderr]    Compiling lock_api v0.4.13
[INFO] [stderr]    Compiling zerocopy v0.8.26
[INFO] [stderr]    Compiling unicase v2.8.1
[INFO] [stderr]    Compiling syn v2.0.104
[INFO] [stderr]    Compiling memchr v2.7.5
[INFO] [stderr]    Compiling hashbrown v0.15.4
[INFO] [stderr]    Compiling slab v0.4.10
[INFO] [stderr]    Compiling http v0.2.12
[INFO] [stderr]    Compiling digest v0.10.7
[INFO] [stderr]    Compiling unicode-width v0.2.1
[INFO] [stderr]    Compiling pulldown-cmark v0.9.6
[INFO] [stderr]    Compiling utf-8 v0.7.6
[INFO] [stderr]    Compiling http-range v0.1.5
[INFO] [stderr]    Compiling unsafe-libyaml v0.2.11
[INFO] [stderr]    Compiling sha1 v0.10.6
[INFO] [stderr]    Compiling mime_guess v2.0.5
[INFO] [stderr]    Compiling getopts v0.2.23
[INFO] [stderr]    Compiling indexmap v2.10.0
[INFO] [stderr]    Compiling aho-corasick v1.1.3
[INFO] [stderr]    Compiling http-body v0.4.6
[INFO] [stderr]    Compiling parking_lot_core v0.9.11
[INFO] [stderr]    Compiling mio v1.0.4
[INFO] [stderr]    Compiling socket2 v0.5.10
[INFO] [stderr]    Compiling signal-hook-registry v1.4.5
[INFO] [stderr]    Compiling getrandom v0.2.16
[INFO] [stderr]    Compiling inotify-sys v0.1.5
[INFO] [stderr]    Compiling inotify v0.9.6
[INFO] [stderr]    Compiling rand_core v0.6.4
[INFO] [stderr]    Compiling filetime v0.2.25
[INFO] [stderr]    Compiling parking_lot v0.12.4
[INFO] [stderr]    Compiling mio v0.8.11
[INFO] [stderr]    Compiling notify v6.1.1
[INFO] [stderr]    Compiling regex-automata v0.4.9
[INFO] [stderr]    Compiling ppv-lite86 v0.2.21
[INFO] [stderr]    Compiling rand_chacha v0.3.1
[INFO] [stderr]    Compiling rand v0.8.5
[INFO] [stderr]    Compiling synstructure v0.13.2
[INFO] [stderr]    Compiling zerovec-derive v0.11.1
[INFO] [stderr]    Compiling displaydoc v0.2.5
[INFO] [stderr]    Compiling tokio-macros v2.5.0
[INFO] [stderr]    Compiling futures-macro v0.3.31
[INFO] [stderr]    Compiling serde_derive v1.0.219
[INFO] [stderr]    Compiling thiserror-impl v1.0.69
[INFO] [stderr]    Compiling zerofrom-derive v0.1.6
[INFO] [stderr]    Compiling yoke-derive v0.8.0
[INFO] [stderr]    Compiling tokio v1.46.1
[INFO] [stderr]    Compiling regex v1.11.1
[INFO] [stderr]    Compiling futures-util v0.3.31
[INFO] [stderr]    Compiling zerofrom v0.1.6
[INFO] [stderr]    Compiling yoke v0.8.0
[INFO] [stderr]    Compiling zerovec v0.11.2
[INFO] [stderr]    Compiling zerotrie v0.2.2
[INFO] [stderr]    Compiling thiserror v1.0.69
[INFO] [stderr]    Compiling serde v1.0.219
[INFO] [stderr]    Compiling tinystr v0.8.1
[INFO] [stderr]    Compiling potential_utf v0.1.2
[INFO] [stderr]    Compiling icu_locale_core v2.0.0
[INFO] [stderr]    Compiling icu_collections v2.0.0
[INFO] [stderr]    Compiling icu_provider v2.0.0
[INFO] [stderr]    Compiling icu_normalizer v2.0.0
[INFO] [stderr]    Compiling icu_properties v2.0.1
[INFO] [stderr]    Compiling idna_adapter v1.2.1
[INFO] [stderr]    Compiling idna v1.0.3
[INFO] [stderr]    Compiling url v2.5.4
[INFO] [stderr]    Compiling serde_yaml v0.9.34+deprecated
[INFO] [stderr]    Compiling serde_json v1.0.140
[INFO] [stderr]    Compiling tungstenite v0.21.0
[INFO] [stderr]    Compiling tokio-util v0.7.15
[INFO] [stderr]    Compiling tokio-tungstenite v0.21.0
[INFO] [stderr]    Compiling h2 v0.3.27
[INFO] [stderr]    Compiling hyper v0.14.32
[INFO] [stderr]    Compiling hyper-staticfile v0.9.6
[INFO] [stderr]    Compiling glowdoc v1.0.0 (/opt/rustwide/workdir)
[INFO] [stderr]     Finished `dev` profile [unoptimized + debuginfo] target(s) in 48.28s
[INFO] running `Command { std: "docker" "inspect" "4d27cf896e9550054a8078dd8229b32490558577ae10d52ed725d886957b5460", kill_on_drop: false }`
[INFO] running `Command { std: "docker" "rm" "-f" "4d27cf896e9550054a8078dd8229b32490558577ae10d52ed725d886957b5460", kill_on_drop: false }`
[INFO] [stdout] 4d27cf896e9550054a8078dd8229b32490558577ae10d52ed725d886957b5460
[INFO] running `Command { std: "docker" "create" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/target:/opt/rustwide/target:rw,Z" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/source:/opt/rustwide/workdir:ro,Z" "-v" "/var/lib/crater-agent-workspace/cargo-home:/opt/rustwide/cargo-home:ro,Z" "-v" "/var/lib/crater-agent-workspace/rustup-home:/opt/rustwide/rustup-home:ro,Z" "-e" "SOURCE_DIR=/opt/rustwide/workdir" "-e" "CARGO_TARGET_DIR=/opt/rustwide/target" "-e" "CARGO_INCREMENTAL=0" "-e" "RUST_BACKTRACE=full" "-e" "RUSTFLAGS=--cap-lints=forbid" "-e" "RUSTDOCFLAGS=--cap-lints=forbid" "-e" "CARGO_HOME=/opt/rustwide/cargo-home" "-e" "RUSTUP_HOME=/opt/rustwide/rustup-home" "-w" "/opt/rustwide/workdir" "-m" "1610612736" "--user" "0:0" "--network" "none" "ghcr.io/rust-lang/crates-build-env/linux@sha256:98afbf2d16093dec2546ff8915fddc74e65664aa03fc460b3712b1c2c54a33e4" "/opt/rustwide/cargo-home/bin/cargo" "+bd7d74411512a3dd3b35d2f699c51dd2557c7e7e" "test" "--frozen" "--no-run" "--message-format=json" "-Zbuild-dir-new-layout", kill_on_drop: false }`
[INFO] [stdout] 25a28703d39a19093177a100e34414100bca4cfbb02cdce23309e7be09c400ec
[INFO] running `Command { std: "docker" "start" "-a" "25a28703d39a19093177a100e34414100bca4cfbb02cdce23309e7be09c400ec", kill_on_drop: false }`
[INFO] [stderr]    Compiling glowdoc v1.0.0 (/opt/rustwide/workdir)
[INFO] [stderr]     Finished `test` profile [unoptimized + debuginfo] target(s) in 2.13s
[INFO] running `Command { std: "docker" "inspect" "25a28703d39a19093177a100e34414100bca4cfbb02cdce23309e7be09c400ec", kill_on_drop: false }`
[INFO] running `Command { std: "docker" "rm" "-f" "25a28703d39a19093177a100e34414100bca4cfbb02cdce23309e7be09c400ec", kill_on_drop: false }`
[INFO] [stdout] 25a28703d39a19093177a100e34414100bca4cfbb02cdce23309e7be09c400ec
[INFO] running `Command { std: "docker" "create" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/target:/opt/rustwide/target:rw,Z" "-v" "/var/lib/crater-agent-workspace/builds/worker-7-tc2/source:/opt/rustwide/workdir:ro,Z" "-v" "/var/lib/crater-agent-workspace/cargo-home:/opt/rustwide/cargo-home:ro,Z" "-v" "/var/lib/crater-agent-workspace/rustup-home:/opt/rustwide/rustup-home:ro,Z" "-e" "SOURCE_DIR=/opt/rustwide/workdir" "-e" "CARGO_TARGET_DIR=/opt/rustwide/target" "-e" "CARGO_INCREMENTAL=0" "-e" "RUST_BACKTRACE=full" "-e" "RUSTFLAGS=--cap-lints=forbid" "-e" "RUSTDOCFLAGS=--cap-lints=forbid" "-e" "CARGO_HOME=/opt/rustwide/cargo-home" "-e" "RUSTUP_HOME=/opt/rustwide/rustup-home" "-w" "/opt/rustwide/workdir" "-m" "1610612736" "--user" "0:0" "--network" "none" "ghcr.io/rust-lang/crates-build-env/linux@sha256:98afbf2d16093dec2546ff8915fddc74e65664aa03fc460b3712b1c2c54a33e4" "/opt/rustwide/cargo-home/bin/cargo" "+bd7d74411512a3dd3b35d2f699c51dd2557c7e7e" "test" "--frozen" "-Zbuild-dir-new-layout", kill_on_drop: false }`
[INFO] [stdout] 6426f24c110d692e272954eb5187a0cb0e6ac5cbf5563315aca603e412d8e936
[INFO] running `Command { std: "docker" "start" "-a" "6426f24c110d692e272954eb5187a0cb0e6ac5cbf5563315aca603e412d8e936", kill_on_drop: false }`
[INFO] [stderr]     Finished `test` profile [unoptimized + debuginfo] target(s) in 0.15s
[INFO] [stderr]      Running unittests src/main.rs (/opt/rustwide/target/debug/build/glowdoc/eac19bb14e5c9a2b/deps/glowdoc-eac19bb14e5c9a2b)
[INFO] [stdout] 
[INFO] [stdout] running 1 test
[INFO] [stdout] test tests::test_generated_index_matches_current ... FAILED
[INFO] [stdout] 
[INFO] [stdout] failures:
[INFO] [stdout] 
[INFO] [stdout] ---- tests::test_generated_index_matches_current stdout ----
[INFO] [stdout] 
[INFO] [stdout] thread 'tests::test_generated_index_matches_current' (24) panicked at src/main.rs:1081:9:
[INFO] [stdout] assertion `left == right` failed: Generated index.html content does not match the current index.html file
[INFO] [stdout]   left: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>GlowDoc - Modern Documentation</title>\n    <meta name=\"description\" content=\"modern docs for the modern world\">\n    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n    <style>\n        :root {\n            --background: 310 100% 98%;\n            --foreground: 270 15% 15%;\n            --card: 310 100% 98%;\n            --card-foreground: 270 15% 15%;\n            --popover: 310 100% 98%;\n            --popover-foreground: 270 15% 15%;\n            --primary: 270 91% 65%;\n            --primary-foreground: 310 100% 98%;\n            --secondary: 270 20% 92%;\n            --secondary-foreground: 270 15% 15%;\n            --muted: 270 20% 92%;\n            --muted-foreground: 270 10% 55%;\n            --accent: 270 20% 92%;\n            --accent-foreground: 270 15% 15%;\n            --destructive: 0 84.2% 60.2%;\n            --destructive-foreground: 310 100% 98%;\n            --border: 270 20% 88%;\n            --input: 270 20% 88%;\n            --ring: 270 91% 65%;\n            --link: 50 100% 40%;\n            --radius: 0.5rem;\n        }\n\n        [data-theme=\"dark\"] {\n            --background: 270 20% 12%;\n            --foreground: 310 40% 92%;\n            --card: 270 20% 12%;\n            --card-foreground: 310 40% 92%;\n            --popover: 270 20% 12%;\n            --popover-foreground: 310 40% 92%;\n            --primary: 270 91% 75%;\n            --primary-foreground: 270 20% 12%;\n            --secondary: 270 15% 20%;\n            --secondary-foreground: 310 40% 92%;\n            --muted: 270 15% 20%;\n            --muted-foreground: 270 10% 65%;\n            --accent: 270 15% 20%;\n            --accent-foreground: 310 40% 92%;\n            --destructive: 0 62.8% 50%;\n            --destructive-foreground: 310 40% 92%;\n            --border: 270 15% 20%;\n            --input: 270 15% 20%;\n            --ring: 270 91% 75%;\n            --link: 50 100% 60%;\n        }\n        * {\n            border-color: hsl(var(--border));\n        }\n\n        body {\n            background-color: hsl(var(--background));\n            color: hsl(var(--foreground));\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            line-height: 1.6;\n            margin: 0;\n            padding: 0;\n            transition: all 0.3s ease;\n        }\n\n        .content-section a, .homepage a {\n            color: hsl(var(--link));\n            text-decoration: none;\n            transition: color 0.2s ease;\n        }\n\n        .content-section a:hover, .homepage a:hover {\n            color: hsl(var(--link) / 0.8);\n            text-decoration: underline;\n        }\n\n        .content-section a:visited, .homepage a:visited {\n            color: hsl(var(--link) / 0.9);\n        }\n\n        .container {\n            max-width: 95%;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        header {\n            border-bottom: 1px solid hsl(var(--border));\n            padding: 1rem 0;\n            position: sticky;\n            top: 0;\n            background-color: hsl(var(--background) / 0.95);\n            backdrop-filter: blur(10px);\n            z-index: 50;\n        }\n\n        .header-content {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .logo {\n            font-size: 1.5rem;\n            font-weight: 700;\n            color: hsl(var(--primary));\n            text-decoration: none;\n        }\n\n        .nav {\n            display: flex;\n            gap: 1rem;\n            align-items: center;\n        }\n\n        .nav a {\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            font-weight: 500;\n            transition: color 0.2s;\n        }\n\n        .nav a:hover {\n            color: hsl(var(--foreground));\n        }\n\n        .mobile-menu-toggle {\n            display: none;\n            background: none;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            padding: 0.5rem;\n            cursor: pointer;\n            color: hsl(var(--foreground));\n            transition: all 0.2s;\n        }\n\n        .mobile-menu-toggle:hover {\n            background-color: hsl(var(--accent));\n        }\n\n        .theme-toggle {\n            background: none;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            padding: 0.5rem;\n            cursor: pointer;\n            color: hsl(var(--foreground));\n            transition: all 0.2s;\n        }\n\n        .theme-toggle:hover {\n            background-color: hsl(var(--accent));\n        }\n\n        .social-links {\n            display: flex;\n            gap: 0.5rem;\n            align-items: center;\n            margin-left: 0;\n        }\n\n        .social-link {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            border-radius: 0.375rem;\n            transition: all 0.2s ease;\n        }\n\n        .social-link:hover {\n            color: hsl(var(--foreground));\n            background-color: hsl(var(--accent));\n        }\n\n        .social-link svg {\n            width: 16px;\n            height: 16px;\n        }\n\n        .homepage {\n            display: none;\n            width: 100%;\n        }\n\n        .homepage.active {\n            display: block;\n        }\n\n        .homepage-content {\n            max-width: 800px;\n            margin: 0 auto;\n            padding: 4rem 2rem;\n        }\n\n        .homepage h1 {\n            font-size: 3rem;\n            font-weight: 800;\n            margin-bottom: 1rem;\n            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.7));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            text-align: center;\n        }\n\n        .homepage h2 {\n            font-size: 1.75rem;\n            font-weight: 600;\n            margin-top: 3rem;\n            margin-bottom: 1rem;\n            color: hsl(var(--foreground));\n        }\n\n        .homepage p {\n            font-size: 1.125rem;\n            margin-bottom: 1.5rem;\n            color: hsl(var(--muted-foreground));\n            line-height: 1.7;\n        }\n\n        .homepage ul {\n            margin-bottom: 1.5rem;\n            padding-left: 0;\n            list-style: none;\n        }\n\n        .homepage li {\n            margin-bottom: 1rem;\n            padding-left: 0;\n            color: hsl(var(--muted-foreground));\n            line-height: 1.6;\n        }\n\n        .homepage li:before {\n            content: \"✨\";\n            margin-right: 0.75rem;\n        }\n\n        .homepage pre {\n            background-color: hsl(var(--muted));\n            border-radius: var(--radius);\n            padding: 1.5rem;\n            overflow-x: auto;\n            border: 1px solid hsl(var(--border));\n            margin: 2rem 0;\n        }\n\n        .homepage code {\n            background-color: hsl(var(--muted));\n            padding: 0.2rem 0.4rem;\n            border-radius: calc(var(--radius) - 2px);\n            font-size: 0.875rem;\n            border: 1px solid hsl(var(--border));\n        }\n\n        .homepage pre code {\n            background: none;\n            padding: 0;\n            border: none;\n            font-size: 0.875rem;\n        }\n\n        .homepage strong {\n            color: hsl(var(--foreground));\n            font-weight: 600;\n        }\n\n        .layout {\n            display: none;\n            min-height: calc(100vh - 80px);\n        }\n\n        .layout.active {\n            display: flex;\n        }\n\n        .sidebar {\n            width: 280px;\n            background-color: hsl(var(--card));\n            border-right: 1px solid hsl(var(--border));\n            padding: 1rem 0;\n            position: sticky;\n            top: 80px;\n            height: calc(100vh - 80px);\n            overflow-y: auto;\n            transition: transform 0.3s ease;\n        }\n\n        .sidebar.hidden {\n            transform: translateX(-100%);\n        }\n\n        .sidebar-nav {\n            padding: 0 1rem;\n        }\n\n        .search-container {\n            position: relative;\n            margin-bottom: 1.5rem;\n        }\n\n        .search-input {\n            width: 100%;\n            padding: 0.75rem 2.5rem 0.75rem 1rem;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            background-color: hsl(var(--background));\n            color: hsl(var(--foreground));\n            font-size: 0.875rem;\n            transition: all 0.2s;\n            box-sizing: border-box;\n        }\n\n        .search-input:focus {\n            outline: none;\n            border-color: hsl(var(--primary));\n            box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);\n        }\n\n        .search-input::placeholder {\n            color: hsl(var(--muted-foreground));\n        }\n\n        .search-icon {\n            position: absolute;\n            right: 0.75rem;\n            top: 50%;\n            transform: translateY(-50%);\n            color: hsl(var(--muted-foreground));\n            pointer-events: none;\n        }\n\n        .search-results {\n            margin-bottom: 1.5rem;\n        }\n\n        .search-results-header {\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            margin-bottom: 0.75rem;\n            font-size: 0.875rem;\n            text-transform: uppercase;\n            letter-spacing: 0.025em;\n            border-bottom: 1px solid hsl(var(--border));\n            padding-bottom: 0.5rem;\n        }\n\n        .search-result {\n            padding: 0.75rem;\n            margin-bottom: 0.5rem;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            cursor: pointer;\n            transition: all 0.2s;\n            background-color: hsl(var(--card));\n        }\n\n        .search-result:hover {\n            background-color: hsl(var(--accent));\n            border-color: hsl(var(--primary));\n        }\n\n        .search-result-title {\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            margin-bottom: 0.25rem;\n            font-size: 0.875rem;\n        }\n\n        .search-result-section {\n            color: hsl(var(--muted-foreground));\n            font-size: 0.75rem;\n            margin-bottom: 0.5rem;\n        }\n\n        .search-result-snippet {\n            color: hsl(var(--muted-foreground));\n            font-size: 0.8rem;\n            line-height: 1.4;\n            overflow: hidden;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n        }\n\n        .search-result-snippet mark {\n            background-color: hsl(var(--primary) / 0.2);\n            color: hsl(var(--primary));\n            padding: 0.1rem 0.2rem;\n            border-radius: 2px;\n        }\n\n        .no-results {\n            text-align: center;\n            color: hsl(var(--muted-foreground));\n            padding: 2rem;\n            font-style: italic;\n        }\n\n        .nav-section {\n            margin-bottom: 1.5rem;\n        }\n\n        .nav-section-title {\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            margin-bottom: 0.5rem;\n            font-size: 0.875rem;\n            text-transform: uppercase;\n            letter-spacing: 0.025em;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            cursor: pointer;\n            padding: 0.5rem;\n            border-radius: var(--radius);\n            transition: all 0.2s;\n        }\n\n        .nav-section-title:hover {\n            background-color: hsl(var(--accent));\n        }\n\n        .nav-section-title.collapsed {\n            margin-bottom: 0;\n        }\n\n        .nav-section-toggle {\n            transition: transform 0.2s;\n        }\n\n        .nav-section-toggle.collapsed {\n            transform: rotate(-90deg);\n        }\n\n        .nav-items {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n            transition: all 0.3s ease;\n        }\n\n        .nav-items.collapsed {\n            opacity: 0;\n            max-height: 0;\n            overflow: hidden;\n        }\n\n        .nav-item {\n            margin-bottom: 0.25rem;\n        }\n\n        .nav-link {\n            display: block;\n            padding: 0.5rem 0.75rem;\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            border-radius: var(--radius);\n            transition: all 0.2s;\n            font-size: 0.875rem;\n            border-left: 2px solid transparent;\n        }\n\n        .nav-link:hover {\n            background-color: hsl(var(--accent));\n            color: hsl(var(--foreground));\n            border-left-color: hsl(var(--primary));\n        }\n\n        .nav-link.active {\n            background-color: hsl(var(--primary) / 0.1);\n            color: hsl(var(--primary));\n            border-left-color: hsl(var(--primary));\n            font-weight: 500;\n        }\n\n        .nav-folder {\n            margin-bottom: 0.25rem;\n        }\n\n        .nav-folder-title {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 0.4rem 0.75rem;\n            color: hsl(var(--muted-foreground));\n            cursor: pointer;\n            border-radius: var(--radius);\n            transition: all 0.2s;\n            font-size: 0.875rem;\n            font-weight: 500;\n            background-color: hsl(var(--muted) / 0.3);\n        }\n\n        .nav-folder-title:hover {\n            background-color: hsl(var(--accent));\n            color: hsl(var(--foreground));\n        }\n\n        .nav-folder-toggle {\n            transition: transform 0.2s;\n            margin-left: 0.5rem;\n        }\n\n        .nav-folder-toggle.collapsed {\n            transform: rotate(-90deg);\n        }\n\n        .nav-nested-items {\n            list-style: none;\n            padding: 0;\n            margin: 0.5rem 0 0 1rem;\n            border-left: 1px solid hsl(var(--border));\n            transition: all 0.3s ease;\n        }\n\n        .nav-nested-items.collapsed {\n            opacity: 0;\n            max-height: 0;\n            overflow: hidden;\n            margin-top: 0;\n        }\n\n        .nav-nested-items .nav-item {\n            margin-bottom: 0.2rem;\n        }\n\n        .nav-nested-items .nav-link {\n            margin-left: 0.5rem;\n            padding: 0.4rem 0.5rem;\n            font-size: 0.8rem;\n            border-left-width: 1px;\n        }\n\n        .nav-nested-items .nav-folder-title {\n            margin-left: 0.5rem;\n            padding: 0.35rem 0.5rem;\n            font-size: 0.8rem;\n            background-color: hsl(var(--muted) / 0.2);\n        }\n\n        .content-wrapper {\n            display: flex;\n            max-width: none;\n            width: 100%;\n            gap: 0;\n            margin-left: 1rem;\n        }\n\n        .content-area {\n            flex: 1;\n            max-width: none;\n            min-width: 0;\n            overflow-y: auto;\n            height: 100%;\n            padding-right: 310px;\n        }\n\n        .table-of-contents {\n            width: 250px;\n            flex-shrink: 0;\n            position: fixed;\n            top: calc(80px + 2rem);\n            right: 0.5rem;\n            height: fit-content;\n            max-height: calc(100vh - 80px - 10rem);\n            overflow-y: auto;\n            background-color: hsl(var(--card));\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            padding: 1rem;\n            z-index: 10;\n        }\n\n        .toc-header {\n            margin-bottom: 1rem;\n            padding-bottom: 0.5rem;\n            border-bottom: 1px solid hsl(var(--border));\n        }\n\n        .toc-header h3 {\n            margin: 0;\n            font-size: 0.875rem;\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            text-transform: uppercase;\n            letter-spacing: 0.025em;\n        }\n\n        .toc-nav {\n            font-size: 0.875rem;\n        }\n\n        .toc-nav ul {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .toc-nav li {\n            margin-bottom: 0.25rem;\n        }\n\n        .toc-nav a {\n            display: block;\n            padding: 0.25rem 0.5rem;\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            border-radius: calc(var(--radius) - 2px);\n            transition: all 0.2s;\n            font-size: 0.75rem;\n            line-height: 1.4;\n            border-left: 2px solid transparent;\n        }\n\n        .toc-nav a:hover {\n            background-color: hsl(var(--accent));\n            color: hsl(var(--foreground));\n            border-left-color: hsl(var(--primary) / 0.5);\n        }\n\n        .toc-nav a.active {\n            background-color: hsl(var(--primary) / 0.1);\n            color: hsl(var(--primary));\n            border-left-color: hsl(var(--primary));\n            font-weight: 500;\n        }\n\n        .toc-level-1 {\n            margin-left: 0;\n        }\n\n        .toc-level-2 {\n            margin-left: 0;\n        }\n\n        .toc-level-3 {\n            margin-left: 1rem;\n        }\n\n        .toc-level-4 {\n            margin-left: 1.5rem;\n        }\n\n        .toc-level-5 {\n            margin-left: 2rem;\n        }\n\n        .toc-level-6 {\n            margin-left: 2.5rem;\n        }\n\n        .toc-level-3 a,\n        .toc-level-4 a,\n        .toc-level-5 a,\n        .toc-level-6 a {\n            font-size: 0.7rem;\n            padding: 0.2rem 0.4rem;\n        }\n\n        .main-content {\n            flex: 1;\n            padding: 0;\n            overflow-y: auto;\n            display: flex;\n            justify-content: center;\n        }\n\n        .content-section {\n            display: none;\n            width: 100%;\n        }\n\n        .content-section.active {\n            display: block;\n        }\n\n        .content-section h1 {\n            font-size: 2.5rem;\n            font-weight: 700;\n            margin-bottom: 1rem;\n            color: hsl(var(--foreground));\n        }\n\n        .content-section h2 {\n            font-size: 1.75rem;\n            font-weight: 600;\n            margin-top: 2rem;\n            margin-bottom: 1rem;\n            color: hsl(var(--foreground));\n        }\n\n        .content-section p {\n            margin-bottom: 1rem;\n            color: hsl(var(--muted-foreground));\n        }\n\n        .content-section ul {\n            margin-bottom: 1rem;\n            padding-left: 1.5rem;\n        }\n\n        .content-section li {\n            margin-bottom: 0.5rem;\n            color: hsl(var(--muted-foreground));\n        }\n\n        .content-section pre {\n            background-color: hsl(var(--muted));\n            border-radius: var(--radius);\n            padding: 1rem;\n            overflow-x: auto;\n            border: 1px solid hsl(var(--border));\n            margin-bottom: 1rem;\n        }\n\n        .content-section code {\n            background-color: hsl(var(--muted));\n            padding: 0.2rem 0.4rem;\n            border-radius: calc(var(--radius) - 2px);\n            font-size: 0.875rem;\n            border: 1px solid hsl(var(--border));\n        }\n\n        .content-section pre code {\n            background: none;\n            padding: 0;\n            border: none;\n            font-size: 0.875rem;\n        }\n\n        footer {\n            border-top: 1px solid hsl(var(--border));\n            padding: 1rem 0;\n            text-align: center;\n            color: hsl(var(--muted-foreground));\n        }\n        @media (max-width: 768px) {\n            .nav {\n                gap: 1rem;\n            }\n\n            .mobile-menu-toggle {\n                display: block;\n            }\n\n            .layout {\n                flex-direction: column;\n            }\n\n            .sidebar {\n                position: fixed;\n                top: 80px;\n                left: 0;\n                width: 100%;\n                height: calc(100vh - 80px);\n                z-index: 40;\n                background-color: hsl(var(--background));\n                border-right: none;\n                border-bottom: 1px solid hsl(var(--border));\n                transform: translateX(-100%);\n            }\n\n            .sidebar.visible {\n                transform: translateX(0);\n            }\n\n            // .main-content {\n            //     padding: 1rem;\n            // }\n\n            .content-wrapper {\n                flex-direction: column;\n                gap-top: 1rem;\n                margin: 1rem;\n            }\n\n            .table-of-contents {\n                position: static;\n                top: auto;\n                right: auto;\n                width: auto;\n                max-height: 40vh;\n                order: -1;\n                // margin-bottom: 1rem;\n                margin-top: 0;\n                z-index: 20;\n            }\n\n            .toc-header {\n                cursor: pointer;\n                user-select: none;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n            }\n\n            .toc-header::after {\n                content: '▼';\n                font-size: 0.75rem;\n                transition: transform 0.2s ease;\n            }\n\n            .table-of-contents.collapsed .toc-header::after {\n                transform: rotate(-90deg);\n            }\n\n            .table-of-contents.collapsed .toc-nav {\n                display: none;\n            }\n\n            .content-area {\n                max-width: none;\n                padding-right: 1rem;\n                padding-left: 1rem;\n            }\n\n            .social-links {\n                margin-left: 0;\n                gap: 0.25rem;\n            }\n\n            .social-link {\n                width: 1.75rem;\n                height: 1.75rem;\n            }\n\n            .social-link svg {\n                width: 14px;\n                height: 14px;\n            }\n        }\n    </style>\n</head>\n<body>\n    <header>\n        <div class=\"container\">\n            <div class=\"header-content\">\n                <a href=\"#\" class=\"logo\" onclick=\"showHomepage()\">GlowDoc</a>\n                <nav class=\"nav\">\n                    <button class=\"mobile-menu-toggle\" onclick=\"toggleSidebar()\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"/>\n                            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"/>\n                            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"/>\n                        </svg>\n                    </button>\n                    <a href=\"#\" onclick=\"showHomepage()\">Home</a>\n                    <a href=\"#introduction/what-is-glowdoc\">Docs</a>\n                    <button class=\"theme-toggle\" onclick=\"toggleTheme()\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <circle cx=\"12\" cy=\"12\" r=\"5\"/>\n                            <path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"/>\n                        </svg>\n                    </button>\n                    <div class=\"social-links\">\n                    <a href=\"https://github.com/paradise-runner\" class=\"social-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"GitHub\">\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"/>\n                        </svg>\n                    </a></div>\n                </nav>\n            </div>\n        </div>\n    </header>\n\n    <div class=\"homepage active\" id=\"homepage\">\n        <div class=\"homepage-content\">\n<h1>✨ Welcome to GlowDoc! ✨</h1>\n<p>Create stunning documentation sites with modern design principles. GlowDoc is a powerful, yet simple static site generator built with Rust that transforms your markdown files into beautiful, responsive documentation websites.</p>\n<h2>Why Choose GlowDoc?</h2>\n<p><strong>✨ Beautiful by Default</strong> - Clean, professional design with carefully crafted typography, spacing, and visual hierarchy that makes your content shine</p>\n<p><strong>🌙 Smart Dark Mode</strong> - Automatic dark mode detection with smooth transitions and persistent user preferences</p>\n<p><strong>📱 Mobile-First Responsive</strong> - Flawless experience across all devices with an adaptive sidebar and touch-friendly navigation</p>\n<p><strong>⚡ Lightning Fast</strong> - Minimal dependencies, optimized performance, and single-page application architecture for instant page loads</p>\n<p><strong>♿ Accessibility First</strong> - Built with WCAG guidelines in mind, featuring proper semantic markup, keyboard navigation, and screen reader support</p>\n<p><strong>🎛\u{fe0f} Highly Customizable</strong> - Easy theming system with CSS custom properties, flexible layouts, and extensible components</p>\n<p><strong>🔧 Developer Friendly</strong> - Simple markdown workflow, automatic config generation, and lightning-fast hot reload development experience</p>\n<img src=\"docs/diagonal_comparison.png\" width=100%/>\n<h2>Key Features</h2>\n<h3>📝 Markdown-Powered Content</h3>\n<p>Write your documentation in familiar GitHub-flavored markdown with support for:</p>\n<ul>\n<li>Tables and task lists</li>\n<li>Code syntax highlighting</li>\n<li>Footnotes and strikethrough</li>\n</ul>\n<h3>🗂\u{fe0f} Smart Organization</h3>\n<ul>\n<li>Automatic navigation generation from folder structure</li>\n<li>Configurable page ordering and section management</li>\n<li>Search functionality across all content</li>\n<li>Breadcrumb navigation for easy orientation</li>\n</ul>\n<h3>🎯 Zero Configuration Required</h3>\n<p>Get started instantly with our intelligent config generator:</p>\n<ul>\n<li>Auto-detects your documentation structure</li>\n<li>Extracts page titles from markdown headers</li>\n<li>Interactive setup wizard for customization</li>\n<li>Command-line options for automation</li>\n</ul>\n<h3>😍 Beautiful Theme System</h3>\n<p>Professional styling that adapts to your needs:</p>\n<ul>\n<li>Modern CSS custom properties for easy customization</li>\n<li>Automatic light/dark mode with smooth transitions</li>\n<li>Carefully crafted typography and visual hierarchy</li>\n<li>Responsive design that looks stunning on every device</li>\n<li>Persistent theme preferences across sessions</li>\n</ul>\n<h2>Wicked Fast &amp; Efficient</h2>\n<p>GlowDoc is super fast, able to handle thousands of documents with ease.</p>\n<h3>Performance Benchmark: 10,000 Documents</h3>\n<table style=\"width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);\">\n  <thead>\n    <tr style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\">\n      <th style=\"padding: 16px; text-align: left; font-weight: 600;\">Feature</th>\n      <th style=\"padding: 16px; text-align: left; font-weight: 600;\">GlowDoc</th>\n      <th style=\"padding: 16px; text-align: left; font-weight: 600;\">Astro Starlight</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr style=\"background-color: rgba(102, 126, 234, 0.05);\">\n      <td style=\"padding: 16px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.1);\">Compile Time</td>\n      <td style=\"padding: 16px; color: #10b981; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">1.32 seconds</td>\n      <td style=\"padding: 16px; color: #ef4444; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">20+ minutes</td>\n    </tr>\n    <tr>\n      <td style=\"padding: 16px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.1);\">Output Size</td>\n      <td style=\"padding: 16px; color: #10b981; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">17MB (gzipped)</td>\n      <td style=\"padding: 16px; color: #ef4444; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">10+ GB</td>\n    </tr>\n    <tr style=\"background-color: rgba(102, 126, 234, 0.05);\">\n      <td style=\"padding: 16px; font-weight: 600;\">Document Capacity</td>\n      <td style=\"padding: 16px; color: #10b981; font-weight: 500;\">Tens of thousands</td>\n      <td style=\"padding: 16px; color: #ef4444; font-weight: 500;\">Limited by build time/storage space</td>\n    </tr>\n  </tbody>\n</table>\n<p><em>Testing environment: MacBook Air M1, 16GB RAM. Results may vary based on hardware and document complexity.</em></p>\n<br/>\n<img src=\"docs/performance-chart.svg\" width=100%/>\n<h2>Quick Start Guide</h2>\n<p>Ready to create amazing documentation? Here's how to get started in under 5 minutes:</p>\n<pre><code class=\"language-bash\"># 1. Install Rust (if you haven't already)\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\nsource ~/.cargo/env\n\n# 2. Clone or create your documentation project\n# (or use GlowDoc in your existing project)\n\n# 3. Generate your configuration\ncargo run init-config\n\n# 4. Start development server with hot reload (recommended)\ncargo run watch\n# Visit http://localhost:8000 to see your docs!\n# Changes to files automatically rebuild and refresh your browser\n\n# Alternative: One-time build for production\n# cargo run --release &amp;&amp; python3 -m http.server 8000\n</code></pre>\n<h2>🔥 Lightning-Fast Development with Hot Reload</h2>\n<p>Experience the future of documentation development with our built-in hot reload server:</p>\n<h3><strong>Instant Feedback Loop</strong></h3>\n<ul>\n<li><strong>Save a file</strong> → <strong>Site rebuilds</strong> → <strong>Browser refreshes</strong> → <strong>See changes instantly</strong></li>\n<li>No manual rebuilds, no refresh button needed, just pure development flow</li>\n</ul>\n<h3><strong>Rich Media Support</strong></h3>\n<ul>\n<li><strong>Images, videos, fonts</strong> - All served directly from your <code>docs/</code> folder</li>\n<li><strong>Live asset updates</strong> - Change an image and see it update immediately</li>\n<li><strong>No configuration needed</strong> - Just drop files in and reference them</li>\n</ul>\n<h3><strong>Smart Development Features</strong></h3>\n<ul>\n<li><strong>Debounced rebuilds</strong> - Prevents duplicate builds from rapid file saves</li>\n<li><strong>Clean console output</strong> - Shows only what matters during development</li>\n<li><strong>Error reporting</strong> - Clear feedback when something goes wrong</li>\n<li><strong>Debug mode</strong> - <code>GLOWDOC_DEBUG=1 cargo run watch</code> for verbose logging</li>\n</ul>\n<pre><code class=\"language-bash\"># Start the magic ✨\ncargo run watch\n\n# Then edit your markdown files and watch the magic happen:\n# 🔄 Rebuilding after entry.md change...\n# ✅ Ready\n</code></pre>\n<p>Perfect for:</p>\n<ul>\n<li><strong>Writing and previewing</strong> content in real-time</li>\n<li><strong>Testing responsive layouts</strong> across different screen sizes</li>\n<li><strong>Iterating on design</strong> changes with immediate visual feedback</li>\n<li><strong>Adding images and assets</strong> with instant preview</li>\n</ul>\n<h2>Perfect For Every Documentation Need</h2>\n<h3>📚 <strong>Project Documentation</strong></h3>\n<p>Document your open source projects, internal tools, or enterprise software with professional-grade presentation</p>\n<h3>🔌 <strong>API Documentation</strong></h3>\n<p>Create comprehensive API guides with code examples, endpoint references, and interactive exploration</p>\n<h3>📖 <strong>User Guides &amp; Tutorials</strong></h3>\n<p>Build step-by-step guides that help users master your product with clear, visual instructions</p>\n<h3>🧠 <strong>Knowledge Bases</strong></h3>\n<p>Organize team knowledge, best practices, and institutional wisdom in an easily searchable format</p>\n<h3>✍\u{fe0f} <strong>Technical Blogs</strong></h3>\n<p>Publish technical content with beautiful formatting, syntax highlighting, and professional presentation</p>\n<h3>📋 <strong>Documentation Hubs</strong></h3>\n<p>Centralize multiple projects or teams' documentation in one cohesive, branded experience</p>\n<h2>What Makes GlowDoc Special?</h2>\n<h3>🏗\u{fe0f} <strong>Single Binary Simplicity</strong></h3>\n<p>No complex build pipelines or dependency management - just one Rust binary that does everything you need.</p>\n<h3>🎨 <strong>Design That Delights</strong></h3>\n<p>We obsess over the details so you don't have to. Every element is carefully designed for optimal readability and user experience.</p>\n<h3>🚀 <strong>Performance Obsessed</strong></h3>\n<p>Your documentation loads instantly and stays responsive, even with hundreds of pages of content.</p>\n<h3>🔍 <strong>Search-First Experience</strong></h3>\n<p>Built-in search helps users find exactly what they're looking for, when they need it.</p>\n<h3>🔥 <strong>Hot Reload Development</strong></h3>\n<p>Revolutionary development experience with instant rebuilds and browser refresh - see your changes in real-time as you write.</p>\n<h2>Our Philosophy</h2>\n<blockquote>\n<p><strong>Great documentation should be invisible technology.</strong></p>\n</blockquote>\n<p>We believe that the best documentation tools get out of your way and let your content shine. GlowDoc follows these core principles:</p>\n<ul>\n<li><strong>Content First</strong>: Your words matter most - everything else should support them</li>\n<li><strong>Accessibility Always</strong>: Documentation should be usable by everyone, regardless of ability or device</li>\n<li><strong>Performance Matters</strong>: Fast load times and smooth interactions create better reading experiences</li>\n<li><strong>Beauty Serves Purpose</strong>: Good design isn't decoration - it improves comprehension and usability</li>\n</ul>\n<h2>Ready to Get Started?</h2>\n<p>🚀 <strong>Jump right in</strong> with our <a href=\"#quick-start\">Quick Start Guide</a> for a guided setup experience</p>\n<p>⚙\u{fe0f} <strong>Learn the details</strong> in our <a href=\"#installation\">Installation Guide</a> for comprehensive setup instructions</p>\n<p>🎨 <strong>Make it yours</strong> with our <a href=\"#theming\">Customization Guide</a> to match your brand and style</p>\n<p>💡 <strong>Need help?</strong> Check out our <a href=\"#configuration\">Configuration Guide</a> for advanced setup options</p>\n<hr />\n<p><em>Ready to transform your documentation? Let's build something beautiful together!</em> 🌟</p>\n<br/>\n<p>⚡\u{fe0f} More projects can be found at my <a href=\"https://hec.works\">website</a> 🌊 and the project is fully open source on <a href=\"https://github.com/paradise-runner/glowdoc\">github</a> 🤩</p>\n<br/>\n<br/>\n<center>Built with ♥\u{fe0f} in Fort Collins, CO</center>\n\n        </div>\n    </div>\n\n    <div class=\"layout\" id=\"docs-layout\">\n        <aside class=\"sidebar\" id=\"sidebar\">\n            <nav class=\"sidebar-nav\">\n\n                <div class=\"search-container\">\n                    <input type=\"text\" id=\"search-input\" class=\"search-input\" placeholder=\"Search pages...\" oninput=\"performSearch()\">\n                    <svg class=\"search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n                        <path d=\"m21 21-4.35-4.35\"/>\n                    </svg>\n                </div>\n                <div id=\"search-results\" class=\"search-results\" style=\"display: none;\">\n                    <div class=\"search-results-header\">Search Results</div>\n                    <div id=\"search-results-list\"></div>\n                </div>\n                <div id=\"navigation-container\">\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('introduction')\">\n                        <span>Introduction</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"introduction-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#introduction/what-is-glowdoc\" class=\"nav-link active\" data-content-id=\"introduction/what-is-glowdoc\" data-section-id=\"introduction\">What is GlowDoc?</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#introduction/quick-start\" class=\"nav-link\" data-content-id=\"introduction/quick-start\" data-section-id=\"introduction\">Quick Start</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('getting-started')\">\n                        <span>Getting Started</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"getting-started-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#getting-started/first-steps\" class=\"nav-link\" data-content-id=\"getting-started/first-steps\" data-section-id=\"getting-started\">First Steps</a>\n                        </li>\n                        <li class=\"nav-item nav-folder\">\n                            <div class=\"nav-folder-title\" onclick=\"toggleNestedSection('getting-started-setup')\">\n                                <span>Setup</span>\n                                <svg class=\"nav-folder-toggle\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                                    <polyline points=\"6 9 12 15 18 9\"></polyline>\n                                </svg>\n                            </div>\n                            <ul class=\"nav-nested-items\" id=\"getting-started-setup-items\">\n                            <li class=\"nav-item\">\n                                <a href=\"#getting-started/setup/setup-installation\" class=\"nav-link\" data-content-id=\"getting-started/setup/setup-installation\" data-section-id=\"getting-started\">Installation</a>\n                            </li>\n                            <li class=\"nav-item\">\n                                <a href=\"#getting-started/setup/setup-configuration\" class=\"nav-link\" data-content-id=\"getting-started/setup/setup-configuration\" data-section-id=\"getting-started\">Configuration</a>\n                            </li>\n                            </ul>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('customization')\">\n                        <span>Customization</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"customization-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#customization/theming\" class=\"nav-link\" data-content-id=\"customization/theming\" data-section-id=\"customization\">Theming</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#customization/components\" class=\"nav-link\" data-content-id=\"customization/components\" data-section-id=\"customization\">Components</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#customization/styling\" class=\"nav-link\" data-content-id=\"customization/styling\" data-section-id=\"customization\">Custom Styling</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('advanced')\">\n                        <span>Advanced</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"advanced-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#advanced/api\" class=\"nav-link\" data-content-id=\"advanced/api\" data-section-id=\"advanced\">API Reference</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#advanced/deployment\" class=\"nav-link\" data-content-id=\"advanced/deployment\" data-section-id=\"advanced\">Deployment</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#advanced/plugins\" class=\"nav-link\" data-content-id=\"advanced/plugins\" data-section-id=\"advanced\">Plugins and Extensions</a>\n                        </li>\n                    </ul>\n                </div>\n                </div>\n            </nav>\n        </aside>\n\n        <main class=\"main-content\">\n            <div class=\"content-wrapper\">\n                <div class=\"content-area\">\n\n            <section class=\"content-section active\" id=\"introduction/what-is-glowdoc\">\n                <h1 id=\"what-is-glowdoc\">What is GlowDoc?</h1>\n<p>GlowDoc is a modern, lightweight documentation template that presents a beautiful thoughtful space for your work. It's built with pure HTML, CSS, and minimal JavaScript to ensure fast loading times and easy customization.</p>\n<h2 id=\"key-features\">Key Features</h2>\n<ul>\n<li><strong>Modern Design</strong> - Clean, professional appearance with attention to typography and spacing</li>\n<li><strong>Dark Mode</strong> - Built-in dark mode support with smooth transitions</li>\n<li><strong>Responsive</strong> - Works perfectly on desktop, tablet, and mobile devices</li>\n<li><strong>Fast</strong> - Minimal dependencies and optimized for performance</li>\n<li><strong>Accessible</strong> - Built with accessibility best practices</li>\n<li><strong>Customizable</strong> - Easy to modify colors, fonts, and layout</li>\n</ul>\n<h2 id=\"perfect-for\">Perfect For</h2>\n<p>GlowDoc is ideal for:</p>\n<ul>\n<li>Project documentation</li>\n<li>API documentation</li>\n<li>User guides and tutorials</li>\n<li>Knowledge bases</li>\n<li>Technical blogs</li>\n</ul>\n<h2 id=\"philosophy\">Philosophy</h2>\n<p>We believe documentation should be beautiful, fast, and accessible. GlowDoc follows these principles by providing a clean, distraction-free reading experience that focuses on your content.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"introduction/quick-start\">\n                <h1 id=\"quick-start\">Quick Start</h1>\n<p>Get up and running with GlowDoc in minutes. This comprehensive guide will walk you through installation, setup, and creating your first professional documentation site.</p>\n<h2 id=\"prerequisites\">Prerequisites</h2>\n<p>Before you begin, ensure you have the following installed:</p>\n<h3 id=\"required-software\">Required Software</h3>\n<p><strong>Rust (Latest Stable)</strong></p>\n<pre><code class=\"language-bash\"># Install Rust using rustup (recommended)\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\n\n# Follow the on-screen instructions, then reload your shell\nsource ~/.cargo/env\n\n# Verify installation\nrustc --version\ncargo --version\n</code></pre>\n<p><strong>Git</strong></p>\n<pre><code class=\"language-bash\"># Check if Git is installed\ngit --version\n\n# If not installed:\n# macOS: Install Xcode Command Line Tools\nxcode-select --install\n\n# Windows: Download from https://git-scm.com/download/win\n# Linux (Ubuntu/Debian): sudo apt-get install git\n</code></pre>\n<p><strong>Python 3 (for local testing)</strong></p>\n<pre><code class=\"language-bash\"># Check Python installation\npython3 --version\n\n# Python is usually pre-installed on macOS/Linux\n# Windows: Download from https://python.org\n</code></pre>\n<h3 id=\"system-requirements\">System Requirements</h3>\n<ul>\n<li><strong>Operating System</strong>: macOS, Linux, or Windows</li>\n<li><strong>RAM</strong>: 512MB minimum, 1GB recommended</li>\n<li><strong>Disk Space</strong>: 100MB for Rust toolchain + project files</li>\n<li><strong>Network</strong>: Internet connection for dependencies (initial setup only)</li>\n</ul>\n<h2 id=\"installation-options\">Installation Options</h2>\n<p>Choose the installation method that best fits your workflow:</p>\n<h3 id=\"option-1-download-release-quickest\">Option 1: Download Release (Quickest)</h3>\n<ol>\n<li>\n<p><strong>Download the latest release:</strong></p>\n<pre><code class=\"language-bash\"># Download and extract (replace URL with actual release)\ncurl -L https://github.com/username/glowdoc/archive/refs/heads/main.zip -o glowdoc.zip\nunzip glowdoc.zip\ncd glowdoc-main\n</code></pre>\n</li>\n<li>\n<p><strong>Build immediately:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h3 id=\"option-2-clone-repository-recommended-for-development\">Option 2: Clone Repository (Recommended for Development)</h3>\n<ol>\n<li>\n<p><strong>Clone the repository:</strong></p>\n<pre><code class=\"language-bash\">git clone https://github.com/username/glowdoc.git\ncd glowdoc\n</code></pre>\n</li>\n<li>\n<p><strong>Build the documentation:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h3 id=\"option-3-start-fresh-project\">Option 3: Start Fresh Project</h3>\n<ol>\n<li>\n<p><strong>Create new project directory:</strong></p>\n<pre><code class=\"language-bash\">mkdir my-docs\ncd my-docs\n</code></pre>\n</li>\n<li>\n<p><strong>Copy GlowDoc source files:</strong></p>\n<pre><code class=\"language-bash\"># Copy src/ and docs/ directories from GlowDoc\n# Copy Cargo.toml\n</code></pre>\n</li>\n<li>\n<p><strong>Initialize your documentation:</strong></p>\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n</li>\n</ol>\n<h2 id=\"project-structure-overview\">Project Structure Overview</h2>\n<p>Understanding GlowDoc's structure helps you work effectively:</p>\n<pre><code>glowdoc/\n├── Cargo.toml              # Rust project configuration\n├── src/                    # Rust source code\n│   ├── main.rs            # Main application logic\n│   └── config_builder.rs   # Configuration builder\n├── docs/                   # Your documentation source\n│   ├── config.yaml        # Navigation configuration\n│   ├── entry.md           # Homepage content (optional)\n│   ├── introduction/      # Documentation sections\n│   │   ├── quick-start.md\n│   │   └── what-is-glowdoc.md\n│   ├── getting-started/\n│   │   ├── installation.md\n│   │   ├── configuration.md\n│   │   └── first-steps.md\n│   └── [more-sections]/\n├── index.html              # Generated documentation site\n├── README.md              # Project information\n└── .gitignore             # Git ignore rules\n</code></pre>\n<h3 id=\"key-directories\">Key Directories</h3>\n<ul>\n<li><strong><code>docs/</code></strong>: Your markdown documentation files</li>\n<li><strong><code>src/</code></strong>: GlowDoc's Rust source code (modify for customization)</li>\n<li><strong><code>index.html</code></strong>: Generated single-file documentation site</li>\n</ul>\n<h2 id=\"5-minute-setup\">5-Minute Setup</h2>\n<p>Follow these steps to have a working documentation site in 5 minutes:</p>\n<h3 id=\"step-1-build-your-first-site-1-minute\">Step 1: Build Your First Site (1 minute)</h3>\n<pre><code class=\"language-bash\"># After installation, build immediately\ncargo run --release\n\n# You should see output like:\n# &quot;Building documentation...&quot;\n# &quot;Generated index.html successfully&quot;\n</code></pre>\n<h3 id=\"step-2-preview-your-site-30-seconds\">Step 2: Preview Your Site (30 seconds)</h3>\n<pre><code class=\"language-bash\"># Start local server\npython3 -m http.server 8000\n\n# Open in browser\n# Visit: http://localhost:8000\n</code></pre>\n<p><strong>Alternative server options:</strong></p>\n<pre><code class=\"language-bash\"># Node.js users\nnpx serve .\n\n# PHP users\nphp -S localhost:8000\n\n# Python 2 users\npython -m SimpleHTTPServer 8000\n</code></pre>\n<h3 id=\"step-3-verify-everything-works-30-seconds\">Step 3: Verify Everything Works (30 seconds)</h3>\n<p>Check these features in your browser:</p>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\nHomepage loads correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nNavigation sidebar works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nTheme toggle (light/dark) functions</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nSearch functionality operates</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nMobile responsive design</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll documentation pages display</li>\n</ul>\n<h3 id=\"step-4-customize-your-content-3-minutes\">Step 4: Customize Your Content (3 minutes)</h3>\n<ol>\n<li>\n<p><strong>Update site information:</strong></p>\n<pre><code class=\"language-bash\"># Edit docs/config.yaml\nvim docs/config.yaml  # or your preferred editor\n</code></pre>\n<pre><code class=\"language-yaml\">title: My Project Documentation\ndescription: Comprehensive guide for My Project\ntheme: vibrant  # or 'default' or 'purple'\n</code></pre>\n</li>\n<li>\n<p><strong>Add your homepage content:</strong></p>\n<pre><code class=\"language-bash\"># Edit docs/entry.md\nvim docs/entry.md\n</code></pre>\n<pre><code class=\"language-markdown\"># My Project Documentation\n\nWelcome to the comprehensive documentation for My Project.\n\n## Getting Started\n\nFollow our guides to get up and running quickly.\n</code></pre>\n</li>\n<li>\n<p><strong>Add your first documentation page:</strong></p>\n<pre><code class=\"language-bash\"># Create a new page\necho &quot;# My First Page\\n\\nThis is my first documentation page.&quot; &gt; docs/introduction/my-first-page.md\n</code></pre>\n</li>\n<li>\n<p><strong>Rebuild and see changes:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n# Refresh your browser\n</code></pre>\n</li>\n</ol>\n<h2 id=\"configuration-walkthrough\">Configuration Walkthrough</h2>\n<h3 id=\"automatic-configuration-recommended\">Automatic Configuration (Recommended)</h3>\n<p>Let GlowDoc detect and configure your documentation structure automatically:</p>\n<pre><code class=\"language-bash\"># Interactive configuration wizard\ncargo run init-config\n</code></pre>\n<p><strong>Example session:</strong></p>\n<pre><code>GlowDoc Configuration Builder\n============================\n\nScanning docs/ directory...\nFound 3 sections: introduction, getting-started, advanced\n\nSite title [GlowDoc]: My Project Docs\nDescription [modern docs for the modern world]: Complete guide for My Project\nTheme [vibrant]: default\n\nDetected sections:\n1. introduction (2 files)\n2. getting-started (3 files)  \n3. advanced (2 files)\n\nWould you like to reorder sections? [y/N]: y\nEnter new order (comma-separated): introduction,getting-started,advanced\n\nConfiguration saved to docs/config.yaml\nBackup created: docs/config.yaml.backup\n</code></pre>\n<h3 id=\"manual-configuration\">Manual Configuration</h3>\n<p>For precise control, edit <code>docs/config.yaml</code> directly:</p>\n<pre><code class=\"language-yaml\">title: My Project Documentation\ndescription: Everything you need to know about My Project\ntheme: vibrant\n\nnavigation:\n  - title: Introduction\n    id: introduction\n    items:\n      - title: Overview\n        id: overview\n        file: introduction/overview.md\n      - title: Quick Start\n        id: quick-start\n        file: introduction/quick-start.md\n  \n  - title: User Guide\n    id: user-guide\n    items:\n      - title: Installation\n        id: installation\n        file: guide/installation.md\n      - title: Configuration\n        id: configuration\n        file: guide/configuration.md\n</code></pre>\n<h3 id=\"command-line-configuration\">Command-Line Configuration</h3>\n<p>For automated workflows, use CLI arguments:</p>\n<pre><code class=\"language-bash\"># Complete automated setup\ncargo run init-config \\\n  --title &quot;My Project Docs&quot; \\\n  --description &quot;Comprehensive project documentation&quot; \\\n  --section-order introduction,guide,api,advanced \\\n  --rename-section guide=&quot;User Guide&quot; \\\n  --rename-section api=&quot;API Reference&quot; \\\n  --page-order guide=installation.md,configuration.md,usage.md \\\n  --exclude-section drafts\n</code></pre>\n<h2 id=\"content-creation-guide\">Content Creation Guide</h2>\n<h3 id=\"writing-effective-documentation\">Writing Effective Documentation</h3>\n<h4 id=\"markdown-basics\">Markdown Basics</h4>\n<p>GlowDoc supports GitHub-flavored markdown with extensions:</p>\n<pre><code class=\"language-markdown\"># Page Title (H1 - use only once per page)\n\n## Section Heading (H2)\n\n### Subsection (H3)\n\n**Bold text** and *italic text*\n\n- Bullet points\n- Another item\n\n1. Numbered lists\n2. Sequential items\n\n`inline code` and:\n\n```javascript\n// Code blocks with syntax highlighting\nfunction example() {\n  return &quot;Hello, World!&quot;;\n}\n</code></pre>\n<blockquote>\n<p>Blockquotes for important information</p>\n</blockquote>\n<p><a href=\"other-page.md\">Links to other pages</a>\n<a href=\"https://example.com\">External links</a></p>\n<table><thead><tr><th>Tables</th><th>Are</th><th>Supported</th></tr></thead><tbody>\n<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>\n</tbody></table>\n<pre><code>\n#### Page Structure Best Practices\n\n```markdown\n# Clear, Descriptive Page Title\n\nBrief introduction paragraph explaining what this page covers.\n\n## Main Concepts\n\nExplain the core concepts first.\n\n### Detailed Subsection\n\nBreak down complex topics into digestible sections.\n\n## Examples\n\nProvide practical examples:\n\n```bash\n# Command examples\ncargo run --release\n</code></pre>\n<h2 id=\"next-steps\">Next Steps</h2>\n<p>Guide readers to related pages or next actions.</p>\n<pre><code>\n### Organizing Your Content\n\n#### Recommended Structure\n\n</code></pre>\n<p>docs/\n├── config.yaml\n├── entry.md              # Homepage content\n├── introduction/         # High-level overview\n│   ├── overview.md       # What is your project?\n│   ├── quick-start.md    # This page\n│   └── concepts.md       # Core concepts\n├── guides/               # Step-by-step instructions\n│   ├── installation.md\n│   ├── configuration.md\n│   ├── first-project.md\n│   └── troubleshooting.md\n├── reference/            # Detailed technical info\n│   ├── api.md\n│   ├── cli.md\n│   └── configuration-reference.md\n└── advanced/             # Advanced topics\n├── customization.md\n├── plugins.md\n└── deployment.md</p>\n<pre><code>\n#### Content Guidelines\n\n1. **Start with user goals**: What does the reader want to accomplish?\n2. **Use progressive disclosure**: Basic info first, details later\n3. **Include examples**: Show, don't just tell\n4. **Test your instructions**: Verify steps work as documented\n5. **Update regularly**: Keep content current with your project\n\n### Adding New Pages\n\n1. **Create the markdown file:**\n   ```bash\n   # Create in appropriate section\n   touch docs/guides/new-feature.md\n</code></pre>\n<ol start=\"2\">\n<li>\n<p><strong>Add content with H1 title:</strong></p>\n<pre><code class=\"language-markdown\"># New Feature Guide\n\nThis guide explains how to use the new feature.\n</code></pre>\n</li>\n<li>\n<p><strong>Update configuration:</strong></p>\n<pre><code class=\"language-bash\"># Auto-detect and add to navigation\ncargo run init-config\n\n# Or manually edit docs/config.yaml\n</code></pre>\n</li>\n<li>\n<p><strong>Rebuild documentation:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h2 id=\"theme-customization\">Theme Customization</h2>\n<h3 id=\"built-in-themes\">Built-in Themes</h3>\n<p>GlowDoc includes three professionally designed themes:</p>\n<pre><code class=\"language-yaml\"># In docs/config.yaml\ntheme: default  # Clean, professional\ntheme: purple   # Purple accents\ntheme: vibrant  # Colorful, energetic\n</code></pre>\n<h3 id=\"quick-theme-preview\">Quick Theme Preview</h3>\n<pre><code class=\"language-bash\"># Try different themes quickly\nsed -i 's/theme: .*/theme: purple/' docs/config.yaml &amp;&amp; cargo run --release\nsed -i 's/theme: .*/theme: vibrant/' docs/config.yaml &amp;&amp; cargo run --release\nsed -i 's/theme: .*/theme: default/' docs/config.yaml &amp;&amp; cargo run --release\n</code></pre>\n<h3 id=\"dark-mode\">Dark Mode</h3>\n<p>All themes include automatic dark mode:</p>\n<ul>\n<li><strong>System preference detection</strong>: Respects user's OS setting</li>\n<li><strong>Manual toggle</strong>: Click the theme button in header</li>\n<li><strong>Persistent choice</strong>: Remembers user preference</li>\n</ul>\n<h2 id=\"development-workflow\">Development Workflow</h2>\n<h3 id=\"efficient-development-loop\">Efficient Development Loop</h3>\n<pre><code class=\"language-bash\"># 1. Edit your markdown files\nvim docs/guides/new-page.md\n\n# 2. Rebuild (takes ~1-3 seconds)\ncargo run --release\n\n# 3. Refresh browser (server keeps running)\n# No need to restart python server\n</code></pre>\n<h3 id=\"file-watching-optional\">File Watching (Optional)</h3>\n<p>For automatic rebuilds on file changes:</p>\n<pre><code class=\"language-bash\"># Install cargo-watch\ncargo install cargo-watch\n\n# Watch for changes and rebuild\ncargo watch -x &quot;run --release&quot;\n</code></pre>\n<h3 id=\"version-control-integration\">Version Control Integration</h3>\n<pre><code class=\"language-bash\"># Initialize git repository\ngit init\n\n# Add files (excluding generated content)\ngit add .\ngit commit -m &quot;Initial documentation setup&quot;\n\n# .gitignore should include:\necho &quot;target/&quot; &gt;&gt; .gitignore\necho &quot;index.html&quot; &gt;&gt; .gitignore  # Generated file\n</code></pre>\n<h2 id=\"testing-your-documentation\">Testing Your Documentation</h2>\n<h3 id=\"pre-deployment-checklist\">Pre-Deployment Checklist</h3>\n<pre><code class=\"language-bash\"># 1. Build successfully\ncargo run --release\n\n# 2. Check file size (should be reasonable)\nls -lh index.html\n\n# 3. Validate HTML (optional)\n# Install html-validate: npm install -g html-validate\nhtml-validate index.html\n\n# 4. Test locally\npython3 -m http.server 8000\n</code></pre>\n<h3 id=\"manual-testing\">Manual Testing</h3>\n<p>Visit <code>http://localhost:8000</code> and verify:</p>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Navigation</strong>: All links work correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Search</strong>: Finds content in titles and text</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Themes</strong>: Light/dark mode toggle works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Mobile</strong>: Sidebar collapses, navigation works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Content</strong>: All pages display properly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Links</strong>: Internal and external links function</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Performance</strong>: Pages load quickly</li>\n</ul>\n<h3 id=\"accessibility-testing\">Accessibility Testing</h3>\n<pre><code class=\"language-bash\"># Install axe-core CLI (optional)\nnpm install -g @axe-core/cli\n\n# Test accessibility\naxe http://localhost:8000\n</code></pre>\n<h2 id=\"common-issues-and-solutions\">Common Issues and Solutions</h2>\n<h3 id=\"build-problems\">Build Problems</h3>\n<p><strong>&quot;cargo: command not found&quot;</strong></p>\n<pre><code class=\"language-bash\"># Install Rust\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\nsource ~/.cargo/env\n</code></pre>\n<p><strong>&quot;No such file or directory: docs/config.yaml&quot;</strong></p>\n<pre><code class=\"language-bash\"># Generate configuration\ncargo run init-config\n</code></pre>\n<p><strong>Build errors after editing config.yaml</strong></p>\n<pre><code class=\"language-bash\"># Validate YAML syntax\npython3 -c &quot;import yaml; yaml.safe_load(open('docs/config.yaml'))&quot;\n\n# Check file references exist\nls docs/introduction/quick-start.md\n</code></pre>\n<h3 id=\"server-issues\">Server Issues</h3>\n<p><strong>&quot;Address already in use&quot;</strong></p>\n<pre><code class=\"language-bash\"># Find and kill process using port 8000\nlsof -ti:8000 | xargs kill\n\n# Or use different port\npython3 -m http.server 8080\n</code></pre>\n<p><strong>Browser shows &quot;No such file or directory&quot;</strong></p>\n<pre><code class=\"language-bash\"># Ensure you're in the correct directory\nls index.html\n\n# Rebuild if missing\ncargo run --release\n</code></pre>\n<h3 id=\"content-problems\">Content Problems</h3>\n<p><strong>Page not appearing in navigation</strong></p>\n<pre><code class=\"language-bash\"># Ensure file is referenced in config.yaml\ngrep -r &quot;filename.md&quot; docs/config.yaml\n\n# Or regenerate config\ncargo run init-config\n</code></pre>\n<p><strong>Search not finding content</strong></p>\n<pre><code class=\"language-bash\"># Rebuild to update search index\ncargo run --release\n\n# Check file has H1 heading\nhead -5 docs/section/page.md\n</code></pre>\n<h2 id=\"next-steps\">Next Steps</h2>\n<p>Congratulations! You now have a working GlowDoc site. Here's what to explore next:</p>\n<h3 id=\"immediate-actions\">Immediate Actions</h3>\n<ol>\n<li>\n<p><strong>Add Your Content</strong></p>\n<ul>\n<li>Replace sample content with your documentation</li>\n<li>Update <code>docs/entry.md</code> with your project information</li>\n<li>Add pages for your specific use cases</li>\n</ul>\n</li>\n<li>\n<p><strong>Customize Appearance</strong></p>\n<ul>\n<li>Try different themes in <code>config.yaml</code></li>\n<li>Explore advanced styling options</li>\n<li>Add your logo or branding</li>\n</ul>\n</li>\n<li>\n<p><strong>Test Thoroughly</strong></p>\n<ul>\n<li>Verify all navigation works</li>\n<li>Test search functionality</li>\n<li>Check mobile responsiveness</li>\n</ul>\n</li>\n</ol>\n<h3 id=\"advanced-features\">Advanced Features</h3>\n<ol>\n<li>\n<p><strong>Learn Configuration Management</strong></p>\n<ul>\n<li>Read the <a href=\"../getting-started/configuration.md\">Configuration Guide</a></li>\n<li>Understand navigation structure options</li>\n<li>Explore CLI automation features</li>\n</ul>\n</li>\n<li>\n<p><strong>Explore Customization</strong></p>\n<ul>\n<li>Check out <a href=\"../customization/styling.md\">Custom Styling</a></li>\n<li>Learn about <a href=\"../customization/components.md\">Components</a></li>\n<li>Discover <a href=\"../customization/theming.md\">Theming</a> options</li>\n</ul>\n</li>\n<li>\n<p><strong>Plan Deployment</strong></p>\n<ul>\n<li>Review <a href=\"../advanced/deployment.md\">Deployment Options</a></li>\n<li>Set up automated builds</li>\n<li>Choose your hosting platform</li>\n</ul>\n</li>\n<li>\n<p><strong>Extend Functionality</strong></p>\n<ul>\n<li>Explore <a href=\"../advanced/plugins.md\">Plugins</a></li>\n<li>Check the <a href=\"../advanced/api.md\">API Reference</a></li>\n<li>Consider custom integrations</li>\n</ul>\n</li>\n</ol>\n<h3 id=\"community-and-support\">Community and Support</h3>\n<ul>\n<li><strong>Documentation</strong>: Continue with <a href=\"../getting-started/first-steps.md\">First Steps</a></li>\n<li><strong>Examples</strong>: Browse sample configurations and setups</li>\n<li><strong>Issues</strong>: Report problems or request features</li>\n<li><strong>Contributions</strong>: Help improve GlowDoc</li>\n</ul>\n<h3 id=\"pro-tips\">Pro Tips</h3>\n<ol>\n<li><strong>Keep It Simple</strong>: Start with basic setup, add complexity gradually</li>\n<li><strong>Test Early</strong>: Preview changes frequently during development</li>\n<li><strong>Version Control</strong>: Commit documentation changes regularly</li>\n<li><strong>User Focus</strong>: Write for your audience, not yourself</li>\n<li><strong>Iterate</strong>: Improve documentation based on user feedback</li>\n</ol>\n<p>You're now ready to create professional, beautiful documentation with GlowDoc. Happy documenting!</p>\n\n            </section>\n            <section class=\"content-section\" id=\"getting-started/first-steps\">\n                <h1 id=\"first-steps\">First Steps</h1>\n<p>Now that you have GlowDoc installed, let's build your first documentation site step by step.</p>\n<h2 id=\"1-initialize-your-project\">1. Initialize Your Project</h2>\n<p>Start by setting up the basic structure for your documentation:</p>\n<pre><code class=\"language-bash\"># Create a new project directory\nmkdir my-docs\ncd my-docs\n\n# Download or clone GlowDoc\n# Then copy the src/ and docs/ folders to your project\n</code></pre>\n<h2 id=\"2-generate-your-configuration\">2. Generate Your Configuration</h2>\n<p>Use the interactive config builder to set up your site structure:</p>\n<pre><code class=\"language-bash\"># Interactive mode - walks you through setup\ncargo run init-config\n</code></pre>\n<p>This will:</p>\n<ul>\n<li>Scan any existing markdown files in <code>docs/</code></li>\n<li>Extract page titles from H1 headers</li>\n<li>Generate a <code>docs/config.yaml</code> file</li>\n<li>Create a backup of any existing configuration</li>\n</ul>\n<h3 id=\"example-interactive-session\">Example Interactive Session</h3>\n<pre><code>GlowDoc Configuration Builder\n============================\n\nSite title [GlowDoc]: My Project Documentation\nDescription [modern docs for the modern world]: Comprehensive guide for My Project\n\nFound 3 sections in docs/:\n  1. introduction (2 files)\n  2. getting-started (3 files)  \n  3. api (1 file)\n\nWould you like to reorder sections? [y/N]: y\nEnter section order (comma-separated): introduction,getting-started,api\n\nConfiguration saved to docs/config.yaml\n</code></pre>\n<h2 id=\"3-create-your-content\">3. Create Your Content</h2>\n<h3 id=\"homepage-content\">Homepage Content</h3>\n<p>Create or edit <code>docs/entry.md</code> for your homepage:</p>\n<pre><code class=\"language-markdown\"># My Project Documentation\n\nWelcome to the comprehensive documentation for My Project.\n\n## Getting Started\n\nFollow our step-by-step guides to get up and running quickly.\n\n## Key Features\n\n- Feature 1: Description\n- Feature 2: Description\n- Feature 3: Description\n</code></pre>\n<h3 id=\"add-documentation-pages\">Add Documentation Pages</h3>\n<p>Create markdown files in organized folders:</p>\n<pre><code>docs/\n├── entry.md\n├── config.yaml\n├── introduction/\n│   ├── overview.md\n│   └── installation.md\n├── guides/\n│   ├── quick-start.md\n│   ├── configuration.md\n│   └── advanced-usage.md\n└── reference/\n    └── api.md\n</code></pre>\n<p>Each markdown file should start with an H1 header:</p>\n<pre><code class=\"language-markdown\"># Page Title\n\nYour content here...\n\n## Section\n\nMore content...\n</code></pre>\n<h2 id=\"4-start-development-server\">4. Start Development Server</h2>\n<p>For the best development experience, use the built-in development server with hot reload:</p>\n<pre><code class=\"language-bash\"># Start development server (recommended)\ncargo run watch\n</code></pre>\n<p>This will:</p>\n<ul>\n<li>Build your documentation site</li>\n<li>Start HTTP server at http://localhost:8000</li>\n<li>Watch for file changes in <code>docs/</code></li>\n<li>Automatically rebuild and refresh your browser when files change</li>\n<li>Serve images and static assets from your docs folder</li>\n</ul>\n<p><strong>Alternative: One-time Build</strong></p>\n<p>If you prefer to build once and serve with a separate server:</p>\n<pre><code class=\"language-bash\"># Build the complete site once\ncargo run --release\n\n# Serve with any static server\npython3 -m http.server 8000\n</code></pre>\n<p>Visit <code>http://localhost:8000</code> to see your documentation site.</p>\n<h2 id=\"5-add-images-and-assets\">5. Add Images and Assets</h2>\n<p>Place images and other static files in your <code>docs/</code> directory:</p>\n<pre><code>docs/\n├── images/\n│   ├── logo.png\n│   └── screenshots/\n│       └── demo.jpg\n├── assets/\n│   └── diagram.svg\n└── getting-started/\n    └── tutorial.md\n</code></pre>\n<p>Reference them in your markdown:</p>\n<pre><code class=\"language-markdown\">![Logo](images/logo.png)\n![Demo Screenshot](images/screenshots/demo.jpg)\n![Architecture](assets/diagram.svg)\n</code></pre>\n<p>The development server (<code>cargo run watch</code>) automatically serves these assets. Supported formats include:</p>\n<ul>\n<li><strong>Images</strong>: PNG, JPG, GIF, SVG, WebP</li>\n<li><strong>Documents</strong>: PDF, TXT, MD</li>\n<li><strong>Media</strong>: MP3, MP4, WebM</li>\n<li><strong>Fonts</strong>: WOFF, TTF, OTF</li>\n</ul>\n<h2 id=\"6-customize-the-appearance\">6. Customize the Appearance</h2>\n<h3 id=\"update-site-information\">Update Site Information</h3>\n<p>Edit <code>docs/config.yaml</code> to customize your site:</p>\n<pre><code class=\"language-yaml\">title: My Project Documentation\ndescription: Everything you need to know about My Project\ntheme: vibrant  # or 'default'\n</code></pre>\n<h3 id=\"adjust-navigation\">Adjust Navigation</h3>\n<p>Reorder sections and pages by editing the navigation structure:</p>\n<pre><code class=\"language-yaml\">navigation:\n  - title: Introduction\n    id: introduction\n    items:\n      - title: Overview\n        id: overview\n        file: introduction/overview.md\n      - title: Installation\n        id: installation\n        file: introduction/installation.md\n</code></pre>\n<h3 id=\"rebuild-after-changes\">Rebuild After Changes</h3>\n<p><strong>With Development Server (Recommended):</strong></p>\n<ul>\n<li>Changes are automatically detected and applied</li>\n<li>Browser refreshes automatically</li>\n<li>No manual rebuilding needed</li>\n</ul>\n<p><strong>With Manual Builds:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n<h2 id=\"7-development-workflow\">7. Development Workflow</h2>\n<h3 id=\"hot-reload-development-recommended\">Hot Reload Development (Recommended)</h3>\n<p>Use the development server for the fastest workflow:</p>\n<pre><code class=\"language-bash\"># Start development server\ncargo run watch\n\n# Then edit files in docs/ - changes appear instantly!\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li><strong>Instant rebuilds</strong> when you save files</li>\n<li><strong>Automatic browser refresh</strong></li>\n<li><strong>Static asset serving</strong> (images, fonts, etc.)</li>\n<li><strong>Error reporting</strong> in console</li>\n<li><strong>Debounced updates</strong> (prevents duplicate builds)</li>\n</ul>\n<h3 id=\"manual-build-workflow\">Manual Build Workflow</h3>\n<p>For production builds or when you prefer manual control:</p>\n<pre><code class=\"language-bash\"># 1. Edit markdown files in docs/\n# 2. Rebuild the site\ncargo run --release\n\n# 3. Refresh browser to see changes\n# (No need to restart the server)\n</code></pre>\n<h3 id=\"adding-new-pages\">Adding New Pages</h3>\n<p><strong>With Development Server:</strong></p>\n<ol>\n<li>Create the markdown file in the appropriate <code>docs/</code> subfolder</li>\n<li>Run the config generator to update navigation:\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n</li>\n<li>The site rebuilds automatically - no manual rebuild needed!</li>\n</ol>\n<p><strong>With Manual Builds:</strong></p>\n<ol>\n<li>Create the markdown file in the appropriate <code>docs/</code> subfolder</li>\n<li>Run the config generator to update navigation:\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n</li>\n<li>Rebuild the site:\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h3 id=\"reorganizing-content\">Reorganizing Content</h3>\n<p>Use CLI options for batch updates:</p>\n<pre><code class=\"language-bash\"># Reorder sections and rename them\ncargo run init-config \\\n  --section-order intro,guide,reference \\\n  --rename-section intro=&quot;Getting Started&quot; \\\n  --rename-section guide=&quot;User Guide&quot;\n</code></pre>\n<h2 id=\"next-steps\">Next Steps</h2>\n<p>Now that you have a working documentation site:</p>\n<ol>\n<li><strong>Explore Customization</strong>: Learn about theming and styling options</li>\n<li><strong>Add More Content</strong>: Expand your documentation with additional pages</li>\n<li><strong>Deploy Your Site</strong>: Set up hosting for your documentation</li>\n<li><strong>Advanced Features</strong>: Explore plugins and advanced configuration</li>\n</ol>\n<h2 id=\"common-tasks\">Common Tasks</h2>\n<h3 id=\"adding-a-new-section\">Adding a New Section</h3>\n<ol>\n<li>Create a new folder in <code>docs/</code>: <code>mkdir docs/new-section</code></li>\n<li>Add markdown files to the folder</li>\n<li>Run <code>cargo run init-config</code> to detect the new section</li>\n<li>Rebuild: <code>cargo run --release</code></li>\n</ol>\n<h3 id=\"reordering-pages\">Reordering Pages</h3>\n<pre><code class=\"language-bash\">cargo run init-config --page-order section=page1.md,page2.md,page3.md\n</code></pre>\n<h3 id=\"excluding-draft-content\">Excluding Draft Content</h3>\n<pre><code class=\"language-bash\">cargo run init-config --exclude-section drafts\n</code></pre>\n<h3 id=\"custom-page-titles\">Custom Page Titles</h3>\n<p>Override auto-detected titles in <code>docs/config.yaml</code>:</p>\n<pre><code class=\"language-yaml\">- title: Custom Navigation Title\n  id: page-id\n  file: section/actual-filename.md\n</code></pre>\n<h2 id=\"troubleshooting\">Troubleshooting</h2>\n<p><strong>Build errors</strong>: Check that all files referenced in <code>config.yaml</code> exist and paths are correct.</p>\n<p><strong>Missing navigation</strong>: Ensure your markdown files have H1 headers and are included in the config.</p>\n<p><strong>Styling issues</strong>: Verify the theme setting in config.yaml and rebuild the site.</p>\n<p><strong>Server not accessible</strong>: Check that the server is running and try <code>http://localhost:8000</code> instead of <code>127.0.0.1</code>.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"getting-started/setup/setup-installation\">\n                <h1 id=\"installation\">Installation</h1>\n<p>GlowDoc is designed to be simple to set up. Choose the method that works best for your workflow.</p>\n<h2 id=\"download-template\">Download Template</h2>\n<p>The easiest way to get started is to download the template directly:</p>\n<pre><code class=\"language-bash\"># Download and extract\nwget https://github.com/paradise-runner/glowdoc/archive/main.zip\nunzip main.zip\ncd glowdoc-main\n</code></pre>\n<h2 id=\"clone-repository\">Clone Repository</h2>\n<p>If you prefer to clone the repository:</p>\n<pre><code class=\"language-bash\"># Clone the repository\ngit clone https://github.com/paradise-runner/glowdoc.git\ncd glowdoc\n\n# Remove git history (optional)\nrm -rf .git\ngit init\n</code></pre>\n<h2 id=\"use-as-template\">Use as Template</h2>\n<p>Create a new repository using GlowDoc as a template on GitHub, then clone your new repository.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"getting-started/setup/setup-configuration\">\n                <h1 id=\"configuration\">Configuration</h1>\n<p>GlowDoc provides flexible configuration options to customize your documentation site. All configuration is managed through the <code>docs/config.yaml</code> file.</p>\n<h2 id=\"config-yaml-overview\">config.yaml Overview</h2>\n<p>The configuration file controls your site's structure, navigation, and appearance:</p>\n<pre><code class=\"language-yaml\">title: GlowDoc\ndescription: modern docs for the modern world\ntheme: vibrant\nnavigation:\n  - title: Introduction\n    id: introduction\n    items:\n      - title: What is GlowDoc?\n        id: what-is-glowdoc\n        file: introduction/what-is-glowdoc.md\n</code></pre>\n<h2 id=\"auto-generate-configuration\">Auto-Generate Configuration</h2>\n<p>The easiest way to create or update your configuration is using the built-in generator:</p>\n<h3 id=\"interactive-mode\">Interactive Mode</h3>\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n<p>This launches an interactive wizard that:</p>\n<ul>\n<li>Scans your <code>docs/</code> folder structure</li>\n<li>Detects existing markdown files</li>\n<li>Extracts page titles from H1 headers</li>\n<li>Guides you through customization options</li>\n<li>Backs up your existing config before generating a new one</li>\n</ul>\n<h3 id=\"command-line-mode\">Command-Line Mode</h3>\n<p>For automated workflows, use CLI arguments:</p>\n<pre><code class=\"language-bash\">cargo run init-config \\\n  --title &quot;My Project&quot; \\\n  --description &quot;Comprehensive project documentation&quot; \\\n  --section-order introduction,guide,api,advanced \\\n  --rename-section guide=&quot;User Guide&quot; \\\n  --rename-page guide/setup.md=&quot;Installation Guide&quot; \\\n  --page-order guide=setup.md,configuration.md,usage.md \\\n  --exclude-section drafts\n</code></pre>\n<h3 id=\"available-cli-options\">Available CLI Options</h3>\n<ul>\n<li><code>--title &quot;Site Title&quot;</code> - Set the site title</li>\n<li><code>--description &quot;Description&quot;</code> - Set the site description</li>\n<li><code>--section-order folder1,folder2</code> - Reorder sections by folder names</li>\n<li><code>--rename-section old=new</code> - Rename section titles in navigation</li>\n<li><code>--rename-page section/file.md=&quot;New Title&quot;</code> - Override page titles</li>\n<li><code>--page-order section=file1.md,file2.md</code> - Reorder pages within sections</li>\n<li><code>--exclude-section folder</code> - Exclude folders from navigation</li>\n<li><code>--help</code> - Show complete usage guide</li>\n</ul>\n<h2 id=\"manual-configuration\">Manual Configuration</h2>\n<h3 id=\"basic-settings\">Basic Settings</h3>\n<pre><code class=\"language-yaml\">title: Your Project Name\ndescription: Brief description for SEO and page meta\ntheme: vibrant  # or 'default'\n</code></pre>\n<h3 id=\"navigation-structure\">Navigation Structure</h3>\n<p>Navigation follows a hierarchical structure with sections and items:</p>\n<pre><code class=\"language-yaml\">navigation:\n  - title: Section Name\n    id: unique-section-id\n    items:\n      - title: Page Title\n        id: unique-page-id\n        file: folder/filename.md\n</code></pre>\n<p><strong>Key Rules:</strong></p>\n<ul>\n<li>Section <code>id</code> must be unique across all sections</li>\n<li>Page <code>id</code> must be unique across all pages</li>\n<li><code>file</code> path is relative to the <code>docs/</code> folder</li>\n<li>Pages are displayed in the order they appear in the config</li>\n</ul>\n<h3 id=\"themes\">Themes</h3>\n<p>GlowDoc includes built-in themes:</p>\n<ul>\n<li><code>default</code> - Clean, professional appearance</li>\n<li><code>vibrant</code> - Bold colors with enhanced contrast</li>\n</ul>\n<h2 id=\"file-organization\">File Organization</h2>\n<h3 id=\"recommended-structure\">Recommended Structure</h3>\n<pre><code>docs/\n├── config.yaml          # Navigation configuration\n├── entry.md            # Homepage content (optional)\n├── introduction/\n│   ├── overview.md\n│   └── quick-start.md\n├── guides/\n│   ├── installation.md\n│   └── configuration.md\n└── reference/\n    ├── api.md\n    └── cli.md\n</code></pre>\n<h3 id=\"markdown-files\">Markdown Files</h3>\n<p>Each markdown file should start with an H1 header:</p>\n<pre><code class=\"language-markdown\"># Page Title\n\nContent goes here...\n</code></pre>\n<p>The H1 title is automatically extracted during config generation and used as the default page title.</p>\n<h2 id=\"advanced-configuration\">Advanced Configuration</h2>\n<h3 id=\"custom-page-titles\">Custom Page Titles</h3>\n<p>Override the auto-detected title from the markdown H1:</p>\n<pre><code class=\"language-yaml\">- title: Custom Page Title  # Shows in navigation\n  id: custom-page\n  file: section/actual-filename.md  # H1 in file can be different\n</code></pre>\n<h3 id=\"section-ordering\">Section Ordering</h3>\n<p>Control the order sections appear in navigation:</p>\n<pre><code class=\"language-bash\">cargo run init-config --section-order introduction,tutorial,reference,advanced\n</code></pre>\n<h3 id=\"page-ordering\">Page Ordering</h3>\n<p>Control the order pages appear within each section:</p>\n<pre><code class=\"language-bash\">cargo run init-config --page-order tutorial=setup.md,basics.md,advanced.md\n</code></pre>\n<h2 id=\"development-workflow\">Development Workflow</h2>\n<ol>\n<li><strong>Edit Configuration</strong>: Modify <code>docs/config.yaml</code> or use <code>cargo run init-config</code></li>\n<li><strong>Update Content</strong>: Edit markdown files in the <code>docs/</code> folder</li>\n<li><strong>Rebuild Site</strong>: Run <code>cargo run --release</code> to regenerate <code>index.html</code></li>\n<li><strong>Preview Changes</strong>: Use <code>python3 -m http.server 8000</code> to serve locally</li>\n</ol>\n<h2 id=\"troubleshooting\">Troubleshooting</h2>\n<h3 id=\"common-issues\">Common Issues</h3>\n<p><strong>Config validation errors:</strong> Ensure all <code>id</code> fields are unique and all referenced files exist.</p>\n<p><strong>Missing pages:</strong> Check that file paths in config.yaml are correct and relative to the <code>docs/</code> folder.</p>\n<p><strong>Build failures:</strong> Verify YAML syntax in config.yaml using a YAML validator.</p>\n<h3 id=\"backup-and-recovery\">Backup and Recovery</h3>\n<p>The config generator automatically creates backups:</p>\n<ul>\n<li><code>docs/config.yaml.backup</code> - Created before generating new config</li>\n<li>Manual backup: <code>cp docs/config.yaml docs/config.yaml.manual-backup</code></li>\n</ul>\n\n            </section>\n            <section class=\"content-section\" id=\"customization/theming\">\n                <h1 id=\"theming\">Theming</h1>\n<p>GlowDoc features a sophisticated theming system built on CSS custom properties, supporting multiple color schemes and seamless dark mode switching.</p>\n<h2 id=\"built-in-themes\">Built-in Themes</h2>\n<p>GlowDoc includes three professionally designed themes:</p>\n<h3 id=\"default-theme\">Default Theme</h3>\n<p>Clean, neutral design perfect for professional documentation:</p>\n<pre><code class=\"language-yaml\"># In docs/config.yaml\ntheme: default\n</code></pre>\n<h3 id=\"purple-theme\">Purple Theme</h3>\n<p>Purple-accented design with elegant color tones:</p>\n<pre><code class=\"language-yaml\">theme: purple\n</code></pre>\n<h3 id=\"vibrant-theme\">Vibrant Theme</h3>\n<p>Colorful, energetic design with bold accents:</p>\n<pre><code class=\"language-yaml\">theme: vibrant\n</code></pre>\n<h2 id=\"color-system-architecture\">Color System Architecture</h2>\n<p>GlowDoc uses a semantic color system with HSL values for precise color control and smooth transitions.</p>\n<h3 id=\"core-color-properties\">Core Color Properties</h3>\n<p>All themes use the same CSS custom property structure:</p>\n<pre><code class=\"language-css\">:root {\n  /* Background colors */\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  \n  /* Component backgrounds */\n  --card: 0 0% 100%;\n  --card-foreground: 222.2 84% 4.9%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 222.2 84% 4.9%;\n  \n  /* Semantic colors */\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n  --secondary: 210 40% 96%;\n  --secondary-foreground: 222.2 84% 4.9%;\n  --muted: 210 40% 96%;\n  --muted-foreground: 215.4 16.3% 46.9%;\n  \n  /* Interactive elements */\n  --accent: 210 40% 96%;\n  --accent-foreground: 222.2 84% 4.9%;\n  --destructive: 0 84.2% 60.2%;\n  --destructive-foreground: 210 40% 98%;\n  \n  /* UI elements */\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 222.2 84% 4.9%;\n  --radius: 0.5rem;\n}\n</code></pre>\n<h3 id=\"dark-mode-support\">Dark Mode Support</h3>\n<p>Each theme automatically includes dark mode variants:</p>\n<pre><code class=\"language-css\">[data-theme=&quot;dark&quot;] {\n  --background: 222.2 84% 4.9%;\n  --foreground: 210 40% 98%;\n  /* ... other dark mode overrides */\n}\n</code></pre>\n<p><strong>Dark Mode Features:</strong></p>\n<ul>\n<li>Automatic system preference detection</li>\n<li>Manual toggle with LocalStorage persistence</li>\n<li>Smooth 0.3s transitions between themes</li>\n<li>Optimized contrast ratios for readability</li>\n</ul>\n<h2 id=\"typography-system\">Typography System</h2>\n<h3 id=\"font-stack\">Font Stack</h3>\n<p>GlowDoc uses a carefully selected system font stack for optimal performance and cross-platform consistency:</p>\n<pre><code class=\"language-css\">font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, \n             Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;\n</code></pre>\n<h3 id=\"typography-scale\">Typography Scale</h3>\n<p><strong>Homepage Typography:</strong></p>\n<ul>\n<li><strong>Main Heading (H1):</strong> 3rem (48px), weight 800, gradient text effect</li>\n<li><strong>Section Headings (H2):</strong> 1.75rem (28px), weight 600</li>\n<li><strong>Body Text:</strong> 1.125rem (18px) for enhanced readability</li>\n</ul>\n<p><strong>Content Typography:</strong></p>\n<ul>\n<li><strong>Page Titles (H1):</strong> 2.5rem (40px), weight 700</li>\n<li><strong>Section Headings (H2):</strong> 1.75rem (28px), weight 600</li>\n<li><strong>Body Text:</strong> 1rem (16px) for optimal reading</li>\n<li><strong>Navigation:</strong> 0.875rem (14px), weight 500-600</li>\n<li><strong>Code:</strong> 0.875rem (14px) monospace</li>\n</ul>\n<h3 id=\"special-typography-effects\">Special Typography Effects</h3>\n<p><strong>Gradient Text (Homepage):</strong></p>\n<pre><code class=\"language-css\">background: linear-gradient(135deg, \n  hsl(var(--primary)), \n  hsl(var(--accent))\n);\n-webkit-background-clip: text;\ncolor: transparent;\n</code></pre>\n<h2 id=\"spacing-system\">Spacing System</h2>\n<p>GlowDoc uses a consistent spacing scale based on rem units:</p>\n<pre><code class=\"language-css\">/* Spacing scale */\n--space-1: 0.25rem;  /* 4px */\n--space-2: 0.5rem;   /* 8px */\n--space-3: 0.75rem;  /* 12px */\n--space-4: 1rem;     /* 16px */\n--space-6: 1.5rem;   /* 24px */\n--space-8: 2rem;     /* 32px */\n--space-16: 4rem;    /* 64px */\n</code></pre>\n<p><strong>Common Usage:</strong></p>\n<ul>\n<li>Small margins: <code>0.25rem</code> (4px)</li>\n<li>Button padding: <code>0.5rem</code> (8px)</li>\n<li>Standard spacing: <code>1rem</code> (16px)</li>\n<li>Section gaps: <code>1.5rem</code> (24px)</li>\n<li>Content padding: <code>2rem</code> (32px)</li>\n<li>Large sections: <code>4rem</code> (64px)</li>\n</ul>\n<h2 id=\"custom-theme-creation\">Custom Theme Creation</h2>\n<h3 id=\"1-modify-existing-theme\">1. Modify Existing Theme</h3>\n<p>To customize an existing theme, you'll need to modify the CSS generation in the Rust source:</p>\n<p><strong>Location:</strong> <code>src/main.rs</code> in the <code>generate_css()</code> function</p>\n<h3 id=\"2-color-customization\">2. Color Customization</h3>\n<p>Update the HSL values for any theme:</p>\n<pre><code class=\"language-css\">:root {\n  /* Change primary brand color */\n  --primary: 220 70% 50%;  /* Blue instead of dark gray */\n  --primary-foreground: 0 0% 100%;\n  \n  /* Adjust accent color */\n  --accent: 160 60% 45%;   /* Teal accent */\n  --accent-foreground: 0 0% 100%;\n}\n</code></pre>\n<h3 id=\"3-typography-customization\">3. Typography Customization</h3>\n<p><strong>Custom Font Integration:</strong></p>\n<pre><code class=\"language-css\">@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap');\n\nbody {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n</code></pre>\n<p><strong>Custom Font Sizes:</strong></p>\n<pre><code class=\"language-css\">/* Larger base font size */\n.main-content {\n  font-size: 1.125rem;\n  line-height: 1.75;\n}\n\n/* Custom heading sizes */\nh1 { font-size: 3rem; }\nh2 { font-size: 2rem; }\nh3 { font-size: 1.5rem; }\n</code></pre>\n<h2 id=\"advanced-theming\">Advanced Theming</h2>\n<h3 id=\"custom-css-properties\">Custom CSS Properties</h3>\n<p>Add your own custom properties for consistent theming:</p>\n<pre><code class=\"language-css\">:root {\n  /* Custom brand colors */\n  --brand-blue: 220 90% 56%;\n  --brand-green: 142 71% 45%;\n  --brand-orange: 25 95% 53%;\n  \n  /* Custom spacing */\n  --content-width: 900px;\n  --sidebar-width: 320px;\n  \n  /* Custom shadows */\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n</code></pre>\n<h3 id=\"responsive-design-variables\">Responsive Design Variables</h3>\n<pre><code class=\"language-css\">:root {\n  --mobile-breakpoint: 768px;\n  --sidebar-width: 280px;\n  --mobile-padding: 1rem;\n  --desktop-padding: 2rem;\n}\n\n@media (max-width: 768px) {\n  .main-content {\n    padding: var(--mobile-padding);\n  }\n}\n</code></pre>\n<h3 id=\"animation-customization\">Animation Customization</h3>\n<pre><code class=\"language-css\">:root {\n  /* Transition speeds */\n  --transition-fast: 0.15s;\n  --transition-normal: 0.2s;\n  --transition-slow: 0.3s;\n  \n  /* Easing functions */\n  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);\n  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n\n/* Apply to interactive elements */\n.nav-link {\n  transition: all var(--transition-normal) var(--ease-out);\n}\n</code></pre>\n<h2 id=\"theme-implementation-details\">Theme Implementation Details</h2>\n<h3 id=\"theme-switching-mechanism\">Theme Switching Mechanism</h3>\n<p>GlowDoc implements theme switching through:</p>\n<ol>\n<li><strong>Data attribute:</strong> <code>data-theme=&quot;light|dark&quot;</code> on the <code>&lt;html&gt;</code> element</li>\n<li><strong>JavaScript toggle:</strong> Smooth transitions between light/dark modes</li>\n<li><strong>LocalStorage:</strong> Persistent user preference storage</li>\n<li><strong>System detection:</strong> Automatic theme based on user's OS preference</li>\n</ol>\n<h3 id=\"color-accessibility\">Color Accessibility</h3>\n<p>All themes maintain WCAG AA contrast ratios:</p>\n<ul>\n<li>Normal text: 4.5:1 contrast ratio</li>\n<li>Large text: 3:1 contrast ratio</li>\n<li>Interactive elements: Enhanced focus states</li>\n</ul>\n<h3 id=\"performance-considerations\">Performance Considerations</h3>\n<ul>\n<li>CSS custom properties enable instant theme switching</li>\n<li>No additional HTTP requests for theme assets</li>\n<li>Optimized for both light and dark viewing conditions</li>\n<li>Smooth transitions without layout shifts</li>\n</ul>\n<h2 id=\"troubleshooting\">Troubleshooting</h2>\n<p><strong>Theme not applying:</strong> Ensure the theme name in <code>config.yaml</code> matches exactly: <code>default</code>, <code>purple</code>, or <code>vibrant</code>.</p>\n<p><strong>Dark mode not working:</strong> Check that JavaScript is enabled and the browser supports CSS custom properties.</p>\n<p><strong>Custom colors not showing:</strong> Verify HSL values are properly formatted: <code>220 70% 50%</code> (without <code>hsl()</code> wrapper).</p>\n<p><strong>Typography issues:</strong> Ensure font declarations come after the base stylesheet in the build process.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"customization/components\">\n                <h1 id=\"components\">Components</h1>\n<p>GlowDoc is built with a comprehensive component system that provides consistent, accessible, and responsive UI elements throughout your documentation site.</p>\n<h2 id=\"layout-components\">Layout Components</h2>\n<h3 id=\"header-component\">Header Component</h3>\n<p>The main header provides navigation and theme switching functionality:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;header class=&quot;header-content&quot;&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;logo&quot;&gt;Site Title&lt;/div&gt;\n    &lt;button class=&quot;theme-toggle&quot; aria-label=&quot;Toggle theme&quot;&gt;\n      &lt;!-- Theme toggle icon --&gt;\n    &lt;/button&gt;\n  &lt;/div&gt;\n&lt;/header&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Sticky positioning with backdrop blur effect</li>\n<li>80px fixed height</li>\n<li>Responsive container with max-width of 1200px</li>\n<li>Integrated theme toggle button</li>\n</ul>\n<h3 id=\"sidebar-navigation\">Sidebar Navigation</h3>\n<p>The collapsible sidebar houses the main navigation and search functionality:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;aside class=&quot;sidebar&quot;&gt;\n  &lt;div class=&quot;search-container&quot;&gt;\n    &lt;input type=&quot;text&quot; class=&quot;search-input&quot; placeholder=&quot;Search...&quot;&gt;\n    &lt;div class=&quot;search-results&quot;&gt;&lt;/div&gt;\n  &lt;/div&gt;\n  \n  &lt;nav class=&quot;navigation&quot;&gt;\n    &lt;div class=&quot;nav-section&quot;&gt;\n      &lt;button class=&quot;nav-section-title&quot;&gt;Section Name&lt;/button&gt;\n      &lt;div class=&quot;nav-section-content&quot;&gt;\n        &lt;a href=&quot;#page&quot; class=&quot;nav-link&quot;&gt;Page Title&lt;/a&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/nav&gt;\n&lt;/aside&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Fixed 280px width on desktop</li>\n<li>Collapsible sections with smooth animations</li>\n<li>Integrated search with live results</li>\n<li>Mobile-responsive with overlay behavior</li>\n</ul>\n<h3 id=\"main-content-area\">Main Content Area</h3>\n<p>The primary content container with optimal reading layout:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;main class=&quot;main-content&quot;&gt;\n  &lt;div class=&quot;content-section&quot; id=&quot;page-id&quot;&gt;\n    &lt;h1&gt;Page Title&lt;/h1&gt;\n    &lt;p&gt;Content goes here...&lt;/p&gt;\n  &lt;/div&gt;\n&lt;/main&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Flexible layout that grows to fill available space</li>\n<li>800px max-width for optimal reading</li>\n<li>Responsive padding (2rem desktop, 1rem mobile)</li>\n<li>Centered content with proper spacing</li>\n</ul>\n<h2 id=\"navigation-components\">Navigation Components</h2>\n<h3 id=\"navigation-links\">Navigation Links</h3>\n<p>Individual navigation items with active state support:</p>\n<p><strong>CSS Classes:</strong></p>\n<pre><code class=\"language-css\">.nav-link {\n  /* Base navigation link styles */\n  display: block;\n  padding: 0.5rem 1rem;\n  color: hsl(var(--muted-foreground));\n  text-decoration: none;\n  border-radius: 0.375rem;\n  transition: all 0.2s ease;\n}\n\n.nav-link:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.nav-link.active {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n  font-weight: 600;\n}\n</code></pre>\n<p><strong>Usage:</strong></p>\n<ul>\n<li>Automatically marked as <code>.active</code> based on current page</li>\n<li>Left border accent on hover and active states</li>\n<li>Smooth color transitions</li>\n<li>Accessible keyboard navigation</li>\n</ul>\n<h3 id=\"section-headers\">Section Headers</h3>\n<p>Collapsible section headers in the navigation:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;button class=&quot;nav-section-title&quot; data-section=&quot;section-id&quot;&gt;\n  &lt;span&gt;Section Name&lt;/span&gt;\n  &lt;svg class=&quot;chevron-icon&quot;&gt;&lt;!-- Chevron icon --&gt;&lt;/svg&gt;\n&lt;/button&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Click to expand/collapse section content</li>\n<li>Animated chevron icon rotation</li>\n<li>Maintains expanded state in LocalStorage</li>\n<li>Proper ARIA attributes for accessibility</li>\n</ul>\n<h2 id=\"interactive-components\">Interactive Components</h2>\n<h3 id=\"theme-toggle\">Theme Toggle</h3>\n<p>The dark/light mode switcher with system preference detection:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;button class=&quot;theme-toggle&quot; aria-label=&quot;Toggle theme&quot;&gt;\n  &lt;svg class=&quot;sun-icon&quot;&gt;&lt;!-- Sun icon --&gt;&lt;/svg&gt;\n  &lt;svg class=&quot;moon-icon&quot;&gt;&lt;!-- Moon icon --&gt;&lt;/svg&gt;\n&lt;/button&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Automatic system preference detection on first visit</li>\n<li>Smooth icon transitions between light/dark states</li>\n<li>LocalStorage persistence for user preference</li>\n<li>0.3s transition for theme switching</li>\n</ul>\n<h3 id=\"search-component\">Search Component</h3>\n<p>Live search functionality with instant results:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;div class=&quot;search-container&quot;&gt;\n  &lt;div class=&quot;search-input-wrapper&quot;&gt;\n    &lt;svg class=&quot;search-icon&quot;&gt;&lt;!-- Search icon --&gt;&lt;/svg&gt;\n    &lt;input type=&quot;text&quot; class=&quot;search-input&quot; placeholder=&quot;Search documentation...&quot;&gt;\n  &lt;/div&gt;\n  &lt;div class=&quot;search-results&quot;&gt;\n    &lt;div class=&quot;search-result&quot; data-target=&quot;page-id&quot;&gt;\n      &lt;div class=&quot;search-result-title&quot;&gt;Page Title&lt;/div&gt;\n      &lt;div class=&quot;search-result-excerpt&quot;&gt;Matching content...&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Real-time search as you type (300ms debounce)</li>\n<li>Searches through all page titles and content</li>\n<li>Highlighted search terms in results</li>\n<li>Keyboard navigation support (arrow keys, Enter)</li>\n<li>Click or Enter to navigate to results</li>\n</ul>\n<h3 id=\"mobile-menu\">Mobile Menu</h3>\n<p>Responsive navigation for mobile devices:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;button class=&quot;mobile-menu-toggle&quot;&gt;\n  &lt;span class=&quot;hamburger-line&quot;&gt;&lt;/span&gt;\n  &lt;span class=&quot;hamburger-line&quot;&gt;&lt;/span&gt;\n  &lt;span class=&quot;hamburger-line&quot;&gt;&lt;/span&gt;\n&lt;/button&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Animated hamburger menu icon</li>\n<li>Transforms sidebar into full-screen overlay</li>\n<li>Smooth slide-in animation from left</li>\n<li>Closes on backdrop click or page navigation</li>\n</ul>\n<h2 id=\"content-components\">Content Components</h2>\n<h3 id=\"code-blocks\">Code Blocks</h3>\n<p>Syntax-highlighted code blocks with proper formatting:</p>\n<p><strong>Markdown Usage:</strong></p>\n<pre><code class=\"language-markdown\">```javascript\nfunction greetUser(name) {\n  console.log(`Hello, ${name}!`);\n}\n```\n</code></pre>\n<p><strong>Generated HTML:</strong></p>\n<pre><code class=\"language-html\">&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;\nfunction greetUser(name) {\n  console.log(`Hello, ${name}!`);\n}\n&lt;/code&gt;&lt;/pre&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Automatic syntax highlighting via CSS</li>\n<li>Consistent background and padding</li>\n<li>Horizontal scrolling for long lines</li>\n<li>Copy-friendly formatting</li>\n</ul>\n<h3 id=\"content-sections\">Content Sections</h3>\n<p>Organized content areas for each documentation page:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;div class=&quot;content-section&quot; id=&quot;unique-page-id&quot;&gt;\n  &lt;h1&gt;Page Title&lt;/h1&gt;\n  &lt;p&gt;Introduction paragraph...&lt;/p&gt;\n  \n  &lt;h2&gt;Section Heading&lt;/h2&gt;\n  &lt;p&gt;Section content...&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Hidden by default (only active page shown)</li>\n<li>Smooth fade-in transitions when activated</li>\n<li>Proper heading hierarchy (H1 for page title, H2+ for sections)</li>\n<li>Semantic HTML structure for accessibility</li>\n</ul>\n<h3 id=\"search-result-highlighting\">Search Result Highlighting</h3>\n<p>Dynamic highlighting of search terms in content:</p>\n<p><strong>Generated Markup:</strong></p>\n<pre><code class=\"language-html\">&lt;p&gt;This is some &lt;mark class=&quot;search-highlight&quot;&gt;highlighted&lt;/mark&gt; text.&lt;/p&gt;\n</code></pre>\n<p><strong>CSS Styling:</strong></p>\n<pre><code class=\"language-css\">.search-highlight {\n  background-color: hsl(var(--primary) / 0.2);\n  color: hsl(var(--primary-foreground));\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n}\n</code></pre>\n<h2 id=\"responsive-behavior\">Responsive Behavior</h2>\n<h3 id=\"breakpoint-system\">Breakpoint System</h3>\n<p>GlowDoc uses a mobile-first approach with a single breakpoint:</p>\n<pre><code class=\"language-css\">/* Mobile styles (default) */\n.sidebar {\n  position: fixed;\n  left: -100%;\n  transition: left 0.3s ease;\n}\n\n/* Desktop styles */\n@media (min-width: 768px) {\n  .sidebar {\n    position: fixed;\n    left: 0;\n  }\n}\n</code></pre>\n<h3 id=\"mobile-adaptations\">Mobile Adaptations</h3>\n<p><strong>Sidebar Behavior:</strong></p>\n<ul>\n<li>Becomes full-screen overlay on mobile</li>\n<li>Slide-in animation from left edge</li>\n<li>Backdrop blur and dark overlay</li>\n<li>Closes on outside click or page navigation</li>\n</ul>\n<p><strong>Content Layout:</strong></p>\n<ul>\n<li>Single-column layout on mobile</li>\n<li>Reduced padding (1rem vs 2rem)</li>\n<li>Optimized touch targets (44px minimum)</li>\n<li>Larger font sizes for better readability</li>\n</ul>\n<p><strong>Navigation:</strong></p>\n<ul>\n<li>Collapsible sections remain functional</li>\n<li>Touch-optimized interactive areas</li>\n<li>Simplified hover states for touch devices</li>\n</ul>\n<h2 id=\"accessibility-features\">Accessibility Features</h2>\n<h3 id=\"keyboard-navigation\">Keyboard Navigation</h3>\n<p><strong>Navigation Support:</strong></p>\n<ul>\n<li>Tab order follows logical content flow</li>\n<li>Arrow keys navigate search results</li>\n<li>Enter key activates links and buttons</li>\n<li>Escape key closes mobile menu and search</li>\n</ul>\n<p><strong>Focus Management:</strong></p>\n<ul>\n<li>Visible focus indicators on all interactive elements</li>\n<li>Focus trapped within mobile menu when open</li>\n<li>Focus restored when closing overlays</li>\n</ul>\n<h3 id=\"screen-reader-support\">Screen Reader Support</h3>\n<p><strong>ARIA Labels:</strong></p>\n<pre><code class=\"language-html\">&lt;button aria-label=&quot;Toggle theme&quot; class=&quot;theme-toggle&quot;&gt;\n&lt;input aria-label=&quot;Search documentation&quot; class=&quot;search-input&quot;&gt;\n&lt;nav aria-label=&quot;Main navigation&quot; class=&quot;navigation&quot;&gt;\n</code></pre>\n<p><strong>Semantic Structure:</strong></p>\n<ul>\n<li>Proper heading hierarchy (H1 → H2 → H3)</li>\n<li>Landmark roles for main sections</li>\n<li>Descriptive link text</li>\n<li>Form labels associated with inputs</li>\n</ul>\n<h3 id=\"color-and-contrast\">Color and Contrast</h3>\n<p><strong>WCAG AA Compliance:</strong></p>\n<ul>\n<li>4.5:1 contrast ratio for normal text</li>\n<li>3:1 contrast ratio for large text</li>\n<li>Enhanced focus states with both color and outline</li>\n<li>Color is not the only means of conveying information</li>\n</ul>\n<h2 id=\"performance-optimizations\">Performance Optimizations</h2>\n<h3 id=\"css-architecture\">CSS Architecture</h3>\n<p><strong>Efficient Selectors:</strong></p>\n<ul>\n<li>Class-based selectors for performance</li>\n<li>Minimal nesting depth</li>\n<li>Optimized specificity</li>\n</ul>\n<p><strong>Transition Performance:</strong></p>\n<ul>\n<li>GPU-accelerated transforms</li>\n<li>Efficient property animations (opacity, transform)</li>\n<li>Reasonable transition durations (0.2s-0.3s)</li>\n</ul>\n<h3 id=\"javascript-optimization\">JavaScript Optimization</h3>\n<p><strong>Search Debouncing:</strong></p>\n<ul>\n<li>300ms delay to reduce excessive searches</li>\n<li>Efficient DOM queries using data attributes</li>\n<li>Minimal DOM manipulation</li>\n</ul>\n<p><strong>Event Handling:</strong></p>\n<ul>\n<li>Event delegation for dynamic content</li>\n<li>Passive event listeners where appropriate</li>\n<li>Memory leak prevention</li>\n</ul>\n<h2 id=\"customization-examples\">Customization Examples</h2>\n<h3 id=\"custom-navigation-styling\">Custom Navigation Styling</h3>\n<pre><code class=\"language-css\">.nav-link {\n  /* Add custom styles */\n  border-left: 3px solid transparent;\n  margin-bottom: 0.25rem;\n}\n\n.nav-link:hover {\n  border-left-color: hsl(var(--primary));\n  background: linear-gradient(90deg, \n    hsl(var(--primary) / 0.1), \n    transparent\n  );\n}\n\n.nav-link.active {\n  border-left-color: hsl(var(--primary));\n  background-color: hsl(var(--primary) / 0.15);\n}\n</code></pre>\n<h3 id=\"custom-search-styling\">Custom Search Styling</h3>\n<pre><code class=\"language-css\">.search-container {\n  /* Custom search appearance */\n  background: hsl(var(--card));\n  border: 1px solid hsl(var(--border));\n  border-radius: 0.75rem;\n  padding: 1rem;\n  margin-bottom: 1.5rem;\n}\n\n.search-input {\n  /* Enhanced input styling */\n  background: hsl(var(--background));\n  border: 2px solid hsl(var(--border));\n  border-radius: 0.5rem;\n  padding: 0.75rem 1rem 0.75rem 2.5rem;\n}\n\n.search-input:focus {\n  border-color: hsl(var(--primary));\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\n}\n</code></pre>\n<h3 id=\"custom-content-styling\">Custom Content Styling</h3>\n<pre><code class=\"language-css\">.content-section {\n  /* Enhanced content presentation */\n  line-height: 1.75;\n  max-width: 900px; /* Wider content area */\n}\n\n.content-section h1 {\n  /* Custom heading styles */\n  border-bottom: 2px solid hsl(var(--border));\n  padding-bottom: 1rem;\n  margin-bottom: 2rem;\n}\n\n.content-section h2 {\n  /* Section heading enhancements */\n  margin-top: 3rem;\n  margin-bottom: 1.5rem;\n  color: hsl(var(--primary));\n}\n</code></pre>\n<p>This component system provides a solid foundation for building beautiful, functional documentation sites while maintaining consistency and accessibility across all interface elements.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"customization/styling\">\n                <h1 id=\"custom-styling\">Custom Styling</h1>\n<p>Advanced styling techniques and customization patterns for creating unique GlowDoc designs that match your brand and requirements.</p>\n<h2 id=\"architecture-overview\">Architecture Overview</h2>\n<p>GlowDoc's CSS architecture is designed for maximum customization while maintaining performance and accessibility. Understanding the core structure enables powerful customizations.</p>\n<h3 id=\"css-organization\">CSS Organization</h3>\n<p>The generated stylesheet follows this structure:</p>\n<pre><code class=\"language-css\">/* 1. CSS Reset &amp; Base Styles */\n/* 2. CSS Custom Properties (Design Tokens) */\n/* 3. Layout Components */\n/* 4. Navigation Components */\n/* 5. Content Components */\n/* 6. Interactive Components */\n/* 7. Responsive Media Queries */\n/* 8. Theme Variations */\n</code></pre>\n<h3 id=\"modification-approach\">Modification Approach</h3>\n<p>Since GlowDoc generates a single HTML file with embedded CSS, customizations should be added to the Rust source in the <code>generate_css()</code> function:</p>\n<p><strong>Location:</strong> <code>src/main.rs</code> - Look for the <code>generate_css()</code> function</p>\n<h2 id=\"advanced-styling-techniques\">Advanced Styling Techniques</h2>\n<h3 id=\"custom-brand-integration\">Custom Brand Integration</h3>\n<h4 id=\"brand-color-system\">Brand Color System</h4>\n<p>Create a comprehensive brand color palette:</p>\n<pre><code class=\"language-css\">:root {\n  /* Primary brand colors */\n  --brand-primary: 220 90% 56%;\n  --brand-primary-dark: 220 90% 45%;\n  --brand-primary-light: 220 90% 65%;\n  \n  /* Secondary brand colors */\n  --brand-secondary: 160 60% 45%;\n  --brand-accent: 25 95% 53%;\n  --brand-neutral: 220 10% 50%;\n  \n  /* Semantic color mappings */\n  --primary: var(--brand-primary);\n  --accent: var(--brand-secondary);\n  \n  /* Brand gradients */\n  --brand-gradient: linear-gradient(135deg, \n    hsl(var(--brand-primary)), \n    hsl(var(--brand-secondary))\n  );\n}\n</code></pre>\n<h4 id=\"logo-and-brand-assets\">Logo and Brand Assets</h4>\n<p>Integrate custom logos and brand elements:</p>\n<pre><code class=\"language-css\">.logo {\n  background-image: url('data:image/svg+xml;base64,...');\n  background-size: contain;\n  background-repeat: no-repeat;\n  width: 120px;\n  height: 40px;\n  text-indent: -9999px; /* Hide text */\n}\n\n/* Alternative: Custom font logo */\n.logo {\n  font-family: 'Your Brand Font', sans-serif;\n  font-weight: 700;\n  font-size: 1.5rem;\n  color: hsl(var(--brand-primary));\n}\n</code></pre>\n<h3 id=\"advanced-layout-customizations\">Advanced Layout Customizations</h3>\n<h4 id=\"multi-column-content-layout\">Multi-Column Content Layout</h4>\n<p>Create complex content layouts:</p>\n<pre><code class=\"language-css\">.content-section {\n  display: grid;\n  grid-template-columns: 1fr 300px;\n  gap: 2rem;\n  max-width: 1200px;\n}\n\n.content-main {\n  min-width: 0; /* Prevent grid blowout */\n}\n\n.content-sidebar {\n  background: hsl(var(--card));\n  border: 1px solid hsl(var(--border));\n  border-radius: 0.5rem;\n  padding: 1.5rem;\n  height: fit-content;\n  position: sticky;\n  top: 100px; /* Account for header height */\n}\n\n@media (max-width: 1024px) {\n  .content-section {\n    grid-template-columns: 1fr;\n  }\n  \n  .content-sidebar {\n    order: -1; /* Move sidebar above content on mobile */\n  }\n}\n</code></pre>\n<h4 id=\"custom-navigation-layouts\">Custom Navigation Layouts</h4>\n<p>Enhanced sidebar with custom sections:</p>\n<pre><code class=\"language-css\">.sidebar {\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  gap: 1rem;\n}\n\n.sidebar-header {\n  padding: 1rem;\n  border-bottom: 1px solid hsl(var(--border));\n}\n\n.sidebar-content {\n  overflow-y: auto;\n  padding: 0 1rem;\n}\n\n.sidebar-footer {\n  padding: 1rem;\n  border-top: 1px solid hsl(var(--border));\n  background: hsl(var(--muted) / 0.5);\n}\n\n/* Custom navigation grouping */\n.nav-group {\n  margin-bottom: 2rem;\n}\n\n.nav-group-title {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: hsl(var(--muted-foreground));\n  margin-bottom: 0.5rem;\n  padding: 0 1rem;\n}\n</code></pre>\n<h3 id=\"typography-enhancement\">Typography Enhancement</h3>\n<h4 id=\"custom-font-integration\">Custom Font Integration</h4>\n<p>Professional typography with web fonts:</p>\n<pre><code class=\"language-css\">/* Import custom fonts */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;family=JetBrains+Mono:wght@400;500;600&amp;display=swap');\n\n:root {\n  /* Typography system */\n  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;\n  \n  /* Type scale */\n  --text-xs: 0.75rem;    /* 12px */\n  --text-sm: 0.875rem;   /* 14px */\n  --text-base: 1rem;     /* 16px */\n  --text-lg: 1.125rem;   /* 18px */\n  --text-xl: 1.25rem;    /* 20px */\n  --text-2xl: 1.5rem;    /* 24px */\n  --text-3xl: 1.875rem;  /* 30px */\n  --text-4xl: 2.25rem;   /* 36px */\n  --text-5xl: 3rem;      /* 48px */\n}\n\nbody {\n  font-family: var(--font-sans);\n}\n\ncode, pre {\n  font-family: var(--font-mono);\n}\n</code></pre>\n<h4 id=\"advanced-typography-styles\">Advanced Typography Styles</h4>\n<p>Rich text formatting and hierarchy:</p>\n<pre><code class=\"language-css\">.content-section {\n  /* Enhanced reading experience */\n  font-size: var(--text-lg);\n  line-height: 1.7;\n  color: hsl(var(--foreground));\n}\n\n.content-section h1 {\n  font-size: var(--text-4xl);\n  font-weight: 800;\n  line-height: 1.1;\n  margin-bottom: 1.5rem;\n  background: var(--brand-gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.content-section h2 {\n  font-size: var(--text-2xl);\n  font-weight: 700;\n  margin-top: 3rem;\n  margin-bottom: 1rem;\n  position: relative;\n}\n\n.content-section h2::before {\n  content: '';\n  position: absolute;\n  left: -2rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4px;\n  height: 1.5rem;\n  background: hsl(var(--primary));\n  border-radius: 2px;\n}\n\n/* Enhanced blockquotes */\n.content-section blockquote {\n  border-left: 4px solid hsl(var(--primary));\n  padding-left: 1.5rem;\n  margin: 2rem 0;\n  font-style: italic;\n  font-size: var(--text-xl);\n  color: hsl(var(--muted-foreground));\n}\n\n/* Improved lists */\n.content-section ul {\n  list-style: none;\n  padding-left: 0;\n}\n\n.content-section li {\n  position: relative;\n  padding-left: 1.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.content-section li::before {\n  content: '→';\n  position: absolute;\n  left: 0;\n  color: hsl(var(--primary));\n  font-weight: 600;\n}\n</code></pre>\n<h3 id=\"interactive-element-enhancements\">Interactive Element Enhancements</h3>\n<h4 id=\"advanced-button-styling\">Advanced Button Styling</h4>\n<p>Custom button system with multiple variants:</p>\n<pre><code class=\"language-css\">/* Button base styles */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  font-size: var(--text-sm);\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Primary button */\n.btn-primary {\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.btn-primary:hover {\n  background: hsl(var(--primary) / 0.9);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);\n}\n\n/* Gradient button */\n.btn-gradient {\n  background: var(--brand-gradient);\n  color: white;\n  position: relative;\n}\n\n.btn-gradient::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--brand-gradient);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.btn-gradient:hover::before {\n  opacity: 0.1;\n}\n\n/* Outline button */\n.btn-outline {\n  background: transparent;\n  border: 2px solid hsl(var(--primary));\n  color: hsl(var(--primary));\n}\n\n.btn-outline:hover {\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n</code></pre>\n<h4 id=\"enhanced-form-styling\">Enhanced Form Styling</h4>\n<p>Professional form controls:</p>\n<pre><code class=\"language-css\">.form-group {\n  margin-bottom: 1.5rem;\n}\n\n.form-label {\n  display: block;\n  font-weight: 600;\n  font-size: var(--text-sm);\n  color: hsl(var(--foreground));\n  margin-bottom: 0.5rem;\n}\n\n.form-input {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 2px solid hsl(var(--border));\n  border-radius: 0.5rem;\n  background: hsl(var(--background));\n  color: hsl(var(--foreground));\n  font-size: var(--text-base);\n  transition: all 0.2s ease;\n}\n\n.form-input:focus {\n  outline: none;\n  border-color: hsl(var(--primary));\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\n}\n\n.form-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n</code></pre>\n<h3 id=\"animation-and-micro-interactions\">Animation and Micro-Interactions</h3>\n<h4 id=\"page-transition-effects\">Page Transition Effects</h4>\n<p>Smooth page transitions:</p>\n<pre><code class=\"language-css\">.content-section {\n  opacity: 0;\n  transform: translateY(20px);\n  transition: all 0.3s ease;\n}\n\n.content-section.active {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/* Staggered animation for navigation items */\n.nav-link {\n  opacity: 0;\n  transform: translateX(-20px);\n  animation: slideInLeft 0.3s ease forwards;\n}\n\n.nav-link:nth-child(1) { animation-delay: 0.1s; }\n.nav-link:nth-child(2) { animation-delay: 0.15s; }\n.nav-link:nth-child(3) { animation-delay: 0.2s; }\n/* ... continue pattern */\n\n@keyframes slideInLeft {\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n</code></pre>\n<h4 id=\"hover-effects-and-micro-interactions\">Hover Effects and Micro-Interactions</h4>\n<p>Engaging interactive feedback:</p>\n<pre><code class=\"language-css\">/* Card hover effects */\n.card {\n  background: hsl(var(--card));\n  border: 1px solid hsl(var(--border));\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  transition: all 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.card::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(45deg, \n    hsl(var(--primary) / 0.1), \n    hsl(var(--accent) / 0.1)\n  );\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 12px 24px hsl(var(--foreground) / 0.1);\n  border-color: hsl(var(--primary));\n}\n\n.card:hover::before {\n  opacity: 1;\n}\n\n/* Ripple effect for buttons */\n.btn {\n  position: relative;\n  overflow: hidden;\n}\n\n.btn::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.3);\n  transform: translate(-50%, -50%);\n  transition: width 0.6s, height 0.6s;\n}\n\n.btn:active::after {\n  width: 300px;\n  height: 300px;\n}\n</code></pre>\n<h3 id=\"responsive-design-patterns\">Responsive Design Patterns</h3>\n<h4 id=\"advanced-responsive-typography\">Advanced Responsive Typography</h4>\n<p>Fluid typography that scales smoothly:</p>\n<pre><code class=\"language-css\">:root {\n  /* Fluid typography using clamp() */\n  --text-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);\n  --text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);\n  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n  --text-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);\n  --text-fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);\n  --text-fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);\n  --text-fluid-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);\n}\n\nbody {\n  font-size: var(--text-fluid-base);\n}\n\nh1 { font-size: var(--text-fluid-4xl); }\nh2 { font-size: var(--text-fluid-3xl); }\nh3 { font-size: var(--text-fluid-2xl); }\n</code></pre>\n<h4 id=\"container-queries-future-forward\">Container Queries (Future-Forward)</h4>\n<p>Modern responsive design using container queries:</p>\n<pre><code class=\"language-css\">.content-section {\n  container-type: inline-size;\n}\n\n/* Adjust layout based on container width, not viewport */\n@container (min-width: 600px) {\n  .content-grid {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    gap: 2rem;\n  }\n}\n\n@container (min-width: 900px) {\n  .content-grid {\n    grid-template-columns: 1fr 2fr 1fr;\n  }\n}\n</code></pre>\n<h3 id=\"dark-mode-advanced-customizations\">Dark Mode Advanced Customizations</h3>\n<h4 id=\"theme-aware-components\">Theme-Aware Components</h4>\n<p>Components that adapt intelligently to theme changes:</p>\n<pre><code class=\"language-css\">/* Light theme specific styles */\n[data-theme=&quot;light&quot;] .hero-section {\n  background: linear-gradient(135deg, \n    hsl(var(--background)), \n    hsl(var(--secondary))\n  );\n}\n\n/* Dark theme specific styles */\n[data-theme=&quot;dark&quot;] .hero-section {\n  background: linear-gradient(135deg, \n    hsl(var(--background)), \n    hsl(var(--card))\n  );\n}\n\n/* Theme-aware shadows */\n.elevated-card {\n  box-shadow: \n    0 4px 6px hsl(var(--foreground) / 0.1),\n    0 1px 3px hsl(var(--foreground) / 0.05);\n}\n\n[data-theme=&quot;dark&quot;] .elevated-card {\n  box-shadow: \n    0 4px 6px rgba(0, 0, 0, 0.3),\n    0 1px 3px rgba(0, 0, 0, 0.2);\n}\n</code></pre>\n<h3 id=\"performance-optimization\">Performance Optimization</h3>\n<h4 id=\"efficient-css-architecture\">Efficient CSS Architecture</h4>\n<p>Optimized styles for better performance:</p>\n<pre><code class=\"language-css\">/* Use CSS custom properties for frequently changing values */\n:root {\n  --animation-speed: 0.2s;\n  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Optimize animations for 60fps */\n.animated-element {\n  will-change: transform, opacity;\n  transform: translateZ(0); /* Force hardware acceleration */\n  transition: transform var(--animation-speed) var(--animation-easing);\n}\n\n/* Efficient selectors */\n.nav-link { /* Good: class selector */ }\nnav &gt; ul &gt; li &gt; a { /* Avoid: deep nesting */ }\n* { /* Avoid: universal selector */ }\n</code></pre>\n<h4 id=\"critical-css-patterns\">Critical CSS Patterns</h4>\n<p>Inline critical styles for immediate rendering:</p>\n<pre><code class=\"language-css\">/* Critical above-the-fold styles */\n.layout,\n.header-content,\n.sidebar,\n.main-content {\n  /* Essential layout properties only */\n  display: flex;\n  position: relative;\n}\n\n/* Non-critical styles can be loaded later */\n.fancy-animations,\n.decorative-elements {\n  /* Complex animations and decorative styles */\n}\n</code></pre>\n<h2 id=\"custom-styling-workflow\">Custom Styling Workflow</h2>\n<h3 id=\"1-planning-your-customizations\">1. Planning Your Customizations</h3>\n<p>Before modifying styles:</p>\n<ol>\n<li><strong>Audit existing styles</strong>: Understand the current CSS architecture</li>\n<li><strong>Define your design system</strong>: Colors, typography, spacing, components</li>\n<li><strong>Plan responsive behavior</strong>: Mobile-first approach</li>\n<li><strong>Consider accessibility</strong>: Maintain contrast ratios and focus states</li>\n</ol>\n<h3 id=\"2-implementation-strategy\">2. Implementation Strategy</h3>\n<p><strong>Recommended approach:</strong></p>\n<ol>\n<li>Start with CSS custom property overrides</li>\n<li>Add new component styles</li>\n<li>Implement responsive variations</li>\n<li>Test across themes (light/dark)</li>\n<li>Validate accessibility compliance</li>\n</ol>\n<h3 id=\"3-testing-checklist\">3. Testing Checklist</h3>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll themes (default, purple, vibrant)</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nLight and dark modes</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nMobile and desktop layouts</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nKeyboard navigation</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nScreen reader compatibility</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nPerformance impact</li>\n</ul>\n<h2 id=\"troubleshooting-custom-styles\">Troubleshooting Custom Styles</h2>\n<p><strong>Styles not applying</strong>: Check CSS specificity and ensure your styles come after the base styles in the build order.</p>\n<p><strong>Theme conflicts</strong>: Verify that custom styles work with both light and dark modes.</p>\n<p><strong>Performance issues</strong>: Minimize complex selectors and excessive animations.</p>\n<p><strong>Responsive problems</strong>: Test on actual devices, not just browser dev tools.</p>\n<p><strong>Accessibility concerns</strong>: Use tools like axe-core to validate accessibility compliance.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"advanced/api\">\n                <h1 id=\"api-reference\">API Reference</h1>\n<p>Comprehensive JavaScript API reference for programmatic control and customization of GlowDoc documentation sites.</p>\n<h2 id=\"overview\">Overview</h2>\n<p>GlowDoc generates a single-page application with a rich JavaScript API for navigation, search, theming, and customization. All functionality is embedded within the generated HTML file, providing a complete client-side documentation experience.</p>\n<h2 id=\"core-navigation-api\">Core Navigation API</h2>\n<h3><code>showContent(contentId, updateUrl = true)</code></h3>\n<p>Displays a specific documentation page by content ID.</p>\n<p><strong>Parameters:</strong></p>\n<ul>\n<li><code>contentId</code> (string) - The unique identifier for the content section</li>\n<li><code>updateUrl</code> (boolean, optional) - Whether to update browser URL and history (default: true)</li>\n</ul>\n<p><strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Show the installation page\nshowContent('installation');\n\n// Show content without updating URL (for programmatic navigation)\nshowContent('api-reference', false);\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Switches from homepage to documentation layout if needed</li>\n<li>Hides all content sections and displays the target section</li>\n<li>Updates active state in navigation sidebar</li>\n<li>Updates browser URL and history (unless <code>updateUrl</code> is false)</li>\n<li>Automatically closes mobile sidebar</li>\n<li>Logs content display for debugging</li>\n</ul>\n<h3><code>showHomepage()</code></h3>\n<p>Displays the homepage content and hides documentation layout.</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Return to homepage\nshowHomepage();\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Shows homepage element, hides documentation layout</li>\n<li>Updates browser URL to root path</li>\n<li>Uses HTML5 History API for navigation</li>\n</ul>\n<h3><code>showDocs()</code></h3>\n<p>Switches the interface to documentation mode (internal function).</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Usage:</strong> Typically called internally by <code>showContent()</code>, but available for custom implementations.</p>\n<h3><code>showContentFromSearch(contentId)</code></h3>\n<p>Displays content selected from search results and clears search state.</p>\n<p><strong>Parameters:</strong></p>\n<ul>\n<li><code>contentId</code> (string) - The content ID to display</li>\n</ul>\n<p><strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Show search result and clear search\nshowContentFromSearch('quick-start');\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Clears search input field</li>\n<li>Hides search results, shows navigation</li>\n<li>Calls <code>showContent()</code> to display the selected page</li>\n</ul>\n<h2 id=\"theme-management-api\">Theme Management API</h2>\n<h3><code>toggleTheme()</code></h3>\n<p>Toggles between light and dark theme modes.</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Toggle theme\ntoggleTheme();\n\n// Programmatically check current theme\nconst currentTheme = document.documentElement.getAttribute('data-theme');\nconsole.log('Current theme:', currentTheme); // 'light' or 'dark'\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Toggles <code>data-theme</code> attribute between 'light' and 'dark'</li>\n<li>Saves theme preference to localStorage</li>\n<li>Provides smooth transitions via CSS</li>\n<li>Respects system preferences on first visit</li>\n</ul>\n<p><strong>Theme Persistence:</strong></p>\n<pre><code class=\"language-javascript\">// Theme is automatically saved to localStorage\nlocalStorage.getItem('theme'); // Returns 'light' or 'dark'\n</code></pre>\n<h2 id=\"navigation-and-sidebar-api\">Navigation and Sidebar API</h2>\n<h3><code>toggleSidebar()</code></h3>\n<p>Toggles sidebar visibility (primarily for mobile interfaces).</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Toggle mobile sidebar\ntoggleSidebar();\n\n// Check sidebar state\nconst sidebar = document.querySelector('.sidebar');\nconst isVisible = sidebar.classList.contains('visible');\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Toggles 'visible' class on sidebar element</li>\n<li>Provides slide-in animation on mobile devices</li>\n<li>Automatically handled for responsive breakpoints</li>\n</ul>\n<h3><code>toggleSection(sectionId)</code></h3>\n<p>Expands or collapses navigation sections in the sidebar.</p>\n<p><strong>Parameters:</strong></p>\n<ul>\n<li><code>sectionId</code> (string) - The ID of the section to toggle</li>\n</ul>\n<p><strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Toggle a navigation section\ntoggleSection('getting-started');\n\n// Check section state\nconst section = document.querySelector('[data-section=&quot;getting-started&quot;]');\nconst isCollapsed = section.classList.contains('collapsed');\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Toggles 'collapsed' class on section and its toggle icon</li>\n<li>Provides smooth expand/collapse animations</li>\n<li>State persisted for user experience</li>\n</ul>\n<h2 id=\"search-api\">Search API</h2>\n<h3><code>performSearch()</code></h3>\n<p>Performs real-time search across all documentation content.</p>\n<p><strong>Parameters:</strong> None (reads from search input element)<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Trigger search programmatically\ndocument.querySelector('.search-input').value = 'installation';\nperformSearch();\n\n// Search is automatically triggered on input\n</code></pre>\n<p><strong>Search Features:</strong></p>\n<ul>\n<li><strong>Real-time Results</strong>: Updates as user types</li>\n<li><strong>Content Indexing</strong>: Searches titles, sections, and full content</li>\n<li><strong>Result Ranking</strong>: Title matches rank higher than content matches</li>\n<li><strong>Snippet Generation</strong>: Shows relevant content excerpts</li>\n<li><strong>Keyword Highlighting</strong>: Highlights matching terms in results</li>\n</ul>\n<p><strong>Search Index Structure:</strong></p>\n<pre><code class=\"language-javascript\">// Global searchIndex object\nconst searchIndex = {\n  &quot;page-id&quot;: {\n    &quot;title&quot;: &quot;Page Title&quot;,\n    &quot;section&quot;: &quot;Section Name&quot;,\n    &quot;content&quot;: &quot;Full searchable content...&quot;\n  }\n  // ... more pages\n};\n</code></pre>\n<h3 id=\"custom-search-integration\">Custom Search Integration</h3>\n<pre><code class=\"language-javascript\">// Access search index for custom functionality\nfunction customSearch(query) {\n  const results = [];\n  for (const [id, data] of Object.entries(searchIndex)) {\n    if (data.title.toLowerCase().includes(query.toLowerCase())) {\n      results.push({ id, ...data });\n    }\n  }\n  return results;\n}\n\n// Example: Find all pages in a specific section\nfunction findBySection(sectionName) {\n  return Object.entries(searchIndex)\n    .filter(([id, data]) =&gt; data.section === sectionName)\n    .map(([id, data]) =&gt; ({ id, ...data }));\n}\n</code></pre>\n<h2 id=\"url-and-history-management\">URL and History Management</h2>\n<h3><code>loadFromUrl()</code></h3>\n<p>Loads appropriate content based on current URL hash.</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Load content based on URL\nloadFromUrl();\n\n// Handle URL changes\nwindow.addEventListener('hashchange', loadFromUrl);\n</code></pre>\n<p><strong>URL Format:</strong></p>\n<ul>\n<li>Homepage: <code>#</code> or no hash</li>\n<li>Content pages: <code>#page-id</code></li>\n<li>Automatically handles invalid page IDs</li>\n</ul>\n<p><strong>History Management:</strong></p>\n<pre><code class=\"language-javascript\">// Navigation automatically updates browser history\n// Back/forward buttons work seamlessly\nwindow.addEventListener('popstate', (event) =&gt; {\n  if (event.state?.contentId) {\n    showContent(event.state.contentId, false);\n  } else if (event.state?.page === 'home') {\n    showHomepage();\n  }\n});\n</code></pre>\n<h2 id=\"event-system\">Event System</h2>\n<h3 id=\"built-in-event-listeners\">Built-in Event Listeners</h3>\n<p>GlowDoc automatically registers several event listeners:</p>\n<pre><code class=\"language-javascript\">// Navigation clicks\ndocument.addEventListener('click', (e) =&gt; {\n  if (e.target.hasAttribute('data-content-id')) {\n    e.preventDefault();\n    showContent(e.target.getAttribute('data-content-id'));\n  }\n});\n\n// Browser navigation\nwindow.addEventListener('popstate', (event) =&gt; {\n  // Handle back/forward navigation\n});\n\n// Initial load\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\n  loadFromUrl();\n});\n\n// Mobile sidebar - outside clicks\ndocument.addEventListener('click', (e) =&gt; {\n  // Close sidebar when clicking outside on mobile\n});\n</code></pre>\n<h3 id=\"custom-event-handling\">Custom Event Handling</h3>\n<pre><code class=\"language-javascript\">// Listen for content changes\nfunction onContentChange(contentId) {\n  console.log('Content changed to:', contentId);\n  // Custom logic here\n}\n\n// Override or extend existing functions\nconst originalShowContent = showContent;\nshowContent = function(contentId, updateUrl = true) {\n  onContentChange(contentId);\n  return originalShowContent(contentId, updateUrl);\n};\n</code></pre>\n<h2 id=\"configuration-and-customization\">Configuration and Customization</h2>\n<h3 id=\"global-configuration\">Global Configuration</h3>\n<pre><code class=\"language-javascript\">// Access current state\nconst getCurrentContent = () =&gt; {\n  const activeSection = document.querySelector('.content-section:not([style*=&quot;display: none&quot;])');\n  return activeSection?.id;\n};\n\nconst getCurrentTheme = () =&gt; {\n  return document.documentElement.getAttribute('data-theme');\n};\n\n// Get navigation state\nconst getNavigationState = () =&gt; {\n  const collapsedSections = Array.from(document.querySelectorAll('.nav-section.collapsed'))\n    .map(section =&gt; section.dataset.section);\n  return { collapsedSections };\n};\n</code></pre>\n<h3 id=\"dom-element-access\">DOM Element Access</h3>\n<p><strong>Required Elements:</strong></p>\n<pre><code class=\"language-javascript\">// Core layout elements\nconst homepage = document.getElementById('homepage');\nconst docsLayout = document.getElementById('docs-layout');\nconst sidebar = document.querySelector('.sidebar');\n\n// Search elements\nconst searchInput = document.querySelector('.search-input');\nconst searchResults = document.querySelector('.search-results');\nconst searchResultsList = document.querySelector('.search-results-list');\n\n// Navigation elements\nconst navigationContainer = document.querySelector('.navigation-container');\nconst contentSections = document.querySelectorAll('.content-section');\nconst navLinks = document.querySelectorAll('.nav-link');\n</code></pre>\n<p><strong>Data Attributes:</strong></p>\n<ul>\n<li><code>data-content-id</code>: Links navigation items to content sections</li>\n<li><code>data-section</code>: Identifies collapsible navigation sections</li>\n<li><code>data-theme</code>: Current theme state on document element</li>\n</ul>\n<h2 id=\"advanced-customization\">Advanced Customization</h2>\n<h3 id=\"custom-navigation\">Custom Navigation</h3>\n<pre><code class=\"language-javascript\">// Add custom navigation item\nfunction addCustomNavItem(sectionId, title, contentId) {\n  const navSection = document.querySelector(`[data-section=&quot;${sectionId}&quot;] .nav-section-content`);\n  if (navSection) {\n    const link = document.createElement('a');\n    link.href = `#${contentId}`;\n    link.className = 'nav-link';\n    link.setAttribute('data-content-id', contentId);\n    link.textContent = title;\n    navSection.appendChild(link);\n  }\n}\n\n// Custom content injection\nfunction addCustomContent(contentId, title, htmlContent) {\n  const contentSection = document.createElement('div');\n  contentSection.className = 'content-section';\n  contentSection.id = contentId;\n  contentSection.style.display = 'none';\n  contentSection.innerHTML = `&lt;h1&gt;${title}&lt;/h1&gt;${htmlContent}`;\n  \n  document.querySelector('.main-content').appendChild(contentSection);\n  \n  // Add to search index\n  searchIndex[contentId] = {\n    title: title,\n    section: 'Custom',\n    content: contentSection.textContent\n  };\n}\n</code></pre>\n<h3 id=\"theme-customization\">Theme Customization</h3>\n<pre><code class=\"language-javascript\">// Custom theme switching\nfunction setCustomTheme(themeName) {\n  document.documentElement.setAttribute('data-theme', themeName);\n  localStorage.setItem('theme', themeName);\n}\n\n// Theme change detection\nconst observer = new MutationObserver((mutations) =&gt; {\n  mutations.forEach((mutation) =&gt; {\n    if (mutation.attributeName === 'data-theme') {\n      const newTheme = document.documentElement.getAttribute('data-theme');\n      console.log('Theme changed to:', newTheme);\n      // Custom theme change logic\n    }\n  });\n});\n\nobserver.observe(document.documentElement, {\n  attributes: true,\n  attributeFilter: ['data-theme']\n});\n</code></pre>\n<h3 id=\"search-customization\">Search Customization</h3>\n<pre><code class=\"language-javascript\">// Custom search implementation\nfunction customPerformSearch() {\n  const query = document.querySelector('.search-input').value.toLowerCase().trim();\n  const resultsContainer = document.querySelector('.search-results-list');\n  \n  if (!query) {\n    // Hide search results\n    document.querySelector('.search-results').style.display = 'none';\n    document.querySelector('.navigation-container').style.display = 'block';\n    return;\n  }\n  \n  const results = [];\n  \n  // Custom search logic\n  for (const [id, data] of Object.entries(searchIndex)) {\n    let score = 0;\n    \n    // Title match (highest priority)\n    if (data.title.toLowerCase().includes(query)) score += 10;\n    \n    // Section match (medium priority)\n    if (data.section.toLowerCase().includes(query)) score += 5;\n    \n    // Content match (lower priority)\n    if (data.content.toLowerCase().includes(query)) score += 1;\n    \n    if (score &gt; 0) {\n      results.push({ id, ...data, score });\n    }\n  }\n  \n  // Sort by score (descending)\n  results.sort((a, b) =&gt; b.score - a.score);\n  \n  // Display results\n  displaySearchResults(results, query);\n}\n\nfunction displaySearchResults(results, query) {\n  const resultsContainer = document.querySelector('.search-results-list');\n  \n  if (results.length === 0) {\n    resultsContainer.innerHTML = '&lt;div class=&quot;no-results&quot;&gt;No results found&lt;/div&gt;';\n  } else {\n    resultsContainer.innerHTML = results.map(result =&gt; {\n      const snippet = generateSnippet(result.content, query);\n      return `\n        &lt;div class=&quot;search-result&quot; onclick=&quot;showContentFromSearch('${result.id}')&quot;&gt;\n          &lt;div class=&quot;search-result-title&quot;&gt;${highlightText(result.title, query)}&lt;/div&gt;\n          &lt;div class=&quot;search-result-section&quot;&gt;${result.section}&lt;/div&gt;\n          &lt;div class=&quot;search-result-snippet&quot;&gt;${snippet}&lt;/div&gt;\n        &lt;/div&gt;\n      `;\n    }).join('');\n  }\n  \n  // Show search results\n  document.querySelector('.search-results').style.display = 'block';\n  document.querySelector('.navigation-container').style.display = 'none';\n}\n\nfunction generateSnippet(content, query, maxLength = 150) {\n  const queryIndex = content.toLowerCase().indexOf(query.toLowerCase());\n  if (queryIndex === -1) {\n    return content.substring(0, maxLength) + (content.length &gt; maxLength ? '...' : '');\n  }\n  \n  const start = Math.max(0, queryIndex - 50);\n  const end = Math.min(content.length, queryIndex + query.length + 50);\n  const snippet = content.substring(start, end);\n  \n  return (start &gt; 0 ? '...' : '') + \n         highlightText(snippet, query) + \n         (end &lt; content.length ? '...' : '');\n}\n\nfunction highlightText(text, query) {\n  const regex = new RegExp(`(${query})`, 'gi');\n  return text.replace(regex, '&lt;mark class=&quot;search-highlight&quot;&gt;$1&lt;/mark&gt;');\n}\n</code></pre>\n<h2 id=\"performance-and-optimization\">Performance and Optimization</h2>\n<h3 id=\"debounced-search\">Debounced Search</h3>\n<pre><code class=\"language-javascript\">// Implement search debouncing\nlet searchTimeout;\nfunction debouncedSearch() {\n  clearTimeout(searchTimeout);\n  searchTimeout = setTimeout(performSearch, 300);\n}\n\n// Replace default search input handler\ndocument.querySelector('.search-input').addEventListener('input', debouncedSearch);\n</code></pre>\n<h3 id=\"lazy-loading\">Lazy Loading</h3>\n<pre><code class=\"language-javascript\">// Lazy load content sections\nconst observerOptions = {\n  root: null,\n  rootMargin: '100px',\n  threshold: 0.1\n};\n\nconst contentObserver = new IntersectionObserver((entries) =&gt; {\n  entries.forEach(entry =&gt; {\n    if (entry.isIntersecting) {\n      // Load heavy content when section becomes visible\n      loadSectionAssets(entry.target);\n    }\n  });\n}, observerOptions);\n\n// Observe all content sections\ndocument.querySelectorAll('.content-section').forEach(section =&gt; {\n  contentObserver.observe(section);\n});\n</code></pre>\n<h2 id=\"error-handling-and-debugging\">Error Handling and Debugging</h2>\n<h3 id=\"debug-mode\">Debug Mode</h3>\n<pre><code class=\"language-javascript\">// Enable debug mode\nwindow.GLOWDOC_DEBUG = true;\n\n// Enhanced showContent with debugging\nfunction debugShowContent(contentId, updateUrl = true) {\n  if (window.GLOWDOC_DEBUG) {\n    console.log('Showing content:', contentId);\n    console.log('Available content IDs:', Object.keys(searchIndex));\n    console.log('Update URL:', updateUrl);\n  }\n  \n  const contentElement = document.getElementById(contentId);\n  if (!contentElement) {\n    console.error(`Content element with ID '${contentId}' not found`);\n    return;\n  }\n  \n  return showContent(contentId, updateUrl);\n}\n</code></pre>\n<h3 id=\"error-recovery\">Error Recovery</h3>\n<pre><code class=\"language-javascript\">// Handle missing content gracefully\nfunction safeShowContent(contentId, fallbackId = 'introduction') {\n  const contentElement = document.getElementById(contentId);\n  if (!contentElement) {\n    console.warn(`Content '${contentId}' not found, showing fallback`);\n    return showContent(fallbackId);\n  }\n  return showContent(contentId);\n}\n\n// Validate navigation state\nfunction validateNavigation() {\n  const issues = [];\n  \n  // Check for orphaned navigation links\n  document.querySelectorAll('[data-content-id]').forEach(link =&gt; {\n    const contentId = link.getAttribute('data-content-id');\n    if (!document.getElementById(contentId)) {\n      issues.push(`Navigation link points to missing content: ${contentId}`);\n    }\n  });\n  \n  // Check for content without navigation\n  document.querySelectorAll('.content-section').forEach(section =&gt; {\n    const contentId = section.id;\n    const navLink = document.querySelector(`[data-content-id=&quot;${contentId}&quot;]`);\n    if (!navLink) {\n      issues.push(`Content section has no navigation link: ${contentId}`);\n    }\n  });\n  \n  return issues;\n}\n</code></pre>\n<h2 id=\"browser-compatibility\">Browser Compatibility</h2>\n<p><strong>Supported Features:</strong></p>\n<ul>\n<li>ES6+ JavaScript (const, let, arrow functions, template literals)</li>\n<li>HTML5 History API</li>\n<li>CSS Custom Properties</li>\n<li>LocalStorage</li>\n<li>Modern DOM APIs</li>\n</ul>\n<p><strong>Minimum Browser Versions:</strong></p>\n<ul>\n<li>Chrome 49+</li>\n<li>Firefox 44+</li>\n<li>Safari 10+</li>\n<li>Edge 12+</li>\n</ul>\n<p><strong>Graceful Degradation:</strong></p>\n<pre><code class=\"language-javascript\">// Feature detection\nif (!window.history?.pushState) {\n  console.warn('History API not supported, using hash navigation');\n  // Fallback to hash-based navigation\n}\n\nif (!window.localStorage) {\n  console.warn('LocalStorage not supported, theme preference will not persist');\n  // Use session-based theme storage\n}\n</code></pre>\n<p>This comprehensive API reference provides complete control over GlowDoc's functionality, enabling deep customization while maintaining the system's performance and user experience benefits.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"advanced/deployment\">\n                <h1 id=\"deployment\">Deployment</h1>\n<p>Comprehensive guide to deploying your GlowDoc documentation site across various hosting platforms, from simple static hosting to advanced CI/CD pipelines.</p>\n<h2 id=\"overview\">Overview</h2>\n<p>GlowDoc generates a single <code>index.html</code> file containing your entire documentation site, making deployment simple and flexible. This approach offers several advantages:</p>\n<ul>\n<li><strong>Single File Deployment</strong>: No complex directory structures or dependencies</li>\n<li><strong>Universal Compatibility</strong>: Works with any static hosting service</li>\n<li><strong>Fast Loading</strong>: All assets embedded, no additional HTTP requests</li>\n<li><strong>Easy Backup</strong>: Single file contains everything</li>\n<li><strong>CDN Friendly</strong>: Perfect for content delivery networks</li>\n</ul>\n<h2 id=\"pre-deployment-checklist\">Pre-Deployment Checklist</h2>\n<p>Before deploying your documentation:</p>\n<h3 id=\"1-build-verification\">1. Build Verification</h3>\n<pre><code class=\"language-bash\"># Build your documentation\ncargo run --release\n\n# Verify the build succeeded\nls -la index.html\n\n# Test locally\npython3 -m http.server 8000\n# Visit http://localhost:8000 to verify everything works\n</code></pre>\n<h3 id=\"2-content-review\">2. Content Review</h3>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll pages load correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nNavigation works properly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nSearch functionality operates</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll themes (light/dark) display correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nMobile responsive design works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll links are functional</li>\n</ul>\n<h3 id=\"3-performance-optimization\">3. Performance Optimization</h3>\n<pre><code class=\"language-bash\"># Check file size (typical range: 500KB - 2MB)\ndu -h index.html\n\n# Optional: Minify if needed (for very large sites)\n# Note: GlowDoc output is already optimized\n</code></pre>\n<h2 id=\"static-hosting-platforms\">Static Hosting Platforms</h2>\n<h3 id=\"github-pages\">GitHub Pages</h3>\n<p>Deploy directly from your GitHub repository with automated builds.</p>\n<h4 id=\"method-1-github-actions-recommended\">Method 1: GitHub Actions (Recommended)</h4>\n<p>Create <code>.github/workflows/deploy.yml</code>:</p>\n<pre><code class=\"language-yaml\">name: Deploy GlowDoc\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    branches: [ main ]\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    \n    steps:\n    - uses: actions/checkout@v4\n    \n    - name: Install Rust\n      uses: dtolnay/rust-toolchain@stable\n    \n    - name: Cache Cargo dependencies\n      uses: actions/cache@v3\n      with:\n        path: |\n          ~/.cargo/registry\n          ~/.cargo/git\n          target\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\n    \n    - name: Build documentation\n      run: cargo run --release\n    \n    - name: Deploy to GitHub Pages\n      uses: peaceiris/actions-gh-pages@v3\n      if: github.ref == 'refs/heads/main'\n      with:\n        github_token: ${{ secrets.GITHUB_TOKEN }}\n        publish_dir: .\n        publish_branch: gh-pages\n        force_orphan: true\n        enable_jekyll: false\n        exclude_assets: |\n          .github\n          .gitignore\n          Cargo.toml\n          Cargo.lock\n          src\n          docs\n          target\n          README.md\n</code></pre>\n<h4 id=\"method-2-manual-upload\">Method 2: Manual Upload</h4>\n<pre><code class=\"language-bash\"># Build locally\ncargo run --release\n\n# Create gh-pages branch\ngit checkout --orphan gh-pages\ngit rm -rf .\ngit add index.html\ngit commit -m &quot;Deploy documentation&quot;\ngit push origin gh-pages\n\n# Return to main branch\ngit checkout main\n</code></pre>\n<h4 id=\"github-pages-configuration\">GitHub Pages Configuration</h4>\n<ol>\n<li>Go to your repository → Settings → Pages</li>\n<li>Set Source to &quot;Deploy from a branch&quot;</li>\n<li>Select <code>gh-pages</code> branch</li>\n<li>Choose <code>/ (root)</code> folder</li>\n<li>Save settings</li>\n</ol>\n<p><strong>Custom Domain Setup:</strong></p>\n<pre><code class=\"language-bash\"># Add CNAME file to repository root\necho &quot;docs.yoursite.com&quot; &gt; CNAME\ngit add CNAME\ngit commit -m &quot;Add custom domain&quot;\ngit push\n</code></pre>\n<h3 id=\"netlify\">Netlify</h3>\n<p>Professional hosting with advanced features and global CDN.</p>\n<h4 id=\"method-1-git-integration-recommended\">Method 1: Git Integration (Recommended)</h4>\n<ol>\n<li>\n<p><strong>Connect Repository:</strong></p>\n<ul>\n<li>Sign up at <a href=\"https://netlify.com\">netlify.com</a></li>\n<li>Click &quot;New site from Git&quot;</li>\n<li>Connect your GitHub/GitLab repository</li>\n</ul>\n</li>\n<li>\n<p><strong>Build Configuration:</strong></p>\n<pre><code class=\"language-toml\"># netlify.toml\n[build]\n  command = &quot;cargo run --release&quot;\n  publish = &quot;.&quot;\n\n[build.environment]\n  RUST_VERSION = &quot;1.70&quot;\n\n[[headers]]\n  for = &quot;/*&quot;\n  [headers.values]\n    X-Frame-Options = &quot;DENY&quot;\n    X-XSS-Protection = &quot;1; mode=block&quot;\n    X-Content-Type-Options = &quot;nosniff&quot;\n    Referrer-Policy = &quot;strict-origin-when-cross-origin&quot;\n\n[[redirects]]\n  from = &quot;/docs/*&quot;\n  to = &quot;/#:splat&quot;\n  status = 200\n</code></pre>\n</li>\n<li>\n<p><strong>Deploy Settings:</strong></p>\n<ul>\n<li>Build command: <code>cargo run --release</code></li>\n<li>Publish directory: <code>.</code> (root)</li>\n<li>Node version: Latest LTS</li>\n</ul>\n</li>\n</ol>\n<h4 id=\"method-2-manual-upload\">Method 2: Manual Upload</h4>\n<pre><code class=\"language-bash\"># Build documentation\ncargo run --release\n\n# Deploy via Netlify CLI\nnpm install -g netlify-cli\nnetlify login\nnetlify deploy --prod --dir=.\n</code></pre>\n<h4 id=\"advanced-netlify-features\">Advanced Netlify Features</h4>\n<p><strong>Form Handling:</strong></p>\n<pre><code class=\"language-html\">&lt;!-- Add to your documentation for feedback forms --&gt;\n&lt;form name=&quot;feedback&quot; method=&quot;POST&quot; data-netlify=&quot;true&quot;&gt;\n  &lt;input type=&quot;hidden&quot; name=&quot;form-name&quot; value=&quot;feedback&quot; /&gt;\n  &lt;input type=&quot;text&quot; name=&quot;name&quot; placeholder=&quot;Your name&quot; required /&gt;\n  &lt;textarea name=&quot;message&quot; placeholder=&quot;Feedback&quot; required&gt;&lt;/textarea&gt;\n  &lt;button type=&quot;submit&quot;&gt;Send Feedback&lt;/button&gt;\n&lt;/form&gt;\n</code></pre>\n<p><strong>Analytics Integration:</strong></p>\n<pre><code class=\"language-javascript\">// Add to your custom JavaScript\nif (window.netlifyIdentity) {\n  window.netlifyIdentity.on('init', user =&gt; {\n    if (!user) {\n      window.netlifyIdentity.on('login', () =&gt; {\n        document.location.href = '/admin/';\n      });\n    }\n  });\n}\n</code></pre>\n<h3 id=\"vercel\">Vercel</h3>\n<p>Zero-configuration deployment with excellent performance.</p>\n<h4 id=\"method-1-git-integration\">Method 1: Git Integration</h4>\n<ol>\n<li>\n<p><strong>Connect Repository:</strong></p>\n<ul>\n<li>Sign up at <a href=\"https://vercel.com\">vercel.com</a></li>\n<li>Import your Git repository</li>\n<li>Vercel auto-detects the setup</li>\n</ul>\n</li>\n<li>\n<p><strong>Configuration File:</strong></p>\n<pre><code class=\"language-json\">{\n  &quot;version&quot;: 2,\n  &quot;name&quot;: &quot;glowdoc-docs&quot;,\n  &quot;builds&quot;: [\n    {\n      &quot;src&quot;: &quot;package.json&quot;,\n      &quot;use&quot;: &quot;@vercel/static-build&quot;\n    }\n  ],\n  &quot;routes&quot;: [\n    {\n      &quot;src&quot;: &quot;/(.*)&quot;,\n      &quot;dest&quot;: &quot;/index.html&quot;\n    }\n  ],\n  &quot;env&quot;: {\n    &quot;RUST_VERSION&quot;: &quot;1.70&quot;\n  }\n}\n</code></pre>\n</li>\n<li>\n<p><strong>Package.json for Build:</strong></p>\n<pre><code class=\"language-json\">{\n  &quot;name&quot;: &quot;glowdoc-site&quot;,\n  &quot;scripts&quot;: {\n    &quot;build&quot;: &quot;curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y &amp;&amp; source ~/.cargo/env &amp;&amp; cargo run --release&quot;\n  }\n}\n</code></pre>\n</li>\n</ol>\n<h4 id=\"method-2-vercel-cli\">Method 2: Vercel CLI</h4>\n<pre><code class=\"language-bash\"># Install Vercel CLI\nnpm install -g vercel\n\n# Build and deploy\ncargo run --release\nvercel --prod\n</code></pre>\n<h3 id=\"cloudflare-pages\">Cloudflare Pages</h3>\n<p>High-performance hosting with global edge network.</p>\n<h4 id=\"setup-process\">Setup Process:</h4>\n<ol>\n<li>\n<p><strong>Connect Repository:</strong></p>\n<ul>\n<li>Sign up at <a href=\"https://pages.cloudflare.com\">pages.cloudflare.com</a></li>\n<li>Connect your Git repository</li>\n</ul>\n</li>\n<li>\n<p><strong>Build Configuration:</strong></p>\n<ul>\n<li>Build command: <code>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y &amp;&amp; source ~/.cargo/env &amp;&amp; cargo run --release</code></li>\n<li>Build output directory: <code>.</code></li>\n<li>Environment variables: <code>RUST_VERSION=1.70</code></li>\n</ul>\n</li>\n<li>\n<p><strong>Custom Domains:</strong></p>\n<pre><code class=\"language-bash\"># Configure custom domain in Cloudflare Dashboard\n# DNS automatically managed\n</code></pre>\n</li>\n</ol>\n<h3 id=\"firebase-hosting\">Firebase Hosting</h3>\n<p>Google's hosting platform with global CDN.</p>\n<h4 id=\"setup-process\">Setup Process:</h4>\n<pre><code class=\"language-bash\"># Install Firebase CLI\nnpm install -g firebase-tools\n\n# Initialize Firebase\nfirebase login\nfirebase init hosting\n\n# Configure firebase.json\n</code></pre>\n<pre><code class=\"language-json\">{\n  &quot;hosting&quot;: {\n    &quot;public&quot;: &quot;.&quot;,\n    &quot;ignore&quot;: [\n      &quot;firebase.json&quot;,\n      &quot;**/.*&quot;,\n      &quot;**/node_modules/**&quot;,\n      &quot;src/**&quot;,\n      &quot;docs/**&quot;,\n      &quot;target/**&quot;\n    ],\n    &quot;rewrites&quot;: [\n      {\n        &quot;source&quot;: &quot;**&quot;,\n        &quot;destination&quot;: &quot;/index.html&quot;\n      }\n    ],\n    &quot;headers&quot;: [\n      {\n        &quot;source&quot;: &quot;**/*.@(js|css)&quot;,\n        &quot;headers&quot;: [\n          {\n            &quot;key&quot;: &quot;Cache-Control&quot;,\n            &quot;value&quot;: &quot;max-age=31536000&quot;\n          }\n        ]\n      }\n    ]\n  }\n}\n</code></pre>\n<pre><code class=\"language-bash\"># Build and deploy\ncargo run --release\nfirebase deploy\n</code></pre>\n<h2 id=\"traditional-web-hosting\">Traditional Web Hosting</h2>\n<h3 id=\"apache-configuration\">Apache Configuration</h3>\n<p>For traditional web hosting with Apache:</p>\n<pre><code class=\"language-apache\"># .htaccess\nRewriteEngine On\n\n# Handle client-side routing\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule . /index.html [L]\n\n# Security headers\nHeader always set X-Frame-Options DENY\nHeader always set X-Content-Type-Options nosniff\nHeader always set X-XSS-Protection &quot;1; mode=block&quot;\nHeader always set Strict-Transport-Security &quot;max-age=31536000; includeSubDomains&quot;\n\n# Compression\n&lt;IfModule mod_deflate.c&gt;\n    AddOutputFilterByType DEFLATE text/html text/css application/javascript\n&lt;/IfModule&gt;\n\n# Caching\n&lt;IfModule mod_expires.c&gt;\n    ExpiresActive On\n    ExpiresByType text/html &quot;access plus 1 hour&quot;\n    ExpiresByType text/css &quot;access plus 1 year&quot;\n    ExpiresByType application/javascript &quot;access plus 1 year&quot;\n&lt;/IfModule&gt;\n</code></pre>\n<h3 id=\"nginx-configuration\">Nginx Configuration</h3>\n<p>For Nginx hosting:</p>\n<pre><code class=\"language-nginx\">server {\n    listen 80;\n    listen [::]:80;\n    server_name yourdomain.com;\n    \n    # Redirect HTTP to HTTPS\n    return 301 https://$server_name$request_uri;\n}\n\nserver {\n    listen 443 ssl http2;\n    listen [::]:443 ssl http2;\n    server_name yourdomain.com;\n    \n    # SSL configuration\n    ssl_certificate /path/to/certificate.crt;\n    ssl_certificate_key /path/to/private.key;\n    \n    # Document root\n    root /var/www/glowdoc;\n    index index.html;\n    \n    # Handle client-side routing\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n    \n    # Security headers\n    add_header X-Frame-Options DENY;\n    add_header X-Content-Type-Options nosniff;\n    add_header X-XSS-Protection &quot;1; mode=block&quot;;\n    add_header Strict-Transport-Security &quot;max-age=31536000; includeSubDomains&quot;;\n    \n    # Compression\n    gzip on;\n    gzip_types text/html text/css application/javascript;\n    \n    # Caching\n    location ~* \\.(css|js)$ {\n        expires 1y;\n        add_header Cache-Control &quot;public, immutable&quot;;\n    }\n}\n</code></pre>\n<h2 id=\"content-delivery-networks-cdn\">Content Delivery Networks (CDN)</h2>\n<h3 id=\"cloudflare-cdn\">Cloudflare CDN</h3>\n<p>Enhance performance with Cloudflare:</p>\n<ol>\n<li>\n<p><strong>DNS Setup:</strong></p>\n<ul>\n<li>Add your domain to Cloudflare</li>\n<li>Update nameservers</li>\n<li>Enable &quot;Proxied&quot; status</li>\n</ul>\n</li>\n<li>\n<p><strong>Optimization Settings:</strong></p>\n<ul>\n<li>Auto Minify: HTML, CSS, JS</li>\n<li>Brotli compression: Enabled</li>\n<li>Rocket Loader: Enabled</li>\n<li>Cache Level: Standard</li>\n</ul>\n</li>\n<li>\n<p><strong>Page Rules:</strong></p>\n<pre><code>yourdomain.com/*\n- Cache Level: Cache Everything\n- Edge Cache TTL: 1 month\n- Browser Cache TTL: 1 day\n</code></pre>\n</li>\n</ol>\n<h3 id=\"aws-cloudfront\">AWS CloudFront</h3>\n<p>Enterprise-grade CDN with AWS integration:</p>\n<pre><code class=\"language-json\">{\n  &quot;Distribution&quot;: {\n    &quot;Origins&quot;: [\n      {\n        &quot;Id&quot;: &quot;S3-glowdoc&quot;,\n        &quot;DomainName&quot;: &quot;your-bucket.s3.amazonaws.com&quot;,\n        &quot;S3OriginConfig&quot;: {\n          &quot;OriginAccessIdentity&quot;: &quot;&quot;\n        }\n      }\n    ],\n    &quot;DefaultCacheBehavior&quot;: {\n      &quot;TargetOriginId&quot;: &quot;S3-glowdoc&quot;,\n      &quot;ViewerProtocolPolicy&quot;: &quot;redirect-to-https&quot;,\n      &quot;Compress&quot;: true,\n      &quot;CachePolicyId&quot;: &quot;managed-caching-optimized&quot;\n    },\n    &quot;CustomErrorResponses&quot;: [\n      {\n        &quot;ErrorCode&quot;: 404,\n        &quot;ResponseCode&quot;: 200,\n        &quot;ResponsePagePath&quot;: &quot;/index.html&quot;\n      }\n    ]\n  }\n}\n</code></pre>\n<h2 id=\"automation-and-ci-cd\">Automation and CI/CD</h2>\n<h3 id=\"github-actions-advanced-workflow\">GitHub Actions Advanced Workflow</h3>\n<p>Complete CI/CD pipeline with testing and deployment:</p>\n<pre><code class=\"language-yaml\">name: Build, Test, and Deploy\n\non:\n  push:\n    branches: [ main, develop ]\n  pull_request:\n    branches: [ main ]\n\nenv:\n  CARGO_TERM_COLOR: always\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/checkout@v4\n    \n    - name: Install Rust\n      uses: dtolnay/rust-toolchain@stable\n    \n    - name: Run tests\n      run: cargo test --verbose\n    \n    - name: Check formatting\n      run: cargo fmt -- --check\n    \n    - name: Run clippy\n      run: cargo clippy -- -D warnings\n\n  build:\n    needs: test\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/checkout@v4\n    \n    - name: Install Rust\n      uses: dtolnay/rust-toolchain@stable\n    \n    - name: Cache dependencies\n      uses: actions/cache@v3\n      with:\n        path: |\n          ~/.cargo/registry\n          ~/.cargo/git\n          target\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\n    \n    - name: Build documentation\n      run: cargo run --release\n    \n    - name: Validate HTML\n      run: |\n        npm install -g html-validate\n        html-validate index.html\n    \n    - name: Check file size\n      run: |\n        SIZE=$(stat -c%s index.html)\n        echo &quot;Generated file size: $SIZE bytes&quot;\n        if [ $SIZE -gt 5242880 ]; then\n          echo &quot;Warning: File size exceeds 5MB&quot;\n          exit 1\n        fi\n    \n    - name: Upload artifacts\n      uses: actions/upload-artifact@v3\n      with:\n        name: documentation\n        path: index.html\n\n  deploy-staging:\n    needs: build\n    runs-on: ubuntu-latest\n    if: github.ref == 'refs/heads/develop'\n    steps:\n    - name: Download artifacts\n      uses: actions/download-artifact@v3\n      with:\n        name: documentation\n    \n    - name: Deploy to staging\n      run: |\n        # Deploy to staging environment\n        echo &quot;Deploying to staging...&quot;\n\n  deploy-production:\n    needs: build\n    runs-on: ubuntu-latest\n    if: github.ref == 'refs/heads/main'\n    steps:\n    - name: Download artifacts\n      uses: actions/download-artifact@v3\n      with:\n        name: documentation\n    \n    - name: Deploy to GitHub Pages\n      uses: peaceiris/actions-gh-pages@v3\n      with:\n        github_token: ${{ secrets.GITHUB_TOKEN }}\n        publish_dir: .\n        force_orphan: true\n    \n    - name: Notify deployment\n      run: |\n        curl -X POST ${{ secrets.SLACK_WEBHOOK }} \\\n          -H 'Content-type: application/json' \\\n          --data '{&quot;text&quot;:&quot;📚 Documentation deployed successfully!&quot;}'\n</code></pre>\n<h3 id=\"gitlab-ci-cd\">GitLab CI/CD</h3>\n<pre><code class=\"language-yaml\"># .gitlab-ci.yml\nstages:\n  - test\n  - build\n  - deploy\n\nvariables:\n  RUST_VERSION: &quot;1.70&quot;\n\nbefore_script:\n  - apt-get update -qq\n  - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y\n  - source ~/.cargo/env\n\ntest:\n  stage: test\n  script:\n    - cargo test --verbose\n    - cargo fmt -- --check\n    - cargo clippy -- -D warnings\n  only:\n    - merge_requests\n    - main\n\nbuild:\n  stage: build\n  script:\n    - cargo run --release\n  artifacts:\n    paths:\n      - index.html\n    expire_in: 1 hour\n  only:\n    - main\n\npages:\n  stage: deploy\n  script:\n    - mkdir public\n    - cp index.html public/\n  artifacts:\n    paths:\n      - public\n  only:\n    - main\n</code></pre>\n<h2 id=\"domain-and-ssl-configuration\">Domain and SSL Configuration</h2>\n<h3 id=\"custom-domain-setup\">Custom Domain Setup</h3>\n<h4 id=\"dns-configuration\">DNS Configuration:</h4>\n<pre><code># A Records for root domain\n@ 3600 IN A 185.199.108.153\n@ 3600 IN A 185.199.109.153\n@ 3600 IN A 185.199.110.153\n@ 3600 IN A 185.199.111.153\n\n# CNAME for www subdomain\nwww 3600 IN CNAME your-username.github.io.\n\n# CNAME for docs subdomain\ndocs 3600 IN CNAME your-site.netlify.app.\n</code></pre>\n<h4 id=\"ssl-certificate-setup\">SSL Certificate Setup:</h4>\n<p>Most modern hosting platforms provide automatic SSL:</p>\n<ul>\n<li><strong>GitHub Pages</strong>: Automatic with custom domains</li>\n<li><strong>Netlify</strong>: Automatic Let's Encrypt certificates</li>\n<li><strong>Vercel</strong>: Automatic SSL for all deployments</li>\n<li><strong>Cloudflare</strong>: Universal SSL included</li>\n</ul>\n<h3 id=\"manual-ssl-configuration\">Manual SSL Configuration</h3>\n<p>For traditional hosting:</p>\n<pre><code class=\"language-bash\"># Generate Let's Encrypt certificate\ncertbot certonly --webroot -w /var/www/glowdoc -d yourdomain.com\n\n# Auto-renewal\necho &quot;0 12 * * * /usr/bin/certbot renew --quiet&quot; | crontab -\n</code></pre>\n<h2 id=\"performance-optimization\">Performance Optimization</h2>\n<h3 id=\"build-optimization\">Build Optimization</h3>\n<pre><code class=\"language-bash\"># Optimize for production\nRUSTFLAGS=&quot;-C target-cpu=native&quot; cargo run --release\n\n# Profile build performance\ncargo build --release --timings\n</code></pre>\n<h3 id=\"content-optimization\">Content Optimization</h3>\n<ol>\n<li><strong>Image Optimization</strong>: Use optimized images in markdown</li>\n<li><strong>Font Subsetting</strong>: Include only needed font weights</li>\n<li><strong>Code Splitting</strong>: Implement lazy loading for large sections</li>\n</ol>\n<h3 id=\"monitoring-and-analytics\">Monitoring and Analytics</h3>\n<h4 id=\"performance-monitoring\">Performance Monitoring:</h4>\n<pre><code class=\"language-javascript\">// Add to your custom JavaScript\nfunction trackPerformance() {\n  window.addEventListener('load', () =&gt; {\n    const perfData = performance.timing;\n    const loadTime = perfData.loadEventEnd - perfData.navigationStart;\n    \n    // Send to analytics\n    gtag('event', 'page_load_time', {\n      value: loadTime,\n      custom_parameter: 'documentation_site'\n    });\n  });\n}\n</code></pre>\n<h4 id=\"uptime-monitoring\">Uptime Monitoring:</h4>\n<p>Set up monitoring with services like:</p>\n<ul>\n<li><strong>StatusCake</strong>: Free uptime monitoring</li>\n<li><strong>Pingdom</strong>: Comprehensive monitoring suite</li>\n<li><strong>UptimeRobot</strong>: Free and paid monitoring options</li>\n</ul>\n<h2 id=\"security-considerations\">Security Considerations</h2>\n<h3 id=\"content-security-policy\">Content Security Policy</h3>\n<pre><code class=\"language-html\">&lt;!-- Add to your HTML head --&gt;\n&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;\n  default-src 'self';\n  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com;\n  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;\n  font-src 'self' https://fonts.gstatic.com;\n  img-src 'self' data: https:;\n  connect-src 'self' https://www.google-analytics.com;\n&quot;&gt;\n</code></pre>\n<h3 id=\"security-headers\">Security Headers</h3>\n<p>Implement security headers across all hosting platforms:</p>\n<pre><code>X-Frame-Options: DENY\nX-Content-Type-Options: nosniff\nX-XSS-Protection: 1; mode=block\nStrict-Transport-Security: max-age=31536000; includeSubDomains\nReferrer-Policy: strict-origin-when-cross-origin\n</code></pre>\n<h2 id=\"troubleshooting-deployment-issues\">Troubleshooting Deployment Issues</h2>\n<h3 id=\"common-problems\">Common Problems</h3>\n<p><strong>Build Failures:</strong></p>\n<pre><code class=\"language-bash\"># Check Rust version compatibility\nrustc --version\n\n# Verify dependencies\ncargo check\n\n# Clean and rebuild\ncargo clean &amp;&amp; cargo run --release\n</code></pre>\n<p><strong>Routing Issues:</strong></p>\n<ul>\n<li>Ensure hosting platform supports SPA routing</li>\n<li>Configure redirects for client-side routing</li>\n<li>Verify base URL configuration</li>\n</ul>\n<p><strong>Performance Issues:</strong></p>\n<ul>\n<li>Check file size (should be under 5MB)</li>\n<li>Verify compression is enabled</li>\n<li>Test CDN configuration</li>\n</ul>\n<p><strong>SSL Certificate Problems:</strong></p>\n<ul>\n<li>Verify DNS propagation</li>\n<li>Check certificate chain</li>\n<li>Ensure HTTPS redirects are configured</li>\n</ul>\n<h3 id=\"debug-deployment\">Debug Deployment</h3>\n<pre><code class=\"language-bash\"># Test local build\ncargo run --release\npython3 -m http.server 8000\n\n# Validate HTML\nhtml-validate index.html\n\n# Check file permissions\nls -la index.html\n\n# Test from different networks\ncurl -I https://yourdomain.com\n</code></pre>\n<h2 id=\"best-practices\">Best Practices</h2>\n<ol>\n<li><strong>Version Control</strong>: Always commit before deploying</li>\n<li><strong>Staging Environment</strong>: Test changes before production</li>\n<li><strong>Automated Backups</strong>: Regular backup of source files</li>\n<li><strong>Performance Monitoring</strong>: Track load times and uptime</li>\n<li><strong>Security Updates</strong>: Keep hosting platform updated</li>\n<li><strong>Documentation</strong>: Document deployment process for team</li>\n<li><strong>Rollback Plan</strong>: Maintain ability to quickly revert changes</li>\n</ol>\n<p>This comprehensive deployment guide ensures your GlowDoc documentation is accessible, performant, and secure across any hosting platform.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"advanced/plugins\">\n                <h1 id=\"plugins-and-extensions\">Plugins and Extensions</h1>\n<p>Extend GlowDoc's functionality with custom plugins, third-party integrations, and advanced features to enhance your documentation experience.</p>\n<h2 id=\"plugin-architecture-overview\">Plugin Architecture Overview</h2>\n<p>GlowDoc's modular architecture allows for various extension points and integration patterns. While GlowDoc doesn't have a formal plugin system, you can extend functionality through several approaches:</p>\n<h3 id=\"extension-methods\">Extension Methods</h3>\n<ol>\n<li><strong>CSS and JavaScript Extensions</strong>: Add custom functionality through the Rust build process</li>\n<li><strong>Third-Party Integrations</strong>: Embed external services and tools</li>\n<li><strong>Build Process Extensions</strong>: Modify the Rust source for custom features</li>\n<li><strong>External Tool Integration</strong>: Combine GlowDoc with other documentation tools</li>\n</ol>\n<h2 id=\"syntax-highlighting-enhancements\">Syntax Highlighting Enhancements</h2>\n<h3 id=\"advanced-code-highlighting\">Advanced Code Highlighting</h3>\n<p>While GlowDoc includes basic syntax highlighting, you can enhance it with external libraries:</p>\n<h4 id=\"prism-js-integration\">Prism.js Integration</h4>\n<p>Add advanced syntax highlighting with Prism.js:</p>\n<pre><code class=\"language-javascript\">// Add to the JavaScript section in src/main.rs\nfunction initializePrism() {\n  // Load Prism.js dynamically\n  const script = document.createElement('script');\n  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';\n  script.onload = function() {\n    // Load additional language support\n    const languages = ['rust', 'javascript', 'python', 'bash', 'yaml'];\n    languages.forEach(lang =&gt; {\n      const langScript = document.createElement('script');\n      langScript.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${lang}.min.js`;\n      document.head.appendChild(langScript);\n    });\n    \n    // Load Prism CSS\n    const link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css';\n    document.head.appendChild(link);\n    \n    // Re-highlight all code blocks\n    Prism.highlightAll();\n  };\n  document.head.appendChild(script);\n}\n\n// Call during page initialization\ninitializePrism();\n</code></pre>\n<h4 id=\"custom-syntax-highlighting\">Custom Syntax Highlighting</h4>\n<p>Create custom highlighting for domain-specific languages:</p>\n<pre><code class=\"language-javascript\">function customHighlighter() {\n  document.querySelectorAll('pre code').forEach(block =&gt; {\n    const language = block.className.match(/language-(\\w+)/);\n    if (language &amp;&amp; language[1] === 'custom-dsl') {\n      highlightCustomDSL(block);\n    }\n  });\n}\n\nfunction highlightCustomDSL(codeBlock) {\n  let html = codeBlock.innerHTML;\n  \n  // Define custom syntax patterns\n  const patterns = [\n    { regex: /\\b(function|if|else|return)\\b/g, class: 'keyword' },\n    { regex: /\\b\\d+\\b/g, class: 'number' },\n    { regex: /&quot;[^&quot;]*&quot;/g, class: 'string' },\n    { regex: /\\/\\/.*$/gm, class: 'comment' }\n  ];\n  \n  patterns.forEach(pattern =&gt; {\n    html = html.replace(pattern.regex, `&lt;span class=&quot;${pattern.class}&quot;&gt;$&amp;&lt;/span&gt;`);\n  });\n  \n  codeBlock.innerHTML = html;\n}\n</code></pre>\n<h3 id=\"code-copy-functionality\">Code Copy Functionality</h3>\n<p>Add copy-to-clipboard buttons for code blocks:</p>\n<pre><code class=\"language-javascript\">function addCopyButtons() {\n  document.querySelectorAll('pre').forEach(pre =&gt; {\n    const button = document.createElement('button');\n    button.className = 'copy-button';\n    button.textContent = 'Copy';\n    button.onclick = () =&gt; copyToClipboard(pre.textContent, button);\n    \n    pre.style.position = 'relative';\n    pre.appendChild(button);\n  });\n}\n\nfunction copyToClipboard(text, button) {\n  navigator.clipboard.writeText(text).then(() =&gt; {\n    const originalText = button.textContent;\n    button.textContent = 'Copied!';\n    button.classList.add('copied');\n    \n    setTimeout(() =&gt; {\n      button.textContent = originalText;\n      button.classList.remove('copied');\n    }, 2000);\n  });\n}\n\n// CSS for copy button\nconst copyButtonCSS = `\n.copy-button {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n  border: none;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\npre:hover .copy-button {\n  opacity: 1;\n}\n\n.copy-button.copied {\n  background: hsl(var(--accent));\n}\n`;\n</code></pre>\n<h2 id=\"search-enhancements\">Search Enhancements</h2>\n<h3 id=\"advanced-search-integration\">Advanced Search Integration</h3>\n<h4 id=\"algolia-docsearch\">Algolia DocSearch</h4>\n<p>Integrate Algolia's DocSearch for powerful search capabilities:</p>\n<pre><code class=\"language-javascript\">function initializeAlgoliaSearch() {\n  // Load Algolia DocSearch\n  const script = document.createElement('script');\n  script.src = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3';\n  script.onload = function() {\n    docsearch({\n      appId: 'YOUR_APP_ID',\n      apiKey: 'YOUR_SEARCH_API_KEY',\n      indexName: 'YOUR_INDEX_NAME',\n      container: '#docsearch',\n      searchParameters: {\n        facetFilters: ['language:en'],\n      },\n    });\n  };\n  document.head.appendChild(script);\n  \n  // Replace existing search input\n  const searchContainer = document.querySelector('.search-container');\n  searchContainer.innerHTML = '&lt;div id=&quot;docsearch&quot;&gt;&lt;/div&gt;';\n}\n</code></pre>\n<h4 id=\"lunr-js-client-side-search\">Lunr.js Client-Side Search</h4>\n<p>Implement advanced client-side search with Lunr.js:</p>\n<pre><code class=\"language-javascript\">function initializeLunrSearch() {\n  // Build search index from content\n  const documents = [];\n  document.querySelectorAll('.content-section').forEach((section, idx) =&gt; {\n    documents.push({\n      id: idx,\n      title: section.querySelector('h1')?.textContent || '',\n      content: section.textContent,\n      url: section.id\n    });\n  });\n  \n  // Create Lunr index\n  const idx = lunr(function () {\n    this.ref('id');\n    this.field('title', { boost: 10 });\n    this.field('content');\n    \n    documents.forEach((doc) =&gt; {\n      this.add(doc);\n    });\n  });\n  \n  // Enhanced search function\n  function performSearch(query) {\n    const results = idx.search(query);\n    return results.map(result =&gt; {\n      const doc = documents[result.ref];\n      return {\n        ...doc,\n        score: result.score,\n        excerpt: generateExcerpt(doc.content, query)\n      };\n    });\n  }\n  \n  function generateExcerpt(content, query, maxLength = 150) {\n    const index = content.toLowerCase().indexOf(query.toLowerCase());\n    if (index === -1) return content.substring(0, maxLength) + '...';\n    \n    const start = Math.max(0, index - 50);\n    const end = Math.min(content.length, index + query.length + 50);\n    const excerpt = content.substring(start, end);\n    \n    return (start &gt; 0 ? '...' : '') + excerpt + (end &lt; content.length ? '...' : '');\n  }\n}\n</code></pre>\n<h3 id=\"search-analytics\">Search Analytics</h3>\n<p>Track search behavior and popular queries:</p>\n<pre><code class=\"language-javascript\">function trackSearchAnalytics() {\n  const searchInput = document.querySelector('.search-input');\n  \n  searchInput.addEventListener('input', debounce((e) =&gt; {\n    const query = e.target.value;\n    if (query.length &gt; 2) {\n      // Track search queries\n      gtag('event', 'search', {\n        search_term: query,\n        page_title: document.title\n      });\n    }\n  }, 1000));\n  \n  // Track search result clicks\n  document.addEventListener('click', (e) =&gt; {\n    if (e.target.classList.contains('search-result')) {\n      gtag('event', 'search_result_click', {\n        search_term: searchInput.value,\n        result_title: e.target.textContent\n      });\n    }\n  });\n}\n\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () =&gt; {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n</code></pre>\n<h2 id=\"analytics-and-tracking\">Analytics and Tracking</h2>\n<h3 id=\"google-analytics-4-integration\">Google Analytics 4 Integration</h3>\n<p>Implement comprehensive analytics tracking:</p>\n<pre><code class=\"language-javascript\">function initializeAnalytics() {\n  // Load Google Analytics\n  const script1 = document.createElement('script');\n  script1.async = true;\n  script1.src = 'https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID';\n  document.head.appendChild(script1);\n  \n  const script2 = document.createElement('script');\n  script2.innerHTML = `\n    window.dataLayer = window.dataLayer || [];\n    function gtag(){dataLayer.push(arguments);}\n    gtag('js', new Date());\n    gtag('config', 'YOUR_GA_ID', {\n      page_title: document.title,\n      page_location: window.location.href\n    });\n  `;\n  document.head.appendChild(script2);\n}\n\nfunction trackUserBehavior() {\n  // Track page navigation\n  document.addEventListener('click', (e) =&gt; {\n    if (e.target.classList.contains('nav-link')) {\n      gtag('event', 'page_view', {\n        page_title: e.target.textContent,\n        page_location: window.location.href + '#' + e.target.getAttribute('href').substring(1)\n      });\n    }\n  });\n  \n  // Track theme changes\n  document.querySelector('.theme-toggle').addEventListener('click', () =&gt; {\n    const currentTheme = document.documentElement.getAttribute('data-theme');\n    gtag('event', 'theme_change', {\n      theme: currentTheme === 'dark' ? 'light' : 'dark'\n    });\n  });\n  \n  // Track scroll depth\n  let maxScroll = 0;\n  window.addEventListener('scroll', debounce(() =&gt; {\n    const scrollPercent = Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100);\n    if (scrollPercent &gt; maxScroll) {\n      maxScroll = scrollPercent;\n      if (maxScroll % 25 === 0) { // Track at 25%, 50%, 75%, 100%\n        gtag('event', 'scroll_depth', {\n          percent: maxScroll,\n          page_title: document.title\n        });\n      }\n    }\n  }, 500));\n}\n</code></pre>\n<h3 id=\"hotjar-integration\">Hotjar Integration</h3>\n<p>Add user behavior tracking with Hotjar:</p>\n<pre><code class=\"language-javascript\">function initializeHotjar() {\n  const script = document.createElement('script');\n  script.innerHTML = `\n    (function(h,o,t,j,a,r){\n      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\n      h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};\n      a=o.getElementsByTagName('head')[0];\n      r=o.createElement('script');r.async=1;\n      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\n      a.appendChild(r);\n    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\n  `;\n  document.head.appendChild(script);\n}\n</code></pre>\n<h2 id=\"accessibility-enhancements\">Accessibility Enhancements</h2>\n<h3 id=\"screen-reader-improvements\">Screen Reader Improvements</h3>\n<p>Enhance accessibility with ARIA attributes and screen reader support:</p>\n<pre><code class=\"language-javascript\">function enhanceAccessibility() {\n  // Add skip navigation\n  const skipLink = document.createElement('a');\n  skipLink.href = '#main-content';\n  skipLink.textContent = 'Skip to main content';\n  skipLink.className = 'skip-link';\n  document.body.insertBefore(skipLink, document.body.firstChild);\n  \n  // Improve navigation ARIA labels\n  document.querySelectorAll('.nav-section-title').forEach(title =&gt; {\n    const sectionId = title.getAttribute('data-section');\n    title.setAttribute('aria-expanded', 'false');\n    title.setAttribute('aria-controls', sectionId + '-content');\n    \n    const content = title.nextElementSibling;\n    if (content) {\n      content.setAttribute('id', sectionId + '-content');\n      content.setAttribute('aria-labelledby', sectionId + '-title');\n    }\n  });\n  \n  // Announce page changes to screen readers\n  const announcer = document.createElement('div');\n  announcer.setAttribute('aria-live', 'polite');\n  announcer.setAttribute('aria-atomic', 'true');\n  announcer.className = 'sr-only';\n  document.body.appendChild(announcer);\n  \n  // Announce when content changes\n  function announcePageChange(title) {\n    announcer.textContent = `Navigated to ${title}`;\n    setTimeout(() =&gt; announcer.textContent = '', 1000);\n  }\n  \n  return { announcePageChange };\n}\n\n// CSS for accessibility\nconst accessibilityCSS = `\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 6px;\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n  padding: 8px;\n  text-decoration: none;\n  border-radius: 0 0 4px 4px;\n  z-index: 1000;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n</code></pre>\n<h3 id=\"keyboard-navigation-enhancement\">Keyboard Navigation Enhancement</h3>\n<p>Improve keyboard navigation throughout the documentation:</p>\n<pre><code class=\"language-javascript\">function enhanceKeyboardNavigation() {\n  let focusedSearchResult = -1;\n  \n  document.addEventListener('keydown', (e) =&gt; {\n    // Search result navigation\n    if (e.target.classList.contains('search-input')) {\n      const results = document.querySelectorAll('.search-result');\n      \n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          focusedSearchResult = Math.min(focusedSearchResult + 1, results.length - 1);\n          updateSearchResultFocus(results);\n          break;\n          \n        case 'ArrowUp':\n          e.preventDefault();\n          focusedSearchResult = Math.max(focusedSearchResult - 1, -1);\n          updateSearchResultFocus(results);\n          break;\n          \n        case 'Enter':\n          if (focusedSearchResult &gt;= 0 &amp;&amp; results[focusedSearchResult]) {\n            e.preventDefault();\n            results[focusedSearchResult].click();\n          }\n          break;\n          \n        case 'Escape':\n          e.target.blur();\n          document.querySelector('.search-results').style.display = 'none';\n          break;\n      }\n    }\n    \n    // Global shortcuts\n    if (e.ctrlKey || e.metaKey) {\n      switch (e.key) {\n        case 'k':\n          e.preventDefault();\n          document.querySelector('.search-input').focus();\n          break;\n          \n        case '/':\n          e.preventDefault();\n          document.querySelector('.search-input').focus();\n          break;\n      }\n    }\n  });\n  \n  function updateSearchResultFocus(results) {\n    results.forEach((result, index) =&gt; {\n      result.classList.toggle('focused', index === focusedSearchResult);\n    });\n    \n    if (focusedSearchResult &gt;= 0 &amp;&amp; results[focusedSearchResult]) {\n      results[focusedSearchResult].scrollIntoView({ block: 'nearest' });\n    }\n  }\n}\n</code></pre>\n<h2 id=\"performance-enhancements\">Performance Enhancements</h2>\n<h3 id=\"lazy-loading-and-code-splitting\">Lazy Loading and Code Splitting</h3>\n<p>Implement performance optimizations:</p>\n<pre><code class=\"language-javascript\">function implementLazyLoading() {\n  // Lazy load heavy components\n  const observerOptions = {\n    root: null,\n    rootMargin: '100px',\n    threshold: 0.1\n  };\n  \n  const observer = new IntersectionObserver((entries) =&gt; {\n    entries.forEach(entry =&gt; {\n      if (entry.isIntersecting) {\n        const section = entry.target;\n        loadSectionAssets(section);\n        observer.unobserve(section);\n      }\n    });\n  }, observerOptions);\n  \n  // Observe content sections for lazy loading\n  document.querySelectorAll('.content-section').forEach(section =&gt; {\n    observer.observe(section);\n  });\n  \n  function loadSectionAssets(section) {\n    // Load section-specific assets\n    const codeBlocks = section.querySelectorAll('pre code');\n    if (codeBlocks.length &gt; 0) {\n      loadSyntaxHighlighting(codeBlocks);\n    }\n    \n    const diagrams = section.querySelectorAll('.mermaid');\n    if (diagrams.length &gt; 0) {\n      loadMermaidDiagrams(diagrams);\n    }\n  }\n}\n\nfunction implementServiceWorker() {\n  if ('serviceWorker' in navigator) {\n    const swContent = `\n      const CACHE_NAME = 'glowdoc-v1';\n      const urlsToCache = [\n        '/',\n        '/index.html'\n      ];\n      \n      self.addEventListener('install', (event) =&gt; {\n        event.waitUntil(\n          caches.open(CACHE_NAME)\n            .then((cache) =&gt; cache.addAll(urlsToCache))\n        );\n      });\n      \n      self.addEventListener('fetch', (event) =&gt; {\n        event.respondWith(\n          caches.match(event.request)\n            .then((response) =&gt; {\n              return response || fetch(event.request);\n            })\n        );\n      });\n    `;\n    \n    const blob = new Blob([swContent], { type: 'application/javascript' });\n    const swURL = URL.createObjectURL(blob);\n    \n    navigator.serviceWorker.register(swURL)\n      .then((registration) =&gt; {\n        console.log('ServiceWorker registered:', registration);\n      })\n      .catch((error) =&gt; {\n        console.log('ServiceWorker registration failed:', error);\n      });\n  }\n}\n</code></pre>\n<h2 id=\"diagram-and-visualization-support\">Diagram and Visualization Support</h2>\n<h3 id=\"mermaid-diagrams\">Mermaid Diagrams</h3>\n<p>Add support for Mermaid diagrams:</p>\n<pre><code class=\"language-javascript\">function initializeMermaid() {\n  const script = document.createElement('script');\n  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';\n  script.onload = function() {\n    mermaid.initialize({\n      startOnLoad: false,\n      theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default',\n      securityLevel: 'loose'\n    });\n    \n    // Process Mermaid diagrams\n    document.querySelectorAll('.language-mermaid').forEach(async (element, index) =&gt; {\n      const graphDefinition = element.textContent;\n      const graphId = `mermaid-graph-${index}`;\n      \n      try {\n        const { svg } = await mermaid.render(graphId, graphDefinition);\n        const wrapper = document.createElement('div');\n        wrapper.className = 'mermaid-wrapper';\n        wrapper.innerHTML = svg;\n        element.closest('pre').replaceWith(wrapper);\n      } catch (error) {\n        console.error('Mermaid rendering error:', error);\n      }\n    });\n  };\n  document.head.appendChild(script);\n}\n\n// Update Mermaid theme when user changes theme\nfunction updateMermaidTheme() {\n  const observer = new MutationObserver((mutations) =&gt; {\n    mutations.forEach((mutation) =&gt; {\n      if (mutation.attributeName === 'data-theme') {\n        const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default';\n        if (window.mermaid) {\n          mermaid.initialize({ theme: newTheme });\n          // Re-render existing diagrams\n          document.querySelectorAll('.mermaid-wrapper').forEach(async (wrapper, index) =&gt; {\n            // Re-render logic here\n          });\n        }\n      }\n    });\n  });\n  \n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['data-theme']\n  });\n}\n</code></pre>\n<h3 id=\"chart-js-integration\">Chart.js Integration</h3>\n<p>Add interactive charts and graphs:</p>\n<pre><code class=\"language-javascript\">function initializeCharts() {\n  const script = document.createElement('script');\n  script.src = 'https://cdn.jsdelivr.net/npm/chart.js';\n  script.onload = function() {\n    document.querySelectorAll('.chart-container').forEach(container =&gt; {\n      const config = JSON.parse(container.dataset.config);\n      const canvas = document.createElement('canvas');\n      container.appendChild(canvas);\n      \n      new Chart(canvas, {\n        ...config,\n        options: {\n          ...config.options,\n          responsive: true,\n          plugins: {\n            ...config.options?.plugins,\n            legend: {\n              ...config.options?.plugins?.legend,\n              labels: {\n                color: getComputedStyle(document.documentElement)\n                  .getPropertyValue('--foreground')\n              }\n            }\n          }\n        }\n      });\n    });\n  };\n  document.head.appendChild(script);\n}\n</code></pre>\n<h2 id=\"plugin-development-guide\">Plugin Development Guide</h2>\n<h3 id=\"creating-custom-extensions\">Creating Custom Extensions</h3>\n<p>Structure for building your own GlowDoc extensions:</p>\n<pre><code class=\"language-rust\">// In src/main.rs, add to the generate_javascript() function\n\npub fn generate_custom_plugin_javascript() -&gt; String {\n    r#&quot;\n    // Custom Plugin Framework\n    class GlowDocPlugin {\n        constructor(name, options = {}) {\n            this.name = name;\n            this.options = options;\n            this.hooks = {};\n            this.initialized = false;\n        }\n        \n        // Register event hooks\n        on(event, callback) {\n            if (!this.hooks[event]) {\n                this.hooks[event] = [];\n            }\n            this.hooks[event].push(callback);\n            return this;\n        }\n        \n        // Trigger event hooks\n        trigger(event, data) {\n            if (this.hooks[event]) {\n                this.hooks[event].forEach(callback =&gt; callback(data));\n            }\n        }\n        \n        // Initialize plugin\n        init() {\n            if (this.initialized) return;\n            this.trigger('beforeInit', this.options);\n            this.setup();\n            this.initialized = true;\n            this.trigger('afterInit', this.options);\n        }\n        \n        // Override in subclasses\n        setup() {\n            throw new Error('Plugin must implement setup() method');\n        }\n    }\n    \n    // Plugin registry\n    window.GlowDocPlugins = {\n        plugins: new Map(),\n        \n        register(plugin) {\n            this.plugins.set(plugin.name, plugin);\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', () =&gt; plugin.init());\n            } else {\n                plugin.init();\n            }\n        },\n        \n        get(name) {\n            return this.plugins.get(name);\n        }\n    };\n    \n    // Example plugin\n    class ExamplePlugin extends GlowDocPlugin {\n        setup() {\n            this.on('beforeInit', (options) =&gt; {\n                console.log('Example plugin initializing with options:', options);\n            });\n            \n            // Add custom functionality\n            this.addCustomButton();\n        }\n        \n        addCustomButton() {\n            const button = document.createElement('button');\n            button.textContent = 'Custom Action';\n            button.onclick = () =&gt; this.trigger('customAction', 'Hello from plugin!');\n            document.querySelector('.header-content').appendChild(button);\n        }\n    }\n    \n    // Auto-register plugins\n    document.addEventListener('DOMContentLoaded', () =&gt; {\n        // Register built-in plugins\n        const examplePlugin = new ExamplePlugin('example', { debug: true });\n        GlowDocPlugins.register(examplePlugin);\n    });\n    &quot;#.to_string()\n}\n</code></pre>\n<h3 id=\"plugin-configuration\">Plugin Configuration</h3>\n<p>Allow users to configure plugins through config.yaml:</p>\n<pre><code class=\"language-rust\">// Add to Config struct in src/main.rs\n#[derive(Debug, Deserialize, Serialize)]\nstruct PluginConfig {\n    name: String,\n    enabled: bool,\n    options: HashMap&lt;String, serde_yaml::Value&gt;,\n}\n\n#[derive(Debug, Deserialize, Serialize)]\nstruct Config {\n    title: String,\n    description: String,\n    navigation: Vec&lt;NavigationSection&gt;,\n    theme: String,\n    plugins: Option&lt;Vec&lt;PluginConfig&gt;&gt;,\n}\n</code></pre>\n<h2 id=\"best-practices-for-extensions\">Best Practices for Extensions</h2>\n<h3 id=\"performance-considerations\">Performance Considerations</h3>\n<ol>\n<li><strong>Lazy Loading</strong>: Only load plugins when needed</li>\n<li><strong>Code Splitting</strong>: Separate plugin code from core functionality</li>\n<li><strong>Memory Management</strong>: Clean up event listeners and resources</li>\n<li><strong>Minimal Dependencies</strong>: Keep external dependencies lightweight</li>\n</ol>\n<h3 id=\"security-guidelines\">Security Guidelines</h3>\n<ol>\n<li><strong>Input Validation</strong>: Sanitize all user inputs</li>\n<li><strong>Content Security Policy</strong>: Implement CSP headers</li>\n<li><strong>External Resources</strong>: Use integrity hashes for CDN resources</li>\n<li><strong>User Data</strong>: Handle user data securely</li>\n</ol>\n<h3 id=\"accessibility-standards\">Accessibility Standards</h3>\n<ol>\n<li><strong>ARIA Support</strong>: Provide proper ARIA attributes</li>\n<li><strong>Keyboard Navigation</strong>: Ensure all functionality is keyboard accessible</li>\n<li><strong>Screen Reader Compatibility</strong>: Test with screen readers</li>\n<li><strong>Color Contrast</strong>: Maintain adequate contrast ratios</li>\n</ol>\n<h2 id=\"troubleshooting-plugins\">Troubleshooting Plugins</h2>\n<p><strong>Plugin not loading</strong>: Check browser console for JavaScript errors and verify script URLs.</p>\n<p><strong>Conflicts between plugins</strong>: Implement proper namespacing and avoid global variable conflicts.</p>\n<p><strong>Performance issues</strong>: Profile plugin performance and optimize heavy operations.</p>\n<p><strong>Theme compatibility</strong>: Ensure plugins work with all themes and dark mode.</p>\n<p><strong>Mobile responsiveness</strong>: Test plugin functionality on mobile devices.</p>\n\n            </section>\n                </div>\n                <aside class=\"table-of-contents\" id=\"table-of-contents\">\n                    <div class=\"toc-header\">\n                        <h3>On this page</h3>\n                    </div>\n                    <nav class=\"toc-nav\" id=\"toc-nav\">\n                        <!-- Table of contents will be populated by JavaScript -->\n                    </nav>\n                </aside>\n            </div>\n        </main>\n    </div>\n\n    <footer>\n        <div class=\"container\">\n            <p>&copy; 2025 GlowDoc. Built with modern web standards.</p>\n        </div>\n    </footer>\n\n    <script>\nconst searchIndex = {\n    \"introduction/what-is-glowdoc\": {\n        \"title\": \"What is GlowDoc?\",\n        \"section\": \"Introduction\",\n        \"content\": \"# What is GlowDoc?\\n\\nGlowDoc is a modern, lightweight documentation template that presents a beautiful thoughtful space for your work. It's built with pure HTML, CSS, and minimal JavaScript to ensure fast loading times and easy customization.\\n\\n## Key Features\\n\\n- **Modern Design** - Clean, professional appearance with attention to typography and spacing\\n- **Dark Mode** - Built-in dark mode support with smooth transitions\\n- **Responsive** - Works perfectly on desktop, tablet, and mobile devices\\n- **Fast** - Minimal dependencies and optimized for performance\\n- **Accessible** - Built with accessibility best practices\\n- **Customizable** - Easy to modify colors, fonts, and layout\\n\\n## Perfect For\\n\\nGlowDoc is ideal for:\\n\\n- Project documentation\\n- API documentation\\n- User guides and tutorials\\n- Knowledge bases\\n- Technical blogs\\n\\n## Philosophy\\n\\nWe believe documentation should be beautiful, fast, and accessible. GlowDoc follows these principles by providing a clean, distraction-free reading experience that focuses on your content.\"\n    },\n    \"introduction/quick-start\": {\n        \"title\": \"Quick Start\",\n        \"section\": \"Introduction\",\n        \"content\": \"# Quick Start\\n\\nGet up and running with GlowDoc in minutes. This comprehensive guide will walk you through installation, setup, and creating your first professional documentation site.\\n\\n## Prerequisites\\n\\nBefore you begin, ensure you have the following installed:\\n\\n### Required Software\\n\\n**Rust (Latest Stable)**\\n```bash\\n# Install Rust using rustup (recommended)\\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\\n\\n# Follow the on-screen instructions, then reload your shell\\nsource ~/.cargo/env\\n\\n# Verify installation\\nrustc --version\\ncargo --version\\n```\\n\\n**Git**\\n```bash\\n# Check if Git is installed\\ngit --version\\n\\n# If not installed:\\n# macOS: Install Xcode Command Line Tools\\nxcode-select --install\\n\\n# Windows: Download from https://git-scm.com/download/win\\n# Linux (Ubuntu/Debian): sudo apt-get install git\\n```\\n\\n**Python 3 (for local testing)**\\n```bash\\n# Check Python installation\\npython3 --version\\n\\n# Python is usually pre-installed on macOS/Linux\\n# Windows: Download from https://python.org\\n```\\n\\n### System Requirements\\n\\n- **Operating System**: macOS, Linux, or Windows\\n- **RAM**: 512MB minimum, 1GB recommended\\n- **Disk Space**: 100MB for Rust toolchain + project files\\n- **Network**: Internet connection for dependencies (initial setup only)\\n\\n## Installation Options\\n\\nChoose the installation method that best fits your workflow:\\n\\n### Option 1: Download Release (Quickest)\\n\\n1. **Download the latest release:**\\n   ```bash\\n   # Download and extract (replace URL with actual release)\\n   curl -L https://github.com/username/glowdoc/archive/refs/heads/main.zip -o glowdoc.zip\\n   unzip glowdoc.zip\\n   cd glowdoc-main\\n   ```\\n\\n2. **Build immediately:**\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n### Option 2: Clone Repository (Recommended for Development)\\n\\n1. **Clone the repository:**\\n   ```bash\\n   git clone https://github.com/username/glowdoc.git\\n   cd glowdoc\\n   ```\\n\\n2. **Build the documentation:**\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n### Option 3: Start Fresh Project\\n\\n1. **Create new project directory:**\\n   ```bash\\n   mkdir my-docs\\n   cd my-docs\\n   ```\\n\\n2. **Copy GlowDoc source files:**\\n   ```bash\\n   # Copy src/ and docs/ directories from GlowDoc\\n   # Copy Cargo.toml\\n   ```\\n\\n3. **Initialize your documentation:**\\n   ```bash\\n   cargo run init-config\\n   ```\\n\\n## Project Structure Overview\\n\\nUnderstanding GlowDoc's structure helps you work effectively:\\n\\n```\\nglowdoc/\\n├── Cargo.toml              # Rust project configuration\\n├── src/                    # Rust source code\\n│   ├── main.rs            # Main application logic\\n│   └── config_builder.rs   # Configuration builder\\n├── docs/                   # Your documentation source\\n│   ├── config.yaml        # Navigation configuration\\n│   ├── entry.md           # Homepage content (optional)\\n│   ├── introduction/      # Documentation sections\\n│   │   ├── quick-start.md\\n│   │   └── what-is-glowdoc.md\\n│   ├── getting-started/\\n│   │   ├── installation.md\\n│   │   ├── configuration.md\\n│   │   └── first-steps.md\\n│   └── [more-sections]/\\n├── index.html              # Generated documentation site\\n├── README.md              # Project information\\n└── .gitignore             # Git ignore rules\\n```\\n\\n### Key Directories\\n\\n- **`docs/`**: Your markdown documentation files\\n- **`src/`**: GlowDoc's Rust source code (modify for customization)\\n- **`index.html`**: Generated single-file documentation site\\n\\n## 5-Minute Setup\\n\\nFollow these steps to have a working documentation site in 5 minutes:\\n\\n### Step 1: Build Your First Site (1 minute)\\n\\n```bash\\n# After installation, build immediately\\ncargo run --release\\n\\n# You should see output like:\\n# \\\"Building documentation...\\\"\\n# \\\"Generated index.html successfully\\\"\\n```\\n\\n### Step 2: Preview Your Site (30 seconds)\\n\\n```bash\\n# Start local server\\npython3 -m http.server 8000\\n\\n# Open in browser\\n# Visit: http://localhost:8000\\n```\\n\\n**Alternative server options:**\\n```bash\\n# Node.js users\\nnpx serve .\\n\\n# PHP users\\nphp -S localhost:8000\\n\\n# Python 2 users\\npython -m SimpleHTTPServer 8000\\n```\\n\\n### Step 3: Verify Everything Works (30 seconds)\\n\\nCheck these features in your browser:\\n\\n- [ ] Homepage loads correctly\\n- [ ] Navigation sidebar works\\n- [ ] Theme toggle (light/dark) functions\\n- [ ] Search functionality operates\\n- [ ] Mobile responsive design\\n- [ ] All documentation pages display\\n\\n### Step 4: Customize Your Content (3 minutes)\\n\\n1. **Update site information:**\\n   ```bash\\n   # Edit docs/config.yaml\\n   vim docs/config.yaml  # or your preferred editor\\n   ```\\n   \\n   ```yaml\\n   title: My Project Documentation\\n   description: Comprehensive guide for My Project\\n   theme: vibrant  # or 'default' or 'purple'\\n   ```\\n\\n2. **Add your homepage content:**\\n   ```bash\\n   # Edit docs/entry.md\\n   vim docs/entry.md\\n   ```\\n   \\n   ```markdown\\n   # My Project Documentation\\n   \\n   Welcome to the comprehensive documentation for My Project.\\n   \\n   ## Getting Started\\n   \\n   Follow our guides to get up and running quickly.\\n   ```\\n\\n3. **Add your first documentation page:**\\n   ```bash\\n   # Create a new page\\n   echo \\\"# My First Page\\\\n\\\\nThis is my first documentation page.\\\" > docs/introduction/my-first-page.md\\n   ```\\n\\n4. **Rebuild and see changes:**\\n   ```bash\\n   cargo run --release\\n   # Refresh your browser\\n   ```\\n\\n## Configuration Walkthrough\\n\\n### Automatic Configuration (Recommended)\\n\\nLet GlowDoc detect and configure your documentation structure automatically:\\n\\n```bash\\n# Interactive configuration wizard\\ncargo run init-config\\n```\\n\\n**Example session:**\\n```\\nGlowDoc Configuration Builder\\n============================\\n\\nScanning docs/ directory...\\nFound 3 sections: introduction, getting-started, advanced\\n\\nSite title [GlowDoc]: My Project Docs\\nDescription [modern docs for the modern world]: Complete guide for My Project\\nTheme [vibrant]: default\\n\\nDetected sections:\\n1. introduction (2 files)\\n2. getting-started (3 files)  \\n3. advanced (2 files)\\n\\nWould you like to reorder sections? [y/N]: y\\nEnter new order (comma-separated): introduction,getting-started,advanced\\n\\nConfiguration saved to docs/config.yaml\\nBackup created: docs/config.yaml.backup\\n```\\n\\n### Manual Configuration\\n\\nFor precise control, edit `docs/config.yaml` directly:\\n\\n```yaml\\ntitle: My Project Documentation\\ndescription: Everything you need to know about My Project\\ntheme: vibrant\\n\\nnavigation:\\n  - title: Introduction\\n    id: introduction\\n    items:\\n      - title: Overview\\n        id: overview\\n        file: introduction/overview.md\\n      - title: Quick Start\\n        id: quick-start\\n        file: introduction/quick-start.md\\n  \\n  - title: User Guide\\n    id: user-guide\\n    items:\\n      - title: Installation\\n        id: installation\\n        file: guide/installation.md\\n      - title: Configuration\\n        id: configuration\\n        file: guide/configuration.md\\n```\\n\\n### Command-Line Configuration\\n\\nFor automated workflows, use CLI arguments:\\n\\n```bash\\n# Complete automated setup\\ncargo run init-config \\\\\\n  --title \\\"My Project Docs\\\" \\\\\\n  --description \\\"Comprehensive project documentation\\\" \\\\\\n  --section-order introduction,guide,api,advanced \\\\\\n  --rename-section guide=\\\"User Guide\\\" \\\\\\n  --rename-section api=\\\"API Reference\\\" \\\\\\n  --page-order guide=installation.md,configuration.md,usage.md \\\\\\n  --exclude-section drafts\\n```\\n\\n## Content Creation Guide\\n\\n### Writing Effective Documentation\\n\\n#### Markdown Basics\\n\\nGlowDoc supports GitHub-flavored markdown with extensions:\\n\\n```markdown\\n# Page Title (H1 - use only once per page)\\n\\n## Section Heading (H2)\\n\\n### Subsection (H3)\\n\\n**Bold text** and *italic text*\\n\\n- Bullet points\\n- Another item\\n\\n1. Numbered lists\\n2. Sequential items\\n\\n`inline code` and:\\n\\n```javascript\\n// Code blocks with syntax highlighting\\nfunction example() {\\n  return \\\"Hello, World!\\\";\\n}\\n```\\n\\n> Blockquotes for important information\\n\\n[Links to other pages](other-page.md)\\n[External links](https://example.com)\\n\\n| Tables | Are | Supported |\\n|--------|-----|-----------|\\n| Cell 1 | Cell 2 | Cell 3 |\\n```\\n\\n#### Page Structure Best Practices\\n\\n```markdown\\n# Clear, Descriptive Page Title\\n\\nBrief introduction paragraph explaining what this page covers.\\n\\n## Main Concepts\\n\\nExplain the core concepts first.\\n\\n### Detailed Subsection\\n\\nBreak down complex topics into digestible sections.\\n\\n## Examples\\n\\nProvide practical examples:\\n\\n```bash\\n# Command examples\\ncargo run --release\\n```\\n\\n## Next Steps\\n\\nGuide readers to related pages or next actions.\\n```\\n\\n### Organizing Your Content\\n\\n#### Recommended Structure\\n\\n```\\ndocs/\\n├── config.yaml\\n├── entry.md              # Homepage content\\n├── introduction/         # High-level overview\\n│   ├── overview.md       # What is your project?\\n│   ├── quick-start.md    # This page\\n│   └── concepts.md       # Core concepts\\n├── guides/               # Step-by-step instructions\\n│   ├── installation.md\\n│   ├── configuration.md\\n│   ├── first-project.md\\n│   └── troubleshooting.md\\n├── reference/            # Detailed technical info\\n│   ├── api.md\\n│   ├── cli.md\\n│   └── configuration-reference.md\\n└── advanced/             # Advanced topics\\n    ├── customization.md\\n    ├── plugins.md\\n    └── deployment.md\\n```\\n\\n#### Content Guidelines\\n\\n1. **Start with user goals**: What does the reader want to accomplish?\\n2. **Use progressive disclosure**: Basic info first, details later\\n3. **Include examples**: Show, don't just tell\\n4. **Test your instructions**: Verify steps work as documented\\n5. **Update regularly**: Keep content current with your project\\n\\n### Adding New Pages\\n\\n1. **Create the markdown file:**\\n   ```bash\\n   # Create in appropriate section\\n   touch docs/guides/new-feature.md\\n   ```\\n\\n2. **Add content with H1 title:**\\n   ```markdown\\n   # New Feature Guide\\n   \\n   This guide explains how to use the new feature.\\n   ```\\n\\n3. **Update configuration:**\\n   ```bash\\n   # Auto-detect and add to navigation\\n   cargo run init-config\\n   \\n   # Or manually edit docs/config.yaml\\n   ```\\n\\n4. **Rebuild documentation:**\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n## Theme Customization\\n\\n### Built-in Themes\\n\\nGlowDoc includes three professionally designed themes:\\n\\n```yaml\\n# In docs/config.yaml\\ntheme: default  # Clean, professional\\ntheme: purple   # Purple accents\\ntheme: vibrant  # Colorful, energetic\\n```\\n\\n### Quick Theme Preview\\n\\n```bash\\n# Try different themes quickly\\nsed -i 's/theme: .*/theme: purple/' docs/config.yaml && cargo run --release\\nsed -i 's/theme: .*/theme: vibrant/' docs/config.yaml && cargo run --release\\nsed -i 's/theme: .*/theme: default/' docs/config.yaml && cargo run --release\\n```\\n\\n### Dark Mode\\n\\nAll themes include automatic dark mode:\\n- **System preference detection**: Respects user's OS setting\\n- **Manual toggle**: Click the theme button in header\\n- **Persistent choice**: Remembers user preference\\n\\n## Development Workflow\\n\\n### Efficient Development Loop\\n\\n```bash\\n# 1. Edit your markdown files\\nvim docs/guides/new-page.md\\n\\n# 2. Rebuild (takes ~1-3 seconds)\\ncargo run --release\\n\\n# 3. Refresh browser (server keeps running)\\n# No need to restart python server\\n```\\n\\n### File Watching (Optional)\\n\\nFor automatic rebuilds on file changes:\\n\\n```bash\\n# Install cargo-watch\\ncargo install cargo-watch\\n\\n# Watch for changes and rebuild\\ncargo watch -x \\\"run --release\\\"\\n```\\n\\n### Version Control Integration\\n\\n```bash\\n# Initialize git repository\\ngit init\\n\\n# Add files (excluding generated content)\\ngit add .\\ngit commit -m \\\"Initial documentation setup\\\"\\n\\n# .gitignore should include:\\necho \\\"target/\\\" >> .gitignore\\necho \\\"index.html\\\" >> .gitignore  # Generated file\\n```\\n\\n## Testing Your Documentation\\n\\n### Pre-Deployment Checklist\\n\\n```bash\\n# 1. Build successfully\\ncargo run --release\\n\\n# 2. Check file size (should be reasonable)\\nls -lh index.html\\n\\n# 3. Validate HTML (optional)\\n# Install html-validate: npm install -g html-validate\\nhtml-validate index.html\\n\\n# 4. Test locally\\npython3 -m http.server 8000\\n```\\n\\n### Manual Testing\\n\\nVisit `http://localhost:8000` and verify:\\n\\n- [ ] **Navigation**: All links work correctly\\n- [ ] **Search**: Finds content in titles and text\\n- [ ] **Themes**: Light/dark mode toggle works\\n- [ ] **Mobile**: Sidebar collapses, navigation works\\n- [ ] **Content**: All pages display properly\\n- [ ] **Links**: Internal and external links function\\n- [ ] **Performance**: Pages load quickly\\n\\n### Accessibility Testing\\n\\n```bash\\n# Install axe-core CLI (optional)\\nnpm install -g @axe-core/cli\\n\\n# Test accessibility\\naxe http://localhost:8000\\n```\\n\\n## Common Issues and Solutions\\n\\n### Build Problems\\n\\n**\\\"cargo: command not found\\\"**\\n```bash\\n# Install Rust\\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\\nsource ~/.cargo/env\\n```\\n\\n**\\\"No such file or directory: docs/config.yaml\\\"**\\n```bash\\n# Generate configuration\\ncargo run init-config\\n```\\n\\n**Build errors after editing config.yaml**\\n```bash\\n# Validate YAML syntax\\npython3 -c \\\"import yaml; yaml.safe_load(open('docs/config.yaml'))\\\"\\n\\n# Check file references exist\\nls docs/introduction/quick-start.md\\n```\\n\\n### Server Issues\\n\\n**\\\"Address already in use\\\"**\\n```bash\\n# Find and kill process using port 8000\\nlsof -ti:8000 | xargs kill\\n\\n# Or use different port\\npython3 -m http.server 8080\\n```\\n\\n**Browser shows \\\"No such file or directory\\\"**\\n```bash\\n# Ensure you're in the correct directory\\nls index.html\\n\\n# Rebuild if missing\\ncargo run --release\\n```\\n\\n### Content Problems\\n\\n**Page not appearing in navigation**\\n```bash\\n# Ensure file is referenced in config.yaml\\ngrep -r \\\"filename.md\\\" docs/config.yaml\\n\\n# Or regenerate config\\ncargo run init-config\\n```\\n\\n**Search not finding content**\\n```bash\\n# Rebuild to update search index\\ncargo run --release\\n\\n# Check file has H1 heading\\nhead -5 docs/section/page.md\\n```\\n\\n## Next Steps\\n\\nCongratulations! You now have a working GlowDoc site. Here's what to explore next:\\n\\n### Immediate Actions\\n\\n1. **Add Your Content**\\n   - Replace sample content with your documentation\\n   - Update `docs/entry.md` with your project information\\n   - Add pages for your specific use cases\\n\\n2. **Customize Appearance**\\n   - Try different themes in `config.yaml`\\n   - Explore advanced styling options\\n   - Add your logo or branding\\n\\n3. **Test Thoroughly**\\n   - Verify all navigation works\\n   - Test search functionality\\n   - Check mobile responsiveness\\n\\n### Advanced Features\\n\\n1. **Learn Configuration Management**\\n   - Read the [Configuration Guide](../getting-started/configuration.md)\\n   - Understand navigation structure options\\n   - Explore CLI automation features\\n\\n2. **Explore Customization**\\n   - Check out [Custom Styling](../customization/styling.md)\\n   - Learn about [Components](../customization/components.md)\\n   - Discover [Theming](../customization/theming.md) options\\n\\n3. **Plan Deployment**\\n   - Review [Deployment Options](../advanced/deployment.md)\\n   - Set up automated builds\\n   - Choose your hosting platform\\n\\n4. **Extend Functionality**\\n   - Explore [Plugins](../advanced/plugins.md)\\n   - Check the [API Reference](../advanced/api.md)\\n   - Consider custom integrations\\n\\n### Community and Support\\n\\n- **Documentation**: Continue with [First Steps](../getting-started/first-steps.md)\\n- **Examples**: Browse sample configurations and setups\\n- **Issues**: Report problems or request features\\n- **Contributions**: Help improve GlowDoc\\n\\n### Pro Tips\\n\\n1. **Keep It Simple**: Start with basic setup, add complexity gradually\\n2. **Test Early**: Preview changes frequently during development\\n3. **Version Control**: Commit documentation changes regularly\\n4. **User Focus**: Write for your audience, not yourself\\n5. **Iterate**: Improve documentation based on user feedback\\n\\nYou're now ready to create professional, beautiful documentation with GlowDoc. Happy documenting!\"\n    },\n    \"getting-started/first-steps\": {\n        \"title\": \"First Steps\",\n        \"section\": \"Getting Started\",\n        \"content\": \"# First Steps\\n\\nNow that you have GlowDoc installed, let's build your first documentation site step by step.\\n\\n## 1. Initialize Your Project\\n\\nStart by setting up the basic structure for your documentation:\\n\\n```bash\\n# Create a new project directory\\nmkdir my-docs\\ncd my-docs\\n\\n# Download or clone GlowDoc\\n# Then copy the src/ and docs/ folders to your project\\n```\\n\\n## 2. Generate Your Configuration\\n\\nUse the interactive config builder to set up your site structure:\\n\\n```bash\\n# Interactive mode - walks you through setup\\ncargo run init-config\\n```\\n\\nThis will:\\n- Scan any existing markdown files in `docs/`\\n- Extract page titles from H1 headers\\n- Generate a `docs/config.yaml` file\\n- Create a backup of any existing configuration\\n\\n### Example Interactive Session\\n\\n```\\nGlowDoc Configuration Builder\\n============================\\n\\nSite title [GlowDoc]: My Project Documentation\\nDescription [modern docs for the modern world]: Comprehensive guide for My Project\\n\\nFound 3 sections in docs/:\\n  1. introduction (2 files)\\n  2. getting-started (3 files)  \\n  3. api (1 file)\\n\\nWould you like to reorder sections? [y/N]: y\\nEnter section order (comma-separated): introduction,getting-started,api\\n\\nConfiguration saved to docs/config.yaml\\n```\\n\\n## 3. Create Your Content\\n\\n### Homepage Content\\n\\nCreate or edit `docs/entry.md` for your homepage:\\n\\n```markdown\\n# My Project Documentation\\n\\nWelcome to the comprehensive documentation for My Project.\\n\\n## Getting Started\\n\\nFollow our step-by-step guides to get up and running quickly.\\n\\n## Key Features\\n\\n- Feature 1: Description\\n- Feature 2: Description\\n- Feature 3: Description\\n```\\n\\n### Add Documentation Pages\\n\\nCreate markdown files in organized folders:\\n\\n```\\ndocs/\\n├── entry.md\\n├── config.yaml\\n├── introduction/\\n│   ├── overview.md\\n│   └── installation.md\\n├── guides/\\n│   ├── quick-start.md\\n│   ├── configuration.md\\n│   └── advanced-usage.md\\n└── reference/\\n    └── api.md\\n```\\n\\nEach markdown file should start with an H1 header:\\n\\n```markdown\\n# Page Title\\n\\nYour content here...\\n\\n## Section\\n\\nMore content...\\n```\\n\\n## 4. Start Development Server\\n\\nFor the best development experience, use the built-in development server with hot reload:\\n\\n```bash\\n# Start development server (recommended)\\ncargo run watch\\n```\\n\\nThis will:\\n- Build your documentation site\\n- Start HTTP server at http://localhost:8000\\n- Watch for file changes in `docs/`\\n- Automatically rebuild and refresh your browser when files change\\n- Serve images and static assets from your docs folder\\n\\n**Alternative: One-time Build**\\n\\nIf you prefer to build once and serve with a separate server:\\n\\n```bash\\n# Build the complete site once\\ncargo run --release\\n\\n# Serve with any static server\\npython3 -m http.server 8000\\n```\\n\\nVisit `http://localhost:8000` to see your documentation site.\\n\\n## 5. Add Images and Assets\\n\\nPlace images and other static files in your `docs/` directory:\\n\\n```\\ndocs/\\n├── images/\\n│   ├── logo.png\\n│   └── screenshots/\\n│       └── demo.jpg\\n├── assets/\\n│   └── diagram.svg\\n└── getting-started/\\n    └── tutorial.md\\n```\\n\\nReference them in your markdown:\\n\\n```markdown\\n![Logo](images/logo.png)\\n![Demo Screenshot](images/screenshots/demo.jpg)\\n![Architecture](assets/diagram.svg)\\n```\\n\\nThe development server (`cargo run watch`) automatically serves these assets. Supported formats include:\\n\\n- **Images**: PNG, JPG, GIF, SVG, WebP\\n- **Documents**: PDF, TXT, MD\\n- **Media**: MP3, MP4, WebM\\n- **Fonts**: WOFF, TTF, OTF\\n\\n## 6. Customize the Appearance\\n\\n### Update Site Information\\n\\nEdit `docs/config.yaml` to customize your site:\\n\\n```yaml\\ntitle: My Project Documentation\\ndescription: Everything you need to know about My Project\\ntheme: vibrant  # or 'default'\\n```\\n\\n### Adjust Navigation\\n\\nReorder sections and pages by editing the navigation structure:\\n\\n```yaml\\nnavigation:\\n  - title: Introduction\\n    id: introduction\\n    items:\\n      - title: Overview\\n        id: overview\\n        file: introduction/overview.md\\n      - title: Installation\\n        id: installation\\n        file: introduction/installation.md\\n```\\n\\n### Rebuild After Changes\\n\\n**With Development Server (Recommended):**\\n- Changes are automatically detected and applied\\n- Browser refreshes automatically\\n- No manual rebuilding needed\\n\\n**With Manual Builds:**\\n\\n```bash\\ncargo run --release\\n```\\n\\n## 7. Development Workflow\\n\\n### Hot Reload Development (Recommended)\\n\\nUse the development server for the fastest workflow:\\n\\n```bash\\n# Start development server\\ncargo run watch\\n\\n# Then edit files in docs/ - changes appear instantly!\\n```\\n\\n**Features:**\\n- **Instant rebuilds** when you save files\\n- **Automatic browser refresh**\\n- **Static asset serving** (images, fonts, etc.)\\n- **Error reporting** in console\\n- **Debounced updates** (prevents duplicate builds)\\n\\n### Manual Build Workflow\\n\\nFor production builds or when you prefer manual control:\\n\\n```bash\\n# 1. Edit markdown files in docs/\\n# 2. Rebuild the site\\ncargo run --release\\n\\n# 3. Refresh browser to see changes\\n# (No need to restart the server)\\n```\\n\\n### Adding New Pages\\n\\n**With Development Server:**\\n1. Create the markdown file in the appropriate `docs/` subfolder\\n2. Run the config generator to update navigation:\\n   ```bash\\n   cargo run init-config\\n   ```\\n3. The site rebuilds automatically - no manual rebuild needed!\\n\\n**With Manual Builds:**\\n1. Create the markdown file in the appropriate `docs/` subfolder\\n2. Run the config generator to update navigation:\\n   ```bash\\n   cargo run init-config\\n   ```\\n3. Rebuild the site:\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n### Reorganizing Content\\n\\nUse CLI options for batch updates:\\n\\n```bash\\n# Reorder sections and rename them\\ncargo run init-config \\\\\\n  --section-order intro,guide,reference \\\\\\n  --rename-section intro=\\\"Getting Started\\\" \\\\\\n  --rename-section guide=\\\"User Guide\\\"\\n```\\n\\n## Next Steps\\n\\nNow that you have a working documentation site:\\n\\n1. **Explore Customization**: Learn about theming and styling options\\n2. **Add More Content**: Expand your documentation with additional pages\\n3. **Deploy Your Site**: Set up hosting for your documentation\\n4. **Advanced Features**: Explore plugins and advanced configuration\\n\\n## Common Tasks\\n\\n### Adding a New Section\\n\\n1. Create a new folder in `docs/`: `mkdir docs/new-section`\\n2. Add markdown files to the folder\\n3. Run `cargo run init-config` to detect the new section\\n4. Rebuild: `cargo run --release`\\n\\n### Reordering Pages\\n\\n```bash\\ncargo run init-config --page-order section=page1.md,page2.md,page3.md\\n```\\n\\n### Excluding Draft Content\\n\\n```bash\\ncargo run init-config --exclude-section drafts\\n```\\n\\n### Custom Page Titles\\n\\nOverride auto-detected titles in `docs/config.yaml`:\\n\\n```yaml\\n- title: Custom Navigation Title\\n  id: page-id\\n  file: section/actual-filename.md\\n```\\n\\n## Troubleshooting\\n\\n**Build errors**: Check that all files referenced in `config.yaml` exist and paths are correct.\\n\\n**Missing navigation**: Ensure your markdown files have H1 headers and are included in the config.\\n\\n**Styling issues**: Verify the theme setting in config.yaml and rebuild the site.\\n\\n**Server not accessible**: Check that the server is running and try `http://localhost:8000` instead of `127.0.0.1`.\"\n    },\n    \"getting-started/setup/setup-installation\": {\n        \"title\": \"Installation\",\n        \"section\": \"Getting Started\",\n        \"content\": \"# Installation\\n\\nGlowDoc is designed to be simple to set up. Choose the method that works best for your workflow.\\n\\n## Download Template\\n\\nThe easiest way to get started is to download the template directly:\\n\\n```bash\\n# Download and extract\\nwget https://github.com/paradise-runner/glowdoc/archive/main.zip\\nunzip main.zip\\ncd glowdoc-main\\n```\\n\\n## Clone Repository\\n\\nIf you prefer to clone the repository:\\n\\n```bash\\n# Clone the repository\\ngit clone https://github.com/paradise-runner/glowdoc.git\\ncd glowdoc\\n\\n# Remove git history (optional)\\nrm -rf .git\\ngit init\\n```\\n\\n## Use as Template\\n\\nCreate a new repository using GlowDoc as a template on GitHub, then clone your new repository.\"\n    },\n    \"getting-started/setup/setup-configuration\": {\n        \"title\": \"Configuration\",\n        \"section\": \"Getting Started\",\n        \"content\": \"# Configuration\\n\\nGlowDoc provides flexible configuration options to customize your documentation site. All configuration is managed through the `docs/config.yaml` file.\\n\\n## config.yaml Overview\\n\\nThe configuration file controls your site's structure, navigation, and appearance:\\n\\n```yaml\\ntitle: GlowDoc\\ndescription: modern docs for the modern world\\ntheme: vibrant\\nnavigation:\\n  - title: Introduction\\n    id: introduction\\n    items:\\n      - title: What is GlowDoc?\\n        id: what-is-glowdoc\\n        file: introduction/what-is-glowdoc.md\\n```\\n\\n## Auto-Generate Configuration\\n\\nThe easiest way to create or update your configuration is using the built-in generator:\\n\\n### Interactive Mode\\n\\n```bash\\ncargo run init-config\\n```\\n\\nThis launches an interactive wizard that:\\n- Scans your `docs/` folder structure\\n- Detects existing markdown files\\n- Extracts page titles from H1 headers\\n- Guides you through customization options\\n- Backs up your existing config before generating a new one\\n\\n### Command-Line Mode\\n\\nFor automated workflows, use CLI arguments:\\n\\n```bash\\ncargo run init-config \\\\\\n  --title \\\"My Project\\\" \\\\\\n  --description \\\"Comprehensive project documentation\\\" \\\\\\n  --section-order introduction,guide,api,advanced \\\\\\n  --rename-section guide=\\\"User Guide\\\" \\\\\\n  --rename-page guide/setup.md=\\\"Installation Guide\\\" \\\\\\n  --page-order guide=setup.md,configuration.md,usage.md \\\\\\n  --exclude-section drafts\\n```\\n\\n### Available CLI Options\\n\\n- `--title \\\"Site Title\\\"` - Set the site title\\n- `--description \\\"Description\\\"` - Set the site description\\n- `--section-order folder1,folder2` - Reorder sections by folder names\\n- `--rename-section old=new` - Rename section titles in navigation\\n- `--rename-page section/file.md=\\\"New Title\\\"` - Override page titles\\n- `--page-order section=file1.md,file2.md` - Reorder pages within sections\\n- `--exclude-section folder` - Exclude folders from navigation\\n- `--help` - Show complete usage guide\\n\\n## Manual Configuration\\n\\n### Basic Settings\\n\\n```yaml\\ntitle: Your Project Name\\ndescription: Brief description for SEO and page meta\\ntheme: vibrant  # or 'default'\\n```\\n\\n### Navigation Structure\\n\\nNavigation follows a hierarchical structure with sections and items:\\n\\n```yaml\\nnavigation:\\n  - title: Section Name\\n    id: unique-section-id\\n    items:\\n      - title: Page Title\\n        id: unique-page-id\\n        file: folder/filename.md\\n```\\n\\n**Key Rules:**\\n- Section `id` must be unique across all sections\\n- Page `id` must be unique across all pages\\n- `file` path is relative to the `docs/` folder\\n- Pages are displayed in the order they appear in the config\\n\\n### Themes\\n\\nGlowDoc includes built-in themes:\\n\\n- `default` - Clean, professional appearance\\n- `vibrant` - Bold colors with enhanced contrast\\n\\n## File Organization\\n\\n### Recommended Structure\\n\\n```\\ndocs/\\n├── config.yaml          # Navigation configuration\\n├── entry.md            # Homepage content (optional)\\n├── introduction/\\n│   ├── overview.md\\n│   └── quick-start.md\\n├── guides/\\n│   ├── installation.md\\n│   └── configuration.md\\n└── reference/\\n    ├── api.md\\n    └── cli.md\\n```\\n\\n### Markdown Files\\n\\nEach markdown file should start with an H1 header:\\n\\n```markdown\\n# Page Title\\n\\nContent goes here...\\n```\\n\\nThe H1 title is automatically extracted during config generation and used as the default page title.\\n\\n## Advanced Configuration\\n\\n### Custom Page Titles\\n\\nOverride the auto-detected title from the markdown H1:\\n\\n```yaml\\n- title: Custom Page Title  # Shows in navigation\\n  id: custom-page\\n  file: section/actual-filename.md  # H1 in file can be different\\n```\\n\\n### Section Ordering\\n\\nControl the order sections appear in navigation:\\n\\n```bash\\ncargo run init-config --section-order introduction,tutorial,reference,advanced\\n```\\n\\n### Page Ordering\\n\\nControl the order pages appear within each section:\\n\\n```bash\\ncargo run init-config --page-order tutorial=setup.md,basics.md,advanced.md\\n```\\n\\n## Development Workflow\\n\\n1. **Edit Configuration**: Modify `docs/config.yaml` or use `cargo run init-config`\\n2. **Update Content**: Edit markdown files in the `docs/` folder\\n3. **Rebuild Site**: Run `cargo run --release` to regenerate `index.html`\\n4. **Preview Changes**: Use `python3 -m http.server 8000` to serve locally\\n\\n## Troubleshooting\\n\\n### Common Issues\\n\\n**Config validation errors:** Ensure all `id` fields are unique and all referenced files exist.\\n\\n**Missing pages:** Check that file paths in config.yaml are correct and relative to the `docs/` folder.\\n\\n**Build failures:** Verify YAML syntax in config.yaml using a YAML validator.\\n\\n### Backup and Recovery\\n\\nThe config generator automatically creates backups:\\n- `docs/config.yaml.backup` - Created before generating new config\\n- Manual backup: `cp docs/config.yaml docs/config.yaml.manual-backup`\"\n    },\n    \"customization/theming\": {\n        \"title\": \"Theming\",\n        \"section\": \"Customization\",\n        \"content\": \"# Theming\\n\\nGlowDoc features a sophisticated theming system built on CSS custom properties, supporting multiple color schemes and seamless dark mode switching.\\n\\n## Built-in Themes\\n\\nGlowDoc includes three professionally designed themes:\\n\\n### Default Theme\\nClean, neutral design perfect for professional documentation:\\n```yaml\\n# In docs/config.yaml\\ntheme: default\\n```\\n\\n### Purple Theme\\nPurple-accented design with elegant color tones:\\n```yaml\\ntheme: purple\\n```\\n\\n### Vibrant Theme\\nColorful, energetic design with bold accents:\\n```yaml\\ntheme: vibrant\\n```\\n\\n## Color System Architecture\\n\\nGlowDoc uses a semantic color system with HSL values for precise color control and smooth transitions.\\n\\n### Core Color Properties\\n\\nAll themes use the same CSS custom property structure:\\n\\n```css\\n:root {\\n  /* Background colors */\\n  --background: 0 0% 100%;\\n  --foreground: 222.2 84% 4.9%;\\n  \\n  /* Component backgrounds */\\n  --card: 0 0% 100%;\\n  --card-foreground: 222.2 84% 4.9%;\\n  --popover: 0 0% 100%;\\n  --popover-foreground: 222.2 84% 4.9%;\\n  \\n  /* Semantic colors */\\n  --primary: 222.2 47.4% 11.2%;\\n  --primary-foreground: 210 40% 98%;\\n  --secondary: 210 40% 96%;\\n  --secondary-foreground: 222.2 84% 4.9%;\\n  --muted: 210 40% 96%;\\n  --muted-foreground: 215.4 16.3% 46.9%;\\n  \\n  /* Interactive elements */\\n  --accent: 210 40% 96%;\\n  --accent-foreground: 222.2 84% 4.9%;\\n  --destructive: 0 84.2% 60.2%;\\n  --destructive-foreground: 210 40% 98%;\\n  \\n  /* UI elements */\\n  --border: 214.3 31.8% 91.4%;\\n  --input: 214.3 31.8% 91.4%;\\n  --ring: 222.2 84% 4.9%;\\n  --radius: 0.5rem;\\n}\\n```\\n\\n### Dark Mode Support\\n\\nEach theme automatically includes dark mode variants:\\n\\n```css\\n[data-theme=\\\"dark\\\"] {\\n  --background: 222.2 84% 4.9%;\\n  --foreground: 210 40% 98%;\\n  /* ... other dark mode overrides */\\n}\\n```\\n\\n**Dark Mode Features:**\\n- Automatic system preference detection\\n- Manual toggle with LocalStorage persistence\\n- Smooth 0.3s transitions between themes\\n- Optimized contrast ratios for readability\\n\\n## Typography System\\n\\n### Font Stack\\n\\nGlowDoc uses a carefully selected system font stack for optimal performance and cross-platform consistency:\\n\\n```css\\nfont-family: -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", \\n             Roboto, \\\"Helvetica Neue\\\", Arial, sans-serif;\\n```\\n\\n### Typography Scale\\n\\n**Homepage Typography:**\\n- **Main Heading (H1):** 3rem (48px), weight 800, gradient text effect\\n- **Section Headings (H2):** 1.75rem (28px), weight 600\\n- **Body Text:** 1.125rem (18px) for enhanced readability\\n\\n**Content Typography:**\\n- **Page Titles (H1):** 2.5rem (40px), weight 700\\n- **Section Headings (H2):** 1.75rem (28px), weight 600\\n- **Body Text:** 1rem (16px) for optimal reading\\n- **Navigation:** 0.875rem (14px), weight 500-600\\n- **Code:** 0.875rem (14px) monospace\\n\\n### Special Typography Effects\\n\\n**Gradient Text (Homepage):**\\n```css\\nbackground: linear-gradient(135deg, \\n  hsl(var(--primary)), \\n  hsl(var(--accent))\\n);\\n-webkit-background-clip: text;\\ncolor: transparent;\\n```\\n\\n## Spacing System\\n\\nGlowDoc uses a consistent spacing scale based on rem units:\\n\\n```css\\n/* Spacing scale */\\n--space-1: 0.25rem;  /* 4px */\\n--space-2: 0.5rem;   /* 8px */\\n--space-3: 0.75rem;  /* 12px */\\n--space-4: 1rem;     /* 16px */\\n--space-6: 1.5rem;   /* 24px */\\n--space-8: 2rem;     /* 32px */\\n--space-16: 4rem;    /* 64px */\\n```\\n\\n**Common Usage:**\\n- Small margins: `0.25rem` (4px)\\n- Button padding: `0.5rem` (8px)\\n- Standard spacing: `1rem` (16px)\\n- Section gaps: `1.5rem` (24px)\\n- Content padding: `2rem` (32px)\\n- Large sections: `4rem` (64px)\\n\\n## Custom Theme Creation\\n\\n### 1. Modify Existing Theme\\n\\nTo customize an existing theme, you'll need to modify the CSS generation in the Rust source:\\n\\n**Location:** `src/main.rs` in the `generate_css()` function\\n\\n### 2. Color Customization\\n\\nUpdate the HSL values for any theme:\\n\\n```css\\n:root {\\n  /* Change primary brand color */\\n  --primary: 220 70% 50%;  /* Blue instead of dark gray */\\n  --primary-foreground: 0 0% 100%;\\n  \\n  /* Adjust accent color */\\n  --accent: 160 60% 45%;   /* Teal accent */\\n  --accent-foreground: 0 0% 100%;\\n}\\n```\\n\\n### 3. Typography Customization\\n\\n**Custom Font Integration:**\\n```css\\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');\\n\\nbody {\\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\\n}\\n```\\n\\n**Custom Font Sizes:**\\n```css\\n/* Larger base font size */\\n.main-content {\\n  font-size: 1.125rem;\\n  line-height: 1.75;\\n}\\n\\n/* Custom heading sizes */\\nh1 { font-size: 3rem; }\\nh2 { font-size: 2rem; }\\nh3 { font-size: 1.5rem; }\\n```\\n\\n## Advanced Theming\\n\\n### Custom CSS Properties\\n\\nAdd your own custom properties for consistent theming:\\n\\n```css\\n:root {\\n  /* Custom brand colors */\\n  --brand-blue: 220 90% 56%;\\n  --brand-green: 142 71% 45%;\\n  --brand-orange: 25 95% 53%;\\n  \\n  /* Custom spacing */\\n  --content-width: 900px;\\n  --sidebar-width: 320px;\\n  \\n  /* Custom shadows */\\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\\n}\\n```\\n\\n### Responsive Design Variables\\n\\n```css\\n:root {\\n  --mobile-breakpoint: 768px;\\n  --sidebar-width: 280px;\\n  --mobile-padding: 1rem;\\n  --desktop-padding: 2rem;\\n}\\n\\n@media (max-width: 768px) {\\n  .main-content {\\n    padding: var(--mobile-padding);\\n  }\\n}\\n```\\n\\n### Animation Customization\\n\\n```css\\n:root {\\n  /* Transition speeds */\\n  --transition-fast: 0.15s;\\n  --transition-normal: 0.2s;\\n  --transition-slow: 0.3s;\\n  \\n  /* Easing functions */\\n  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);\\n  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);\\n}\\n\\n/* Apply to interactive elements */\\n.nav-link {\\n  transition: all var(--transition-normal) var(--ease-out);\\n}\\n```\\n\\n## Theme Implementation Details\\n\\n### Theme Switching Mechanism\\n\\nGlowDoc implements theme switching through:\\n\\n1. **Data attribute:** `data-theme=\\\"light|dark\\\"` on the `<html>` element\\n2. **JavaScript toggle:** Smooth transitions between light/dark modes\\n3. **LocalStorage:** Persistent user preference storage\\n4. **System detection:** Automatic theme based on user's OS preference\\n\\n### Color Accessibility\\n\\nAll themes maintain WCAG AA contrast ratios:\\n- Normal text: 4.5:1 contrast ratio\\n- Large text: 3:1 contrast ratio\\n- Interactive elements: Enhanced focus states\\n\\n### Performance Considerations\\n\\n- CSS custom properties enable instant theme switching\\n- No additional HTTP requests for theme assets\\n- Optimized for both light and dark viewing conditions\\n- Smooth transitions without layout shifts\\n\\n## Troubleshooting\\n\\n**Theme not applying:** Ensure the theme name in `config.yaml` matches exactly: `default`, `purple`, or `vibrant`.\\n\\n**Dark mode not working:** Check that JavaScript is enabled and the browser supports CSS custom properties.\\n\\n**Custom colors not showing:** Verify HSL values are properly formatted: `220 70% 50%` (without `hsl()` wrapper).\\n\\n**Typography issues:** Ensure font declarations come after the base stylesheet in the build process.\"\n    },\n    \"customization/components\": {\n        \"title\": \"Components\",\n        \"section\": \"Customization\",\n        \"content\": \"# Components\\n\\nGlowDoc is built with a comprehensive component system that provides consistent, accessible, and responsive UI elements throughout your documentation site.\\n\\n## Layout Components\\n\\n### Header Component\\n\\nThe main header provides navigation and theme switching functionality:\\n\\n**Structure:**\\n```html\\n<header class=\\\"header-content\\\">\\n  <div class=\\\"container\\\">\\n    <div class=\\\"logo\\\">Site Title</div>\\n    <button class=\\\"theme-toggle\\\" aria-label=\\\"Toggle theme\\\">\\n      <!-- Theme toggle icon -->\\n    </button>\\n  </div>\\n</header>\\n```\\n\\n**Features:**\\n- Sticky positioning with backdrop blur effect\\n- 80px fixed height\\n- Responsive container with max-width of 1200px\\n- Integrated theme toggle button\\n\\n### Sidebar Navigation\\n\\nThe collapsible sidebar houses the main navigation and search functionality:\\n\\n**Structure:**\\n```html\\n<aside class=\\\"sidebar\\\">\\n  <div class=\\\"search-container\\\">\\n    <input type=\\\"text\\\" class=\\\"search-input\\\" placeholder=\\\"Search...\\\">\\n    <div class=\\\"search-results\\\"></div>\\n  </div>\\n  \\n  <nav class=\\\"navigation\\\">\\n    <div class=\\\"nav-section\\\">\\n      <button class=\\\"nav-section-title\\\">Section Name</button>\\n      <div class=\\\"nav-section-content\\\">\\n        <a href=\\\"#page\\\" class=\\\"nav-link\\\">Page Title</a>\\n      </div>\\n    </div>\\n  </nav>\\n</aside>\\n```\\n\\n**Features:**\\n- Fixed 280px width on desktop\\n- Collapsible sections with smooth animations\\n- Integrated search with live results\\n- Mobile-responsive with overlay behavior\\n\\n### Main Content Area\\n\\nThe primary content container with optimal reading layout:\\n\\n**Structure:**\\n```html\\n<main class=\\\"main-content\\\">\\n  <div class=\\\"content-section\\\" id=\\\"page-id\\\">\\n    <h1>Page Title</h1>\\n    <p>Content goes here...</p>\\n  </div>\\n</main>\\n```\\n\\n**Features:**\\n- Flexible layout that grows to fill available space\\n- 800px max-width for optimal reading\\n- Responsive padding (2rem desktop, 1rem mobile)\\n- Centered content with proper spacing\\n\\n## Navigation Components\\n\\n### Navigation Links\\n\\nIndividual navigation items with active state support:\\n\\n**CSS Classes:**\\n```css\\n.nav-link {\\n  /* Base navigation link styles */\\n  display: block;\\n  padding: 0.5rem 1rem;\\n  color: hsl(var(--muted-foreground));\\n  text-decoration: none;\\n  border-radius: 0.375rem;\\n  transition: all 0.2s ease;\\n}\\n\\n.nav-link:hover {\\n  background-color: hsl(var(--accent));\\n  color: hsl(var(--accent-foreground));\\n}\\n\\n.nav-link.active {\\n  background-color: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n  font-weight: 600;\\n}\\n```\\n\\n**Usage:**\\n- Automatically marked as `.active` based on current page\\n- Left border accent on hover and active states\\n- Smooth color transitions\\n- Accessible keyboard navigation\\n\\n### Section Headers\\n\\nCollapsible section headers in the navigation:\\n\\n**Structure:**\\n```html\\n<button class=\\\"nav-section-title\\\" data-section=\\\"section-id\\\">\\n  <span>Section Name</span>\\n  <svg class=\\\"chevron-icon\\\"><!-- Chevron icon --></svg>\\n</button>\\n```\\n\\n**Features:**\\n- Click to expand/collapse section content\\n- Animated chevron icon rotation\\n- Maintains expanded state in LocalStorage\\n- Proper ARIA attributes for accessibility\\n\\n## Interactive Components\\n\\n### Theme Toggle\\n\\nThe dark/light mode switcher with system preference detection:\\n\\n**Structure:**\\n```html\\n<button class=\\\"theme-toggle\\\" aria-label=\\\"Toggle theme\\\">\\n  <svg class=\\\"sun-icon\\\"><!-- Sun icon --></svg>\\n  <svg class=\\\"moon-icon\\\"><!-- Moon icon --></svg>\\n</button>\\n```\\n\\n**Features:**\\n- Automatic system preference detection on first visit\\n- Smooth icon transitions between light/dark states\\n- LocalStorage persistence for user preference\\n- 0.3s transition for theme switching\\n\\n### Search Component\\n\\nLive search functionality with instant results:\\n\\n**Structure:**\\n```html\\n<div class=\\\"search-container\\\">\\n  <div class=\\\"search-input-wrapper\\\">\\n    <svg class=\\\"search-icon\\\"><!-- Search icon --></svg>\\n    <input type=\\\"text\\\" class=\\\"search-input\\\" placeholder=\\\"Search documentation...\\\">\\n  </div>\\n  <div class=\\\"search-results\\\">\\n    <div class=\\\"search-result\\\" data-target=\\\"page-id\\\">\\n      <div class=\\\"search-result-title\\\">Page Title</div>\\n      <div class=\\\"search-result-excerpt\\\">Matching content...</div>\\n    </div>\\n  </div>\\n</div>\\n```\\n\\n**Features:**\\n- Real-time search as you type (300ms debounce)\\n- Searches through all page titles and content\\n- Highlighted search terms in results\\n- Keyboard navigation support (arrow keys, Enter)\\n- Click or Enter to navigate to results\\n\\n### Mobile Menu\\n\\nResponsive navigation for mobile devices:\\n\\n**Structure:**\\n```html\\n<button class=\\\"mobile-menu-toggle\\\">\\n  <span class=\\\"hamburger-line\\\"></span>\\n  <span class=\\\"hamburger-line\\\"></span>\\n  <span class=\\\"hamburger-line\\\"></span>\\n</button>\\n```\\n\\n**Features:**\\n- Animated hamburger menu icon\\n- Transforms sidebar into full-screen overlay\\n- Smooth slide-in animation from left\\n- Closes on backdrop click or page navigation\\n\\n## Content Components\\n\\n### Code Blocks\\n\\nSyntax-highlighted code blocks with proper formatting:\\n\\n**Markdown Usage:**\\n````markdown\\n```javascript\\nfunction greetUser(name) {\\n  console.log(`Hello, ${name}!`);\\n}\\n```\\n````\\n\\n**Generated HTML:**\\n```html\\n<pre><code class=\\\"language-javascript\\\">\\nfunction greetUser(name) {\\n  console.log(`Hello, ${name}!`);\\n}\\n</code></pre>\\n```\\n\\n**Features:**\\n- Automatic syntax highlighting via CSS\\n- Consistent background and padding\\n- Horizontal scrolling for long lines\\n- Copy-friendly formatting\\n\\n### Content Sections\\n\\nOrganized content areas for each documentation page:\\n\\n**Structure:**\\n```html\\n<div class=\\\"content-section\\\" id=\\\"unique-page-id\\\">\\n  <h1>Page Title</h1>\\n  <p>Introduction paragraph...</p>\\n  \\n  <h2>Section Heading</h2>\\n  <p>Section content...</p>\\n</div>\\n```\\n\\n**Features:**\\n- Hidden by default (only active page shown)\\n- Smooth fade-in transitions when activated\\n- Proper heading hierarchy (H1 for page title, H2+ for sections)\\n- Semantic HTML structure for accessibility\\n\\n### Search Result Highlighting\\n\\nDynamic highlighting of search terms in content:\\n\\n**Generated Markup:**\\n```html\\n<p>This is some <mark class=\\\"search-highlight\\\">highlighted</mark> text.</p>\\n```\\n\\n**CSS Styling:**\\n```css\\n.search-highlight {\\n  background-color: hsl(var(--primary) / 0.2);\\n  color: hsl(var(--primary-foreground));\\n  padding: 0.125rem 0.25rem;\\n  border-radius: 0.25rem;\\n}\\n```\\n\\n## Responsive Behavior\\n\\n### Breakpoint System\\n\\nGlowDoc uses a mobile-first approach with a single breakpoint:\\n\\n```css\\n/* Mobile styles (default) */\\n.sidebar {\\n  position: fixed;\\n  left: -100%;\\n  transition: left 0.3s ease;\\n}\\n\\n/* Desktop styles */\\n@media (min-width: 768px) {\\n  .sidebar {\\n    position: fixed;\\n    left: 0;\\n  }\\n}\\n```\\n\\n### Mobile Adaptations\\n\\n**Sidebar Behavior:**\\n- Becomes full-screen overlay on mobile\\n- Slide-in animation from left edge\\n- Backdrop blur and dark overlay\\n- Closes on outside click or page navigation\\n\\n**Content Layout:**\\n- Single-column layout on mobile\\n- Reduced padding (1rem vs 2rem)\\n- Optimized touch targets (44px minimum)\\n- Larger font sizes for better readability\\n\\n**Navigation:**\\n- Collapsible sections remain functional\\n- Touch-optimized interactive areas\\n- Simplified hover states for touch devices\\n\\n## Accessibility Features\\n\\n### Keyboard Navigation\\n\\n**Navigation Support:**\\n- Tab order follows logical content flow\\n- Arrow keys navigate search results\\n- Enter key activates links and buttons\\n- Escape key closes mobile menu and search\\n\\n**Focus Management:**\\n- Visible focus indicators on all interactive elements\\n- Focus trapped within mobile menu when open\\n- Focus restored when closing overlays\\n\\n### Screen Reader Support\\n\\n**ARIA Labels:**\\n```html\\n<button aria-label=\\\"Toggle theme\\\" class=\\\"theme-toggle\\\">\\n<input aria-label=\\\"Search documentation\\\" class=\\\"search-input\\\">\\n<nav aria-label=\\\"Main navigation\\\" class=\\\"navigation\\\">\\n```\\n\\n**Semantic Structure:**\\n- Proper heading hierarchy (H1 → H2 → H3)\\n- Landmark roles for main sections\\n- Descriptive link text\\n- Form labels associated with inputs\\n\\n### Color and Contrast\\n\\n**WCAG AA Compliance:**\\n- 4.5:1 contrast ratio for normal text\\n- 3:1 contrast ratio for large text\\n- Enhanced focus states with both color and outline\\n- Color is not the only means of conveying information\\n\\n## Performance Optimizations\\n\\n### CSS Architecture\\n\\n**Efficient Selectors:**\\n- Class-based selectors for performance\\n- Minimal nesting depth\\n- Optimized specificity\\n\\n**Transition Performance:**\\n- GPU-accelerated transforms\\n- Efficient property animations (opacity, transform)\\n- Reasonable transition durations (0.2s-0.3s)\\n\\n### JavaScript Optimization\\n\\n**Search Debouncing:**\\n- 300ms delay to reduce excessive searches\\n- Efficient DOM queries using data attributes\\n- Minimal DOM manipulation\\n\\n**Event Handling:**\\n- Event delegation for dynamic content\\n- Passive event listeners where appropriate\\n- Memory leak prevention\\n\\n## Customization Examples\\n\\n### Custom Navigation Styling\\n\\n```css\\n.nav-link {\\n  /* Add custom styles */\\n  border-left: 3px solid transparent;\\n  margin-bottom: 0.25rem;\\n}\\n\\n.nav-link:hover {\\n  border-left-color: hsl(var(--primary));\\n  background: linear-gradient(90deg, \\n    hsl(var(--primary) / 0.1), \\n    transparent\\n  );\\n}\\n\\n.nav-link.active {\\n  border-left-color: hsl(var(--primary));\\n  background-color: hsl(var(--primary) / 0.15);\\n}\\n```\\n\\n### Custom Search Styling\\n\\n```css\\n.search-container {\\n  /* Custom search appearance */\\n  background: hsl(var(--card));\\n  border: 1px solid hsl(var(--border));\\n  border-radius: 0.75rem;\\n  padding: 1rem;\\n  margin-bottom: 1.5rem;\\n}\\n\\n.search-input {\\n  /* Enhanced input styling */\\n  background: hsl(var(--background));\\n  border: 2px solid hsl(var(--border));\\n  border-radius: 0.5rem;\\n  padding: 0.75rem 1rem 0.75rem 2.5rem;\\n}\\n\\n.search-input:focus {\\n  border-color: hsl(var(--primary));\\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\\n}\\n```\\n\\n### Custom Content Styling\\n\\n```css\\n.content-section {\\n  /* Enhanced content presentation */\\n  line-height: 1.75;\\n  max-width: 900px; /* Wider content area */\\n}\\n\\n.content-section h1 {\\n  /* Custom heading styles */\\n  border-bottom: 2px solid hsl(var(--border));\\n  padding-bottom: 1rem;\\n  margin-bottom: 2rem;\\n}\\n\\n.content-section h2 {\\n  /* Section heading enhancements */\\n  margin-top: 3rem;\\n  margin-bottom: 1.5rem;\\n  color: hsl(var(--primary));\\n}\\n```\\n\\nThis component system provides a solid foundation for building beautiful, functional documentation sites while maintaining consistency and accessibility across all interface elements.\"\n    },\n    \"customization/styling\": {\n        \"title\": \"Custom Styling\",\n        \"section\": \"Customization\",\n        \"content\": \"# Custom Styling\\n\\nAdvanced styling techniques and customization patterns for creating unique GlowDoc designs that match your brand and requirements.\\n\\n## Architecture Overview\\n\\nGlowDoc's CSS architecture is designed for maximum customization while maintaining performance and accessibility. Understanding the core structure enables powerful customizations.\\n\\n### CSS Organization\\n\\nThe generated stylesheet follows this structure:\\n\\n```css\\n/* 1. CSS Reset & Base Styles */\\n/* 2. CSS Custom Properties (Design Tokens) */\\n/* 3. Layout Components */\\n/* 4. Navigation Components */\\n/* 5. Content Components */\\n/* 6. Interactive Components */\\n/* 7. Responsive Media Queries */\\n/* 8. Theme Variations */\\n```\\n\\n### Modification Approach\\n\\nSince GlowDoc generates a single HTML file with embedded CSS, customizations should be added to the Rust source in the `generate_css()` function:\\n\\n**Location:** `src/main.rs` - Look for the `generate_css()` function\\n\\n## Advanced Styling Techniques\\n\\n### Custom Brand Integration\\n\\n#### Brand Color System\\n\\nCreate a comprehensive brand color palette:\\n\\n```css\\n:root {\\n  /* Primary brand colors */\\n  --brand-primary: 220 90% 56%;\\n  --brand-primary-dark: 220 90% 45%;\\n  --brand-primary-light: 220 90% 65%;\\n  \\n  /* Secondary brand colors */\\n  --brand-secondary: 160 60% 45%;\\n  --brand-accent: 25 95% 53%;\\n  --brand-neutral: 220 10% 50%;\\n  \\n  /* Semantic color mappings */\\n  --primary: var(--brand-primary);\\n  --accent: var(--brand-secondary);\\n  \\n  /* Brand gradients */\\n  --brand-gradient: linear-gradient(135deg, \\n    hsl(var(--brand-primary)), \\n    hsl(var(--brand-secondary))\\n  );\\n}\\n```\\n\\n#### Logo and Brand Assets\\n\\nIntegrate custom logos and brand elements:\\n\\n```css\\n.logo {\\n  background-image: url('data:image/svg+xml;base64,...');\\n  background-size: contain;\\n  background-repeat: no-repeat;\\n  width: 120px;\\n  height: 40px;\\n  text-indent: -9999px; /* Hide text */\\n}\\n\\n/* Alternative: Custom font logo */\\n.logo {\\n  font-family: 'Your Brand Font', sans-serif;\\n  font-weight: 700;\\n  font-size: 1.5rem;\\n  color: hsl(var(--brand-primary));\\n}\\n```\\n\\n### Advanced Layout Customizations\\n\\n#### Multi-Column Content Layout\\n\\nCreate complex content layouts:\\n\\n```css\\n.content-section {\\n  display: grid;\\n  grid-template-columns: 1fr 300px;\\n  gap: 2rem;\\n  max-width: 1200px;\\n}\\n\\n.content-main {\\n  min-width: 0; /* Prevent grid blowout */\\n}\\n\\n.content-sidebar {\\n  background: hsl(var(--card));\\n  border: 1px solid hsl(var(--border));\\n  border-radius: 0.5rem;\\n  padding: 1.5rem;\\n  height: fit-content;\\n  position: sticky;\\n  top: 100px; /* Account for header height */\\n}\\n\\n@media (max-width: 1024px) {\\n  .content-section {\\n    grid-template-columns: 1fr;\\n  }\\n  \\n  .content-sidebar {\\n    order: -1; /* Move sidebar above content on mobile */\\n  }\\n}\\n```\\n\\n#### Custom Navigation Layouts\\n\\nEnhanced sidebar with custom sections:\\n\\n```css\\n.sidebar {\\n  display: grid;\\n  grid-template-rows: auto 1fr auto;\\n  gap: 1rem;\\n}\\n\\n.sidebar-header {\\n  padding: 1rem;\\n  border-bottom: 1px solid hsl(var(--border));\\n}\\n\\n.sidebar-content {\\n  overflow-y: auto;\\n  padding: 0 1rem;\\n}\\n\\n.sidebar-footer {\\n  padding: 1rem;\\n  border-top: 1px solid hsl(var(--border));\\n  background: hsl(var(--muted) / 0.5);\\n}\\n\\n/* Custom navigation grouping */\\n.nav-group {\\n  margin-bottom: 2rem;\\n}\\n\\n.nav-group-title {\\n  font-size: 0.75rem;\\n  font-weight: 600;\\n  text-transform: uppercase;\\n  letter-spacing: 0.05em;\\n  color: hsl(var(--muted-foreground));\\n  margin-bottom: 0.5rem;\\n  padding: 0 1rem;\\n}\\n```\\n\\n### Typography Enhancement\\n\\n#### Custom Font Integration\\n\\nProfessional typography with web fonts:\\n\\n```css\\n/* Import custom fonts */\\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');\\n\\n:root {\\n  /* Typography system */\\n  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\\n  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;\\n  \\n  /* Type scale */\\n  --text-xs: 0.75rem;    /* 12px */\\n  --text-sm: 0.875rem;   /* 14px */\\n  --text-base: 1rem;     /* 16px */\\n  --text-lg: 1.125rem;   /* 18px */\\n  --text-xl: 1.25rem;    /* 20px */\\n  --text-2xl: 1.5rem;    /* 24px */\\n  --text-3xl: 1.875rem;  /* 30px */\\n  --text-4xl: 2.25rem;   /* 36px */\\n  --text-5xl: 3rem;      /* 48px */\\n}\\n\\nbody {\\n  font-family: var(--font-sans);\\n}\\n\\ncode, pre {\\n  font-family: var(--font-mono);\\n}\\n```\\n\\n#### Advanced Typography Styles\\n\\nRich text formatting and hierarchy:\\n\\n```css\\n.content-section {\\n  /* Enhanced reading experience */\\n  font-size: var(--text-lg);\\n  line-height: 1.7;\\n  color: hsl(var(--foreground));\\n}\\n\\n.content-section h1 {\\n  font-size: var(--text-4xl);\\n  font-weight: 800;\\n  line-height: 1.1;\\n  margin-bottom: 1.5rem;\\n  background: var(--brand-gradient);\\n  -webkit-background-clip: text;\\n  -webkit-text-fill-color: transparent;\\n  background-clip: text;\\n}\\n\\n.content-section h2 {\\n  font-size: var(--text-2xl);\\n  font-weight: 700;\\n  margin-top: 3rem;\\n  margin-bottom: 1rem;\\n  position: relative;\\n}\\n\\n.content-section h2::before {\\n  content: '';\\n  position: absolute;\\n  left: -2rem;\\n  top: 50%;\\n  transform: translateY(-50%);\\n  width: 4px;\\n  height: 1.5rem;\\n  background: hsl(var(--primary));\\n  border-radius: 2px;\\n}\\n\\n/* Enhanced blockquotes */\\n.content-section blockquote {\\n  border-left: 4px solid hsl(var(--primary));\\n  padding-left: 1.5rem;\\n  margin: 2rem 0;\\n  font-style: italic;\\n  font-size: var(--text-xl);\\n  color: hsl(var(--muted-foreground));\\n}\\n\\n/* Improved lists */\\n.content-section ul {\\n  list-style: none;\\n  padding-left: 0;\\n}\\n\\n.content-section li {\\n  position: relative;\\n  padding-left: 1.5rem;\\n  margin-bottom: 0.5rem;\\n}\\n\\n.content-section li::before {\\n  content: '→';\\n  position: absolute;\\n  left: 0;\\n  color: hsl(var(--primary));\\n  font-weight: 600;\\n}\\n```\\n\\n### Interactive Element Enhancements\\n\\n#### Advanced Button Styling\\n\\nCustom button system with multiple variants:\\n\\n```css\\n/* Button base styles */\\n.btn {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: 0.5rem;\\n  padding: 0.75rem 1.5rem;\\n  border: none;\\n  border-radius: 0.5rem;\\n  font-weight: 600;\\n  font-size: var(--text-sm);\\n  text-decoration: none;\\n  cursor: pointer;\\n  transition: all 0.2s ease;\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n/* Primary button */\\n.btn-primary {\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n}\\n\\n.btn-primary:hover {\\n  background: hsl(var(--primary) / 0.9);\\n  transform: translateY(-1px);\\n  box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);\\n}\\n\\n/* Gradient button */\\n.btn-gradient {\\n  background: var(--brand-gradient);\\n  color: white;\\n  position: relative;\\n}\\n\\n.btn-gradient::before {\\n  content: '';\\n  position: absolute;\\n  inset: 0;\\n  background: var(--brand-gradient);\\n  opacity: 0;\\n  transition: opacity 0.2s ease;\\n}\\n\\n.btn-gradient:hover::before {\\n  opacity: 0.1;\\n}\\n\\n/* Outline button */\\n.btn-outline {\\n  background: transparent;\\n  border: 2px solid hsl(var(--primary));\\n  color: hsl(var(--primary));\\n}\\n\\n.btn-outline:hover {\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n}\\n```\\n\\n#### Enhanced Form Styling\\n\\nProfessional form controls:\\n\\n```css\\n.form-group {\\n  margin-bottom: 1.5rem;\\n}\\n\\n.form-label {\\n  display: block;\\n  font-weight: 600;\\n  font-size: var(--text-sm);\\n  color: hsl(var(--foreground));\\n  margin-bottom: 0.5rem;\\n}\\n\\n.form-input {\\n  width: 100%;\\n  padding: 0.75rem 1rem;\\n  border: 2px solid hsl(var(--border));\\n  border-radius: 0.5rem;\\n  background: hsl(var(--background));\\n  color: hsl(var(--foreground));\\n  font-size: var(--text-base);\\n  transition: all 0.2s ease;\\n}\\n\\n.form-input:focus {\\n  outline: none;\\n  border-color: hsl(var(--primary));\\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\\n}\\n\\n.form-input::placeholder {\\n  color: hsl(var(--muted-foreground));\\n}\\n```\\n\\n### Animation and Micro-Interactions\\n\\n#### Page Transition Effects\\n\\nSmooth page transitions:\\n\\n```css\\n.content-section {\\n  opacity: 0;\\n  transform: translateY(20px);\\n  transition: all 0.3s ease;\\n}\\n\\n.content-section.active {\\n  opacity: 1;\\n  transform: translateY(0);\\n}\\n\\n/* Staggered animation for navigation items */\\n.nav-link {\\n  opacity: 0;\\n  transform: translateX(-20px);\\n  animation: slideInLeft 0.3s ease forwards;\\n}\\n\\n.nav-link:nth-child(1) { animation-delay: 0.1s; }\\n.nav-link:nth-child(2) { animation-delay: 0.15s; }\\n.nav-link:nth-child(3) { animation-delay: 0.2s; }\\n/* ... continue pattern */\\n\\n@keyframes slideInLeft {\\n  to {\\n    opacity: 1;\\n    transform: translateX(0);\\n  }\\n}\\n```\\n\\n#### Hover Effects and Micro-Interactions\\n\\nEngaging interactive feedback:\\n\\n```css\\n/* Card hover effects */\\n.card {\\n  background: hsl(var(--card));\\n  border: 1px solid hsl(var(--border));\\n  border-radius: 0.75rem;\\n  padding: 1.5rem;\\n  transition: all 0.3s ease;\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n.card::before {\\n  content: '';\\n  position: absolute;\\n  inset: 0;\\n  background: linear-gradient(45deg, \\n    hsl(var(--primary) / 0.1), \\n    hsl(var(--accent) / 0.1)\\n  );\\n  opacity: 0;\\n  transition: opacity 0.3s ease;\\n}\\n\\n.card:hover {\\n  transform: translateY(-4px);\\n  box-shadow: 0 12px 24px hsl(var(--foreground) / 0.1);\\n  border-color: hsl(var(--primary));\\n}\\n\\n.card:hover::before {\\n  opacity: 1;\\n}\\n\\n/* Ripple effect for buttons */\\n.btn {\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n.btn::after {\\n  content: '';\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  width: 0;\\n  height: 0;\\n  border-radius: 50%;\\n  background: rgba(255, 255, 255, 0.3);\\n  transform: translate(-50%, -50%);\\n  transition: width 0.6s, height 0.6s;\\n}\\n\\n.btn:active::after {\\n  width: 300px;\\n  height: 300px;\\n}\\n```\\n\\n### Responsive Design Patterns\\n\\n#### Advanced Responsive Typography\\n\\nFluid typography that scales smoothly:\\n\\n```css\\n:root {\\n  /* Fluid typography using clamp() */\\n  --text-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);\\n  --text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);\\n  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\\n  --text-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);\\n  --text-fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);\\n  --text-fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);\\n  --text-fluid-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);\\n}\\n\\nbody {\\n  font-size: var(--text-fluid-base);\\n}\\n\\nh1 { font-size: var(--text-fluid-4xl); }\\nh2 { font-size: var(--text-fluid-3xl); }\\nh3 { font-size: var(--text-fluid-2xl); }\\n```\\n\\n#### Container Queries (Future-Forward)\\n\\nModern responsive design using container queries:\\n\\n```css\\n.content-section {\\n  container-type: inline-size;\\n}\\n\\n/* Adjust layout based on container width, not viewport */\\n@container (min-width: 600px) {\\n  .content-grid {\\n    display: grid;\\n    grid-template-columns: 2fr 1fr;\\n    gap: 2rem;\\n  }\\n}\\n\\n@container (min-width: 900px) {\\n  .content-grid {\\n    grid-template-columns: 1fr 2fr 1fr;\\n  }\\n}\\n```\\n\\n### Dark Mode Advanced Customizations\\n\\n#### Theme-Aware Components\\n\\nComponents that adapt intelligently to theme changes:\\n\\n```css\\n/* Light theme specific styles */\\n[data-theme=\\\"light\\\"] .hero-section {\\n  background: linear-gradient(135deg, \\n    hsl(var(--background)), \\n    hsl(var(--secondary))\\n  );\\n}\\n\\n/* Dark theme specific styles */\\n[data-theme=\\\"dark\\\"] .hero-section {\\n  background: linear-gradient(135deg, \\n    hsl(var(--background)), \\n    hsl(var(--card))\\n  );\\n}\\n\\n/* Theme-aware shadows */\\n.elevated-card {\\n  box-shadow: \\n    0 4px 6px hsl(var(--foreground) / 0.1),\\n    0 1px 3px hsl(var(--foreground) / 0.05);\\n}\\n\\n[data-theme=\\\"dark\\\"] .elevated-card {\\n  box-shadow: \\n    0 4px 6px rgba(0, 0, 0, 0.3),\\n    0 1px 3px rgba(0, 0, 0, 0.2);\\n}\\n```\\n\\n### Performance Optimization\\n\\n#### Efficient CSS Architecture\\n\\nOptimized styles for better performance:\\n\\n```css\\n/* Use CSS custom properties for frequently changing values */\\n:root {\\n  --animation-speed: 0.2s;\\n  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n/* Optimize animations for 60fps */\\n.animated-element {\\n  will-change: transform, opacity;\\n  transform: translateZ(0); /* Force hardware acceleration */\\n  transition: transform var(--animation-speed) var(--animation-easing);\\n}\\n\\n/* Efficient selectors */\\n.nav-link { /* Good: class selector */ }\\nnav > ul > li > a { /* Avoid: deep nesting */ }\\n* { /* Avoid: universal selector */ }\\n```\\n\\n#### Critical CSS Patterns\\n\\nInline critical styles for immediate rendering:\\n\\n```css\\n/* Critical above-the-fold styles */\\n.layout,\\n.header-content,\\n.sidebar,\\n.main-content {\\n  /* Essential layout properties only */\\n  display: flex;\\n  position: relative;\\n}\\n\\n/* Non-critical styles can be loaded later */\\n.fancy-animations,\\n.decorative-elements {\\n  /* Complex animations and decorative styles */\\n}\\n```\\n\\n## Custom Styling Workflow\\n\\n### 1. Planning Your Customizations\\n\\nBefore modifying styles:\\n\\n1. **Audit existing styles**: Understand the current CSS architecture\\n2. **Define your design system**: Colors, typography, spacing, components\\n3. **Plan responsive behavior**: Mobile-first approach\\n4. **Consider accessibility**: Maintain contrast ratios and focus states\\n\\n### 2. Implementation Strategy\\n\\n**Recommended approach:**\\n1. Start with CSS custom property overrides\\n2. Add new component styles\\n3. Implement responsive variations\\n4. Test across themes (light/dark)\\n5. Validate accessibility compliance\\n\\n### 3. Testing Checklist\\n\\n- [ ] All themes (default, purple, vibrant)\\n- [ ] Light and dark modes\\n- [ ] Mobile and desktop layouts\\n- [ ] Keyboard navigation\\n- [ ] Screen reader compatibility\\n- [ ] Performance impact\\n\\n## Troubleshooting Custom Styles\\n\\n**Styles not applying**: Check CSS specificity and ensure your styles come after the base styles in the build order.\\n\\n**Theme conflicts**: Verify that custom styles work with both light and dark modes.\\n\\n**Performance issues**: Minimize complex selectors and excessive animations.\\n\\n**Responsive problems**: Test on actual devices, not just browser dev tools.\\n\\n**Accessibility concerns**: Use tools like axe-core to validate accessibility compliance.\"\n    },\n    \"advanced/api\": {\n        \"title\": \"API Reference\",\n        \"section\": \"Advanced\",\n        \"content\": \"# API Reference\\n\\nComprehensive JavaScript API reference for programmatic control and customization of GlowDoc documentation sites.\\n\\n## Overview\\n\\nGlowDoc generates a single-page application with a rich JavaScript API for navigation, search, theming, and customization. All functionality is embedded within the generated HTML file, providing a complete client-side documentation experience.\\n\\n## Core Navigation API\\n\\n### `showContent(contentId, updateUrl = true)`\\n\\nDisplays a specific documentation page by content ID.\\n\\n**Parameters:**\\n- `contentId` (string) - The unique identifier for the content section\\n- `updateUrl` (boolean, optional) - Whether to update browser URL and history (default: true)\\n\\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Show the installation page\\nshowContent('installation');\\n\\n// Show content without updating URL (for programmatic navigation)\\nshowContent('api-reference', false);\\n```\\n\\n**Behavior:**\\n- Switches from homepage to documentation layout if needed\\n- Hides all content sections and displays the target section\\n- Updates active state in navigation sidebar\\n- Updates browser URL and history (unless `updateUrl` is false)\\n- Automatically closes mobile sidebar\\n- Logs content display for debugging\\n\\n### `showHomepage()`\\n\\nDisplays the homepage content and hides documentation layout.\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Return to homepage\\nshowHomepage();\\n```\\n\\n**Behavior:**\\n- Shows homepage element, hides documentation layout\\n- Updates browser URL to root path\\n- Uses HTML5 History API for navigation\\n\\n### `showDocs()`\\n\\nSwitches the interface to documentation mode (internal function).\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Usage:** Typically called internally by `showContent()`, but available for custom implementations.\\n\\n### `showContentFromSearch(contentId)`\\n\\nDisplays content selected from search results and clears search state.\\n\\n**Parameters:**\\n- `contentId` (string) - The content ID to display\\n\\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Show search result and clear search\\nshowContentFromSearch('quick-start');\\n```\\n\\n**Behavior:**\\n- Clears search input field\\n- Hides search results, shows navigation\\n- Calls `showContent()` to display the selected page\\n\\n## Theme Management API\\n\\n### `toggleTheme()`\\n\\nToggles between light and dark theme modes.\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Toggle theme\\ntoggleTheme();\\n\\n// Programmatically check current theme\\nconst currentTheme = document.documentElement.getAttribute('data-theme');\\nconsole.log('Current theme:', currentTheme); // 'light' or 'dark'\\n```\\n\\n**Behavior:**\\n- Toggles `data-theme` attribute between 'light' and 'dark'\\n- Saves theme preference to localStorage\\n- Provides smooth transitions via CSS\\n- Respects system preferences on first visit\\n\\n**Theme Persistence:**\\n```javascript\\n// Theme is automatically saved to localStorage\\nlocalStorage.getItem('theme'); // Returns 'light' or 'dark'\\n```\\n\\n## Navigation and Sidebar API\\n\\n### `toggleSidebar()`\\n\\nToggles sidebar visibility (primarily for mobile interfaces).\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Toggle mobile sidebar\\ntoggleSidebar();\\n\\n// Check sidebar state\\nconst sidebar = document.querySelector('.sidebar');\\nconst isVisible = sidebar.classList.contains('visible');\\n```\\n\\n**Behavior:**\\n- Toggles 'visible' class on sidebar element\\n- Provides slide-in animation on mobile devices\\n- Automatically handled for responsive breakpoints\\n\\n### `toggleSection(sectionId)`\\n\\nExpands or collapses navigation sections in the sidebar.\\n\\n**Parameters:**\\n- `sectionId` (string) - The ID of the section to toggle\\n\\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Toggle a navigation section\\ntoggleSection('getting-started');\\n\\n// Check section state\\nconst section = document.querySelector('[data-section=\\\"getting-started\\\"]');\\nconst isCollapsed = section.classList.contains('collapsed');\\n```\\n\\n**Behavior:**\\n- Toggles 'collapsed' class on section and its toggle icon\\n- Provides smooth expand/collapse animations\\n- State persisted for user experience\\n\\n## Search API\\n\\n### `performSearch()`\\n\\nPerforms real-time search across all documentation content.\\n\\n**Parameters:** None (reads from search input element)  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Trigger search programmatically\\ndocument.querySelector('.search-input').value = 'installation';\\nperformSearch();\\n\\n// Search is automatically triggered on input\\n```\\n\\n**Search Features:**\\n- **Real-time Results**: Updates as user types\\n- **Content Indexing**: Searches titles, sections, and full content\\n- **Result Ranking**: Title matches rank higher than content matches\\n- **Snippet Generation**: Shows relevant content excerpts\\n- **Keyword Highlighting**: Highlights matching terms in results\\n\\n**Search Index Structure:**\\n```javascript\\n// Global searchIndex object\\nconst searchIndex = {\\n  \\\"page-id\\\": {\\n    \\\"title\\\": \\\"Page Title\\\",\\n    \\\"section\\\": \\\"Section Name\\\",\\n    \\\"content\\\": \\\"Full searchable content...\\\"\\n  }\\n  // ... more pages\\n};\\n```\\n\\n### Custom Search Integration\\n\\n```javascript\\n// Access search index for custom functionality\\nfunction customSearch(query) {\\n  const results = [];\\n  for (const [id, data] of Object.entries(searchIndex)) {\\n    if (data.title.toLowerCase().includes(query.toLowerCase())) {\\n      results.push({ id, ...data });\\n    }\\n  }\\n  return results;\\n}\\n\\n// Example: Find all pages in a specific section\\nfunction findBySection(sectionName) {\\n  return Object.entries(searchIndex)\\n    .filter(([id, data]) => data.section === sectionName)\\n    .map(([id, data]) => ({ id, ...data }));\\n}\\n```\\n\\n## URL and History Management\\n\\n### `loadFromUrl()`\\n\\nLoads appropriate content based on current URL hash.\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Load content based on URL\\nloadFromUrl();\\n\\n// Handle URL changes\\nwindow.addEventListener('hashchange', loadFromUrl);\\n```\\n\\n**URL Format:**\\n- Homepage: `#` or no hash\\n- Content pages: `#page-id`\\n- Automatically handles invalid page IDs\\n\\n**History Management:**\\n```javascript\\n// Navigation automatically updates browser history\\n// Back/forward buttons work seamlessly\\nwindow.addEventListener('popstate', (event) => {\\n  if (event.state?.contentId) {\\n    showContent(event.state.contentId, false);\\n  } else if (event.state?.page === 'home') {\\n    showHomepage();\\n  }\\n});\\n```\\n\\n## Event System\\n\\n### Built-in Event Listeners\\n\\nGlowDoc automatically registers several event listeners:\\n\\n```javascript\\n// Navigation clicks\\ndocument.addEventListener('click', (e) => {\\n  if (e.target.hasAttribute('data-content-id')) {\\n    e.preventDefault();\\n    showContent(e.target.getAttribute('data-content-id'));\\n  }\\n});\\n\\n// Browser navigation\\nwindow.addEventListener('popstate', (event) => {\\n  // Handle back/forward navigation\\n});\\n\\n// Initial load\\ndocument.addEventListener('DOMContentLoaded', () => {\\n  loadFromUrl();\\n});\\n\\n// Mobile sidebar - outside clicks\\ndocument.addEventListener('click', (e) => {\\n  // Close sidebar when clicking outside on mobile\\n});\\n```\\n\\n### Custom Event Handling\\n\\n```javascript\\n// Listen for content changes\\nfunction onContentChange(contentId) {\\n  console.log('Content changed to:', contentId);\\n  // Custom logic here\\n}\\n\\n// Override or extend existing functions\\nconst originalShowContent = showContent;\\nshowContent = function(contentId, updateUrl = true) {\\n  onContentChange(contentId);\\n  return originalShowContent(contentId, updateUrl);\\n};\\n```\\n\\n## Configuration and Customization\\n\\n### Global Configuration\\n\\n```javascript\\n// Access current state\\nconst getCurrentContent = () => {\\n  const activeSection = document.querySelector('.content-section:not([style*=\\\"display: none\\\"])');\\n  return activeSection?.id;\\n};\\n\\nconst getCurrentTheme = () => {\\n  return document.documentElement.getAttribute('data-theme');\\n};\\n\\n// Get navigation state\\nconst getNavigationState = () => {\\n  const collapsedSections = Array.from(document.querySelectorAll('.nav-section.collapsed'))\\n    .map(section => section.dataset.section);\\n  return { collapsedSections };\\n};\\n```\\n\\n### DOM Element Access\\n\\n**Required Elements:**\\n```javascript\\n// Core layout elements\\nconst homepage = document.getElementById('homepage');\\nconst docsLayout = document.getElementById('docs-layout');\\nconst sidebar = document.querySelector('.sidebar');\\n\\n// Search elements\\nconst searchInput = document.querySelector('.search-input');\\nconst searchResults = document.querySelector('.search-results');\\nconst searchResultsList = document.querySelector('.search-results-list');\\n\\n// Navigation elements\\nconst navigationContainer = document.querySelector('.navigation-container');\\nconst contentSections = document.querySelectorAll('.content-section');\\nconst navLinks = document.querySelectorAll('.nav-link');\\n```\\n\\n**Data Attributes:**\\n- `data-content-id`: Links navigation items to content sections\\n- `data-section`: Identifies collapsible navigation sections\\n- `data-theme`: Current theme state on document element\\n\\n## Advanced Customization\\n\\n### Custom Navigation\\n\\n```javascript\\n// Add custom navigation item\\nfunction addCustomNavItem(sectionId, title, contentId) {\\n  const navSection = document.querySelector(`[data-section=\\\"${sectionId}\\\"] .nav-section-content`);\\n  if (navSection) {\\n    const link = document.createElement('a');\\n    link.href = `#${contentId}`;\\n    link.className = 'nav-link';\\n    link.setAttribute('data-content-id', contentId);\\n    link.textContent = title;\\n    navSection.appendChild(link);\\n  }\\n}\\n\\n// Custom content injection\\nfunction addCustomContent(contentId, title, htmlContent) {\\n  const contentSection = document.createElement('div');\\n  contentSection.className = 'content-section';\\n  contentSection.id = contentId;\\n  contentSection.style.display = 'none';\\n  contentSection.innerHTML = `<h1>${title}</h1>${htmlContent}`;\\n  \\n  document.querySelector('.main-content').appendChild(contentSection);\\n  \\n  // Add to search index\\n  searchIndex[contentId] = {\\n    title: title,\\n    section: 'Custom',\\n    content: contentSection.textContent\\n  };\\n}\\n```\\n\\n### Theme Customization\\n\\n```javascript\\n// Custom theme switching\\nfunction setCustomTheme(themeName) {\\n  document.documentElement.setAttribute('data-theme', themeName);\\n  localStorage.setItem('theme', themeName);\\n}\\n\\n// Theme change detection\\nconst observer = new MutationObserver((mutations) => {\\n  mutations.forEach((mutation) => {\\n    if (mutation.attributeName === 'data-theme') {\\n      const newTheme = document.documentElement.getAttribute('data-theme');\\n      console.log('Theme changed to:', newTheme);\\n      // Custom theme change logic\\n    }\\n  });\\n});\\n\\nobserver.observe(document.documentElement, {\\n  attributes: true,\\n  attributeFilter: ['data-theme']\\n});\\n```\\n\\n### Search Customization\\n\\n```javascript\\n// Custom search implementation\\nfunction customPerformSearch() {\\n  const query = document.querySelector('.search-input').value.toLowerCase().trim();\\n  const resultsContainer = document.querySelector('.search-results-list');\\n  \\n  if (!query) {\\n    // Hide search results\\n    document.querySelector('.search-results').style.display = 'none';\\n    document.querySelector('.navigation-container').style.display = 'block';\\n    return;\\n  }\\n  \\n  const results = [];\\n  \\n  // Custom search logic\\n  for (const [id, data] of Object.entries(searchIndex)) {\\n    let score = 0;\\n    \\n    // Title match (highest priority)\\n    if (data.title.toLowerCase().includes(query)) score += 10;\\n    \\n    // Section match (medium priority)\\n    if (data.section.toLowerCase().includes(query)) score += 5;\\n    \\n    // Content match (lower priority)\\n    if (data.content.toLowerCase().includes(query)) score += 1;\\n    \\n    if (score > 0) {\\n      results.push({ id, ...data, score });\\n    }\\n  }\\n  \\n  // Sort by score (descending)\\n  results.sort((a, b) => b.score - a.score);\\n  \\n  // Display results\\n  displaySearchResults(results, query);\\n}\\n\\nfunction displaySearchResults(results, query) {\\n  const resultsContainer = document.querySelector('.search-results-list');\\n  \\n  if (results.length === 0) {\\n    resultsContainer.innerHTML = '<div class=\\\"no-results\\\">No results found</div>';\\n  } else {\\n    resultsContainer.innerHTML = results.map(result => {\\n      const snippet = generateSnippet(result.content, query);\\n      return `\\n        <div class=\\\"search-result\\\" onclick=\\\"showContentFromSearch('${result.id}')\\\">\\n          <div class=\\\"search-result-title\\\">${highlightText(result.title, query)}</div>\\n          <div class=\\\"search-result-section\\\">${result.section}</div>\\n          <div class=\\\"search-result-snippet\\\">${snippet}</div>\\n        </div>\\n      `;\\n    }).join('');\\n  }\\n  \\n  // Show search results\\n  document.querySelector('.search-results').style.display = 'block';\\n  document.querySelector('.navigation-container').style.display = 'none';\\n}\\n\\nfunction generateSnippet(content, query, maxLength = 150) {\\n  const queryIndex = content.toLowerCase().indexOf(query.toLowerCase());\\n  if (queryIndex === -1) {\\n    return content.substring(0, maxLength) + (content.length > maxLength ? '...' : '');\\n  }\\n  \\n  const start = Math.max(0, queryIndex - 50);\\n  const end = Math.min(content.length, queryIndex + query.length + 50);\\n  const snippet = content.substring(start, end);\\n  \\n  return (start > 0 ? '...' : '') + \\n         highlightText(snippet, query) + \\n         (end < content.length ? '...' : '');\\n}\\n\\nfunction highlightText(text, query) {\\n  const regex = new RegExp(`(${query})`, 'gi');\\n  return text.replace(regex, '<mark class=\\\"search-highlight\\\">$1</mark>');\\n}\\n```\\n\\n## Performance and Optimization\\n\\n### Debounced Search\\n\\n```javascript\\n// Implement search debouncing\\nlet searchTimeout;\\nfunction debouncedSearch() {\\n  clearTimeout(searchTimeout);\\n  searchTimeout = setTimeout(performSearch, 300);\\n}\\n\\n// Replace default search input handler\\ndocument.querySelector('.search-input').addEventListener('input', debouncedSearch);\\n```\\n\\n### Lazy Loading\\n\\n```javascript\\n// Lazy load content sections\\nconst observerOptions = {\\n  root: null,\\n  rootMargin: '100px',\\n  threshold: 0.1\\n};\\n\\nconst contentObserver = new IntersectionObserver((entries) => {\\n  entries.forEach(entry => {\\n    if (entry.isIntersecting) {\\n      // Load heavy content when section becomes visible\\n      loadSectionAssets(entry.target);\\n    }\\n  });\\n}, observerOptions);\\n\\n// Observe all content sections\\ndocument.querySelectorAll('.content-section').forEach(section => {\\n  contentObserver.observe(section);\\n});\\n```\\n\\n## Error Handling and Debugging\\n\\n### Debug Mode\\n\\n```javascript\\n// Enable debug mode\\nwindow.GLOWDOC_DEBUG = true;\\n\\n// Enhanced showContent with debugging\\nfunction debugShowContent(contentId, updateUrl = true) {\\n  if (window.GLOWDOC_DEBUG) {\\n    console.log('Showing content:', contentId);\\n    console.log('Available content IDs:', Object.keys(searchIndex));\\n    console.log('Update URL:', updateUrl);\\n  }\\n  \\n  const contentElement = document.getElementById(contentId);\\n  if (!contentElement) {\\n    console.error(`Content element with ID '${contentId}' not found`);\\n    return;\\n  }\\n  \\n  return showContent(contentId, updateUrl);\\n}\\n```\\n\\n### Error Recovery\\n\\n```javascript\\n// Handle missing content gracefully\\nfunction safeShowContent(contentId, fallbackId = 'introduction') {\\n  const contentElement = document.getElementById(contentId);\\n  if (!contentElement) {\\n    console.warn(`Content '${contentId}' not found, showing fallback`);\\n    return showContent(fallbackId);\\n  }\\n  return showContent(contentId);\\n}\\n\\n// Validate navigation state\\nfunction validateNavigation() {\\n  const issues = [];\\n  \\n  // Check for orphaned navigation links\\n  document.querySelectorAll('[data-content-id]').forEach(link => {\\n    const contentId = link.getAttribute('data-content-id');\\n    if (!document.getElementById(contentId)) {\\n      issues.push(`Navigation link points to missing content: ${contentId}`);\\n    }\\n  });\\n  \\n  // Check for content without navigation\\n  document.querySelectorAll('.content-section').forEach(section => {\\n    const contentId = section.id;\\n    const navLink = document.querySelector(`[data-content-id=\\\"${contentId}\\\"]`);\\n    if (!navLink) {\\n      issues.push(`Content section has no navigation link: ${contentId}`);\\n    }\\n  });\\n  \\n  return issues;\\n}\\n```\\n\\n## Browser Compatibility\\n\\n**Supported Features:**\\n- ES6+ JavaScript (const, let, arrow functions, template literals)\\n- HTML5 History API\\n- CSS Custom Properties\\n- LocalStorage\\n- Modern DOM APIs\\n\\n**Minimum Browser Versions:**\\n- Chrome 49+\\n- Firefox 44+\\n- Safari 10+\\n- Edge 12+\\n\\n**Graceful Degradation:**\\n```javascript\\n// Feature detection\\nif (!window.history?.pushState) {\\n  console.warn('History API not supported, using hash navigation');\\n  // Fallback to hash-based navigation\\n}\\n\\nif (!window.localStorage) {\\n  console.warn('LocalStorage not supported, theme preference will not persist');\\n  // Use session-based theme storage\\n}\\n```\\n\\nThis comprehensive API reference provides complete control over GlowDoc's functionality, enabling deep customization while maintaining the system's performance and user experience benefits.\"\n    },\n    \"advanced/deployment\": {\n        \"title\": \"Deployment\",\n        \"section\": \"Advanced\",\n        \"content\": \"# Deployment\\n\\nComprehensive guide to deploying your GlowDoc documentation site across various hosting platforms, from simple static hosting to advanced CI/CD pipelines.\\n\\n## Overview\\n\\nGlowDoc generates a single `index.html` file containing your entire documentation site, making deployment simple and flexible. This approach offers several advantages:\\n\\n- **Single File Deployment**: No complex directory structures or dependencies\\n- **Universal Compatibility**: Works with any static hosting service\\n- **Fast Loading**: All assets embedded, no additional HTTP requests\\n- **Easy Backup**: Single file contains everything\\n- **CDN Friendly**: Perfect for content delivery networks\\n\\n## Pre-Deployment Checklist\\n\\nBefore deploying your documentation:\\n\\n### 1. Build Verification\\n\\n```bash\\n# Build your documentation\\ncargo run --release\\n\\n# Verify the build succeeded\\nls -la index.html\\n\\n# Test locally\\npython3 -m http.server 8000\\n# Visit http://localhost:8000 to verify everything works\\n```\\n\\n### 2. Content Review\\n\\n- [ ] All pages load correctly\\n- [ ] Navigation works properly\\n- [ ] Search functionality operates\\n- [ ] All themes (light/dark) display correctly\\n- [ ] Mobile responsive design works\\n- [ ] All links are functional\\n\\n### 3. Performance Optimization\\n\\n```bash\\n# Check file size (typical range: 500KB - 2MB)\\ndu -h index.html\\n\\n# Optional: Minify if needed (for very large sites)\\n# Note: GlowDoc output is already optimized\\n```\\n\\n## Static Hosting Platforms\\n\\n### GitHub Pages\\n\\nDeploy directly from your GitHub repository with automated builds.\\n\\n#### Method 1: GitHub Actions (Recommended)\\n\\nCreate `.github/workflows/deploy.yml`:\\n\\n```yaml\\nname: Deploy GlowDoc\\n\\non:\\n  push:\\n    branches: [ main ]\\n  pull_request:\\n    branches: [ main ]\\n\\njobs:\\n  deploy:\\n    runs-on: ubuntu-latest\\n    \\n    steps:\\n    - uses: actions/checkout@v4\\n    \\n    - name: Install Rust\\n      uses: dtolnay/rust-toolchain@stable\\n    \\n    - name: Cache Cargo dependencies\\n      uses: actions/cache@v3\\n      with:\\n        path: |\\n          ~/.cargo/registry\\n          ~/.cargo/git\\n          target\\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\\n    \\n    - name: Build documentation\\n      run: cargo run --release\\n    \\n    - name: Deploy to GitHub Pages\\n      uses: peaceiris/actions-gh-pages@v3\\n      if: github.ref == 'refs/heads/main'\\n      with:\\n        github_token: ${{ secrets.GITHUB_TOKEN }}\\n        publish_dir: .\\n        publish_branch: gh-pages\\n        force_orphan: true\\n        enable_jekyll: false\\n        exclude_assets: |\\n          .github\\n          .gitignore\\n          Cargo.toml\\n          Cargo.lock\\n          src\\n          docs\\n          target\\n          README.md\\n```\\n\\n#### Method 2: Manual Upload\\n\\n```bash\\n# Build locally\\ncargo run --release\\n\\n# Create gh-pages branch\\ngit checkout --orphan gh-pages\\ngit rm -rf .\\ngit add index.html\\ngit commit -m \\\"Deploy documentation\\\"\\ngit push origin gh-pages\\n\\n# Return to main branch\\ngit checkout main\\n```\\n\\n#### GitHub Pages Configuration\\n\\n1. Go to your repository → Settings → Pages\\n2. Set Source to \\\"Deploy from a branch\\\"\\n3. Select `gh-pages` branch\\n4. Choose `/ (root)` folder\\n5. Save settings\\n\\n**Custom Domain Setup:**\\n```bash\\n# Add CNAME file to repository root\\necho \\\"docs.yoursite.com\\\" > CNAME\\ngit add CNAME\\ngit commit -m \\\"Add custom domain\\\"\\ngit push\\n```\\n\\n### Netlify\\n\\nProfessional hosting with advanced features and global CDN.\\n\\n#### Method 1: Git Integration (Recommended)\\n\\n1. **Connect Repository:**\\n   - Sign up at [netlify.com](https://netlify.com)\\n   - Click \\\"New site from Git\\\"\\n   - Connect your GitHub/GitLab repository\\n\\n2. **Build Configuration:**\\n   ```toml\\n   # netlify.toml\\n   [build]\\n     command = \\\"cargo run --release\\\"\\n     publish = \\\".\\\"\\n   \\n   [build.environment]\\n     RUST_VERSION = \\\"1.70\\\"\\n   \\n   [[headers]]\\n     for = \\\"/*\\\"\\n     [headers.values]\\n       X-Frame-Options = \\\"DENY\\\"\\n       X-XSS-Protection = \\\"1; mode=block\\\"\\n       X-Content-Type-Options = \\\"nosniff\\\"\\n       Referrer-Policy = \\\"strict-origin-when-cross-origin\\\"\\n   \\n   [[redirects]]\\n     from = \\\"/docs/*\\\"\\n     to = \\\"/#:splat\\\"\\n     status = 200\\n   ```\\n\\n3. **Deploy Settings:**\\n   - Build command: `cargo run --release`\\n   - Publish directory: `.` (root)\\n   - Node version: Latest LTS\\n\\n#### Method 2: Manual Upload\\n\\n```bash\\n# Build documentation\\ncargo run --release\\n\\n# Deploy via Netlify CLI\\nnpm install -g netlify-cli\\nnetlify login\\nnetlify deploy --prod --dir=.\\n```\\n\\n#### Advanced Netlify Features\\n\\n**Form Handling:**\\n```html\\n<!-- Add to your documentation for feedback forms -->\\n<form name=\\\"feedback\\\" method=\\\"POST\\\" data-netlify=\\\"true\\\">\\n  <input type=\\\"hidden\\\" name=\\\"form-name\\\" value=\\\"feedback\\\" />\\n  <input type=\\\"text\\\" name=\\\"name\\\" placeholder=\\\"Your name\\\" required />\\n  <textarea name=\\\"message\\\" placeholder=\\\"Feedback\\\" required></textarea>\\n  <button type=\\\"submit\\\">Send Feedback</button>\\n</form>\\n```\\n\\n**Analytics Integration:**\\n```javascript\\n// Add to your custom JavaScript\\nif (window.netlifyIdentity) {\\n  window.netlifyIdentity.on('init', user => {\\n    if (!user) {\\n      window.netlifyIdentity.on('login', () => {\\n        document.location.href = '/admin/';\\n      });\\n    }\\n  });\\n}\\n```\\n\\n### Vercel\\n\\nZero-configuration deployment with excellent performance.\\n\\n#### Method 1: Git Integration\\n\\n1. **Connect Repository:**\\n   - Sign up at [vercel.com](https://vercel.com)\\n   - Import your Git repository\\n   - Vercel auto-detects the setup\\n\\n2. **Configuration File:**\\n   ```json\\n   {\\n     \\\"version\\\": 2,\\n     \\\"name\\\": \\\"glowdoc-docs\\\",\\n     \\\"builds\\\": [\\n       {\\n         \\\"src\\\": \\\"package.json\\\",\\n         \\\"use\\\": \\\"@vercel/static-build\\\"\\n       }\\n     ],\\n     \\\"routes\\\": [\\n       {\\n         \\\"src\\\": \\\"/(.*)\\\",\\n         \\\"dest\\\": \\\"/index.html\\\"\\n       }\\n     ],\\n     \\\"env\\\": {\\n       \\\"RUST_VERSION\\\": \\\"1.70\\\"\\n     }\\n   }\\n   ```\\n\\n3. **Package.json for Build:**\\n   ```json\\n   {\\n     \\\"name\\\": \\\"glowdoc-site\\\",\\n     \\\"scripts\\\": {\\n       \\\"build\\\": \\\"curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source ~/.cargo/env && cargo run --release\\\"\\n     }\\n   }\\n   ```\\n\\n#### Method 2: Vercel CLI\\n\\n```bash\\n# Install Vercel CLI\\nnpm install -g vercel\\n\\n# Build and deploy\\ncargo run --release\\nvercel --prod\\n```\\n\\n### Cloudflare Pages\\n\\nHigh-performance hosting with global edge network.\\n\\n#### Setup Process:\\n\\n1. **Connect Repository:**\\n   - Sign up at [pages.cloudflare.com](https://pages.cloudflare.com)\\n   - Connect your Git repository\\n\\n2. **Build Configuration:**\\n   - Build command: `curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source ~/.cargo/env && cargo run --release`\\n   - Build output directory: `.`\\n   - Environment variables: `RUST_VERSION=1.70`\\n\\n3. **Custom Domains:**\\n   ```bash\\n   # Configure custom domain in Cloudflare Dashboard\\n   # DNS automatically managed\\n   ```\\n\\n### Firebase Hosting\\n\\nGoogle's hosting platform with global CDN.\\n\\n#### Setup Process:\\n\\n```bash\\n# Install Firebase CLI\\nnpm install -g firebase-tools\\n\\n# Initialize Firebase\\nfirebase login\\nfirebase init hosting\\n\\n# Configure firebase.json\\n```\\n\\n```json\\n{\\n  \\\"hosting\\\": {\\n    \\\"public\\\": \\\".\\\",\\n    \\\"ignore\\\": [\\n      \\\"firebase.json\\\",\\n      \\\"**/.*\\\",\\n      \\\"**/node_modules/**\\\",\\n      \\\"src/**\\\",\\n      \\\"docs/**\\\",\\n      \\\"target/**\\\"\\n    ],\\n    \\\"rewrites\\\": [\\n      {\\n        \\\"source\\\": \\\"**\\\",\\n        \\\"destination\\\": \\\"/index.html\\\"\\n      }\\n    ],\\n    \\\"headers\\\": [\\n      {\\n        \\\"source\\\": \\\"**/*.@(js|css)\\\",\\n        \\\"headers\\\": [\\n          {\\n            \\\"key\\\": \\\"Cache-Control\\\",\\n            \\\"value\\\": \\\"max-age=31536000\\\"\\n          }\\n        ]\\n      }\\n    ]\\n  }\\n}\\n```\\n\\n```bash\\n# Build and deploy\\ncargo run --release\\nfirebase deploy\\n```\\n\\n## Traditional Web Hosting\\n\\n### Apache Configuration\\n\\nFor traditional web hosting with Apache:\\n\\n```apache\\n# .htaccess\\nRewriteEngine On\\n\\n# Handle client-side routing\\nRewriteCond %{REQUEST_FILENAME} !-f\\nRewriteCond %{REQUEST_FILENAME} !-d\\nRewriteRule . /index.html [L]\\n\\n# Security headers\\nHeader always set X-Frame-Options DENY\\nHeader always set X-Content-Type-Options nosniff\\nHeader always set X-XSS-Protection \\\"1; mode=block\\\"\\nHeader always set Strict-Transport-Security \\\"max-age=31536000; includeSubDomains\\\"\\n\\n# Compression\\n<IfModule mod_deflate.c>\\n    AddOutputFilterByType DEFLATE text/html text/css application/javascript\\n</IfModule>\\n\\n# Caching\\n<IfModule mod_expires.c>\\n    ExpiresActive On\\n    ExpiresByType text/html \\\"access plus 1 hour\\\"\\n    ExpiresByType text/css \\\"access plus 1 year\\\"\\n    ExpiresByType application/javascript \\\"access plus 1 year\\\"\\n</IfModule>\\n```\\n\\n### Nginx Configuration\\n\\nFor Nginx hosting:\\n\\n```nginx\\nserver {\\n    listen 80;\\n    listen [::]:80;\\n    server_name yourdomain.com;\\n    \\n    # Redirect HTTP to HTTPS\\n    return 301 https://$server_name$request_uri;\\n}\\n\\nserver {\\n    listen 443 ssl http2;\\n    listen [::]:443 ssl http2;\\n    server_name yourdomain.com;\\n    \\n    # SSL configuration\\n    ssl_certificate /path/to/certificate.crt;\\n    ssl_certificate_key /path/to/private.key;\\n    \\n    # Document root\\n    root /var/www/glowdoc;\\n    index index.html;\\n    \\n    # Handle client-side routing\\n    location / {\\n        try_files $uri $uri/ /index.html;\\n    }\\n    \\n    # Security headers\\n    add_header X-Frame-Options DENY;\\n    add_header X-Content-Type-Options nosniff;\\n    add_header X-XSS-Protection \\\"1; mode=block\\\";\\n    add_header Strict-Transport-Security \\\"max-age=31536000; includeSubDomains\\\";\\n    \\n    # Compression\\n    gzip on;\\n    gzip_types text/html text/css application/javascript;\\n    \\n    # Caching\\n    location ~* \\\\.(css|js)$ {\\n        expires 1y;\\n        add_header Cache-Control \\\"public, immutable\\\";\\n    }\\n}\\n```\\n\\n## Content Delivery Networks (CDN)\\n\\n### Cloudflare CDN\\n\\nEnhance performance with Cloudflare:\\n\\n1. **DNS Setup:**\\n   - Add your domain to Cloudflare\\n   - Update nameservers\\n   - Enable \\\"Proxied\\\" status\\n\\n2. **Optimization Settings:**\\n   - Auto Minify: HTML, CSS, JS\\n   - Brotli compression: Enabled\\n   - Rocket Loader: Enabled\\n   - Cache Level: Standard\\n\\n3. **Page Rules:**\\n   ```\\n   yourdomain.com/*\\n   - Cache Level: Cache Everything\\n   - Edge Cache TTL: 1 month\\n   - Browser Cache TTL: 1 day\\n   ```\\n\\n### AWS CloudFront\\n\\nEnterprise-grade CDN with AWS integration:\\n\\n```json\\n{\\n  \\\"Distribution\\\": {\\n    \\\"Origins\\\": [\\n      {\\n        \\\"Id\\\": \\\"S3-glowdoc\\\",\\n        \\\"DomainName\\\": \\\"your-bucket.s3.amazonaws.com\\\",\\n        \\\"S3OriginConfig\\\": {\\n          \\\"OriginAccessIdentity\\\": \\\"\\\"\\n        }\\n      }\\n    ],\\n    \\\"DefaultCacheBehavior\\\": {\\n      \\\"TargetOriginId\\\": \\\"S3-glowdoc\\\",\\n      \\\"ViewerProtocolPolicy\\\": \\\"redirect-to-https\\\",\\n      \\\"Compress\\\": true,\\n      \\\"CachePolicyId\\\": \\\"managed-caching-optimized\\\"\\n    },\\n    \\\"CustomErrorResponses\\\": [\\n      {\\n        \\\"ErrorCode\\\": 404,\\n        \\\"ResponseCode\\\": 200,\\n        \\\"ResponsePagePath\\\": \\\"/index.html\\\"\\n      }\\n    ]\\n  }\\n}\\n```\\n\\n## Automation and CI/CD\\n\\n### GitHub Actions Advanced Workflow\\n\\nComplete CI/CD pipeline with testing and deployment:\\n\\n```yaml\\nname: Build, Test, and Deploy\\n\\non:\\n  push:\\n    branches: [ main, develop ]\\n  pull_request:\\n    branches: [ main ]\\n\\nenv:\\n  CARGO_TERM_COLOR: always\\n\\njobs:\\n  test:\\n    runs-on: ubuntu-latest\\n    steps:\\n    - uses: actions/checkout@v4\\n    \\n    - name: Install Rust\\n      uses: dtolnay/rust-toolchain@stable\\n    \\n    - name: Run tests\\n      run: cargo test --verbose\\n    \\n    - name: Check formatting\\n      run: cargo fmt -- --check\\n    \\n    - name: Run clippy\\n      run: cargo clippy -- -D warnings\\n\\n  build:\\n    needs: test\\n    runs-on: ubuntu-latest\\n    steps:\\n    - uses: actions/checkout@v4\\n    \\n    - name: Install Rust\\n      uses: dtolnay/rust-toolchain@stable\\n    \\n    - name: Cache dependencies\\n      uses: actions/cache@v3\\n      with:\\n        path: |\\n          ~/.cargo/registry\\n          ~/.cargo/git\\n          target\\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\\n    \\n    - name: Build documentation\\n      run: cargo run --release\\n    \\n    - name: Validate HTML\\n      run: |\\n        npm install -g html-validate\\n        html-validate index.html\\n    \\n    - name: Check file size\\n      run: |\\n        SIZE=$(stat -c%s index.html)\\n        echo \\\"Generated file size: $SIZE bytes\\\"\\n        if [ $SIZE -gt 5242880 ]; then\\n          echo \\\"Warning: File size exceeds 5MB\\\"\\n          exit 1\\n        fi\\n    \\n    - name: Upload artifacts\\n      uses: actions/upload-artifact@v3\\n      with:\\n        name: documentation\\n        path: index.html\\n\\n  deploy-staging:\\n    needs: build\\n    runs-on: ubuntu-latest\\n    if: github.ref == 'refs/heads/develop'\\n    steps:\\n    - name: Download artifacts\\n      uses: actions/download-artifact@v3\\n      with:\\n        name: documentation\\n    \\n    - name: Deploy to staging\\n      run: |\\n        # Deploy to staging environment\\n        echo \\\"Deploying to staging...\\\"\\n\\n  deploy-production:\\n    needs: build\\n    runs-on: ubuntu-latest\\n    if: github.ref == 'refs/heads/main'\\n    steps:\\n    - name: Download artifacts\\n      uses: actions/download-artifact@v3\\n      with:\\n        name: documentation\\n    \\n    - name: Deploy to GitHub Pages\\n      uses: peaceiris/actions-gh-pages@v3\\n      with:\\n        github_token: ${{ secrets.GITHUB_TOKEN }}\\n        publish_dir: .\\n        force_orphan: true\\n    \\n    - name: Notify deployment\\n      run: |\\n        curl -X POST ${{ secrets.SLACK_WEBHOOK }} \\\\\\n          -H 'Content-type: application/json' \\\\\\n          --data '{\\\"text\\\":\\\"📚 Documentation deployed successfully!\\\"}'\\n```\\n\\n### GitLab CI/CD\\n\\n```yaml\\n# .gitlab-ci.yml\\nstages:\\n  - test\\n  - build\\n  - deploy\\n\\nvariables:\\n  RUST_VERSION: \\\"1.70\\\"\\n\\nbefore_script:\\n  - apt-get update -qq\\n  - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y\\n  - source ~/.cargo/env\\n\\ntest:\\n  stage: test\\n  script:\\n    - cargo test --verbose\\n    - cargo fmt -- --check\\n    - cargo clippy -- -D warnings\\n  only:\\n    - merge_requests\\n    - main\\n\\nbuild:\\n  stage: build\\n  script:\\n    - cargo run --release\\n  artifacts:\\n    paths:\\n      - index.html\\n    expire_in: 1 hour\\n  only:\\n    - main\\n\\npages:\\n  stage: deploy\\n  script:\\n    - mkdir public\\n    - cp index.html public/\\n  artifacts:\\n    paths:\\n      - public\\n  only:\\n    - main\\n```\\n\\n## Domain and SSL Configuration\\n\\n### Custom Domain Setup\\n\\n#### DNS Configuration:\\n\\n```\\n# A Records for root domain\\n@ 3600 IN A 185.199.108.153\\n@ 3600 IN A 185.199.109.153\\n@ 3600 IN A 185.199.110.153\\n@ 3600 IN A 185.199.111.153\\n\\n# CNAME for www subdomain\\nwww 3600 IN CNAME your-username.github.io.\\n\\n# CNAME for docs subdomain\\ndocs 3600 IN CNAME your-site.netlify.app.\\n```\\n\\n#### SSL Certificate Setup:\\n\\nMost modern hosting platforms provide automatic SSL:\\n\\n- **GitHub Pages**: Automatic with custom domains\\n- **Netlify**: Automatic Let's Encrypt certificates\\n- **Vercel**: Automatic SSL for all deployments\\n- **Cloudflare**: Universal SSL included\\n\\n### Manual SSL Configuration\\n\\nFor traditional hosting:\\n\\n```bash\\n# Generate Let's Encrypt certificate\\ncertbot certonly --webroot -w /var/www/glowdoc -d yourdomain.com\\n\\n# Auto-renewal\\necho \\\"0 12 * * * /usr/bin/certbot renew --quiet\\\" | crontab -\\n```\\n\\n## Performance Optimization\\n\\n### Build Optimization\\n\\n```bash\\n# Optimize for production\\nRUSTFLAGS=\\\"-C target-cpu=native\\\" cargo run --release\\n\\n# Profile build performance\\ncargo build --release --timings\\n```\\n\\n### Content Optimization\\n\\n1. **Image Optimization**: Use optimized images in markdown\\n2. **Font Subsetting**: Include only needed font weights\\n3. **Code Splitting**: Implement lazy loading for large sections\\n\\n### Monitoring and Analytics\\n\\n#### Performance Monitoring:\\n\\n```javascript\\n// Add to your custom JavaScript\\nfunction trackPerformance() {\\n  window.addEventListener('load', () => {\\n    const perfData = performance.timing;\\n    const loadTime = perfData.loadEventEnd - perfData.navigationStart;\\n    \\n    // Send to analytics\\n    gtag('event', 'page_load_time', {\\n      value: loadTime,\\n      custom_parameter: 'documentation_site'\\n    });\\n  });\\n}\\n```\\n\\n#### Uptime Monitoring:\\n\\nSet up monitoring with services like:\\n- **StatusCake**: Free uptime monitoring\\n- **Pingdom**: Comprehensive monitoring suite\\n- **UptimeRobot**: Free and paid monitoring options\\n\\n## Security Considerations\\n\\n### Content Security Policy\\n\\n```html\\n<!-- Add to your HTML head -->\\n<meta http-equiv=\\\"Content-Security-Policy\\\" content=\\\"\\n  default-src 'self';\\n  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com;\\n  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;\\n  font-src 'self' https://fonts.gstatic.com;\\n  img-src 'self' data: https:;\\n  connect-src 'self' https://www.google-analytics.com;\\n\\\">\\n```\\n\\n### Security Headers\\n\\nImplement security headers across all hosting platforms:\\n\\n```\\nX-Frame-Options: DENY\\nX-Content-Type-Options: nosniff\\nX-XSS-Protection: 1; mode=block\\nStrict-Transport-Security: max-age=31536000; includeSubDomains\\nReferrer-Policy: strict-origin-when-cross-origin\\n```\\n\\n## Troubleshooting Deployment Issues\\n\\n### Common Problems\\n\\n**Build Failures:**\\n```bash\\n# Check Rust version compatibility\\nrustc --version\\n\\n# Verify dependencies\\ncargo check\\n\\n# Clean and rebuild\\ncargo clean && cargo run --release\\n```\\n\\n**Routing Issues:**\\n- Ensure hosting platform supports SPA routing\\n- Configure redirects for client-side routing\\n- Verify base URL configuration\\n\\n**Performance Issues:**\\n- Check file size (should be under 5MB)\\n- Verify compression is enabled\\n- Test CDN configuration\\n\\n**SSL Certificate Problems:**\\n- Verify DNS propagation\\n- Check certificate chain\\n- Ensure HTTPS redirects are configured\\n\\n### Debug Deployment\\n\\n```bash\\n# Test local build\\ncargo run --release\\npython3 -m http.server 8000\\n\\n# Validate HTML\\nhtml-validate index.html\\n\\n# Check file permissions\\nls -la index.html\\n\\n# Test from different networks\\ncurl -I https://yourdomain.com\\n```\\n\\n## Best Practices\\n\\n1. **Version Control**: Always commit before deploying\\n2. **Staging Environment**: Test changes before production\\n3. **Automated Backups**: Regular backup of source files\\n4. **Performance Monitoring**: Track load times and uptime\\n5. **Security Updates**: Keep hosting platform updated\\n6. **Documentation**: Document deployment process for team\\n7. **Rollback Plan**: Maintain ability to quickly revert changes\\n\\nThis comprehensive deployment guide ensures your GlowDoc documentation is accessible, performant, and secure across any hosting platform.\"\n    },\n    \"advanced/plugins\": {\n        \"title\": \"Plugins and Extensions\",\n        \"section\": \"Advanced\",\n        \"content\": \"# Plugins and Extensions\\n\\nExtend GlowDoc's functionality with custom plugins, third-party integrations, and advanced features to enhance your documentation experience.\\n\\n## Plugin Architecture Overview\\n\\nGlowDoc's modular architecture allows for various extension points and integration patterns. While GlowDoc doesn't have a formal plugin system, you can extend functionality through several approaches:\\n\\n### Extension Methods\\n\\n1. **CSS and JavaScript Extensions**: Add custom functionality through the Rust build process\\n2. **Third-Party Integrations**: Embed external services and tools\\n3. **Build Process Extensions**: Modify the Rust source for custom features\\n4. **External Tool Integration**: Combine GlowDoc with other documentation tools\\n\\n## Syntax Highlighting Enhancements\\n\\n### Advanced Code Highlighting\\n\\nWhile GlowDoc includes basic syntax highlighting, you can enhance it with external libraries:\\n\\n#### Prism.js Integration\\n\\nAdd advanced syntax highlighting with Prism.js:\\n\\n```javascript\\n// Add to the JavaScript section in src/main.rs\\nfunction initializePrism() {\\n  // Load Prism.js dynamically\\n  const script = document.createElement('script');\\n  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';\\n  script.onload = function() {\\n    // Load additional language support\\n    const languages = ['rust', 'javascript', 'python', 'bash', 'yaml'];\\n    languages.forEach(lang => {\\n      const langScript = document.createElement('script');\\n      langScript.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${lang}.min.js`;\\n      document.head.appendChild(langScript);\\n    });\\n    \\n    // Load Prism CSS\\n    const link = document.createElement('link');\\n    link.rel = 'stylesheet';\\n    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css';\\n    document.head.appendChild(link);\\n    \\n    // Re-highlight all code blocks\\n    Prism.highlightAll();\\n  };\\n  document.head.appendChild(script);\\n}\\n\\n// Call during page initialization\\ninitializePrism();\\n```\\n\\n#### Custom Syntax Highlighting\\n\\nCreate custom highlighting for domain-specific languages:\\n\\n```javascript\\nfunction customHighlighter() {\\n  document.querySelectorAll('pre code').forEach(block => {\\n    const language = block.className.match(/language-(\\\\w+)/);\\n    if (language && language[1] === 'custom-dsl') {\\n      highlightCustomDSL(block);\\n    }\\n  });\\n}\\n\\nfunction highlightCustomDSL(codeBlock) {\\n  let html = codeBlock.innerHTML;\\n  \\n  // Define custom syntax patterns\\n  const patterns = [\\n    { regex: /\\\\b(function|if|else|return)\\\\b/g, class: 'keyword' },\\n    { regex: /\\\\b\\\\d+\\\\b/g, class: 'number' },\\n    { regex: /\\\"[^\\\"]*\\\"/g, class: 'string' },\\n    { regex: /\\\\/\\\\/.*$/gm, class: 'comment' }\\n  ];\\n  \\n  patterns.forEach(pattern => {\\n    html = html.replace(pattern.regex, `<span class=\\\"${pattern.class}\\\">$&</span>`);\\n  });\\n  \\n  codeBlock.innerHTML = html;\\n}\\n```\\n\\n### Code Copy Functionality\\n\\nAdd copy-to-clipboard buttons for code blocks:\\n\\n```javascript\\nfunction addCopyButtons() {\\n  document.querySelectorAll('pre').forEach(pre => {\\n    const button = document.createElement('button');\\n    button.className = 'copy-button';\\n    button.textContent = 'Copy';\\n    button.onclick = () => copyToClipboard(pre.textContent, button);\\n    \\n    pre.style.position = 'relative';\\n    pre.appendChild(button);\\n  });\\n}\\n\\nfunction copyToClipboard(text, button) {\\n  navigator.clipboard.writeText(text).then(() => {\\n    const originalText = button.textContent;\\n    button.textContent = 'Copied!';\\n    button.classList.add('copied');\\n    \\n    setTimeout(() => {\\n      button.textContent = originalText;\\n      button.classList.remove('copied');\\n    }, 2000);\\n  });\\n}\\n\\n// CSS for copy button\\nconst copyButtonCSS = `\\n.copy-button {\\n  position: absolute;\\n  top: 0.5rem;\\n  right: 0.5rem;\\n  padding: 0.25rem 0.5rem;\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n  border: none;\\n  border-radius: 0.25rem;\\n  font-size: 0.75rem;\\n  cursor: pointer;\\n  opacity: 0;\\n  transition: opacity 0.2s ease;\\n}\\n\\npre:hover .copy-button {\\n  opacity: 1;\\n}\\n\\n.copy-button.copied {\\n  background: hsl(var(--accent));\\n}\\n`;\\n```\\n\\n## Search Enhancements\\n\\n### Advanced Search Integration\\n\\n#### Algolia DocSearch\\n\\nIntegrate Algolia's DocSearch for powerful search capabilities:\\n\\n```javascript\\nfunction initializeAlgoliaSearch() {\\n  // Load Algolia DocSearch\\n  const script = document.createElement('script');\\n  script.src = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3';\\n  script.onload = function() {\\n    docsearch({\\n      appId: 'YOUR_APP_ID',\\n      apiKey: 'YOUR_SEARCH_API_KEY',\\n      indexName: 'YOUR_INDEX_NAME',\\n      container: '#docsearch',\\n      searchParameters: {\\n        facetFilters: ['language:en'],\\n      },\\n    });\\n  };\\n  document.head.appendChild(script);\\n  \\n  // Replace existing search input\\n  const searchContainer = document.querySelector('.search-container');\\n  searchContainer.innerHTML = '<div id=\\\"docsearch\\\"></div>';\\n}\\n```\\n\\n#### Lunr.js Client-Side Search\\n\\nImplement advanced client-side search with Lunr.js:\\n\\n```javascript\\nfunction initializeLunrSearch() {\\n  // Build search index from content\\n  const documents = [];\\n  document.querySelectorAll('.content-section').forEach((section, idx) => {\\n    documents.push({\\n      id: idx,\\n      title: section.querySelector('h1')?.textContent || '',\\n      content: section.textContent,\\n      url: section.id\\n    });\\n  });\\n  \\n  // Create Lunr index\\n  const idx = lunr(function () {\\n    this.ref('id');\\n    this.field('title', { boost: 10 });\\n    this.field('content');\\n    \\n    documents.forEach((doc) => {\\n      this.add(doc);\\n    });\\n  });\\n  \\n  // Enhanced search function\\n  function performSearch(query) {\\n    const results = idx.search(query);\\n    return results.map(result => {\\n      const doc = documents[result.ref];\\n      return {\\n        ...doc,\\n        score: result.score,\\n        excerpt: generateExcerpt(doc.content, query)\\n      };\\n    });\\n  }\\n  \\n  function generateExcerpt(content, query, maxLength = 150) {\\n    const index = content.toLowerCase().indexOf(query.toLowerCase());\\n    if (index === -1) return content.substring(0, maxLength) + '...';\\n    \\n    const start = Math.max(0, index - 50);\\n    const end = Math.min(content.length, index + query.length + 50);\\n    const excerpt = content.substring(start, end);\\n    \\n    return (start > 0 ? '...' : '') + excerpt + (end < content.length ? '...' : '');\\n  }\\n}\\n```\\n\\n### Search Analytics\\n\\nTrack search behavior and popular queries:\\n\\n```javascript\\nfunction trackSearchAnalytics() {\\n  const searchInput = document.querySelector('.search-input');\\n  \\n  searchInput.addEventListener('input', debounce((e) => {\\n    const query = e.target.value;\\n    if (query.length > 2) {\\n      // Track search queries\\n      gtag('event', 'search', {\\n        search_term: query,\\n        page_title: document.title\\n      });\\n    }\\n  }, 1000));\\n  \\n  // Track search result clicks\\n  document.addEventListener('click', (e) => {\\n    if (e.target.classList.contains('search-result')) {\\n      gtag('event', 'search_result_click', {\\n        search_term: searchInput.value,\\n        result_title: e.target.textContent\\n      });\\n    }\\n  });\\n}\\n\\nfunction debounce(func, wait) {\\n  let timeout;\\n  return function executedFunction(...args) {\\n    const later = () => {\\n      clearTimeout(timeout);\\n      func(...args);\\n    };\\n    clearTimeout(timeout);\\n    timeout = setTimeout(later, wait);\\n  };\\n}\\n```\\n\\n## Analytics and Tracking\\n\\n### Google Analytics 4 Integration\\n\\nImplement comprehensive analytics tracking:\\n\\n```javascript\\nfunction initializeAnalytics() {\\n  // Load Google Analytics\\n  const script1 = document.createElement('script');\\n  script1.async = true;\\n  script1.src = 'https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID';\\n  document.head.appendChild(script1);\\n  \\n  const script2 = document.createElement('script');\\n  script2.innerHTML = `\\n    window.dataLayer = window.dataLayer || [];\\n    function gtag(){dataLayer.push(arguments);}\\n    gtag('js', new Date());\\n    gtag('config', 'YOUR_GA_ID', {\\n      page_title: document.title,\\n      page_location: window.location.href\\n    });\\n  `;\\n  document.head.appendChild(script2);\\n}\\n\\nfunction trackUserBehavior() {\\n  // Track page navigation\\n  document.addEventListener('click', (e) => {\\n    if (e.target.classList.contains('nav-link')) {\\n      gtag('event', 'page_view', {\\n        page_title: e.target.textContent,\\n        page_location: window.location.href + '#' + e.target.getAttribute('href').substring(1)\\n      });\\n    }\\n  });\\n  \\n  // Track theme changes\\n  document.querySelector('.theme-toggle').addEventListener('click', () => {\\n    const currentTheme = document.documentElement.getAttribute('data-theme');\\n    gtag('event', 'theme_change', {\\n      theme: currentTheme === 'dark' ? 'light' : 'dark'\\n    });\\n  });\\n  \\n  // Track scroll depth\\n  let maxScroll = 0;\\n  window.addEventListener('scroll', debounce(() => {\\n    const scrollPercent = Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100);\\n    if (scrollPercent > maxScroll) {\\n      maxScroll = scrollPercent;\\n      if (maxScroll % 25 === 0) { // Track at 25%, 50%, 75%, 100%\\n        gtag('event', 'scroll_depth', {\\n          percent: maxScroll,\\n          page_title: document.title\\n        });\\n      }\\n    }\\n  }, 500));\\n}\\n```\\n\\n### Hotjar Integration\\n\\nAdd user behavior tracking with Hotjar:\\n\\n```javascript\\nfunction initializeHotjar() {\\n  const script = document.createElement('script');\\n  script.innerHTML = `\\n    (function(h,o,t,j,a,r){\\n      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\\n      h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};\\n      a=o.getElementsByTagName('head')[0];\\n      r=o.createElement('script');r.async=1;\\n      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\\n      a.appendChild(r);\\n    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\\n  `;\\n  document.head.appendChild(script);\\n}\\n```\\n\\n## Accessibility Enhancements\\n\\n### Screen Reader Improvements\\n\\nEnhance accessibility with ARIA attributes and screen reader support:\\n\\n```javascript\\nfunction enhanceAccessibility() {\\n  // Add skip navigation\\n  const skipLink = document.createElement('a');\\n  skipLink.href = '#main-content';\\n  skipLink.textContent = 'Skip to main content';\\n  skipLink.className = 'skip-link';\\n  document.body.insertBefore(skipLink, document.body.firstChild);\\n  \\n  // Improve navigation ARIA labels\\n  document.querySelectorAll('.nav-section-title').forEach(title => {\\n    const sectionId = title.getAttribute('data-section');\\n    title.setAttribute('aria-expanded', 'false');\\n    title.setAttribute('aria-controls', sectionId + '-content');\\n    \\n    const content = title.nextElementSibling;\\n    if (content) {\\n      content.setAttribute('id', sectionId + '-content');\\n      content.setAttribute('aria-labelledby', sectionId + '-title');\\n    }\\n  });\\n  \\n  // Announce page changes to screen readers\\n  const announcer = document.createElement('div');\\n  announcer.setAttribute('aria-live', 'polite');\\n  announcer.setAttribute('aria-atomic', 'true');\\n  announcer.className = 'sr-only';\\n  document.body.appendChild(announcer);\\n  \\n  // Announce when content changes\\n  function announcePageChange(title) {\\n    announcer.textContent = `Navigated to ${title}`;\\n    setTimeout(() => announcer.textContent = '', 1000);\\n  }\\n  \\n  return { announcePageChange };\\n}\\n\\n// CSS for accessibility\\nconst accessibilityCSS = `\\n.skip-link {\\n  position: absolute;\\n  top: -40px;\\n  left: 6px;\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n  padding: 8px;\\n  text-decoration: none;\\n  border-radius: 0 0 4px 4px;\\n  z-index: 1000;\\n}\\n\\n.skip-link:focus {\\n  top: 0;\\n}\\n\\n.sr-only {\\n  position: absolute;\\n  width: 1px;\\n  height: 1px;\\n  padding: 0;\\n  margin: -1px;\\n  overflow: hidden;\\n  clip: rect(0, 0, 0, 0);\\n  white-space: nowrap;\\n  border: 0;\\n}\\n`;\\n```\\n\\n### Keyboard Navigation Enhancement\\n\\nImprove keyboard navigation throughout the documentation:\\n\\n```javascript\\nfunction enhanceKeyboardNavigation() {\\n  let focusedSearchResult = -1;\\n  \\n  document.addEventListener('keydown', (e) => {\\n    // Search result navigation\\n    if (e.target.classList.contains('search-input')) {\\n      const results = document.querySelectorAll('.search-result');\\n      \\n      switch (e.key) {\\n        case 'ArrowDown':\\n          e.preventDefault();\\n          focusedSearchResult = Math.min(focusedSearchResult + 1, results.length - 1);\\n          updateSearchResultFocus(results);\\n          break;\\n          \\n        case 'ArrowUp':\\n          e.preventDefault();\\n          focusedSearchResult = Math.max(focusedSearchResult - 1, -1);\\n          updateSearchResultFocus(results);\\n          break;\\n          \\n        case 'Enter':\\n          if (focusedSearchResult >= 0 && results[focusedSearchResult]) {\\n            e.preventDefault();\\n            results[focusedSearchResult].click();\\n          }\\n          break;\\n          \\n        case 'Escape':\\n          e.target.blur();\\n          document.querySelector('.search-results').style.display = 'none';\\n          break;\\n      }\\n    }\\n    \\n    // Global shortcuts\\n    if (e.ctrlKey || e.metaKey) {\\n      switch (e.key) {\\n        case 'k':\\n          e.preventDefault();\\n          document.querySelector('.search-input').focus();\\n          break;\\n          \\n        case '/':\\n          e.preventDefault();\\n          document.querySelector('.search-input').focus();\\n          break;\\n      }\\n    }\\n  });\\n  \\n  function updateSearchResultFocus(results) {\\n    results.forEach((result, index) => {\\n      result.classList.toggle('focused', index === focusedSearchResult);\\n    });\\n    \\n    if (focusedSearchResult >= 0 && results[focusedSearchResult]) {\\n      results[focusedSearchResult].scrollIntoView({ block: 'nearest' });\\n    }\\n  }\\n}\\n```\\n\\n## Performance Enhancements\\n\\n### Lazy Loading and Code Splitting\\n\\nImplement performance optimizations:\\n\\n```javascript\\nfunction implementLazyLoading() {\\n  // Lazy load heavy components\\n  const observerOptions = {\\n    root: null,\\n    rootMargin: '100px',\\n    threshold: 0.1\\n  };\\n  \\n  const observer = new IntersectionObserver((entries) => {\\n    entries.forEach(entry => {\\n      if (entry.isIntersecting) {\\n        const section = entry.target;\\n        loadSectionAssets(section);\\n        observer.unobserve(section);\\n      }\\n    });\\n  }, observerOptions);\\n  \\n  // Observe content sections for lazy loading\\n  document.querySelectorAll('.content-section').forEach(section => {\\n    observer.observe(section);\\n  });\\n  \\n  function loadSectionAssets(section) {\\n    // Load section-specific assets\\n    const codeBlocks = section.querySelectorAll('pre code');\\n    if (codeBlocks.length > 0) {\\n      loadSyntaxHighlighting(codeBlocks);\\n    }\\n    \\n    const diagrams = section.querySelectorAll('.mermaid');\\n    if (diagrams.length > 0) {\\n      loadMermaidDiagrams(diagrams);\\n    }\\n  }\\n}\\n\\nfunction implementServiceWorker() {\\n  if ('serviceWorker' in navigator) {\\n    const swContent = `\\n      const CACHE_NAME = 'glowdoc-v1';\\n      const urlsToCache = [\\n        '/',\\n        '/index.html'\\n      ];\\n      \\n      self.addEventListener('install', (event) => {\\n        event.waitUntil(\\n          caches.open(CACHE_NAME)\\n            .then((cache) => cache.addAll(urlsToCache))\\n        );\\n      });\\n      \\n      self.addEventListener('fetch', (event) => {\\n        event.respondWith(\\n          caches.match(event.request)\\n            .then((response) => {\\n              return response || fetch(event.request);\\n            })\\n        );\\n      });\\n    `;\\n    \\n    const blob = new Blob([swContent], { type: 'application/javascript' });\\n    const swURL = URL.createObjectURL(blob);\\n    \\n    navigator.serviceWorker.register(swURL)\\n      .then((registration) => {\\n        console.log('ServiceWorker registered:', registration);\\n      })\\n      .catch((error) => {\\n        console.log('ServiceWorker registration failed:', error);\\n      });\\n  }\\n}\\n```\\n\\n## Diagram and Visualization Support\\n\\n### Mermaid Diagrams\\n\\nAdd support for Mermaid diagrams:\\n\\n```javascript\\nfunction initializeMermaid() {\\n  const script = document.createElement('script');\\n  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';\\n  script.onload = function() {\\n    mermaid.initialize({\\n      startOnLoad: false,\\n      theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default',\\n      securityLevel: 'loose'\\n    });\\n    \\n    // Process Mermaid diagrams\\n    document.querySelectorAll('.language-mermaid').forEach(async (element, index) => {\\n      const graphDefinition = element.textContent;\\n      const graphId = `mermaid-graph-${index}`;\\n      \\n      try {\\n        const { svg } = await mermaid.render(graphId, graphDefinition);\\n        const wrapper = document.createElement('div');\\n        wrapper.className = 'mermaid-wrapper';\\n        wrapper.innerHTML = svg;\\n        element.closest('pre').replaceWith(wrapper);\\n      } catch (error) {\\n        console.error('Mermaid rendering error:', error);\\n      }\\n    });\\n  };\\n  document.head.appendChild(script);\\n}\\n\\n// Update Mermaid theme when user changes theme\\nfunction updateMermaidTheme() {\\n  const observer = new MutationObserver((mutations) => {\\n    mutations.forEach((mutation) => {\\n      if (mutation.attributeName === 'data-theme') {\\n        const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default';\\n        if (window.mermaid) {\\n          mermaid.initialize({ theme: newTheme });\\n          // Re-render existing diagrams\\n          document.querySelectorAll('.mermaid-wrapper').forEach(async (wrapper, index) => {\\n            // Re-render logic here\\n          });\\n        }\\n      }\\n    });\\n  });\\n  \\n  observer.observe(document.documentElement, {\\n    attributes: true,\\n    attributeFilter: ['data-theme']\\n  });\\n}\\n```\\n\\n### Chart.js Integration\\n\\nAdd interactive charts and graphs:\\n\\n```javascript\\nfunction initializeCharts() {\\n  const script = document.createElement('script');\\n  script.src = 'https://cdn.jsdelivr.net/npm/chart.js';\\n  script.onload = function() {\\n    document.querySelectorAll('.chart-container').forEach(container => {\\n      const config = JSON.parse(container.dataset.config);\\n      const canvas = document.createElement('canvas');\\n      container.appendChild(canvas);\\n      \\n      new Chart(canvas, {\\n        ...config,\\n        options: {\\n          ...config.options,\\n          responsive: true,\\n          plugins: {\\n            ...config.options?.plugins,\\n            legend: {\\n              ...config.options?.plugins?.legend,\\n              labels: {\\n                color: getComputedStyle(document.documentElement)\\n                  .getPropertyValue('--foreground')\\n              }\\n            }\\n          }\\n        }\\n      });\\n    });\\n  };\\n  document.head.appendChild(script);\\n}\\n```\\n\\n## Plugin Development Guide\\n\\n### Creating Custom Extensions\\n\\nStructure for building your own GlowDoc extensions:\\n\\n```rust\\n// In src/main.rs, add to the generate_javascript() function\\n\\npub fn generate_custom_plugin_javascript() -> String {\\n    r#\\\"\\n    // Custom Plugin Framework\\n    class GlowDocPlugin {\\n        constructor(name, options = {}) {\\n            this.name = name;\\n            this.options = options;\\n            this.hooks = {};\\n            this.initialized = false;\\n        }\\n        \\n        // Register event hooks\\n        on(event, callback) {\\n            if (!this.hooks[event]) {\\n                this.hooks[event] = [];\\n            }\\n            this.hooks[event].push(callback);\\n            return this;\\n        }\\n        \\n        // Trigger event hooks\\n        trigger(event, data) {\\n            if (this.hooks[event]) {\\n                this.hooks[event].forEach(callback => callback(data));\\n            }\\n        }\\n        \\n        // Initialize plugin\\n        init() {\\n            if (this.initialized) return;\\n            this.trigger('beforeInit', this.options);\\n            this.setup();\\n            this.initialized = true;\\n            this.trigger('afterInit', this.options);\\n        }\\n        \\n        // Override in subclasses\\n        setup() {\\n            throw new Error('Plugin must implement setup() method');\\n        }\\n    }\\n    \\n    // Plugin registry\\n    window.GlowDocPlugins = {\\n        plugins: new Map(),\\n        \\n        register(plugin) {\\n            this.plugins.set(plugin.name, plugin);\\n            if (document.readyState === 'loading') {\\n                document.addEventListener('DOMContentLoaded', () => plugin.init());\\n            } else {\\n                plugin.init();\\n            }\\n        },\\n        \\n        get(name) {\\n            return this.plugins.get(name);\\n        }\\n    };\\n    \\n    // Example plugin\\n    class ExamplePlugin extends GlowDocPlugin {\\n        setup() {\\n            this.on('beforeInit', (options) => {\\n                console.log('Example plugin initializing with options:', options);\\n            });\\n            \\n            // Add custom functionality\\n            this.addCustomButton();\\n        }\\n        \\n        addCustomButton() {\\n            const button = document.createElement('button');\\n            button.textContent = 'Custom Action';\\n            button.onclick = () => this.trigger('customAction', 'Hello from plugin!');\\n            document.querySelector('.header-content').appendChild(button);\\n        }\\n    }\\n    \\n    // Auto-register plugins\\n    document.addEventListener('DOMContentLoaded', () => {\\n        // Register built-in plugins\\n        const examplePlugin = new ExamplePlugin('example', { debug: true });\\n        GlowDocPlugins.register(examplePlugin);\\n    });\\n    \\\"#.to_string()\\n}\\n```\\n\\n### Plugin Configuration\\n\\nAllow users to configure plugins through config.yaml:\\n\\n```rust\\n// Add to Config struct in src/main.rs\\n#[derive(Debug, Deserialize, Serialize)]\\nstruct PluginConfig {\\n    name: String,\\n    enabled: bool,\\n    options: HashMap<String, serde_yaml::Value>,\\n}\\n\\n#[derive(Debug, Deserialize, Serialize)]\\nstruct Config {\\n    title: String,\\n    description: String,\\n    navigation: Vec<NavigationSection>,\\n    theme: String,\\n    plugins: Option<Vec<PluginConfig>>,\\n}\\n```\\n\\n## Best Practices for Extensions\\n\\n### Performance Considerations\\n\\n1. **Lazy Loading**: Only load plugins when needed\\n2. **Code Splitting**: Separate plugin code from core functionality\\n3. **Memory Management**: Clean up event listeners and resources\\n4. **Minimal Dependencies**: Keep external dependencies lightweight\\n\\n### Security Guidelines\\n\\n1. **Input Validation**: Sanitize all user inputs\\n2. **Content Security Policy**: Implement CSP headers\\n3. **External Resources**: Use integrity hashes for CDN resources\\n4. **User Data**: Handle user data securely\\n\\n### Accessibility Standards\\n\\n1. **ARIA Support**: Provide proper ARIA attributes\\n2. **Keyboard Navigation**: Ensure all functionality is keyboard accessible\\n3. **Screen Reader Compatibility**: Test with screen readers\\n4. **Color Contrast**: Maintain adequate contrast ratios\\n\\n## Troubleshooting Plugins\\n\\n**Plugin not loading**: Check browser console for JavaScript errors and verify script URLs.\\n\\n**Conflicts between plugins**: Implement proper namespacing and avoid global variable conflicts.\\n\\n**Performance issues**: Profile plugin performance and optimize heavy operations.\\n\\n**Theme compatibility**: Ensure plugins work with all themes and dark mode.\\n\\n**Mobile responsiveness**: Test plugin functionality on mobile devices.\"\n    }\n};\n\n\n        function toggleTheme() {\n            const html = document.documentElement;\n            const currentTheme = html.getAttribute('data-theme');\n            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\n            \n            html.setAttribute('data-theme', newTheme);\n            localStorage.setItem('theme', newTheme);\n        }\n\n        function toggleSidebar() {\n            const sidebar = document.getElementById('sidebar');\n            sidebar.classList.toggle('visible');\n        }\n\n        function toggleSection(sectionId) {\n            const items = document.getElementById(sectionId + '-items');\n            const toggle = event.target.closest('.nav-section-title').querySelector('.nav-section-toggle');\n            \n            items.classList.toggle('collapsed');\n            toggle.classList.toggle('collapsed');\n            event.target.closest('.nav-section-title').classList.toggle('collapsed');\n        }\n\n        function toggleNestedSection(sectionId) {\n            const items = document.getElementById(sectionId + '-items');\n            const toggle = event.target.closest('.nav-folder-title').querySelector('.nav-folder-toggle');\n            \n            items.classList.toggle('collapsed');\n            toggle.classList.toggle('collapsed');\n        }\n\n        function showHomepage() {\n            document.getElementById('homepage').classList.add('active');\n            document.getElementById('docs-layout').classList.remove('active');\n            \n            // Clear table of contents when showing homepage\n            clearTableOfContents();\n            \n            // Update URL to homepage\n            history.pushState({ page: 'homepage' }, '', window.location.pathname);\n        }\n\n        function showDocs() {\n            document.getElementById('homepage').classList.remove('active');\n            document.getElementById('docs-layout').classList.add('active');\n        }\n\n        function showContent(contentId, updateUrl = true, headerId = null) {\n            console.log('showContent called with contentId:', contentId, 'headerId:', headerId);\n            \n            // Switch to docs view first\n            showDocs();\n            \n            // Hide all content sections\n            const allSections = document.querySelectorAll('.content-section');\n            console.log('Found sections:', allSections.length);\n            allSections.forEach(section => {\n                section.classList.remove('active');\n            });\n            \n            // Show selected content using the combined ID\n            const targetContent = document.getElementById(contentId);\n            console.log('Target content element:', targetContent);\n            if (targetContent) {\n                targetContent.classList.add('active');\n                console.log('Successfully activated content:', contentId);\n                \n                // Generate table of contents for this page\n                generateTableOfContents(targetContent);\n                \n                // Scroll to header if specified\n                if (headerId) {\n                    setTimeout(() => {\n                        const headerElement = document.getElementById(headerId);\n                        if (headerElement) {\n                            headerElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                            updateTocActiveState(headerId);\n                        }\n                    }, 100);\n                } else {\n                    // Update TOC active state based on scroll position\n                    updateTocActiveState();\n                }\n                \n                // Update URL if requested\n                if (updateUrl) {\n                    const newUrl = headerId ? \n                        window.location.pathname + '#' + contentId + '#' + headerId :\n                        window.location.pathname + '#' + contentId;\n                    history.pushState({ contentId: contentId, headerId: headerId }, '', newUrl);\n                }\n            } else {\n                console.error('Content not found for ID:', contentId);\n                // List all available content sections for debugging\n                const allContentIds = Array.from(allSections).map(s => s.id);\n                console.log('Available content IDs:', allContentIds);\n                // Clear TOC if no content found\n                clearTableOfContents();\n            }\n            \n            // Update active nav link\n            document.querySelectorAll('.nav-link').forEach(link => {\n                link.classList.remove('active');\n            });\n            \n            // Find and activate the correct nav link using the combined content ID\n            const navLinks = document.querySelectorAll('.nav-link');\n            for (const link of navLinks) {\n                if (link.getAttribute('data-content-id') === contentId) {\n                    link.classList.add('active');\n                    break;\n                }\n            }\n            \n            // Close sidebar on mobile\n            if (window.innerWidth <= 768) {\n                document.getElementById('sidebar').classList.remove('visible');\n            }\n            \n        }\n\n        function generateTableOfContents(contentElement) {\n            const tocNav = document.getElementById('toc-nav');\n            const tocContainer = document.getElementById('table-of-contents');\n            \n            if (!contentElement) {\n                clearTableOfContents();\n                return;\n            }\n            \n            // Find all headers in the content\n            const headers = contentElement.querySelectorAll('h1, h2, h3, h4, h5, h6');\n            \n            if (headers.length === 0) {\n                clearTableOfContents();\n                return;\n            }\n            \n            // Show the TOC container\n            tocContainer.style.display = 'block';\n            \n            // Set TOC as collapsed by default on mobile\n            if (window.innerWidth <= 768) {\n                tocContainer.classList.add('collapsed');\n            }\n            \n            // Build the TOC structure\n            let tocHtml = '<ul>';\n            headers.forEach(header => {\n                const level = parseInt(header.tagName.substring(1));\n                const text = header.textContent;\n                const id = header.id;\n                \n                if (id) {\n                    const listItem = document.createElement('li');\n                    listItem.className = 'toc-level-' + level;\n                    \n                    const link = document.createElement('a');\n                    link.href = '#' + id;\n                    link.className = 'toc-link';\n                    link.setAttribute('data-header-id', id);\n                    link.textContent = text;\n                    \n                    listItem.appendChild(link);\n                    tocHtml += listItem.outerHTML;\n                }\n            });\n            tocHtml += '</ul>';\n            \n            tocNav.innerHTML = tocHtml;\n            \n            // Add click handlers for TOC links\n            const tocLinks = tocNav.querySelectorAll('.toc-link');\n            tocLinks.forEach(link => {\n                link.addEventListener('click', function(e) {\n                    e.preventDefault();\n                    const headerId = this.getAttribute('data-header-id');\n                    const headerElement = document.getElementById(headerId);\n                    if (headerElement) {\n                        headerElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                        updateTocActiveState(headerId);\n                        \n                        // Update URL with header\n                        const currentContent = document.querySelector('.content-section.active');\n                        if (currentContent) {\n                            const contentId = currentContent.id;\n                            const newUrl = window.location.pathname + '#' + contentId + '#' + headerId;\n                            history.pushState({ contentId: contentId, headerId: headerId }, '', newUrl);\n                        }\n                    }\n                });\n            });\n            \n            // Set up scroll spy for TOC\n            setupScrollSpy();\n        }\n\n        function clearTableOfContents() {\n            const tocNav = document.getElementById('toc-nav');\n            const tocContainer = document.getElementById('table-of-contents');\n            \n            if (tocNav) {\n                tocNav.innerHTML = '';\n            }\n            \n            if (tocContainer) {\n                tocContainer.style.display = 'none';\n            }\n        }\n\n        function updateTocActiveState(activeHeaderId) {\n            const tocLinks = document.querySelectorAll('.toc-link');\n            tocLinks.forEach(link => {\n                link.classList.remove('active');\n                if (activeHeaderId && link.getAttribute('data-header-id') === activeHeaderId) {\n                    link.classList.add('active');\n                }\n            });\n        }\n\n        function setupScrollSpy() {\n            const headers = document.querySelectorAll('.content-section.active h1, .content-section.active h2, .content-section.active h3, .content-section.active h4, .content-section.active h5, .content-section.active h6');\n            \n            if (headers.length === 0) return;\n            \n            // Clear any existing scroll spy\n            if (window.currentScrollObserver) {\n                window.currentScrollObserver.disconnect();\n            }\n            \n            const observer = new IntersectionObserver((entries) => {\n                let activeHeader = null;\n                let maxRatio = 0;\n                \n                // Find the header with the highest intersection ratio\n                entries.forEach(entry => {\n                    if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {\n                        maxRatio = entry.intersectionRatio;\n                        activeHeader = entry.target.id;\n                    }\n                });\n                \n                // If no header is intersecting, find the one closest to the top\n                if (!activeHeader) {\n                    let closestHeader = null;\n                    let closestDistance = Infinity;\n                    \n                    headers.forEach(header => {\n                        const rect = header.getBoundingClientRect();\n                        const distance = Math.abs(rect.top - 100); // Account for sticky header\n                        if (distance < closestDistance && rect.top <= window.innerHeight / 2) {\n                            closestDistance = distance;\n                            closestHeader = header.id;\n                        }\n                    });\n                    \n                    activeHeader = closestHeader;\n                }\n                \n                if (activeHeader) {\n                    updateTocActiveState(activeHeader);\n                    \n                    // Update URL with current section and header\n                    const currentContent = document.querySelector('.content-section.active');\n                    if (currentContent) {\n                        const contentId = currentContent.id;\n                        const newUrl = window.location.pathname + '#' + contentId + '#' + activeHeader;\n                        \n                        // Use replaceState to avoid creating browser history entries for scroll events\n                        history.replaceState({ contentId: contentId, headerId: activeHeader }, '', newUrl);\n                    }\n                    \n                    // Ensure active TOC item is visible in mobile collapsed mode\n                    const activeTocLink = document.querySelector('.toc-link.active');\n                    if (activeTocLink) {\n                        const tocContainer = document.getElementById('table-of-contents');\n                        if (tocContainer && !tocContainer.classList.contains('collapsed')) {\n                            const tocNav = document.getElementById('toc-nav');\n                            if (tocNav) {\n                                const navRect = tocNav.getBoundingClientRect();\n                                const linkRect = activeTocLink.getBoundingClientRect();\n                                \n                                if (linkRect.bottom > navRect.bottom || linkRect.top < navRect.top) {\n                                    activeTocLink.scrollIntoView({ \n                                        behavior: 'smooth', \n                                        block: 'nearest',\n                                        inline: 'nearest'\n                                    });\n                                }\n                            }\n                        }\n                    }\n                }\n            }, {\n                rootMargin: '-80px 0px -50% 0px',\n                threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]\n            });\n            \n            headers.forEach(header => {\n                if (header.id) {\n                    observer.observe(header);\n                }\n            });\n            \n            window.currentScrollObserver = observer;\n        }\n\n\n        // Load saved theme or default to light mode\n        const savedTheme = localStorage.getItem('theme') || 'light';\n        document.documentElement.setAttribute('data-theme', savedTheme);\n\n        // Respect system preference if no saved theme\n        if (!localStorage.getItem('theme')) {\n            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n            if (prefersDark) {\n                document.documentElement.setAttribute('data-theme', 'dark');\n            }\n        }\n\n        function performSearch() {\n            const searchInput = document.getElementById('search-input');\n            const searchTerm = searchInput.value.toLowerCase().trim();\n            const searchResults = document.getElementById('search-results');\n            const searchResultsList = document.getElementById('search-results-list');\n            const navigationContainer = document.getElementById('navigation-container');\n            \n            if (searchTerm === '') {\n                // Show navigation, hide search results\n                searchResults.style.display = 'none';\n                navigationContainer.style.display = 'block';\n                return;\n            }\n            \n            // Hide navigation, show search results\n            navigationContainer.style.display = 'none';\n            searchResults.style.display = 'block';\n            \n            // Search through the index\n            const results = [];\n            \n            for (const [pageId, pageData] of Object.entries(searchIndex)) {\n                const titleMatch = pageData.title.toLowerCase().includes(searchTerm);\n                const sectionMatch = pageData.section.toLowerCase().includes(searchTerm);\n                const contentMatch = pageData.content.toLowerCase().includes(searchTerm);\n                \n                if (titleMatch || sectionMatch || contentMatch) {\n                    // Find context around the match in content\n                    let snippet = '';\n                    if (contentMatch) {\n                        const contentLower = pageData.content.toLowerCase();\n                        const matchIndex = contentLower.indexOf(searchTerm);\n                        const start = Math.max(0, matchIndex - 60);\n                        const end = Math.min(pageData.content.length, matchIndex + searchTerm.length + 60);\n                        snippet = pageData.content.substring(start, end);\n                        \n                        // Add ellipsis if we're in the middle of the content\n                        if (start > 0) snippet = '...' + snippet;\n                        if (end < pageData.content.length) snippet = snippet + '...';\n                        \n                        // Highlight the search term\n                        const regex = new RegExp(`(${searchTerm})`, 'gi');\n                        snippet = snippet.replace(regex, '<mark>$1</mark>');\n                    }\n                    \n                    results.push({\n                        id: pageId,\n                        title: pageData.title,\n                        section: pageData.section,\n                        snippet: snippet,\n                        titleMatch: titleMatch,\n                        sectionMatch: sectionMatch,\n                        contentMatch: contentMatch\n                    });\n                }\n            }\n            \n            // Sort results by relevance (title matches first, then section matches, then content matches)\n            results.sort((a, b) => {\n                if (a.titleMatch && !b.titleMatch) return -1;\n                if (!a.titleMatch && b.titleMatch) return 1;\n                if (a.sectionMatch && !b.sectionMatch) return -1;\n                if (!a.sectionMatch && b.sectionMatch) return 1;\n                return 0;\n            });\n            \n            // Display results\n            if (results.length === 0) {\n                searchResultsList.innerHTML = '<div class=\"no-results\">No results found</div>';\n            } else {\n                let resultsHtml = '';\n                results.forEach(result => {\n                    const resultDiv = document.createElement('div');\n                    resultDiv.className = 'search-result';\n                    resultDiv.onclick = () => showContentFromSearch(result.id);\n                    \n                    const titleDiv = document.createElement('div');\n                    titleDiv.className = 'search-result-title';\n                    titleDiv.textContent = result.title;\n                    resultDiv.appendChild(titleDiv);\n                    \n                    const sectionDiv = document.createElement('div');\n                    sectionDiv.className = 'search-result-section';\n                    sectionDiv.textContent = result.section;\n                    resultDiv.appendChild(sectionDiv);\n                    \n                    if (result.snippet) {\n                        const snippetDiv = document.createElement('div');\n                        snippetDiv.className = 'search-result-snippet';\n                        snippetDiv.innerHTML = result.snippet;\n                        resultDiv.appendChild(snippetDiv);\n                    }\n                    \n                    resultsHtml += resultDiv.outerHTML;\n                });\n                \n                searchResultsList.innerHTML = resultsHtml;\n            }\n        }\n        \n        function showContentFromSearch(contentId) {\n            // Clear search and show navigation\n            document.getElementById('search-input').value = '';\n            document.getElementById('search-results').style.display = 'none';\n            document.getElementById('navigation-container').style.display = 'block';\n            \n            // Show the content directly using the combined ID\n            showContent(contentId);\n        }\n\n        // Handle browser back/forward navigation\n        window.addEventListener('popstate', function(event) {\n            if (event.state && event.state.contentId) {\n                // Show content without updating URL (to avoid infinite loop)\n                showContent(event.state.contentId, false);\n            } else if (event.state && event.state.page === 'homepage') {\n                showHomepage();\n            } else {\n                // Check URL hash for content ID\n                loadFromUrl();\n            }\n        });\n\n        // Load content based on URL on page load\n        function loadFromUrl() {\n            const hash = window.location.hash.substring(1); // Remove the # symbol\n            \n            if (hash) {\n                // Decode URL-encoded hash (handles %23 -> #)\n                const decodedHash = decodeURIComponent(hash);\n                \n                // Check if this is a header link (contains # in the decoded version)\n                const hashParts = decodedHash.split('#');\n                if (hashParts.length === 2) {\n                    const [contentId, headerId] = hashParts;\n                    if (document.getElementById(contentId)) {\n                        showContent(contentId, false, headerId);\n                        return;\n                    }\n                } else {\n                    // Regular content ID\n                    if (document.getElementById(decodedHash)) {\n                        showContent(decodedHash, false);\n                        return;\n                    }\n                }\n                \n                // If hash doesn't match any content, show homepage\n                showHomepage();\n            } else {\n                // No hash - show homepage\n                showHomepage();\n            }\n        }\n\n        // Handle navigation link clicks\n        document.addEventListener('click', function(event) {\n            const navLink = event.target.closest('.nav-link[data-content-id]');\n            \n            if (navLink) {\n                event.preventDefault();\n                const contentId = navLink.getAttribute('data-content-id');\n                showContent(contentId);\n            }\n        });\n\n        // Handle TOC mobile toggle\n        document.addEventListener('click', function(event) {\n            const tocHeader = event.target.closest('.toc-header');\n            \n            if (tocHeader && window.innerWidth <= 768) {\n                const tocContainer = tocHeader.closest('.table-of-contents');\n                if (tocContainer) {\n                    tocContainer.classList.toggle('collapsed');\n                }\n            }\n        });\n\n        // Load content on initial page load\n        document.addEventListener('DOMContentLoaded', function() {\n            loadFromUrl();\n        });\n\n        // Close sidebar when clicking outside on mobile\n        document.addEventListener('click', function(event) {\n            const sidebar = document.getElementById('sidebar');\n            const mobileToggle = document.querySelector('.mobile-menu-toggle');\n            \n            if (window.innerWidth <= 768 && \n                sidebar.classList.contains('visible') && \n                !sidebar.contains(event.target) && \n                !mobileToggle.contains(event.target)) {\n                sidebar.classList.remove('visible');\n            }\n        });\n    </script>\n</body>\n</html>"
[INFO] [stdout]  right: "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>GlowDoc - Modern Documentation</title>\n    <meta name=\"description\" content=\"modern docs for the modern world\">\n    <link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"favicon.ico\">\n    <style>\n        :root {\n            --background: 310 100% 98%;\n            --foreground: 270 15% 15%;\n            --card: 310 100% 98%;\n            --card-foreground: 270 15% 15%;\n            --popover: 310 100% 98%;\n            --popover-foreground: 270 15% 15%;\n            --primary: 270 91% 65%;\n            --primary-foreground: 310 100% 98%;\n            --secondary: 270 20% 92%;\n            --secondary-foreground: 270 15% 15%;\n            --muted: 270 20% 92%;\n            --muted-foreground: 270 10% 55%;\n            --accent: 270 20% 92%;\n            --accent-foreground: 270 15% 15%;\n            --destructive: 0 84.2% 60.2%;\n            --destructive-foreground: 310 100% 98%;\n            --border: 270 20% 88%;\n            --input: 270 20% 88%;\n            --ring: 270 91% 65%;\n            --link: 50 100% 40%;\n            --radius: 0.5rem;\n        }\n\n        [data-theme=\"dark\"] {\n            --background: 270 20% 12%;\n            --foreground: 310 40% 92%;\n            --card: 270 20% 12%;\n            --card-foreground: 310 40% 92%;\n            --popover: 270 20% 12%;\n            --popover-foreground: 310 40% 92%;\n            --primary: 270 91% 75%;\n            --primary-foreground: 270 20% 12%;\n            --secondary: 270 15% 20%;\n            --secondary-foreground: 310 40% 92%;\n            --muted: 270 15% 20%;\n            --muted-foreground: 270 10% 65%;\n            --accent: 270 15% 20%;\n            --accent-foreground: 310 40% 92%;\n            --destructive: 0 62.8% 50%;\n            --destructive-foreground: 310 40% 92%;\n            --border: 270 15% 20%;\n            --input: 270 15% 20%;\n            --ring: 270 91% 75%;\n            --link: 50 100% 60%;\n        }\n        * {\n            border-color: hsl(var(--border));\n        }\n\n        body {\n            background-color: hsl(var(--background));\n            color: hsl(var(--foreground));\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            line-height: 1.6;\n            margin: 0;\n            padding: 0;\n            transition: all 0.3s ease;\n        }\n\n        .content-section a, .homepage a {\n            color: hsl(var(--link));\n            text-decoration: none;\n            transition: color 0.2s ease;\n        }\n\n        .content-section a:hover, .homepage a:hover {\n            color: hsl(var(--link) / 0.8);\n            text-decoration: underline;\n        }\n\n        .content-section a:visited, .homepage a:visited {\n            color: hsl(var(--link) / 0.9);\n        }\n\n        .container {\n            max-width: 95%;\n            margin: 0 auto;\n            padding: 0 2rem;\n        }\n\n        header {\n            border-bottom: 1px solid hsl(var(--border));\n            padding: 1rem 0;\n            position: sticky;\n            top: 0;\n            background-color: hsl(var(--background) / 0.95);\n            backdrop-filter: blur(10px);\n            z-index: 50;\n        }\n\n        .header-content {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n\n        .logo {\n            font-size: 1.5rem;\n            font-weight: 700;\n            color: hsl(var(--primary));\n            text-decoration: none;\n        }\n\n        .nav {\n            display: flex;\n            gap: 1rem;\n            align-items: center;\n        }\n\n        .nav a {\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            font-weight: 500;\n            transition: color 0.2s;\n        }\n\n        .nav a:hover {\n            color: hsl(var(--foreground));\n        }\n\n        .mobile-menu-toggle {\n            display: none;\n            background: none;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            padding: 0.5rem;\n            cursor: pointer;\n            color: hsl(var(--foreground));\n            transition: all 0.2s;\n        }\n\n        .mobile-menu-toggle:hover {\n            background-color: hsl(var(--accent));\n        }\n\n        .theme-toggle {\n            background: none;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            padding: 0.5rem;\n            cursor: pointer;\n            color: hsl(var(--foreground));\n            transition: all 0.2s;\n        }\n\n        .theme-toggle:hover {\n            background-color: hsl(var(--accent));\n        }\n\n        .social-links {\n            display: flex;\n            gap: 0.5rem;\n            align-items: center;\n            margin-left: 0;\n        }\n\n        .social-link {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 2rem;\n            height: 2rem;\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            border-radius: 0.375rem;\n            transition: all 0.2s ease;\n        }\n\n        .social-link:hover {\n            color: hsl(var(--foreground));\n            background-color: hsl(var(--accent));\n        }\n\n        .social-link svg {\n            width: 16px;\n            height: 16px;\n        }\n\n        .homepage {\n            display: none;\n            width: 100%;\n        }\n\n        .homepage.active {\n            display: block;\n        }\n\n        .homepage-content {\n            max-width: 800px;\n            margin: 0 auto;\n            padding: 4rem 2rem;\n        }\n\n        .homepage h1 {\n            font-size: 3rem;\n            font-weight: 800;\n            margin-bottom: 1rem;\n            background: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary) / 0.7));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n            text-align: center;\n        }\n\n        .homepage h2 {\n            font-size: 1.75rem;\n            font-weight: 600;\n            margin-top: 3rem;\n            margin-bottom: 1rem;\n            color: hsl(var(--foreground));\n        }\n\n        .homepage p {\n            font-size: 1.125rem;\n            margin-bottom: 1.5rem;\n            color: hsl(var(--muted-foreground));\n            line-height: 1.7;\n        }\n\n        .homepage ul {\n            margin-bottom: 1.5rem;\n            padding-left: 0;\n            list-style: none;\n        }\n\n        .homepage li {\n            margin-bottom: 1rem;\n            padding-left: 0;\n            color: hsl(var(--muted-foreground));\n            line-height: 1.6;\n        }\n\n        .homepage li:before {\n            content: \"✨\";\n            margin-right: 0.75rem;\n        }\n\n        .homepage pre {\n            background-color: hsl(var(--muted));\n            border-radius: var(--radius);\n            padding: 1.5rem;\n            overflow-x: auto;\n            border: 1px solid hsl(var(--border));\n            margin: 2rem 0;\n        }\n\n        .homepage code {\n            background-color: hsl(var(--muted));\n            padding: 0.2rem 0.4rem;\n            border-radius: calc(var(--radius) - 2px);\n            font-size: 0.875rem;\n            border: 1px solid hsl(var(--border));\n        }\n\n        .homepage pre code {\n            background: none;\n            padding: 0;\n            border: none;\n            font-size: 0.875rem;\n        }\n\n        .homepage strong {\n            color: hsl(var(--foreground));\n            font-weight: 600;\n        }\n\n        .layout {\n            display: none;\n            min-height: calc(100vh - 80px);\n        }\n\n        .layout.active {\n            display: flex;\n        }\n\n        .sidebar {\n            width: 280px;\n            background-color: hsl(var(--card));\n            border-right: 1px solid hsl(var(--border));\n            padding: 1rem 0;\n            position: sticky;\n            top: 80px;\n            height: calc(100vh - 80px);\n            overflow-y: auto;\n            transition: transform 0.3s ease;\n        }\n\n        .sidebar.hidden {\n            transform: translateX(-100%);\n        }\n\n        .sidebar-nav {\n            padding: 0 1rem;\n        }\n\n        .search-container {\n            position: relative;\n            margin-bottom: 1.5rem;\n        }\n\n        .search-input {\n            width: 100%;\n            padding: 0.75rem 2.5rem 0.75rem 1rem;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            background-color: hsl(var(--background));\n            color: hsl(var(--foreground));\n            font-size: 0.875rem;\n            transition: all 0.2s;\n            box-sizing: border-box;\n        }\n\n        .search-input:focus {\n            outline: none;\n            border-color: hsl(var(--primary));\n            box-shadow: 0 0 0 2px hsl(var(--primary) / 0.1);\n        }\n\n        .search-input::placeholder {\n            color: hsl(var(--muted-foreground));\n        }\n\n        .search-icon {\n            position: absolute;\n            right: 0.75rem;\n            top: 50%;\n            transform: translateY(-50%);\n            color: hsl(var(--muted-foreground));\n            pointer-events: none;\n        }\n\n        .search-results {\n            margin-bottom: 1.5rem;\n        }\n\n        .search-results-header {\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            margin-bottom: 0.75rem;\n            font-size: 0.875rem;\n            text-transform: uppercase;\n            letter-spacing: 0.025em;\n            border-bottom: 1px solid hsl(var(--border));\n            padding-bottom: 0.5rem;\n        }\n\n        .search-result {\n            padding: 0.75rem;\n            margin-bottom: 0.5rem;\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            cursor: pointer;\n            transition: all 0.2s;\n            background-color: hsl(var(--card));\n        }\n\n        .search-result:hover {\n            background-color: hsl(var(--accent));\n            border-color: hsl(var(--primary));\n        }\n\n        .search-result-title {\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            margin-bottom: 0.25rem;\n            font-size: 0.875rem;\n        }\n\n        .search-result-section {\n            color: hsl(var(--muted-foreground));\n            font-size: 0.75rem;\n            margin-bottom: 0.5rem;\n        }\n\n        .search-result-snippet {\n            color: hsl(var(--muted-foreground));\n            font-size: 0.8rem;\n            line-height: 1.4;\n            overflow: hidden;\n            display: -webkit-box;\n            -webkit-line-clamp: 2;\n            -webkit-box-orient: vertical;\n        }\n\n        .search-result-snippet mark {\n            background-color: hsl(var(--primary) / 0.2);\n            color: hsl(var(--primary));\n            padding: 0.1rem 0.2rem;\n            border-radius: 2px;\n        }\n\n        .no-results {\n            text-align: center;\n            color: hsl(var(--muted-foreground));\n            padding: 2rem;\n            font-style: italic;\n        }\n\n        .nav-section {\n            margin-bottom: 1.5rem;\n        }\n\n        .nav-section-title {\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            margin-bottom: 0.5rem;\n            font-size: 0.875rem;\n            text-transform: uppercase;\n            letter-spacing: 0.025em;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            cursor: pointer;\n            padding: 0.5rem;\n            border-radius: var(--radius);\n            transition: all 0.2s;\n        }\n\n        .nav-section-title:hover {\n            background-color: hsl(var(--accent));\n        }\n\n        .nav-section-title.collapsed {\n            margin-bottom: 0;\n        }\n\n        .nav-section-toggle {\n            transition: transform 0.2s;\n        }\n\n        .nav-section-toggle.collapsed {\n            transform: rotate(-90deg);\n        }\n\n        .nav-items {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n            transition: all 0.3s ease;\n        }\n\n        .nav-items.collapsed {\n            opacity: 0;\n            max-height: 0;\n            overflow: hidden;\n        }\n\n        .nav-item {\n            margin-bottom: 0.25rem;\n        }\n\n        .nav-link {\n            display: block;\n            padding: 0.5rem 0.75rem;\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            border-radius: var(--radius);\n            transition: all 0.2s;\n            font-size: 0.875rem;\n            border-left: 2px solid transparent;\n        }\n\n        .nav-link:hover {\n            background-color: hsl(var(--accent));\n            color: hsl(var(--foreground));\n            border-left-color: hsl(var(--primary));\n        }\n\n        .nav-link.active {\n            background-color: hsl(var(--primary) / 0.1);\n            color: hsl(var(--primary));\n            border-left-color: hsl(var(--primary));\n            font-weight: 500;\n        }\n\n        .nav-folder {\n            margin-bottom: 0.25rem;\n        }\n\n        .nav-folder-title {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            padding: 0.4rem 0.75rem;\n            color: hsl(var(--muted-foreground));\n            cursor: pointer;\n            border-radius: var(--radius);\n            transition: all 0.2s;\n            font-size: 0.875rem;\n            font-weight: 500;\n            background-color: hsl(var(--muted) / 0.3);\n        }\n\n        .nav-folder-title:hover {\n            background-color: hsl(var(--accent));\n            color: hsl(var(--foreground));\n        }\n\n        .nav-folder-toggle {\n            transition: transform 0.2s;\n            margin-left: 0.5rem;\n        }\n\n        .nav-folder-toggle.collapsed {\n            transform: rotate(-90deg);\n        }\n\n        .nav-nested-items {\n            list-style: none;\n            padding: 0;\n            margin: 0.5rem 0 0 1rem;\n            border-left: 1px solid hsl(var(--border));\n            transition: all 0.3s ease;\n        }\n\n        .nav-nested-items.collapsed {\n            opacity: 0;\n            max-height: 0;\n            overflow: hidden;\n            margin-top: 0;\n        }\n\n        .nav-nested-items .nav-item {\n            margin-bottom: 0.2rem;\n        }\n\n        .nav-nested-items .nav-link {\n            margin-left: 0.5rem;\n            padding: 0.4rem 0.5rem;\n            font-size: 0.8rem;\n            border-left-width: 1px;\n        }\n\n        .nav-nested-items .nav-folder-title {\n            margin-left: 0.5rem;\n            padding: 0.35rem 0.5rem;\n            font-size: 0.8rem;\n            background-color: hsl(var(--muted) / 0.2);\n        }\n\n        .content-wrapper {\n            display: flex;\n            max-width: none;\n            width: 100%;\n            gap: 0;\n            margin-left: 1rem;\n        }\n\n        .content-area {\n            flex: 1;\n            max-width: none;\n            min-width: 0;\n            overflow-y: auto;\n            height: 100%;\n            padding-right: 310px;\n        }\n\n        .table-of-contents {\n            width: 250px;\n            flex-shrink: 0;\n            position: fixed;\n            top: calc(80px + 2rem);\n            right: 0.5rem;\n            height: fit-content;\n            max-height: calc(100vh - 80px - 10rem);\n            overflow-y: auto;\n            background-color: hsl(var(--card));\n            border: 1px solid hsl(var(--border));\n            border-radius: var(--radius);\n            padding: 1rem;\n            z-index: 10;\n        }\n\n        .toc-header {\n            margin-bottom: 1rem;\n            padding-bottom: 0.5rem;\n            border-bottom: 1px solid hsl(var(--border));\n        }\n\n        .toc-header h3 {\n            margin: 0;\n            font-size: 0.875rem;\n            font-weight: 600;\n            color: hsl(var(--foreground));\n            text-transform: uppercase;\n            letter-spacing: 0.025em;\n        }\n\n        .toc-nav {\n            font-size: 0.875rem;\n        }\n\n        .toc-nav ul {\n            list-style: none;\n            padding: 0;\n            margin: 0;\n        }\n\n        .toc-nav li {\n            margin-bottom: 0.25rem;\n        }\n\n        .toc-nav a {\n            display: block;\n            padding: 0.25rem 0.5rem;\n            color: hsl(var(--muted-foreground));\n            text-decoration: none;\n            border-radius: calc(var(--radius) - 2px);\n            transition: all 0.2s;\n            font-size: 0.75rem;\n            line-height: 1.4;\n            border-left: 2px solid transparent;\n        }\n\n        .toc-nav a:hover {\n            background-color: hsl(var(--accent));\n            color: hsl(var(--foreground));\n            border-left-color: hsl(var(--primary) / 0.5);\n        }\n\n        .toc-nav a.active {\n            background-color: hsl(var(--primary) / 0.1);\n            color: hsl(var(--primary));\n            border-left-color: hsl(var(--primary));\n            font-weight: 500;\n        }\n\n        .toc-level-1 {\n            margin-left: 0;\n        }\n\n        .toc-level-2 {\n            margin-left: 0;\n        }\n\n        .toc-level-3 {\n            margin-left: 1rem;\n        }\n\n        .toc-level-4 {\n            margin-left: 1.5rem;\n        }\n\n        .toc-level-5 {\n            margin-left: 2rem;\n        }\n\n        .toc-level-6 {\n            margin-left: 2.5rem;\n        }\n\n        .toc-level-3 a,\n        .toc-level-4 a,\n        .toc-level-5 a,\n        .toc-level-6 a {\n            font-size: 0.7rem;\n            padding: 0.2rem 0.4rem;\n        }\n\n        .main-content {\n            flex: 1;\n            padding: 0;\n            overflow-y: auto;\n            display: flex;\n            justify-content: center;\n        }\n\n        .content-section {\n            display: none;\n            width: 100%;\n        }\n\n        .content-section.active {\n            display: block;\n        }\n\n        .content-section h1 {\n            font-size: 2.5rem;\n            font-weight: 700;\n            margin-bottom: 1rem;\n            color: hsl(var(--foreground));\n        }\n\n        .content-section h2 {\n            font-size: 1.75rem;\n            font-weight: 600;\n            margin-top: 2rem;\n            margin-bottom: 1rem;\n            color: hsl(var(--foreground));\n        }\n\n        .content-section p {\n            margin-bottom: 1rem;\n            color: hsl(var(--muted-foreground));\n        }\n\n        .content-section ul {\n            margin-bottom: 1rem;\n            padding-left: 1.5rem;\n        }\n\n        .content-section li {\n            margin-bottom: 0.5rem;\n            color: hsl(var(--muted-foreground));\n        }\n\n        .content-section pre {\n            background-color: hsl(var(--muted));\n            border-radius: var(--radius);\n            padding: 1rem;\n            overflow-x: auto;\n            border: 1px solid hsl(var(--border));\n            margin-bottom: 1rem;\n        }\n\n        .content-section code {\n            background-color: hsl(var(--muted));\n            padding: 0.2rem 0.4rem;\n            border-radius: calc(var(--radius) - 2px);\n            font-size: 0.875rem;\n            border: 1px solid hsl(var(--border));\n        }\n\n        .content-section pre code {\n            background: none;\n            padding: 0;\n            border: none;\n            font-size: 0.875rem;\n        }\n\n        footer {\n            border-top: 1px solid hsl(var(--border));\n            padding: 1rem 0;\n            text-align: center;\n            color: hsl(var(--muted-foreground));\n        }\n        @media (max-width: 768px) {\n            .nav {\n                gap: 1rem;\n            }\n\n            .mobile-menu-toggle {\n                display: block;\n            }\n\n            .layout {\n                flex-direction: column;\n            }\n\n            .sidebar {\n                position: fixed;\n                top: 80px;\n                left: 0;\n                width: 100%;\n                height: calc(100vh - 80px);\n                z-index: 40;\n                background-color: hsl(var(--background));\n                border-right: none;\n                border-bottom: 1px solid hsl(var(--border));\n                transform: translateX(-100%);\n            }\n\n            .sidebar.visible {\n                transform: translateX(0);\n            }\n\n            // .main-content {\n            //     padding: 1rem;\n            // }\n\n            .content-wrapper {\n                flex-direction: column;\n                gap-top: 1rem;\n                margin: 1rem;\n            }\n\n            .table-of-contents {\n                position: static;\n                top: auto;\n                right: auto;\n                width: auto;\n                max-height: 40vh;\n                order: -1;\n                // margin-bottom: 1rem;\n                margin-top: 0;\n                z-index: 20;\n            }\n\n            .toc-header {\n                cursor: pointer;\n                user-select: none;\n                display: flex;\n                justify-content: space-between;\n                align-items: center;\n            }\n\n            .toc-header::after {\n                content: '▼';\n                font-size: 0.75rem;\n                transition: transform 0.2s ease;\n            }\n\n            .table-of-contents.collapsed .toc-header::after {\n                transform: rotate(-90deg);\n            }\n\n            .table-of-contents.collapsed .toc-nav {\n                display: none;\n            }\n\n            .content-area {\n                max-width: none;\n                padding-right: 1rem;\n                padding-left: 1rem;\n            }\n\n            .social-links {\n                margin-left: 0;\n                gap: 0.25rem;\n            }\n\n            .social-link {\n                width: 1.75rem;\n                height: 1.75rem;\n            }\n\n            .social-link svg {\n                width: 14px;\n                height: 14px;\n            }\n        }\n    </style>\n</head>\n<body>\n    <header>\n        <div class=\"container\">\n            <div class=\"header-content\">\n                <a href=\"#\" class=\"logo\" onclick=\"showHomepage()\">GlowDoc</a>\n                <nav class=\"nav\">\n                    <button class=\"mobile-menu-toggle\" onclick=\"toggleSidebar()\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"/>\n                            <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"/>\n                            <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"/>\n                        </svg>\n                    </button>\n                    <a href=\"#\" onclick=\"showHomepage()\">Home</a>\n                    <a href=\"#introduction/what-is-glowdoc\">Docs</a>\n                    <button class=\"theme-toggle\" onclick=\"toggleTheme()\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <circle cx=\"12\" cy=\"12\" r=\"5\"/>\n                            <path d=\"M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42\"/>\n                        </svg>\n                    </button>\n                    <div class=\"social-links\">\n                    <a href=\"https://github.com/paradise-runner\" class=\"social-link\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"GitHub\">\n                        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                            <path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"/>\n                        </svg>\n                    </a></div>\n                </nav>\n            </div>\n        </div>\n    </header>\n\n    <div class=\"homepage active\" id=\"homepage\">\n        <div class=\"homepage-content\">\n<h1>✨ Welcome to GlowDoc! ✨</h1>\n<p>Create stunning documentation sites with modern design principles. GlowDoc is a powerful, yet simple static site generator built with Rust that transforms your markdown files into beautiful, responsive documentation websites.</p>\n<h2>Why Choose GlowDoc?</h2>\n<p><strong>✨ Beautiful by Default</strong> - Clean, professional design with carefully crafted typography, spacing, and visual hierarchy that makes your content shine</p>\n<p><strong>🌙 Smart Dark Mode</strong> - Automatic dark mode detection with smooth transitions and persistent user preferences</p>\n<p><strong>📱 Mobile-First Responsive</strong> - Flawless experience across all devices with an adaptive sidebar and touch-friendly navigation</p>\n<p><strong>⚡ Lightning Fast</strong> - Minimal dependencies, optimized performance, and single-page application architecture for instant page loads</p>\n<p><strong>♿ Accessibility First</strong> - Built with WCAG guidelines in mind, featuring proper semantic markup, keyboard navigation, and screen reader support</p>\n<p><strong>🎛\u{fe0f} Highly Customizable</strong> - Easy theming system with CSS custom properties, flexible layouts, and extensible components</p>\n<p><strong>🔧 Developer Friendly</strong> - Simple markdown workflow, automatic config generation, and lightning-fast hot reload development experience</p>\n<img src=\"docs/diagonal_comparison.png\" width=100%/>\n<h2>Key Features</h2>\n<h3>📝 Markdown-Powered Content</h3>\n<p>Write your documentation in familiar GitHub-flavored markdown with support for:</p>\n<ul>\n<li>Tables and task lists</li>\n<li>Code syntax highlighting</li>\n<li>Footnotes and strikethrough</li>\n</ul>\n<h3>🗂\u{fe0f} Smart Organization</h3>\n<ul>\n<li>Automatic navigation generation from folder structure</li>\n<li>Configurable page ordering and section management</li>\n<li>Search functionality across all content</li>\n<li>Breadcrumb navigation for easy orientation</li>\n</ul>\n<h3>🎯 Zero Configuration Required</h3>\n<p>Get started instantly with our intelligent config generator:</p>\n<ul>\n<li>Auto-detects your documentation structure</li>\n<li>Extracts page titles from markdown headers</li>\n<li>Interactive setup wizard for customization</li>\n<li>Command-line options for automation</li>\n</ul>\n<h3>😍 Beautiful Theme System</h3>\n<p>Professional styling that adapts to your needs:</p>\n<ul>\n<li>Modern CSS custom properties for easy customization</li>\n<li>Automatic light/dark mode with smooth transitions</li>\n<li>Carefully crafted typography and visual hierarchy</li>\n<li>Responsive design that looks stunning on every device</li>\n<li>Persistent theme preferences across sessions</li>\n</ul>\n<h2>Wicked Fast &amp; Efficient</h2>\n<p>GlowDoc is super fast, able to handle thousands of documents with ease.</p>\n<h3>Performance Benchmark: 10,000 Documents</h3>\n<table style=\"width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1);\">\n  <thead>\n    <tr style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;\">\n      <th style=\"padding: 16px; text-align: left; font-weight: 600;\">Feature</th>\n      <th style=\"padding: 16px; text-align: left; font-weight: 600;\">GlowDoc</th>\n      <th style=\"padding: 16px; text-align: left; font-weight: 600;\">Astro Starlight</th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr style=\"background-color: rgba(102, 126, 234, 0.05);\">\n      <td style=\"padding: 16px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.1);\">Compile Time</td>\n      <td style=\"padding: 16px; color: #10b981; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">1.32 seconds</td>\n      <td style=\"padding: 16px; color: #ef4444; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">20+ minutes</td>\n    </tr>\n    <tr>\n      <td style=\"padding: 16px; font-weight: 600; border-bottom: 1px solid rgba(0,0,0,0.1);\">Output Size</td>\n      <td style=\"padding: 16px; color: #10b981; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">17MB (gzipped)</td>\n      <td style=\"padding: 16px; color: #ef4444; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.1);\">10+ GB</td>\n    </tr>\n    <tr style=\"background-color: rgba(102, 126, 234, 0.05);\">\n      <td style=\"padding: 16px; font-weight: 600;\">Document Capacity</td>\n      <td style=\"padding: 16px; color: #10b981; font-weight: 500;\">Tens of thousands</td>\n      <td style=\"padding: 16px; color: #ef4444; font-weight: 500;\">Limited by build time/storage space</td>\n    </tr>\n  </tbody>\n</table>\n<p><em>Testing environment: MacBook Air M1, 16GB RAM. Results may vary based on hardware and document complexity.</em></p>\n<br/>\n<img src=\"docs/performance-chart.svg\" width=100%/>\n<h2>Quick Start Guide</h2>\n<p>Ready to create amazing documentation? Here's how to get started in under 5 minutes:</p>\n<pre><code class=\"language-bash\"># 1. Install Rust (if you haven't already)\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\nsource ~/.cargo/env\n\n# 2. Clone or create your documentation project\n# (or use GlowDoc in your existing project)\n\n# 3. Generate your configuration\ncargo run init-config\n\n# 4. Start development server with hot reload (recommended)\ncargo run watch\n# Visit http://localhost:8000 to see your docs!\n# Changes to files automatically rebuild and refresh your browser\n\n# Alternative: One-time build for production\n# cargo run --release &amp;&amp; python3 -m http.server 8000\n</code></pre>\n<h2>🔥 Lightning-Fast Development with Hot Reload</h2>\n<p>Experience the future of documentation development with our built-in hot reload server:</p>\n<h3><strong>Instant Feedback Loop</strong></h3>\n<ul>\n<li><strong>Save a file</strong> → <strong>Site rebuilds</strong> → <strong>Browser refreshes</strong> → <strong>See changes instantly</strong></li>\n<li>No manual rebuilds, no refresh button needed, just pure development flow</li>\n</ul>\n<h3><strong>Rich Media Support</strong></h3>\n<ul>\n<li><strong>Images, videos, fonts</strong> - All served directly from your <code>docs/</code> folder</li>\n<li><strong>Live asset updates</strong> - Change an image and see it update immediately</li>\n<li><strong>No configuration needed</strong> - Just drop files in and reference them</li>\n</ul>\n<h3><strong>Smart Development Features</strong></h3>\n<ul>\n<li><strong>Debounced rebuilds</strong> - Prevents duplicate builds from rapid file saves</li>\n<li><strong>Clean console output</strong> - Shows only what matters during development</li>\n<li><strong>Error reporting</strong> - Clear feedback when something goes wrong</li>\n<li><strong>Debug mode</strong> - <code>GLOWDOC_DEBUG=1 cargo run watch</code> for verbose logging</li>\n</ul>\n<pre><code class=\"language-bash\"># Start the magic ✨\ncargo run watch\n\n# Then edit your markdown files and watch the magic happen:\n# 🔄 Rebuilding after entry.md change...\n# ✅ Ready\n</code></pre>\n<p>Perfect for:</p>\n<ul>\n<li><strong>Writing and previewing</strong> content in real-time</li>\n<li><strong>Testing responsive layouts</strong> across different screen sizes</li>\n<li><strong>Iterating on design</strong> changes with immediate visual feedback</li>\n<li><strong>Adding images and assets</strong> with instant preview</li>\n</ul>\n<h2>Perfect For Every Documentation Need</h2>\n<h3>📚 <strong>Project Documentation</strong></h3>\n<p>Document your open source projects, internal tools, or enterprise software with professional-grade presentation</p>\n<h3>🔌 <strong>API Documentation</strong></h3>\n<p>Create comprehensive API guides with code examples, endpoint references, and interactive exploration</p>\n<h3>📖 <strong>User Guides &amp; Tutorials</strong></h3>\n<p>Build step-by-step guides that help users master your product with clear, visual instructions</p>\n<h3>🧠 <strong>Knowledge Bases</strong></h3>\n<p>Organize team knowledge, best practices, and institutional wisdom in an easily searchable format</p>\n<h3>✍\u{fe0f} <strong>Technical Blogs</strong></h3>\n<p>Publish technical content with beautiful formatting, syntax highlighting, and professional presentation</p>\n<h3>📋 <strong>Documentation Hubs</strong></h3>\n<p>Centralize multiple projects or teams' documentation in one cohesive, branded experience</p>\n<h2>What Makes GlowDoc Special?</h2>\n<h3>🏗\u{fe0f} <strong>Single Binary Simplicity</strong></h3>\n<p>No complex build pipelines or dependency management - just one Rust binary that does everything you need.</p>\n<h3>🎨 <strong>Design That Delights</strong></h3>\n<p>We obsess over the details so you don't have to. Every element is carefully designed for optimal readability and user experience.</p>\n<h3>🚀 <strong>Performance Obsessed</strong></h3>\n<p>Your documentation loads instantly and stays responsive, even with hundreds of pages of content.</p>\n<h3>🔍 <strong>Search-First Experience</strong></h3>\n<p>Built-in search helps users find exactly what they're looking for, when they need it.</p>\n<h3>🔥 <strong>Hot Reload Development</strong></h3>\n<p>Revolutionary development experience with instant rebuilds and browser refresh - see your changes in real-time as you write.</p>\n<h2>Our Philosophy</h2>\n<blockquote>\n<p><strong>Great documentation should be invisible technology.</strong></p>\n</blockquote>\n<p>We believe that the best documentation tools get out of your way and let your content shine. GlowDoc follows these core principles:</p>\n<ul>\n<li><strong>Content First</strong>: Your words matter most - everything else should support them</li>\n<li><strong>Accessibility Always</strong>: Documentation should be usable by everyone, regardless of ability or device</li>\n<li><strong>Performance Matters</strong>: Fast load times and smooth interactions create better reading experiences</li>\n<li><strong>Beauty Serves Purpose</strong>: Good design isn't decoration - it improves comprehension and usability</li>\n</ul>\n<h2>Ready to Get Started?</h2>\n<p>🚀 <strong>Jump right in</strong> with our <a href=\"#quick-start\">Quick Start Guide</a> for a guided setup experience</p>\n<p>⚙\u{fe0f} <strong>Learn the details</strong> in our <a href=\"#installation\">Installation Guide</a> for comprehensive setup instructions</p>\n<p>🎨 <strong>Make it yours</strong> with our <a href=\"#theming\">Customization Guide</a> to match your brand and style</p>\n<p>💡 <strong>Need help?</strong> Check out our <a href=\"#configuration\">Configuration Guide</a> for advanced setup options</p>\n<hr />\n<p><em>Ready to transform your documentation? Let's build something beautiful together!</em> 🌟</p>\n<br/>\n<p>⚡\u{fe0f} More projects can be found at my <a href=\"https://hec.works\">website</a> 🌊 and the project is fully open source on <a href=\"https://github.com/paradise-runner/glowdoc\">github</a> 🤩</p>\n<br/>\n<br/>\n<center>Built with ♥\u{fe0f} in Fort Collins, CO</center>\n\n        </div>\n    </div>\n\n    <div class=\"layout\" id=\"docs-layout\">\n        <aside class=\"sidebar\" id=\"sidebar\">\n            <nav class=\"sidebar-nav\">\n\n                <div class=\"search-container\">\n                    <input type=\"text\" id=\"search-input\" class=\"search-input\" placeholder=\"Search pages...\" oninput=\"performSearch()\">\n                    <svg class=\"search-icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                        <circle cx=\"11\" cy=\"11\" r=\"8\"/>\n                        <path d=\"m21 21-4.35-4.35\"/>\n                    </svg>\n                </div>\n                <div id=\"search-results\" class=\"search-results\" style=\"display: none;\">\n                    <div class=\"search-results-header\">Search Results</div>\n                    <div id=\"search-results-list\"></div>\n                </div>\n                <div id=\"navigation-container\">\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('introduction')\">\n                        <span>Introduction</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"introduction-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#introduction/what-is-glowdoc\" class=\"nav-link active\" data-content-id=\"introduction/what-is-glowdoc\" data-section-id=\"introduction\">What is GlowDoc?</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#introduction/quick-start\" class=\"nav-link\" data-content-id=\"introduction/quick-start\" data-section-id=\"introduction\">Quick Start</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('getting-started')\">\n                        <span>Getting Started</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"getting-started-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#getting-started/first-steps\" class=\"nav-link\" data-content-id=\"getting-started/first-steps\" data-section-id=\"getting-started\">First Steps</a>\n                        </li>\n                        <li class=\"nav-item nav-folder\">\n                            <div class=\"nav-folder-title\" onclick=\"toggleNestedSection('getting-started-setup')\">\n                                <span>Setup</span>\n                                <svg class=\"nav-folder-toggle\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                                    <polyline points=\"6 9 12 15 18 9\"></polyline>\n                                </svg>\n                            </div>\n                            <ul class=\"nav-nested-items\" id=\"getting-started-setup-items\">\n                            <li class=\"nav-item\">\n                                <a href=\"#getting-started/setup/setup-installation\" class=\"nav-link\" data-content-id=\"getting-started/setup/setup-installation\" data-section-id=\"getting-started\">Installation</a>\n                            </li>\n                            <li class=\"nav-item\">\n                                <a href=\"#getting-started/setup/setup-configuration\" class=\"nav-link\" data-content-id=\"getting-started/setup/setup-configuration\" data-section-id=\"getting-started\">Configuration</a>\n                            </li>\n                            </ul>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('customization')\">\n                        <span>Customization</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"customization-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#customization/theming\" class=\"nav-link\" data-content-id=\"customization/theming\" data-section-id=\"customization\">Theming</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#customization/components\" class=\"nav-link\" data-content-id=\"customization/components\" data-section-id=\"customization\">Components</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#customization/styling\" class=\"nav-link\" data-content-id=\"customization/styling\" data-section-id=\"customization\">Custom Styling</a>\n                        </li>\n                    </ul>\n                </div>\n                <div class=\"nav-section\">\n                    <div class=\"nav-section-title\" onclick=\"toggleSection('advanced')\">\n                        <span>Advanced</span>\n                        <svg class=\"nav-section-toggle\" width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                            <polyline points=\"6 9 12 15 18 9\"></polyline>\n                        </svg>\n                    </div>\n                    <ul class=\"nav-items\" id=\"advanced-items\">\n                        <li class=\"nav-item\">\n                            <a href=\"#advanced/api\" class=\"nav-link\" data-content-id=\"advanced/api\" data-section-id=\"advanced\">API Reference</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#advanced/deployment\" class=\"nav-link\" data-content-id=\"advanced/deployment\" data-section-id=\"advanced\">Deployment</a>\n                        </li>\n                        <li class=\"nav-item\">\n                            <a href=\"#advanced/plugins\" class=\"nav-link\" data-content-id=\"advanced/plugins\" data-section-id=\"advanced\">Plugins and Extensions</a>\n                        </li>\n                    </ul>\n                </div>\n                </div>\n            </nav>\n        </aside>\n\n        <main class=\"main-content\">\n            <div class=\"content-wrapper\">\n                <div class=\"content-area\">\n\n            <section class=\"content-section active\" id=\"introduction/what-is-glowdoc\">\n                <h1 id=\"what-is-glowdoc\">What is GlowDoc?</h1>\n<p>GlowDoc is a modern, lightweight documentation template that presents a beautiful thoughtful space for your work. It's built with pure HTML, CSS, and minimal JavaScript to ensure fast loading times and easy customization.</p>\n<h2 id=\"key-features\">Key Features</h2>\n<ul>\n<li><strong>Modern Design</strong> - Clean, professional appearance with attention to typography and spacing</li>\n<li><strong>Dark Mode</strong> - Built-in dark mode support with smooth transitions</li>\n<li><strong>Responsive</strong> - Works perfectly on desktop, tablet, and mobile devices</li>\n<li><strong>Fast</strong> - Minimal dependencies and optimized for performance</li>\n<li><strong>Accessible</strong> - Built with accessibility best practices</li>\n<li><strong>Customizable</strong> - Easy to modify colors, fonts, and layout</li>\n</ul>\n<h2 id=\"perfect-for\">Perfect For</h2>\n<p>GlowDoc is ideal for:</p>\n<ul>\n<li>Project documentation</li>\n<li>API documentation</li>\n<li>User guides and tutorials</li>\n<li>Knowledge bases</li>\n<li>Technical blogs</li>\n</ul>\n<h2 id=\"philosophy\">Philosophy</h2>\n<p>We believe documentation should be beautiful, fast, and accessible. GlowDoc follows these principles by providing a clean, distraction-free reading experience that focuses on your content.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"introduction/quick-start\">\n                <h1 id=\"quick-start\">Quick Start</h1>\n<p>Get up and running with GlowDoc in minutes. This comprehensive guide will walk you through installation, setup, and creating your first professional documentation site.</p>\n<h2 id=\"prerequisites\">Prerequisites</h2>\n<p>Before you begin, ensure you have the following installed:</p>\n<h3 id=\"required-software\">Required Software</h3>\n<p><strong>Rust (Latest Stable)</strong></p>\n<pre><code class=\"language-bash\"># Install Rust using rustup (recommended)\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\n\n# Follow the on-screen instructions, then reload your shell\nsource ~/.cargo/env\n\n# Verify installation\nrustc --version\ncargo --version\n</code></pre>\n<p><strong>Git</strong></p>\n<pre><code class=\"language-bash\"># Check if Git is installed\ngit --version\n\n# If not installed:\n# macOS: Install Xcode Command Line Tools\nxcode-select --install\n\n# Windows: Download from https://git-scm.com/download/win\n# Linux (Ubuntu/Debian): sudo apt-get install git\n</code></pre>\n<p><strong>Python 3 (for local testing)</strong></p>\n<pre><code class=\"language-bash\"># Check Python installation\npython3 --version\n\n# Python is usually pre-installed on macOS/Linux\n# Windows: Download from https://python.org\n</code></pre>\n<h3 id=\"system-requirements\">System Requirements</h3>\n<ul>\n<li><strong>Operating System</strong>: macOS, Linux, or Windows</li>\n<li><strong>RAM</strong>: 512MB minimum, 1GB recommended</li>\n<li><strong>Disk Space</strong>: 100MB for Rust toolchain + project files</li>\n<li><strong>Network</strong>: Internet connection for dependencies (initial setup only)</li>\n</ul>\n<h2 id=\"installation-options\">Installation Options</h2>\n<p>Choose the installation method that best fits your workflow:</p>\n<h3 id=\"option-1-download-release-quickest\">Option 1: Download Release (Quickest)</h3>\n<ol>\n<li>\n<p><strong>Download the latest release:</strong></p>\n<pre><code class=\"language-bash\"># Download and extract (replace URL with actual release)\ncurl -L https://github.com/username/glowdoc/archive/refs/heads/main.zip -o glowdoc.zip\nunzip glowdoc.zip\ncd glowdoc-main\n</code></pre>\n</li>\n<li>\n<p><strong>Build immediately:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h3 id=\"option-2-clone-repository-recommended-for-development\">Option 2: Clone Repository (Recommended for Development)</h3>\n<ol>\n<li>\n<p><strong>Clone the repository:</strong></p>\n<pre><code class=\"language-bash\">git clone https://github.com/username/glowdoc.git\ncd glowdoc\n</code></pre>\n</li>\n<li>\n<p><strong>Build the documentation:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h3 id=\"option-3-start-fresh-project\">Option 3: Start Fresh Project</h3>\n<ol>\n<li>\n<p><strong>Create new project directory:</strong></p>\n<pre><code class=\"language-bash\">mkdir my-docs\ncd my-docs\n</code></pre>\n</li>\n<li>\n<p><strong>Copy GlowDoc source files:</strong></p>\n<pre><code class=\"language-bash\"># Copy src/ and docs/ directories from GlowDoc\n# Copy Cargo.toml\n</code></pre>\n</li>\n<li>\n<p><strong>Initialize your documentation:</strong></p>\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n</li>\n</ol>\n<h2 id=\"project-structure-overview\">Project Structure Overview</h2>\n<p>Understanding GlowDoc's structure helps you work effectively:</p>\n<pre><code>glowdoc/\n├── Cargo.toml              # Rust project configuration\n├── src/                    # Rust source code\n│   ├── main.rs            # Main application logic\n│   └── config_builder.rs   # Configuration builder\n├── docs/                   # Your documentation source\n│   ├── config.yaml        # Navigation configuration\n│   ├── entry.md           # Homepage content (optional)\n│   ├── introduction/      # Documentation sections\n│   │   ├── quick-start.md\n│   │   └── what-is-glowdoc.md\n│   ├── getting-started/\n│   │   ├── installation.md\n│   │   ├── configuration.md\n│   │   └── first-steps.md\n│   └── [more-sections]/\n├── index.html              # Generated documentation site\n├── README.md              # Project information\n└── .gitignore             # Git ignore rules\n</code></pre>\n<h3 id=\"key-directories\">Key Directories</h3>\n<ul>\n<li><strong><code>docs/</code></strong>: Your markdown documentation files</li>\n<li><strong><code>src/</code></strong>: GlowDoc's Rust source code (modify for customization)</li>\n<li><strong><code>index.html</code></strong>: Generated single-file documentation site</li>\n</ul>\n<h2 id=\"5-minute-setup\">5-Minute Setup</h2>\n<p>Follow these steps to have a working documentation site in 5 minutes:</p>\n<h3 id=\"step-1-build-your-first-site-1-minute\">Step 1: Build Your First Site (1 minute)</h3>\n<pre><code class=\"language-bash\"># After installation, build immediately\ncargo run --release\n\n# You should see output like:\n# &quot;Building documentation...&quot;\n# &quot;Generated index.html successfully&quot;\n</code></pre>\n<h3 id=\"step-2-preview-your-site-30-seconds\">Step 2: Preview Your Site (30 seconds)</h3>\n<pre><code class=\"language-bash\"># Start local server\npython3 -m http.server 8000\n\n# Open in browser\n# Visit: http://localhost:8000\n</code></pre>\n<p><strong>Alternative server options:</strong></p>\n<pre><code class=\"language-bash\"># Node.js users\nnpx serve .\n\n# PHP users\nphp -S localhost:8000\n\n# Python 2 users\npython -m SimpleHTTPServer 8000\n</code></pre>\n<h3 id=\"step-3-verify-everything-works-30-seconds\">Step 3: Verify Everything Works (30 seconds)</h3>\n<p>Check these features in your browser:</p>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\nHomepage loads correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nNavigation sidebar works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nTheme toggle (light/dark) functions</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nSearch functionality operates</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nMobile responsive design</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll documentation pages display</li>\n</ul>\n<h3 id=\"step-4-customize-your-content-3-minutes\">Step 4: Customize Your Content (3 minutes)</h3>\n<ol>\n<li>\n<p><strong>Update site information:</strong></p>\n<pre><code class=\"language-bash\"># Edit docs/config.yaml\nvim docs/config.yaml  # or your preferred editor\n</code></pre>\n<pre><code class=\"language-yaml\">title: My Project Documentation\ndescription: Comprehensive guide for My Project\ntheme: vibrant  # or 'default' or 'purple'\n</code></pre>\n</li>\n<li>\n<p><strong>Add your homepage content:</strong></p>\n<pre><code class=\"language-bash\"># Edit docs/entry.md\nvim docs/entry.md\n</code></pre>\n<pre><code class=\"language-markdown\"># My Project Documentation\n\nWelcome to the comprehensive documentation for My Project.\n\n## Getting Started\n\nFollow our guides to get up and running quickly.\n</code></pre>\n</li>\n<li>\n<p><strong>Add your first documentation page:</strong></p>\n<pre><code class=\"language-bash\"># Create a new page\necho &quot;# My First Page\\n\\nThis is my first documentation page.&quot; &gt; docs/introduction/my-first-page.md\n</code></pre>\n</li>\n<li>\n<p><strong>Rebuild and see changes:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n# Refresh your browser\n</code></pre>\n</li>\n</ol>\n<h2 id=\"configuration-walkthrough\">Configuration Walkthrough</h2>\n<h3 id=\"automatic-configuration-recommended\">Automatic Configuration (Recommended)</h3>\n<p>Let GlowDoc detect and configure your documentation structure automatically:</p>\n<pre><code class=\"language-bash\"># Interactive configuration wizard\ncargo run init-config\n</code></pre>\n<p><strong>Example session:</strong></p>\n<pre><code>GlowDoc Configuration Builder\n============================\n\nScanning docs/ directory...\nFound 3 sections: introduction, getting-started, advanced\n\nSite title [GlowDoc]: My Project Docs\nDescription [modern docs for the modern world]: Complete guide for My Project\nTheme [vibrant]: default\n\nDetected sections:\n1. introduction (2 files)\n2. getting-started (3 files)  \n3. advanced (2 files)\n\nWould you like to reorder sections? [y/N]: y\nEnter new order (comma-separated): introduction,getting-started,advanced\n\nConfiguration saved to docs/config.yaml\nBackup created: docs/config.yaml.backup\n</code></pre>\n<h3 id=\"manual-configuration\">Manual Configuration</h3>\n<p>For precise control, edit <code>docs/config.yaml</code> directly:</p>\n<pre><code class=\"language-yaml\">title: My Project Documentation\ndescription: Everything you need to know about My Project\ntheme: vibrant\n\nnavigation:\n  - title: Introduction\n    id: introduction\n    items:\n      - title: Overview\n        id: overview\n        file: introduction/overview.md\n      - title: Quick Start\n        id: quick-start\n        file: introduction/quick-start.md\n  \n  - title: User Guide\n    id: user-guide\n    items:\n      - title: Installation\n        id: installation\n        file: guide/installation.md\n      - title: Configuration\n        id: configuration\n        file: guide/configuration.md\n</code></pre>\n<h3 id=\"command-line-configuration\">Command-Line Configuration</h3>\n<p>For automated workflows, use CLI arguments:</p>\n<pre><code class=\"language-bash\"># Complete automated setup\ncargo run init-config \\\n  --title &quot;My Project Docs&quot; \\\n  --description &quot;Comprehensive project documentation&quot; \\\n  --section-order introduction,guide,api,advanced \\\n  --rename-section guide=&quot;User Guide&quot; \\\n  --rename-section api=&quot;API Reference&quot; \\\n  --page-order guide=installation.md,configuration.md,usage.md \\\n  --exclude-section drafts\n</code></pre>\n<h2 id=\"content-creation-guide\">Content Creation Guide</h2>\n<h3 id=\"writing-effective-documentation\">Writing Effective Documentation</h3>\n<h4 id=\"markdown-basics\">Markdown Basics</h4>\n<p>GlowDoc supports GitHub-flavored markdown with extensions:</p>\n<pre><code class=\"language-markdown\"># Page Title (H1 - use only once per page)\n\n## Section Heading (H2)\n\n### Subsection (H3)\n\n**Bold text** and *italic text*\n\n- Bullet points\n- Another item\n\n1. Numbered lists\n2. Sequential items\n\n`inline code` and:\n\n```javascript\n// Code blocks with syntax highlighting\nfunction example() {\n  return &quot;Hello, World!&quot;;\n}\n</code></pre>\n<blockquote>\n<p>Blockquotes for important information</p>\n</blockquote>\n<p><a href=\"other-page.md\">Links to other pages</a>\n<a href=\"https://example.com\">External links</a></p>\n<table><thead><tr><th>Tables</th><th>Are</th><th>Supported</th></tr></thead><tbody>\n<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>\n</tbody></table>\n<pre><code>\n#### Page Structure Best Practices\n\n```markdown\n# Clear, Descriptive Page Title\n\nBrief introduction paragraph explaining what this page covers.\n\n## Main Concepts\n\nExplain the core concepts first.\n\n### Detailed Subsection\n\nBreak down complex topics into digestible sections.\n\n## Examples\n\nProvide practical examples:\n\n```bash\n# Command examples\ncargo run --release\n</code></pre>\n<h2 id=\"next-steps\">Next Steps</h2>\n<p>Guide readers to related pages or next actions.</p>\n<pre><code>\n### Organizing Your Content\n\n#### Recommended Structure\n\n</code></pre>\n<p>docs/\n├── config.yaml\n├── entry.md              # Homepage content\n├── introduction/         # High-level overview\n│   ├── overview.md       # What is your project?\n│   ├── quick-start.md    # This page\n│   └── concepts.md       # Core concepts\n├── guides/               # Step-by-step instructions\n│   ├── installation.md\n│   ├── configuration.md\n│   ├── first-project.md\n│   └── troubleshooting.md\n├── reference/            # Detailed technical info\n│   ├── api.md\n│   ├── cli.md\n│   └── configuration-reference.md\n└── advanced/             # Advanced topics\n├── customization.md\n├── plugins.md\n└── deployment.md</p>\n<pre><code>\n#### Content Guidelines\n\n1. **Start with user goals**: What does the reader want to accomplish?\n2. **Use progressive disclosure**: Basic info first, details later\n3. **Include examples**: Show, don't just tell\n4. **Test your instructions**: Verify steps work as documented\n5. **Update regularly**: Keep content current with your project\n\n### Adding New Pages\n\n1. **Create the markdown file:**\n   ```bash\n   # Create in appropriate section\n   touch docs/guides/new-feature.md\n</code></pre>\n<ol start=\"2\">\n<li>\n<p><strong>Add content with H1 title:</strong></p>\n<pre><code class=\"language-markdown\"># New Feature Guide\n\nThis guide explains how to use the new feature.\n</code></pre>\n</li>\n<li>\n<p><strong>Update configuration:</strong></p>\n<pre><code class=\"language-bash\"># Auto-detect and add to navigation\ncargo run init-config\n\n# Or manually edit docs/config.yaml\n</code></pre>\n</li>\n<li>\n<p><strong>Rebuild documentation:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h2 id=\"theme-customization\">Theme Customization</h2>\n<h3 id=\"built-in-themes\">Built-in Themes</h3>\n<p>GlowDoc includes three professionally designed themes:</p>\n<pre><code class=\"language-yaml\"># In docs/config.yaml\ntheme: default  # Clean, professional\ntheme: purple   # Purple accents\ntheme: vibrant  # Colorful, energetic\n</code></pre>\n<h3 id=\"quick-theme-preview\">Quick Theme Preview</h3>\n<pre><code class=\"language-bash\"># Try different themes quickly\nsed -i 's/theme: .*/theme: purple/' docs/config.yaml &amp;&amp; cargo run --release\nsed -i 's/theme: .*/theme: vibrant/' docs/config.yaml &amp;&amp; cargo run --release\nsed -i 's/theme: .*/theme: default/' docs/config.yaml &amp;&amp; cargo run --release\n</code></pre>\n<h3 id=\"dark-mode\">Dark Mode</h3>\n<p>All themes include automatic dark mode:</p>\n<ul>\n<li><strong>System preference detection</strong>: Respects user's OS setting</li>\n<li><strong>Manual toggle</strong>: Click the theme button in header</li>\n<li><strong>Persistent choice</strong>: Remembers user preference</li>\n</ul>\n<h2 id=\"development-workflow\">Development Workflow</h2>\n<h3 id=\"efficient-development-loop\">Efficient Development Loop</h3>\n<pre><code class=\"language-bash\"># 1. Edit your markdown files\nvim docs/guides/new-page.md\n\n# 2. Rebuild (takes ~1-3 seconds)\ncargo run --release\n\n# 3. Refresh browser (server keeps running)\n# No need to restart python server\n</code></pre>\n<h3 id=\"file-watching-optional\">File Watching (Optional)</h3>\n<p>For automatic rebuilds on file changes:</p>\n<pre><code class=\"language-bash\"># Install cargo-watch\ncargo install cargo-watch\n\n# Watch for changes and rebuild\ncargo watch -x &quot;run --release&quot;\n</code></pre>\n<h3 id=\"version-control-integration\">Version Control Integration</h3>\n<pre><code class=\"language-bash\"># Initialize git repository\ngit init\n\n# Add files (excluding generated content)\ngit add .\ngit commit -m &quot;Initial documentation setup&quot;\n\n# .gitignore should include:\necho &quot;target/&quot; &gt;&gt; .gitignore\necho &quot;index.html&quot; &gt;&gt; .gitignore  # Generated file\n</code></pre>\n<h2 id=\"testing-your-documentation\">Testing Your Documentation</h2>\n<h3 id=\"pre-deployment-checklist\">Pre-Deployment Checklist</h3>\n<pre><code class=\"language-bash\"># 1. Build successfully\ncargo run --release\n\n# 2. Check file size (should be reasonable)\nls -lh index.html\n\n# 3. Validate HTML (optional)\n# Install html-validate: npm install -g html-validate\nhtml-validate index.html\n\n# 4. Test locally\npython3 -m http.server 8000\n</code></pre>\n<h3 id=\"manual-testing\">Manual Testing</h3>\n<p>Visit <code>http://localhost:8000</code> and verify:</p>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Navigation</strong>: All links work correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Search</strong>: Finds content in titles and text</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Themes</strong>: Light/dark mode toggle works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Mobile</strong>: Sidebar collapses, navigation works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Content</strong>: All pages display properly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Links</strong>: Internal and external links function</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\n<strong>Performance</strong>: Pages load quickly</li>\n</ul>\n<h3 id=\"accessibility-testing\">Accessibility Testing</h3>\n<pre><code class=\"language-bash\"># Install axe-core CLI (optional)\nnpm install -g @axe-core/cli\n\n# Test accessibility\naxe http://localhost:8000\n</code></pre>\n<h2 id=\"common-issues-and-solutions\">Common Issues and Solutions</h2>\n<h3 id=\"build-problems\">Build Problems</h3>\n<p><strong>&quot;cargo: command not found&quot;</strong></p>\n<pre><code class=\"language-bash\"># Install Rust\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\nsource ~/.cargo/env\n</code></pre>\n<p><strong>&quot;No such file or directory: docs/config.yaml&quot;</strong></p>\n<pre><code class=\"language-bash\"># Generate configuration\ncargo run init-config\n</code></pre>\n<p><strong>Build errors after editing config.yaml</strong></p>\n<pre><code class=\"language-bash\"># Validate YAML syntax\npython3 -c &quot;import yaml; yaml.safe_load(open('docs/config.yaml'))&quot;\n\n# Check file references exist\nls docs/introduction/quick-start.md\n</code></pre>\n<h3 id=\"server-issues\">Server Issues</h3>\n<p><strong>&quot;Address already in use&quot;</strong></p>\n<pre><code class=\"language-bash\"># Find and kill process using port 8000\nlsof -ti:8000 | xargs kill\n\n# Or use different port\npython3 -m http.server 8080\n</code></pre>\n<p><strong>Browser shows &quot;No such file or directory&quot;</strong></p>\n<pre><code class=\"language-bash\"># Ensure you're in the correct directory\nls index.html\n\n# Rebuild if missing\ncargo run --release\n</code></pre>\n<h3 id=\"content-problems\">Content Problems</h3>\n<p><strong>Page not appearing in navigation</strong></p>\n<pre><code class=\"language-bash\"># Ensure file is referenced in config.yaml\ngrep -r &quot;filename.md&quot; docs/config.yaml\n\n# Or regenerate config\ncargo run init-config\n</code></pre>\n<p><strong>Search not finding content</strong></p>\n<pre><code class=\"language-bash\"># Rebuild to update search index\ncargo run --release\n\n# Check file has H1 heading\nhead -5 docs/section/page.md\n</code></pre>\n<h2 id=\"next-steps\">Next Steps</h2>\n<p>Congratulations! You now have a working GlowDoc site. Here's what to explore next:</p>\n<h3 id=\"immediate-actions\">Immediate Actions</h3>\n<ol>\n<li>\n<p><strong>Add Your Content</strong></p>\n<ul>\n<li>Replace sample content with your documentation</li>\n<li>Update <code>docs/entry.md</code> with your project information</li>\n<li>Add pages for your specific use cases</li>\n</ul>\n</li>\n<li>\n<p><strong>Customize Appearance</strong></p>\n<ul>\n<li>Try different themes in <code>config.yaml</code></li>\n<li>Explore advanced styling options</li>\n<li>Add your logo or branding</li>\n</ul>\n</li>\n<li>\n<p><strong>Test Thoroughly</strong></p>\n<ul>\n<li>Verify all navigation works</li>\n<li>Test search functionality</li>\n<li>Check mobile responsiveness</li>\n</ul>\n</li>\n</ol>\n<h3 id=\"advanced-features\">Advanced Features</h3>\n<ol>\n<li>\n<p><strong>Learn Configuration Management</strong></p>\n<ul>\n<li>Read the <a href=\"../getting-started/configuration.md\">Configuration Guide</a></li>\n<li>Understand navigation structure options</li>\n<li>Explore CLI automation features</li>\n</ul>\n</li>\n<li>\n<p><strong>Explore Customization</strong></p>\n<ul>\n<li>Check out <a href=\"../customization/styling.md\">Custom Styling</a></li>\n<li>Learn about <a href=\"../customization/components.md\">Components</a></li>\n<li>Discover <a href=\"../customization/theming.md\">Theming</a> options</li>\n</ul>\n</li>\n<li>\n<p><strong>Plan Deployment</strong></p>\n<ul>\n<li>Review <a href=\"../advanced/deployment.md\">Deployment Options</a></li>\n<li>Set up automated builds</li>\n<li>Choose your hosting platform</li>\n</ul>\n</li>\n<li>\n<p><strong>Extend Functionality</strong></p>\n<ul>\n<li>Explore <a href=\"../advanced/plugins.md\">Plugins</a></li>\n<li>Check the <a href=\"../advanced/api.md\">API Reference</a></li>\n<li>Consider custom integrations</li>\n</ul>\n</li>\n</ol>\n<h3 id=\"community-and-support\">Community and Support</h3>\n<ul>\n<li><strong>Documentation</strong>: Continue with <a href=\"../getting-started/first-steps.md\">First Steps</a></li>\n<li><strong>Examples</strong>: Browse sample configurations and setups</li>\n<li><strong>Issues</strong>: Report problems or request features</li>\n<li><strong>Contributions</strong>: Help improve GlowDoc</li>\n</ul>\n<h3 id=\"pro-tips\">Pro Tips</h3>\n<ol>\n<li><strong>Keep It Simple</strong>: Start with basic setup, add complexity gradually</li>\n<li><strong>Test Early</strong>: Preview changes frequently during development</li>\n<li><strong>Version Control</strong>: Commit documentation changes regularly</li>\n<li><strong>User Focus</strong>: Write for your audience, not yourself</li>\n<li><strong>Iterate</strong>: Improve documentation based on user feedback</li>\n</ol>\n<p>You're now ready to create professional, beautiful documentation with GlowDoc. Happy documenting!</p>\n\n            </section>\n            <section class=\"content-section\" id=\"getting-started/first-steps\">\n                <h1 id=\"first-steps\">First Steps</h1>\n<p>Now that you have GlowDoc installed, let's build your first documentation site step by step.</p>\n<h2 id=\"1-initialize-your-project\">1. Initialize Your Project</h2>\n<p>Start by setting up the basic structure for your documentation:</p>\n<pre><code class=\"language-bash\"># Create a new project directory\nmkdir my-docs\ncd my-docs\n\n# Download or clone GlowDoc\n# Then copy the src/ and docs/ folders to your project\n</code></pre>\n<h2 id=\"2-generate-your-configuration\">2. Generate Your Configuration</h2>\n<p>Use the interactive config builder to set up your site structure:</p>\n<pre><code class=\"language-bash\"># Interactive mode - walks you through setup\ncargo run init-config\n</code></pre>\n<p>This will:</p>\n<ul>\n<li>Scan any existing markdown files in <code>docs/</code></li>\n<li>Extract page titles from H1 headers</li>\n<li>Generate a <code>docs/config.yaml</code> file</li>\n<li>Create a backup of any existing configuration</li>\n</ul>\n<h3 id=\"example-interactive-session\">Example Interactive Session</h3>\n<pre><code>GlowDoc Configuration Builder\n============================\n\nSite title [GlowDoc]: My Project Documentation\nDescription [modern docs for the modern world]: Comprehensive guide for My Project\n\nFound 3 sections in docs/:\n  1. introduction (2 files)\n  2. getting-started (3 files)  \n  3. api (1 file)\n\nWould you like to reorder sections? [y/N]: y\nEnter section order (comma-separated): introduction,getting-started,api\n\nConfiguration saved to docs/config.yaml\n</code></pre>\n<h2 id=\"3-create-your-content\">3. Create Your Content</h2>\n<h3 id=\"homepage-content\">Homepage Content</h3>\n<p>Create or edit <code>docs/entry.md</code> for your homepage:</p>\n<pre><code class=\"language-markdown\"># My Project Documentation\n\nWelcome to the comprehensive documentation for My Project.\n\n## Getting Started\n\nFollow our step-by-step guides to get up and running quickly.\n\n## Key Features\n\n- Feature 1: Description\n- Feature 2: Description\n- Feature 3: Description\n</code></pre>\n<h3 id=\"add-documentation-pages\">Add Documentation Pages</h3>\n<p>Create markdown files in organized folders:</p>\n<pre><code>docs/\n├── entry.md\n├── config.yaml\n├── introduction/\n│   ├── overview.md\n│   └── installation.md\n├── guides/\n│   ├── quick-start.md\n│   ├── configuration.md\n│   └── advanced-usage.md\n└── reference/\n    └── api.md\n</code></pre>\n<p>Each markdown file should start with an H1 header:</p>\n<pre><code class=\"language-markdown\"># Page Title\n\nYour content here...\n\n## Section\n\nMore content...\n</code></pre>\n<h2 id=\"4-start-development-server\">4. Start Development Server</h2>\n<p>For the best development experience, use the built-in development server with hot reload:</p>\n<pre><code class=\"language-bash\"># Start development server (recommended)\ncargo run watch\n</code></pre>\n<p>This will:</p>\n<ul>\n<li>Build your documentation site</li>\n<li>Start HTTP server at http://localhost:8000</li>\n<li>Watch for file changes in <code>docs/</code></li>\n<li>Automatically rebuild and refresh your browser when files change</li>\n<li>Serve images and static assets from your docs folder</li>\n</ul>\n<p><strong>Alternative: One-time Build</strong></p>\n<p>If you prefer to build once and serve with a separate server:</p>\n<pre><code class=\"language-bash\"># Build the complete site once\ncargo run --release\n\n# Serve with any static server\npython3 -m http.server 8000\n</code></pre>\n<p>Visit <code>http://localhost:8000</code> to see your documentation site.</p>\n<h2 id=\"5-add-images-and-assets\">5. Add Images and Assets</h2>\n<p>Place images and other static files in your <code>docs/</code> directory:</p>\n<pre><code>docs/\n├── images/\n│   ├── logo.png\n│   └── screenshots/\n│       └── demo.jpg\n├── assets/\n│   └── diagram.svg\n└── getting-started/\n    └── tutorial.md\n</code></pre>\n<p>Reference them in your markdown:</p>\n<pre><code class=\"language-markdown\">![Logo](images/logo.png)\n![Demo Screenshot](images/screenshots/demo.jpg)\n![Architecture](assets/diagram.svg)\n</code></pre>\n<p>The development server (<code>cargo run watch</code>) automatically serves these assets. Supported formats include:</p>\n<ul>\n<li><strong>Images</strong>: PNG, JPG, GIF, SVG, WebP</li>\n<li><strong>Documents</strong>: PDF, TXT, MD</li>\n<li><strong>Media</strong>: MP3, MP4, WebM</li>\n<li><strong>Fonts</strong>: WOFF, TTF, OTF</li>\n</ul>\n<h2 id=\"6-customize-the-appearance\">6. Customize the Appearance</h2>\n<h3 id=\"update-site-information\">Update Site Information</h3>\n<p>Edit <code>docs/config.yaml</code> to customize your site:</p>\n<pre><code class=\"language-yaml\">title: My Project Documentation\ndescription: Everything you need to know about My Project\ntheme: vibrant  # or 'default'\n</code></pre>\n<h3 id=\"adjust-navigation\">Adjust Navigation</h3>\n<p>Reorder sections and pages by editing the navigation structure:</p>\n<pre><code class=\"language-yaml\">navigation:\n  - title: Introduction\n    id: introduction\n    items:\n      - title: Overview\n        id: overview\n        file: introduction/overview.md\n      - title: Installation\n        id: installation\n        file: introduction/installation.md\n</code></pre>\n<h3 id=\"rebuild-after-changes\">Rebuild After Changes</h3>\n<p><strong>With Development Server (Recommended):</strong></p>\n<ul>\n<li>Changes are automatically detected and applied</li>\n<li>Browser refreshes automatically</li>\n<li>No manual rebuilding needed</li>\n</ul>\n<p><strong>With Manual Builds:</strong></p>\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n<h2 id=\"7-development-workflow\">7. Development Workflow</h2>\n<h3 id=\"hot-reload-development-recommended\">Hot Reload Development (Recommended)</h3>\n<p>Use the development server for the fastest workflow:</p>\n<pre><code class=\"language-bash\"># Start development server\ncargo run watch\n\n# Then edit files in docs/ - changes appear instantly!\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li><strong>Instant rebuilds</strong> when you save files</li>\n<li><strong>Automatic browser refresh</strong></li>\n<li><strong>Static asset serving</strong> (images, fonts, etc.)</li>\n<li><strong>Error reporting</strong> in console</li>\n<li><strong>Debounced updates</strong> (prevents duplicate builds)</li>\n</ul>\n<h3 id=\"manual-build-workflow\">Manual Build Workflow</h3>\n<p>For production builds or when you prefer manual control:</p>\n<pre><code class=\"language-bash\"># 1. Edit markdown files in docs/\n# 2. Rebuild the site\ncargo run --release\n\n# 3. Refresh browser to see changes\n# (No need to restart the server)\n</code></pre>\n<h3 id=\"adding-new-pages\">Adding New Pages</h3>\n<p><strong>With Development Server:</strong></p>\n<ol>\n<li>Create the markdown file in the appropriate <code>docs/</code> subfolder</li>\n<li>Run the config generator to update navigation:\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n</li>\n<li>The site rebuilds automatically - no manual rebuild needed!</li>\n</ol>\n<p><strong>With Manual Builds:</strong></p>\n<ol>\n<li>Create the markdown file in the appropriate <code>docs/</code> subfolder</li>\n<li>Run the config generator to update navigation:\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n</li>\n<li>Rebuild the site:\n<pre><code class=\"language-bash\">cargo run --release\n</code></pre>\n</li>\n</ol>\n<h3 id=\"reorganizing-content\">Reorganizing Content</h3>\n<p>Use CLI options for batch updates:</p>\n<pre><code class=\"language-bash\"># Reorder sections and rename them\ncargo run init-config \\\n  --section-order intro,guide,reference \\\n  --rename-section intro=&quot;Getting Started&quot; \\\n  --rename-section guide=&quot;User Guide&quot;\n</code></pre>\n<h2 id=\"next-steps\">Next Steps</h2>\n<p>Now that you have a working documentation site:</p>\n<ol>\n<li><strong>Explore Customization</strong>: Learn about theming and styling options</li>\n<li><strong>Add More Content</strong>: Expand your documentation with additional pages</li>\n<li><strong>Deploy Your Site</strong>: Set up hosting for your documentation</li>\n<li><strong>Advanced Features</strong>: Explore plugins and advanced configuration</li>\n</ol>\n<h2 id=\"common-tasks\">Common Tasks</h2>\n<h3 id=\"adding-a-new-section\">Adding a New Section</h3>\n<ol>\n<li>Create a new folder in <code>docs/</code>: <code>mkdir docs/new-section</code></li>\n<li>Add markdown files to the folder</li>\n<li>Run <code>cargo run init-config</code> to detect the new section</li>\n<li>Rebuild: <code>cargo run --release</code></li>\n</ol>\n<h3 id=\"reordering-pages\">Reordering Pages</h3>\n<pre><code class=\"language-bash\">cargo run init-config --page-order section=page1.md,page2.md,page3.md\n</code></pre>\n<h3 id=\"excluding-draft-content\">Excluding Draft Content</h3>\n<pre><code class=\"language-bash\">cargo run init-config --exclude-section drafts\n</code></pre>\n<h3 id=\"custom-page-titles\">Custom Page Titles</h3>\n<p>Override auto-detected titles in <code>docs/config.yaml</code>:</p>\n<pre><code class=\"language-yaml\">- title: Custom Navigation Title\n  id: page-id\n  file: section/actual-filename.md\n</code></pre>\n<h2 id=\"troubleshooting\">Troubleshooting</h2>\n<p><strong>Build errors</strong>: Check that all files referenced in <code>config.yaml</code> exist and paths are correct.</p>\n<p><strong>Missing navigation</strong>: Ensure your markdown files have H1 headers and are included in the config.</p>\n<p><strong>Styling issues</strong>: Verify the theme setting in config.yaml and rebuild the site.</p>\n<p><strong>Server not accessible</strong>: Check that the server is running and try <code>http://localhost:8000</code> instead of <code>127.0.0.1</code>.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"getting-started/setup/setup-installation\">\n                <h1 id=\"installation\">Installation</h1>\n<p>GlowDoc is designed to be simple to set up. Choose the method that works best for your workflow.</p>\n<h2 id=\"download-template\">Download Template</h2>\n<p>The easiest way to get started is to download the template directly:</p>\n<pre><code class=\"language-bash\"># Download and extract\nwget https://github.com/paradise-runner/glowdoc/archive/main.zip\nunzip main.zip\ncd glowdoc-main\n</code></pre>\n<h2 id=\"clone-repository\">Clone Repository</h2>\n<p>If you prefer to clone the repository:</p>\n<pre><code class=\"language-bash\"># Clone the repository\ngit clone https://github.com/paradise-runner/glowdoc.git\ncd glowdoc\n\n# Remove git history (optional)\nrm -rf .git\ngit init\n</code></pre>\n<h2 id=\"use-as-template\">Use as Template</h2>\n<p>Create a new repository using GlowDoc as a template on GitHub, then clone your new repository.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"getting-started/setup/setup-configuration\">\n                <h1 id=\"configuration\">Configuration</h1>\n<p>GlowDoc provides flexible configuration options to customize your documentation site. All configuration is managed through the <code>docs/config.yaml</code> file.</p>\n<h2 id=\"config-yaml-overview\">config.yaml Overview</h2>\n<p>The configuration file controls your site's structure, navigation, and appearance:</p>\n<pre><code class=\"language-yaml\">title: GlowDoc\ndescription: modern docs for the modern world\ntheme: vibrant\nnavigation:\n  - title: Introduction\n    id: introduction\n    items:\n      - title: What is GlowDoc?\n        id: what-is-glowdoc\n        file: introduction/what-is-glowdoc.md\n</code></pre>\n<h2 id=\"auto-generate-configuration\">Auto-Generate Configuration</h2>\n<p>The easiest way to create or update your configuration is using the built-in generator:</p>\n<h3 id=\"interactive-mode\">Interactive Mode</h3>\n<pre><code class=\"language-bash\">cargo run init-config\n</code></pre>\n<p>This launches an interactive wizard that:</p>\n<ul>\n<li>Scans your <code>docs/</code> folder structure</li>\n<li>Detects existing markdown files</li>\n<li>Extracts page titles from H1 headers</li>\n<li>Guides you through customization options</li>\n<li>Backs up your existing config before generating a new one</li>\n</ul>\n<h3 id=\"command-line-mode\">Command-Line Mode</h3>\n<p>For automated workflows, use CLI arguments:</p>\n<pre><code class=\"language-bash\">cargo run init-config \\\n  --title &quot;My Project&quot; \\\n  --description &quot;Comprehensive project documentation&quot; \\\n  --section-order introduction,guide,api,advanced \\\n  --rename-section guide=&quot;User Guide&quot; \\\n  --rename-page guide/setup.md=&quot;Installation Guide&quot; \\\n  --page-order guide=setup.md,configuration.md,usage.md \\\n  --exclude-section drafts\n</code></pre>\n<h3 id=\"available-cli-options\">Available CLI Options</h3>\n<ul>\n<li><code>--title &quot;Site Title&quot;</code> - Set the site title</li>\n<li><code>--description &quot;Description&quot;</code> - Set the site description</li>\n<li><code>--section-order folder1,folder2</code> - Reorder sections by folder names</li>\n<li><code>--rename-section old=new</code> - Rename section titles in navigation</li>\n<li><code>--rename-page section/file.md=&quot;New Title&quot;</code> - Override page titles</li>\n<li><code>--page-order section=file1.md,file2.md</code> - Reorder pages within sections</li>\n<li><code>--exclude-section folder</code> - Exclude folders from navigation</li>\n<li><code>--help</code> - Show complete usage guide</li>\n</ul>\n<h2 id=\"manual-configuration\">Manual Configuration</h2>\n<h3 id=\"basic-settings\">Basic Settings</h3>\n<pre><code class=\"language-yaml\">title: Your Project Name\ndescription: Brief description for SEO and page meta\ntheme: vibrant  # or 'default'\n</code></pre>\n<h3 id=\"navigation-structure\">Navigation Structure</h3>\n<p>Navigation follows a hierarchical structure with sections and items:</p>\n<pre><code class=\"language-yaml\">navigation:\n  - title: Section Name\n    id: unique-section-id\n    items:\n      - title: Page Title\n        id: unique-page-id\n        file: folder/filename.md\n</code></pre>\n<p><strong>Key Rules:</strong></p>\n<ul>\n<li>Section <code>id</code> must be unique across all sections</li>\n<li>Page <code>id</code> must be unique across all pages</li>\n<li><code>file</code> path is relative to the <code>docs/</code> folder</li>\n<li>Pages are displayed in the order they appear in the config</li>\n</ul>\n<h3 id=\"themes\">Themes</h3>\n<p>GlowDoc includes built-in themes:</p>\n<ul>\n<li><code>default</code> - Clean, professional appearance</li>\n<li><code>vibrant</code> - Bold colors with enhanced contrast</li>\n</ul>\n<h2 id=\"file-organization\">File Organization</h2>\n<h3 id=\"recommended-structure\">Recommended Structure</h3>\n<pre><code>docs/\n├── config.yaml          # Navigation configuration\n├── entry.md            # Homepage content (optional)\n├── introduction/\n│   ├── overview.md\n│   └── quick-start.md\n├── guides/\n│   ├── installation.md\n│   └── configuration.md\n└── reference/\n    ├── api.md\n    └── cli.md\n</code></pre>\n<h3 id=\"markdown-files\">Markdown Files</h3>\n<p>Each markdown file should start with an H1 header:</p>\n<pre><code class=\"language-markdown\"># Page Title\n\nContent goes here...\n</code></pre>\n<p>The H1 title is automatically extracted during config generation and used as the default page title.</p>\n<h2 id=\"advanced-configuration\">Advanced Configuration</h2>\n<h3 id=\"custom-page-titles\">Custom Page Titles</h3>\n<p>Override the auto-detected title from the markdown H1:</p>\n<pre><code class=\"language-yaml\">- title: Custom Page Title  # Shows in navigation\n  id: custom-page\n  file: section/actual-filename.md  # H1 in file can be different\n</code></pre>\n<h3 id=\"section-ordering\">Section Ordering</h3>\n<p>Control the order sections appear in navigation:</p>\n<pre><code class=\"language-bash\">cargo run init-config --section-order introduction,tutorial,reference,advanced\n</code></pre>\n<h3 id=\"page-ordering\">Page Ordering</h3>\n<p>Control the order pages appear within each section:</p>\n<pre><code class=\"language-bash\">cargo run init-config --page-order tutorial=setup.md,basics.md,advanced.md\n</code></pre>\n<h2 id=\"development-workflow\">Development Workflow</h2>\n<ol>\n<li><strong>Edit Configuration</strong>: Modify <code>docs/config.yaml</code> or use <code>cargo run init-config</code></li>\n<li><strong>Update Content</strong>: Edit markdown files in the <code>docs/</code> folder</li>\n<li><strong>Rebuild Site</strong>: Run <code>cargo run --release</code> to regenerate <code>index.html</code></li>\n<li><strong>Preview Changes</strong>: Use <code>python3 -m http.server 8000</code> to serve locally</li>\n</ol>\n<h2 id=\"troubleshooting\">Troubleshooting</h2>\n<h3 id=\"common-issues\">Common Issues</h3>\n<p><strong>Config validation errors:</strong> Ensure all <code>id</code> fields are unique and all referenced files exist.</p>\n<p><strong>Missing pages:</strong> Check that file paths in config.yaml are correct and relative to the <code>docs/</code> folder.</p>\n<p><strong>Build failures:</strong> Verify YAML syntax in config.yaml using a YAML validator.</p>\n<h3 id=\"backup-and-recovery\">Backup and Recovery</h3>\n<p>The config generator automatically creates backups:</p>\n<ul>\n<li><code>docs/config.yaml.backup</code> - Created before generating new config</li>\n<li>Manual backup: <code>cp docs/config.yaml docs/config.yaml.manual-backup</code></li>\n</ul>\n\n            </section>\n            <section class=\"content-section\" id=\"customization/theming\">\n                <h1 id=\"theming\">Theming</h1>\n<p>GlowDoc features a sophisticated theming system built on CSS custom properties, supporting multiple color schemes and seamless dark mode switching.</p>\n<h2 id=\"built-in-themes\">Built-in Themes</h2>\n<p>GlowDoc includes three professionally designed themes:</p>\n<h3 id=\"default-theme\">Default Theme</h3>\n<p>Clean, neutral design perfect for professional documentation:</p>\n<pre><code class=\"language-yaml\"># In docs/config.yaml\ntheme: default\n</code></pre>\n<h3 id=\"purple-theme\">Purple Theme</h3>\n<p>Purple-accented design with elegant color tones:</p>\n<pre><code class=\"language-yaml\">theme: purple\n</code></pre>\n<h3 id=\"vibrant-theme\">Vibrant Theme</h3>\n<p>Colorful, energetic design with bold accents:</p>\n<pre><code class=\"language-yaml\">theme: vibrant\n</code></pre>\n<h2 id=\"color-system-architecture\">Color System Architecture</h2>\n<p>GlowDoc uses a semantic color system with HSL values for precise color control and smooth transitions.</p>\n<h3 id=\"core-color-properties\">Core Color Properties</h3>\n<p>All themes use the same CSS custom property structure:</p>\n<pre><code class=\"language-css\">:root {\n  /* Background colors */\n  --background: 0 0% 100%;\n  --foreground: 222.2 84% 4.9%;\n  \n  /* Component backgrounds */\n  --card: 0 0% 100%;\n  --card-foreground: 222.2 84% 4.9%;\n  --popover: 0 0% 100%;\n  --popover-foreground: 222.2 84% 4.9%;\n  \n  /* Semantic colors */\n  --primary: 222.2 47.4% 11.2%;\n  --primary-foreground: 210 40% 98%;\n  --secondary: 210 40% 96%;\n  --secondary-foreground: 222.2 84% 4.9%;\n  --muted: 210 40% 96%;\n  --muted-foreground: 215.4 16.3% 46.9%;\n  \n  /* Interactive elements */\n  --accent: 210 40% 96%;\n  --accent-foreground: 222.2 84% 4.9%;\n  --destructive: 0 84.2% 60.2%;\n  --destructive-foreground: 210 40% 98%;\n  \n  /* UI elements */\n  --border: 214.3 31.8% 91.4%;\n  --input: 214.3 31.8% 91.4%;\n  --ring: 222.2 84% 4.9%;\n  --radius: 0.5rem;\n}\n</code></pre>\n<h3 id=\"dark-mode-support\">Dark Mode Support</h3>\n<p>Each theme automatically includes dark mode variants:</p>\n<pre><code class=\"language-css\">[data-theme=&quot;dark&quot;] {\n  --background: 222.2 84% 4.9%;\n  --foreground: 210 40% 98%;\n  /* ... other dark mode overrides */\n}\n</code></pre>\n<p><strong>Dark Mode Features:</strong></p>\n<ul>\n<li>Automatic system preference detection</li>\n<li>Manual toggle with LocalStorage persistence</li>\n<li>Smooth 0.3s transitions between themes</li>\n<li>Optimized contrast ratios for readability</li>\n</ul>\n<h2 id=\"typography-system\">Typography System</h2>\n<h3 id=\"font-stack\">Font Stack</h3>\n<p>GlowDoc uses a carefully selected system font stack for optimal performance and cross-platform consistency:</p>\n<pre><code class=\"language-css\">font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, \n             Roboto, &quot;Helvetica Neue&quot;, Arial, sans-serif;\n</code></pre>\n<h3 id=\"typography-scale\">Typography Scale</h3>\n<p><strong>Homepage Typography:</strong></p>\n<ul>\n<li><strong>Main Heading (H1):</strong> 3rem (48px), weight 800, gradient text effect</li>\n<li><strong>Section Headings (H2):</strong> 1.75rem (28px), weight 600</li>\n<li><strong>Body Text:</strong> 1.125rem (18px) for enhanced readability</li>\n</ul>\n<p><strong>Content Typography:</strong></p>\n<ul>\n<li><strong>Page Titles (H1):</strong> 2.5rem (40px), weight 700</li>\n<li><strong>Section Headings (H2):</strong> 1.75rem (28px), weight 600</li>\n<li><strong>Body Text:</strong> 1rem (16px) for optimal reading</li>\n<li><strong>Navigation:</strong> 0.875rem (14px), weight 500-600</li>\n<li><strong>Code:</strong> 0.875rem (14px) monospace</li>\n</ul>\n<h3 id=\"special-typography-effects\">Special Typography Effects</h3>\n<p><strong>Gradient Text (Homepage):</strong></p>\n<pre><code class=\"language-css\">background: linear-gradient(135deg, \n  hsl(var(--primary)), \n  hsl(var(--accent))\n);\n-webkit-background-clip: text;\ncolor: transparent;\n</code></pre>\n<h2 id=\"spacing-system\">Spacing System</h2>\n<p>GlowDoc uses a consistent spacing scale based on rem units:</p>\n<pre><code class=\"language-css\">/* Spacing scale */\n--space-1: 0.25rem;  /* 4px */\n--space-2: 0.5rem;   /* 8px */\n--space-3: 0.75rem;  /* 12px */\n--space-4: 1rem;     /* 16px */\n--space-6: 1.5rem;   /* 24px */\n--space-8: 2rem;     /* 32px */\n--space-16: 4rem;    /* 64px */\n</code></pre>\n<p><strong>Common Usage:</strong></p>\n<ul>\n<li>Small margins: <code>0.25rem</code> (4px)</li>\n<li>Button padding: <code>0.5rem</code> (8px)</li>\n<li>Standard spacing: <code>1rem</code> (16px)</li>\n<li>Section gaps: <code>1.5rem</code> (24px)</li>\n<li>Content padding: <code>2rem</code> (32px)</li>\n<li>Large sections: <code>4rem</code> (64px)</li>\n</ul>\n<h2 id=\"custom-theme-creation\">Custom Theme Creation</h2>\n<h3 id=\"1-modify-existing-theme\">1. Modify Existing Theme</h3>\n<p>To customize an existing theme, you'll need to modify the CSS generation in the Rust source:</p>\n<p><strong>Location:</strong> <code>src/main.rs</code> in the <code>generate_css()</code> function</p>\n<h3 id=\"2-color-customization\">2. Color Customization</h3>\n<p>Update the HSL values for any theme:</p>\n<pre><code class=\"language-css\">:root {\n  /* Change primary brand color */\n  --primary: 220 70% 50%;  /* Blue instead of dark gray */\n  --primary-foreground: 0 0% 100%;\n  \n  /* Adjust accent color */\n  --accent: 160 60% 45%;   /* Teal accent */\n  --accent-foreground: 0 0% 100%;\n}\n</code></pre>\n<h3 id=\"3-typography-customization\">3. Typography Customization</h3>\n<p><strong>Custom Font Integration:</strong></p>\n<pre><code class=\"language-css\">@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;display=swap');\n\nbody {\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n</code></pre>\n<p><strong>Custom Font Sizes:</strong></p>\n<pre><code class=\"language-css\">/* Larger base font size */\n.main-content {\n  font-size: 1.125rem;\n  line-height: 1.75;\n}\n\n/* Custom heading sizes */\nh1 { font-size: 3rem; }\nh2 { font-size: 2rem; }\nh3 { font-size: 1.5rem; }\n</code></pre>\n<h2 id=\"advanced-theming\">Advanced Theming</h2>\n<h3 id=\"custom-css-properties\">Custom CSS Properties</h3>\n<p>Add your own custom properties for consistent theming:</p>\n<pre><code class=\"language-css\">:root {\n  /* Custom brand colors */\n  --brand-blue: 220 90% 56%;\n  --brand-green: 142 71% 45%;\n  --brand-orange: 25 95% 53%;\n  \n  /* Custom spacing */\n  --content-width: 900px;\n  --sidebar-width: 320px;\n  \n  /* Custom shadows */\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n</code></pre>\n<h3 id=\"responsive-design-variables\">Responsive Design Variables</h3>\n<pre><code class=\"language-css\">:root {\n  --mobile-breakpoint: 768px;\n  --sidebar-width: 280px;\n  --mobile-padding: 1rem;\n  --desktop-padding: 2rem;\n}\n\n@media (max-width: 768px) {\n  .main-content {\n    padding: var(--mobile-padding);\n  }\n}\n</code></pre>\n<h3 id=\"animation-customization\">Animation Customization</h3>\n<pre><code class=\"language-css\">:root {\n  /* Transition speeds */\n  --transition-fast: 0.15s;\n  --transition-normal: 0.2s;\n  --transition-slow: 0.3s;\n  \n  /* Easing functions */\n  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);\n  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n\n/* Apply to interactive elements */\n.nav-link {\n  transition: all var(--transition-normal) var(--ease-out);\n}\n</code></pre>\n<h2 id=\"theme-implementation-details\">Theme Implementation Details</h2>\n<h3 id=\"theme-switching-mechanism\">Theme Switching Mechanism</h3>\n<p>GlowDoc implements theme switching through:</p>\n<ol>\n<li><strong>Data attribute:</strong> <code>data-theme=&quot;light|dark&quot;</code> on the <code>&lt;html&gt;</code> element</li>\n<li><strong>JavaScript toggle:</strong> Smooth transitions between light/dark modes</li>\n<li><strong>LocalStorage:</strong> Persistent user preference storage</li>\n<li><strong>System detection:</strong> Automatic theme based on user's OS preference</li>\n</ol>\n<h3 id=\"color-accessibility\">Color Accessibility</h3>\n<p>All themes maintain WCAG AA contrast ratios:</p>\n<ul>\n<li>Normal text: 4.5:1 contrast ratio</li>\n<li>Large text: 3:1 contrast ratio</li>\n<li>Interactive elements: Enhanced focus states</li>\n</ul>\n<h3 id=\"performance-considerations\">Performance Considerations</h3>\n<ul>\n<li>CSS custom properties enable instant theme switching</li>\n<li>No additional HTTP requests for theme assets</li>\n<li>Optimized for both light and dark viewing conditions</li>\n<li>Smooth transitions without layout shifts</li>\n</ul>\n<h2 id=\"troubleshooting\">Troubleshooting</h2>\n<p><strong>Theme not applying:</strong> Ensure the theme name in <code>config.yaml</code> matches exactly: <code>default</code>, <code>purple</code>, or <code>vibrant</code>.</p>\n<p><strong>Dark mode not working:</strong> Check that JavaScript is enabled and the browser supports CSS custom properties.</p>\n<p><strong>Custom colors not showing:</strong> Verify HSL values are properly formatted: <code>220 70% 50%</code> (without <code>hsl()</code> wrapper).</p>\n<p><strong>Typography issues:</strong> Ensure font declarations come after the base stylesheet in the build process.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"customization/components\">\n                <h1 id=\"components\">Components</h1>\n<p>GlowDoc is built with a comprehensive component system that provides consistent, accessible, and responsive UI elements throughout your documentation site.</p>\n<h2 id=\"layout-components\">Layout Components</h2>\n<h3 id=\"header-component\">Header Component</h3>\n<p>The main header provides navigation and theme switching functionality:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;header class=&quot;header-content&quot;&gt;\n  &lt;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;logo&quot;&gt;Site Title&lt;/div&gt;\n    &lt;button class=&quot;theme-toggle&quot; aria-label=&quot;Toggle theme&quot;&gt;\n      &lt;!-- Theme toggle icon --&gt;\n    &lt;/button&gt;\n  &lt;/div&gt;\n&lt;/header&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Sticky positioning with backdrop blur effect</li>\n<li>80px fixed height</li>\n<li>Responsive container with max-width of 1200px</li>\n<li>Integrated theme toggle button</li>\n</ul>\n<h3 id=\"sidebar-navigation\">Sidebar Navigation</h3>\n<p>The collapsible sidebar houses the main navigation and search functionality:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;aside class=&quot;sidebar&quot;&gt;\n  &lt;div class=&quot;search-container&quot;&gt;\n    &lt;input type=&quot;text&quot; class=&quot;search-input&quot; placeholder=&quot;Search...&quot;&gt;\n    &lt;div class=&quot;search-results&quot;&gt;&lt;/div&gt;\n  &lt;/div&gt;\n  \n  &lt;nav class=&quot;navigation&quot;&gt;\n    &lt;div class=&quot;nav-section&quot;&gt;\n      &lt;button class=&quot;nav-section-title&quot;&gt;Section Name&lt;/button&gt;\n      &lt;div class=&quot;nav-section-content&quot;&gt;\n        &lt;a href=&quot;#page&quot; class=&quot;nav-link&quot;&gt;Page Title&lt;/a&gt;\n      &lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/nav&gt;\n&lt;/aside&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Fixed 280px width on desktop</li>\n<li>Collapsible sections with smooth animations</li>\n<li>Integrated search with live results</li>\n<li>Mobile-responsive with overlay behavior</li>\n</ul>\n<h3 id=\"main-content-area\">Main Content Area</h3>\n<p>The primary content container with optimal reading layout:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;main class=&quot;main-content&quot;&gt;\n  &lt;div class=&quot;content-section&quot; id=&quot;page-id&quot;&gt;\n    &lt;h1&gt;Page Title&lt;/h1&gt;\n    &lt;p&gt;Content goes here...&lt;/p&gt;\n  &lt;/div&gt;\n&lt;/main&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Flexible layout that grows to fill available space</li>\n<li>800px max-width for optimal reading</li>\n<li>Responsive padding (2rem desktop, 1rem mobile)</li>\n<li>Centered content with proper spacing</li>\n</ul>\n<h2 id=\"navigation-components\">Navigation Components</h2>\n<h3 id=\"navigation-links\">Navigation Links</h3>\n<p>Individual navigation items with active state support:</p>\n<p><strong>CSS Classes:</strong></p>\n<pre><code class=\"language-css\">.nav-link {\n  /* Base navigation link styles */\n  display: block;\n  padding: 0.5rem 1rem;\n  color: hsl(var(--muted-foreground));\n  text-decoration: none;\n  border-radius: 0.375rem;\n  transition: all 0.2s ease;\n}\n\n.nav-link:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.nav-link.active {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n  font-weight: 600;\n}\n</code></pre>\n<p><strong>Usage:</strong></p>\n<ul>\n<li>Automatically marked as <code>.active</code> based on current page</li>\n<li>Left border accent on hover and active states</li>\n<li>Smooth color transitions</li>\n<li>Accessible keyboard navigation</li>\n</ul>\n<h3 id=\"section-headers\">Section Headers</h3>\n<p>Collapsible section headers in the navigation:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;button class=&quot;nav-section-title&quot; data-section=&quot;section-id&quot;&gt;\n  &lt;span&gt;Section Name&lt;/span&gt;\n  &lt;svg class=&quot;chevron-icon&quot;&gt;&lt;!-- Chevron icon --&gt;&lt;/svg&gt;\n&lt;/button&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Click to expand/collapse section content</li>\n<li>Animated chevron icon rotation</li>\n<li>Maintains expanded state in LocalStorage</li>\n<li>Proper ARIA attributes for accessibility</li>\n</ul>\n<h2 id=\"interactive-components\">Interactive Components</h2>\n<h3 id=\"theme-toggle\">Theme Toggle</h3>\n<p>The dark/light mode switcher with system preference detection:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;button class=&quot;theme-toggle&quot; aria-label=&quot;Toggle theme&quot;&gt;\n  &lt;svg class=&quot;sun-icon&quot;&gt;&lt;!-- Sun icon --&gt;&lt;/svg&gt;\n  &lt;svg class=&quot;moon-icon&quot;&gt;&lt;!-- Moon icon --&gt;&lt;/svg&gt;\n&lt;/button&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Automatic system preference detection on first visit</li>\n<li>Smooth icon transitions between light/dark states</li>\n<li>LocalStorage persistence for user preference</li>\n<li>0.3s transition for theme switching</li>\n</ul>\n<h3 id=\"search-component\">Search Component</h3>\n<p>Live search functionality with instant results:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;div class=&quot;search-container&quot;&gt;\n  &lt;div class=&quot;search-input-wrapper&quot;&gt;\n    &lt;svg class=&quot;search-icon&quot;&gt;&lt;!-- Search icon --&gt;&lt;/svg&gt;\n    &lt;input type=&quot;text&quot; class=&quot;search-input&quot; placeholder=&quot;Search documentation...&quot;&gt;\n  &lt;/div&gt;\n  &lt;div class=&quot;search-results&quot;&gt;\n    &lt;div class=&quot;search-result&quot; data-target=&quot;page-id&quot;&gt;\n      &lt;div class=&quot;search-result-title&quot;&gt;Page Title&lt;/div&gt;\n      &lt;div class=&quot;search-result-excerpt&quot;&gt;Matching content...&lt;/div&gt;\n    &lt;/div&gt;\n  &lt;/div&gt;\n&lt;/div&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Real-time search as you type (300ms debounce)</li>\n<li>Searches through all page titles and content</li>\n<li>Highlighted search terms in results</li>\n<li>Keyboard navigation support (arrow keys, Enter)</li>\n<li>Click or Enter to navigate to results</li>\n</ul>\n<h3 id=\"mobile-menu\">Mobile Menu</h3>\n<p>Responsive navigation for mobile devices:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;button class=&quot;mobile-menu-toggle&quot;&gt;\n  &lt;span class=&quot;hamburger-line&quot;&gt;&lt;/span&gt;\n  &lt;span class=&quot;hamburger-line&quot;&gt;&lt;/span&gt;\n  &lt;span class=&quot;hamburger-line&quot;&gt;&lt;/span&gt;\n&lt;/button&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Animated hamburger menu icon</li>\n<li>Transforms sidebar into full-screen overlay</li>\n<li>Smooth slide-in animation from left</li>\n<li>Closes on backdrop click or page navigation</li>\n</ul>\n<h2 id=\"content-components\">Content Components</h2>\n<h3 id=\"code-blocks\">Code Blocks</h3>\n<p>Syntax-highlighted code blocks with proper formatting:</p>\n<p><strong>Markdown Usage:</strong></p>\n<pre><code class=\"language-markdown\">```javascript\nfunction greetUser(name) {\n  console.log(`Hello, ${name}!`);\n}\n```\n</code></pre>\n<p><strong>Generated HTML:</strong></p>\n<pre><code class=\"language-html\">&lt;pre&gt;&lt;code class=&quot;language-javascript&quot;&gt;\nfunction greetUser(name) {\n  console.log(`Hello, ${name}!`);\n}\n&lt;/code&gt;&lt;/pre&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Automatic syntax highlighting via CSS</li>\n<li>Consistent background and padding</li>\n<li>Horizontal scrolling for long lines</li>\n<li>Copy-friendly formatting</li>\n</ul>\n<h3 id=\"content-sections\">Content Sections</h3>\n<p>Organized content areas for each documentation page:</p>\n<p><strong>Structure:</strong></p>\n<pre><code class=\"language-html\">&lt;div class=&quot;content-section&quot; id=&quot;unique-page-id&quot;&gt;\n  &lt;h1&gt;Page Title&lt;/h1&gt;\n  &lt;p&gt;Introduction paragraph...&lt;/p&gt;\n  \n  &lt;h2&gt;Section Heading&lt;/h2&gt;\n  &lt;p&gt;Section content...&lt;/p&gt;\n&lt;/div&gt;\n</code></pre>\n<p><strong>Features:</strong></p>\n<ul>\n<li>Hidden by default (only active page shown)</li>\n<li>Smooth fade-in transitions when activated</li>\n<li>Proper heading hierarchy (H1 for page title, H2+ for sections)</li>\n<li>Semantic HTML structure for accessibility</li>\n</ul>\n<h3 id=\"search-result-highlighting\">Search Result Highlighting</h3>\n<p>Dynamic highlighting of search terms in content:</p>\n<p><strong>Generated Markup:</strong></p>\n<pre><code class=\"language-html\">&lt;p&gt;This is some &lt;mark class=&quot;search-highlight&quot;&gt;highlighted&lt;/mark&gt; text.&lt;/p&gt;\n</code></pre>\n<p><strong>CSS Styling:</strong></p>\n<pre><code class=\"language-css\">.search-highlight {\n  background-color: hsl(var(--primary) / 0.2);\n  color: hsl(var(--primary-foreground));\n  padding: 0.125rem 0.25rem;\n  border-radius: 0.25rem;\n}\n</code></pre>\n<h2 id=\"responsive-behavior\">Responsive Behavior</h2>\n<h3 id=\"breakpoint-system\">Breakpoint System</h3>\n<p>GlowDoc uses a mobile-first approach with a single breakpoint:</p>\n<pre><code class=\"language-css\">/* Mobile styles (default) */\n.sidebar {\n  position: fixed;\n  left: -100%;\n  transition: left 0.3s ease;\n}\n\n/* Desktop styles */\n@media (min-width: 768px) {\n  .sidebar {\n    position: fixed;\n    left: 0;\n  }\n}\n</code></pre>\n<h3 id=\"mobile-adaptations\">Mobile Adaptations</h3>\n<p><strong>Sidebar Behavior:</strong></p>\n<ul>\n<li>Becomes full-screen overlay on mobile</li>\n<li>Slide-in animation from left edge</li>\n<li>Backdrop blur and dark overlay</li>\n<li>Closes on outside click or page navigation</li>\n</ul>\n<p><strong>Content Layout:</strong></p>\n<ul>\n<li>Single-column layout on mobile</li>\n<li>Reduced padding (1rem vs 2rem)</li>\n<li>Optimized touch targets (44px minimum)</li>\n<li>Larger font sizes for better readability</li>\n</ul>\n<p><strong>Navigation:</strong></p>\n<ul>\n<li>Collapsible sections remain functional</li>\n<li>Touch-optimized interactive areas</li>\n<li>Simplified hover states for touch devices</li>\n</ul>\n<h2 id=\"accessibility-features\">Accessibility Features</h2>\n<h3 id=\"keyboard-navigation\">Keyboard Navigation</h3>\n<p><strong>Navigation Support:</strong></p>\n<ul>\n<li>Tab order follows logical content flow</li>\n<li>Arrow keys navigate search results</li>\n<li>Enter key activates links and buttons</li>\n<li>Escape key closes mobile menu and search</li>\n</ul>\n<p><strong>Focus Management:</strong></p>\n<ul>\n<li>Visible focus indicators on all interactive elements</li>\n<li>Focus trapped within mobile menu when open</li>\n<li>Focus restored when closing overlays</li>\n</ul>\n<h3 id=\"screen-reader-support\">Screen Reader Support</h3>\n<p><strong>ARIA Labels:</strong></p>\n<pre><code class=\"language-html\">&lt;button aria-label=&quot;Toggle theme&quot; class=&quot;theme-toggle&quot;&gt;\n&lt;input aria-label=&quot;Search documentation&quot; class=&quot;search-input&quot;&gt;\n&lt;nav aria-label=&quot;Main navigation&quot; class=&quot;navigation&quot;&gt;\n</code></pre>\n<p><strong>Semantic Structure:</strong></p>\n<ul>\n<li>Proper heading hierarchy (H1 → H2 → H3)</li>\n<li>Landmark roles for main sections</li>\n<li>Descriptive link text</li>\n<li>Form labels associated with inputs</li>\n</ul>\n<h3 id=\"color-and-contrast\">Color and Contrast</h3>\n<p><strong>WCAG AA Compliance:</strong></p>\n<ul>\n<li>4.5:1 contrast ratio for normal text</li>\n<li>3:1 contrast ratio for large text</li>\n<li>Enhanced focus states with both color and outline</li>\n<li>Color is not the only means of conveying information</li>\n</ul>\n<h2 id=\"performance-optimizations\">Performance Optimizations</h2>\n<h3 id=\"css-architecture\">CSS Architecture</h3>\n<p><strong>Efficient Selectors:</strong></p>\n<ul>\n<li>Class-based selectors for performance</li>\n<li>Minimal nesting depth</li>\n<li>Optimized specificity</li>\n</ul>\n<p><strong>Transition Performance:</strong></p>\n<ul>\n<li>GPU-accelerated transforms</li>\n<li>Efficient property animations (opacity, transform)</li>\n<li>Reasonable transition durations (0.2s-0.3s)</li>\n</ul>\n<h3 id=\"javascript-optimization\">JavaScript Optimization</h3>\n<p><strong>Search Debouncing:</strong></p>\n<ul>\n<li>300ms delay to reduce excessive searches</li>\n<li>Efficient DOM queries using data attributes</li>\n<li>Minimal DOM manipulation</li>\n</ul>\n<p><strong>Event Handling:</strong></p>\n<ul>\n<li>Event delegation for dynamic content</li>\n<li>Passive event listeners where appropriate</li>\n<li>Memory leak prevention</li>\n</ul>\n<h2 id=\"customization-examples\">Customization Examples</h2>\n<h3 id=\"custom-navigation-styling\">Custom Navigation Styling</h3>\n<pre><code class=\"language-css\">.nav-link {\n  /* Add custom styles */\n  border-left: 3px solid transparent;\n  margin-bottom: 0.25rem;\n}\n\n.nav-link:hover {\n  border-left-color: hsl(var(--primary));\n  background: linear-gradient(90deg, \n    hsl(var(--primary) / 0.1), \n    transparent\n  );\n}\n\n.nav-link.active {\n  border-left-color: hsl(var(--primary));\n  background-color: hsl(var(--primary) / 0.15);\n}\n</code></pre>\n<h3 id=\"custom-search-styling\">Custom Search Styling</h3>\n<pre><code class=\"language-css\">.search-container {\n  /* Custom search appearance */\n  background: hsl(var(--card));\n  border: 1px solid hsl(var(--border));\n  border-radius: 0.75rem;\n  padding: 1rem;\n  margin-bottom: 1.5rem;\n}\n\n.search-input {\n  /* Enhanced input styling */\n  background: hsl(var(--background));\n  border: 2px solid hsl(var(--border));\n  border-radius: 0.5rem;\n  padding: 0.75rem 1rem 0.75rem 2.5rem;\n}\n\n.search-input:focus {\n  border-color: hsl(var(--primary));\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\n}\n</code></pre>\n<h3 id=\"custom-content-styling\">Custom Content Styling</h3>\n<pre><code class=\"language-css\">.content-section {\n  /* Enhanced content presentation */\n  line-height: 1.75;\n  max-width: 900px; /* Wider content area */\n}\n\n.content-section h1 {\n  /* Custom heading styles */\n  border-bottom: 2px solid hsl(var(--border));\n  padding-bottom: 1rem;\n  margin-bottom: 2rem;\n}\n\n.content-section h2 {\n  /* Section heading enhancements */\n  margin-top: 3rem;\n  margin-bottom: 1.5rem;\n  color: hsl(var(--primary));\n}\n</code></pre>\n<p>This component system provides a solid foundation for building beautiful, functional documentation sites while maintaining consistency and accessibility across all interface elements.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"customization/styling\">\n                <h1 id=\"custom-styling\">Custom Styling</h1>\n<p>Advanced styling techniques and customization patterns for creating unique GlowDoc designs that match your brand and requirements.</p>\n<h2 id=\"architecture-overview\">Architecture Overview</h2>\n<p>GlowDoc's CSS architecture is designed for maximum customization while maintaining performance and accessibility. Understanding the core structure enables powerful customizations.</p>\n<h3 id=\"css-organization\">CSS Organization</h3>\n<p>The generated stylesheet follows this structure:</p>\n<pre><code class=\"language-css\">/* 1. CSS Reset &amp; Base Styles */\n/* 2. CSS Custom Properties (Design Tokens) */\n/* 3. Layout Components */\n/* 4. Navigation Components */\n/* 5. Content Components */\n/* 6. Interactive Components */\n/* 7. Responsive Media Queries */\n/* 8. Theme Variations */\n</code></pre>\n<h3 id=\"modification-approach\">Modification Approach</h3>\n<p>Since GlowDoc generates a single HTML file with embedded CSS, customizations should be added to the Rust source in the <code>generate_css()</code> function:</p>\n<p><strong>Location:</strong> <code>src/main.rs</code> - Look for the <code>generate_css()</code> function</p>\n<h2 id=\"advanced-styling-techniques\">Advanced Styling Techniques</h2>\n<h3 id=\"custom-brand-integration\">Custom Brand Integration</h3>\n<h4 id=\"brand-color-system\">Brand Color System</h4>\n<p>Create a comprehensive brand color palette:</p>\n<pre><code class=\"language-css\">:root {\n  /* Primary brand colors */\n  --brand-primary: 220 90% 56%;\n  --brand-primary-dark: 220 90% 45%;\n  --brand-primary-light: 220 90% 65%;\n  \n  /* Secondary brand colors */\n  --brand-secondary: 160 60% 45%;\n  --brand-accent: 25 95% 53%;\n  --brand-neutral: 220 10% 50%;\n  \n  /* Semantic color mappings */\n  --primary: var(--brand-primary);\n  --accent: var(--brand-secondary);\n  \n  /* Brand gradients */\n  --brand-gradient: linear-gradient(135deg, \n    hsl(var(--brand-primary)), \n    hsl(var(--brand-secondary))\n  );\n}\n</code></pre>\n<h4 id=\"logo-and-brand-assets\">Logo and Brand Assets</h4>\n<p>Integrate custom logos and brand elements:</p>\n<pre><code class=\"language-css\">.logo {\n  background-image: url('data:image/svg+xml;base64,...');\n  background-size: contain;\n  background-repeat: no-repeat;\n  width: 120px;\n  height: 40px;\n  text-indent: -9999px; /* Hide text */\n}\n\n/* Alternative: Custom font logo */\n.logo {\n  font-family: 'Your Brand Font', sans-serif;\n  font-weight: 700;\n  font-size: 1.5rem;\n  color: hsl(var(--brand-primary));\n}\n</code></pre>\n<h3 id=\"advanced-layout-customizations\">Advanced Layout Customizations</h3>\n<h4 id=\"multi-column-content-layout\">Multi-Column Content Layout</h4>\n<p>Create complex content layouts:</p>\n<pre><code class=\"language-css\">.content-section {\n  display: grid;\n  grid-template-columns: 1fr 300px;\n  gap: 2rem;\n  max-width: 1200px;\n}\n\n.content-main {\n  min-width: 0; /* Prevent grid blowout */\n}\n\n.content-sidebar {\n  background: hsl(var(--card));\n  border: 1px solid hsl(var(--border));\n  border-radius: 0.5rem;\n  padding: 1.5rem;\n  height: fit-content;\n  position: sticky;\n  top: 100px; /* Account for header height */\n}\n\n@media (max-width: 1024px) {\n  .content-section {\n    grid-template-columns: 1fr;\n  }\n  \n  .content-sidebar {\n    order: -1; /* Move sidebar above content on mobile */\n  }\n}\n</code></pre>\n<h4 id=\"custom-navigation-layouts\">Custom Navigation Layouts</h4>\n<p>Enhanced sidebar with custom sections:</p>\n<pre><code class=\"language-css\">.sidebar {\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n  gap: 1rem;\n}\n\n.sidebar-header {\n  padding: 1rem;\n  border-bottom: 1px solid hsl(var(--border));\n}\n\n.sidebar-content {\n  overflow-y: auto;\n  padding: 0 1rem;\n}\n\n.sidebar-footer {\n  padding: 1rem;\n  border-top: 1px solid hsl(var(--border));\n  background: hsl(var(--muted) / 0.5);\n}\n\n/* Custom navigation grouping */\n.nav-group {\n  margin-bottom: 2rem;\n}\n\n.nav-group-title {\n  font-size: 0.75rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: hsl(var(--muted-foreground));\n  margin-bottom: 0.5rem;\n  padding: 0 1rem;\n}\n</code></pre>\n<h3 id=\"typography-enhancement\">Typography Enhancement</h3>\n<h4 id=\"custom-font-integration\">Custom Font Integration</h4>\n<p>Professional typography with web fonts:</p>\n<pre><code class=\"language-css\">/* Import custom fonts */\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&amp;family=JetBrains+Mono:wght@400;500;600&amp;display=swap');\n\n:root {\n  /* Typography system */\n  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;\n  \n  /* Type scale */\n  --text-xs: 0.75rem;    /* 12px */\n  --text-sm: 0.875rem;   /* 14px */\n  --text-base: 1rem;     /* 16px */\n  --text-lg: 1.125rem;   /* 18px */\n  --text-xl: 1.25rem;    /* 20px */\n  --text-2xl: 1.5rem;    /* 24px */\n  --text-3xl: 1.875rem;  /* 30px */\n  --text-4xl: 2.25rem;   /* 36px */\n  --text-5xl: 3rem;      /* 48px */\n}\n\nbody {\n  font-family: var(--font-sans);\n}\n\ncode, pre {\n  font-family: var(--font-mono);\n}\n</code></pre>\n<h4 id=\"advanced-typography-styles\">Advanced Typography Styles</h4>\n<p>Rich text formatting and hierarchy:</p>\n<pre><code class=\"language-css\">.content-section {\n  /* Enhanced reading experience */\n  font-size: var(--text-lg);\n  line-height: 1.7;\n  color: hsl(var(--foreground));\n}\n\n.content-section h1 {\n  font-size: var(--text-4xl);\n  font-weight: 800;\n  line-height: 1.1;\n  margin-bottom: 1.5rem;\n  background: var(--brand-gradient);\n  -webkit-background-clip: text;\n  -webkit-text-fill-color: transparent;\n  background-clip: text;\n}\n\n.content-section h2 {\n  font-size: var(--text-2xl);\n  font-weight: 700;\n  margin-top: 3rem;\n  margin-bottom: 1rem;\n  position: relative;\n}\n\n.content-section h2::before {\n  content: '';\n  position: absolute;\n  left: -2rem;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 4px;\n  height: 1.5rem;\n  background: hsl(var(--primary));\n  border-radius: 2px;\n}\n\n/* Enhanced blockquotes */\n.content-section blockquote {\n  border-left: 4px solid hsl(var(--primary));\n  padding-left: 1.5rem;\n  margin: 2rem 0;\n  font-style: italic;\n  font-size: var(--text-xl);\n  color: hsl(var(--muted-foreground));\n}\n\n/* Improved lists */\n.content-section ul {\n  list-style: none;\n  padding-left: 0;\n}\n\n.content-section li {\n  position: relative;\n  padding-left: 1.5rem;\n  margin-bottom: 0.5rem;\n}\n\n.content-section li::before {\n  content: '→';\n  position: absolute;\n  left: 0;\n  color: hsl(var(--primary));\n  font-weight: 600;\n}\n</code></pre>\n<h3 id=\"interactive-element-enhancements\">Interactive Element Enhancements</h3>\n<h4 id=\"advanced-button-styling\">Advanced Button Styling</h4>\n<p>Custom button system with multiple variants:</p>\n<pre><code class=\"language-css\">/* Button base styles */\n.btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 0.5rem;\n  font-weight: 600;\n  font-size: var(--text-sm);\n  text-decoration: none;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n/* Primary button */\n.btn-primary {\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.btn-primary:hover {\n  background: hsl(var(--primary) / 0.9);\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);\n}\n\n/* Gradient button */\n.btn-gradient {\n  background: var(--brand-gradient);\n  color: white;\n  position: relative;\n}\n\n.btn-gradient::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: var(--brand-gradient);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\n.btn-gradient:hover::before {\n  opacity: 0.1;\n}\n\n/* Outline button */\n.btn-outline {\n  background: transparent;\n  border: 2px solid hsl(var(--primary));\n  color: hsl(var(--primary));\n}\n\n.btn-outline:hover {\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n</code></pre>\n<h4 id=\"enhanced-form-styling\">Enhanced Form Styling</h4>\n<p>Professional form controls:</p>\n<pre><code class=\"language-css\">.form-group {\n  margin-bottom: 1.5rem;\n}\n\n.form-label {\n  display: block;\n  font-weight: 600;\n  font-size: var(--text-sm);\n  color: hsl(var(--foreground));\n  margin-bottom: 0.5rem;\n}\n\n.form-input {\n  width: 100%;\n  padding: 0.75rem 1rem;\n  border: 2px solid hsl(var(--border));\n  border-radius: 0.5rem;\n  background: hsl(var(--background));\n  color: hsl(var(--foreground));\n  font-size: var(--text-base);\n  transition: all 0.2s ease;\n}\n\n.form-input:focus {\n  outline: none;\n  border-color: hsl(var(--primary));\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\n}\n\n.form-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n</code></pre>\n<h3 id=\"animation-and-micro-interactions\">Animation and Micro-Interactions</h3>\n<h4 id=\"page-transition-effects\">Page Transition Effects</h4>\n<p>Smooth page transitions:</p>\n<pre><code class=\"language-css\">.content-section {\n  opacity: 0;\n  transform: translateY(20px);\n  transition: all 0.3s ease;\n}\n\n.content-section.active {\n  opacity: 1;\n  transform: translateY(0);\n}\n\n/* Staggered animation for navigation items */\n.nav-link {\n  opacity: 0;\n  transform: translateX(-20px);\n  animation: slideInLeft 0.3s ease forwards;\n}\n\n.nav-link:nth-child(1) { animation-delay: 0.1s; }\n.nav-link:nth-child(2) { animation-delay: 0.15s; }\n.nav-link:nth-child(3) { animation-delay: 0.2s; }\n/* ... continue pattern */\n\n@keyframes slideInLeft {\n  to {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n</code></pre>\n<h4 id=\"hover-effects-and-micro-interactions\">Hover Effects and Micro-Interactions</h4>\n<p>Engaging interactive feedback:</p>\n<pre><code class=\"language-css\">/* Card hover effects */\n.card {\n  background: hsl(var(--card));\n  border: 1px solid hsl(var(--border));\n  border-radius: 0.75rem;\n  padding: 1.5rem;\n  transition: all 0.3s ease;\n  position: relative;\n  overflow: hidden;\n}\n\n.card::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(45deg, \n    hsl(var(--primary) / 0.1), \n    hsl(var(--accent) / 0.1)\n  );\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 12px 24px hsl(var(--foreground) / 0.1);\n  border-color: hsl(var(--primary));\n}\n\n.card:hover::before {\n  opacity: 1;\n}\n\n/* Ripple effect for buttons */\n.btn {\n  position: relative;\n  overflow: hidden;\n}\n\n.btn::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0;\n  height: 0;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.3);\n  transform: translate(-50%, -50%);\n  transition: width 0.6s, height 0.6s;\n}\n\n.btn:active::after {\n  width: 300px;\n  height: 300px;\n}\n</code></pre>\n<h3 id=\"responsive-design-patterns\">Responsive Design Patterns</h3>\n<h4 id=\"advanced-responsive-typography\">Advanced Responsive Typography</h4>\n<p>Fluid typography that scales smoothly:</p>\n<pre><code class=\"language-css\">:root {\n  /* Fluid typography using clamp() */\n  --text-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);\n  --text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);\n  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\n  --text-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);\n  --text-fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);\n  --text-fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);\n  --text-fluid-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);\n}\n\nbody {\n  font-size: var(--text-fluid-base);\n}\n\nh1 { font-size: var(--text-fluid-4xl); }\nh2 { font-size: var(--text-fluid-3xl); }\nh3 { font-size: var(--text-fluid-2xl); }\n</code></pre>\n<h4 id=\"container-queries-future-forward\">Container Queries (Future-Forward)</h4>\n<p>Modern responsive design using container queries:</p>\n<pre><code class=\"language-css\">.content-section {\n  container-type: inline-size;\n}\n\n/* Adjust layout based on container width, not viewport */\n@container (min-width: 600px) {\n  .content-grid {\n    display: grid;\n    grid-template-columns: 2fr 1fr;\n    gap: 2rem;\n  }\n}\n\n@container (min-width: 900px) {\n  .content-grid {\n    grid-template-columns: 1fr 2fr 1fr;\n  }\n}\n</code></pre>\n<h3 id=\"dark-mode-advanced-customizations\">Dark Mode Advanced Customizations</h3>\n<h4 id=\"theme-aware-components\">Theme-Aware Components</h4>\n<p>Components that adapt intelligently to theme changes:</p>\n<pre><code class=\"language-css\">/* Light theme specific styles */\n[data-theme=&quot;light&quot;] .hero-section {\n  background: linear-gradient(135deg, \n    hsl(var(--background)), \n    hsl(var(--secondary))\n  );\n}\n\n/* Dark theme specific styles */\n[data-theme=&quot;dark&quot;] .hero-section {\n  background: linear-gradient(135deg, \n    hsl(var(--background)), \n    hsl(var(--card))\n  );\n}\n\n/* Theme-aware shadows */\n.elevated-card {\n  box-shadow: \n    0 4px 6px hsl(var(--foreground) / 0.1),\n    0 1px 3px hsl(var(--foreground) / 0.05);\n}\n\n[data-theme=&quot;dark&quot;] .elevated-card {\n  box-shadow: \n    0 4px 6px rgba(0, 0, 0, 0.3),\n    0 1px 3px rgba(0, 0, 0, 0.2);\n}\n</code></pre>\n<h3 id=\"performance-optimization\">Performance Optimization</h3>\n<h4 id=\"efficient-css-architecture\">Efficient CSS Architecture</h4>\n<p>Optimized styles for better performance:</p>\n<pre><code class=\"language-css\">/* Use CSS custom properties for frequently changing values */\n:root {\n  --animation-speed: 0.2s;\n  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Optimize animations for 60fps */\n.animated-element {\n  will-change: transform, opacity;\n  transform: translateZ(0); /* Force hardware acceleration */\n  transition: transform var(--animation-speed) var(--animation-easing);\n}\n\n/* Efficient selectors */\n.nav-link { /* Good: class selector */ }\nnav &gt; ul &gt; li &gt; a { /* Avoid: deep nesting */ }\n* { /* Avoid: universal selector */ }\n</code></pre>\n<h4 id=\"critical-css-patterns\">Critical CSS Patterns</h4>\n<p>Inline critical styles for immediate rendering:</p>\n<pre><code class=\"language-css\">/* Critical above-the-fold styles */\n.layout,\n.header-content,\n.sidebar,\n.main-content {\n  /* Essential layout properties only */\n  display: flex;\n  position: relative;\n}\n\n/* Non-critical styles can be loaded later */\n.fancy-animations,\n.decorative-elements {\n  /* Complex animations and decorative styles */\n}\n</code></pre>\n<h2 id=\"custom-styling-workflow\">Custom Styling Workflow</h2>\n<h3 id=\"1-planning-your-customizations\">1. Planning Your Customizations</h3>\n<p>Before modifying styles:</p>\n<ol>\n<li><strong>Audit existing styles</strong>: Understand the current CSS architecture</li>\n<li><strong>Define your design system</strong>: Colors, typography, spacing, components</li>\n<li><strong>Plan responsive behavior</strong>: Mobile-first approach</li>\n<li><strong>Consider accessibility</strong>: Maintain contrast ratios and focus states</li>\n</ol>\n<h3 id=\"2-implementation-strategy\">2. Implementation Strategy</h3>\n<p><strong>Recommended approach:</strong></p>\n<ol>\n<li>Start with CSS custom property overrides</li>\n<li>Add new component styles</li>\n<li>Implement responsive variations</li>\n<li>Test across themes (light/dark)</li>\n<li>Validate accessibility compliance</li>\n</ol>\n<h3 id=\"3-testing-checklist\">3. Testing Checklist</h3>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll themes (default, purple, vibrant)</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nLight and dark modes</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nMobile and desktop layouts</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nKeyboard navigation</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nScreen reader compatibility</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nPerformance impact</li>\n</ul>\n<h2 id=\"troubleshooting-custom-styles\">Troubleshooting Custom Styles</h2>\n<p><strong>Styles not applying</strong>: Check CSS specificity and ensure your styles come after the base styles in the build order.</p>\n<p><strong>Theme conflicts</strong>: Verify that custom styles work with both light and dark modes.</p>\n<p><strong>Performance issues</strong>: Minimize complex selectors and excessive animations.</p>\n<p><strong>Responsive problems</strong>: Test on actual devices, not just browser dev tools.</p>\n<p><strong>Accessibility concerns</strong>: Use tools like axe-core to validate accessibility compliance.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"advanced/api\">\n                <h1 id=\"api-reference\">API Reference</h1>\n<p>Comprehensive JavaScript API reference for programmatic control and customization of GlowDoc documentation sites.</p>\n<h2 id=\"overview\">Overview</h2>\n<p>GlowDoc generates a single-page application with a rich JavaScript API for navigation, search, theming, and customization. All functionality is embedded within the generated HTML file, providing a complete client-side documentation experience.</p>\n<h2 id=\"core-navigation-api\">Core Navigation API</h2>\n<h3><code>showContent(contentId, updateUrl = true)</code></h3>\n<p>Displays a specific documentation page by content ID.</p>\n<p><strong>Parameters:</strong></p>\n<ul>\n<li><code>contentId</code> (string) - The unique identifier for the content section</li>\n<li><code>updateUrl</code> (boolean, optional) - Whether to update browser URL and history (default: true)</li>\n</ul>\n<p><strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Show the installation page\nshowContent('installation');\n\n// Show content without updating URL (for programmatic navigation)\nshowContent('api-reference', false);\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Switches from homepage to documentation layout if needed</li>\n<li>Hides all content sections and displays the target section</li>\n<li>Updates active state in navigation sidebar</li>\n<li>Updates browser URL and history (unless <code>updateUrl</code> is false)</li>\n<li>Automatically closes mobile sidebar</li>\n<li>Logs content display for debugging</li>\n</ul>\n<h3><code>showHomepage()</code></h3>\n<p>Displays the homepage content and hides documentation layout.</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Return to homepage\nshowHomepage();\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Shows homepage element, hides documentation layout</li>\n<li>Updates browser URL to root path</li>\n<li>Uses HTML5 History API for navigation</li>\n</ul>\n<h3><code>showDocs()</code></h3>\n<p>Switches the interface to documentation mode (internal function).</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Usage:</strong> Typically called internally by <code>showContent()</code>, but available for custom implementations.</p>\n<h3><code>showContentFromSearch(contentId)</code></h3>\n<p>Displays content selected from search results and clears search state.</p>\n<p><strong>Parameters:</strong></p>\n<ul>\n<li><code>contentId</code> (string) - The content ID to display</li>\n</ul>\n<p><strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Show search result and clear search\nshowContentFromSearch('quick-start');\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Clears search input field</li>\n<li>Hides search results, shows navigation</li>\n<li>Calls <code>showContent()</code> to display the selected page</li>\n</ul>\n<h2 id=\"theme-management-api\">Theme Management API</h2>\n<h3><code>toggleTheme()</code></h3>\n<p>Toggles between light and dark theme modes.</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Toggle theme\ntoggleTheme();\n\n// Programmatically check current theme\nconst currentTheme = document.documentElement.getAttribute('data-theme');\nconsole.log('Current theme:', currentTheme); // 'light' or 'dark'\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Toggles <code>data-theme</code> attribute between 'light' and 'dark'</li>\n<li>Saves theme preference to localStorage</li>\n<li>Provides smooth transitions via CSS</li>\n<li>Respects system preferences on first visit</li>\n</ul>\n<p><strong>Theme Persistence:</strong></p>\n<pre><code class=\"language-javascript\">// Theme is automatically saved to localStorage\nlocalStorage.getItem('theme'); // Returns 'light' or 'dark'\n</code></pre>\n<h2 id=\"navigation-and-sidebar-api\">Navigation and Sidebar API</h2>\n<h3><code>toggleSidebar()</code></h3>\n<p>Toggles sidebar visibility (primarily for mobile interfaces).</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Toggle mobile sidebar\ntoggleSidebar();\n\n// Check sidebar state\nconst sidebar = document.querySelector('.sidebar');\nconst isVisible = sidebar.classList.contains('visible');\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Toggles 'visible' class on sidebar element</li>\n<li>Provides slide-in animation on mobile devices</li>\n<li>Automatically handled for responsive breakpoints</li>\n</ul>\n<h3><code>toggleSection(sectionId)</code></h3>\n<p>Expands or collapses navigation sections in the sidebar.</p>\n<p><strong>Parameters:</strong></p>\n<ul>\n<li><code>sectionId</code> (string) - The ID of the section to toggle</li>\n</ul>\n<p><strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Toggle a navigation section\ntoggleSection('getting-started');\n\n// Check section state\nconst section = document.querySelector('[data-section=&quot;getting-started&quot;]');\nconst isCollapsed = section.classList.contains('collapsed');\n</code></pre>\n<p><strong>Behavior:</strong></p>\n<ul>\n<li>Toggles 'collapsed' class on section and its toggle icon</li>\n<li>Provides smooth expand/collapse animations</li>\n<li>State persisted for user experience</li>\n</ul>\n<h2 id=\"search-api\">Search API</h2>\n<h3><code>performSearch()</code></h3>\n<p>Performs real-time search across all documentation content.</p>\n<p><strong>Parameters:</strong> None (reads from search input element)<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Trigger search programmatically\ndocument.querySelector('.search-input').value = 'installation';\nperformSearch();\n\n// Search is automatically triggered on input\n</code></pre>\n<p><strong>Search Features:</strong></p>\n<ul>\n<li><strong>Real-time Results</strong>: Updates as user types</li>\n<li><strong>Content Indexing</strong>: Searches titles, sections, and full content</li>\n<li><strong>Result Ranking</strong>: Title matches rank higher than content matches</li>\n<li><strong>Snippet Generation</strong>: Shows relevant content excerpts</li>\n<li><strong>Keyword Highlighting</strong>: Highlights matching terms in results</li>\n</ul>\n<p><strong>Search Index Structure:</strong></p>\n<pre><code class=\"language-javascript\">// Global searchIndex object\nconst searchIndex = {\n  &quot;page-id&quot;: {\n    &quot;title&quot;: &quot;Page Title&quot;,\n    &quot;section&quot;: &quot;Section Name&quot;,\n    &quot;content&quot;: &quot;Full searchable content...&quot;\n  }\n  // ... more pages\n};\n</code></pre>\n<h3 id=\"custom-search-integration\">Custom Search Integration</h3>\n<pre><code class=\"language-javascript\">// Access search index for custom functionality\nfunction customSearch(query) {\n  const results = [];\n  for (const [id, data] of Object.entries(searchIndex)) {\n    if (data.title.toLowerCase().includes(query.toLowerCase())) {\n      results.push({ id, ...data });\n    }\n  }\n  return results;\n}\n\n// Example: Find all pages in a specific section\nfunction findBySection(sectionName) {\n  return Object.entries(searchIndex)\n    .filter(([id, data]) =&gt; data.section === sectionName)\n    .map(([id, data]) =&gt; ({ id, ...data }));\n}\n</code></pre>\n<h2 id=\"url-and-history-management\">URL and History Management</h2>\n<h3><code>loadFromUrl()</code></h3>\n<p>Loads appropriate content based on current URL hash.</p>\n<p><strong>Parameters:</strong> None<br />\n<strong>Returns:</strong> <code>void</code></p>\n<p><strong>Example:</strong></p>\n<pre><code class=\"language-javascript\">// Load content based on URL\nloadFromUrl();\n\n// Handle URL changes\nwindow.addEventListener('hashchange', loadFromUrl);\n</code></pre>\n<p><strong>URL Format:</strong></p>\n<ul>\n<li>Homepage: <code>#</code> or no hash</li>\n<li>Content pages: <code>#page-id</code></li>\n<li>Automatically handles invalid page IDs</li>\n</ul>\n<p><strong>History Management:</strong></p>\n<pre><code class=\"language-javascript\">// Navigation automatically updates browser history\n// Back/forward buttons work seamlessly\nwindow.addEventListener('popstate', (event) =&gt; {\n  if (event.state?.contentId) {\n    showContent(event.state.contentId, false);\n  } else if (event.state?.page === 'home') {\n    showHomepage();\n  }\n});\n</code></pre>\n<h2 id=\"event-system\">Event System</h2>\n<h3 id=\"built-in-event-listeners\">Built-in Event Listeners</h3>\n<p>GlowDoc automatically registers several event listeners:</p>\n<pre><code class=\"language-javascript\">// Navigation clicks\ndocument.addEventListener('click', (e) =&gt; {\n  if (e.target.hasAttribute('data-content-id')) {\n    e.preventDefault();\n    showContent(e.target.getAttribute('data-content-id'));\n  }\n});\n\n// Browser navigation\nwindow.addEventListener('popstate', (event) =&gt; {\n  // Handle back/forward navigation\n});\n\n// Initial load\ndocument.addEventListener('DOMContentLoaded', () =&gt; {\n  loadFromUrl();\n});\n\n// Mobile sidebar - outside clicks\ndocument.addEventListener('click', (e) =&gt; {\n  // Close sidebar when clicking outside on mobile\n});\n</code></pre>\n<h3 id=\"custom-event-handling\">Custom Event Handling</h3>\n<pre><code class=\"language-javascript\">// Listen for content changes\nfunction onContentChange(contentId) {\n  console.log('Content changed to:', contentId);\n  // Custom logic here\n}\n\n// Override or extend existing functions\nconst originalShowContent = showContent;\nshowContent = function(contentId, updateUrl = true) {\n  onContentChange(contentId);\n  return originalShowContent(contentId, updateUrl);\n};\n</code></pre>\n<h2 id=\"configuration-and-customization\">Configuration and Customization</h2>\n<h3 id=\"global-configuration\">Global Configuration</h3>\n<pre><code class=\"language-javascript\">// Access current state\nconst getCurrentContent = () =&gt; {\n  const activeSection = document.querySelector('.content-section:not([style*=&quot;display: none&quot;])');\n  return activeSection?.id;\n};\n\nconst getCurrentTheme = () =&gt; {\n  return document.documentElement.getAttribute('data-theme');\n};\n\n// Get navigation state\nconst getNavigationState = () =&gt; {\n  const collapsedSections = Array.from(document.querySelectorAll('.nav-section.collapsed'))\n    .map(section =&gt; section.dataset.section);\n  return { collapsedSections };\n};\n</code></pre>\n<h3 id=\"dom-element-access\">DOM Element Access</h3>\n<p><strong>Required Elements:</strong></p>\n<pre><code class=\"language-javascript\">// Core layout elements\nconst homepage = document.getElementById('homepage');\nconst docsLayout = document.getElementById('docs-layout');\nconst sidebar = document.querySelector('.sidebar');\n\n// Search elements\nconst searchInput = document.querySelector('.search-input');\nconst searchResults = document.querySelector('.search-results');\nconst searchResultsList = document.querySelector('.search-results-list');\n\n// Navigation elements\nconst navigationContainer = document.querySelector('.navigation-container');\nconst contentSections = document.querySelectorAll('.content-section');\nconst navLinks = document.querySelectorAll('.nav-link');\n</code></pre>\n<p><strong>Data Attributes:</strong></p>\n<ul>\n<li><code>data-content-id</code>: Links navigation items to content sections</li>\n<li><code>data-section</code>: Identifies collapsible navigation sections</li>\n<li><code>data-theme</code>: Current theme state on document element</li>\n</ul>\n<h2 id=\"advanced-customization\">Advanced Customization</h2>\n<h3 id=\"custom-navigation\">Custom Navigation</h3>\n<pre><code class=\"language-javascript\">// Add custom navigation item\nfunction addCustomNavItem(sectionId, title, contentId) {\n  const navSection = document.querySelector(`[data-section=&quot;${sectionId}&quot;] .nav-section-content`);\n  if (navSection) {\n    const link = document.createElement('a');\n    link.href = `#${contentId}`;\n    link.className = 'nav-link';\n    link.setAttribute('data-content-id', contentId);\n    link.textContent = title;\n    navSection.appendChild(link);\n  }\n}\n\n// Custom content injection\nfunction addCustomContent(contentId, title, htmlContent) {\n  const contentSection = document.createElement('div');\n  contentSection.className = 'content-section';\n  contentSection.id = contentId;\n  contentSection.style.display = 'none';\n  contentSection.innerHTML = `&lt;h1&gt;${title}&lt;/h1&gt;${htmlContent}`;\n  \n  document.querySelector('.main-content').appendChild(contentSection);\n  \n  // Add to search index\n  searchIndex[contentId] = {\n    title: title,\n    section: 'Custom',\n    content: contentSection.textContent\n  };\n}\n</code></pre>\n<h3 id=\"theme-customization\">Theme Customization</h3>\n<pre><code class=\"language-javascript\">// Custom theme switching\nfunction setCustomTheme(themeName) {\n  document.documentElement.setAttribute('data-theme', themeName);\n  localStorage.setItem('theme', themeName);\n}\n\n// Theme change detection\nconst observer = new MutationObserver((mutations) =&gt; {\n  mutations.forEach((mutation) =&gt; {\n    if (mutation.attributeName === 'data-theme') {\n      const newTheme = document.documentElement.getAttribute('data-theme');\n      console.log('Theme changed to:', newTheme);\n      // Custom theme change logic\n    }\n  });\n});\n\nobserver.observe(document.documentElement, {\n  attributes: true,\n  attributeFilter: ['data-theme']\n});\n</code></pre>\n<h3 id=\"search-customization\">Search Customization</h3>\n<pre><code class=\"language-javascript\">// Custom search implementation\nfunction customPerformSearch() {\n  const query = document.querySelector('.search-input').value.toLowerCase().trim();\n  const resultsContainer = document.querySelector('.search-results-list');\n  \n  if (!query) {\n    // Hide search results\n    document.querySelector('.search-results').style.display = 'none';\n    document.querySelector('.navigation-container').style.display = 'block';\n    return;\n  }\n  \n  const results = [];\n  \n  // Custom search logic\n  for (const [id, data] of Object.entries(searchIndex)) {\n    let score = 0;\n    \n    // Title match (highest priority)\n    if (data.title.toLowerCase().includes(query)) score += 10;\n    \n    // Section match (medium priority)\n    if (data.section.toLowerCase().includes(query)) score += 5;\n    \n    // Content match (lower priority)\n    if (data.content.toLowerCase().includes(query)) score += 1;\n    \n    if (score &gt; 0) {\n      results.push({ id, ...data, score });\n    }\n  }\n  \n  // Sort by score (descending)\n  results.sort((a, b) =&gt; b.score - a.score);\n  \n  // Display results\n  displaySearchResults(results, query);\n}\n\nfunction displaySearchResults(results, query) {\n  const resultsContainer = document.querySelector('.search-results-list');\n  \n  if (results.length === 0) {\n    resultsContainer.innerHTML = '&lt;div class=&quot;no-results&quot;&gt;No results found&lt;/div&gt;';\n  } else {\n    resultsContainer.innerHTML = results.map(result =&gt; {\n      const snippet = generateSnippet(result.content, query);\n      return `\n        &lt;div class=&quot;search-result&quot; onclick=&quot;showContentFromSearch('${result.id}')&quot;&gt;\n          &lt;div class=&quot;search-result-title&quot;&gt;${highlightText(result.title, query)}&lt;/div&gt;\n          &lt;div class=&quot;search-result-section&quot;&gt;${result.section}&lt;/div&gt;\n          &lt;div class=&quot;search-result-snippet&quot;&gt;${snippet}&lt;/div&gt;\n        &lt;/div&gt;\n      `;\n    }).join('');\n  }\n  \n  // Show search results\n  document.querySelector('.search-results').style.display = 'block';\n  document.querySelector('.navigation-container').style.display = 'none';\n}\n\nfunction generateSnippet(content, query, maxLength = 150) {\n  const queryIndex = content.toLowerCase().indexOf(query.toLowerCase());\n  if (queryIndex === -1) {\n    return content.substring(0, maxLength) + (content.length &gt; maxLength ? '...' : '');\n  }\n  \n  const start = Math.max(0, queryIndex - 50);\n  const end = Math.min(content.length, queryIndex + query.length + 50);\n  const snippet = content.substring(start, end);\n  \n  return (start &gt; 0 ? '...' : '') + \n         highlightText(snippet, query) + \n         (end &lt; content.length ? '...' : '');\n}\n\nfunction highlightText(text, query) {\n  const regex = new RegExp(`(${query})`, 'gi');\n  return text.replace(regex, '&lt;mark class=&quot;search-highlight&quot;&gt;$1&lt;/mark&gt;');\n}\n</code></pre>\n<h2 id=\"performance-and-optimization\">Performance and Optimization</h2>\n<h3 id=\"debounced-search\">Debounced Search</h3>\n<pre><code class=\"language-javascript\">// Implement search debouncing\nlet searchTimeout;\nfunction debouncedSearch() {\n  clearTimeout(searchTimeout);\n  searchTimeout = setTimeout(performSearch, 300);\n}\n\n// Replace default search input handler\ndocument.querySelector('.search-input').addEventListener('input', debouncedSearch);\n</code></pre>\n<h3 id=\"lazy-loading\">Lazy Loading</h3>\n<pre><code class=\"language-javascript\">// Lazy load content sections\nconst observerOptions = {\n  root: null,\n  rootMargin: '100px',\n  threshold: 0.1\n};\n\nconst contentObserver = new IntersectionObserver((entries) =&gt; {\n  entries.forEach(entry =&gt; {\n    if (entry.isIntersecting) {\n      // Load heavy content when section becomes visible\n      loadSectionAssets(entry.target);\n    }\n  });\n}, observerOptions);\n\n// Observe all content sections\ndocument.querySelectorAll('.content-section').forEach(section =&gt; {\n  contentObserver.observe(section);\n});\n</code></pre>\n<h2 id=\"error-handling-and-debugging\">Error Handling and Debugging</h2>\n<h3 id=\"debug-mode\">Debug Mode</h3>\n<pre><code class=\"language-javascript\">// Enable debug mode\nwindow.GLOWDOC_DEBUG = true;\n\n// Enhanced showContent with debugging\nfunction debugShowContent(contentId, updateUrl = true) {\n  if (window.GLOWDOC_DEBUG) {\n    console.log('Showing content:', contentId);\n    console.log('Available content IDs:', Object.keys(searchIndex));\n    console.log('Update URL:', updateUrl);\n  }\n  \n  const contentElement = document.getElementById(contentId);\n  if (!contentElement) {\n    console.error(`Content element with ID '${contentId}' not found`);\n    return;\n  }\n  \n  return showContent(contentId, updateUrl);\n}\n</code></pre>\n<h3 id=\"error-recovery\">Error Recovery</h3>\n<pre><code class=\"language-javascript\">// Handle missing content gracefully\nfunction safeShowContent(contentId, fallbackId = 'introduction') {\n  const contentElement = document.getElementById(contentId);\n  if (!contentElement) {\n    console.warn(`Content '${contentId}' not found, showing fallback`);\n    return showContent(fallbackId);\n  }\n  return showContent(contentId);\n}\n\n// Validate navigation state\nfunction validateNavigation() {\n  const issues = [];\n  \n  // Check for orphaned navigation links\n  document.querySelectorAll('[data-content-id]').forEach(link =&gt; {\n    const contentId = link.getAttribute('data-content-id');\n    if (!document.getElementById(contentId)) {\n      issues.push(`Navigation link points to missing content: ${contentId}`);\n    }\n  });\n  \n  // Check for content without navigation\n  document.querySelectorAll('.content-section').forEach(section =&gt; {\n    const contentId = section.id;\n    const navLink = document.querySelector(`[data-content-id=&quot;${contentId}&quot;]`);\n    if (!navLink) {\n      issues.push(`Content section has no navigation link: ${contentId}`);\n    }\n  });\n  \n  return issues;\n}\n</code></pre>\n<h2 id=\"browser-compatibility\">Browser Compatibility</h2>\n<p><strong>Supported Features:</strong></p>\n<ul>\n<li>ES6+ JavaScript (const, let, arrow functions, template literals)</li>\n<li>HTML5 History API</li>\n<li>CSS Custom Properties</li>\n<li>LocalStorage</li>\n<li>Modern DOM APIs</li>\n</ul>\n<p><strong>Minimum Browser Versions:</strong></p>\n<ul>\n<li>Chrome 49+</li>\n<li>Firefox 44+</li>\n<li>Safari 10+</li>\n<li>Edge 12+</li>\n</ul>\n<p><strong>Graceful Degradation:</strong></p>\n<pre><code class=\"language-javascript\">// Feature detection\nif (!window.history?.pushState) {\n  console.warn('History API not supported, using hash navigation');\n  // Fallback to hash-based navigation\n}\n\nif (!window.localStorage) {\n  console.warn('LocalStorage not supported, theme preference will not persist');\n  // Use session-based theme storage\n}\n</code></pre>\n<p>This comprehensive API reference provides complete control over GlowDoc's functionality, enabling deep customization while maintaining the system's performance and user experience benefits.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"advanced/deployment\">\n                <h1 id=\"deployment\">Deployment</h1>\n<p>Comprehensive guide to deploying your GlowDoc documentation site across various hosting platforms, from simple static hosting to advanced CI/CD pipelines.</p>\n<h2 id=\"overview\">Overview</h2>\n<p>GlowDoc generates a single <code>index.html</code> file containing your entire documentation site, making deployment simple and flexible. This approach offers several advantages:</p>\n<ul>\n<li><strong>Single File Deployment</strong>: No complex directory structures or dependencies</li>\n<li><strong>Universal Compatibility</strong>: Works with any static hosting service</li>\n<li><strong>Fast Loading</strong>: All assets embedded, no additional HTTP requests</li>\n<li><strong>Easy Backup</strong>: Single file contains everything</li>\n<li><strong>CDN Friendly</strong>: Perfect for content delivery networks</li>\n</ul>\n<h2 id=\"pre-deployment-checklist\">Pre-Deployment Checklist</h2>\n<p>Before deploying your documentation:</p>\n<h3 id=\"1-build-verification\">1. Build Verification</h3>\n<pre><code class=\"language-bash\"># Build your documentation\ncargo run --release\n\n# Verify the build succeeded\nls -la index.html\n\n# Test locally\npython3 -m http.server 8000\n# Visit http://localhost:8000 to verify everything works\n</code></pre>\n<h3 id=\"2-content-review\">2. Content Review</h3>\n<ul>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll pages load correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nNavigation works properly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nSearch functionality operates</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll themes (light/dark) display correctly</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nMobile responsive design works</li>\n<li><input disabled=\"\" type=\"checkbox\"/>\nAll links are functional</li>\n</ul>\n<h3 id=\"3-performance-optimization\">3. Performance Optimization</h3>\n<pre><code class=\"language-bash\"># Check file size (typical range: 500KB - 2MB)\ndu -h index.html\n\n# Optional: Minify if needed (for very large sites)\n# Note: GlowDoc output is already optimized\n</code></pre>\n<h2 id=\"static-hosting-platforms\">Static Hosting Platforms</h2>\n<h3 id=\"github-pages\">GitHub Pages</h3>\n<p>Deploy directly from your GitHub repository with automated builds.</p>\n<h4 id=\"method-1-github-actions-recommended\">Method 1: GitHub Actions (Recommended)</h4>\n<p>Create <code>.github/workflows/deploy.yml</code>:</p>\n<pre><code class=\"language-yaml\">name: Deploy GlowDoc\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    branches: [ main ]\n\njobs:\n  deploy:\n    runs-on: ubuntu-latest\n    \n    steps:\n    - uses: actions/checkout@v4\n    \n    - name: Install Rust\n      uses: dtolnay/rust-toolchain@stable\n    \n    - name: Cache Cargo dependencies\n      uses: actions/cache@v3\n      with:\n        path: |\n          ~/.cargo/registry\n          ~/.cargo/git\n          target\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\n    \n    - name: Build documentation\n      run: cargo run --release\n    \n    - name: Deploy to GitHub Pages\n      uses: peaceiris/actions-gh-pages@v3\n      if: github.ref == 'refs/heads/main'\n      with:\n        github_token: ${{ secrets.GITHUB_TOKEN }}\n        publish_dir: .\n        publish_branch: gh-pages\n        force_orphan: true\n        enable_jekyll: false\n        exclude_assets: |\n          .github\n          .gitignore\n          Cargo.toml\n          Cargo.lock\n          src\n          docs\n          target\n          README.md\n</code></pre>\n<h4 id=\"method-2-manual-upload\">Method 2: Manual Upload</h4>\n<pre><code class=\"language-bash\"># Build locally\ncargo run --release\n\n# Create gh-pages branch\ngit checkout --orphan gh-pages\ngit rm -rf .\ngit add index.html\ngit commit -m &quot;Deploy documentation&quot;\ngit push origin gh-pages\n\n# Return to main branch\ngit checkout main\n</code></pre>\n<h4 id=\"github-pages-configuration\">GitHub Pages Configuration</h4>\n<ol>\n<li>Go to your repository → Settings → Pages</li>\n<li>Set Source to &quot;Deploy from a branch&quot;</li>\n<li>Select <code>gh-pages</code> branch</li>\n<li>Choose <code>/ (root)</code> folder</li>\n<li>Save settings</li>\n</ol>\n<p><strong>Custom Domain Setup:</strong></p>\n<pre><code class=\"language-bash\"># Add CNAME file to repository root\necho &quot;docs.yoursite.com&quot; &gt; CNAME\ngit add CNAME\ngit commit -m &quot;Add custom domain&quot;\ngit push\n</code></pre>\n<h3 id=\"netlify\">Netlify</h3>\n<p>Professional hosting with advanced features and global CDN.</p>\n<h4 id=\"method-1-git-integration-recommended\">Method 1: Git Integration (Recommended)</h4>\n<ol>\n<li>\n<p><strong>Connect Repository:</strong></p>\n<ul>\n<li>Sign up at <a href=\"https://netlify.com\">netlify.com</a></li>\n<li>Click &quot;New site from Git&quot;</li>\n<li>Connect your GitHub/GitLab repository</li>\n</ul>\n</li>\n<li>\n<p><strong>Build Configuration:</strong></p>\n<pre><code class=\"language-toml\"># netlify.toml\n[build]\n  command = &quot;cargo run --release&quot;\n  publish = &quot;.&quot;\n\n[build.environment]\n  RUST_VERSION = &quot;1.70&quot;\n\n[[headers]]\n  for = &quot;/*&quot;\n  [headers.values]\n    X-Frame-Options = &quot;DENY&quot;\n    X-XSS-Protection = &quot;1; mode=block&quot;\n    X-Content-Type-Options = &quot;nosniff&quot;\n    Referrer-Policy = &quot;strict-origin-when-cross-origin&quot;\n\n[[redirects]]\n  from = &quot;/docs/*&quot;\n  to = &quot;/#:splat&quot;\n  status = 200\n</code></pre>\n</li>\n<li>\n<p><strong>Deploy Settings:</strong></p>\n<ul>\n<li>Build command: <code>cargo run --release</code></li>\n<li>Publish directory: <code>.</code> (root)</li>\n<li>Node version: Latest LTS</li>\n</ul>\n</li>\n</ol>\n<h4 id=\"method-2-manual-upload\">Method 2: Manual Upload</h4>\n<pre><code class=\"language-bash\"># Build documentation\ncargo run --release\n\n# Deploy via Netlify CLI\nnpm install -g netlify-cli\nnetlify login\nnetlify deploy --prod --dir=.\n</code></pre>\n<h4 id=\"advanced-netlify-features\">Advanced Netlify Features</h4>\n<p><strong>Form Handling:</strong></p>\n<pre><code class=\"language-html\">&lt;!-- Add to your documentation for feedback forms --&gt;\n&lt;form name=&quot;feedback&quot; method=&quot;POST&quot; data-netlify=&quot;true&quot;&gt;\n  &lt;input type=&quot;hidden&quot; name=&quot;form-name&quot; value=&quot;feedback&quot; /&gt;\n  &lt;input type=&quot;text&quot; name=&quot;name&quot; placeholder=&quot;Your name&quot; required /&gt;\n  &lt;textarea name=&quot;message&quot; placeholder=&quot;Feedback&quot; required&gt;&lt;/textarea&gt;\n  &lt;button type=&quot;submit&quot;&gt;Send Feedback&lt;/button&gt;\n&lt;/form&gt;\n</code></pre>\n<p><strong>Analytics Integration:</strong></p>\n<pre><code class=\"language-javascript\">// Add to your custom JavaScript\nif (window.netlifyIdentity) {\n  window.netlifyIdentity.on('init', user =&gt; {\n    if (!user) {\n      window.netlifyIdentity.on('login', () =&gt; {\n        document.location.href = '/admin/';\n      });\n    }\n  });\n}\n</code></pre>\n<h3 id=\"vercel\">Vercel</h3>\n<p>Zero-configuration deployment with excellent performance.</p>\n<h4 id=\"method-1-git-integration\">Method 1: Git Integration</h4>\n<ol>\n<li>\n<p><strong>Connect Repository:</strong></p>\n<ul>\n<li>Sign up at <a href=\"https://vercel.com\">vercel.com</a></li>\n<li>Import your Git repository</li>\n<li>Vercel auto-detects the setup</li>\n</ul>\n</li>\n<li>\n<p><strong>Configuration File:</strong></p>\n<pre><code class=\"language-json\">{\n  &quot;version&quot;: 2,\n  &quot;name&quot;: &quot;glowdoc-docs&quot;,\n  &quot;builds&quot;: [\n    {\n      &quot;src&quot;: &quot;package.json&quot;,\n      &quot;use&quot;: &quot;@vercel/static-build&quot;\n    }\n  ],\n  &quot;routes&quot;: [\n    {\n      &quot;src&quot;: &quot;/(.*)&quot;,\n      &quot;dest&quot;: &quot;/index.html&quot;\n    }\n  ],\n  &quot;env&quot;: {\n    &quot;RUST_VERSION&quot;: &quot;1.70&quot;\n  }\n}\n</code></pre>\n</li>\n<li>\n<p><strong>Package.json for Build:</strong></p>\n<pre><code class=\"language-json\">{\n  &quot;name&quot;: &quot;glowdoc-site&quot;,\n  &quot;scripts&quot;: {\n    &quot;build&quot;: &quot;curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y &amp;&amp; source ~/.cargo/env &amp;&amp; cargo run --release&quot;\n  }\n}\n</code></pre>\n</li>\n</ol>\n<h4 id=\"method-2-vercel-cli\">Method 2: Vercel CLI</h4>\n<pre><code class=\"language-bash\"># Install Vercel CLI\nnpm install -g vercel\n\n# Build and deploy\ncargo run --release\nvercel --prod\n</code></pre>\n<h3 id=\"cloudflare-pages\">Cloudflare Pages</h3>\n<p>High-performance hosting with global edge network.</p>\n<h4 id=\"setup-process\">Setup Process:</h4>\n<ol>\n<li>\n<p><strong>Connect Repository:</strong></p>\n<ul>\n<li>Sign up at <a href=\"https://pages.cloudflare.com\">pages.cloudflare.com</a></li>\n<li>Connect your Git repository</li>\n</ul>\n</li>\n<li>\n<p><strong>Build Configuration:</strong></p>\n<ul>\n<li>Build command: <code>curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y &amp;&amp; source ~/.cargo/env &amp;&amp; cargo run --release</code></li>\n<li>Build output directory: <code>.</code></li>\n<li>Environment variables: <code>RUST_VERSION=1.70</code></li>\n</ul>\n</li>\n<li>\n<p><strong>Custom Domains:</strong></p>\n<pre><code class=\"language-bash\"># Configure custom domain in Cloudflare Dashboard\n# DNS automatically managed\n</code></pre>\n</li>\n</ol>\n<h3 id=\"firebase-hosting\">Firebase Hosting</h3>\n<p>Google's hosting platform with global CDN.</p>\n<h4 id=\"setup-process\">Setup Process:</h4>\n<pre><code class=\"language-bash\"># Install Firebase CLI\nnpm install -g firebase-tools\n\n# Initialize Firebase\nfirebase login\nfirebase init hosting\n\n# Configure firebase.json\n</code></pre>\n<pre><code class=\"language-json\">{\n  &quot;hosting&quot;: {\n    &quot;public&quot;: &quot;.&quot;,\n    &quot;ignore&quot;: [\n      &quot;firebase.json&quot;,\n      &quot;**/.*&quot;,\n      &quot;**/node_modules/**&quot;,\n      &quot;src/**&quot;,\n      &quot;docs/**&quot;,\n      &quot;target/**&quot;\n    ],\n    &quot;rewrites&quot;: [\n      {\n        &quot;source&quot;: &quot;**&quot;,\n        &quot;destination&quot;: &quot;/index.html&quot;\n      }\n    ],\n    &quot;headers&quot;: [\n      {\n        &quot;source&quot;: &quot;**/*.@(js|css)&quot;,\n        &quot;headers&quot;: [\n          {\n            &quot;key&quot;: &quot;Cache-Control&quot;,\n            &quot;value&quot;: &quot;max-age=31536000&quot;\n          }\n        ]\n      }\n    ]\n  }\n}\n</code></pre>\n<pre><code class=\"language-bash\"># Build and deploy\ncargo run --release\nfirebase deploy\n</code></pre>\n<h2 id=\"traditional-web-hosting\">Traditional Web Hosting</h2>\n<h3 id=\"apache-configuration\">Apache Configuration</h3>\n<p>For traditional web hosting with Apache:</p>\n<pre><code class=\"language-apache\"># .htaccess\nRewriteEngine On\n\n# Handle client-side routing\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteCond %{REQUEST_FILENAME} !-d\nRewriteRule . /index.html [L]\n\n# Security headers\nHeader always set X-Frame-Options DENY\nHeader always set X-Content-Type-Options nosniff\nHeader always set X-XSS-Protection &quot;1; mode=block&quot;\nHeader always set Strict-Transport-Security &quot;max-age=31536000; includeSubDomains&quot;\n\n# Compression\n&lt;IfModule mod_deflate.c&gt;\n    AddOutputFilterByType DEFLATE text/html text/css application/javascript\n&lt;/IfModule&gt;\n\n# Caching\n&lt;IfModule mod_expires.c&gt;\n    ExpiresActive On\n    ExpiresByType text/html &quot;access plus 1 hour&quot;\n    ExpiresByType text/css &quot;access plus 1 year&quot;\n    ExpiresByType application/javascript &quot;access plus 1 year&quot;\n&lt;/IfModule&gt;\n</code></pre>\n<h3 id=\"nginx-configuration\">Nginx Configuration</h3>\n<p>For Nginx hosting:</p>\n<pre><code class=\"language-nginx\">server {\n    listen 80;\n    listen [::]:80;\n    server_name yourdomain.com;\n    \n    # Redirect HTTP to HTTPS\n    return 301 https://$server_name$request_uri;\n}\n\nserver {\n    listen 443 ssl http2;\n    listen [::]:443 ssl http2;\n    server_name yourdomain.com;\n    \n    # SSL configuration\n    ssl_certificate /path/to/certificate.crt;\n    ssl_certificate_key /path/to/private.key;\n    \n    # Document root\n    root /var/www/glowdoc;\n    index index.html;\n    \n    # Handle client-side routing\n    location / {\n        try_files $uri $uri/ /index.html;\n    }\n    \n    # Security headers\n    add_header X-Frame-Options DENY;\n    add_header X-Content-Type-Options nosniff;\n    add_header X-XSS-Protection &quot;1; mode=block&quot;;\n    add_header Strict-Transport-Security &quot;max-age=31536000; includeSubDomains&quot;;\n    \n    # Compression\n    gzip on;\n    gzip_types text/html text/css application/javascript;\n    \n    # Caching\n    location ~* \\.(css|js)$ {\n        expires 1y;\n        add_header Cache-Control &quot;public, immutable&quot;;\n    }\n}\n</code></pre>\n<h2 id=\"content-delivery-networks-cdn\">Content Delivery Networks (CDN)</h2>\n<h3 id=\"cloudflare-cdn\">Cloudflare CDN</h3>\n<p>Enhance performance with Cloudflare:</p>\n<ol>\n<li>\n<p><strong>DNS Setup:</strong></p>\n<ul>\n<li>Add your domain to Cloudflare</li>\n<li>Update nameservers</li>\n<li>Enable &quot;Proxied&quot; status</li>\n</ul>\n</li>\n<li>\n<p><strong>Optimization Settings:</strong></p>\n<ul>\n<li>Auto Minify: HTML, CSS, JS</li>\n<li>Brotli compression: Enabled</li>\n<li>Rocket Loader: Enabled</li>\n<li>Cache Level: Standard</li>\n</ul>\n</li>\n<li>\n<p><strong>Page Rules:</strong></p>\n<pre><code>yourdomain.com/*\n- Cache Level: Cache Everything\n- Edge Cache TTL: 1 month\n- Browser Cache TTL: 1 day\n</code></pre>\n</li>\n</ol>\n<h3 id=\"aws-cloudfront\">AWS CloudFront</h3>\n<p>Enterprise-grade CDN with AWS integration:</p>\n<pre><code class=\"language-json\">{\n  &quot;Distribution&quot;: {\n    &quot;Origins&quot;: [\n      {\n        &quot;Id&quot;: &quot;S3-glowdoc&quot;,\n        &quot;DomainName&quot;: &quot;your-bucket.s3.amazonaws.com&quot;,\n        &quot;S3OriginConfig&quot;: {\n          &quot;OriginAccessIdentity&quot;: &quot;&quot;\n        }\n      }\n    ],\n    &quot;DefaultCacheBehavior&quot;: {\n      &quot;TargetOriginId&quot;: &quot;S3-glowdoc&quot;,\n      &quot;ViewerProtocolPolicy&quot;: &quot;redirect-to-https&quot;,\n      &quot;Compress&quot;: true,\n      &quot;CachePolicyId&quot;: &quot;managed-caching-optimized&quot;\n    },\n    &quot;CustomErrorResponses&quot;: [\n      {\n        &quot;ErrorCode&quot;: 404,\n        &quot;ResponseCode&quot;: 200,\n        &quot;ResponsePagePath&quot;: &quot;/index.html&quot;\n      }\n    ]\n  }\n}\n</code></pre>\n<h2 id=\"automation-and-ci-cd\">Automation and CI/CD</h2>\n<h3 id=\"github-actions-advanced-workflow\">GitHub Actions Advanced Workflow</h3>\n<p>Complete CI/CD pipeline with testing and deployment:</p>\n<pre><code class=\"language-yaml\">name: Build, Test, and Deploy\n\non:\n  push:\n    branches: [ main, develop ]\n  pull_request:\n    branches: [ main ]\n\nenv:\n  CARGO_TERM_COLOR: always\n\njobs:\n  test:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/checkout@v4\n    \n    - name: Install Rust\n      uses: dtolnay/rust-toolchain@stable\n    \n    - name: Run tests\n      run: cargo test --verbose\n    \n    - name: Check formatting\n      run: cargo fmt -- --check\n    \n    - name: Run clippy\n      run: cargo clippy -- -D warnings\n\n  build:\n    needs: test\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions/checkout@v4\n    \n    - name: Install Rust\n      uses: dtolnay/rust-toolchain@stable\n    \n    - name: Cache dependencies\n      uses: actions/cache@v3\n      with:\n        path: |\n          ~/.cargo/registry\n          ~/.cargo/git\n          target\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\n    \n    - name: Build documentation\n      run: cargo run --release\n    \n    - name: Validate HTML\n      run: |\n        npm install -g html-validate\n        html-validate index.html\n    \n    - name: Check file size\n      run: |\n        SIZE=$(stat -c%s index.html)\n        echo &quot;Generated file size: $SIZE bytes&quot;\n        if [ $SIZE -gt 5242880 ]; then\n          echo &quot;Warning: File size exceeds 5MB&quot;\n          exit 1\n        fi\n    \n    - name: Upload artifacts\n      uses: actions/upload-artifact@v3\n      with:\n        name: documentation\n        path: index.html\n\n  deploy-staging:\n    needs: build\n    runs-on: ubuntu-latest\n    if: github.ref == 'refs/heads/develop'\n    steps:\n    - name: Download artifacts\n      uses: actions/download-artifact@v3\n      with:\n        name: documentation\n    \n    - name: Deploy to staging\n      run: |\n        # Deploy to staging environment\n        echo &quot;Deploying to staging...&quot;\n\n  deploy-production:\n    needs: build\n    runs-on: ubuntu-latest\n    if: github.ref == 'refs/heads/main'\n    steps:\n    - name: Download artifacts\n      uses: actions/download-artifact@v3\n      with:\n        name: documentation\n    \n    - name: Deploy to GitHub Pages\n      uses: peaceiris/actions-gh-pages@v3\n      with:\n        github_token: ${{ secrets.GITHUB_TOKEN }}\n        publish_dir: .\n        force_orphan: true\n    \n    - name: Notify deployment\n      run: |\n        curl -X POST ${{ secrets.SLACK_WEBHOOK }} \\\n          -H 'Content-type: application/json' \\\n          --data '{&quot;text&quot;:&quot;📚 Documentation deployed successfully!&quot;}'\n</code></pre>\n<h3 id=\"gitlab-ci-cd\">GitLab CI/CD</h3>\n<pre><code class=\"language-yaml\"># .gitlab-ci.yml\nstages:\n  - test\n  - build\n  - deploy\n\nvariables:\n  RUST_VERSION: &quot;1.70&quot;\n\nbefore_script:\n  - apt-get update -qq\n  - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y\n  - source ~/.cargo/env\n\ntest:\n  stage: test\n  script:\n    - cargo test --verbose\n    - cargo fmt -- --check\n    - cargo clippy -- -D warnings\n  only:\n    - merge_requests\n    - main\n\nbuild:\n  stage: build\n  script:\n    - cargo run --release\n  artifacts:\n    paths:\n      - index.html\n    expire_in: 1 hour\n  only:\n    - main\n\npages:\n  stage: deploy\n  script:\n    - mkdir public\n    - cp index.html public/\n  artifacts:\n    paths:\n      - public\n  only:\n    - main\n</code></pre>\n<h2 id=\"domain-and-ssl-configuration\">Domain and SSL Configuration</h2>\n<h3 id=\"custom-domain-setup\">Custom Domain Setup</h3>\n<h4 id=\"dns-configuration\">DNS Configuration:</h4>\n<pre><code># A Records for root domain\n@ 3600 IN A 185.199.108.153\n@ 3600 IN A 185.199.109.153\n@ 3600 IN A 185.199.110.153\n@ 3600 IN A 185.199.111.153\n\n# CNAME for www subdomain\nwww 3600 IN CNAME your-username.github.io.\n\n# CNAME for docs subdomain\ndocs 3600 IN CNAME your-site.netlify.app.\n</code></pre>\n<h4 id=\"ssl-certificate-setup\">SSL Certificate Setup:</h4>\n<p>Most modern hosting platforms provide automatic SSL:</p>\n<ul>\n<li><strong>GitHub Pages</strong>: Automatic with custom domains</li>\n<li><strong>Netlify</strong>: Automatic Let's Encrypt certificates</li>\n<li><strong>Vercel</strong>: Automatic SSL for all deployments</li>\n<li><strong>Cloudflare</strong>: Universal SSL included</li>\n</ul>\n<h3 id=\"manual-ssl-configuration\">Manual SSL Configuration</h3>\n<p>For traditional hosting:</p>\n<pre><code class=\"language-bash\"># Generate Let's Encrypt certificate\ncertbot certonly --webroot -w /var/www/glowdoc -d yourdomain.com\n\n# Auto-renewal\necho &quot;0 12 * * * /usr/bin/certbot renew --quiet&quot; | crontab -\n</code></pre>\n<h2 id=\"performance-optimization\">Performance Optimization</h2>\n<h3 id=\"build-optimization\">Build Optimization</h3>\n<pre><code class=\"language-bash\"># Optimize for production\nRUSTFLAGS=&quot;-C target-cpu=native&quot; cargo run --release\n\n# Profile build performance\ncargo build --release --timings\n</code></pre>\n<h3 id=\"content-optimization\">Content Optimization</h3>\n<ol>\n<li><strong>Image Optimization</strong>: Use optimized images in markdown</li>\n<li><strong>Font Subsetting</strong>: Include only needed font weights</li>\n<li><strong>Code Splitting</strong>: Implement lazy loading for large sections</li>\n</ol>\n<h3 id=\"monitoring-and-analytics\">Monitoring and Analytics</h3>\n<h4 id=\"performance-monitoring\">Performance Monitoring:</h4>\n<pre><code class=\"language-javascript\">// Add to your custom JavaScript\nfunction trackPerformance() {\n  window.addEventListener('load', () =&gt; {\n    const perfData = performance.timing;\n    const loadTime = perfData.loadEventEnd - perfData.navigationStart;\n    \n    // Send to analytics\n    gtag('event', 'page_load_time', {\n      value: loadTime,\n      custom_parameter: 'documentation_site'\n    });\n  });\n}\n</code></pre>\n<h4 id=\"uptime-monitoring\">Uptime Monitoring:</h4>\n<p>Set up monitoring with services like:</p>\n<ul>\n<li><strong>StatusCake</strong>: Free uptime monitoring</li>\n<li><strong>Pingdom</strong>: Comprehensive monitoring suite</li>\n<li><strong>UptimeRobot</strong>: Free and paid monitoring options</li>\n</ul>\n<h2 id=\"security-considerations\">Security Considerations</h2>\n<h3 id=\"content-security-policy\">Content Security Policy</h3>\n<pre><code class=\"language-html\">&lt;!-- Add to your HTML head --&gt;\n&lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;\n  default-src 'self';\n  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com;\n  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;\n  font-src 'self' https://fonts.gstatic.com;\n  img-src 'self' data: https:;\n  connect-src 'self' https://www.google-analytics.com;\n&quot;&gt;\n</code></pre>\n<h3 id=\"security-headers\">Security Headers</h3>\n<p>Implement security headers across all hosting platforms:</p>\n<pre><code>X-Frame-Options: DENY\nX-Content-Type-Options: nosniff\nX-XSS-Protection: 1; mode=block\nStrict-Transport-Security: max-age=31536000; includeSubDomains\nReferrer-Policy: strict-origin-when-cross-origin\n</code></pre>\n<h2 id=\"troubleshooting-deployment-issues\">Troubleshooting Deployment Issues</h2>\n<h3 id=\"common-problems\">Common Problems</h3>\n<p><strong>Build Failures:</strong></p>\n<pre><code class=\"language-bash\"># Check Rust version compatibility\nrustc --version\n\n# Verify dependencies\ncargo check\n\n# Clean and rebuild\ncargo clean &amp;&amp; cargo run --release\n</code></pre>\n<p><strong>Routing Issues:</strong></p>\n<ul>\n<li>Ensure hosting platform supports SPA routing</li>\n<li>Configure redirects for client-side routing</li>\n<li>Verify base URL configuration</li>\n</ul>\n<p><strong>Performance Issues:</strong></p>\n<ul>\n<li>Check file size (should be under 5MB)</li>\n<li>Verify compression is enabled</li>\n<li>Test CDN configuration</li>\n</ul>\n<p><strong>SSL Certificate Problems:</strong></p>\n<ul>\n<li>Verify DNS propagation</li>\n<li>Check certificate chain</li>\n<li>Ensure HTTPS redirects are configured</li>\n</ul>\n<h3 id=\"debug-deployment\">Debug Deployment</h3>\n<pre><code class=\"language-bash\"># Test local build\ncargo run --release\npython3 -m http.server 8000\n\n# Validate HTML\nhtml-validate index.html\n\n# Check file permissions\nls -la index.html\n\n# Test from different networks\ncurl -I https://yourdomain.com\n</code></pre>\n<h2 id=\"best-practices\">Best Practices</h2>\n<ol>\n<li><strong>Version Control</strong>: Always commit before deploying</li>\n<li><strong>Staging Environment</strong>: Test changes before production</li>\n<li><strong>Automated Backups</strong>: Regular backup of source files</li>\n<li><strong>Performance Monitoring</strong>: Track load times and uptime</li>\n<li><strong>Security Updates</strong>: Keep hosting platform updated</li>\n<li><strong>Documentation</strong>: Document deployment process for team</li>\n<li><strong>Rollback Plan</strong>: Maintain ability to quickly revert changes</li>\n</ol>\n<p>This comprehensive deployment guide ensures your GlowDoc documentation is accessible, performant, and secure across any hosting platform.</p>\n\n            </section>\n            <section class=\"content-section\" id=\"advanced/plugins\">\n                <h1 id=\"plugins-and-extensions\">Plugins and Extensions</h1>\n<p>Extend GlowDoc's functionality with custom plugins, third-party integrations, and advanced features to enhance your documentation experience.</p>\n<h2 id=\"plugin-architecture-overview\">Plugin Architecture Overview</h2>\n<p>GlowDoc's modular architecture allows for various extension points and integration patterns. While GlowDoc doesn't have a formal plugin system, you can extend functionality through several approaches:</p>\n<h3 id=\"extension-methods\">Extension Methods</h3>\n<ol>\n<li><strong>CSS and JavaScript Extensions</strong>: Add custom functionality through the Rust build process</li>\n<li><strong>Third-Party Integrations</strong>: Embed external services and tools</li>\n<li><strong>Build Process Extensions</strong>: Modify the Rust source for custom features</li>\n<li><strong>External Tool Integration</strong>: Combine GlowDoc with other documentation tools</li>\n</ol>\n<h2 id=\"syntax-highlighting-enhancements\">Syntax Highlighting Enhancements</h2>\n<h3 id=\"advanced-code-highlighting\">Advanced Code Highlighting</h3>\n<p>While GlowDoc includes basic syntax highlighting, you can enhance it with external libraries:</p>\n<h4 id=\"prism-js-integration\">Prism.js Integration</h4>\n<p>Add advanced syntax highlighting with Prism.js:</p>\n<pre><code class=\"language-javascript\">// Add to the JavaScript section in src/main.rs\nfunction initializePrism() {\n  // Load Prism.js dynamically\n  const script = document.createElement('script');\n  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';\n  script.onload = function() {\n    // Load additional language support\n    const languages = ['rust', 'javascript', 'python', 'bash', 'yaml'];\n    languages.forEach(lang =&gt; {\n      const langScript = document.createElement('script');\n      langScript.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${lang}.min.js`;\n      document.head.appendChild(langScript);\n    });\n    \n    // Load Prism CSS\n    const link = document.createElement('link');\n    link.rel = 'stylesheet';\n    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css';\n    document.head.appendChild(link);\n    \n    // Re-highlight all code blocks\n    Prism.highlightAll();\n  };\n  document.head.appendChild(script);\n}\n\n// Call during page initialization\ninitializePrism();\n</code></pre>\n<h4 id=\"custom-syntax-highlighting\">Custom Syntax Highlighting</h4>\n<p>Create custom highlighting for domain-specific languages:</p>\n<pre><code class=\"language-javascript\">function customHighlighter() {\n  document.querySelectorAll('pre code').forEach(block =&gt; {\n    const language = block.className.match(/language-(\\w+)/);\n    if (language &amp;&amp; language[1] === 'custom-dsl') {\n      highlightCustomDSL(block);\n    }\n  });\n}\n\nfunction highlightCustomDSL(codeBlock) {\n  let html = codeBlock.innerHTML;\n  \n  // Define custom syntax patterns\n  const patterns = [\n    { regex: /\\b(function|if|else|return)\\b/g, class: 'keyword' },\n    { regex: /\\b\\d+\\b/g, class: 'number' },\n    { regex: /&quot;[^&quot;]*&quot;/g, class: 'string' },\n    { regex: /\\/\\/.*$/gm, class: 'comment' }\n  ];\n  \n  patterns.forEach(pattern =&gt; {\n    html = html.replace(pattern.regex, `&lt;span class=&quot;${pattern.class}&quot;&gt;$&amp;&lt;/span&gt;`);\n  });\n  \n  codeBlock.innerHTML = html;\n}\n</code></pre>\n<h3 id=\"code-copy-functionality\">Code Copy Functionality</h3>\n<p>Add copy-to-clipboard buttons for code blocks:</p>\n<pre><code class=\"language-javascript\">function addCopyButtons() {\n  document.querySelectorAll('pre').forEach(pre =&gt; {\n    const button = document.createElement('button');\n    button.className = 'copy-button';\n    button.textContent = 'Copy';\n    button.onclick = () =&gt; copyToClipboard(pre.textContent, button);\n    \n    pre.style.position = 'relative';\n    pre.appendChild(button);\n  });\n}\n\nfunction copyToClipboard(text, button) {\n  navigator.clipboard.writeText(text).then(() =&gt; {\n    const originalText = button.textContent;\n    button.textContent = 'Copied!';\n    button.classList.add('copied');\n    \n    setTimeout(() =&gt; {\n      button.textContent = originalText;\n      button.classList.remove('copied');\n    }, 2000);\n  });\n}\n\n// CSS for copy button\nconst copyButtonCSS = `\n.copy-button {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  padding: 0.25rem 0.5rem;\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n  border: none;\n  border-radius: 0.25rem;\n  font-size: 0.75rem;\n  cursor: pointer;\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n\npre:hover .copy-button {\n  opacity: 1;\n}\n\n.copy-button.copied {\n  background: hsl(var(--accent));\n}\n`;\n</code></pre>\n<h2 id=\"search-enhancements\">Search Enhancements</h2>\n<h3 id=\"advanced-search-integration\">Advanced Search Integration</h3>\n<h4 id=\"algolia-docsearch\">Algolia DocSearch</h4>\n<p>Integrate Algolia's DocSearch for powerful search capabilities:</p>\n<pre><code class=\"language-javascript\">function initializeAlgoliaSearch() {\n  // Load Algolia DocSearch\n  const script = document.createElement('script');\n  script.src = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3';\n  script.onload = function() {\n    docsearch({\n      appId: 'YOUR_APP_ID',\n      apiKey: 'YOUR_SEARCH_API_KEY',\n      indexName: 'YOUR_INDEX_NAME',\n      container: '#docsearch',\n      searchParameters: {\n        facetFilters: ['language:en'],\n      },\n    });\n  };\n  document.head.appendChild(script);\n  \n  // Replace existing search input\n  const searchContainer = document.querySelector('.search-container');\n  searchContainer.innerHTML = '&lt;div id=&quot;docsearch&quot;&gt;&lt;/div&gt;';\n}\n</code></pre>\n<h4 id=\"lunr-js-client-side-search\">Lunr.js Client-Side Search</h4>\n<p>Implement advanced client-side search with Lunr.js:</p>\n<pre><code class=\"language-javascript\">function initializeLunrSearch() {\n  // Build search index from content\n  const documents = [];\n  document.querySelectorAll('.content-section').forEach((section, idx) =&gt; {\n    documents.push({\n      id: idx,\n      title: section.querySelector('h1')?.textContent || '',\n      content: section.textContent,\n      url: section.id\n    });\n  });\n  \n  // Create Lunr index\n  const idx = lunr(function () {\n    this.ref('id');\n    this.field('title', { boost: 10 });\n    this.field('content');\n    \n    documents.forEach((doc) =&gt; {\n      this.add(doc);\n    });\n  });\n  \n  // Enhanced search function\n  function performSearch(query) {\n    const results = idx.search(query);\n    return results.map(result =&gt; {\n      const doc = documents[result.ref];\n      return {\n        ...doc,\n        score: result.score,\n        excerpt: generateExcerpt(doc.content, query)\n      };\n    });\n  }\n  \n  function generateExcerpt(content, query, maxLength = 150) {\n    const index = content.toLowerCase().indexOf(query.toLowerCase());\n    if (index === -1) return content.substring(0, maxLength) + '...';\n    \n    const start = Math.max(0, index - 50);\n    const end = Math.min(content.length, index + query.length + 50);\n    const excerpt = content.substring(start, end);\n    \n    return (start &gt; 0 ? '...' : '') + excerpt + (end &lt; content.length ? '...' : '');\n  }\n}\n</code></pre>\n<h3 id=\"search-analytics\">Search Analytics</h3>\n<p>Track search behavior and popular queries:</p>\n<pre><code class=\"language-javascript\">function trackSearchAnalytics() {\n  const searchInput = document.querySelector('.search-input');\n  \n  searchInput.addEventListener('input', debounce((e) =&gt; {\n    const query = e.target.value;\n    if (query.length &gt; 2) {\n      // Track search queries\n      gtag('event', 'search', {\n        search_term: query,\n        page_title: document.title\n      });\n    }\n  }, 1000));\n  \n  // Track search result clicks\n  document.addEventListener('click', (e) =&gt; {\n    if (e.target.classList.contains('search-result')) {\n      gtag('event', 'search_result_click', {\n        search_term: searchInput.value,\n        result_title: e.target.textContent\n      });\n    }\n  });\n}\n\nfunction debounce(func, wait) {\n  let timeout;\n  return function executedFunction(...args) {\n    const later = () =&gt; {\n      clearTimeout(timeout);\n      func(...args);\n    };\n    clearTimeout(timeout);\n    timeout = setTimeout(later, wait);\n  };\n}\n</code></pre>\n<h2 id=\"analytics-and-tracking\">Analytics and Tracking</h2>\n<h3 id=\"google-analytics-4-integration\">Google Analytics 4 Integration</h3>\n<p>Implement comprehensive analytics tracking:</p>\n<pre><code class=\"language-javascript\">function initializeAnalytics() {\n  // Load Google Analytics\n  const script1 = document.createElement('script');\n  script1.async = true;\n  script1.src = 'https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID';\n  document.head.appendChild(script1);\n  \n  const script2 = document.createElement('script');\n  script2.innerHTML = `\n    window.dataLayer = window.dataLayer || [];\n    function gtag(){dataLayer.push(arguments);}\n    gtag('js', new Date());\n    gtag('config', 'YOUR_GA_ID', {\n      page_title: document.title,\n      page_location: window.location.href\n    });\n  `;\n  document.head.appendChild(script2);\n}\n\nfunction trackUserBehavior() {\n  // Track page navigation\n  document.addEventListener('click', (e) =&gt; {\n    if (e.target.classList.contains('nav-link')) {\n      gtag('event', 'page_view', {\n        page_title: e.target.textContent,\n        page_location: window.location.href + '#' + e.target.getAttribute('href').substring(1)\n      });\n    }\n  });\n  \n  // Track theme changes\n  document.querySelector('.theme-toggle').addEventListener('click', () =&gt; {\n    const currentTheme = document.documentElement.getAttribute('data-theme');\n    gtag('event', 'theme_change', {\n      theme: currentTheme === 'dark' ? 'light' : 'dark'\n    });\n  });\n  \n  // Track scroll depth\n  let maxScroll = 0;\n  window.addEventListener('scroll', debounce(() =&gt; {\n    const scrollPercent = Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100);\n    if (scrollPercent &gt; maxScroll) {\n      maxScroll = scrollPercent;\n      if (maxScroll % 25 === 0) { // Track at 25%, 50%, 75%, 100%\n        gtag('event', 'scroll_depth', {\n          percent: maxScroll,\n          page_title: document.title\n        });\n      }\n    }\n  }, 500));\n}\n</code></pre>\n<h3 id=\"hotjar-integration\">Hotjar Integration</h3>\n<p>Add user behavior tracking with Hotjar:</p>\n<pre><code class=\"language-javascript\">function initializeHotjar() {\n  const script = document.createElement('script');\n  script.innerHTML = `\n    (function(h,o,t,j,a,r){\n      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\n      h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};\n      a=o.getElementsByTagName('head')[0];\n      r=o.createElement('script');r.async=1;\n      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\n      a.appendChild(r);\n    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\n  `;\n  document.head.appendChild(script);\n}\n</code></pre>\n<h2 id=\"accessibility-enhancements\">Accessibility Enhancements</h2>\n<h3 id=\"screen-reader-improvements\">Screen Reader Improvements</h3>\n<p>Enhance accessibility with ARIA attributes and screen reader support:</p>\n<pre><code class=\"language-javascript\">function enhanceAccessibility() {\n  // Add skip navigation\n  const skipLink = document.createElement('a');\n  skipLink.href = '#main-content';\n  skipLink.textContent = 'Skip to main content';\n  skipLink.className = 'skip-link';\n  document.body.insertBefore(skipLink, document.body.firstChild);\n  \n  // Improve navigation ARIA labels\n  document.querySelectorAll('.nav-section-title').forEach(title =&gt; {\n    const sectionId = title.getAttribute('data-section');\n    title.setAttribute('aria-expanded', 'false');\n    title.setAttribute('aria-controls', sectionId + '-content');\n    \n    const content = title.nextElementSibling;\n    if (content) {\n      content.setAttribute('id', sectionId + '-content');\n      content.setAttribute('aria-labelledby', sectionId + '-title');\n    }\n  });\n  \n  // Announce page changes to screen readers\n  const announcer = document.createElement('div');\n  announcer.setAttribute('aria-live', 'polite');\n  announcer.setAttribute('aria-atomic', 'true');\n  announcer.className = 'sr-only';\n  document.body.appendChild(announcer);\n  \n  // Announce when content changes\n  function announcePageChange(title) {\n    announcer.textContent = `Navigated to ${title}`;\n    setTimeout(() =&gt; announcer.textContent = '', 1000);\n  }\n  \n  return { announcePageChange };\n}\n\n// CSS for accessibility\nconst accessibilityCSS = `\n.skip-link {\n  position: absolute;\n  top: -40px;\n  left: 6px;\n  background: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n  padding: 8px;\n  text-decoration: none;\n  border-radius: 0 0 4px 4px;\n  z-index: 1000;\n}\n\n.skip-link:focus {\n  top: 0;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n`;\n</code></pre>\n<h3 id=\"keyboard-navigation-enhancement\">Keyboard Navigation Enhancement</h3>\n<p>Improve keyboard navigation throughout the documentation:</p>\n<pre><code class=\"language-javascript\">function enhanceKeyboardNavigation() {\n  let focusedSearchResult = -1;\n  \n  document.addEventListener('keydown', (e) =&gt; {\n    // Search result navigation\n    if (e.target.classList.contains('search-input')) {\n      const results = document.querySelectorAll('.search-result');\n      \n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          focusedSearchResult = Math.min(focusedSearchResult + 1, results.length - 1);\n          updateSearchResultFocus(results);\n          break;\n          \n        case 'ArrowUp':\n          e.preventDefault();\n          focusedSearchResult = Math.max(focusedSearchResult - 1, -1);\n          updateSearchResultFocus(results);\n          break;\n          \n        case 'Enter':\n          if (focusedSearchResult &gt;= 0 &amp;&amp; results[focusedSearchResult]) {\n            e.preventDefault();\n            results[focusedSearchResult].click();\n          }\n          break;\n          \n        case 'Escape':\n          e.target.blur();\n          document.querySelector('.search-results').style.display = 'none';\n          break;\n      }\n    }\n    \n    // Global shortcuts\n    if (e.ctrlKey || e.metaKey) {\n      switch (e.key) {\n        case 'k':\n          e.preventDefault();\n          document.querySelector('.search-input').focus();\n          break;\n          \n        case '/':\n          e.preventDefault();\n          document.querySelector('.search-input').focus();\n          break;\n      }\n    }\n  });\n  \n  function updateSearchResultFocus(results) {\n    results.forEach((result, index) =&gt; {\n      result.classList.toggle('focused', index === focusedSearchResult);\n    });\n    \n    if (focusedSearchResult &gt;= 0 &amp;&amp; results[focusedSearchResult]) {\n      results[focusedSearchResult].scrollIntoView({ block: 'nearest' });\n    }\n  }\n}\n</code></pre>\n<h2 id=\"performance-enhancements\">Performance Enhancements</h2>\n<h3 id=\"lazy-loading-and-code-splitting\">Lazy Loading and Code Splitting</h3>\n<p>Implement performance optimizations:</p>\n<pre><code class=\"language-javascript\">function implementLazyLoading() {\n  // Lazy load heavy components\n  const observerOptions = {\n    root: null,\n    rootMargin: '100px',\n    threshold: 0.1\n  };\n  \n  const observer = new IntersectionObserver((entries) =&gt; {\n    entries.forEach(entry =&gt; {\n      if (entry.isIntersecting) {\n        const section = entry.target;\n        loadSectionAssets(section);\n        observer.unobserve(section);\n      }\n    });\n  }, observerOptions);\n  \n  // Observe content sections for lazy loading\n  document.querySelectorAll('.content-section').forEach(section =&gt; {\n    observer.observe(section);\n  });\n  \n  function loadSectionAssets(section) {\n    // Load section-specific assets\n    const codeBlocks = section.querySelectorAll('pre code');\n    if (codeBlocks.length &gt; 0) {\n      loadSyntaxHighlighting(codeBlocks);\n    }\n    \n    const diagrams = section.querySelectorAll('.mermaid');\n    if (diagrams.length &gt; 0) {\n      loadMermaidDiagrams(diagrams);\n    }\n  }\n}\n\nfunction implementServiceWorker() {\n  if ('serviceWorker' in navigator) {\n    const swContent = `\n      const CACHE_NAME = 'glowdoc-v1';\n      const urlsToCache = [\n        '/',\n        '/index.html'\n      ];\n      \n      self.addEventListener('install', (event) =&gt; {\n        event.waitUntil(\n          caches.open(CACHE_NAME)\n            .then((cache) =&gt; cache.addAll(urlsToCache))\n        );\n      });\n      \n      self.addEventListener('fetch', (event) =&gt; {\n        event.respondWith(\n          caches.match(event.request)\n            .then((response) =&gt; {\n              return response || fetch(event.request);\n            })\n        );\n      });\n    `;\n    \n    const blob = new Blob([swContent], { type: 'application/javascript' });\n    const swURL = URL.createObjectURL(blob);\n    \n    navigator.serviceWorker.register(swURL)\n      .then((registration) =&gt; {\n        console.log('ServiceWorker registered:', registration);\n      })\n      .catch((error) =&gt; {\n        console.log('ServiceWorker registration failed:', error);\n      });\n  }\n}\n</code></pre>\n<h2 id=\"diagram-and-visualization-support\">Diagram and Visualization Support</h2>\n<h3 id=\"mermaid-diagrams\">Mermaid Diagrams</h3>\n<p>Add support for Mermaid diagrams:</p>\n<pre><code class=\"language-javascript\">function initializeMermaid() {\n  const script = document.createElement('script');\n  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';\n  script.onload = function() {\n    mermaid.initialize({\n      startOnLoad: false,\n      theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default',\n      securityLevel: 'loose'\n    });\n    \n    // Process Mermaid diagrams\n    document.querySelectorAll('.language-mermaid').forEach(async (element, index) =&gt; {\n      const graphDefinition = element.textContent;\n      const graphId = `mermaid-graph-${index}`;\n      \n      try {\n        const { svg } = await mermaid.render(graphId, graphDefinition);\n        const wrapper = document.createElement('div');\n        wrapper.className = 'mermaid-wrapper';\n        wrapper.innerHTML = svg;\n        element.closest('pre').replaceWith(wrapper);\n      } catch (error) {\n        console.error('Mermaid rendering error:', error);\n      }\n    });\n  };\n  document.head.appendChild(script);\n}\n\n// Update Mermaid theme when user changes theme\nfunction updateMermaidTheme() {\n  const observer = new MutationObserver((mutations) =&gt; {\n    mutations.forEach((mutation) =&gt; {\n      if (mutation.attributeName === 'data-theme') {\n        const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default';\n        if (window.mermaid) {\n          mermaid.initialize({ theme: newTheme });\n          // Re-render existing diagrams\n          document.querySelectorAll('.mermaid-wrapper').forEach(async (wrapper, index) =&gt; {\n            // Re-render logic here\n          });\n        }\n      }\n    });\n  });\n  \n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['data-theme']\n  });\n}\n</code></pre>\n<h3 id=\"chart-js-integration\">Chart.js Integration</h3>\n<p>Add interactive charts and graphs:</p>\n<pre><code class=\"language-javascript\">function initializeCharts() {\n  const script = document.createElement('script');\n  script.src = 'https://cdn.jsdelivr.net/npm/chart.js';\n  script.onload = function() {\n    document.querySelectorAll('.chart-container').forEach(container =&gt; {\n      const config = JSON.parse(container.dataset.config);\n      const canvas = document.createElement('canvas');\n      container.appendChild(canvas);\n      \n      new Chart(canvas, {\n        ...config,\n        options: {\n          ...config.options,\n          responsive: true,\n          plugins: {\n            ...config.options?.plugins,\n            legend: {\n              ...config.options?.plugins?.legend,\n              labels: {\n                color: getComputedStyle(document.documentElement)\n                  .getPropertyValue('--foreground')\n              }\n            }\n          }\n        }\n      });\n    });\n  };\n  document.head.appendChild(script);\n}\n</code></pre>\n<h2 id=\"plugin-development-guide\">Plugin Development Guide</h2>\n<h3 id=\"creating-custom-extensions\">Creating Custom Extensions</h3>\n<p>Structure for building your own GlowDoc extensions:</p>\n<pre><code class=\"language-rust\">// In src/main.rs, add to the generate_javascript() function\n\npub fn generate_custom_plugin_javascript() -&gt; String {\n    r#&quot;\n    // Custom Plugin Framework\n    class GlowDocPlugin {\n        constructor(name, options = {}) {\n            this.name = name;\n            this.options = options;\n            this.hooks = {};\n            this.initialized = false;\n        }\n        \n        // Register event hooks\n        on(event, callback) {\n            if (!this.hooks[event]) {\n                this.hooks[event] = [];\n            }\n            this.hooks[event].push(callback);\n            return this;\n        }\n        \n        // Trigger event hooks\n        trigger(event, data) {\n            if (this.hooks[event]) {\n                this.hooks[event].forEach(callback =&gt; callback(data));\n            }\n        }\n        \n        // Initialize plugin\n        init() {\n            if (this.initialized) return;\n            this.trigger('beforeInit', this.options);\n            this.setup();\n            this.initialized = true;\n            this.trigger('afterInit', this.options);\n        }\n        \n        // Override in subclasses\n        setup() {\n            throw new Error('Plugin must implement setup() method');\n        }\n    }\n    \n    // Plugin registry\n    window.GlowDocPlugins = {\n        plugins: new Map(),\n        \n        register(plugin) {\n            this.plugins.set(plugin.name, plugin);\n            if (document.readyState === 'loading') {\n                document.addEventListener('DOMContentLoaded', () =&gt; plugin.init());\n            } else {\n                plugin.init();\n            }\n        },\n        \n        get(name) {\n            return this.plugins.get(name);\n        }\n    };\n    \n    // Example plugin\n    class ExamplePlugin extends GlowDocPlugin {\n        setup() {\n            this.on('beforeInit', (options) =&gt; {\n                console.log('Example plugin initializing with options:', options);\n            });\n            \n            // Add custom functionality\n            this.addCustomButton();\n        }\n        \n        addCustomButton() {\n            const button = document.createElement('button');\n            button.textContent = 'Custom Action';\n            button.onclick = () =&gt; this.trigger('customAction', 'Hello from plugin!');\n            document.querySelector('.header-content').appendChild(button);\n        }\n    }\n    \n    // Auto-register plugins\n    document.addEventListener('DOMContentLoaded', () =&gt; {\n        // Register built-in plugins\n        const examplePlugin = new ExamplePlugin('example', { debug: true });\n        GlowDocPlugins.register(examplePlugin);\n    });\n    &quot;#.to_string()\n}\n</code></pre>\n<h3 id=\"plugin-configuration\">Plugin Configuration</h3>\n<p>Allow users to configure plugins through config.yaml:</p>\n<pre><code class=\"language-rust\">// Add to Config struct in src/main.rs\n#[derive(Debug, Deserialize, Serialize)]\nstruct PluginConfig {\n    name: String,\n    enabled: bool,\n    options: HashMap&lt;String, serde_yaml::Value&gt;,\n}\n\n#[derive(Debug, Deserialize, Serialize)]\nstruct Config {\n    title: String,\n    description: String,\n    navigation: Vec&lt;NavigationSection&gt;,\n    theme: String,\n    plugins: Option&lt;Vec&lt;PluginConfig&gt;&gt;,\n}\n</code></pre>\n<h2 id=\"best-practices-for-extensions\">Best Practices for Extensions</h2>\n<h3 id=\"performance-considerations\">Performance Considerations</h3>\n<ol>\n<li><strong>Lazy Loading</strong>: Only load plugins when needed</li>\n<li><strong>Code Splitting</strong>: Separate plugin code from core functionality</li>\n<li><strong>Memory Management</strong>: Clean up event listeners and resources</li>\n<li><strong>Minimal Dependencies</strong>: Keep external dependencies lightweight</li>\n</ol>\n<h3 id=\"security-guidelines\">Security Guidelines</h3>\n<ol>\n<li><strong>Input Validation</strong>: Sanitize all user inputs</li>\n<li><strong>Content Security Policy</strong>: Implement CSP headers</li>\n<li><strong>External Resources</strong>: Use integrity hashes for CDN resources</li>\n<li><strong>User Data</strong>: Handle user data securely</li>\n</ol>\n<h3 id=\"accessibility-standards\">Accessibility Standards</h3>\n<ol>\n<li><strong>ARIA Support</strong>: Provide proper ARIA attributes</li>\n<li><strong>Keyboard Navigation</strong>: Ensure all functionality is keyboard accessible</li>\n<li><strong>Screen Reader Compatibility</strong>: Test with screen readers</li>\n<li><strong>Color Contrast</strong>: Maintain adequate contrast ratios</li>\n</ol>\n<h2 id=\"troubleshooting-plugins\">Troubleshooting Plugins</h2>\n<p><strong>Plugin not loading</strong>: Check browser console for JavaScript errors and verify script URLs.</p>\n<p><strong>Conflicts between plugins</strong>: Implement proper namespacing and avoid global variable conflicts.</p>\n<p><strong>Performance issues</strong>: Profile plugin performance and optimize heavy operations.</p>\n<p><strong>Theme compatibility</strong>: Ensure plugins work with all themes and dark mode.</p>\n<p><strong>Mobile responsiveness</strong>: Test plugin functionality on mobile devices.</p>\n\n            </section>\n                </div>\n                <aside class=\"table-of-contents\" id=\"table-of-contents\">\n                    <div class=\"toc-header\">\n                        <h3>On this page</h3>\n                    </div>\n                    <nav class=\"toc-nav\" id=\"toc-nav\">\n                        <!-- Table of contents will be populated by JavaScript -->\n                    </nav>\n                </aside>\n            </div>\n        </main>\n    </div>\n\n    <footer>\n        <div class=\"container\">\n            <p>&copy; 2026 GlowDoc. Built with modern web standards.</p>\n        </div>\n    </footer>\n\n    <script>\nconst searchIndex = {\n    \"introduction/what-is-glowdoc\": {\n        \"title\": \"What is GlowDoc?\",\n        \"section\": \"Introduction\",\n        \"content\": \"# What is GlowDoc?\\n\\nGlowDoc is a modern, lightweight documentation template that presents a beautiful thoughtful space for your work. It's built with pure HTML, CSS, and minimal JavaScript to ensure fast loading times and easy customization.\\n\\n## Key Features\\n\\n- **Modern Design** - Clean, professional appearance with attention to typography and spacing\\n- **Dark Mode** - Built-in dark mode support with smooth transitions\\n- **Responsive** - Works perfectly on desktop, tablet, and mobile devices\\n- **Fast** - Minimal dependencies and optimized for performance\\n- **Accessible** - Built with accessibility best practices\\n- **Customizable** - Easy to modify colors, fonts, and layout\\n\\n## Perfect For\\n\\nGlowDoc is ideal for:\\n\\n- Project documentation\\n- API documentation\\n- User guides and tutorials\\n- Knowledge bases\\n- Technical blogs\\n\\n## Philosophy\\n\\nWe believe documentation should be beautiful, fast, and accessible. GlowDoc follows these principles by providing a clean, distraction-free reading experience that focuses on your content.\"\n    },\n    \"introduction/quick-start\": {\n        \"title\": \"Quick Start\",\n        \"section\": \"Introduction\",\n        \"content\": \"# Quick Start\\n\\nGet up and running with GlowDoc in minutes. This comprehensive guide will walk you through installation, setup, and creating your first professional documentation site.\\n\\n## Prerequisites\\n\\nBefore you begin, ensure you have the following installed:\\n\\n### Required Software\\n\\n**Rust (Latest Stable)**\\n```bash\\n# Install Rust using rustup (recommended)\\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\\n\\n# Follow the on-screen instructions, then reload your shell\\nsource ~/.cargo/env\\n\\n# Verify installation\\nrustc --version\\ncargo --version\\n```\\n\\n**Git**\\n```bash\\n# Check if Git is installed\\ngit --version\\n\\n# If not installed:\\n# macOS: Install Xcode Command Line Tools\\nxcode-select --install\\n\\n# Windows: Download from https://git-scm.com/download/win\\n# Linux (Ubuntu/Debian): sudo apt-get install git\\n```\\n\\n**Python 3 (for local testing)**\\n```bash\\n# Check Python installation\\npython3 --version\\n\\n# Python is usually pre-installed on macOS/Linux\\n# Windows: Download from https://python.org\\n```\\n\\n### System Requirements\\n\\n- **Operating System**: macOS, Linux, or Windows\\n- **RAM**: 512MB minimum, 1GB recommended\\n- **Disk Space**: 100MB for Rust toolchain + project files\\n- **Network**: Internet connection for dependencies (initial setup only)\\n\\n## Installation Options\\n\\nChoose the installation method that best fits your workflow:\\n\\n### Option 1: Download Release (Quickest)\\n\\n1. **Download the latest release:**\\n   ```bash\\n   # Download and extract (replace URL with actual release)\\n   curl -L https://github.com/username/glowdoc/archive/refs/heads/main.zip -o glowdoc.zip\\n   unzip glowdoc.zip\\n   cd glowdoc-main\\n   ```\\n\\n2. **Build immediately:**\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n### Option 2: Clone Repository (Recommended for Development)\\n\\n1. **Clone the repository:**\\n   ```bash\\n   git clone https://github.com/username/glowdoc.git\\n   cd glowdoc\\n   ```\\n\\n2. **Build the documentation:**\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n### Option 3: Start Fresh Project\\n\\n1. **Create new project directory:**\\n   ```bash\\n   mkdir my-docs\\n   cd my-docs\\n   ```\\n\\n2. **Copy GlowDoc source files:**\\n   ```bash\\n   # Copy src/ and docs/ directories from GlowDoc\\n   # Copy Cargo.toml\\n   ```\\n\\n3. **Initialize your documentation:**\\n   ```bash\\n   cargo run init-config\\n   ```\\n\\n## Project Structure Overview\\n\\nUnderstanding GlowDoc's structure helps you work effectively:\\n\\n```\\nglowdoc/\\n├── Cargo.toml              # Rust project configuration\\n├── src/                    # Rust source code\\n│   ├── main.rs            # Main application logic\\n│   └── config_builder.rs   # Configuration builder\\n├── docs/                   # Your documentation source\\n│   ├── config.yaml        # Navigation configuration\\n│   ├── entry.md           # Homepage content (optional)\\n│   ├── introduction/      # Documentation sections\\n│   │   ├── quick-start.md\\n│   │   └── what-is-glowdoc.md\\n│   ├── getting-started/\\n│   │   ├── installation.md\\n│   │   ├── configuration.md\\n│   │   └── first-steps.md\\n│   └── [more-sections]/\\n├── index.html              # Generated documentation site\\n├── README.md              # Project information\\n└── .gitignore             # Git ignore rules\\n```\\n\\n### Key Directories\\n\\n- **`docs/`**: Your markdown documentation files\\n- **`src/`**: GlowDoc's Rust source code (modify for customization)\\n- **`index.html`**: Generated single-file documentation site\\n\\n## 5-Minute Setup\\n\\nFollow these steps to have a working documentation site in 5 minutes:\\n\\n### Step 1: Build Your First Site (1 minute)\\n\\n```bash\\n# After installation, build immediately\\ncargo run --release\\n\\n# You should see output like:\\n# \\\"Building documentation...\\\"\\n# \\\"Generated index.html successfully\\\"\\n```\\n\\n### Step 2: Preview Your Site (30 seconds)\\n\\n```bash\\n# Start local server\\npython3 -m http.server 8000\\n\\n# Open in browser\\n# Visit: http://localhost:8000\\n```\\n\\n**Alternative server options:**\\n```bash\\n# Node.js users\\nnpx serve .\\n\\n# PHP users\\nphp -S localhost:8000\\n\\n# Python 2 users\\npython -m SimpleHTTPServer 8000\\n```\\n\\n### Step 3: Verify Everything Works (30 seconds)\\n\\nCheck these features in your browser:\\n\\n- [ ] Homepage loads correctly\\n- [ ] Navigation sidebar works\\n- [ ] Theme toggle (light/dark) functions\\n- [ ] Search functionality operates\\n- [ ] Mobile responsive design\\n- [ ] All documentation pages display\\n\\n### Step 4: Customize Your Content (3 minutes)\\n\\n1. **Update site information:**\\n   ```bash\\n   # Edit docs/config.yaml\\n   vim docs/config.yaml  # or your preferred editor\\n   ```\\n   \\n   ```yaml\\n   title: My Project Documentation\\n   description: Comprehensive guide for My Project\\n   theme: vibrant  # or 'default' or 'purple'\\n   ```\\n\\n2. **Add your homepage content:**\\n   ```bash\\n   # Edit docs/entry.md\\n   vim docs/entry.md\\n   ```\\n   \\n   ```markdown\\n   # My Project Documentation\\n   \\n   Welcome to the comprehensive documentation for My Project.\\n   \\n   ## Getting Started\\n   \\n   Follow our guides to get up and running quickly.\\n   ```\\n\\n3. **Add your first documentation page:**\\n   ```bash\\n   # Create a new page\\n   echo \\\"# My First Page\\\\n\\\\nThis is my first documentation page.\\\" > docs/introduction/my-first-page.md\\n   ```\\n\\n4. **Rebuild and see changes:**\\n   ```bash\\n   cargo run --release\\n   # Refresh your browser\\n   ```\\n\\n## Configuration Walkthrough\\n\\n### Automatic Configuration (Recommended)\\n\\nLet GlowDoc detect and configure your documentation structure automatically:\\n\\n```bash\\n# Interactive configuration wizard\\ncargo run init-config\\n```\\n\\n**Example session:**\\n```\\nGlowDoc Configuration Builder\\n============================\\n\\nScanning docs/ directory...\\nFound 3 sections: introduction, getting-started, advanced\\n\\nSite title [GlowDoc]: My Project Docs\\nDescription [modern docs for the modern world]: Complete guide for My Project\\nTheme [vibrant]: default\\n\\nDetected sections:\\n1. introduction (2 files)\\n2. getting-started (3 files)  \\n3. advanced (2 files)\\n\\nWould you like to reorder sections? [y/N]: y\\nEnter new order (comma-separated): introduction,getting-started,advanced\\n\\nConfiguration saved to docs/config.yaml\\nBackup created: docs/config.yaml.backup\\n```\\n\\n### Manual Configuration\\n\\nFor precise control, edit `docs/config.yaml` directly:\\n\\n```yaml\\ntitle: My Project Documentation\\ndescription: Everything you need to know about My Project\\ntheme: vibrant\\n\\nnavigation:\\n  - title: Introduction\\n    id: introduction\\n    items:\\n      - title: Overview\\n        id: overview\\n        file: introduction/overview.md\\n      - title: Quick Start\\n        id: quick-start\\n        file: introduction/quick-start.md\\n  \\n  - title: User Guide\\n    id: user-guide\\n    items:\\n      - title: Installation\\n        id: installation\\n        file: guide/installation.md\\n      - title: Configuration\\n        id: configuration\\n        file: guide/configuration.md\\n```\\n\\n### Command-Line Configuration\\n\\nFor automated workflows, use CLI arguments:\\n\\n```bash\\n# Complete automated setup\\ncargo run init-config \\\\\\n  --title \\\"My Project Docs\\\" \\\\\\n  --description \\\"Comprehensive project documentation\\\" \\\\\\n  --section-order introduction,guide,api,advanced \\\\\\n  --rename-section guide=\\\"User Guide\\\" \\\\\\n  --rename-section api=\\\"API Reference\\\" \\\\\\n  --page-order guide=installation.md,configuration.md,usage.md \\\\\\n  --exclude-section drafts\\n```\\n\\n## Content Creation Guide\\n\\n### Writing Effective Documentation\\n\\n#### Markdown Basics\\n\\nGlowDoc supports GitHub-flavored markdown with extensions:\\n\\n```markdown\\n# Page Title (H1 - use only once per page)\\n\\n## Section Heading (H2)\\n\\n### Subsection (H3)\\n\\n**Bold text** and *italic text*\\n\\n- Bullet points\\n- Another item\\n\\n1. Numbered lists\\n2. Sequential items\\n\\n`inline code` and:\\n\\n```javascript\\n// Code blocks with syntax highlighting\\nfunction example() {\\n  return \\\"Hello, World!\\\";\\n}\\n```\\n\\n> Blockquotes for important information\\n\\n[Links to other pages](other-page.md)\\n[External links](https://example.com)\\n\\n| Tables | Are | Supported |\\n|--------|-----|-----------|\\n| Cell 1 | Cell 2 | Cell 3 |\\n```\\n\\n#### Page Structure Best Practices\\n\\n```markdown\\n# Clear, Descriptive Page Title\\n\\nBrief introduction paragraph explaining what this page covers.\\n\\n## Main Concepts\\n\\nExplain the core concepts first.\\n\\n### Detailed Subsection\\n\\nBreak down complex topics into digestible sections.\\n\\n## Examples\\n\\nProvide practical examples:\\n\\n```bash\\n# Command examples\\ncargo run --release\\n```\\n\\n## Next Steps\\n\\nGuide readers to related pages or next actions.\\n```\\n\\n### Organizing Your Content\\n\\n#### Recommended Structure\\n\\n```\\ndocs/\\n├── config.yaml\\n├── entry.md              # Homepage content\\n├── introduction/         # High-level overview\\n│   ├── overview.md       # What is your project?\\n│   ├── quick-start.md    # This page\\n│   └── concepts.md       # Core concepts\\n├── guides/               # Step-by-step instructions\\n│   ├── installation.md\\n│   ├── configuration.md\\n│   ├── first-project.md\\n│   └── troubleshooting.md\\n├── reference/            # Detailed technical info\\n│   ├── api.md\\n│   ├── cli.md\\n│   └── configuration-reference.md\\n└── advanced/             # Advanced topics\\n    ├── customization.md\\n    ├── plugins.md\\n    └── deployment.md\\n```\\n\\n#### Content Guidelines\\n\\n1. **Start with user goals**: What does the reader want to accomplish?\\n2. **Use progressive disclosure**: Basic info first, details later\\n3. **Include examples**: Show, don't just tell\\n4. **Test your instructions**: Verify steps work as documented\\n5. **Update regularly**: Keep content current with your project\\n\\n### Adding New Pages\\n\\n1. **Create the markdown file:**\\n   ```bash\\n   # Create in appropriate section\\n   touch docs/guides/new-feature.md\\n   ```\\n\\n2. **Add content with H1 title:**\\n   ```markdown\\n   # New Feature Guide\\n   \\n   This guide explains how to use the new feature.\\n   ```\\n\\n3. **Update configuration:**\\n   ```bash\\n   # Auto-detect and add to navigation\\n   cargo run init-config\\n   \\n   # Or manually edit docs/config.yaml\\n   ```\\n\\n4. **Rebuild documentation:**\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n## Theme Customization\\n\\n### Built-in Themes\\n\\nGlowDoc includes three professionally designed themes:\\n\\n```yaml\\n# In docs/config.yaml\\ntheme: default  # Clean, professional\\ntheme: purple   # Purple accents\\ntheme: vibrant  # Colorful, energetic\\n```\\n\\n### Quick Theme Preview\\n\\n```bash\\n# Try different themes quickly\\nsed -i 's/theme: .*/theme: purple/' docs/config.yaml && cargo run --release\\nsed -i 's/theme: .*/theme: vibrant/' docs/config.yaml && cargo run --release\\nsed -i 's/theme: .*/theme: default/' docs/config.yaml && cargo run --release\\n```\\n\\n### Dark Mode\\n\\nAll themes include automatic dark mode:\\n- **System preference detection**: Respects user's OS setting\\n- **Manual toggle**: Click the theme button in header\\n- **Persistent choice**: Remembers user preference\\n\\n## Development Workflow\\n\\n### Efficient Development Loop\\n\\n```bash\\n# 1. Edit your markdown files\\nvim docs/guides/new-page.md\\n\\n# 2. Rebuild (takes ~1-3 seconds)\\ncargo run --release\\n\\n# 3. Refresh browser (server keeps running)\\n# No need to restart python server\\n```\\n\\n### File Watching (Optional)\\n\\nFor automatic rebuilds on file changes:\\n\\n```bash\\n# Install cargo-watch\\ncargo install cargo-watch\\n\\n# Watch for changes and rebuild\\ncargo watch -x \\\"run --release\\\"\\n```\\n\\n### Version Control Integration\\n\\n```bash\\n# Initialize git repository\\ngit init\\n\\n# Add files (excluding generated content)\\ngit add .\\ngit commit -m \\\"Initial documentation setup\\\"\\n\\n# .gitignore should include:\\necho \\\"target/\\\" >> .gitignore\\necho \\\"index.html\\\" >> .gitignore  # Generated file\\n```\\n\\n## Testing Your Documentation\\n\\n### Pre-Deployment Checklist\\n\\n```bash\\n# 1. Build successfully\\ncargo run --release\\n\\n# 2. Check file size (should be reasonable)\\nls -lh index.html\\n\\n# 3. Validate HTML (optional)\\n# Install html-validate: npm install -g html-validate\\nhtml-validate index.html\\n\\n# 4. Test locally\\npython3 -m http.server 8000\\n```\\n\\n### Manual Testing\\n\\nVisit `http://localhost:8000` and verify:\\n\\n- [ ] **Navigation**: All links work correctly\\n- [ ] **Search**: Finds content in titles and text\\n- [ ] **Themes**: Light/dark mode toggle works\\n- [ ] **Mobile**: Sidebar collapses, navigation works\\n- [ ] **Content**: All pages display properly\\n- [ ] **Links**: Internal and external links function\\n- [ ] **Performance**: Pages load quickly\\n\\n### Accessibility Testing\\n\\n```bash\\n# Install axe-core CLI (optional)\\nnpm install -g @axe-core/cli\\n\\n# Test accessibility\\naxe http://localhost:8000\\n```\\n\\n## Common Issues and Solutions\\n\\n### Build Problems\\n\\n**\\\"cargo: command not found\\\"**\\n```bash\\n# Install Rust\\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\\nsource ~/.cargo/env\\n```\\n\\n**\\\"No such file or directory: docs/config.yaml\\\"**\\n```bash\\n# Generate configuration\\ncargo run init-config\\n```\\n\\n**Build errors after editing config.yaml**\\n```bash\\n# Validate YAML syntax\\npython3 -c \\\"import yaml; yaml.safe_load(open('docs/config.yaml'))\\\"\\n\\n# Check file references exist\\nls docs/introduction/quick-start.md\\n```\\n\\n### Server Issues\\n\\n**\\\"Address already in use\\\"**\\n```bash\\n# Find and kill process using port 8000\\nlsof -ti:8000 | xargs kill\\n\\n# Or use different port\\npython3 -m http.server 8080\\n```\\n\\n**Browser shows \\\"No such file or directory\\\"**\\n```bash\\n# Ensure you're in the correct directory\\nls index.html\\n\\n# Rebuild if missing\\ncargo run --release\\n```\\n\\n### Content Problems\\n\\n**Page not appearing in navigation**\\n```bash\\n# Ensure file is referenced in config.yaml\\ngrep -r \\\"filename.md\\\" docs/config.yaml\\n\\n# Or regenerate config\\ncargo run init-config\\n```\\n\\n**Search not finding content**\\n```bash\\n# Rebuild to update search index\\ncargo run --release\\n\\n# Check file has H1 heading\\nhead -5 docs/section/page.md\\n```\\n\\n## Next Steps\\n\\nCongratulations! You now have a working GlowDoc site. Here's what to explore next:\\n\\n### Immediate Actions\\n\\n1. **Add Your Content**\\n   - Replace sample content with your documentation\\n   - Update `docs/entry.md` with your project information\\n   - Add pages for your specific use cases\\n\\n2. **Customize Appearance**\\n   - Try different themes in `config.yaml`\\n   - Explore advanced styling options\\n   - Add your logo or branding\\n\\n3. **Test Thoroughly**\\n   - Verify all navigation works\\n   - Test search functionality\\n   - Check mobile responsiveness\\n\\n### Advanced Features\\n\\n1. **Learn Configuration Management**\\n   - Read the [Configuration Guide](../getting-started/configuration.md)\\n   - Understand navigation structure options\\n   - Explore CLI automation features\\n\\n2. **Explore Customization**\\n   - Check out [Custom Styling](../customization/styling.md)\\n   - Learn about [Components](../customization/components.md)\\n   - Discover [Theming](../customization/theming.md) options\\n\\n3. **Plan Deployment**\\n   - Review [Deployment Options](../advanced/deployment.md)\\n   - Set up automated builds\\n   - Choose your hosting platform\\n\\n4. **Extend Functionality**\\n   - Explore [Plugins](../advanced/plugins.md)\\n   - Check the [API Reference](../advanced/api.md)\\n   - Consider custom integrations\\n\\n### Community and Support\\n\\n- **Documentation**: Continue with [First Steps](../getting-started/first-steps.md)\\n- **Examples**: Browse sample configurations and setups\\n- **Issues**: Report problems or request features\\n- **Contributions**: Help improve GlowDoc\\n\\n### Pro Tips\\n\\n1. **Keep It Simple**: Start with basic setup, add complexity gradually\\n2. **Test Early**: Preview changes frequently during development\\n3. **Version Control**: Commit documentation changes regularly\\n4. **User Focus**: Write for your audience, not yourself\\n5. **Iterate**: Improve documentation based on user feedback\\n\\nYou're now ready to create professional, beautiful documentation with GlowDoc. Happy documenting!\"\n    },\n    \"getting-started/first-steps\": {\n        \"title\": \"First Steps\",\n        \"section\": \"Getting Started\",\n        \"content\": \"# First Steps\\n\\nNow that you have GlowDoc installed, let's build your first documentation site step by step.\\n\\n## 1. Initialize Your Project\\n\\nStart by setting up the basic structure for your documentation:\\n\\n```bash\\n# Create a new project directory\\nmkdir my-docs\\ncd my-docs\\n\\n# Download or clone GlowDoc\\n# Then copy the src/ and docs/ folders to your project\\n```\\n\\n## 2. Generate Your Configuration\\n\\nUse the interactive config builder to set up your site structure:\\n\\n```bash\\n# Interactive mode - walks you through setup\\ncargo run init-config\\n```\\n\\nThis will:\\n- Scan any existing markdown files in `docs/`\\n- Extract page titles from H1 headers\\n- Generate a `docs/config.yaml` file\\n- Create a backup of any existing configuration\\n\\n### Example Interactive Session\\n\\n```\\nGlowDoc Configuration Builder\\n============================\\n\\nSite title [GlowDoc]: My Project Documentation\\nDescription [modern docs for the modern world]: Comprehensive guide for My Project\\n\\nFound 3 sections in docs/:\\n  1. introduction (2 files)\\n  2. getting-started (3 files)  \\n  3. api (1 file)\\n\\nWould you like to reorder sections? [y/N]: y\\nEnter section order (comma-separated): introduction,getting-started,api\\n\\nConfiguration saved to docs/config.yaml\\n```\\n\\n## 3. Create Your Content\\n\\n### Homepage Content\\n\\nCreate or edit `docs/entry.md` for your homepage:\\n\\n```markdown\\n# My Project Documentation\\n\\nWelcome to the comprehensive documentation for My Project.\\n\\n## Getting Started\\n\\nFollow our step-by-step guides to get up and running quickly.\\n\\n## Key Features\\n\\n- Feature 1: Description\\n- Feature 2: Description\\n- Feature 3: Description\\n```\\n\\n### Add Documentation Pages\\n\\nCreate markdown files in organized folders:\\n\\n```\\ndocs/\\n├── entry.md\\n├── config.yaml\\n├── introduction/\\n│   ├── overview.md\\n│   └── installation.md\\n├── guides/\\n│   ├── quick-start.md\\n│   ├── configuration.md\\n│   └── advanced-usage.md\\n└── reference/\\n    └── api.md\\n```\\n\\nEach markdown file should start with an H1 header:\\n\\n```markdown\\n# Page Title\\n\\nYour content here...\\n\\n## Section\\n\\nMore content...\\n```\\n\\n## 4. Start Development Server\\n\\nFor the best development experience, use the built-in development server with hot reload:\\n\\n```bash\\n# Start development server (recommended)\\ncargo run watch\\n```\\n\\nThis will:\\n- Build your documentation site\\n- Start HTTP server at http://localhost:8000\\n- Watch for file changes in `docs/`\\n- Automatically rebuild and refresh your browser when files change\\n- Serve images and static assets from your docs folder\\n\\n**Alternative: One-time Build**\\n\\nIf you prefer to build once and serve with a separate server:\\n\\n```bash\\n# Build the complete site once\\ncargo run --release\\n\\n# Serve with any static server\\npython3 -m http.server 8000\\n```\\n\\nVisit `http://localhost:8000` to see your documentation site.\\n\\n## 5. Add Images and Assets\\n\\nPlace images and other static files in your `docs/` directory:\\n\\n```\\ndocs/\\n├── images/\\n│   ├── logo.png\\n│   └── screenshots/\\n│       └── demo.jpg\\n├── assets/\\n│   └── diagram.svg\\n└── getting-started/\\n    └── tutorial.md\\n```\\n\\nReference them in your markdown:\\n\\n```markdown\\n![Logo](images/logo.png)\\n![Demo Screenshot](images/screenshots/demo.jpg)\\n![Architecture](assets/diagram.svg)\\n```\\n\\nThe development server (`cargo run watch`) automatically serves these assets. Supported formats include:\\n\\n- **Images**: PNG, JPG, GIF, SVG, WebP\\n- **Documents**: PDF, TXT, MD\\n- **Media**: MP3, MP4, WebM\\n- **Fonts**: WOFF, TTF, OTF\\n\\n## 6. Customize the Appearance\\n\\n### Update Site Information\\n\\nEdit `docs/config.yaml` to customize your site:\\n\\n```yaml\\ntitle: My Project Documentation\\ndescription: Everything you need to know about My Project\\ntheme: vibrant  # or 'default'\\n```\\n\\n### Adjust Navigation\\n\\nReorder sections and pages by editing the navigation structure:\\n\\n```yaml\\nnavigation:\\n  - title: Introduction\\n    id: introduction\\n    items:\\n      - title: Overview\\n        id: overview\\n        file: introduction/overview.md\\n      - title: Installation\\n        id: installation\\n        file: introduction/installation.md\\n```\\n\\n### Rebuild After Changes\\n\\n**With Development Server (Recommended):**\\n- Changes are automatically detected and applied\\n- Browser refreshes automatically\\n- No manual rebuilding needed\\n\\n**With Manual Builds:**\\n\\n```bash\\ncargo run --release\\n```\\n\\n## 7. Development Workflow\\n\\n### Hot Reload Development (Recommended)\\n\\nUse the development server for the fastest workflow:\\n\\n```bash\\n# Start development server\\ncargo run watch\\n\\n# Then edit files in docs/ - changes appear instantly!\\n```\\n\\n**Features:**\\n- **Instant rebuilds** when you save files\\n- **Automatic browser refresh**\\n- **Static asset serving** (images, fonts, etc.)\\n- **Error reporting** in console\\n- **Debounced updates** (prevents duplicate builds)\\n\\n### Manual Build Workflow\\n\\nFor production builds or when you prefer manual control:\\n\\n```bash\\n# 1. Edit markdown files in docs/\\n# 2. Rebuild the site\\ncargo run --release\\n\\n# 3. Refresh browser to see changes\\n# (No need to restart the server)\\n```\\n\\n### Adding New Pages\\n\\n**With Development Server:**\\n1. Create the markdown file in the appropriate `docs/` subfolder\\n2. Run the config generator to update navigation:\\n   ```bash\\n   cargo run init-config\\n   ```\\n3. The site rebuilds automatically - no manual rebuild needed!\\n\\n**With Manual Builds:**\\n1. Create the markdown file in the appropriate `docs/` subfolder\\n2. Run the config generator to update navigation:\\n   ```bash\\n   cargo run init-config\\n   ```\\n3. Rebuild the site:\\n   ```bash\\n   cargo run --release\\n   ```\\n\\n### Reorganizing Content\\n\\nUse CLI options for batch updates:\\n\\n```bash\\n# Reorder sections and rename them\\ncargo run init-config \\\\\\n  --section-order intro,guide,reference \\\\\\n  --rename-section intro=\\\"Getting Started\\\" \\\\\\n  --rename-section guide=\\\"User Guide\\\"\\n```\\n\\n## Next Steps\\n\\nNow that you have a working documentation site:\\n\\n1. **Explore Customization**: Learn about theming and styling options\\n2. **Add More Content**: Expand your documentation with additional pages\\n3. **Deploy Your Site**: Set up hosting for your documentation\\n4. **Advanced Features**: Explore plugins and advanced configuration\\n\\n## Common Tasks\\n\\n### Adding a New Section\\n\\n1. Create a new folder in `docs/`: `mkdir docs/new-section`\\n2. Add markdown files to the folder\\n3. Run `cargo run init-config` to detect the new section\\n4. Rebuild: `cargo run --release`\\n\\n### Reordering Pages\\n\\n```bash\\ncargo run init-config --page-order section=page1.md,page2.md,page3.md\\n```\\n\\n### Excluding Draft Content\\n\\n```bash\\ncargo run init-config --exclude-section drafts\\n```\\n\\n### Custom Page Titles\\n\\nOverride auto-detected titles in `docs/config.yaml`:\\n\\n```yaml\\n- title: Custom Navigation Title\\n  id: page-id\\n  file: section/actual-filename.md\\n```\\n\\n## Troubleshooting\\n\\n**Build errors**: Check that all files referenced in `config.yaml` exist and paths are correct.\\n\\n**Missing navigation**: Ensure your markdown files have H1 headers and are included in the config.\\n\\n**Styling issues**: Verify the theme setting in config.yaml and rebuild the site.\\n\\n**Server not accessible**: Check that the server is running and try `http://localhost:8000` instead of `127.0.0.1`.\"\n    },\n    \"getting-started/setup/setup-installation\": {\n        \"title\": \"Installation\",\n        \"section\": \"Getting Started\",\n        \"content\": \"# Installation\\n\\nGlowDoc is designed to be simple to set up. Choose the method that works best for your workflow.\\n\\n## Download Template\\n\\nThe easiest way to get started is to download the template directly:\\n\\n```bash\\n# Download and extract\\nwget https://github.com/paradise-runner/glowdoc/archive/main.zip\\nunzip main.zip\\ncd glowdoc-main\\n```\\n\\n## Clone Repository\\n\\nIf you prefer to clone the repository:\\n\\n```bash\\n# Clone the repository\\ngit clone https://github.com/paradise-runner/glowdoc.git\\ncd glowdoc\\n\\n# Remove git history (optional)\\nrm -rf .git\\ngit init\\n```\\n\\n## Use as Template\\n\\nCreate a new repository using GlowDoc as a template on GitHub, then clone your new repository.\"\n    },\n    \"getting-started/setup/setup-configuration\": {\n        \"title\": \"Configuration\",\n        \"section\": \"Getting Started\",\n        \"content\": \"# Configuration\\n\\nGlowDoc provides flexible configuration options to customize your documentation site. All configuration is managed through the `docs/config.yaml` file.\\n\\n## config.yaml Overview\\n\\nThe configuration file controls your site's structure, navigation, and appearance:\\n\\n```yaml\\ntitle: GlowDoc\\ndescription: modern docs for the modern world\\ntheme: vibrant\\nnavigation:\\n  - title: Introduction\\n    id: introduction\\n    items:\\n      - title: What is GlowDoc?\\n        id: what-is-glowdoc\\n        file: introduction/what-is-glowdoc.md\\n```\\n\\n## Auto-Generate Configuration\\n\\nThe easiest way to create or update your configuration is using the built-in generator:\\n\\n### Interactive Mode\\n\\n```bash\\ncargo run init-config\\n```\\n\\nThis launches an interactive wizard that:\\n- Scans your `docs/` folder structure\\n- Detects existing markdown files\\n- Extracts page titles from H1 headers\\n- Guides you through customization options\\n- Backs up your existing config before generating a new one\\n\\n### Command-Line Mode\\n\\nFor automated workflows, use CLI arguments:\\n\\n```bash\\ncargo run init-config \\\\\\n  --title \\\"My Project\\\" \\\\\\n  --description \\\"Comprehensive project documentation\\\" \\\\\\n  --section-order introduction,guide,api,advanced \\\\\\n  --rename-section guide=\\\"User Guide\\\" \\\\\\n  --rename-page guide/setup.md=\\\"Installation Guide\\\" \\\\\\n  --page-order guide=setup.md,configuration.md,usage.md \\\\\\n  --exclude-section drafts\\n```\\n\\n### Available CLI Options\\n\\n- `--title \\\"Site Title\\\"` - Set the site title\\n- `--description \\\"Description\\\"` - Set the site description\\n- `--section-order folder1,folder2` - Reorder sections by folder names\\n- `--rename-section old=new` - Rename section titles in navigation\\n- `--rename-page section/file.md=\\\"New Title\\\"` - Override page titles\\n- `--page-order section=file1.md,file2.md` - Reorder pages within sections\\n- `--exclude-section folder` - Exclude folders from navigation\\n- `--help` - Show complete usage guide\\n\\n## Manual Configuration\\n\\n### Basic Settings\\n\\n```yaml\\ntitle: Your Project Name\\ndescription: Brief description for SEO and page meta\\ntheme: vibrant  # or 'default'\\n```\\n\\n### Navigation Structure\\n\\nNavigation follows a hierarchical structure with sections and items:\\n\\n```yaml\\nnavigation:\\n  - title: Section Name\\n    id: unique-section-id\\n    items:\\n      - title: Page Title\\n        id: unique-page-id\\n        file: folder/filename.md\\n```\\n\\n**Key Rules:**\\n- Section `id` must be unique across all sections\\n- Page `id` must be unique across all pages\\n- `file` path is relative to the `docs/` folder\\n- Pages are displayed in the order they appear in the config\\n\\n### Themes\\n\\nGlowDoc includes built-in themes:\\n\\n- `default` - Clean, professional appearance\\n- `vibrant` - Bold colors with enhanced contrast\\n\\n## File Organization\\n\\n### Recommended Structure\\n\\n```\\ndocs/\\n├── config.yaml          # Navigation configuration\\n├── entry.md            # Homepage content (optional)\\n├── introduction/\\n│   ├── overview.md\\n│   └── quick-start.md\\n├── guides/\\n│   ├── installation.md\\n│   └── configuration.md\\n└── reference/\\n    ├── api.md\\n    └── cli.md\\n```\\n\\n### Markdown Files\\n\\nEach markdown file should start with an H1 header:\\n\\n```markdown\\n# Page Title\\n\\nContent goes here...\\n```\\n\\nThe H1 title is automatically extracted during config generation and used as the default page title.\\n\\n## Advanced Configuration\\n\\n### Custom Page Titles\\n\\nOverride the auto-detected title from the markdown H1:\\n\\n```yaml\\n- title: Custom Page Title  # Shows in navigation\\n  id: custom-page\\n  file: section/actual-filename.md  # H1 in file can be different\\n```\\n\\n### Section Ordering\\n\\nControl the order sections appear in navigation:\\n\\n```bash\\ncargo run init-config --section-order introduction,tutorial,reference,advanced\\n```\\n\\n### Page Ordering\\n\\nControl the order pages appear within each section:\\n\\n```bash\\ncargo run init-config --page-order tutorial=setup.md,basics.md,advanced.md\\n```\\n\\n## Development Workflow\\n\\n1. **Edit Configuration**: Modify `docs/config.yaml` or use `cargo run init-config`\\n2. **Update Content**: Edit markdown files in the `docs/` folder\\n3. **Rebuild Site**: Run `cargo run --release` to regenerate `index.html`\\n4. **Preview Changes**: Use `python3 -m http.server 8000` to serve locally\\n\\n## Troubleshooting\\n\\n### Common Issues\\n\\n**Config validation errors:** Ensure all `id` fields are unique and all referenced files exist.\\n\\n**Missing pages:** Check that file paths in config.yaml are correct and relative to the `docs/` folder.\\n\\n**Build failures:** Verify YAML syntax in config.yaml using a YAML validator.\\n\\n### Backup and Recovery\\n\\nThe config generator automatically creates backups:\\n- `docs/config.yaml.backup` - Created before generating new config\\n- Manual backup: `cp docs/config.yaml docs/config.yaml.manual-backup`\"\n    },\n    \"customization/theming\": {\n        \"title\": \"Theming\",\n        \"section\": \"Customization\",\n        \"content\": \"# Theming\\n\\nGlowDoc features a sophisticated theming system built on CSS custom properties, supporting multiple color schemes and seamless dark mode switching.\\n\\n## Built-in Themes\\n\\nGlowDoc includes three professionally designed themes:\\n\\n### Default Theme\\nClean, neutral design perfect for professional documentation:\\n```yaml\\n# In docs/config.yaml\\ntheme: default\\n```\\n\\n### Purple Theme\\nPurple-accented design with elegant color tones:\\n```yaml\\ntheme: purple\\n```\\n\\n### Vibrant Theme\\nColorful, energetic design with bold accents:\\n```yaml\\ntheme: vibrant\\n```\\n\\n## Color System Architecture\\n\\nGlowDoc uses a semantic color system with HSL values for precise color control and smooth transitions.\\n\\n### Core Color Properties\\n\\nAll themes use the same CSS custom property structure:\\n\\n```css\\n:root {\\n  /* Background colors */\\n  --background: 0 0% 100%;\\n  --foreground: 222.2 84% 4.9%;\\n  \\n  /* Component backgrounds */\\n  --card: 0 0% 100%;\\n  --card-foreground: 222.2 84% 4.9%;\\n  --popover: 0 0% 100%;\\n  --popover-foreground: 222.2 84% 4.9%;\\n  \\n  /* Semantic colors */\\n  --primary: 222.2 47.4% 11.2%;\\n  --primary-foreground: 210 40% 98%;\\n  --secondary: 210 40% 96%;\\n  --secondary-foreground: 222.2 84% 4.9%;\\n  --muted: 210 40% 96%;\\n  --muted-foreground: 215.4 16.3% 46.9%;\\n  \\n  /* Interactive elements */\\n  --accent: 210 40% 96%;\\n  --accent-foreground: 222.2 84% 4.9%;\\n  --destructive: 0 84.2% 60.2%;\\n  --destructive-foreground: 210 40% 98%;\\n  \\n  /* UI elements */\\n  --border: 214.3 31.8% 91.4%;\\n  --input: 214.3 31.8% 91.4%;\\n  --ring: 222.2 84% 4.9%;\\n  --radius: 0.5rem;\\n}\\n```\\n\\n### Dark Mode Support\\n\\nEach theme automatically includes dark mode variants:\\n\\n```css\\n[data-theme=\\\"dark\\\"] {\\n  --background: 222.2 84% 4.9%;\\n  --foreground: 210 40% 98%;\\n  /* ... other dark mode overrides */\\n}\\n```\\n\\n**Dark Mode Features:**\\n- Automatic system preference detection\\n- Manual toggle with LocalStorage persistence\\n- Smooth 0.3s transitions between themes\\n- Optimized contrast ratios for readability\\n\\n## Typography System\\n\\n### Font Stack\\n\\nGlowDoc uses a carefully selected system font stack for optimal performance and cross-platform consistency:\\n\\n```css\\nfont-family: -apple-system, BlinkMacSystemFont, \\\"Segoe UI\\\", \\n             Roboto, \\\"Helvetica Neue\\\", Arial, sans-serif;\\n```\\n\\n### Typography Scale\\n\\n**Homepage Typography:**\\n- **Main Heading (H1):** 3rem (48px), weight 800, gradient text effect\\n- **Section Headings (H2):** 1.75rem (28px), weight 600\\n- **Body Text:** 1.125rem (18px) for enhanced readability\\n\\n**Content Typography:**\\n- **Page Titles (H1):** 2.5rem (40px), weight 700\\n- **Section Headings (H2):** 1.75rem (28px), weight 600\\n- **Body Text:** 1rem (16px) for optimal reading\\n- **Navigation:** 0.875rem (14px), weight 500-600\\n- **Code:** 0.875rem (14px) monospace\\n\\n### Special Typography Effects\\n\\n**Gradient Text (Homepage):**\\n```css\\nbackground: linear-gradient(135deg, \\n  hsl(var(--primary)), \\n  hsl(var(--accent))\\n);\\n-webkit-background-clip: text;\\ncolor: transparent;\\n```\\n\\n## Spacing System\\n\\nGlowDoc uses a consistent spacing scale based on rem units:\\n\\n```css\\n/* Spacing scale */\\n--space-1: 0.25rem;  /* 4px */\\n--space-2: 0.5rem;   /* 8px */\\n--space-3: 0.75rem;  /* 12px */\\n--space-4: 1rem;     /* 16px */\\n--space-6: 1.5rem;   /* 24px */\\n--space-8: 2rem;     /* 32px */\\n--space-16: 4rem;    /* 64px */\\n```\\n\\n**Common Usage:**\\n- Small margins: `0.25rem` (4px)\\n- Button padding: `0.5rem` (8px)\\n- Standard spacing: `1rem` (16px)\\n- Section gaps: `1.5rem` (24px)\\n- Content padding: `2rem` (32px)\\n- Large sections: `4rem` (64px)\\n\\n## Custom Theme Creation\\n\\n### 1. Modify Existing Theme\\n\\nTo customize an existing theme, you'll need to modify the CSS generation in the Rust source:\\n\\n**Location:** `src/main.rs` in the `generate_css()` function\\n\\n### 2. Color Customization\\n\\nUpdate the HSL values for any theme:\\n\\n```css\\n:root {\\n  /* Change primary brand color */\\n  --primary: 220 70% 50%;  /* Blue instead of dark gray */\\n  --primary-foreground: 0 0% 100%;\\n  \\n  /* Adjust accent color */\\n  --accent: 160 60% 45%;   /* Teal accent */\\n  --accent-foreground: 0 0% 100%;\\n}\\n```\\n\\n### 3. Typography Customization\\n\\n**Custom Font Integration:**\\n```css\\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');\\n\\nbody {\\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\\n}\\n```\\n\\n**Custom Font Sizes:**\\n```css\\n/* Larger base font size */\\n.main-content {\\n  font-size: 1.125rem;\\n  line-height: 1.75;\\n}\\n\\n/* Custom heading sizes */\\nh1 { font-size: 3rem; }\\nh2 { font-size: 2rem; }\\nh3 { font-size: 1.5rem; }\\n```\\n\\n## Advanced Theming\\n\\n### Custom CSS Properties\\n\\nAdd your own custom properties for consistent theming:\\n\\n```css\\n:root {\\n  /* Custom brand colors */\\n  --brand-blue: 220 90% 56%;\\n  --brand-green: 142 71% 45%;\\n  --brand-orange: 25 95% 53%;\\n  \\n  /* Custom spacing */\\n  --content-width: 900px;\\n  --sidebar-width: 320px;\\n  \\n  /* Custom shadows */\\n  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\\n  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);\\n}\\n```\\n\\n### Responsive Design Variables\\n\\n```css\\n:root {\\n  --mobile-breakpoint: 768px;\\n  --sidebar-width: 280px;\\n  --mobile-padding: 1rem;\\n  --desktop-padding: 2rem;\\n}\\n\\n@media (max-width: 768px) {\\n  .main-content {\\n    padding: var(--mobile-padding);\\n  }\\n}\\n```\\n\\n### Animation Customization\\n\\n```css\\n:root {\\n  /* Transition speeds */\\n  --transition-fast: 0.15s;\\n  --transition-normal: 0.2s;\\n  --transition-slow: 0.3s;\\n  \\n  /* Easing functions */\\n  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);\\n  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1);\\n}\\n\\n/* Apply to interactive elements */\\n.nav-link {\\n  transition: all var(--transition-normal) var(--ease-out);\\n}\\n```\\n\\n## Theme Implementation Details\\n\\n### Theme Switching Mechanism\\n\\nGlowDoc implements theme switching through:\\n\\n1. **Data attribute:** `data-theme=\\\"light|dark\\\"` on the `<html>` element\\n2. **JavaScript toggle:** Smooth transitions between light/dark modes\\n3. **LocalStorage:** Persistent user preference storage\\n4. **System detection:** Automatic theme based on user's OS preference\\n\\n### Color Accessibility\\n\\nAll themes maintain WCAG AA contrast ratios:\\n- Normal text: 4.5:1 contrast ratio\\n- Large text: 3:1 contrast ratio\\n- Interactive elements: Enhanced focus states\\n\\n### Performance Considerations\\n\\n- CSS custom properties enable instant theme switching\\n- No additional HTTP requests for theme assets\\n- Optimized for both light and dark viewing conditions\\n- Smooth transitions without layout shifts\\n\\n## Troubleshooting\\n\\n**Theme not applying:** Ensure the theme name in `config.yaml` matches exactly: `default`, `purple`, or `vibrant`.\\n\\n**Dark mode not working:** Check that JavaScript is enabled and the browser supports CSS custom properties.\\n\\n**Custom colors not showing:** Verify HSL values are properly formatted: `220 70% 50%` (without `hsl()` wrapper).\\n\\n**Typography issues:** Ensure font declarations come after the base stylesheet in the build process.\"\n    },\n    \"customization/components\": {\n        \"title\": \"Components\",\n        \"section\": \"Customization\",\n        \"content\": \"# Components\\n\\nGlowDoc is built with a comprehensive component system that provides consistent, accessible, and responsive UI elements throughout your documentation site.\\n\\n## Layout Components\\n\\n### Header Component\\n\\nThe main header provides navigation and theme switching functionality:\\n\\n**Structure:**\\n```html\\n<header class=\\\"header-content\\\">\\n  <div class=\\\"container\\\">\\n    <div class=\\\"logo\\\">Site Title</div>\\n    <button class=\\\"theme-toggle\\\" aria-label=\\\"Toggle theme\\\">\\n      <!-- Theme toggle icon -->\\n    </button>\\n  </div>\\n</header>\\n```\\n\\n**Features:**\\n- Sticky positioning with backdrop blur effect\\n- 80px fixed height\\n- Responsive container with max-width of 1200px\\n- Integrated theme toggle button\\n\\n### Sidebar Navigation\\n\\nThe collapsible sidebar houses the main navigation and search functionality:\\n\\n**Structure:**\\n```html\\n<aside class=\\\"sidebar\\\">\\n  <div class=\\\"search-container\\\">\\n    <input type=\\\"text\\\" class=\\\"search-input\\\" placeholder=\\\"Search...\\\">\\n    <div class=\\\"search-results\\\"></div>\\n  </div>\\n  \\n  <nav class=\\\"navigation\\\">\\n    <div class=\\\"nav-section\\\">\\n      <button class=\\\"nav-section-title\\\">Section Name</button>\\n      <div class=\\\"nav-section-content\\\">\\n        <a href=\\\"#page\\\" class=\\\"nav-link\\\">Page Title</a>\\n      </div>\\n    </div>\\n  </nav>\\n</aside>\\n```\\n\\n**Features:**\\n- Fixed 280px width on desktop\\n- Collapsible sections with smooth animations\\n- Integrated search with live results\\n- Mobile-responsive with overlay behavior\\n\\n### Main Content Area\\n\\nThe primary content container with optimal reading layout:\\n\\n**Structure:**\\n```html\\n<main class=\\\"main-content\\\">\\n  <div class=\\\"content-section\\\" id=\\\"page-id\\\">\\n    <h1>Page Title</h1>\\n    <p>Content goes here...</p>\\n  </div>\\n</main>\\n```\\n\\n**Features:**\\n- Flexible layout that grows to fill available space\\n- 800px max-width for optimal reading\\n- Responsive padding (2rem desktop, 1rem mobile)\\n- Centered content with proper spacing\\n\\n## Navigation Components\\n\\n### Navigation Links\\n\\nIndividual navigation items with active state support:\\n\\n**CSS Classes:**\\n```css\\n.nav-link {\\n  /* Base navigation link styles */\\n  display: block;\\n  padding: 0.5rem 1rem;\\n  color: hsl(var(--muted-foreground));\\n  text-decoration: none;\\n  border-radius: 0.375rem;\\n  transition: all 0.2s ease;\\n}\\n\\n.nav-link:hover {\\n  background-color: hsl(var(--accent));\\n  color: hsl(var(--accent-foreground));\\n}\\n\\n.nav-link.active {\\n  background-color: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n  font-weight: 600;\\n}\\n```\\n\\n**Usage:**\\n- Automatically marked as `.active` based on current page\\n- Left border accent on hover and active states\\n- Smooth color transitions\\n- Accessible keyboard navigation\\n\\n### Section Headers\\n\\nCollapsible section headers in the navigation:\\n\\n**Structure:**\\n```html\\n<button class=\\\"nav-section-title\\\" data-section=\\\"section-id\\\">\\n  <span>Section Name</span>\\n  <svg class=\\\"chevron-icon\\\"><!-- Chevron icon --></svg>\\n</button>\\n```\\n\\n**Features:**\\n- Click to expand/collapse section content\\n- Animated chevron icon rotation\\n- Maintains expanded state in LocalStorage\\n- Proper ARIA attributes for accessibility\\n\\n## Interactive Components\\n\\n### Theme Toggle\\n\\nThe dark/light mode switcher with system preference detection:\\n\\n**Structure:**\\n```html\\n<button class=\\\"theme-toggle\\\" aria-label=\\\"Toggle theme\\\">\\n  <svg class=\\\"sun-icon\\\"><!-- Sun icon --></svg>\\n  <svg class=\\\"moon-icon\\\"><!-- Moon icon --></svg>\\n</button>\\n```\\n\\n**Features:**\\n- Automatic system preference detection on first visit\\n- Smooth icon transitions between light/dark states\\n- LocalStorage persistence for user preference\\n- 0.3s transition for theme switching\\n\\n### Search Component\\n\\nLive search functionality with instant results:\\n\\n**Structure:**\\n```html\\n<div class=\\\"search-container\\\">\\n  <div class=\\\"search-input-wrapper\\\">\\n    <svg class=\\\"search-icon\\\"><!-- Search icon --></svg>\\n    <input type=\\\"text\\\" class=\\\"search-input\\\" placeholder=\\\"Search documentation...\\\">\\n  </div>\\n  <div class=\\\"search-results\\\">\\n    <div class=\\\"search-result\\\" data-target=\\\"page-id\\\">\\n      <div class=\\\"search-result-title\\\">Page Title</div>\\n      <div class=\\\"search-result-excerpt\\\">Matching content...</div>\\n    </div>\\n  </div>\\n</div>\\n```\\n\\n**Features:**\\n- Real-time search as you type (300ms debounce)\\n- Searches through all page titles and content\\n- Highlighted search terms in results\\n- Keyboard navigation support (arrow keys, Enter)\\n- Click or Enter to navigate to results\\n\\n### Mobile Menu\\n\\nResponsive navigation for mobile devices:\\n\\n**Structure:**\\n```html\\n<button class=\\\"mobile-menu-toggle\\\">\\n  <span class=\\\"hamburger-line\\\"></span>\\n  <span class=\\\"hamburger-line\\\"></span>\\n  <span class=\\\"hamburger-line\\\"></span>\\n</button>\\n```\\n\\n**Features:**\\n- Animated hamburger menu icon\\n- Transforms sidebar into full-screen overlay\\n- Smooth slide-in animation from left\\n- Closes on backdrop click or page navigation\\n\\n## Content Components\\n\\n### Code Blocks\\n\\nSyntax-highlighted code blocks with proper formatting:\\n\\n**Markdown Usage:**\\n````markdown\\n```javascript\\nfunction greetUser(name) {\\n  console.log(`Hello, ${name}!`);\\n}\\n```\\n````\\n\\n**Generated HTML:**\\n```html\\n<pre><code class=\\\"language-javascript\\\">\\nfunction greetUser(name) {\\n  console.log(`Hello, ${name}!`);\\n}\\n</code></pre>\\n```\\n\\n**Features:**\\n- Automatic syntax highlighting via CSS\\n- Consistent background and padding\\n- Horizontal scrolling for long lines\\n- Copy-friendly formatting\\n\\n### Content Sections\\n\\nOrganized content areas for each documentation page:\\n\\n**Structure:**\\n```html\\n<div class=\\\"content-section\\\" id=\\\"unique-page-id\\\">\\n  <h1>Page Title</h1>\\n  <p>Introduction paragraph...</p>\\n  \\n  <h2>Section Heading</h2>\\n  <p>Section content...</p>\\n</div>\\n```\\n\\n**Features:**\\n- Hidden by default (only active page shown)\\n- Smooth fade-in transitions when activated\\n- Proper heading hierarchy (H1 for page title, H2+ for sections)\\n- Semantic HTML structure for accessibility\\n\\n### Search Result Highlighting\\n\\nDynamic highlighting of search terms in content:\\n\\n**Generated Markup:**\\n```html\\n<p>This is some <mark class=\\\"search-highlight\\\">highlighted</mark> text.</p>\\n```\\n\\n**CSS Styling:**\\n```css\\n.search-highlight {\\n  background-color: hsl(var(--primary) / 0.2);\\n  color: hsl(var(--primary-foreground));\\n  padding: 0.125rem 0.25rem;\\n  border-radius: 0.25rem;\\n}\\n```\\n\\n## Responsive Behavior\\n\\n### Breakpoint System\\n\\nGlowDoc uses a mobile-first approach with a single breakpoint:\\n\\n```css\\n/* Mobile styles (default) */\\n.sidebar {\\n  position: fixed;\\n  left: -100%;\\n  transition: left 0.3s ease;\\n}\\n\\n/* Desktop styles */\\n@media (min-width: 768px) {\\n  .sidebar {\\n    position: fixed;\\n    left: 0;\\n  }\\n}\\n```\\n\\n### Mobile Adaptations\\n\\n**Sidebar Behavior:**\\n- Becomes full-screen overlay on mobile\\n- Slide-in animation from left edge\\n- Backdrop blur and dark overlay\\n- Closes on outside click or page navigation\\n\\n**Content Layout:**\\n- Single-column layout on mobile\\n- Reduced padding (1rem vs 2rem)\\n- Optimized touch targets (44px minimum)\\n- Larger font sizes for better readability\\n\\n**Navigation:**\\n- Collapsible sections remain functional\\n- Touch-optimized interactive areas\\n- Simplified hover states for touch devices\\n\\n## Accessibility Features\\n\\n### Keyboard Navigation\\n\\n**Navigation Support:**\\n- Tab order follows logical content flow\\n- Arrow keys navigate search results\\n- Enter key activates links and buttons\\n- Escape key closes mobile menu and search\\n\\n**Focus Management:**\\n- Visible focus indicators on all interactive elements\\n- Focus trapped within mobile menu when open\\n- Focus restored when closing overlays\\n\\n### Screen Reader Support\\n\\n**ARIA Labels:**\\n```html\\n<button aria-label=\\\"Toggle theme\\\" class=\\\"theme-toggle\\\">\\n<input aria-label=\\\"Search documentation\\\" class=\\\"search-input\\\">\\n<nav aria-label=\\\"Main navigation\\\" class=\\\"navigation\\\">\\n```\\n\\n**Semantic Structure:**\\n- Proper heading hierarchy (H1 → H2 → H3)\\n- Landmark roles for main sections\\n- Descriptive link text\\n- Form labels associated with inputs\\n\\n### Color and Contrast\\n\\n**WCAG AA Compliance:**\\n- 4.5:1 contrast ratio for normal text\\n- 3:1 contrast ratio for large text\\n- Enhanced focus states with both color and outline\\n- Color is not the only means of conveying information\\n\\n## Performance Optimizations\\n\\n### CSS Architecture\\n\\n**Efficient Selectors:**\\n- Class-based selectors for performance\\n- Minimal nesting depth\\n- Optimized specificity\\n\\n**Transition Performance:**\\n- GPU-accelerated transforms\\n- Efficient property animations (opacity, transform)\\n- Reasonable transition durations (0.2s-0.3s)\\n\\n### JavaScript Optimization\\n\\n**Search Debouncing:**\\n- 300ms delay to reduce excessive searches\\n- Efficient DOM queries using data attributes\\n- Minimal DOM manipulation\\n\\n**Event Handling:**\\n- Event delegation for dynamic content\\n- Passive event listeners where appropriate\\n- Memory leak prevention\\n\\n## Customization Examples\\n\\n### Custom Navigation Styling\\n\\n```css\\n.nav-link {\\n  /* Add custom styles */\\n  border-left: 3px solid transparent;\\n  margin-bottom: 0.25rem;\\n}\\n\\n.nav-link:hover {\\n  border-left-color: hsl(var(--primary));\\n  background: linear-gradient(90deg, \\n    hsl(var(--primary) / 0.1), \\n    transparent\\n  );\\n}\\n\\n.nav-link.active {\\n  border-left-color: hsl(var(--primary));\\n  background-color: hsl(var(--primary) / 0.15);\\n}\\n```\\n\\n### Custom Search Styling\\n\\n```css\\n.search-container {\\n  /* Custom search appearance */\\n  background: hsl(var(--card));\\n  border: 1px solid hsl(var(--border));\\n  border-radius: 0.75rem;\\n  padding: 1rem;\\n  margin-bottom: 1.5rem;\\n}\\n\\n.search-input {\\n  /* Enhanced input styling */\\n  background: hsl(var(--background));\\n  border: 2px solid hsl(var(--border));\\n  border-radius: 0.5rem;\\n  padding: 0.75rem 1rem 0.75rem 2.5rem;\\n}\\n\\n.search-input:focus {\\n  border-color: hsl(var(--primary));\\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\\n}\\n```\\n\\n### Custom Content Styling\\n\\n```css\\n.content-section {\\n  /* Enhanced content presentation */\\n  line-height: 1.75;\\n  max-width: 900px; /* Wider content area */\\n}\\n\\n.content-section h1 {\\n  /* Custom heading styles */\\n  border-bottom: 2px solid hsl(var(--border));\\n  padding-bottom: 1rem;\\n  margin-bottom: 2rem;\\n}\\n\\n.content-section h2 {\\n  /* Section heading enhancements */\\n  margin-top: 3rem;\\n  margin-bottom: 1.5rem;\\n  color: hsl(var(--primary));\\n}\\n```\\n\\nThis component system provides a solid foundation for building beautiful, functional documentation sites while maintaining consistency and accessibility across all interface elements.\"\n    },\n    \"customization/styling\": {\n        \"title\": \"Custom Styling\",\n        \"section\": \"Customization\",\n        \"content\": \"# Custom Styling\\n\\nAdvanced styling techniques and customization patterns for creating unique GlowDoc designs that match your brand and requirements.\\n\\n## Architecture Overview\\n\\nGlowDoc's CSS architecture is designed for maximum customization while maintaining performance and accessibility. Understanding the core structure enables powerful customizations.\\n\\n### CSS Organization\\n\\nThe generated stylesheet follows this structure:\\n\\n```css\\n/* 1. CSS Reset & Base Styles */\\n/* 2. CSS Custom Properties (Design Tokens) */\\n/* 3. Layout Components */\\n/* 4. Navigation Components */\\n/* 5. Content Components */\\n/* 6. Interactive Components */\\n/* 7. Responsive Media Queries */\\n/* 8. Theme Variations */\\n```\\n\\n### Modification Approach\\n\\nSince GlowDoc generates a single HTML file with embedded CSS, customizations should be added to the Rust source in the `generate_css()` function:\\n\\n**Location:** `src/main.rs` - Look for the `generate_css()` function\\n\\n## Advanced Styling Techniques\\n\\n### Custom Brand Integration\\n\\n#### Brand Color System\\n\\nCreate a comprehensive brand color palette:\\n\\n```css\\n:root {\\n  /* Primary brand colors */\\n  --brand-primary: 220 90% 56%;\\n  --brand-primary-dark: 220 90% 45%;\\n  --brand-primary-light: 220 90% 65%;\\n  \\n  /* Secondary brand colors */\\n  --brand-secondary: 160 60% 45%;\\n  --brand-accent: 25 95% 53%;\\n  --brand-neutral: 220 10% 50%;\\n  \\n  /* Semantic color mappings */\\n  --primary: var(--brand-primary);\\n  --accent: var(--brand-secondary);\\n  \\n  /* Brand gradients */\\n  --brand-gradient: linear-gradient(135deg, \\n    hsl(var(--brand-primary)), \\n    hsl(var(--brand-secondary))\\n  );\\n}\\n```\\n\\n#### Logo and Brand Assets\\n\\nIntegrate custom logos and brand elements:\\n\\n```css\\n.logo {\\n  background-image: url('data:image/svg+xml;base64,...');\\n  background-size: contain;\\n  background-repeat: no-repeat;\\n  width: 120px;\\n  height: 40px;\\n  text-indent: -9999px; /* Hide text */\\n}\\n\\n/* Alternative: Custom font logo */\\n.logo {\\n  font-family: 'Your Brand Font', sans-serif;\\n  font-weight: 700;\\n  font-size: 1.5rem;\\n  color: hsl(var(--brand-primary));\\n}\\n```\\n\\n### Advanced Layout Customizations\\n\\n#### Multi-Column Content Layout\\n\\nCreate complex content layouts:\\n\\n```css\\n.content-section {\\n  display: grid;\\n  grid-template-columns: 1fr 300px;\\n  gap: 2rem;\\n  max-width: 1200px;\\n}\\n\\n.content-main {\\n  min-width: 0; /* Prevent grid blowout */\\n}\\n\\n.content-sidebar {\\n  background: hsl(var(--card));\\n  border: 1px solid hsl(var(--border));\\n  border-radius: 0.5rem;\\n  padding: 1.5rem;\\n  height: fit-content;\\n  position: sticky;\\n  top: 100px; /* Account for header height */\\n}\\n\\n@media (max-width: 1024px) {\\n  .content-section {\\n    grid-template-columns: 1fr;\\n  }\\n  \\n  .content-sidebar {\\n    order: -1; /* Move sidebar above content on mobile */\\n  }\\n}\\n```\\n\\n#### Custom Navigation Layouts\\n\\nEnhanced sidebar with custom sections:\\n\\n```css\\n.sidebar {\\n  display: grid;\\n  grid-template-rows: auto 1fr auto;\\n  gap: 1rem;\\n}\\n\\n.sidebar-header {\\n  padding: 1rem;\\n  border-bottom: 1px solid hsl(var(--border));\\n}\\n\\n.sidebar-content {\\n  overflow-y: auto;\\n  padding: 0 1rem;\\n}\\n\\n.sidebar-footer {\\n  padding: 1rem;\\n  border-top: 1px solid hsl(var(--border));\\n  background: hsl(var(--muted) / 0.5);\\n}\\n\\n/* Custom navigation grouping */\\n.nav-group {\\n  margin-bottom: 2rem;\\n}\\n\\n.nav-group-title {\\n  font-size: 0.75rem;\\n  font-weight: 600;\\n  text-transform: uppercase;\\n  letter-spacing: 0.05em;\\n  color: hsl(var(--muted-foreground));\\n  margin-bottom: 0.5rem;\\n  padding: 0 1rem;\\n}\\n```\\n\\n### Typography Enhancement\\n\\n#### Custom Font Integration\\n\\nProfessional typography with web fonts:\\n\\n```css\\n/* Import custom fonts */\\n@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');\\n\\n:root {\\n  /* Typography system */\\n  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\\n  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;\\n  \\n  /* Type scale */\\n  --text-xs: 0.75rem;    /* 12px */\\n  --text-sm: 0.875rem;   /* 14px */\\n  --text-base: 1rem;     /* 16px */\\n  --text-lg: 1.125rem;   /* 18px */\\n  --text-xl: 1.25rem;    /* 20px */\\n  --text-2xl: 1.5rem;    /* 24px */\\n  --text-3xl: 1.875rem;  /* 30px */\\n  --text-4xl: 2.25rem;   /* 36px */\\n  --text-5xl: 3rem;      /* 48px */\\n}\\n\\nbody {\\n  font-family: var(--font-sans);\\n}\\n\\ncode, pre {\\n  font-family: var(--font-mono);\\n}\\n```\\n\\n#### Advanced Typography Styles\\n\\nRich text formatting and hierarchy:\\n\\n```css\\n.content-section {\\n  /* Enhanced reading experience */\\n  font-size: var(--text-lg);\\n  line-height: 1.7;\\n  color: hsl(var(--foreground));\\n}\\n\\n.content-section h1 {\\n  font-size: var(--text-4xl);\\n  font-weight: 800;\\n  line-height: 1.1;\\n  margin-bottom: 1.5rem;\\n  background: var(--brand-gradient);\\n  -webkit-background-clip: text;\\n  -webkit-text-fill-color: transparent;\\n  background-clip: text;\\n}\\n\\n.content-section h2 {\\n  font-size: var(--text-2xl);\\n  font-weight: 700;\\n  margin-top: 3rem;\\n  margin-bottom: 1rem;\\n  position: relative;\\n}\\n\\n.content-section h2::before {\\n  content: '';\\n  position: absolute;\\n  left: -2rem;\\n  top: 50%;\\n  transform: translateY(-50%);\\n  width: 4px;\\n  height: 1.5rem;\\n  background: hsl(var(--primary));\\n  border-radius: 2px;\\n}\\n\\n/* Enhanced blockquotes */\\n.content-section blockquote {\\n  border-left: 4px solid hsl(var(--primary));\\n  padding-left: 1.5rem;\\n  margin: 2rem 0;\\n  font-style: italic;\\n  font-size: var(--text-xl);\\n  color: hsl(var(--muted-foreground));\\n}\\n\\n/* Improved lists */\\n.content-section ul {\\n  list-style: none;\\n  padding-left: 0;\\n}\\n\\n.content-section li {\\n  position: relative;\\n  padding-left: 1.5rem;\\n  margin-bottom: 0.5rem;\\n}\\n\\n.content-section li::before {\\n  content: '→';\\n  position: absolute;\\n  left: 0;\\n  color: hsl(var(--primary));\\n  font-weight: 600;\\n}\\n```\\n\\n### Interactive Element Enhancements\\n\\n#### Advanced Button Styling\\n\\nCustom button system with multiple variants:\\n\\n```css\\n/* Button base styles */\\n.btn {\\n  display: inline-flex;\\n  align-items: center;\\n  gap: 0.5rem;\\n  padding: 0.75rem 1.5rem;\\n  border: none;\\n  border-radius: 0.5rem;\\n  font-weight: 600;\\n  font-size: var(--text-sm);\\n  text-decoration: none;\\n  cursor: pointer;\\n  transition: all 0.2s ease;\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n/* Primary button */\\n.btn-primary {\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n}\\n\\n.btn-primary:hover {\\n  background: hsl(var(--primary) / 0.9);\\n  transform: translateY(-1px);\\n  box-shadow: 0 4px 12px hsl(var(--primary) / 0.3);\\n}\\n\\n/* Gradient button */\\n.btn-gradient {\\n  background: var(--brand-gradient);\\n  color: white;\\n  position: relative;\\n}\\n\\n.btn-gradient::before {\\n  content: '';\\n  position: absolute;\\n  inset: 0;\\n  background: var(--brand-gradient);\\n  opacity: 0;\\n  transition: opacity 0.2s ease;\\n}\\n\\n.btn-gradient:hover::before {\\n  opacity: 0.1;\\n}\\n\\n/* Outline button */\\n.btn-outline {\\n  background: transparent;\\n  border: 2px solid hsl(var(--primary));\\n  color: hsl(var(--primary));\\n}\\n\\n.btn-outline:hover {\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n}\\n```\\n\\n#### Enhanced Form Styling\\n\\nProfessional form controls:\\n\\n```css\\n.form-group {\\n  margin-bottom: 1.5rem;\\n}\\n\\n.form-label {\\n  display: block;\\n  font-weight: 600;\\n  font-size: var(--text-sm);\\n  color: hsl(var(--foreground));\\n  margin-bottom: 0.5rem;\\n}\\n\\n.form-input {\\n  width: 100%;\\n  padding: 0.75rem 1rem;\\n  border: 2px solid hsl(var(--border));\\n  border-radius: 0.5rem;\\n  background: hsl(var(--background));\\n  color: hsl(var(--foreground));\\n  font-size: var(--text-base);\\n  transition: all 0.2s ease;\\n}\\n\\n.form-input:focus {\\n  outline: none;\\n  border-color: hsl(var(--primary));\\n  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);\\n}\\n\\n.form-input::placeholder {\\n  color: hsl(var(--muted-foreground));\\n}\\n```\\n\\n### Animation and Micro-Interactions\\n\\n#### Page Transition Effects\\n\\nSmooth page transitions:\\n\\n```css\\n.content-section {\\n  opacity: 0;\\n  transform: translateY(20px);\\n  transition: all 0.3s ease;\\n}\\n\\n.content-section.active {\\n  opacity: 1;\\n  transform: translateY(0);\\n}\\n\\n/* Staggered animation for navigation items */\\n.nav-link {\\n  opacity: 0;\\n  transform: translateX(-20px);\\n  animation: slideInLeft 0.3s ease forwards;\\n}\\n\\n.nav-link:nth-child(1) { animation-delay: 0.1s; }\\n.nav-link:nth-child(2) { animation-delay: 0.15s; }\\n.nav-link:nth-child(3) { animation-delay: 0.2s; }\\n/* ... continue pattern */\\n\\n@keyframes slideInLeft {\\n  to {\\n    opacity: 1;\\n    transform: translateX(0);\\n  }\\n}\\n```\\n\\n#### Hover Effects and Micro-Interactions\\n\\nEngaging interactive feedback:\\n\\n```css\\n/* Card hover effects */\\n.card {\\n  background: hsl(var(--card));\\n  border: 1px solid hsl(var(--border));\\n  border-radius: 0.75rem;\\n  padding: 1.5rem;\\n  transition: all 0.3s ease;\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n.card::before {\\n  content: '';\\n  position: absolute;\\n  inset: 0;\\n  background: linear-gradient(45deg, \\n    hsl(var(--primary) / 0.1), \\n    hsl(var(--accent) / 0.1)\\n  );\\n  opacity: 0;\\n  transition: opacity 0.3s ease;\\n}\\n\\n.card:hover {\\n  transform: translateY(-4px);\\n  box-shadow: 0 12px 24px hsl(var(--foreground) / 0.1);\\n  border-color: hsl(var(--primary));\\n}\\n\\n.card:hover::before {\\n  opacity: 1;\\n}\\n\\n/* Ripple effect for buttons */\\n.btn {\\n  position: relative;\\n  overflow: hidden;\\n}\\n\\n.btn::after {\\n  content: '';\\n  position: absolute;\\n  top: 50%;\\n  left: 50%;\\n  width: 0;\\n  height: 0;\\n  border-radius: 50%;\\n  background: rgba(255, 255, 255, 0.3);\\n  transform: translate(-50%, -50%);\\n  transition: width 0.6s, height 0.6s;\\n}\\n\\n.btn:active::after {\\n  width: 300px;\\n  height: 300px;\\n}\\n```\\n\\n### Responsive Design Patterns\\n\\n#### Advanced Responsive Typography\\n\\nFluid typography that scales smoothly:\\n\\n```css\\n:root {\\n  /* Fluid typography using clamp() */\\n  --text-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);\\n  --text-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);\\n  --text-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);\\n  --text-fluid-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);\\n  --text-fluid-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);\\n  --text-fluid-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);\\n  --text-fluid-4xl: clamp(2.25rem, 1.8rem + 2.25vw, 3rem);\\n}\\n\\nbody {\\n  font-size: var(--text-fluid-base);\\n}\\n\\nh1 { font-size: var(--text-fluid-4xl); }\\nh2 { font-size: var(--text-fluid-3xl); }\\nh3 { font-size: var(--text-fluid-2xl); }\\n```\\n\\n#### Container Queries (Future-Forward)\\n\\nModern responsive design using container queries:\\n\\n```css\\n.content-section {\\n  container-type: inline-size;\\n}\\n\\n/* Adjust layout based on container width, not viewport */\\n@container (min-width: 600px) {\\n  .content-grid {\\n    display: grid;\\n    grid-template-columns: 2fr 1fr;\\n    gap: 2rem;\\n  }\\n}\\n\\n@container (min-width: 900px) {\\n  .content-grid {\\n    grid-template-columns: 1fr 2fr 1fr;\\n  }\\n}\\n```\\n\\n### Dark Mode Advanced Customizations\\n\\n#### Theme-Aware Components\\n\\nComponents that adapt intelligently to theme changes:\\n\\n```css\\n/* Light theme specific styles */\\n[data-theme=\\\"light\\\"] .hero-section {\\n  background: linear-gradient(135deg, \\n    hsl(var(--background)), \\n    hsl(var(--secondary))\\n  );\\n}\\n\\n/* Dark theme specific styles */\\n[data-theme=\\\"dark\\\"] .hero-section {\\n  background: linear-gradient(135deg, \\n    hsl(var(--background)), \\n    hsl(var(--card))\\n  );\\n}\\n\\n/* Theme-aware shadows */\\n.elevated-card {\\n  box-shadow: \\n    0 4px 6px hsl(var(--foreground) / 0.1),\\n    0 1px 3px hsl(var(--foreground) / 0.05);\\n}\\n\\n[data-theme=\\\"dark\\\"] .elevated-card {\\n  box-shadow: \\n    0 4px 6px rgba(0, 0, 0, 0.3),\\n    0 1px 3px rgba(0, 0, 0, 0.2);\\n}\\n```\\n\\n### Performance Optimization\\n\\n#### Efficient CSS Architecture\\n\\nOptimized styles for better performance:\\n\\n```css\\n/* Use CSS custom properties for frequently changing values */\\n:root {\\n  --animation-speed: 0.2s;\\n  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);\\n}\\n\\n/* Optimize animations for 60fps */\\n.animated-element {\\n  will-change: transform, opacity;\\n  transform: translateZ(0); /* Force hardware acceleration */\\n  transition: transform var(--animation-speed) var(--animation-easing);\\n}\\n\\n/* Efficient selectors */\\n.nav-link { /* Good: class selector */ }\\nnav > ul > li > a { /* Avoid: deep nesting */ }\\n* { /* Avoid: universal selector */ }\\n```\\n\\n#### Critical CSS Patterns\\n\\nInline critical styles for immediate rendering:\\n\\n```css\\n/* Critical above-the-fold styles */\\n.layout,\\n.header-content,\\n.sidebar,\\n.main-content {\\n  /* Essential layout properties only */\\n  display: flex;\\n  position: relative;\\n}\\n\\n/* Non-critical styles can be loaded later */\\n.fancy-animations,\\n.decorative-elements {\\n  /* Complex animations and decorative styles */\\n}\\n```\\n\\n## Custom Styling Workflow\\n\\n### 1. Planning Your Customizations\\n\\nBefore modifying styles:\\n\\n1. **Audit existing styles**: Understand the current CSS architecture\\n2. **Define your design system**: Colors, typography, spacing, components\\n3. **Plan responsive behavior**: Mobile-first approach\\n4. **Consider accessibility**: Maintain contrast ratios and focus states\\n\\n### 2. Implementation Strategy\\n\\n**Recommended approach:**\\n1. Start with CSS custom property overrides\\n2. Add new component styles\\n3. Implement responsive variations\\n4. Test across themes (light/dark)\\n5. Validate accessibility compliance\\n\\n### 3. Testing Checklist\\n\\n- [ ] All themes (default, purple, vibrant)\\n- [ ] Light and dark modes\\n- [ ] Mobile and desktop layouts\\n- [ ] Keyboard navigation\\n- [ ] Screen reader compatibility\\n- [ ] Performance impact\\n\\n## Troubleshooting Custom Styles\\n\\n**Styles not applying**: Check CSS specificity and ensure your styles come after the base styles in the build order.\\n\\n**Theme conflicts**: Verify that custom styles work with both light and dark modes.\\n\\n**Performance issues**: Minimize complex selectors and excessive animations.\\n\\n**Responsive problems**: Test on actual devices, not just browser dev tools.\\n\\n**Accessibility concerns**: Use tools like axe-core to validate accessibility compliance.\"\n    },\n    \"advanced/api\": {\n        \"title\": \"API Reference\",\n        \"section\": \"Advanced\",\n        \"content\": \"# API Reference\\n\\nComprehensive JavaScript API reference for programmatic control and customization of GlowDoc documentation sites.\\n\\n## Overview\\n\\nGlowDoc generates a single-page application with a rich JavaScript API for navigation, search, theming, and customization. All functionality is embedded within the generated HTML file, providing a complete client-side documentation experience.\\n\\n## Core Navigation API\\n\\n### `showContent(contentId, updateUrl = true)`\\n\\nDisplays a specific documentation page by content ID.\\n\\n**Parameters:**\\n- `contentId` (string) - The unique identifier for the content section\\n- `updateUrl` (boolean, optional) - Whether to update browser URL and history (default: true)\\n\\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Show the installation page\\nshowContent('installation');\\n\\n// Show content without updating URL (for programmatic navigation)\\nshowContent('api-reference', false);\\n```\\n\\n**Behavior:**\\n- Switches from homepage to documentation layout if needed\\n- Hides all content sections and displays the target section\\n- Updates active state in navigation sidebar\\n- Updates browser URL and history (unless `updateUrl` is false)\\n- Automatically closes mobile sidebar\\n- Logs content display for debugging\\n\\n### `showHomepage()`\\n\\nDisplays the homepage content and hides documentation layout.\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Return to homepage\\nshowHomepage();\\n```\\n\\n**Behavior:**\\n- Shows homepage element, hides documentation layout\\n- Updates browser URL to root path\\n- Uses HTML5 History API for navigation\\n\\n### `showDocs()`\\n\\nSwitches the interface to documentation mode (internal function).\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Usage:** Typically called internally by `showContent()`, but available for custom implementations.\\n\\n### `showContentFromSearch(contentId)`\\n\\nDisplays content selected from search results and clears search state.\\n\\n**Parameters:**\\n- `contentId` (string) - The content ID to display\\n\\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Show search result and clear search\\nshowContentFromSearch('quick-start');\\n```\\n\\n**Behavior:**\\n- Clears search input field\\n- Hides search results, shows navigation\\n- Calls `showContent()` to display the selected page\\n\\n## Theme Management API\\n\\n### `toggleTheme()`\\n\\nToggles between light and dark theme modes.\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Toggle theme\\ntoggleTheme();\\n\\n// Programmatically check current theme\\nconst currentTheme = document.documentElement.getAttribute('data-theme');\\nconsole.log('Current theme:', currentTheme); // 'light' or 'dark'\\n```\\n\\n**Behavior:**\\n- Toggles `data-theme` attribute between 'light' and 'dark'\\n- Saves theme preference to localStorage\\n- Provides smooth transitions via CSS\\n- Respects system preferences on first visit\\n\\n**Theme Persistence:**\\n```javascript\\n// Theme is automatically saved to localStorage\\nlocalStorage.getItem('theme'); // Returns 'light' or 'dark'\\n```\\n\\n## Navigation and Sidebar API\\n\\n### `toggleSidebar()`\\n\\nToggles sidebar visibility (primarily for mobile interfaces).\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Toggle mobile sidebar\\ntoggleSidebar();\\n\\n// Check sidebar state\\nconst sidebar = document.querySelector('.sidebar');\\nconst isVisible = sidebar.classList.contains('visible');\\n```\\n\\n**Behavior:**\\n- Toggles 'visible' class on sidebar element\\n- Provides slide-in animation on mobile devices\\n- Automatically handled for responsive breakpoints\\n\\n### `toggleSection(sectionId)`\\n\\nExpands or collapses navigation sections in the sidebar.\\n\\n**Parameters:**\\n- `sectionId` (string) - The ID of the section to toggle\\n\\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Toggle a navigation section\\ntoggleSection('getting-started');\\n\\n// Check section state\\nconst section = document.querySelector('[data-section=\\\"getting-started\\\"]');\\nconst isCollapsed = section.classList.contains('collapsed');\\n```\\n\\n**Behavior:**\\n- Toggles 'collapsed' class on section and its toggle icon\\n- Provides smooth expand/collapse animations\\n- State persisted for user experience\\n\\n## Search API\\n\\n### `performSearch()`\\n\\nPerforms real-time search across all documentation content.\\n\\n**Parameters:** None (reads from search input element)  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Trigger search programmatically\\ndocument.querySelector('.search-input').value = 'installation';\\nperformSearch();\\n\\n// Search is automatically triggered on input\\n```\\n\\n**Search Features:**\\n- **Real-time Results**: Updates as user types\\n- **Content Indexing**: Searches titles, sections, and full content\\n- **Result Ranking**: Title matches rank higher than content matches\\n- **Snippet Generation**: Shows relevant content excerpts\\n- **Keyword Highlighting**: Highlights matching terms in results\\n\\n**Search Index Structure:**\\n```javascript\\n// Global searchIndex object\\nconst searchIndex = {\\n  \\\"page-id\\\": {\\n    \\\"title\\\": \\\"Page Title\\\",\\n    \\\"section\\\": \\\"Section Name\\\",\\n    \\\"content\\\": \\\"Full searchable content...\\\"\\n  }\\n  // ... more pages\\n};\\n```\\n\\n### Custom Search Integration\\n\\n```javascript\\n// Access search index for custom functionality\\nfunction customSearch(query) {\\n  const results = [];\\n  for (const [id, data] of Object.entries(searchIndex)) {\\n    if (data.title.toLowerCase().includes(query.toLowerCase())) {\\n      results.push({ id, ...data });\\n    }\\n  }\\n  return results;\\n}\\n\\n// Example: Find all pages in a specific section\\nfunction findBySection(sectionName) {\\n  return Object.entries(searchIndex)\\n    .filter(([id, data]) => data.section === sectionName)\\n    .map(([id, data]) => ({ id, ...data }));\\n}\\n```\\n\\n## URL and History Management\\n\\n### `loadFromUrl()`\\n\\nLoads appropriate content based on current URL hash.\\n\\n**Parameters:** None  \\n**Returns:** `void`\\n\\n**Example:**\\n```javascript\\n// Load content based on URL\\nloadFromUrl();\\n\\n// Handle URL changes\\nwindow.addEventListener('hashchange', loadFromUrl);\\n```\\n\\n**URL Format:**\\n- Homepage: `#` or no hash\\n- Content pages: `#page-id`\\n- Automatically handles invalid page IDs\\n\\n**History Management:**\\n```javascript\\n// Navigation automatically updates browser history\\n// Back/forward buttons work seamlessly\\nwindow.addEventListener('popstate', (event) => {\\n  if (event.state?.contentId) {\\n    showContent(event.state.contentId, false);\\n  } else if (event.state?.page === 'home') {\\n    showHomepage();\\n  }\\n});\\n```\\n\\n## Event System\\n\\n### Built-in Event Listeners\\n\\nGlowDoc automatically registers several event listeners:\\n\\n```javascript\\n// Navigation clicks\\ndocument.addEventListener('click', (e) => {\\n  if (e.target.hasAttribute('data-content-id')) {\\n    e.preventDefault();\\n    showContent(e.target.getAttribute('data-content-id'));\\n  }\\n});\\n\\n// Browser navigation\\nwindow.addEventListener('popstate', (event) => {\\n  // Handle back/forward navigation\\n});\\n\\n// Initial load\\ndocument.addEventListener('DOMContentLoaded', () => {\\n  loadFromUrl();\\n});\\n\\n// Mobile sidebar - outside clicks\\ndocument.addEventListener('click', (e) => {\\n  // Close sidebar when clicking outside on mobile\\n});\\n```\\n\\n### Custom Event Handling\\n\\n```javascript\\n// Listen for content changes\\nfunction onContentChange(contentId) {\\n  console.log('Content changed to:', contentId);\\n  // Custom logic here\\n}\\n\\n// Override or extend existing functions\\nconst originalShowContent = showContent;\\nshowContent = function(contentId, updateUrl = true) {\\n  onContentChange(contentId);\\n  return originalShowContent(contentId, updateUrl);\\n};\\n```\\n\\n## Configuration and Customization\\n\\n### Global Configuration\\n\\n```javascript\\n// Access current state\\nconst getCurrentContent = () => {\\n  const activeSection = document.querySelector('.content-section:not([style*=\\\"display: none\\\"])');\\n  return activeSection?.id;\\n};\\n\\nconst getCurrentTheme = () => {\\n  return document.documentElement.getAttribute('data-theme');\\n};\\n\\n// Get navigation state\\nconst getNavigationState = () => {\\n  const collapsedSections = Array.from(document.querySelectorAll('.nav-section.collapsed'))\\n    .map(section => section.dataset.section);\\n  return { collapsedSections };\\n};\\n```\\n\\n### DOM Element Access\\n\\n**Required Elements:**\\n```javascript\\n// Core layout elements\\nconst homepage = document.getElementById('homepage');\\nconst docsLayout = document.getElementById('docs-layout');\\nconst sidebar = document.querySelector('.sidebar');\\n\\n// Search elements\\nconst searchInput = document.querySelector('.search-input');\\nconst searchResults = document.querySelector('.search-results');\\nconst searchResultsList = document.querySelector('.search-results-list');\\n\\n// Navigation elements\\nconst navigationContainer = document.querySelector('.navigation-container');\\nconst contentSections = document.querySelectorAll('.content-section');\\nconst navLinks = document.querySelectorAll('.nav-link');\\n```\\n\\n**Data Attributes:**\\n- `data-content-id`: Links navigation items to content sections\\n- `data-section`: Identifies collapsible navigation sections\\n- `data-theme`: Current theme state on document element\\n\\n## Advanced Customization\\n\\n### Custom Navigation\\n\\n```javascript\\n// Add custom navigation item\\nfunction addCustomNavItem(sectionId, title, contentId) {\\n  const navSection = document.querySelector(`[data-section=\\\"${sectionId}\\\"] .nav-section-content`);\\n  if (navSection) {\\n    const link = document.createElement('a');\\n    link.href = `#${contentId}`;\\n    link.className = 'nav-link';\\n    link.setAttribute('data-content-id', contentId);\\n    link.textContent = title;\\n    navSection.appendChild(link);\\n  }\\n}\\n\\n// Custom content injection\\nfunction addCustomContent(contentId, title, htmlContent) {\\n  const contentSection = document.createElement('div');\\n  contentSection.className = 'content-section';\\n  contentSection.id = contentId;\\n  contentSection.style.display = 'none';\\n  contentSection.innerHTML = `<h1>${title}</h1>${htmlContent}`;\\n  \\n  document.querySelector('.main-content').appendChild(contentSection);\\n  \\n  // Add to search index\\n  searchIndex[contentId] = {\\n    title: title,\\n    section: 'Custom',\\n    content: contentSection.textContent\\n  };\\n}\\n```\\n\\n### Theme Customization\\n\\n```javascript\\n// Custom theme switching\\nfunction setCustomTheme(themeName) {\\n  document.documentElement.setAttribute('data-theme', themeName);\\n  localStorage.setItem('theme', themeName);\\n}\\n\\n// Theme change detection\\nconst observer = new MutationObserver((mutations) => {\\n  mutations.forEach((mutation) => {\\n    if (mutation.attributeName === 'data-theme') {\\n      const newTheme = document.documentElement.getAttribute('data-theme');\\n      console.log('Theme changed to:', newTheme);\\n      // Custom theme change logic\\n    }\\n  });\\n});\\n\\nobserver.observe(document.documentElement, {\\n  attributes: true,\\n  attributeFilter: ['data-theme']\\n});\\n```\\n\\n### Search Customization\\n\\n```javascript\\n// Custom search implementation\\nfunction customPerformSearch() {\\n  const query = document.querySelector('.search-input').value.toLowerCase().trim();\\n  const resultsContainer = document.querySelector('.search-results-list');\\n  \\n  if (!query) {\\n    // Hide search results\\n    document.querySelector('.search-results').style.display = 'none';\\n    document.querySelector('.navigation-container').style.display = 'block';\\n    return;\\n  }\\n  \\n  const results = [];\\n  \\n  // Custom search logic\\n  for (const [id, data] of Object.entries(searchIndex)) {\\n    let score = 0;\\n    \\n    // Title match (highest priority)\\n    if (data.title.toLowerCase().includes(query)) score += 10;\\n    \\n    // Section match (medium priority)\\n    if (data.section.toLowerCase().includes(query)) score += 5;\\n    \\n    // Content match (lower priority)\\n    if (data.content.toLowerCase().includes(query)) score += 1;\\n    \\n    if (score > 0) {\\n      results.push({ id, ...data, score });\\n    }\\n  }\\n  \\n  // Sort by score (descending)\\n  results.sort((a, b) => b.score - a.score);\\n  \\n  // Display results\\n  displaySearchResults(results, query);\\n}\\n\\nfunction displaySearchResults(results, query) {\\n  const resultsContainer = document.querySelector('.search-results-list');\\n  \\n  if (results.length === 0) {\\n    resultsContainer.innerHTML = '<div class=\\\"no-results\\\">No results found</div>';\\n  } else {\\n    resultsContainer.innerHTML = results.map(result => {\\n      const snippet = generateSnippet(result.content, query);\\n      return `\\n        <div class=\\\"search-result\\\" onclick=\\\"showContentFromSearch('${result.id}')\\\">\\n          <div class=\\\"search-result-title\\\">${highlightText(result.title, query)}</div>\\n          <div class=\\\"search-result-section\\\">${result.section}</div>\\n          <div class=\\\"search-result-snippet\\\">${snippet}</div>\\n        </div>\\n      `;\\n    }).join('');\\n  }\\n  \\n  // Show search results\\n  document.querySelector('.search-results').style.display = 'block';\\n  document.querySelector('.navigation-container').style.display = 'none';\\n}\\n\\nfunction generateSnippet(content, query, maxLength = 150) {\\n  const queryIndex = content.toLowerCase().indexOf(query.toLowerCase());\\n  if (queryIndex === -1) {\\n    return content.substring(0, maxLength) + (content.length > maxLength ? '...' : '');\\n  }\\n  \\n  const start = Math.max(0, queryIndex - 50);\\n  const end = Math.min(content.length, queryIndex + query.length + 50);\\n  const snippet = content.substring(start, end);\\n  \\n  return (start > 0 ? '...' : '') + \\n         highlightText(snippet, query) + \\n         (end < content.length ? '...' : '');\\n}\\n\\nfunction highlightText(text, query) {\\n  const regex = new RegExp(`(${query})`, 'gi');\\n  return text.replace(regex, '<mark class=\\\"search-highlight\\\">$1</mark>');\\n}\\n```\\n\\n## Performance and Optimization\\n\\n### Debounced Search\\n\\n```javascript\\n// Implement search debouncing\\nlet searchTimeout;\\nfunction debouncedSearch() {\\n  clearTimeout(searchTimeout);\\n  searchTimeout = setTimeout(performSearch, 300);\\n}\\n\\n// Replace default search input handler\\ndocument.querySelector('.search-input').addEventListener('input', debouncedSearch);\\n```\\n\\n### Lazy Loading\\n\\n```javascript\\n// Lazy load content sections\\nconst observerOptions = {\\n  root: null,\\n  rootMargin: '100px',\\n  threshold: 0.1\\n};\\n\\nconst contentObserver = new IntersectionObserver((entries) => {\\n  entries.forEach(entry => {\\n    if (entry.isIntersecting) {\\n      // Load heavy content when section becomes visible\\n      loadSectionAssets(entry.target);\\n    }\\n  });\\n}, observerOptions);\\n\\n// Observe all content sections\\ndocument.querySelectorAll('.content-section').forEach(section => {\\n  contentObserver.observe(section);\\n});\\n```\\n\\n## Error Handling and Debugging\\n\\n### Debug Mode\\n\\n```javascript\\n// Enable debug mode\\nwindow.GLOWDOC_DEBUG = true;\\n\\n// Enhanced showContent with debugging\\nfunction debugShowContent(contentId, updateUrl = true) {\\n  if (window.GLOWDOC_DEBUG) {\\n    console.log('Showing content:', contentId);\\n    console.log('Available content IDs:', Object.keys(searchIndex));\\n    console.log('Update URL:', updateUrl);\\n  }\\n  \\n  const contentElement = document.getElementById(contentId);\\n  if (!contentElement) {\\n    console.error(`Content element with ID '${contentId}' not found`);\\n    return;\\n  }\\n  \\n  return showContent(contentId, updateUrl);\\n}\\n```\\n\\n### Error Recovery\\n\\n```javascript\\n// Handle missing content gracefully\\nfunction safeShowContent(contentId, fallbackId = 'introduction') {\\n  const contentElement = document.getElementById(contentId);\\n  if (!contentElement) {\\n    console.warn(`Content '${contentId}' not found, showing fallback`);\\n    return showContent(fallbackId);\\n  }\\n  return showContent(contentId);\\n}\\n\\n// Validate navigation state\\nfunction validateNavigation() {\\n  const issues = [];\\n  \\n  // Check for orphaned navigation links\\n  document.querySelectorAll('[data-content-id]').forEach(link => {\\n    const contentId = link.getAttribute('data-content-id');\\n    if (!document.getElementById(contentId)) {\\n      issues.push(`Navigation link points to missing content: ${contentId}`);\\n    }\\n  });\\n  \\n  // Check for content without navigation\\n  document.querySelectorAll('.content-section').forEach(section => {\\n    const contentId = section.id;\\n    const navLink = document.querySelector(`[data-content-id=\\\"${contentId}\\\"]`);\\n    if (!navLink) {\\n      issues.push(`Content section has no navigation link: ${contentId}`);\\n    }\\n  });\\n  \\n  return issues;\\n}\\n```\\n\\n## Browser Compatibility\\n\\n**Supported Features:**\\n- ES6+ JavaScript (const, let, arrow functions, template literals)\\n- HTML5 History API\\n- CSS Custom Properties\\n- LocalStorage\\n- Modern DOM APIs\\n\\n**Minimum Browser Versions:**\\n- Chrome 49+\\n- Firefox 44+\\n- Safari 10+\\n- Edge 12+\\n\\n**Graceful Degradation:**\\n```javascript\\n// Feature detection\\nif (!window.history?.pushState) {\\n  console.warn('History API not supported, using hash navigation');\\n  // Fallback to hash-based navigation\\n}\\n\\nif (!window.localStorage) {\\n  console.warn('LocalStorage not supported, theme preference will not persist');\\n  // Use session-based theme storage\\n}\\n```\\n\\nThis comprehensive API reference provides complete control over GlowDoc's functionality, enabling deep customization while maintaining the system's performance and user experience benefits.\"\n    },\n    \"advanced/deployment\": {\n        \"title\": \"Deployment\",\n        \"section\": \"Advanced\",\n        \"content\": \"# Deployment\\n\\nComprehensive guide to deploying your GlowDoc documentation site across various hosting platforms, from simple static hosting to advanced CI/CD pipelines.\\n\\n## Overview\\n\\nGlowDoc generates a single `index.html` file containing your entire documentation site, making deployment simple and flexible. This approach offers several advantages:\\n\\n- **Single File Deployment**: No complex directory structures or dependencies\\n- **Universal Compatibility**: Works with any static hosting service\\n- **Fast Loading**: All assets embedded, no additional HTTP requests\\n- **Easy Backup**: Single file contains everything\\n- **CDN Friendly**: Perfect for content delivery networks\\n\\n## Pre-Deployment Checklist\\n\\nBefore deploying your documentation:\\n\\n### 1. Build Verification\\n\\n```bash\\n# Build your documentation\\ncargo run --release\\n\\n# Verify the build succeeded\\nls -la index.html\\n\\n# Test locally\\npython3 -m http.server 8000\\n# Visit http://localhost:8000 to verify everything works\\n```\\n\\n### 2. Content Review\\n\\n- [ ] All pages load correctly\\n- [ ] Navigation works properly\\n- [ ] Search functionality operates\\n- [ ] All themes (light/dark) display correctly\\n- [ ] Mobile responsive design works\\n- [ ] All links are functional\\n\\n### 3. Performance Optimization\\n\\n```bash\\n# Check file size (typical range: 500KB - 2MB)\\ndu -h index.html\\n\\n# Optional: Minify if needed (for very large sites)\\n# Note: GlowDoc output is already optimized\\n```\\n\\n## Static Hosting Platforms\\n\\n### GitHub Pages\\n\\nDeploy directly from your GitHub repository with automated builds.\\n\\n#### Method 1: GitHub Actions (Recommended)\\n\\nCreate `.github/workflows/deploy.yml`:\\n\\n```yaml\\nname: Deploy GlowDoc\\n\\non:\\n  push:\\n    branches: [ main ]\\n  pull_request:\\n    branches: [ main ]\\n\\njobs:\\n  deploy:\\n    runs-on: ubuntu-latest\\n    \\n    steps:\\n    - uses: actions/checkout@v4\\n    \\n    - name: Install Rust\\n      uses: dtolnay/rust-toolchain@stable\\n    \\n    - name: Cache Cargo dependencies\\n      uses: actions/cache@v3\\n      with:\\n        path: |\\n          ~/.cargo/registry\\n          ~/.cargo/git\\n          target\\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\\n    \\n    - name: Build documentation\\n      run: cargo run --release\\n    \\n    - name: Deploy to GitHub Pages\\n      uses: peaceiris/actions-gh-pages@v3\\n      if: github.ref == 'refs/heads/main'\\n      with:\\n        github_token: ${{ secrets.GITHUB_TOKEN }}\\n        publish_dir: .\\n        publish_branch: gh-pages\\n        force_orphan: true\\n        enable_jekyll: false\\n        exclude_assets: |\\n          .github\\n          .gitignore\\n          Cargo.toml\\n          Cargo.lock\\n          src\\n          docs\\n          target\\n          README.md\\n```\\n\\n#### Method 2: Manual Upload\\n\\n```bash\\n# Build locally\\ncargo run --release\\n\\n# Create gh-pages branch\\ngit checkout --orphan gh-pages\\ngit rm -rf .\\ngit add index.html\\ngit commit -m \\\"Deploy documentation\\\"\\ngit push origin gh-pages\\n\\n# Return to main branch\\ngit checkout main\\n```\\n\\n#### GitHub Pages Configuration\\n\\n1. Go to your repository → Settings → Pages\\n2. Set Source to \\\"Deploy from a branch\\\"\\n3. Select `gh-pages` branch\\n4. Choose `/ (root)` folder\\n5. Save settings\\n\\n**Custom Domain Setup:**\\n```bash\\n# Add CNAME file to repository root\\necho \\\"docs.yoursite.com\\\" > CNAME\\ngit add CNAME\\ngit commit -m \\\"Add custom domain\\\"\\ngit push\\n```\\n\\n### Netlify\\n\\nProfessional hosting with advanced features and global CDN.\\n\\n#### Method 1: Git Integration (Recommended)\\n\\n1. **Connect Repository:**\\n   - Sign up at [netlify.com](https://netlify.com)\\n   - Click \\\"New site from Git\\\"\\n   - Connect your GitHub/GitLab repository\\n\\n2. **Build Configuration:**\\n   ```toml\\n   # netlify.toml\\n   [build]\\n     command = \\\"cargo run --release\\\"\\n     publish = \\\".\\\"\\n   \\n   [build.environment]\\n     RUST_VERSION = \\\"1.70\\\"\\n   \\n   [[headers]]\\n     for = \\\"/*\\\"\\n     [headers.values]\\n       X-Frame-Options = \\\"DENY\\\"\\n       X-XSS-Protection = \\\"1; mode=block\\\"\\n       X-Content-Type-Options = \\\"nosniff\\\"\\n       Referrer-Policy = \\\"strict-origin-when-cross-origin\\\"\\n   \\n   [[redirects]]\\n     from = \\\"/docs/*\\\"\\n     to = \\\"/#:splat\\\"\\n     status = 200\\n   ```\\n\\n3. **Deploy Settings:**\\n   - Build command: `cargo run --release`\\n   - Publish directory: `.` (root)\\n   - Node version: Latest LTS\\n\\n#### Method 2: Manual Upload\\n\\n```bash\\n# Build documentation\\ncargo run --release\\n\\n# Deploy via Netlify CLI\\nnpm install -g netlify-cli\\nnetlify login\\nnetlify deploy --prod --dir=.\\n```\\n\\n#### Advanced Netlify Features\\n\\n**Form Handling:**\\n```html\\n<!-- Add to your documentation for feedback forms -->\\n<form name=\\\"feedback\\\" method=\\\"POST\\\" data-netlify=\\\"true\\\">\\n  <input type=\\\"hidden\\\" name=\\\"form-name\\\" value=\\\"feedback\\\" />\\n  <input type=\\\"text\\\" name=\\\"name\\\" placeholder=\\\"Your name\\\" required />\\n  <textarea name=\\\"message\\\" placeholder=\\\"Feedback\\\" required></textarea>\\n  <button type=\\\"submit\\\">Send Feedback</button>\\n</form>\\n```\\n\\n**Analytics Integration:**\\n```javascript\\n// Add to your custom JavaScript\\nif (window.netlifyIdentity) {\\n  window.netlifyIdentity.on('init', user => {\\n    if (!user) {\\n      window.netlifyIdentity.on('login', () => {\\n        document.location.href = '/admin/';\\n      });\\n    }\\n  });\\n}\\n```\\n\\n### Vercel\\n\\nZero-configuration deployment with excellent performance.\\n\\n#### Method 1: Git Integration\\n\\n1. **Connect Repository:**\\n   - Sign up at [vercel.com](https://vercel.com)\\n   - Import your Git repository\\n   - Vercel auto-detects the setup\\n\\n2. **Configuration File:**\\n   ```json\\n   {\\n     \\\"version\\\": 2,\\n     \\\"name\\\": \\\"glowdoc-docs\\\",\\n     \\\"builds\\\": [\\n       {\\n         \\\"src\\\": \\\"package.json\\\",\\n         \\\"use\\\": \\\"@vercel/static-build\\\"\\n       }\\n     ],\\n     \\\"routes\\\": [\\n       {\\n         \\\"src\\\": \\\"/(.*)\\\",\\n         \\\"dest\\\": \\\"/index.html\\\"\\n       }\\n     ],\\n     \\\"env\\\": {\\n       \\\"RUST_VERSION\\\": \\\"1.70\\\"\\n     }\\n   }\\n   ```\\n\\n3. **Package.json for Build:**\\n   ```json\\n   {\\n     \\\"name\\\": \\\"glowdoc-site\\\",\\n     \\\"scripts\\\": {\\n       \\\"build\\\": \\\"curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source ~/.cargo/env && cargo run --release\\\"\\n     }\\n   }\\n   ```\\n\\n#### Method 2: Vercel CLI\\n\\n```bash\\n# Install Vercel CLI\\nnpm install -g vercel\\n\\n# Build and deploy\\ncargo run --release\\nvercel --prod\\n```\\n\\n### Cloudflare Pages\\n\\nHigh-performance hosting with global edge network.\\n\\n#### Setup Process:\\n\\n1. **Connect Repository:**\\n   - Sign up at [pages.cloudflare.com](https://pages.cloudflare.com)\\n   - Connect your Git repository\\n\\n2. **Build Configuration:**\\n   - Build command: `curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y && source ~/.cargo/env && cargo run --release`\\n   - Build output directory: `.`\\n   - Environment variables: `RUST_VERSION=1.70`\\n\\n3. **Custom Domains:**\\n   ```bash\\n   # Configure custom domain in Cloudflare Dashboard\\n   # DNS automatically managed\\n   ```\\n\\n### Firebase Hosting\\n\\nGoogle's hosting platform with global CDN.\\n\\n#### Setup Process:\\n\\n```bash\\n# Install Firebase CLI\\nnpm install -g firebase-tools\\n\\n# Initialize Firebase\\nfirebase login\\nfirebase init hosting\\n\\n# Configure firebase.json\\n```\\n\\n```json\\n{\\n  \\\"hosting\\\": {\\n    \\\"public\\\": \\\".\\\",\\n    \\\"ignore\\\": [\\n      \\\"firebase.json\\\",\\n      \\\"**/.*\\\",\\n      \\\"**/node_modules/**\\\",\\n      \\\"src/**\\\",\\n      \\\"docs/**\\\",\\n      \\\"target/**\\\"\\n    ],\\n    \\\"rewrites\\\": [\\n      {\\n        \\\"source\\\": \\\"**\\\",\\n        \\\"destination\\\": \\\"/index.html\\\"\\n      }\\n    ],\\n    \\\"headers\\\": [\\n      {\\n        \\\"source\\\": \\\"**/*.@(js|css)\\\",\\n        \\\"headers\\\": [\\n          {\\n            \\\"key\\\": \\\"Cache-Control\\\",\\n            \\\"value\\\": \\\"max-age=31536000\\\"\\n          }\\n        ]\\n      }\\n    ]\\n  }\\n}\\n```\\n\\n```bash\\n# Build and deploy\\ncargo run --release\\nfirebase deploy\\n```\\n\\n## Traditional Web Hosting\\n\\n### Apache Configuration\\n\\nFor traditional web hosting with Apache:\\n\\n```apache\\n# .htaccess\\nRewriteEngine On\\n\\n# Handle client-side routing\\nRewriteCond %{REQUEST_FILENAME} !-f\\nRewriteCond %{REQUEST_FILENAME} !-d\\nRewriteRule . /index.html [L]\\n\\n# Security headers\\nHeader always set X-Frame-Options DENY\\nHeader always set X-Content-Type-Options nosniff\\nHeader always set X-XSS-Protection \\\"1; mode=block\\\"\\nHeader always set Strict-Transport-Security \\\"max-age=31536000; includeSubDomains\\\"\\n\\n# Compression\\n<IfModule mod_deflate.c>\\n    AddOutputFilterByType DEFLATE text/html text/css application/javascript\\n</IfModule>\\n\\n# Caching\\n<IfModule mod_expires.c>\\n    ExpiresActive On\\n    ExpiresByType text/html \\\"access plus 1 hour\\\"\\n    ExpiresByType text/css \\\"access plus 1 year\\\"\\n    ExpiresByType application/javascript \\\"access plus 1 year\\\"\\n</IfModule>\\n```\\n\\n### Nginx Configuration\\n\\nFor Nginx hosting:\\n\\n```nginx\\nserver {\\n    listen 80;\\n    listen [::]:80;\\n    server_name yourdomain.com;\\n    \\n    # Redirect HTTP to HTTPS\\n    return 301 https://$server_name$request_uri;\\n}\\n\\nserver {\\n    listen 443 ssl http2;\\n    listen [::]:443 ssl http2;\\n    server_name yourdomain.com;\\n    \\n    # SSL configuration\\n    ssl_certificate /path/to/certificate.crt;\\n    ssl_certificate_key /path/to/private.key;\\n    \\n    # Document root\\n    root /var/www/glowdoc;\\n    index index.html;\\n    \\n    # Handle client-side routing\\n    location / {\\n        try_files $uri $uri/ /index.html;\\n    }\\n    \\n    # Security headers\\n    add_header X-Frame-Options DENY;\\n    add_header X-Content-Type-Options nosniff;\\n    add_header X-XSS-Protection \\\"1; mode=block\\\";\\n    add_header Strict-Transport-Security \\\"max-age=31536000; includeSubDomains\\\";\\n    \\n    # Compression\\n    gzip on;\\n    gzip_types text/html text/css application/javascript;\\n    \\n    # Caching\\n    location ~* \\\\.(css|js)$ {\\n        expires 1y;\\n        add_header Cache-Control \\\"public, immutable\\\";\\n    }\\n}\\n```\\n\\n## Content Delivery Networks (CDN)\\n\\n### Cloudflare CDN\\n\\nEnhance performance with Cloudflare:\\n\\n1. **DNS Setup:**\\n   - Add your domain to Cloudflare\\n   - Update nameservers\\n   - Enable \\\"Proxied\\\" status\\n\\n2. **Optimization Settings:**\\n   - Auto Minify: HTML, CSS, JS\\n   - Brotli compression: Enabled\\n   - Rocket Loader: Enabled\\n   - Cache Level: Standard\\n\\n3. **Page Rules:**\\n   ```\\n   yourdomain.com/*\\n   - Cache Level: Cache Everything\\n   - Edge Cache TTL: 1 month\\n   - Browser Cache TTL: 1 day\\n   ```\\n\\n### AWS CloudFront\\n\\nEnterprise-grade CDN with AWS integration:\\n\\n```json\\n{\\n  \\\"Distribution\\\": {\\n    \\\"Origins\\\": [\\n      {\\n        \\\"Id\\\": \\\"S3-glowdoc\\\",\\n        \\\"DomainName\\\": \\\"your-bucket.s3.amazonaws.com\\\",\\n        \\\"S3OriginConfig\\\": {\\n          \\\"OriginAccessIdentity\\\": \\\"\\\"\\n        }\\n      }\\n    ],\\n    \\\"DefaultCacheBehavior\\\": {\\n      \\\"TargetOriginId\\\": \\\"S3-glowdoc\\\",\\n      \\\"ViewerProtocolPolicy\\\": \\\"redirect-to-https\\\",\\n      \\\"Compress\\\": true,\\n      \\\"CachePolicyId\\\": \\\"managed-caching-optimized\\\"\\n    },\\n    \\\"CustomErrorResponses\\\": [\\n      {\\n        \\\"ErrorCode\\\": 404,\\n        \\\"ResponseCode\\\": 200,\\n        \\\"ResponsePagePath\\\": \\\"/index.html\\\"\\n      }\\n    ]\\n  }\\n}\\n```\\n\\n## Automation and CI/CD\\n\\n### GitHub Actions Advanced Workflow\\n\\nComplete CI/CD pipeline with testing and deployment:\\n\\n```yaml\\nname: Build, Test, and Deploy\\n\\non:\\n  push:\\n    branches: [ main, develop ]\\n  pull_request:\\n    branches: [ main ]\\n\\nenv:\\n  CARGO_TERM_COLOR: always\\n\\njobs:\\n  test:\\n    runs-on: ubuntu-latest\\n    steps:\\n    - uses: actions/checkout@v4\\n    \\n    - name: Install Rust\\n      uses: dtolnay/rust-toolchain@stable\\n    \\n    - name: Run tests\\n      run: cargo test --verbose\\n    \\n    - name: Check formatting\\n      run: cargo fmt -- --check\\n    \\n    - name: Run clippy\\n      run: cargo clippy -- -D warnings\\n\\n  build:\\n    needs: test\\n    runs-on: ubuntu-latest\\n    steps:\\n    - uses: actions/checkout@v4\\n    \\n    - name: Install Rust\\n      uses: dtolnay/rust-toolchain@stable\\n    \\n    - name: Cache dependencies\\n      uses: actions/cache@v3\\n      with:\\n        path: |\\n          ~/.cargo/registry\\n          ~/.cargo/git\\n          target\\n        key: ${{ runner.os }}-cargo-${{ hashFiles('**/Cargo.lock') }}\\n    \\n    - name: Build documentation\\n      run: cargo run --release\\n    \\n    - name: Validate HTML\\n      run: |\\n        npm install -g html-validate\\n        html-validate index.html\\n    \\n    - name: Check file size\\n      run: |\\n        SIZE=$(stat -c%s index.html)\\n        echo \\\"Generated file size: $SIZE bytes\\\"\\n        if [ $SIZE -gt 5242880 ]; then\\n          echo \\\"Warning: File size exceeds 5MB\\\"\\n          exit 1\\n        fi\\n    \\n    - name: Upload artifacts\\n      uses: actions/upload-artifact@v3\\n      with:\\n        name: documentation\\n        path: index.html\\n\\n  deploy-staging:\\n    needs: build\\n    runs-on: ubuntu-latest\\n    if: github.ref == 'refs/heads/develop'\\n    steps:\\n    - name: Download artifacts\\n      uses: actions/download-artifact@v3\\n      with:\\n        name: documentation\\n    \\n    - name: Deploy to staging\\n      run: |\\n        # Deploy to staging environment\\n        echo \\\"Deploying to staging...\\\"\\n\\n  deploy-production:\\n    needs: build\\n    runs-on: ubuntu-latest\\n    if: github.ref == 'refs/heads/main'\\n    steps:\\n    - name: Download artifacts\\n      uses: actions/download-artifact@v3\\n      with:\\n        name: documentation\\n    \\n    - name: Deploy to GitHub Pages\\n      uses: peaceiris/actions-gh-pages@v3\\n      with:\\n        github_token: ${{ secrets.GITHUB_TOKEN }}\\n        publish_dir: .\\n        force_orphan: true\\n    \\n    - name: Notify deployment\\n      run: |\\n        curl -X POST ${{ secrets.SLACK_WEBHOOK }} \\\\\\n          -H 'Content-type: application/json' \\\\\\n          --data '{\\\"text\\\":\\\"📚 Documentation deployed successfully!\\\"}'\\n```\\n\\n### GitLab CI/CD\\n\\n```yaml\\n# .gitlab-ci.yml\\nstages:\\n  - test\\n  - build\\n  - deploy\\n\\nvariables:\\n  RUST_VERSION: \\\"1.70\\\"\\n\\nbefore_script:\\n  - apt-get update -qq\\n  - curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh -s -- -y\\n  - source ~/.cargo/env\\n\\ntest:\\n  stage: test\\n  script:\\n    - cargo test --verbose\\n    - cargo fmt -- --check\\n    - cargo clippy -- -D warnings\\n  only:\\n    - merge_requests\\n    - main\\n\\nbuild:\\n  stage: build\\n  script:\\n    - cargo run --release\\n  artifacts:\\n    paths:\\n      - index.html\\n    expire_in: 1 hour\\n  only:\\n    - main\\n\\npages:\\n  stage: deploy\\n  script:\\n    - mkdir public\\n    - cp index.html public/\\n  artifacts:\\n    paths:\\n      - public\\n  only:\\n    - main\\n```\\n\\n## Domain and SSL Configuration\\n\\n### Custom Domain Setup\\n\\n#### DNS Configuration:\\n\\n```\\n# A Records for root domain\\n@ 3600 IN A 185.199.108.153\\n@ 3600 IN A 185.199.109.153\\n@ 3600 IN A 185.199.110.153\\n@ 3600 IN A 185.199.111.153\\n\\n# CNAME for www subdomain\\nwww 3600 IN CNAME your-username.github.io.\\n\\n# CNAME for docs subdomain\\ndocs 3600 IN CNAME your-site.netlify.app.\\n```\\n\\n#### SSL Certificate Setup:\\n\\nMost modern hosting platforms provide automatic SSL:\\n\\n- **GitHub Pages**: Automatic with custom domains\\n- **Netlify**: Automatic Let's Encrypt certificates\\n- **Vercel**: Automatic SSL for all deployments\\n- **Cloudflare**: Universal SSL included\\n\\n### Manual SSL Configuration\\n\\nFor traditional hosting:\\n\\n```bash\\n# Generate Let's Encrypt certificate\\ncertbot certonly --webroot -w /var/www/glowdoc -d yourdomain.com\\n\\n# Auto-renewal\\necho \\\"0 12 * * * /usr/bin/certbot renew --quiet\\\" | crontab -\\n```\\n\\n## Performance Optimization\\n\\n### Build Optimization\\n\\n```bash\\n# Optimize for production\\nRUSTFLAGS=\\\"-C target-cpu=native\\\" cargo run --release\\n\\n# Profile build performance\\ncargo build --release --timings\\n```\\n\\n### Content Optimization\\n\\n1. **Image Optimization**: Use optimized images in markdown\\n2. **Font Subsetting**: Include only needed font weights\\n3. **Code Splitting**: Implement lazy loading for large sections\\n\\n### Monitoring and Analytics\\n\\n#### Performance Monitoring:\\n\\n```javascript\\n// Add to your custom JavaScript\\nfunction trackPerformance() {\\n  window.addEventListener('load', () => {\\n    const perfData = performance.timing;\\n    const loadTime = perfData.loadEventEnd - perfData.navigationStart;\\n    \\n    // Send to analytics\\n    gtag('event', 'page_load_time', {\\n      value: loadTime,\\n      custom_parameter: 'documentation_site'\\n    });\\n  });\\n}\\n```\\n\\n#### Uptime Monitoring:\\n\\nSet up monitoring with services like:\\n- **StatusCake**: Free uptime monitoring\\n- **Pingdom**: Comprehensive monitoring suite\\n- **UptimeRobot**: Free and paid monitoring options\\n\\n## Security Considerations\\n\\n### Content Security Policy\\n\\n```html\\n<!-- Add to your HTML head -->\\n<meta http-equiv=\\\"Content-Security-Policy\\\" content=\\\"\\n  default-src 'self';\\n  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.googletagmanager.com;\\n  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;\\n  font-src 'self' https://fonts.gstatic.com;\\n  img-src 'self' data: https:;\\n  connect-src 'self' https://www.google-analytics.com;\\n\\\">\\n```\\n\\n### Security Headers\\n\\nImplement security headers across all hosting platforms:\\n\\n```\\nX-Frame-Options: DENY\\nX-Content-Type-Options: nosniff\\nX-XSS-Protection: 1; mode=block\\nStrict-Transport-Security: max-age=31536000; includeSubDomains\\nReferrer-Policy: strict-origin-when-cross-origin\\n```\\n\\n## Troubleshooting Deployment Issues\\n\\n### Common Problems\\n\\n**Build Failures:**\\n```bash\\n# Check Rust version compatibility\\nrustc --version\\n\\n# Verify dependencies\\ncargo check\\n\\n# Clean and rebuild\\ncargo clean && cargo run --release\\n```\\n\\n**Routing Issues:**\\n- Ensure hosting platform supports SPA routing\\n- Configure redirects for client-side routing\\n- Verify base URL configuration\\n\\n**Performance Issues:**\\n- Check file size (should be under 5MB)\\n- Verify compression is enabled\\n- Test CDN configuration\\n\\n**SSL Certificate Problems:**\\n- Verify DNS propagation\\n- Check certificate chain\\n- Ensure HTTPS redirects are configured\\n\\n### Debug Deployment\\n\\n```bash\\n# Test local build\\ncargo run --release\\npython3 -m http.server 8000\\n\\n# Validate HTML\\nhtml-validate index.html\\n\\n# Check file permissions\\nls -la index.html\\n\\n# Test from different networks\\ncurl -I https://yourdomain.com\\n```\\n\\n## Best Practices\\n\\n1. **Version Control**: Always commit before deploying\\n2. **Staging Environment**: Test changes before production\\n3. **Automated Backups**: Regular backup of source files\\n4. **Performance Monitoring**: Track load times and uptime\\n5. **Security Updates**: Keep hosting platform updated\\n6. **Documentation**: Document deployment process for team\\n7. **Rollback Plan**: Maintain ability to quickly revert changes\\n\\nThis comprehensive deployment guide ensures your GlowDoc documentation is accessible, performant, and secure across any hosting platform.\"\n    },\n    \"advanced/plugins\": {\n        \"title\": \"Plugins and Extensions\",\n        \"section\": \"Advanced\",\n        \"content\": \"# Plugins and Extensions\\n\\nExtend GlowDoc's functionality with custom plugins, third-party integrations, and advanced features to enhance your documentation experience.\\n\\n## Plugin Architecture Overview\\n\\nGlowDoc's modular architecture allows for various extension points and integration patterns. While GlowDoc doesn't have a formal plugin system, you can extend functionality through several approaches:\\n\\n### Extension Methods\\n\\n1. **CSS and JavaScript Extensions**: Add custom functionality through the Rust build process\\n2. **Third-Party Integrations**: Embed external services and tools\\n3. **Build Process Extensions**: Modify the Rust source for custom features\\n4. **External Tool Integration**: Combine GlowDoc with other documentation tools\\n\\n## Syntax Highlighting Enhancements\\n\\n### Advanced Code Highlighting\\n\\nWhile GlowDoc includes basic syntax highlighting, you can enhance it with external libraries:\\n\\n#### Prism.js Integration\\n\\nAdd advanced syntax highlighting with Prism.js:\\n\\n```javascript\\n// Add to the JavaScript section in src/main.rs\\nfunction initializePrism() {\\n  // Load Prism.js dynamically\\n  const script = document.createElement('script');\\n  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js';\\n  script.onload = function() {\\n    // Load additional language support\\n    const languages = ['rust', 'javascript', 'python', 'bash', 'yaml'];\\n    languages.forEach(lang => {\\n      const langScript = document.createElement('script');\\n      langScript.src = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-${lang}.min.js`;\\n      document.head.appendChild(langScript);\\n    });\\n    \\n    // Load Prism CSS\\n    const link = document.createElement('link');\\n    link.rel = 'stylesheet';\\n    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css';\\n    document.head.appendChild(link);\\n    \\n    // Re-highlight all code blocks\\n    Prism.highlightAll();\\n  };\\n  document.head.appendChild(script);\\n}\\n\\n// Call during page initialization\\ninitializePrism();\\n```\\n\\n#### Custom Syntax Highlighting\\n\\nCreate custom highlighting for domain-specific languages:\\n\\n```javascript\\nfunction customHighlighter() {\\n  document.querySelectorAll('pre code').forEach(block => {\\n    const language = block.className.match(/language-(\\\\w+)/);\\n    if (language && language[1] === 'custom-dsl') {\\n      highlightCustomDSL(block);\\n    }\\n  });\\n}\\n\\nfunction highlightCustomDSL(codeBlock) {\\n  let html = codeBlock.innerHTML;\\n  \\n  // Define custom syntax patterns\\n  const patterns = [\\n    { regex: /\\\\b(function|if|else|return)\\\\b/g, class: 'keyword' },\\n    { regex: /\\\\b\\\\d+\\\\b/g, class: 'number' },\\n    { regex: /\\\"[^\\\"]*\\\"/g, class: 'string' },\\n    { regex: /\\\\/\\\\/.*$/gm, class: 'comment' }\\n  ];\\n  \\n  patterns.forEach(pattern => {\\n    html = html.replace(pattern.regex, `<span class=\\\"${pattern.class}\\\">$&</span>`);\\n  });\\n  \\n  codeBlock.innerHTML = html;\\n}\\n```\\n\\n### Code Copy Functionality\\n\\nAdd copy-to-clipboard buttons for code blocks:\\n\\n```javascript\\nfunction addCopyButtons() {\\n  document.querySelectorAll('pre').forEach(pre => {\\n    const button = document.createElement('button');\\n    button.className = 'copy-button';\\n    button.textContent = 'Copy';\\n    button.onclick = () => copyToClipboard(pre.textContent, button);\\n    \\n    pre.style.position = 'relative';\\n    pre.appendChild(button);\\n  });\\n}\\n\\nfunction copyToClipboard(text, button) {\\n  navigator.clipboard.writeText(text).then(() => {\\n    const originalText = button.textContent;\\n    button.textContent = 'Copied!';\\n    button.classList.add('copied');\\n    \\n    setTimeout(() => {\\n      button.textContent = originalText;\\n      button.classList.remove('copied');\\n    }, 2000);\\n  });\\n}\\n\\n// CSS for copy button\\nconst copyButtonCSS = `\\n.copy-button {\\n  position: absolute;\\n  top: 0.5rem;\\n  right: 0.5rem;\\n  padding: 0.25rem 0.5rem;\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n  border: none;\\n  border-radius: 0.25rem;\\n  font-size: 0.75rem;\\n  cursor: pointer;\\n  opacity: 0;\\n  transition: opacity 0.2s ease;\\n}\\n\\npre:hover .copy-button {\\n  opacity: 1;\\n}\\n\\n.copy-button.copied {\\n  background: hsl(var(--accent));\\n}\\n`;\\n```\\n\\n## Search Enhancements\\n\\n### Advanced Search Integration\\n\\n#### Algolia DocSearch\\n\\nIntegrate Algolia's DocSearch for powerful search capabilities:\\n\\n```javascript\\nfunction initializeAlgoliaSearch() {\\n  // Load Algolia DocSearch\\n  const script = document.createElement('script');\\n  script.src = 'https://cdn.jsdelivr.net/npm/@docsearch/js@3';\\n  script.onload = function() {\\n    docsearch({\\n      appId: 'YOUR_APP_ID',\\n      apiKey: 'YOUR_SEARCH_API_KEY',\\n      indexName: 'YOUR_INDEX_NAME',\\n      container: '#docsearch',\\n      searchParameters: {\\n        facetFilters: ['language:en'],\\n      },\\n    });\\n  };\\n  document.head.appendChild(script);\\n  \\n  // Replace existing search input\\n  const searchContainer = document.querySelector('.search-container');\\n  searchContainer.innerHTML = '<div id=\\\"docsearch\\\"></div>';\\n}\\n```\\n\\n#### Lunr.js Client-Side Search\\n\\nImplement advanced client-side search with Lunr.js:\\n\\n```javascript\\nfunction initializeLunrSearch() {\\n  // Build search index from content\\n  const documents = [];\\n  document.querySelectorAll('.content-section').forEach((section, idx) => {\\n    documents.push({\\n      id: idx,\\n      title: section.querySelector('h1')?.textContent || '',\\n      content: section.textContent,\\n      url: section.id\\n    });\\n  });\\n  \\n  // Create Lunr index\\n  const idx = lunr(function () {\\n    this.ref('id');\\n    this.field('title', { boost: 10 });\\n    this.field('content');\\n    \\n    documents.forEach((doc) => {\\n      this.add(doc);\\n    });\\n  });\\n  \\n  // Enhanced search function\\n  function performSearch(query) {\\n    const results = idx.search(query);\\n    return results.map(result => {\\n      const doc = documents[result.ref];\\n      return {\\n        ...doc,\\n        score: result.score,\\n        excerpt: generateExcerpt(doc.content, query)\\n      };\\n    });\\n  }\\n  \\n  function generateExcerpt(content, query, maxLength = 150) {\\n    const index = content.toLowerCase().indexOf(query.toLowerCase());\\n    if (index === -1) return content.substring(0, maxLength) + '...';\\n    \\n    const start = Math.max(0, index - 50);\\n    const end = Math.min(content.length, index + query.length + 50);\\n    const excerpt = content.substring(start, end);\\n    \\n    return (start > 0 ? '...' : '') + excerpt + (end < content.length ? '...' : '');\\n  }\\n}\\n```\\n\\n### Search Analytics\\n\\nTrack search behavior and popular queries:\\n\\n```javascript\\nfunction trackSearchAnalytics() {\\n  const searchInput = document.querySelector('.search-input');\\n  \\n  searchInput.addEventListener('input', debounce((e) => {\\n    const query = e.target.value;\\n    if (query.length > 2) {\\n      // Track search queries\\n      gtag('event', 'search', {\\n        search_term: query,\\n        page_title: document.title\\n      });\\n    }\\n  }, 1000));\\n  \\n  // Track search result clicks\\n  document.addEventListener('click', (e) => {\\n    if (e.target.classList.contains('search-result')) {\\n      gtag('event', 'search_result_click', {\\n        search_term: searchInput.value,\\n        result_title: e.target.textContent\\n      });\\n    }\\n  });\\n}\\n\\nfunction debounce(func, wait) {\\n  let timeout;\\n  return function executedFunction(...args) {\\n    const later = () => {\\n      clearTimeout(timeout);\\n      func(...args);\\n    };\\n    clearTimeout(timeout);\\n    timeout = setTimeout(later, wait);\\n  };\\n}\\n```\\n\\n## Analytics and Tracking\\n\\n### Google Analytics 4 Integration\\n\\nImplement comprehensive analytics tracking:\\n\\n```javascript\\nfunction initializeAnalytics() {\\n  // Load Google Analytics\\n  const script1 = document.createElement('script');\\n  script1.async = true;\\n  script1.src = 'https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID';\\n  document.head.appendChild(script1);\\n  \\n  const script2 = document.createElement('script');\\n  script2.innerHTML = `\\n    window.dataLayer = window.dataLayer || [];\\n    function gtag(){dataLayer.push(arguments);}\\n    gtag('js', new Date());\\n    gtag('config', 'YOUR_GA_ID', {\\n      page_title: document.title,\\n      page_location: window.location.href\\n    });\\n  `;\\n  document.head.appendChild(script2);\\n}\\n\\nfunction trackUserBehavior() {\\n  // Track page navigation\\n  document.addEventListener('click', (e) => {\\n    if (e.target.classList.contains('nav-link')) {\\n      gtag('event', 'page_view', {\\n        page_title: e.target.textContent,\\n        page_location: window.location.href + '#' + e.target.getAttribute('href').substring(1)\\n      });\\n    }\\n  });\\n  \\n  // Track theme changes\\n  document.querySelector('.theme-toggle').addEventListener('click', () => {\\n    const currentTheme = document.documentElement.getAttribute('data-theme');\\n    gtag('event', 'theme_change', {\\n      theme: currentTheme === 'dark' ? 'light' : 'dark'\\n    });\\n  });\\n  \\n  // Track scroll depth\\n  let maxScroll = 0;\\n  window.addEventListener('scroll', debounce(() => {\\n    const scrollPercent = Math.round((window.scrollY + window.innerHeight) / document.body.scrollHeight * 100);\\n    if (scrollPercent > maxScroll) {\\n      maxScroll = scrollPercent;\\n      if (maxScroll % 25 === 0) { // Track at 25%, 50%, 75%, 100%\\n        gtag('event', 'scroll_depth', {\\n          percent: maxScroll,\\n          page_title: document.title\\n        });\\n      }\\n    }\\n  }, 500));\\n}\\n```\\n\\n### Hotjar Integration\\n\\nAdd user behavior tracking with Hotjar:\\n\\n```javascript\\nfunction initializeHotjar() {\\n  const script = document.createElement('script');\\n  script.innerHTML = `\\n    (function(h,o,t,j,a,r){\\n      h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};\\n      h._hjSettings={hjid:YOUR_HOTJAR_ID,hjsv:6};\\n      a=o.getElementsByTagName('head')[0];\\n      r=o.createElement('script');r.async=1;\\n      r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;\\n      a.appendChild(r);\\n    })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');\\n  `;\\n  document.head.appendChild(script);\\n}\\n```\\n\\n## Accessibility Enhancements\\n\\n### Screen Reader Improvements\\n\\nEnhance accessibility with ARIA attributes and screen reader support:\\n\\n```javascript\\nfunction enhanceAccessibility() {\\n  // Add skip navigation\\n  const skipLink = document.createElement('a');\\n  skipLink.href = '#main-content';\\n  skipLink.textContent = 'Skip to main content';\\n  skipLink.className = 'skip-link';\\n  document.body.insertBefore(skipLink, document.body.firstChild);\\n  \\n  // Improve navigation ARIA labels\\n  document.querySelectorAll('.nav-section-title').forEach(title => {\\n    const sectionId = title.getAttribute('data-section');\\n    title.setAttribute('aria-expanded', 'false');\\n    title.setAttribute('aria-controls', sectionId + '-content');\\n    \\n    const content = title.nextElementSibling;\\n    if (content) {\\n      content.setAttribute('id', sectionId + '-content');\\n      content.setAttribute('aria-labelledby', sectionId + '-title');\\n    }\\n  });\\n  \\n  // Announce page changes to screen readers\\n  const announcer = document.createElement('div');\\n  announcer.setAttribute('aria-live', 'polite');\\n  announcer.setAttribute('aria-atomic', 'true');\\n  announcer.className = 'sr-only';\\n  document.body.appendChild(announcer);\\n  \\n  // Announce when content changes\\n  function announcePageChange(title) {\\n    announcer.textContent = `Navigated to ${title}`;\\n    setTimeout(() => announcer.textContent = '', 1000);\\n  }\\n  \\n  return { announcePageChange };\\n}\\n\\n// CSS for accessibility\\nconst accessibilityCSS = `\\n.skip-link {\\n  position: absolute;\\n  top: -40px;\\n  left: 6px;\\n  background: hsl(var(--primary));\\n  color: hsl(var(--primary-foreground));\\n  padding: 8px;\\n  text-decoration: none;\\n  border-radius: 0 0 4px 4px;\\n  z-index: 1000;\\n}\\n\\n.skip-link:focus {\\n  top: 0;\\n}\\n\\n.sr-only {\\n  position: absolute;\\n  width: 1px;\\n  height: 1px;\\n  padding: 0;\\n  margin: -1px;\\n  overflow: hidden;\\n  clip: rect(0, 0, 0, 0);\\n  white-space: nowrap;\\n  border: 0;\\n}\\n`;\\n```\\n\\n### Keyboard Navigation Enhancement\\n\\nImprove keyboard navigation throughout the documentation:\\n\\n```javascript\\nfunction enhanceKeyboardNavigation() {\\n  let focusedSearchResult = -1;\\n  \\n  document.addEventListener('keydown', (e) => {\\n    // Search result navigation\\n    if (e.target.classList.contains('search-input')) {\\n      const results = document.querySelectorAll('.search-result');\\n      \\n      switch (e.key) {\\n        case 'ArrowDown':\\n          e.preventDefault();\\n          focusedSearchResult = Math.min(focusedSearchResult + 1, results.length - 1);\\n          updateSearchResultFocus(results);\\n          break;\\n          \\n        case 'ArrowUp':\\n          e.preventDefault();\\n          focusedSearchResult = Math.max(focusedSearchResult - 1, -1);\\n          updateSearchResultFocus(results);\\n          break;\\n          \\n        case 'Enter':\\n          if (focusedSearchResult >= 0 && results[focusedSearchResult]) {\\n            e.preventDefault();\\n            results[focusedSearchResult].click();\\n          }\\n          break;\\n          \\n        case 'Escape':\\n          e.target.blur();\\n          document.querySelector('.search-results').style.display = 'none';\\n          break;\\n      }\\n    }\\n    \\n    // Global shortcuts\\n    if (e.ctrlKey || e.metaKey) {\\n      switch (e.key) {\\n        case 'k':\\n          e.preventDefault();\\n          document.querySelector('.search-input').focus();\\n          break;\\n          \\n        case '/':\\n          e.preventDefault();\\n          document.querySelector('.search-input').focus();\\n          break;\\n      }\\n    }\\n  });\\n  \\n  function updateSearchResultFocus(results) {\\n    results.forEach((result, index) => {\\n      result.classList.toggle('focused', index === focusedSearchResult);\\n    });\\n    \\n    if (focusedSearchResult >= 0 && results[focusedSearchResult]) {\\n      results[focusedSearchResult].scrollIntoView({ block: 'nearest' });\\n    }\\n  }\\n}\\n```\\n\\n## Performance Enhancements\\n\\n### Lazy Loading and Code Splitting\\n\\nImplement performance optimizations:\\n\\n```javascript\\nfunction implementLazyLoading() {\\n  // Lazy load heavy components\\n  const observerOptions = {\\n    root: null,\\n    rootMargin: '100px',\\n    threshold: 0.1\\n  };\\n  \\n  const observer = new IntersectionObserver((entries) => {\\n    entries.forEach(entry => {\\n      if (entry.isIntersecting) {\\n        const section = entry.target;\\n        loadSectionAssets(section);\\n        observer.unobserve(section);\\n      }\\n    });\\n  }, observerOptions);\\n  \\n  // Observe content sections for lazy loading\\n  document.querySelectorAll('.content-section').forEach(section => {\\n    observer.observe(section);\\n  });\\n  \\n  function loadSectionAssets(section) {\\n    // Load section-specific assets\\n    const codeBlocks = section.querySelectorAll('pre code');\\n    if (codeBlocks.length > 0) {\\n      loadSyntaxHighlighting(codeBlocks);\\n    }\\n    \\n    const diagrams = section.querySelectorAll('.mermaid');\\n    if (diagrams.length > 0) {\\n      loadMermaidDiagrams(diagrams);\\n    }\\n  }\\n}\\n\\nfunction implementServiceWorker() {\\n  if ('serviceWorker' in navigator) {\\n    const swContent = `\\n      const CACHE_NAME = 'glowdoc-v1';\\n      const urlsToCache = [\\n        '/',\\n        '/index.html'\\n      ];\\n      \\n      self.addEventListener('install', (event) => {\\n        event.waitUntil(\\n          caches.open(CACHE_NAME)\\n            .then((cache) => cache.addAll(urlsToCache))\\n        );\\n      });\\n      \\n      self.addEventListener('fetch', (event) => {\\n        event.respondWith(\\n          caches.match(event.request)\\n            .then((response) => {\\n              return response || fetch(event.request);\\n            })\\n        );\\n      });\\n    `;\\n    \\n    const blob = new Blob([swContent], { type: 'application/javascript' });\\n    const swURL = URL.createObjectURL(blob);\\n    \\n    navigator.serviceWorker.register(swURL)\\n      .then((registration) => {\\n        console.log('ServiceWorker registered:', registration);\\n      })\\n      .catch((error) => {\\n        console.log('ServiceWorker registration failed:', error);\\n      });\\n  }\\n}\\n```\\n\\n## Diagram and Visualization Support\\n\\n### Mermaid Diagrams\\n\\nAdd support for Mermaid diagrams:\\n\\n```javascript\\nfunction initializeMermaid() {\\n  const script = document.createElement('script');\\n  script.src = 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js';\\n  script.onload = function() {\\n    mermaid.initialize({\\n      startOnLoad: false,\\n      theme: document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default',\\n      securityLevel: 'loose'\\n    });\\n    \\n    // Process Mermaid diagrams\\n    document.querySelectorAll('.language-mermaid').forEach(async (element, index) => {\\n      const graphDefinition = element.textContent;\\n      const graphId = `mermaid-graph-${index}`;\\n      \\n      try {\\n        const { svg } = await mermaid.render(graphId, graphDefinition);\\n        const wrapper = document.createElement('div');\\n        wrapper.className = 'mermaid-wrapper';\\n        wrapper.innerHTML = svg;\\n        element.closest('pre').replaceWith(wrapper);\\n      } catch (error) {\\n        console.error('Mermaid rendering error:', error);\\n      }\\n    });\\n  };\\n  document.head.appendChild(script);\\n}\\n\\n// Update Mermaid theme when user changes theme\\nfunction updateMermaidTheme() {\\n  const observer = new MutationObserver((mutations) => {\\n    mutations.forEach((mutation) => {\\n      if (mutation.attributeName === 'data-theme') {\\n        const newTheme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default';\\n        if (window.mermaid) {\\n          mermaid.initialize({ theme: newTheme });\\n          // Re-render existing diagrams\\n          document.querySelectorAll('.mermaid-wrapper').forEach(async (wrapper, index) => {\\n            // Re-render logic here\\n          });\\n        }\\n      }\\n    });\\n  });\\n  \\n  observer.observe(document.documentElement, {\\n    attributes: true,\\n    attributeFilter: ['data-theme']\\n  });\\n}\\n```\\n\\n### Chart.js Integration\\n\\nAdd interactive charts and graphs:\\n\\n```javascript\\nfunction initializeCharts() {\\n  const script = document.createElement('script');\\n  script.src = 'https://cdn.jsdelivr.net/npm/chart.js';\\n  script.onload = function() {\\n    document.querySelectorAll('.chart-container').forEach(container => {\\n      const config = JSON.parse(container.dataset.config);\\n      const canvas = document.createElement('canvas');\\n      container.appendChild(canvas);\\n      \\n      new Chart(canvas, {\\n        ...config,\\n        options: {\\n          ...config.options,\\n          responsive: true,\\n          plugins: {\\n            ...config.options?.plugins,\\n            legend: {\\n              ...config.options?.plugins?.legend,\\n              labels: {\\n                color: getComputedStyle(document.documentElement)\\n                  .getPropertyValue('--foreground')\\n              }\\n            }\\n          }\\n        }\\n      });\\n    });\\n  };\\n  document.head.appendChild(script);\\n}\\n```\\n\\n## Plugin Development Guide\\n\\n### Creating Custom Extensions\\n\\nStructure for building your own GlowDoc extensions:\\n\\n```rust\\n// In src/main.rs, add to the generate_javascript() function\\n\\npub fn generate_custom_plugin_javascript() -> String {\\n    r#\\\"\\n    // Custom Plugin Framework\\n    class GlowDocPlugin {\\n        constructor(name, options = {}) {\\n            this.name = name;\\n            this.options = options;\\n            this.hooks = {};\\n            this.initialized = false;\\n        }\\n        \\n        // Register event hooks\\n        on(event, callback) {\\n            if (!this.hooks[event]) {\\n                this.hooks[event] = [];\\n            }\\n            this.hooks[event].push(callback);\\n            return this;\\n        }\\n        \\n        // Trigger event hooks\\n        trigger(event, data) {\\n            if (this.hooks[event]) {\\n                this.hooks[event].forEach(callback => callback(data));\\n            }\\n        }\\n        \\n        // Initialize plugin\\n        init() {\\n            if (this.initialized) return;\\n            this.trigger('beforeInit', this.options);\\n            this.setup();\\n            this.initialized = true;\\n            this.trigger('afterInit', this.options);\\n        }\\n        \\n        // Override in subclasses\\n        setup() {\\n            throw new Error('Plugin must implement setup() method');\\n        }\\n    }\\n    \\n    // Plugin registry\\n    window.GlowDocPlugins = {\\n        plugins: new Map(),\\n        \\n        register(plugin) {\\n            this.plugins.set(plugin.name, plugin);\\n            if (document.readyState === 'loading') {\\n                document.addEventListener('DOMContentLoaded', () => plugin.init());\\n            } else {\\n                plugin.init();\\n            }\\n        },\\n        \\n        get(name) {\\n            return this.plugins.get(name);\\n        }\\n    };\\n    \\n    // Example plugin\\n    class ExamplePlugin extends GlowDocPlugin {\\n        setup() {\\n            this.on('beforeInit', (options) => {\\n                console.log('Example plugin initializing with options:', options);\\n            });\\n            \\n            // Add custom functionality\\n            this.addCustomButton();\\n        }\\n        \\n        addCustomButton() {\\n            const button = document.createElement('button');\\n            button.textContent = 'Custom Action';\\n            button.onclick = () => this.trigger('customAction', 'Hello from plugin!');\\n            document.querySelector('.header-content').appendChild(button);\\n        }\\n    }\\n    \\n    // Auto-register plugins\\n    document.addEventListener('DOMContentLoaded', () => {\\n        // Register built-in plugins\\n        const examplePlugin = new ExamplePlugin('example', { debug: true });\\n        GlowDocPlugins.register(examplePlugin);\\n    });\\n    \\\"#.to_string()\\n}\\n```\\n\\n### Plugin Configuration\\n\\nAllow users to configure plugins through config.yaml:\\n\\n```rust\\n// Add to Config struct in src/main.rs\\n#[derive(Debug, Deserialize, Serialize)]\\nstruct PluginConfig {\\n    name: String,\\n    enabled: bool,\\n    options: HashMap<String, serde_yaml::Value>,\\n}\\n\\n#[derive(Debug, Deserialize, Serialize)]\\nstruct Config {\\n    title: String,\\n    description: String,\\n    navigation: Vec<NavigationSection>,\\n    theme: String,\\n    plugins: Option<Vec<PluginConfig>>,\\n}\\n```\\n\\n## Best Practices for Extensions\\n\\n### Performance Considerations\\n\\n1. **Lazy Loading**: Only load plugins when needed\\n2. **Code Splitting**: Separate plugin code from core functionality\\n3. **Memory Management**: Clean up event listeners and resources\\n4. **Minimal Dependencies**: Keep external dependencies lightweight\\n\\n### Security Guidelines\\n\\n1. **Input Validation**: Sanitize all user inputs\\n2. **Content Security Policy**: Implement CSP headers\\n3. **External Resources**: Use integrity hashes for CDN resources\\n4. **User Data**: Handle user data securely\\n\\n### Accessibility Standards\\n\\n1. **ARIA Support**: Provide proper ARIA attributes\\n2. **Keyboard Navigation**: Ensure all functionality is keyboard accessible\\n3. **Screen Reader Compatibility**: Test with screen readers\\n4. **Color Contrast**: Maintain adequate contrast ratios\\n\\n## Troubleshooting Plugins\\n\\n**Plugin not loading**: Check browser console for JavaScript errors and verify script URLs.\\n\\n**Conflicts between plugins**: Implement proper namespacing and avoid global variable conflicts.\\n\\n**Performance issues**: Profile plugin performance and optimize heavy operations.\\n\\n**Theme compatibility**: Ensure plugins work with all themes and dark mode.\\n\\n**Mobile responsiveness**: Test plugin functionality on mobile devices.\"\n    }\n};\n\n\n        function toggleTheme() {\n            const html = document.documentElement;\n            const currentTheme = html.getAttribute('data-theme');\n            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';\n            \n            html.setAttribute('data-theme', newTheme);\n            localStorage.setItem('theme', newTheme);\n        }\n\n        function toggleSidebar() {\n            const sidebar = document.getElementById('sidebar');\n            sidebar.classList.toggle('visible');\n        }\n\n        function toggleSection(sectionId) {\n            const items = document.getElementById(sectionId + '-items');\n            const toggle = event.target.closest('.nav-section-title').querySelector('.nav-section-toggle');\n            \n            items.classList.toggle('collapsed');\n            toggle.classList.toggle('collapsed');\n            event.target.closest('.nav-section-title').classList.toggle('collapsed');\n        }\n\n        function toggleNestedSection(sectionId) {\n            const items = document.getElementById(sectionId + '-items');\n            const toggle = event.target.closest('.nav-folder-title').querySelector('.nav-folder-toggle');\n            \n            items.classList.toggle('collapsed');\n            toggle.classList.toggle('collapsed');\n        }\n\n        function showHomepage() {\n            document.getElementById('homepage').classList.add('active');\n            document.getElementById('docs-layout').classList.remove('active');\n            \n            // Clear table of contents when showing homepage\n            clearTableOfContents();\n            \n            // Update URL to homepage\n            history.pushState({ page: 'homepage' }, '', window.location.pathname);\n        }\n\n        function showDocs() {\n            document.getElementById('homepage').classList.remove('active');\n            document.getElementById('docs-layout').classList.add('active');\n        }\n\n        function showContent(contentId, updateUrl = true, headerId = null) {\n            console.log('showContent called with contentId:', contentId, 'headerId:', headerId);\n            \n            // Switch to docs view first\n            showDocs();\n            \n            // Hide all content sections\n            const allSections = document.querySelectorAll('.content-section');\n            console.log('Found sections:', allSections.length);\n            allSections.forEach(section => {\n                section.classList.remove('active');\n            });\n            \n            // Show selected content using the combined ID\n            const targetContent = document.getElementById(contentId);\n            console.log('Target content element:', targetContent);\n            if (targetContent) {\n                targetContent.classList.add('active');\n                console.log('Successfully activated content:', contentId);\n                \n                // Generate table of contents for this page\n                generateTableOfContents(targetContent);\n                \n                // Scroll to header if specified\n                if (headerId) {\n                    setTimeout(() => {\n                        const headerElement = document.getElementById(headerId);\n                        if (headerElement) {\n                            headerElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                            updateTocActiveState(headerId);\n                        }\n                    }, 100);\n                } else {\n                    // Update TOC active state based on scroll position\n                    updateTocActiveState();\n                }\n                \n                // Update URL if requested\n                if (updateUrl) {\n                    const newUrl = headerId ? \n                        window.location.pathname + '#' + contentId + '#' + headerId :\n                        window.location.pathname + '#' + contentId;\n                    history.pushState({ contentId: contentId, headerId: headerId }, '', newUrl);\n                }\n            } else {\n                console.error('Content not found for ID:', contentId);\n                // List all available content sections for debugging\n                const allContentIds = Array.from(allSections).map(s => s.id);\n                console.log('Available content IDs:', allContentIds);\n                // Clear TOC if no content found\n                clearTableOfContents();\n            }\n            \n            // Update active nav link\n            document.querySelectorAll('.nav-link').forEach(link => {\n                link.classList.remove('active');\n            });\n            \n            // Find and activate the correct nav link using the combined content ID\n            const navLinks = document.querySelectorAll('.nav-link');\n            for (const link of navLinks) {\n                if (link.getAttribute('data-content-id') === contentId) {\n                    link.classList.add('active');\n                    break;\n                }\n            }\n            \n            // Close sidebar on mobile\n            if (window.innerWidth <= 768) {\n                document.getElementById('sidebar').classList.remove('visible');\n            }\n            \n        }\n\n        function generateTableOfContents(contentElement) {\n            const tocNav = document.getElementById('toc-nav');\n            const tocContainer = document.getElementById('table-of-contents');\n            \n            if (!contentElement) {\n                clearTableOfContents();\n                return;\n            }\n            \n            // Find all headers in the content\n            const headers = contentElement.querySelectorAll('h1, h2, h3, h4, h5, h6');\n            \n            if (headers.length === 0) {\n                clearTableOfContents();\n                return;\n            }\n            \n            // Show the TOC container\n            tocContainer.style.display = 'block';\n            \n            // Set TOC as collapsed by default on mobile\n            if (window.innerWidth <= 768) {\n                tocContainer.classList.add('collapsed');\n            }\n            \n            // Build the TOC structure\n            let tocHtml = '<ul>';\n            headers.forEach(header => {\n                const level = parseInt(header.tagName.substring(1));\n                const text = header.textContent;\n                const id = header.id;\n                \n                if (id) {\n                    const listItem = document.createElement('li');\n                    listItem.className = 'toc-level-' + level;\n                    \n                    const link = document.createElement('a');\n                    link.href = '#' + id;\n                    link.className = 'toc-link';\n                    link.setAttribute('data-header-id', id);\n                    link.textContent = text;\n                    \n                    listItem.appendChild(link);\n                    tocHtml += listItem.outerHTML;\n                }\n            });\n            tocHtml += '</ul>';\n            \n            tocNav.innerHTML = tocHtml;\n            \n            // Add click handlers for TOC links\n            const tocLinks = tocNav.querySelectorAll('.toc-link');\n            tocLinks.forEach(link => {\n                link.addEventListener('click', function(e) {\n                    e.preventDefault();\n                    const headerId = this.getAttribute('data-header-id');\n                    const headerElement = document.getElementById(headerId);\n                    if (headerElement) {\n                        headerElement.scrollIntoView({ behavior: 'smooth', block: 'start' });\n                        updateTocActiveState(headerId);\n                        \n                        // Update URL with header\n                        const currentContent = document.querySelector('.content-section.active');\n                        if (currentContent) {\n                            const contentId = currentContent.id;\n                            const newUrl = window.location.pathname + '#' + contentId + '#' + headerId;\n                            history.pushState({ contentId: contentId, headerId: headerId }, '', newUrl);\n                        }\n                    }\n                });\n            });\n            \n            // Set up scroll spy for TOC\n            setupScrollSpy();\n        }\n\n        function clearTableOfContents() {\n            const tocNav = document.getElementById('toc-nav');\n            const tocContainer = document.getElementById('table-of-contents');\n            \n            if (tocNav) {\n                tocNav.innerHTML = '';\n            }\n            \n            if (tocContainer) {\n                tocContainer.style.display = 'none';\n            }\n        }\n\n        function updateTocActiveState(activeHeaderId) {\n            const tocLinks = document.querySelectorAll('.toc-link');\n            tocLinks.forEach(link => {\n                link.classList.remove('active');\n                if (activeHeaderId && link.getAttribute('data-header-id') === activeHeaderId) {\n                    link.classList.add('active');\n                }\n            });\n        }\n\n        function setupScrollSpy() {\n            const headers = document.querySelectorAll('.content-section.active h1, .content-section.active h2, .content-section.active h3, .content-section.active h4, .content-section.active h5, .content-section.active h6');\n            \n            if (headers.length === 0) return;\n            \n            // Clear any existing scroll spy\n            if (window.currentScrollObserver) {\n                window.currentScrollObserver.disconnect();\n            }\n            \n            const observer = new IntersectionObserver((entries) => {\n                let activeHeader = null;\n                let maxRatio = 0;\n                \n                // Find the header with the highest intersection ratio\n                entries.forEach(entry => {\n                    if (entry.isIntersecting && entry.intersectionRatio > maxRatio) {\n                        maxRatio = entry.intersectionRatio;\n                        activeHeader = entry.target.id;\n                    }\n                });\n                \n                // If no header is intersecting, find the one closest to the top\n                if (!activeHeader) {\n                    let closestHeader = null;\n                    let closestDistance = Infinity;\n                    \n                    headers.forEach(header => {\n                        const rect = header.getBoundingClientRect();\n                        const distance = Math.abs(rect.top - 100); // Account for sticky header\n                        if (distance < closestDistance && rect.top <= window.innerHeight / 2) {\n                            closestDistance = distance;\n                            closestHeader = header.id;\n                        }\n                    });\n                    \n                    activeHeader = closestHeader;\n                }\n                \n                if (activeHeader) {\n                    updateTocActiveState(activeHeader);\n                    \n                    // Update URL with current section and header\n                    const currentContent = document.querySelector('.content-section.active');\n                    if (currentContent) {\n                        const contentId = currentContent.id;\n                        const newUrl = window.location.pathname + '#' + contentId + '#' + activeHeader;\n                        \n                        // Use replaceState to avoid creating browser history entries for scroll events\n                        history.replaceState({ contentId: contentId, headerId: activeHeader }, '', newUrl);\n                    }\n                    \n                    // Ensure active TOC item is visible in mobile collapsed mode\n                    const activeTocLink = document.querySelector('.toc-link.active');\n                    if (activeTocLink) {\n                        const tocContainer = document.getElementById('table-of-contents');\n                        if (tocContainer && !tocContainer.classList.contains('collapsed')) {\n                            const tocNav = document.getElementById('toc-nav');\n                            if (tocNav) {\n                                const navRect = tocNav.getBoundingClientRect();\n                                const linkRect = activeTocLink.getBoundingClientRect();\n                                \n                                if (linkRect.bottom > navRect.bottom || linkRect.top < navRect.top) {\n                                    activeTocLink.scrollIntoView({ \n                                        behavior: 'smooth', \n                                        block: 'nearest',\n                                        inline: 'nearest'\n                                    });\n                                }\n                            }\n                        }\n                    }\n                }\n            }, {\n                rootMargin: '-80px 0px -50% 0px',\n                threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]\n            });\n            \n            headers.forEach(header => {\n                if (header.id) {\n                    observer.observe(header);\n                }\n            });\n            \n            window.currentScrollObserver = observer;\n        }\n\n\n        // Load saved theme or default to light mode\n        const savedTheme = localStorage.getItem('theme') || 'light';\n        document.documentElement.setAttribute('data-theme', savedTheme);\n\n        // Respect system preference if no saved theme\n        if (!localStorage.getItem('theme')) {\n            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n            if (prefersDark) {\n                document.documentElement.setAttribute('data-theme', 'dark');\n            }\n        }\n\n        function performSearch() {\n            const searchInput = document.getElementById('search-input');\n            const searchTerm = searchInput.value.toLowerCase().trim();\n            const searchResults = document.getElementById('search-results');\n            const searchResultsList = document.getElementById('search-results-list');\n            const navigationContainer = document.getElementById('navigation-container');\n            \n            if (searchTerm === '') {\n                // Show navigation, hide search results\n                searchResults.style.display = 'none';\n                navigationContainer.style.display = 'block';\n                return;\n            }\n            \n            // Hide navigation, show search results\n            navigationContainer.style.display = 'none';\n            searchResults.style.display = 'block';\n            \n            // Search through the index\n            const results = [];\n            \n            for (const [pageId, pageData] of Object.entries(searchIndex)) {\n                const titleMatch = pageData.title.toLowerCase().includes(searchTerm);\n                const sectionMatch = pageData.section.toLowerCase().includes(searchTerm);\n                const contentMatch = pageData.content.toLowerCase().includes(searchTerm);\n                \n                if (titleMatch || sectionMatch || contentMatch) {\n                    // Find context around the match in content\n                    let snippet = '';\n                    if (contentMatch) {\n                        const contentLower = pageData.content.toLowerCase();\n                        const matchIndex = contentLower.indexOf(searchTerm);\n                        const start = Math.max(0, matchIndex - 60);\n                        const end = Math.min(pageData.content.length, matchIndex + searchTerm.length + 60);\n                        snippet = pageData.content.substring(start, end);\n                        \n                        // Add ellipsis if we're in the middle of the content\n                        if (start > 0) snippet = '...' + snippet;\n                        if (end < pageData.content.length) snippet = snippet + '...';\n                        \n                        // Highlight the search term\n                        const regex = new RegExp(`(${searchTerm})`, 'gi');\n                        snippet = snippet.replace(regex, '<mark>$1</mark>');\n                    }\n                    \n                    results.push({\n                        id: pageId,\n                        title: pageData.title,\n                        section: pageData.section,\n                        snippet: snippet,\n                        titleMatch: titleMatch,\n                        sectionMatch: sectionMatch,\n                        contentMatch: contentMatch\n                    });\n                }\n            }\n            \n            // Sort results by relevance (title matches first, then section matches, then content matches)\n            results.sort((a, b) => {\n                if (a.titleMatch && !b.titleMatch) return -1;\n                if (!a.titleMatch && b.titleMatch) return 1;\n                if (a.sectionMatch && !b.sectionMatch) return -1;\n                if (!a.sectionMatch && b.sectionMatch) return 1;\n                return 0;\n            });\n            \n            // Display results\n            if (results.length === 0) {\n                searchResultsList.innerHTML = '<div class=\"no-results\">No results found</div>';\n            } else {\n                let resultsHtml = '';\n                results.forEach(result => {\n                    const resultDiv = document.createElement('div');\n                    resultDiv.className = 'search-result';\n                    resultDiv.onclick = () => showContentFromSearch(result.id);\n                    \n                    const titleDiv = document.createElement('div');\n                    titleDiv.className = 'search-result-title';\n                    titleDiv.textContent = result.title;\n                    resultDiv.appendChild(titleDiv);\n                    \n                    const sectionDiv = document.createElement('div');\n                    sectionDiv.className = 'search-result-section';\n                    sectionDiv.textContent = result.section;\n                    resultDiv.appendChild(sectionDiv);\n                    \n                    if (result.snippet) {\n                        const snippetDiv = document.createElement('div');\n                        snippetDiv.className = 'search-result-snippet';\n                        snippetDiv.innerHTML = result.snippet;\n                        resultDiv.appendChild(snippetDiv);\n                    }\n                    \n                    resultsHtml += resultDiv.outerHTML;\n                });\n                \n                searchResultsList.innerHTML = resultsHtml;\n            }\n        }\n        \n        function showContentFromSearch(contentId) {\n            // Clear search and show navigation\n            document.getElementById('search-input').value = '';\n            document.getElementById('search-results').style.display = 'none';\n            document.getElementById('navigation-container').style.display = 'block';\n            \n            // Show the content directly using the combined ID\n            showContent(contentId);\n        }\n\n        // Handle browser back/forward navigation\n        window.addEventListener('popstate', function(event) {\n            if (event.state && event.state.contentId) {\n                // Show content without updating URL (to avoid infinite loop)\n                showContent(event.state.contentId, false);\n            } else if (event.state && event.state.page === 'homepage') {\n                showHomepage();\n            } else {\n                // Check URL hash for content ID\n                loadFromUrl();\n            }\n        });\n\n        // Load content based on URL on page load\n        function loadFromUrl() {\n            const hash = window.location.hash.substring(1); // Remove the # symbol\n            \n            if (hash) {\n                // Decode URL-encoded hash (handles %23 -> #)\n                const decodedHash = decodeURIComponent(hash);\n                \n                // Check if this is a header link (contains # in the decoded version)\n                const hashParts = decodedHash.split('#');\n                if (hashParts.length === 2) {\n                    const [contentId, headerId] = hashParts;\n                    if (document.getElementById(contentId)) {\n                        showContent(contentId, false, headerId);\n                        return;\n                    }\n                } else {\n                    // Regular content ID\n                    if (document.getElementById(decodedHash)) {\n                        showContent(decodedHash, false);\n                        return;\n                    }\n                }\n                \n                // If hash doesn't match any content, show homepage\n                showHomepage();\n            } else {\n                // No hash - show homepage\n                showHomepage();\n            }\n        }\n\n        // Handle navigation link clicks\n        document.addEventListener('click', function(event) {\n            const navLink = event.target.closest('.nav-link[data-content-id]');\n            \n            if (navLink) {\n                event.preventDefault();\n                const contentId = navLink.getAttribute('data-content-id');\n                showContent(contentId);\n            }\n        });\n\n        // Handle TOC mobile toggle\n        document.addEventListener('click', function(event) {\n            const tocHeader = event.target.closest('.toc-header');\n            \n            if (tocHeader && window.innerWidth <= 768) {\n                const tocContainer = tocHeader.closest('.table-of-contents');\n                if (tocContainer) {\n                    tocContainer.classList.toggle('collapsed');\n                }\n            }\n        });\n\n        // Load content on initial page load\n        document.addEventListener('DOMContentLoaded', function() {\n            loadFromUrl();\n        });\n\n        // Close sidebar when clicking outside on mobile\n        document.addEventListener('click', function(event) {\n            const sidebar = document.getElementById('sidebar');\n            const mobileToggle = document.querySelector('.mobile-menu-toggle');\n            \n            if (window.innerWidth <= 768 && \n                sidebar.classList.contains('visible') && \n                !sidebar.contains(event.target) && \n                !mobileToggle.contains(event.target)) {\n                sidebar.classList.remove('visible');\n            }\n        });\n    </script>\n</body>\n</html>"
[INFO] [stdout] stack backtrace:
[INFO] [stdout]    0:     0x63eaa6fee802 - std[840933623431fd06]::backtrace_rs::backtrace::libunwind::trace
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/../../backtrace/src/backtrace/libunwind.rs:117:9
[INFO] [stdout]    1:     0x63eaa6fee802 - std[840933623431fd06]::backtrace_rs::backtrace::trace_unsynchronized::<std[840933623431fd06]::sys::backtrace::_print_fmt::{closure#1}>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/../../backtrace/src/backtrace/mod.rs:66:14
[INFO] [stdout]    2:     0x63eaa6fee802 - std[840933623431fd06]::sys::backtrace::_print_fmt
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/sys/backtrace.rs:74:9
[INFO] [stdout]    3:     0x63eaa6fee802 - <<std[840933623431fd06]::sys::backtrace::BacktraceLock>::print::DisplayBacktrace as core[8f93d80df273fe75]::fmt::Display>::fmt
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/sys/backtrace.rs:44:26
[INFO] [stdout]    4:     0x63eaa700609a - <core[8f93d80df273fe75]::fmt::rt::Argument>::fmt
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/fmt/rt.rs:152:76
[INFO] [stdout]    5:     0x63eaa700609a - core[8f93d80df273fe75]::fmt::write
[INFO] [stdout]    6:     0x63eaa6ff3696 - std[840933623431fd06]::io::default_write_fmt::<alloc[40b2bae28975ac47]::vec::Vec<u8>>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/io/mod.rs:639:11
[INFO] [stdout]    7:     0x63eaa6ff3696 - <alloc[40b2bae28975ac47]::vec::Vec<u8> as std[840933623431fd06]::io::Write>::write_fmt
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/io/mod.rs:1994:13
[INFO] [stdout]    8:     0x63eaa6fcc7af - <std[840933623431fd06]::sys::backtrace::BacktraceLock>::print
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/sys/backtrace.rs:47:9
[INFO] [stdout]    9:     0x63eaa6fcc7af - std[840933623431fd06]::panicking::default_hook::{closure#0}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:292:27
[INFO] [stdout]   10:     0x63eaa6fe6799 - std[840933623431fd06]::panicking::default_hook
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:316:9
[INFO] [stdout]   11:     0x63eaa6caf56e - <alloc[40b2bae28975ac47]::boxed::Box<dyn for<'a, 'b> core[8f93d80df273fe75]::ops::function::Fn<(&'a std[840933623431fd06]::panic::PanicHookInfo<'b>,), Output = ()> + core[8f93d80df273fe75]::marker::Sync + core[8f93d80df273fe75]::marker::Send> as core[8f93d80df273fe75]::ops::function::Fn<(&std[840933623431fd06]::panic::PanicHookInfo,)>>::call
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/alloc/src/boxed.rs:2220:9
[INFO] [stdout]   12:     0x63eaa6caf56e - test[2f1252070343a163]::test_main_with_exit_callback::<test[2f1252070343a163]::test_main::{closure#0}>::{closure#0}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/test/src/lib.rs:145:21
[INFO] [stdout]   13:     0x63eaa6fe6952 - <alloc[40b2bae28975ac47]::boxed::Box<dyn for<'a, 'b> core[8f93d80df273fe75]::ops::function::Fn<(&'a std[840933623431fd06]::panic::PanicHookInfo<'b>,), Output = ()> + core[8f93d80df273fe75]::marker::Sync + core[8f93d80df273fe75]::marker::Send> as core[8f93d80df273fe75]::ops::function::Fn<(&std[840933623431fd06]::panic::PanicHookInfo,)>>::call
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/alloc/src/boxed.rs:2220:9
[INFO] [stdout]   14:     0x63eaa6fe6952 - std[840933623431fd06]::panicking::panic_with_hook
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:833:13
[INFO] [stdout]   15:     0x63eaa6fcc868 - std[840933623431fd06]::panicking::panic_handler::{closure#0}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:698:13
[INFO] [stdout]   16:     0x63eaa6fc4139 - std[840933623431fd06]::sys::backtrace::__rust_end_short_backtrace::<std[840933623431fd06]::panicking::panic_handler::{closure#0}, !>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/sys/backtrace.rs:182:18
[INFO] [stdout]   17:     0x63eaa6fcd6bd - __rustc[5b4a0c6d8cc4a177]::rust_begin_unwind
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:689:5
[INFO] [stdout]   18:     0x63eaa700685c - core[8f93d80df273fe75]::panicking::panic_fmt
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/panicking.rs:80:14
[INFO] [stdout]   19:     0x63eaa7006773 - core[8f93d80df273fe75]::panicking::assert_failed_inner
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/panicking.rs:434:23
[INFO] [stdout]   20:     0x63eaa6c35a71 - core[8f93d80df273fe75]::panicking::assert_failed::<&str, &str>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/panicking.rs:394:5
[INFO] [stdout]   21:     0x63eaa6c3f6d1 - glowdoc[92d60e7e48fc57a6]::tests::test_generated_index_matches_current
[INFO] [stdout]                                at /opt/rustwide/workdir/src/main.rs:1081:9
[INFO] [stdout]   22:     0x63eaa6c3c9a7 - glowdoc[92d60e7e48fc57a6]::tests::test_generated_index_matches_current::{closure#0}
[INFO] [stdout]                                at /opt/rustwide/workdir/src/main.rs:1047:46
[INFO] [stdout]   23:     0x63eaa6c3a186 - <glowdoc[92d60e7e48fc57a6]::tests::test_generated_index_matches_current::{closure#0} as core[8f93d80df273fe75]::ops::function::FnOnce<()>>::call_once
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/ops/function.rs:250:5
[INFO] [stdout]   24:     0x63eaa6ca391b - <fn() -> core[8f93d80df273fe75]::result::Result<(), alloc[40b2bae28975ac47]::string::String> as core[8f93d80df273fe75]::ops::function::FnOnce<()>>::call_once
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/ops/function.rs:250:5
[INFO] [stdout]   25:     0x63eaa6ca391b - test[2f1252070343a163]::__rust_begin_short_backtrace::<core[8f93d80df273fe75]::result::Result<(), alloc[40b2bae28975ac47]::string::String>, fn() -> core[8f93d80df273fe75]::result::Result<(), alloc[40b2bae28975ac47]::string::String>>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/test/src/lib.rs:663:18
[INFO] [stdout]   26:     0x63eaa6cb017a - test[2f1252070343a163]::run_test_in_process::{closure#0}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/test/src/lib.rs:686:74
[INFO] [stdout]   27:     0x63eaa6cb017a - <core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<test[2f1252070343a163]::run_test_in_process::{closure#0}> as core[8f93d80df273fe75]::ops::function::FnOnce<()>>::call_once
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/panic/unwind_safe.rs:274:9
[INFO] [stdout]   28:     0x63eaa6cb017a - std[840933623431fd06]::panicking::catch_unwind::do_call::<core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<test[2f1252070343a163]::run_test_in_process::{closure#0}>, core[8f93d80df273fe75]::result::Result<(), alloc[40b2bae28975ac47]::string::String>>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:581:40
[INFO] [stdout]   29:     0x63eaa6cb017a - std[840933623431fd06]::panicking::catch_unwind::<core[8f93d80df273fe75]::result::Result<(), alloc[40b2bae28975ac47]::string::String>, core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<test[2f1252070343a163]::run_test_in_process::{closure#0}>>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:544:19
[INFO] [stdout]   30:     0x63eaa6cb017a - std[840933623431fd06]::panic::catch_unwind::<core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<test[2f1252070343a163]::run_test_in_process::{closure#0}>, core[8f93d80df273fe75]::result::Result<(), alloc[40b2bae28975ac47]::string::String>>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panic.rs:359:14
[INFO] [stdout]   31:     0x63eaa6cb017a - test[2f1252070343a163]::run_test_in_process
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/test/src/lib.rs:686:27
[INFO] [stdout]   32:     0x63eaa6cb017a - test[2f1252070343a163]::run_test::{closure#0}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/test/src/lib.rs:607:43
[INFO] [stdout]   33:     0x63eaa6caa644 - test[2f1252070343a163]::run_test::{closure#1}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/test/src/lib.rs:637:41
[INFO] [stdout]   34:     0x63eaa6caa644 - std[840933623431fd06]::sys::backtrace::__rust_begin_short_backtrace::<test[2f1252070343a163]::run_test::{closure#1}, ()>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/sys/backtrace.rs:166:18
[INFO] [stdout]   35:     0x63eaa6cb2c72 - std[840933623431fd06]::thread::lifecycle::spawn_unchecked::<test[2f1252070343a163]::run_test::{closure#1}, ()>::{closure#1}::{closure#0}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/thread/lifecycle.rs:91:13
[INFO] [stdout]   36:     0x63eaa6cb2c72 - <core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<std[840933623431fd06]::thread::lifecycle::spawn_unchecked<test[2f1252070343a163]::run_test::{closure#1}, ()>::{closure#1}::{closure#0}> as core[8f93d80df273fe75]::ops::function::FnOnce<()>>::call_once
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/panic/unwind_safe.rs:274:9
[INFO] [stdout]   37:     0x63eaa6cb2c72 - std[840933623431fd06]::panicking::catch_unwind::do_call::<core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<std[840933623431fd06]::thread::lifecycle::spawn_unchecked<test[2f1252070343a163]::run_test::{closure#1}, ()>::{closure#1}::{closure#0}>, ()>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:581:40
[INFO] [stdout]   38:     0x63eaa6cb2c72 - std[840933623431fd06]::panicking::catch_unwind::<(), core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<std[840933623431fd06]::thread::lifecycle::spawn_unchecked<test[2f1252070343a163]::run_test::{closure#1}, ()>::{closure#1}::{closure#0}>>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panicking.rs:544:19
[INFO] [stdout]   39:     0x63eaa6cb2c72 - std[840933623431fd06]::panic::catch_unwind::<core[8f93d80df273fe75]::panic::unwind_safe::AssertUnwindSafe<std[840933623431fd06]::thread::lifecycle::spawn_unchecked<test[2f1252070343a163]::run_test::{closure#1}, ()>::{closure#1}::{closure#0}>, ()>
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/panic.rs:359:14
[INFO] [stdout]   40:     0x63eaa6cb2c72 - std[840933623431fd06]::thread::lifecycle::spawn_unchecked::<test[2f1252070343a163]::run_test::{closure#1}, ()>::{closure#1}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/thread/lifecycle.rs:89:26
[INFO] [stdout]   41:     0x63eaa6cb2c72 - <std[840933623431fd06]::thread::lifecycle::spawn_unchecked<test[2f1252070343a163]::run_test::{closure#1}, ()>::{closure#1} as core[8f93d80df273fe75]::ops::function::FnOnce<()>>::call_once::{shim:vtable#0}
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/core/src/ops/function.rs:250:5
[INFO] [stdout]   42:     0x63eaa6fedd0f - <alloc[40b2bae28975ac47]::boxed::Box<dyn core[8f93d80df273fe75]::ops::function::FnOnce<(), Output = ()> + core[8f93d80df273fe75]::marker::Send> as core[8f93d80df273fe75]::ops::function::FnOnce<()>>::call_once
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/alloc/src/boxed.rs:2206:9
[INFO] [stdout]   43:     0x63eaa6fedd0f - <std[840933623431fd06]::sys::thread::unix::Thread>::new::thread_start
[INFO] [stdout]                                at /rustc/bd7d74411512a3dd3b35d2f699c51dd2557c7e7e/library/std/src/sys/thread/unix.rs:119:17
[INFO] [stdout]   44:     0x724ddfdacaa4 - <unknown>
[INFO] [stdout]   45:     0x724ddfe39a64 - clone
[INFO] [stdout]   46:                0x0 - <unknown>
[INFO] [stdout] 
[INFO] [stdout] 
[INFO] [stdout] failures:
[INFO] [stdout]     tests::test_generated_index_matches_current
[INFO] [stdout] 
[INFO] [stdout] test result: FAILED. 0 passed; 1 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.13s
[INFO] [stdout] 
[INFO] [stderr] error: test failed, to rerun pass `--bin glowdoc`
[INFO] running `Command { std: "docker" "inspect" "6426f24c110d692e272954eb5187a0cb0e6ac5cbf5563315aca603e412d8e936", kill_on_drop: false }`
[INFO] running `Command { std: "docker" "rm" "-f" "6426f24c110d692e272954eb5187a0cb0e6ac5cbf5563315aca603e412d8e936", kill_on_drop: false }`
[INFO] [stdout] 6426f24c110d692e272954eb5187a0cb0e6ac5cbf5563315aca603e412d8e936
