erase background

2026-06-01 22:47:24 +02:00
parent d8b622860c
commit 99f255fc29
11 changed files with 562 additions and 21 deletions
--- a/README.md
+++ b/README.md
@@ -39,8 +39,104 @@ The `Makefile` wraps the Python server and a few convenience commands:
 make serve      # python3 -m http.server 8000
 make size       # report file sizes
 make validate   # quick HTML syntax check (search for unclosed tags)
+make tidy       # run html-tidy on every .html (warnings only)
+make ascii      # regenerate the body-rain ASCII art (needs `chafa`)
 ```

+## Animated ASCII body background
+
+The page background is **animated ASCII art** generated by
+[`chafa`](https://github.com/hpjansson/chafa) from a stripped-down version
+of the Open Graph card (`static/img/og-image-bg.svg` — black background,
+grid, the `tui-pages` wordmark, the "A framework for / building TUIs in
+Rust." headline, and the subtitle, with the install button cropped out
+because chafa was rendering it as a row of `@` symbols). The art is plain
+text inside `<pre>` blocks; the animation is pure CSS.
+
+```
+static/ascii/rain.txt     ← 240 × ~50 grid of og-image-bg.svg
+```
+
+To re-render after changing the source SVG (you need `chafa` on `$PATH`,
+or run inside `nix develop`):
+
+```bash
+make ascii
+```
+
+The source SVG is committed (`static/img/og-image-bg.svg`) so `make ascii`
+is fully reproducible — no ImageMagick, no cropping step.
+
+### How it's wired
+
+- A single `<div class="tp-ascii-rain" aria-hidden="true">` is placed at
+  the top of `<body>`, fixed full-bleed, with `z-index: -1` and
+  `pointer-events: none` so it never blocks the UI.
+- Inside, a `<pre class="tp-ascii-rain-track">` holds **two byte-identical
+  copies** of the chafa output stacked vertically for a seamless
+  `translateY(0 → -50%)` loop over 90 s.
+- Color is `#f4a26b` (warm rust-orange) at 14% opacity with a faint
+  `text-shadow` glow — picks up the brand colour and reads as a subtle
+  background, not a wall of `@` blocks.
+- A `::after` overlay draws a 2 px CRT scanline pattern that ticks
+  downward at 8 s/cycle.
+- The hero section has a `.tp-ascii-hero-overlay` class that paints a
+  vertical gradient over the top of the page, so the hero text stays
+  readable while the ASCII art shows through on the bottom half and below.
+- The light theme inverts to dark text on light, dimmer, no glow.
+- All animations are disabled inside
+  `@media (prefers-reduced-motion: reduce)`.
+
+The hero (`#hero`) is **not** animated — it keeps the original static
+`static/img/terminal-default.svg` mockup, exactly as designed.
+
+## Nix (optional, recommended)
+
+A `flake.nix` is included that ships a reproducible dev shell, a buildable
+package, a `serve` app, and an `html-tidy` check. You do **not** need Nix to
+use this project — it's a convenience.
+
+```bash
+# Enter the dev shell (gives you: gnumake, python3, asciinema, html-tidy, …)
+nix develop
+
+# Build the whole site → ./result/  (16 files, ~150 kB, ready to upload)
+nix build
+ls result/
+
+# Build + serve on http://localhost:8000  (or $PORT)
+nix run .#serve
+
+# Validate the HTML, format the flake
+nix flake check
+nix fmt
+```
+
+### What the flake provides
+
+| Output | Command | What it does |
+| --- | --- | --- |
+| `packages.<sys>.default` | `nix build` | Assembles the static site into a single derivation |
+| `apps.<sys>.serve` | `nix run .#serve` | Builds the package, then `python3 -m http.server` it |
+| `devShells.<sys>.default` | `nix develop` | Shell with `make`, `python3`, `asciinema`, `tidy`, `curl` |
+| `checks.<sys>.tidy` | `nix flake check` | Runs `html-tidy` over every `.html` in the built site |
+| `formatter.<sys>` | `nix fmt` | `nixpkgs-fmt` for the flake itself |
+
+### Why no Rust toolchain?
+
+The crate lives in `../komp_ac/tui-pages/`. This repo only contains the
+*static* website, so the flake intentionally omits `rust-overlay` and a
+`rustPlatform` — they would add hundreds of MB to the shell closure for
+nothing. When the site eventually gains a Rust backend, those inputs come
+back.
+
+### Why the per-system pattern?
+
+Mirrored from the upstream Codex CLI flake so future contributors see a
+shape they already recognise. `forAllSystems` is a one-liner that
+guarantees `linux`/`darwin` × `x86_64`/`aarch64` parity without sprinkling
+`if` branches across the file.
+
 ## Going to production

 The CDN approach is fine for marketing pages. For better performance
@@ -75,16 +171,22 @@ tui-pages-web/
 ├── sitemap.xml             # sitemap
 ├── static/
 │   ├── css/
-│   │   └── site.css        # our custom layer (small)
+│   │   ├── site.css        # our custom layer (small)
+│   │   └── ascii.css       # animation rules for the body-rain ASCII art
 │   ├── img/
 │   │   ├── favicon.svg
 │   │   ├── logo.svg
-│   │   ├── og-image.svg
+│   │   ├── og-image.svg        # 1200x630 social share card (used as-is)
+│   │   ├── og-image-bg.svg     # 1200x500 cropped variant (chafa source)
 │   │   ├── terminal-default.svg
 │   │   ├── terminal-canvas.svg
 │   │   └── terminal-keybindings.svg
+│   ├── ascii/
+│   │   └── rain.txt        # chafa render of og-image-bg.svg
 │   └── demos/              # (empty — drop asciinema .cast files here)
 ├── content/                # (empty — markdown for blog/changelog later)
+├── flake.nix               # Nix dev shell, package, app, checks
+├── flake.lock              # (generated — pinned nixpkgs)
 ├── Makefile
 ├── .gitignore
 └── README.md
@@ -92,8 +194,9 @@ tui-pages-web/

 ## Adding an asciinema demo to the hero

-The hero currently shows a static SVG terminal mockup. To replace it with a
-real asciinema recording:
+The hero currently shows the **static SVG mockup**
+`static/img/terminal-default.svg`. To replace it with a real asciinema
+recording (much more impressive, but requires a recorded cast):

 1. Record one of the examples:

@@ -103,7 +206,8 @@ real asciinema recording:
   # ... run the app for a few seconds, hit ctrl-d to stop
   ```

-2. In `index.html`, replace the hero terminal block with:
+2. In `index.html`, replace the `<!-- Hero terminal mockup -->` block
+   with:

   ```html
   <div class="tp-terminal">
@@ -118,6 +222,8 @@ real asciinema recording:
   <script src="https://cdn.jsdelivr.net/npm/asciinema-player@3.7.0/dist/bundle/asciinema-player.js" defer></script>
   ```

+The body-rain ASCII art is independent of the hero and stays as-is.
+
 ## License

 The website source is MIT-licensed. The terminal mockup SVGs in `static/img/`