better for prod
This commit is contained in:
Priec
@@ -114,7 +114,7 @@
|
||||
</nav>
|
||||
<p class="text-sm font-medium text-accent uppercase tracking-widest">Examples</p>
|
||||
<h1 class="mt-3 text-4xl sm:text-5xl font-bold tracking-tight text-zinc-50">
|
||||
Three apps in the box.
|
||||
Rich examples out of the box.
|
||||
</h1>
|
||||
<p class="mt-4 text-lg text-zinc-300 max-w-2xl">
|
||||
Each example is a standalone <code class="font-mono text-zinc-200">cargo</code> project under <code class="font-mono text-zinc-200">examples/</code> in the repo. Clone, run, read, fork.
|
||||
@@ -149,21 +149,7 @@
|
||||
A multi-page app with a focusable list, page navigation, and quit. The minimal end-to-end example — the one to read first to understand the architecture.
|
||||
</p>
|
||||
|
||||
<h3 class="mt-6 text-sm font-semibold uppercase tracking-widest text-zinc-400">Run it</h3>
|
||||
<div
|
||||
x-data="{ copied: false }"
|
||||
class="mt-2 inline-flex items-stretch w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-950/80 overflow-hidden font-mono text-sm"
|
||||
>
|
||||
<code class="px-3 py-2.5 text-zinc-100 whitespace-nowrap">cargo run --example default</code>
|
||||
<button type="button"
|
||||
@click="navigator.clipboard.writeText('cargo run --example default').then(() => { copied = true; setTimeout(() => copied = false, 1400) })"
|
||||
class="ml-auto px-3 border-l border-zinc-800 text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<svg x-show="!copied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<svg x-show="copied" x-cloak width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span x-text="copied ? 'Copied' : 'Copy'" class="text-xs"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="mt-6 text-sm font-semibold uppercase tracking-widest text-zinc-400">What it shows</h3>
|
||||
<ul class="mt-2 space-y-1.5 text-sm text-zinc-300">
|
||||
@@ -209,22 +195,6 @@
|
||||
A login form with validated inputs, a submit button, and a canvas-owned keymap. Demonstrates the <code class="font-mono text-zinc-200">canvas</code> feature flag: GUI renderers, suggestions, cursor style, validation, computed fields, textareas, and text inputs.
|
||||
</p>
|
||||
|
||||
<h3 class="mt-6 text-sm font-semibold uppercase tracking-widest text-zinc-400">Run it</h3>
|
||||
<div
|
||||
x-data="{ copied: false }"
|
||||
class="mt-2 inline-flex items-stretch w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-950/80 overflow-hidden font-mono text-sm"
|
||||
>
|
||||
<code class="px-3 py-2.5 text-zinc-100 whitespace-nowrap">cargo run --example canvas --features canvas</code>
|
||||
<button type="button"
|
||||
@click="navigator.clipboard.writeText('cargo run --example canvas --features canvas').then(() => { copied = true; setTimeout(() => copied = false, 1400) })"
|
||||
class="ml-auto px-3 border-l border-zinc-800 text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<svg x-show="!copied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<svg x-show="copied" x-cloak width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span x-text="copied ? 'Copied' : 'Copy'" class="text-xs"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-6 text-sm font-semibold uppercase tracking-widest text-zinc-400">What it shows</h3>
|
||||
<ul class="mt-2 space-y-1.5 text-sm text-zinc-300">
|
||||
<li class="flex gap-2"><span class="text-accent">▸</span> Field-level focus with <span class="tp-kbd">tab</span> / <span class="tp-kbd">shift+tab</span></li>
|
||||
@@ -269,21 +239,6 @@
|
||||
A modal showing all keybindings, opened with <span class="tp-kbd">?</span>. Demonstrates the built-in <code class="font-mono text-zinc-200">dialog</code> feature: content and result types, plus a ratatui renderer.
|
||||
</p>
|
||||
|
||||
<h3 class="mt-6 text-sm font-semibold uppercase tracking-widest text-zinc-400">Run it</h3>
|
||||
<div
|
||||
x-data="{ copied: false }"
|
||||
class="mt-2 inline-flex items-stretch w-full max-w-md rounded-lg border border-zinc-800 bg-zinc-950/80 overflow-hidden font-mono text-sm"
|
||||
>
|
||||
<code class="px-3 py-2.5 text-zinc-100 whitespace-nowrap">cargo run --example keybindings --features dialog</code>
|
||||
<button type="button"
|
||||
@click="navigator.clipboard.writeText('cargo run --example keybindings --features dialog').then(() => { copied = true; setTimeout(() => copied = false, 1400) })"
|
||||
class="ml-auto px-3 border-l border-zinc-800 text-zinc-400 hover:text-white hover:bg-zinc-900 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<svg x-show="!copied" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
|
||||
<svg x-show="copied" x-cloak width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
|
||||
<span x-text="copied ? 'Copied' : 'Copy'" class="text-xs"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-6 text-sm font-semibold uppercase tracking-widest text-zinc-400">What it shows</h3>
|
||||
<ul class="mt-2 space-y-1.5 text-sm text-zinc-300">
|
||||
|
||||
12
index.html
12
index.html
@@ -8,7 +8,8 @@
|
||||
<meta name="theme-color" content="#fafafa" media="(prefers-color-scheme: light)">
|
||||
|
||||
<title>tui-pages — a framework for building TUIs in Rust</title>
|
||||
<meta name="description" content="A complete framework for building TUIs in Rust on top of ratatui. Pre-programmed focus manager, input pipeline, keymaps, and page navigation. Stop rewriting the same architecture for every project.">
|
||||
<meta name="description" content="A complete UX framework for building TUIs in Rust. Stop rewriting the same architecture for every project.">
|
||||
|
||||
<meta name="keywords" content="rust, tui, ratatui, terminal, framework, ui, cargo, crate">
|
||||
<meta name="author" content="Filip Riečický">
|
||||
|
||||
@@ -26,7 +27,8 @@
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="tui-pages — a framework for building TUIs in Rust">
|
||||
<meta name="twitter:description" content="Pre-programmed focus, keymaps, and page navigation. Stop rewriting the same architecture for every TUI project.">
|
||||
<meta name="twitter:description" content="UX for TUIs in Rust. Stop rewriting the same architecture for every project.">
|
||||
|
||||
<meta name="twitter:image" content="/static/img/og-image.svg">
|
||||
|
||||
<!-- Preconnect -->
|
||||
@@ -208,7 +210,7 @@
|
||||
</h1>
|
||||
|
||||
<p class="mt-6 text-lg text-zinc-300 max-w-xl leading-relaxed">
|
||||
<code class="font-mono text-accent">tui-pages</code> gives you a pre-programmed focus manager, input pipeline, keymaps, and page navigation on top of <a href="https://ratatui.rs" class="text-zinc-100 underline decoration-zinc-700 underline-offset-4 hover:decoration-accent">ratatui</a>. Stop rewriting the same architecture for every project.
|
||||
<code class="font-mono text-accent">tui-pages</code> gives you full UX you would ever need. Stop rewriting the same architecture for every project.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 flex flex-wrap items-center gap-3">
|
||||
@@ -568,8 +570,8 @@ pub fn keymaps() -> KeyMap {
|
||||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||||
<div class="max-w-2xl">
|
||||
<p class="text-sm font-medium text-accent uppercase tracking-widest">Examples</p>
|
||||
<h2 class="mt-3 text-3xl sm:text-4xl font-bold tracking-tight text-zinc-50">Three apps in the box.</h2>
|
||||
<p class="mt-4 text-lg text-zinc-400 leading-relaxed">Each one is a full <code class="font-mono text-zinc-300">cargo run</code> away. Read the source, run it, fork it.</p>
|
||||
<h2 class="mt-3 text-3xl sm:text-4xl font-bold tracking-tight text-zinc-50">Rich examples.</h2>
|
||||
<p class="mt-4 text-lg text-zinc-400 leading-relaxed">Each one is a simple <code class="font-mono text-zinc-300">cargo run</code> away. Read the source, run it, copy it.</p>
|
||||
</div>
|
||||
<a href="/examples.html" class="inline-flex items-center gap-1.5 text-sm text-zinc-300 hover:text-white">
|
||||
All examples
|
||||
|
||||
Reference in New Issue
Block a user