how-to-live-better

### Tech Review: how-to-live-better If you are tired of modern web applications inflated with heavy JS frameworks and massive `node_modules` bundles just to render static text, `how-to-live-better` is a refreshing breath of minimalist engineering. It serves as a zero-dependency, self-contained single-file HTML reader designed to render the 32 sections and 528 tips from the open-source book *How To Live Better* (maintained by `eternity4719/HowToLiveBetter`). #### Architectural Design & Client Mechanics The primary design principle of this project is absolute offline usability. The generated `index.html` file requires zero runtime fetches, no CDN dependencies, and no remote font stylesheets. Once opened, it operates air-gapped without relying on an active internet connection. Key front-end features include: * Structured Content Rendering: Displays tips as discrete cards with advice titles, evidence levels (A/B/C), cost-performance tiers, and cost tags. The "plain language" (说人话) section—which translates statistical findings into everyday language—is styled with top visual priority. * In-Memory Search & Filtering: Provides a full-text search feature complete with keyword highlighting. Users can isolate content with quick filters to view only Grade A evidence or "plain language" blocks. * Viewport Adaptations: Includes a left-side table of contents marked with color-coded cost-performance dots that sync dynamically as you scroll. On mobile viewports, the search bar moves to a dedicated row, the header collapses into a single line during down-scrolls, and a back-to-top button activates. * Theme & Print Styles: Supports dark and light mode toggles along with native CSS print optimizations. #### The Build Pipeline Under the Hood Rather than maintaining a separate content fork, the repository operates strictly as a build transformer. A Python script (`build.py`) ingests raw Markdown files from a local clone of the upstream repository and outputs a single compiled HTML asset. It maintains strict data parity with the upstream project's `tools/sync-stats.ps1` script for entry counts, grading, and tier classifications. To run the generator locally, execute the following commands: ```bash # Clone a shallow copy of the upstream content repository git clone --depth 1 https://github.com/eternity4719/HowToLiveBetter.git /tmp/upstream # Build all 32 sections into a single HTML file python build.py all -o index.html --repo /tmp/upstream # Alternatively, compile specific sections (e.g., sections 1, 2, and 16) python build.py 1 2 16 --repo /tmp/upstream ``` You can also point `build.py` to your upstream content directory by setting the `HLTB_REPO` environment variable. #### CI/CD Automation Automated updates are configured via `.github/workflows/rebuild.yml`. A scheduled GitHub Action runs daily at 06:00 (Beijing Time) to fetch changes from the upstream repository, execute the build pipeline, and commit the updated `index.html` only when file diffs exist. Manual execution via GitHub Actions workflow dispatch is also enabled. #### Final Takeaway This project is a solid example of how static site generator tools should be built: decouple UI rendering from source content, drop unnecessary runtime JavaScript dependencies, and deliver a fast, single-file artifact under the Unlicense.