Skip to content

feat #28: enrich website with docs and content structure #90

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
blueberrycongee wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat #28: enrich website with docs and content structure #90

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
204 changes: 203 additions & 1 deletion website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,18 @@
</head>
<body>
<nav id="topnav">
<button id="lang-toggle" aria-label="Switch language">中文</button>
<div class="nav-links">
<a href="#features" data-i18n="nav-features">Features</a>
<a href="#screenshots" data-i18n="nav-screenshots">Screenshots</a>
<a href="#demo" data-i18n="nav-demo">Demo</a>
<a href="#docs" data-i18n="nav-docs">Docs</a>
</div>
<div class="nav-actions">
<a href="https://github.com/blueberrycongee/termcanvas" class="nav-github">GitHub</a>
<button id="lang-toggle" aria-label="Switch language">中文</button>
</div>
</nav>

<section id="hero">
<div id="ascii-logo"></div>
<h1>TermCanvas</h1>
Expand Down Expand Up @@ -64,6 +74,198 @@ <h3 data-i18n="f4-title">Usage Tracking</h3>
</div>
</section>

<!-- ── Screenshots Gallery ──────────────────────────────────────── -->
<section id="screenshots">
<h2 data-i18n="screenshots-title">Screenshots</h2>
<div class="screenshots-grid">
<div class="screenshot-card">
<div class="screenshot-placeholder" aria-label="Canvas view with multiple terminals arranged spatially">
<span class="placeholder-icon">&#9633;</span>
<span class="placeholder-text" data-i18n="ss-canvas">Infinite canvas with terminals arranged freely</span>
</div>
</div>
<div class="screenshot-card">
<div class="screenshot-placeholder" aria-label="AI agents running in parallel with status indicators">
<span class="placeholder-icon">&#9678;</span>
<span class="placeholder-text" data-i18n="ss-agents">AI agents running side by side with live status</span>
</div>
</div>
<div class="screenshot-card">
<div class="screenshot-placeholder" aria-label="Composer input bar sending prompts to focused agent">
<span class="placeholder-icon">&#9654;</span>
<span class="placeholder-text" data-i18n="ss-composer">Composer sending prompts with image paste</span>
</div>
</div>
<div class="screenshot-card">
<div class="screenshot-placeholder" aria-label="Token usage dashboard with cost breakdown">
<span class="placeholder-icon">&#9636;</span>
<span class="placeholder-text" data-i18n="ss-usage">Usage dashboard with per-model cost breakdown</span>
</div>
</div>
<div class="screenshot-card">
<div class="screenshot-placeholder" aria-label="Drawing annotations on the canvas with pen, text, and shapes">
<span class="placeholder-icon">&#9998;</span>
<span class="placeholder-text" data-i18n="ss-drawing">Freehand drawing and annotations on canvas</span>
</div>
</div>
<div class="screenshot-card">
<div class="screenshot-placeholder" aria-label="Hydra multi-agent task orchestration view">
<span class="placeholder-icon">&#9733;</span>
<span class="placeholder-text" data-i18n="ss-hydra">Hydra orchestrating parallel agent tasks</span>
</div>
</div>
</div>
</section>

<!-- ── Demo Video ───────────────────────────────────────────────── -->
<section id="demo">
<h2 data-i18n="demo-title">Demo</h2>
<p class="demo-subtitle" data-i18n="demo-subtitle">See TermCanvas in action — from canvas navigation to multi-agent workflows.</p>
<div class="demo-video-container">
<div class="demo-video-placeholder">
<div class="play-icon">&#9654;</div>
<p data-i18n="demo-placeholder">Demo video coming soon</p>
</div>
</div>
</section>

<!-- ── Documentation ────────────────────────────────────────────── -->
<section id="docs">
<h2 data-i18n="docs-title">Documentation</h2>

<div class="docs-nav">
<a href="#docs-getting-started" class="docs-nav-link" data-i18n="docs-nav-gs">Getting Started</a>
<a href="#docs-concepts" class="docs-nav-link" data-i18n="docs-nav-concepts">Key Concepts</a>
<a href="#docs-shortcuts" class="docs-nav-link" data-i18n="docs-nav-shortcuts">Shortcuts</a>
<a href="#docs-config" class="docs-nav-link" data-i18n="docs-nav-config">Configuration</a>
</div>

<!-- Getting Started -->
<div class="docs-section" id="docs-getting-started">
<h3 data-i18n="docs-gs-title">Getting Started</h3>

<div class="docs-block">
<h4 data-i18n="docs-gs-install-title">Installation</h4>
<p data-i18n="docs-gs-install-desc">Download the latest release for your platform from GitHub Releases. TermCanvas supports macOS, Linux, and Windows.</p>
<div class="docs-code">
<code>
# Or build from source<br>
git clone https://github.com/blueberrycongee/termcanvas.git<br>
cd termcanvas<br>
npm install<br>
npm run dev
</code>
</div>
</div>

<div class="docs-block">
<h4 data-i18n="docs-gs-cli-title">CLI Setup</h4>
<p data-i18n="docs-gs-cli-desc">After launching the app, go to Settings → General → Command line interface and click Register. This adds <code>termcanvas</code> and <code>hydra</code> to your PATH, enabling terminal and agent management from any shell.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-gs-first-title">First Steps</h4>
<ol class="docs-steps">
<li data-i18n="docs-gs-step1">Open TermCanvas and add a project with <kbd>⌘</kbd> <kbd>O</kbd> (or File → Add Project)</li>
<li data-i18n="docs-gs-step2">TermCanvas auto-detects git worktrees in your project</li>
<li data-i18n="docs-gs-step3">Press <kbd>⌘</kbd> <kbd>T</kbd> to create a new terminal — choose shell, lazygit, or an AI agent</li>
<li data-i18n="docs-gs-step4">Drag terminals around the canvas, zoom in/out with scroll, and double-click title bars to zoom-to-fit</li>
</ol>
</div>
</div>

<!-- Key Concepts -->
<div class="docs-section" id="docs-concepts">
<h3 data-i18n="docs-concepts-title">Key Concepts</h3>

<div class="docs-block">
<h4 data-i18n="docs-concept-canvas-title">Canvas</h4>
<p data-i18n="docs-concept-canvas-desc">The infinite 2D workspace where all terminals live. Pan by dragging the background, zoom with scroll or pinch. Box-select multiple terminals by dragging from empty space. Annotate with pen, text, rectangles, and arrows using the drawing tools.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-concept-hierarchy-title">Project → Worktree → Terminal</h4>
<p data-i18n="docs-concept-hierarchy-desc">TermCanvas organizes everything in a three-level hierarchy that mirrors how you use git. Add a project, and its worktrees appear automatically. Each worktree can contain multiple terminals — shells, lazygit, or AI agents.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-concept-agents-title">AI Agents</h4>
<p data-i18n="docs-concept-agents-desc">First-class support for Claude Code, Codex, Gemini, Kimi, and OpenCode. Each agent runs in its own terminal with live status indicators (working, waiting, done) and a completion glow effect. Sessions persist across restarts.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-concept-composer-title">Composer</h4>
<p data-i18n="docs-concept-composer-desc">The unified input bar at the bottom of the screen. It sends prompts to whichever agent terminal is currently focused. Supports pasting images directly into the prompt. Think of it as a shared command line for all your AI agents.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-concept-hydra-title">Hydra</h4>
<p data-i18n="docs-concept-hydra-desc">A task orchestration tool that breaks large tasks into subtasks, each running in its own git worktree with a dedicated AI agent. Run <code>hydra init</code> in your project, then ask your agent to use Hydra — it handles the rest.</p>
</div>
</div>

<!-- Shortcuts -->
<div class="docs-section" id="docs-shortcuts">
<h3 data-i18n="docs-shortcuts-title">Keyboard Shortcuts</h3>
<p class="docs-shortcuts-note" data-i18n="docs-shortcuts-note">All shortcuts are customizable in Settings → Shortcuts. On Windows/Linux, replace ⌘ with Ctrl.</p>
<table class="shortcuts-table">
<thead>
<tr>
<th data-i18n="docs-shortcuts-col-key">Shortcut</th>
<th data-i18n="docs-shortcuts-col-action">Action</th>
</tr>
</thead>
<tbody>
<tr><td><kbd>⌘</kbd> <kbd>O</kbd></td><td data-i18n="sc-add-project">Add project</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>B</kbd></td><td data-i18n="sc-sidebar">Toggle sidebar</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>/</kbd></td><td data-i18n="sc-panel">Toggle right panel (usage)</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>T</kbd></td><td data-i18n="sc-new-term">New terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>D</kbd></td><td data-i18n="sc-close-term">Close focused terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>;</kbd></td><td data-i18n="sc-rename">Rename terminal title</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>]</kbd></td><td data-i18n="sc-next">Next terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>[</kbd></td><td data-i18n="sc-prev">Previous terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>E</kbd></td><td data-i18n="sc-unfocus">Unfocus / refocus last terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>F</kbd></td><td data-i18n="sc-star">Star / unstar terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>J</kbd></td><td data-i18n="sc-star-next">Next starred terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>K</kbd></td><td data-i18n="sc-star-prev">Previous starred terminal</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>S</kbd></td><td data-i18n="sc-save">Save workspace</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>⇧</kbd> <kbd>S</kbd></td><td data-i18n="sc-save-as">Save workspace as</td></tr>
<tr><td><kbd>⌘</kbd> <kbd>1</kbd>–<kbd>4</kbd></td><td data-i18n="sc-sizes">Terminal size presets</td></tr>
</tbody>
</table>
</div>

<!-- Configuration -->
<div class="docs-section" id="docs-config">
<h3 data-i18n="docs-config-title">Configuration</h3>

<div class="docs-block">
<h4 data-i18n="docs-config-fonts-title">Fonts</h4>
<p data-i18n="docs-config-fonts-desc">6 downloadable monospace fonts are available in Settings. Each font is optimized for terminal rendering with proper ligature support.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-config-theme-title">Theme</h4>
<p data-i18n="docs-config-theme-desc">Dark and light themes with a minimum contrast ratio setting for accessibility. The theme applies to the canvas, terminals, and all UI elements.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-config-lang-title">Language</h4>
<p data-i18n="docs-config-lang-desc">English and Chinese are supported. The app auto-detects your system language on first launch. You can change it anytime in Settings.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-config-updates-title">Updates</h4>
<p data-i18n="docs-config-updates-desc">Auto-update is enabled by default. New versions are downloaded in the background and applied on restart. An in-app changelog shows what changed in each release.</p>
</div>

<div class="docs-block">
<h4 data-i18n="docs-config-agent-title">Agent CLI Override</h4>
<p data-i18n="docs-config-agent-desc">Each AI agent type can have a custom CLI path configured in Settings. This lets you use specific versions or custom wrappers for Claude Code, Codex, and other agents.</p>
</div>
</div>
</section>

<section id="cta">
<div class="hero-buttons">
<a href="https://github.com/blueberrycongee/termcanvas/releases" class="btn btn-primary" data-i18n="download">Download</a>
Expand Down
91 changes: 91 additions & 0 deletions website/src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,17 @@ if (container) init(container);

// ── i18n ────────────────────────────────────────────────────────
const zh = {
// Nav
"nav-features": "功能",
"nav-screenshots": "截图",
"nav-demo": "演示",
"nav-docs": "文档",

// Hero
tagline: "你的终端，铺在无限画布上。",
download: "下载",

// Features
features: "功能特性",
"f1-title": "无限画布",
"f1-desc": "自由平移、缩放、排列终端。告别标签页和分屏。",
Expand All @@ -16,6 +25,88 @@ const zh = {
"f3-desc": "统一输入栏，向聚焦的 agent 发送提示，支持粘贴图片。",
"f4-title": "用量追踪",
"f4-desc": "Token 成本看板，按项目和模型细分。清楚你的开销。",

// Screenshots
"screenshots-title": "截图",
"ss-canvas": "终端在无限画布上自由排列",
"ss-agents": "AI Agent 并行运行，实时状态显示",
"ss-composer": "Composer 发送提示，支持粘贴图片",
"ss-usage": "用量看板，按模型细分成本",
"ss-drawing": "画布上自由绘制和标注",
"ss-hydra": "Hydra 编排并行 Agent 任务",

// Demo
"demo-title": "演示",
"demo-subtitle": "观看 TermCanvas 的实际操作 — 从画布导航到多 Agent 工作流。",
"demo-placeholder": "演示视频即将推出",

// Docs
"docs-title": "文档",
"docs-nav-gs": "快速开始",
"docs-nav-concepts": "核心概念",
"docs-nav-shortcuts": "快捷键",
"docs-nav-config": "配置",

// Docs — Getting Started
"docs-gs-title": "快速开始",
"docs-gs-install-title": "安装",
"docs-gs-install-desc": "从 GitHub Releases 下载适合你平台的最新版本。TermCanvas 支持 macOS、Linux 和 Windows。",
"docs-gs-cli-title": "CLI 设置",
"docs-gs-cli-desc": "启动应用后，进入 设置 → 通用 → 命令行工具，点击注册。这会将 termcanvas 和 hydra 添加到你的 PATH。",
"docs-gs-first-title": "第一步",
"docs-gs-step1": "打开 TermCanvas，按 ⌘ O 添加项目（或 文件 → 添加项目）",
"docs-gs-step2": "TermCanvas 自动检测项目中的 git worktree",
"docs-gs-step3": "按 ⌘ T 创建新终端 — 选择 shell、lazygit 或 AI Agent",
"docs-gs-step4": "在画布上拖动终端，滚轮缩放，双击标题栏自动适配大小",

// Docs — Key Concepts
"docs-concepts-title": "核心概念",
"docs-concept-canvas-title": "画布",
"docs-concept-canvas-desc": "无限 2D 工作区，所有终端都在这里。拖动背景平移，滚轮或捏合缩放。从空白处拖动可框选多个终端。使用绘图工具进行标注。",
"docs-concept-hierarchy-title": "项目 → Worktree → 终端",
"docs-concept-hierarchy-desc": "TermCanvas 采用三层层级结构，与 git 使用方式一致。添加项目后，worktree 自动出现。每个 worktree 可包含多个终端。",
"docs-concept-agents-title": "AI Agent",
"docs-concept-agents-desc": "原生支持 Claude Code、Codex、Gemini、Kimi 和 OpenCode。每个 Agent 有独立终端，实时状态指示（工作中、等待中、完成），会话跨重启保持。",
"docs-concept-composer-title": "Composer",
"docs-concept-composer-desc": "屏幕底部的统一输入栏，向当前聚焦的 Agent 终端发送提示。支持直接粘贴图片。",
"docs-concept-hydra-title": "Hydra",
"docs-concept-hydra-desc": "任务编排工具，将大任务拆分为子任务，每个子任务在独立的 git worktree 中运行专属 AI Agent。在项目中运行 hydra init，然后让 Agent 使用 Hydra。",

// Docs — Shortcuts
"docs-shortcuts-title": "快捷键",
"docs-shortcuts-note": "所有快捷键可在 设置 → 快捷键 中自定义。Windows/Linux 上将 ⌘ 替换为 Ctrl。",
"docs-shortcuts-col-key": "快捷键",
"docs-shortcuts-col-action": "操作",
"sc-add-project": "添加项目",
"sc-sidebar": "切换侧边栏",
"sc-panel": "切换右侧面板（用量）",
"sc-new-term": "新建终端",
"sc-close-term": "关闭当前终端",
"sc-rename": "重命名终端标题",
"sc-next": "下一个终端",
"sc-prev": "上一个终端",
"sc-unfocus": "取消聚焦 / 重新聚焦",
"sc-star": "收藏 / 取消收藏终端",
"sc-star-next": "下一个收藏终端",
"sc-star-prev": "上一个收藏终端",
"sc-save": "保存工作区",
"sc-save-as": "另存为工作区",
"sc-sizes": "终端尺寸预设",

// Docs — Configuration
"docs-config-title": "配置",
"docs-config-fonts-title": "字体",
"docs-config-fonts-desc": "设置中提供 6 种可下载等宽字体，每种字体都针对终端渲染优化。",
"docs-config-theme-title": "主题",
"docs-config-theme-desc": "深色和浅色主题，支持最低对比度设置以增强可访问性。主题应用于画布、终端和所有 UI 元素。",
"docs-config-lang-title": "语言",
"docs-config-lang-desc": "支持英文和中文。应用首次启动时自动检测系统语言，可随时在设置中更改。",
"docs-config-updates-title": "更新",
"docs-config-updates-desc": "默认启用自动更新。新版本在后台下载，重启时应用。应用内变更日志显示每个版本的更新内容。",
"docs-config-agent-title": "Agent CLI 覆盖",
"docs-config-agent-desc": "每种 AI Agent 类型可在设置中配置自定义 CLI 路径，支持使用特定版本或自定义封装。",

// CTA
"cta-sub": "MIT 许可 \u00b7 开源",
};

Expand Down
Loading