website created

2026-06-01 20:01:15 +02:00
commit d8b622860c
15 changed files with 1830 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,125 @@
+# 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>.