259 lines
12 KiB
Svelte
259 lines
12 KiB
Svelte
<script lang="ts">
|
|
import TerminalVisualizer from '$lib/components/terminal-visualizer.svelte';
|
|
import { onMount } from 'svelte';
|
|
|
|
// State for the layout configurator
|
|
let layout = $state({ type: 'pane', id: 0 });
|
|
let nextId = 1;
|
|
let activePaneId = $state(0);
|
|
let generatedConfig = $state('');
|
|
|
|
function splitPane(direction: 'h' | 'v') {
|
|
// Find the active pane in the tree and replace it with a split
|
|
const newLayout = JSON.parse(JSON.stringify(layout));
|
|
|
|
function findAndSplit(node: any) {
|
|
if (node.type === 'pane') {
|
|
if (node.id === activePaneId) {
|
|
const oldId = node.id;
|
|
const newId = nextId++;
|
|
|
|
// Create new split node
|
|
node.type = direction === 'h' ? 'split-h' : 'split-v';
|
|
node.ratio = 0.5;
|
|
delete node.id;
|
|
node.children = [
|
|
{ type: 'pane', id: oldId },
|
|
{ type: 'pane', id: newId }
|
|
];
|
|
return true;
|
|
}
|
|
return false;
|
|
} else {
|
|
return findAndSplit(node.children[0]) || findAndSplit(node.children[1]);
|
|
}
|
|
}
|
|
|
|
findAndSplit(newLayout);
|
|
layout = newLayout;
|
|
generateTmuxConfig();
|
|
}
|
|
|
|
function resetLayout() {
|
|
layout = { type: 'pane', id: 0 };
|
|
nextId = 1;
|
|
activePaneId = 0;
|
|
generateTmuxConfig();
|
|
}
|
|
|
|
function selectPane(id: number) {
|
|
activePaneId = id;
|
|
}
|
|
|
|
// Simple recursive function to generate tmux commands
|
|
function generateTmuxConfig() {
|
|
let config = `# ~/.tmux.conf setup\n`;
|
|
config += `# Generated by mytmux.life\n\n`;
|
|
config += `new-session -s development -n editor\n`;
|
|
|
|
function traverse(node: any) {
|
|
if (node.type === 'split-h') {
|
|
config += `split-window -h\n`;
|
|
traverse(node.children[1]); // Right child
|
|
config += `select-pane -L\n`; // Go back left
|
|
traverse(node.children[0]); // Left child
|
|
} else if (node.type === 'split-v') {
|
|
config += `split-window -v\n`;
|
|
traverse(node.children[1]); // Bottom child
|
|
config += `select-pane -U\n`; // Go back up
|
|
traverse(node.children[0]); // Top child
|
|
}
|
|
}
|
|
|
|
traverse(layout);
|
|
|
|
config += `\n# Select the initially active pane\n`;
|
|
config += `select-pane -t ${activePaneId}\n`;
|
|
|
|
generatedConfig = config;
|
|
}
|
|
|
|
onMount(() => {
|
|
generateTmuxConfig();
|
|
});
|
|
</script>
|
|
|
|
<div class="flex flex-col gap-16 pb-20">
|
|
|
|
<!-- Hero Section -->
|
|
<section class="container px-4 pt-20 md:pt-32">
|
|
<div class="grid gap-8 md:grid-cols-2 items-center">
|
|
<div class="space-y-6">
|
|
<div class="inline-flex items-center rounded-full border border-primary/50 bg-primary/10 px-3 py-1 text-xs font-medium text-primary">
|
|
<span class="mr-2 h-2 w-2 rounded-full bg-primary animate-pulse"></span>
|
|
SYSTEM ONLINE
|
|
</div>
|
|
<h1 class="text-4xl font-extrabold tracking-tight lg:text-6xl glow-text">
|
|
Master Your <br/>
|
|
<span class="text-primary"><Terminal /></span>
|
|
</h1>
|
|
<p class="text-xl text-muted-foreground max-w-[600px]">
|
|
Stop wasting time switching windows.
|
|
<span class="text-foreground font-bold">mytmux.life</span> helps you architect the perfect terminal development environment.
|
|
</p>
|
|
<div class="flex flex-col sm:flex-row gap-4 pt-4">
|
|
<a href="#configurator" class="inline-flex h-12 items-center justify-center bg-primary text-primary-foreground px-8 text-sm font-medium transition-colors hover:bg-primary/90 hover:shadow-[0_0_20px_rgba(0,255,0,0.5)]">
|
|
INITIALIZE_CONFIG
|
|
</a>
|
|
<a href="#learn" class="inline-flex h-12 items-center justify-center border border-input bg-background px-8 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground">
|
|
READ_MAN_PAGE
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ASCII Art / Decorative Element -->
|
|
<div class="hidden md:block p-6 border border-border bg-card/50 font-mono text-xs leading-none text-muted-foreground select-none overflow-hidden">
|
|
<pre>
|
|
_________________________________________
|
|
/ \
|
|
| root@mytmux:~ $ tmux new -s dev |
|
|
| [0] nvim ---------------- [1] server -- |
|
|
| | | | |
|
|
| | import { life } | npm run | |
|
|
| | from 'tmux'; | dev | |
|
|
| | | | |
|
|
| | // TODO: Sleep | | |
|
|
| |________________________|____________| |
|
|
| [2] logs ------------------------------ |
|
|
| | > ready in 200ms | |
|
|
| | > watching files... | |
|
|
| |_____________________________________| |
|
|
\_________________________________________/
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Configurator Section -->
|
|
<section id="configurator" class="container px-4 py-12">
|
|
<div class="flex flex-col space-y-4 mb-8">
|
|
<h2 class="text-3xl font-bold tracking-tight border-l-4 border-primary pl-4">
|
|
ENVIRONMENT_CONFIGURATOR
|
|
</h2>
|
|
<p class="text-muted-foreground">
|
|
Visually design your session layout. Click actions to split the active pane.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid lg:grid-cols-3 gap-8 h-[600px]">
|
|
<!-- Controls & Output -->
|
|
<div class="flex flex-col gap-6 h-full">
|
|
<div class="p-6 border border-border bg-card space-y-6">
|
|
<h3 class="text-lg font-bold flex items-center gap-2">
|
|
<span class="text-primary">></span> ACTIONS
|
|
</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<button
|
|
onclick={() => splitPane('h')}
|
|
class="h-20 border border-dashed border-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-2"
|
|
>
|
|
<div class="flex gap-1 h-6 w-8 border border-current p-0.5">
|
|
<div class="w-1/2 h-full bg-current/50"></div>
|
|
<div class="w-1/2 h-full border border-current"></div>
|
|
</div>
|
|
<span class="text-xs">SPLIT_VERTICAL (%)</span>
|
|
</button>
|
|
<button
|
|
onclick={() => splitPane('v')}
|
|
class="h-20 border border-dashed border-muted-foreground hover:border-primary hover:text-primary hover:bg-primary/5 transition-all flex flex-col items-center justify-center gap-2"
|
|
>
|
|
<div class="flex flex-col gap-1 h-8 w-6 border border-current p-0.5">
|
|
<div class="h-1/2 w-full bg-current/50"></div>
|
|
<div class="h-1/2 w-full border border-current"></div>
|
|
</div>
|
|
<span class="text-xs">SPLIT_HORIZONTAL (")</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="pt-4 border-t border-border">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs text-muted-foreground">ACTIVE_PANE_ID:</span>
|
|
<span class="font-mono text-primary">{activePaneId}</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button
|
|
onclick={resetLayout}
|
|
class="flex-1 py-2 text-xs bg-destructive/10 text-destructive hover:bg-destructive/20 border border-destructive/20"
|
|
>
|
|
RESET_LAYOUT
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1 p-6 border border-border bg-card flex flex-col min-h-0">
|
|
<h3 class="text-lg font-bold flex items-center gap-2 mb-4">
|
|
<span class="text-primary">></span> GENERATED_CONFIG
|
|
</h3>
|
|
<div class="flex-1 bg-black p-4 font-mono text-xs text-muted-foreground overflow-auto border border-border">
|
|
<pre>{generatedConfig}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visualizer Canvas -->
|
|
<div class="lg:col-span-2 h-full border border-border bg-card p-1 relative">
|
|
<div class="absolute top-0 left-0 bg-primary text-black text-[10px] font-bold px-2 py-0.5 z-10">
|
|
CANVAS_RENDER_TARGET
|
|
</div>
|
|
<TerminalVisualizer {layout} {activePaneId} />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Documentation / Info Section -->
|
|
<section id="learn" class="container px-4 py-12">
|
|
<div class="grid md:grid-cols-3 gap-12">
|
|
<div class="md:col-span-1 space-y-2">
|
|
<h3 class="text-xl font-bold text-primary">01. MULTIPLEXING</h3>
|
|
<p class="text-sm text-muted-foreground leading-relaxed">
|
|
Run multiple terminal sessions inside one single window. Detach them and leave them running in the background, then reattach later.
|
|
</p>
|
|
</div>
|
|
<div class="md:col-span-1 space-y-2">
|
|
<h3 class="text-xl font-bold text-primary">02. WINDOWS & PANES</h3>
|
|
<p class="text-sm text-muted-foreground leading-relaxed">
|
|
Organize your workspace into windows (tabs) and panes (splits). Keep your editor, server logs, and git commands visible at once.
|
|
</p>
|
|
</div>
|
|
<div class="md:col-span-1 space-y-2">
|
|
<h3 class="text-xl font-bold text-primary">03. CONFIGURATION</h3>
|
|
<p class="text-sm text-muted-foreground leading-relaxed">
|
|
Tmux is highly scriptable. Bind keys, change status bar colors, and create custom layouts to fit your specific workflow needs.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Cheat Sheet -->
|
|
<section class="container px-4 py-12 border-t border-border">
|
|
<h2 class="text-2xl font-bold mb-8">QUICK_REFERENCE_CARD</h2>
|
|
<div class="grid md:grid-cols-2 gap-4">
|
|
{#each [
|
|
{ cmd: 'Ctrl+b %', desc: 'Split pane vertically' },
|
|
{ cmd: 'Ctrl+b "', desc: 'Split pane horizontally' },
|
|
{ cmd: 'Ctrl+b o', desc: 'Swap to next pane' },
|
|
{ cmd: 'Ctrl+b c', desc: 'Create new window' },
|
|
{ cmd: 'Ctrl+b n', desc: 'Next window' },
|
|
{ cmd: 'Ctrl+b d', desc: 'Detach session' },
|
|
] as item}
|
|
<div class="flex items-center justify-between p-4 border border-border bg-card/50 hover:bg-card transition-colors group">
|
|
<span class="text-muted-foreground group-hover:text-foreground transition-colors">{item.desc}</span>
|
|
<code class="bg-secondary px-2 py-1 text-primary text-xs">{item.cmd}</code>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|