126 lines
3.9 KiB
Markdown
126 lines
3.9 KiB
Markdown
# tui-pages website
|
|
|
|
Static marketing site for the [`tui-pages`](https://gitlab.com/filipriec/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
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
```bash
|
|
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**:
|
|
|
|
```bash
|
|
# 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:
|
|
|
|
1. Record one of the examples:
|
|
|
|
```bash
|
|
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
|
|
```
|
|
|
|
2. In `index.html`, replace the hero terminal block with:
|
|
|
|
```html
|
|
<div class="tp-terminal">
|
|
<asciinema-player src="/static/demos/intro.cast" autoplay loop></asciinema-player>
|
|
</div>
|
|
```
|
|
|
|
3. Add the asciinema player to the `<head>`:
|
|
|
|
```html
|
|
<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>.
|