tui-pages website
Static marketing site for the tui-pages Rust crate.
No build step required — open index.html in a browser and you're done.
Stack
| Layer | Tech | Source |
|---|---|---|
| HTML | Hand-written semantic | *.html |
| CSS framework | Tailwind CSS v3 (Play CDN) | runtime |
| Components | DaisyUI v4 (prebuilt CSS) | runtime |
| Interactivity | HTMX 2 | runtime |
| Light JS | Alpine.js 3 | runtime |
| Code highlight | highlight.js 11 (Rust, TOML, Bash) | runtime |
| Fonts | Inter + JetBrains Mono (Google Fonts) | runtime |
| Icons | Lucide (inline SVG) | hand-written |
| Page transitions | View Transitions API (native) | n/a |
Everything is loaded from public CDNs. The only thing served from this repo is
the HTML, our small static/css/site.css layer, and the SVG assets in
static/img/.
Local development
# Just open the file
xdg-open index.html # Linux
open index.html # macOS
# Or serve it (recommended — gives you a stable URL for htmx)
python3 -m http.server 8000
# then visit http://localhost:8000
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)
Going to production
The CDN approach is fine for marketing pages. For better performance (smaller CSS, no runtime Tailwind compile), swap the Play CDN for the Tailwind standalone CLI:
# 1. Download the standalone CLI
# https://tailwindcss.com/blog/standalone-cli
# 2. Put the binary in ./bin/tailwindcss
# 3. Create src/site.css that imports Tailwind and DaisyUI:
# @import "tailwindcss";
# @plugin "daisyui";
# 4. Build
./bin/tailwindcss -i src/site.css -o static/css/site.css --minify
Then in index.html remove the Tailwind Play CDN <script> and the DaisyUI
<link>, and ensure /static/css/site.css is loaded last in <head>.
File layout
tui-pages-web/
├── index.html # landing page
├── examples.html # examples gallery
├── 404.html # not found
├── robots.txt # search engine hints
├── sitemap.xml # sitemap
├── static/
│ ├── css/
│ │ └── site.css # our custom layer (small)
│ ├── img/
│ │ ├── favicon.svg
│ │ ├── logo.svg
│ │ ├── og-image.svg
│ │ ├── terminal-default.svg
│ │ ├── terminal-canvas.svg
│ │ └── terminal-keybindings.svg
│ └── demos/ # (empty — drop asciinema .cast files here)
├── content/ # (empty — markdown for blog/changelog later)
├── Makefile
├── .gitignore
└── README.md
Adding an asciinema demo to the hero
The hero currently shows a static SVG terminal mockup. To replace it with a real asciinema recording:
-
Record one of the examples:
cd ../komp_ac/tui-pages/examples/default asciinema rec ../../tui-pages-web/static/demos/intro.cast # ... run the app for a few seconds, hit ctrl-d to stop -
In
index.html, replace the hero terminal block with:<div class="tp-terminal"> <asciinema-player src="/static/demos/intro.cast" autoplay loop></asciinema-player> </div> -
Add the asciinema player to the
<head>:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asciinema-player@3.7.0/dist/bundle/asciinema-player.css"> <script src="https://cdn.jsdelivr.net/npm/asciinema-player@3.7.0/dist/bundle/asciinema-player.js" defer></script>
License
The website source is MIT-licensed. The terminal mockup SVGs in static/img/
are hand-drawn and original. The crate itself is at
https://gitlab.com/filipriec/tui-pages.