diff --git a/README.md b/README.md index 24f52f7..e565761 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ bun install bun run start # Terminal 2: Start web server -bun run start # http://localhost:8000 +bun run start # http://localhost:8000/demo/ ``` ## Getting Started diff --git a/demo/index.html b/demo/index.html index 66f1df3..d2001e6 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,7 +3,7 @@ - Ghostty Terminal - File Browser + ghostty-web -
-
-

πŸ–₯️ Ghostty Terminal

-

WebAssembly-powered terminal with full filesystem access

-
- -
-
-
- Connecting... - ALT SCREEN +
+
+
+ + +
-
- - ~/ +
ghostty-web
+
+ + Disconnected
- -
-
-
- -
-

πŸ“œ Scrolling Features

-
- - - - - - - - -
-
- Event Log (onScroll): -
-
Events will appear here...
-
- -
-
- -
-

πŸ” Buffer Access API (NEW!)

-
- - - - -
-
- API Test Results: -
-
Test results will appear here...
-
- -
-
- -
-

πŸ”— URL Detection (NEW!)

-

- Plain text URLs are automatically detected and made clickable. Hover to see cursor change, - Ctrl/Cmd+Click to open. -

-
- - -
-
- -
- ⚠️ Warning: Full Filesystem Access - This demo has unrestricted access to your entire filesystem. It's meant for local - development and demonstration purposes only. Do not expose this to untrusted users or - networks. -
+
- diff --git a/demo/showcase.sh b/demo/showcase.sh new file mode 100755 index 0000000..fa76599 --- /dev/null +++ b/demo/showcase.sh @@ -0,0 +1,262 @@ +#!/bin/bash +# Ghostty-Web Feature Showcase Script (Improved) +# Run with: bash showcase-improved.sh [fast|slow] +# Default: medium speed (good for screen recording) + +SPEED="${1:-medium}" + +# Timing based on speed +if [ "$SPEED" = "fast" ]; then + SHORT_PAUSE=0.5 + LONG_PAUSE=1 +elif [ "$SPEED" = "slow" ]; then + SHORT_PAUSE=3 + LONG_PAUSE=5 +else + SHORT_PAUSE=1.5 + LONG_PAUSE=2.5 +fi + +# Colors +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[0;33m' +BLUE='\033[0;34m' +MAGENTA='\033[0;35m' +CYAN='\033[0;36m' +BOLD='\033[1m' +DIM='\033[2m' +ITALIC='\033[3m' +UNDERLINE='\033[4m' +RESET='\033[0m' + +pause() { + sleep "${1:-$SHORT_PAUSE}" +} + +# ============================================================================= +# Header +# ============================================================================= +clear # Start with a real clear for clean presentation +echo -e "${BOLD}${CYAN}╔═══════════════════════════════════════════════════════════════════╗${RESET}" +echo -e "${BOLD}${CYAN}β•‘ Ghostty-Web Feature Showcase β•‘${RESET}" +echo -e "${BOLD}${CYAN}β•‘ Full VT100 Terminal Emulation in Browser β•‘${RESET}" +echo -e "${BOLD}${CYAN}β•šβ•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•β•${RESET}" +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 1. ANSI Colors (16 colors) +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ ANSI Colors (16 colors)${RESET}" +echo +echo "Standard colors:" +for i in {30..37}; do + echo -en "\033[${i}mβ–ˆβ–ˆβ–ˆ\033[0m " +done +echo +echo +echo "Bright colors:" +for i in {90..97}; do + echo -en "\033[${i}mβ–ˆβ–ˆβ–ˆ\033[0m " +done +echo +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 2. 256 Color Palette (Condensed) +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ 256 Color Palette${RESET}" +echo +echo "System colors (0-15):" +for i in {0..15}; do + printf "\033[48;5;%dm \033[0m" $i +done +echo +echo +echo "Color cube sample:" +for i in {16..51}; do + printf "\033[48;5;%dm \033[0m" $i +done +echo +for i in {52..87}; do + printf "\033[48;5;%dm \033[0m" $i +done +echo +echo +echo "Grayscale ramp:" +for i in {232..255}; do + printf "\033[48;5;%dm \033[0m" $i +done +echo +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 3. RGB True Color +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ RGB True Color (24-bit)${RESET}" +echo +echo "Color gradients:" +# Rainbow gradient +for i in {0..60}; do + r=$((255 - i * 4)) + g=$((i * 4)) + b=$((128 + i * 2)) + printf "\033[38;2;%d;%d;%dmβ–“\033[0m" $r $g $b +done +echo +# Blue to purple gradient +for i in {0..60}; do + r=$((i * 4)) + g=$((100)) + b=$((255 - i * 2)) + printf "\033[38;2;%d;%d;%dmβ–“\033[0m" $r $g $b +done +echo +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 4. Text Styles +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ Text Styles & Attributes${RESET}" +echo +echo -e " ${BOLD}Bold${RESET} ${DIM}Dim${RESET} ${ITALIC}Italic${RESET}" +echo -e " ${UNDERLINE}Underline${RESET} \033[9mStrikethrough${RESET} \033[7mReverse${RESET}" +echo -e " ${BOLD}${RED}Bold Red${RESET} ${ITALIC}${CYAN}Italic Cyan${RESET} ${UNDERLINE}${GREEN}Under Green${RESET}" +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 5. Dynamic Updates - Matrix Rain +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ Dynamic Updates${RESET}" +echo +echo "Matrix-style falling text:" +echo + +# Create space for matrix effect +echo +echo +echo +echo +echo +echo +echo +echo + +# Save cursor position (we're at bottom of reserved space) +tput sc + +# Do matrix rain - write characters going down columns +for frame in {1..15}; do + for col in {5..65..6}; do + chars=("0" "1" "γ‚’" "γ‚€" "ウ" "エ" "γ‚ͺ" "γ‚«" "γ‚­" "γ‚―" "γ‚±" "γ‚³") + char=${chars[$RANDOM % ${#chars[@]}]} + row=$((frame % 8 + 1)) + # Position relative to current cursor, write char, then restore + tput rc + tput cuu 8 # Move up 8 lines from saved position + tput cuf $col # Move right to column + tput cud $row # Move down to row + echo -ne "\033[32m${char}\033[0m" + done + sleep 0.1 +done + +# Restore cursor to bottom of matrix area +tput rc +echo + +pause "$LONG_PAUSE" + +# ============================================================================= +# 6. Progress Bars & Spinners +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ Progress Indicators${RESET}" +echo +echo "Loading simulation:" +echo + +# Progress bar with fixed formatting +for i in {0..100..10}; do + bar_length=$((i / 5)) + bar=$(printf 'β–ˆ%.0s' $(seq 1 $bar_length)) + spaces=$(printf ' %.0s' $(seq 1 $((20 - bar_length)))) + printf "\r [%s%s] %3d%%" "$bar" "$spaces" $i + sleep 0.15 +done +echo +echo + +# Spinner +echo -n " Processing: " +spinners=("β ‹" "β ™" "β Ή" "β Έ" "β Ό" "β ΄" "β ¦" "β §" "β ‡" "⠏") +for i in {1..20}; do + printf "\b${spinners[$((i % 10))]}" + sleep 0.1 +done +printf "\bβœ“" +echo +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 7. Unicode & Emojis +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ Unicode Support${RESET}" +echo +echo "Emojis: πŸš€ ⭐ 🎨 πŸ”₯ πŸ’» 🌈 ✨ πŸŽ‰ πŸ‘ ❀️ πŸ’‘ πŸ”’ πŸ“¦ ⚑" +echo "Arrows: ← β†’ ↑ ↓ ↔ ↕ ⇐ β‡’ ⇑ ⇓ ⟡ ⟢ ⟷" +echo "Math: ∞ βˆ‘ ∏ ∫ βˆ‚ √ β‰ˆ β‰  ≀ β‰₯ Β± Γ— Γ·" +echo "Box Drawing: ╔═══╗ β•šβ•β•β•β• β”œβ”€β”Όβ”€β”€ β”‚ β””β”€β”΄β”€β”˜" +echo "Symbols: β˜… β˜† β™  ♣ β™₯ ♦ βœ“ βœ— ⚠ ⚑ β™ͺ β™«" +echo "CJK: ζ—₯本θͺž δΈ­ζ–‡ ν•œκΈ€ πŸ‡―πŸ‡΅ πŸ‡¨πŸ‡³ πŸ‡°πŸ‡·" +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 8. Scrollback Demo +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ Scrollback Buffer${RESET}" +echo +echo "Generating scrollable content..." +echo +for i in {1..50}; do + color=$((31 + (i % 7))) + echo -e "\033[${color}mβ–Ί Line $i - Scroll test\033[0m" +done +echo +echo -e "${GREEN}βœ“ Scroll up with your mouse wheel to see all content!${RESET}" +echo +pause "$LONG_PAUSE" + +# ============================================================================= +# 9. Full-Screen Application Demo (htop) +# ============================================================================= +echo -e "${BOLD}${YELLOW}β–ˆ Full-Screen Applications${RESET}" +echo +if command -v htop >/dev/null 2>&1; then + echo "Launching htop (press 'q' to quit)..." + sleep 2 + htop + echo + echo -e "${GREEN}βœ“ Alt-screen buffer preserved your scrollback!${RESET}" + echo +elif command -v top >/dev/null 2>&1; then + echo "Launching top (press 'q' to quit)..." + sleep 2 + top + echo + echo -e "${GREEN}βœ“ Alt-screen buffer preserved your scrollback!${RESET}" + echo +else + echo "Install htop to see full-screen app demo" + echo +fi + +echo +echo -e "${BOLD}${CYAN}Showcase complete! Scroll up to see all features.${RESET}" +echo