From c2205a2a77fabd82e99ec522258710d3de095f73 Mon Sep 17 00:00:00 2001 From: v0 Date: Fri, 21 Nov 2025 19:36:36 +0000 Subject: [PATCH] feat: update site with new terminal setup guides Rename "Learn" to "THE_TMUX_IFESTO" and add mobile setup sections. Expand command reference matrix with essential terminal commands. #VERCEL_SKIP Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com> --- app/page.tsx | 114 ++++++++++++++++++++++---- styles/globals.css | 195 +++++++++++++++++++-------------------------- 2 files changed, 181 insertions(+), 128 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index 8c92cbe..48f228d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -264,49 +264,135 @@ export default function Home() { {/* Documentation / Info Section */}
+
+

THE_TMUX_IFESTO

+

The philosophy of persistent, multiplexed terminal environments.

+
-

01. MULTIPLEXING

+

01. PERSISTENCE

- Run multiple terminal sessions inside one single window. Detach them and leave them running in the - background, then reattach later. + Your work should not die when your connection drops. Detach your session, go home, and reattach exactly + where you left off. The session lives on the server, independent of your client.

-

02. WINDOWS & PANES

+

02. MULTIPLEXING

- Organize your workspace into windows (tabs) and panes (splits). Keep your editor, server logs, and git - commands visible at once. + One terminal is never enough. Split your workspace into windows (tabs) and panes (tiled splits). Monitor + logs, edit code, and run git commands simultaneously in a single SSH connection.

03. CONFIGURATION

- Tmux is highly scriptable. Bind keys, change status bar colors, and create custom layouts to fit your - specific workflow needs. + The terminal is your canvas. Script your layouts, bind custom keys, and automate your startup. A + well-configured tmux environment is a force multiplier for any developer.

+ {/* Mobile Setup Section */} +
+

MOBILE_DEPLOYMENT_PROTOCOLS

+
+ {/* Android Protocol */} +
+

+ ANDROID + TERMUX_PROTOCOL +

+
+
+ 01. +
+

Acquire F-Droid

+

Download the F-Droid APK from f-droid.org to access the open-source repository.

+
+
+
+ 02. +
+

Install Termux

+

Search for "Termux" within F-Droid. Do not use the Play Store version (deprecated).

+
+
+
+ 03. +
+

Initialize Environment

+
+

$ pkg update && pkg upgrade

+

$ pkg install tmux vim git

+
+
+
+
+
+ + {/* iOS Protocol */} +
+

+ APPLE + ISH_SHELL_PROTOCOL +

+
+
+ 01. +
+

Acquire iSH Shell

+

Install "iSH Shell" from the App Store. This provides a localized Alpine Linux environment.

+
+
+
+ 02. +
+

Package Management

+

iSH uses Alpine's 'apk' package manager.

+
+
+
+ 03. +
+

Deploy Tmux

+
+

$ apk update

+

$ apk add tmux vim openssh

+
+
+
+
+
+
+
+ {/* Cheat Sheet */}
-

QUICK_REFERENCE_CARD

+

COMMAND_REFERENCE_MATRIX

{[ + { cmd: "tmux new -s ", desc: "Start new named session" }, + { cmd: "tmux a -t ", desc: "Attach to existing session" }, + { cmd: "tmux ls", desc: "List all active sessions" }, + { cmd: "Ctrl+b d", desc: "Detach from current session" }, { 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 ", desc: "Navigate between panes" }, + { cmd: "Ctrl+b z", desc: "Toggle pane zoom (maximize)" }, { cmd: "Ctrl+b c", desc: "Create new window" }, - { cmd: "Ctrl+b n", desc: "Next window" }, - { cmd: "Ctrl+b d", desc: "Detach session" }, + { cmd: "Ctrl+b n", desc: "Move to next window" }, + { cmd: "Ctrl+b ,", desc: "Rename current window" }, + { cmd: "Ctrl+b [", desc: "Enter copy/scroll mode" }, ].map((item, i) => (
- {item.desc} - {item.cmd} + + {item.desc} + + {item.cmd}
))}
diff --git a/styles/globals.css b/styles/globals.css index dc2aea1..0ed2887 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,125 +1,92 @@ -@import 'tailwindcss'; -@import 'tw-animate-css'; +@tailwind base; +@tailwind components; +@tailwind utilities; -@custom-variant dark (&:is(.dark *)); - -:root { - --background: oklch(1 0 0); - --foreground: oklch(0.145 0 0); - --card: oklch(1 0 0); - --card-foreground: oklch(0.145 0 0); - --popover: oklch(1 0 0); - --popover-foreground: oklch(0.145 0 0); - --primary: oklch(0.205 0 0); - --primary-foreground: oklch(0.985 0 0); - --secondary: oklch(0.97 0 0); - --secondary-foreground: oklch(0.205 0 0); - --muted: oklch(0.97 0 0); - --muted-foreground: oklch(0.556 0 0); - --accent: oklch(0.97 0 0); - --accent-foreground: oklch(0.205 0 0); - --destructive: oklch(0.577 0.245 27.325); - --destructive-foreground: oklch(0.577 0.245 27.325); - --border: oklch(0.922 0 0); - --input: oklch(0.922 0 0); - --ring: oklch(0.708 0 0); - --chart-1: oklch(0.646 0.222 41.116); - --chart-2: oklch(0.6 0.118 184.704); - --chart-3: oklch(0.398 0.07 227.392); - --chart-4: oklch(0.828 0.189 84.429); - --chart-5: oklch(0.769 0.188 70.08); - --radius: 0.625rem; - --sidebar: oklch(0.985 0 0); - --sidebar-foreground: oklch(0.145 0 0); - --sidebar-primary: oklch(0.205 0 0); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.97 0 0); - --sidebar-accent-foreground: oklch(0.205 0 0); - --sidebar-border: oklch(0.922 0 0); - --sidebar-ring: oklch(0.708 0 0); +@layer utilities { + .text-balance { + text-wrap: balance; + } } -.dark { - --background: oklch(0.145 0 0); - --foreground: oklch(0.985 0 0); - --card: oklch(0.145 0 0); - --card-foreground: oklch(0.985 0 0); - --popover: oklch(0.145 0 0); - --popover-foreground: oklch(0.985 0 0); - --primary: oklch(0.985 0 0); - --primary-foreground: oklch(0.205 0 0); - --secondary: oklch(0.269 0 0); - --secondary-foreground: oklch(0.985 0 0); - --muted: oklch(0.269 0 0); - --muted-foreground: oklch(0.708 0 0); - --accent: oklch(0.269 0 0); - --accent-foreground: oklch(0.985 0 0); - --destructive: oklch(0.396 0.141 25.723); - --destructive-foreground: oklch(0.637 0.237 25.331); - --border: oklch(0.269 0 0); - --input: oklch(0.269 0 0); - --ring: oklch(0.439 0 0); - --chart-1: oklch(0.488 0.243 264.376); - --chart-2: oklch(0.696 0.17 162.48); - --chart-3: oklch(0.769 0.188 70.08); - --chart-4: oklch(0.627 0.265 303.9); - --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.205 0 0); - --sidebar-foreground: oklch(0.985 0 0); - --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0 0); - --sidebar-accent: oklch(0.269 0 0); - --sidebar-accent-foreground: oklch(0.985 0 0); - --sidebar-border: oklch(0.269 0 0); - --sidebar-ring: oklch(0.439 0 0); -} - -@theme inline { - --font-sans: 'Geist', 'Geist Fallback'; - --font-mono: 'Geist Mono', 'Geist Mono Fallback'; - --color-background: var(--background); - --color-foreground: var(--foreground); - --color-card: var(--card); - --color-card-foreground: var(--card-foreground); - --color-popover: var(--popover); - --color-popover-foreground: var(--popover-foreground); - --color-primary: var(--primary); - --color-primary-foreground: var(--primary-foreground); - --color-secondary: var(--secondary); - --color-secondary-foreground: var(--secondary-foreground); - --color-muted: var(--muted); - --color-muted-foreground: var(--muted-foreground); - --color-accent: var(--accent); - --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-destructive-foreground: var(--destructive-foreground); - --color-border: var(--border); - --color-input: var(--input); - --color-ring: var(--ring); - --color-chart-1: var(--chart-1); - --color-chart-2: var(--chart-2); - --color-chart-3: var(--chart-3); - --color-chart-4: var(--chart-4); - --color-chart-5: var(--chart-5); - --radius-sm: calc(var(--radius) - 4px); - --radius-md: calc(var(--radius) - 2px); - --radius-lg: var(--radius); - --radius-xl: calc(var(--radius) + 4px); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); +@layer base { + :root { + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; + } } @layer base { * { - @apply border-border outline-ring/50; + @apply border-border; } body { @apply bg-background text-foreground; } -} +} \ No newline at end of file