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.

3.9 KiB Raw Blame History