cmux/web/app/docs/configuration/page.tsx
Lawrence Chen f970cdcf33 Add docs, blog, community pages and polish landing page layout
- Add docs pages (getting-started, changelog, keyboard-shortcuts)
- Add blog, community, and legal pages (privacy, terms, EULA)
- Add site header, footer, download button, and nav components
- Add sitemap and robots.txt generation
- Narrow main page container (max-w-2xl), fix footer positioning
- Switch README feature list to colon style
2026-02-09 23:38:05 -08:00

127 lines
3.5 KiB
TypeScript

import type { Metadata } from "next";
import { CodeBlock } from "../../components/code-block";
import { Callout } from "../../components/callout";
export const metadata: Metadata = {
title: "Configuration",
description: "Configure cmux appearance and behavior",
};
export default function ConfigurationPage() {
return (
<>
<h1>Configuration</h1>
<p>
cmux reads configuration from Ghostty config files, giving you familiar
options if you&apos;re coming from Ghostty.
</p>
<h2>Config file locations</h2>
<p>cmux looks for configuration in these locations (in order):</p>
<ol>
<li>
<code>~/.config/ghostty/config</code>
</li>
<li>
<code>~/Library/Application Support/com.mitchellh.ghostty/config</code>
</li>
</ol>
<p>Create the config file if it doesn&apos;t exist:</p>
<CodeBlock lang="bash">{`mkdir -p ~/.config/ghostty
touch ~/.config/ghostty/config`}</CodeBlock>
<h2>Appearance</h2>
<h3>Font</h3>
<CodeBlock title="~/.config/ghostty/config" lang="ini">{`font-family = JetBrains Mono
font-size = 14`}</CodeBlock>
<h3>Colors</h3>
<CodeBlock title="~/.config/ghostty/config" lang="ini">{`# Theme (or use individual colors below)
theme = Dracula
# Custom colors
background = #1e1e2e
foreground = #cdd6f4
cursor-color = #f5e0dc
cursor-text = #1e1e2e
selection-background = #585b70
selection-foreground = #cdd6f4`}</CodeBlock>
<h3>Split panes</h3>
<CodeBlock title="~/.config/ghostty/config" lang="ini">{`# Opacity for unfocused splits (0.0 to 1.0)
unfocused-split-opacity = 0.7
# Fill color for unfocused splits
unfocused-split-fill = #1e1e2e
# Divider color between splits
split-divider-color = #45475a`}</CodeBlock>
<h2>Behavior</h2>
<h3>Scrollback</h3>
<CodeBlock title="~/.config/ghostty/config" lang="ini">{`# Number of lines to keep in scrollback buffer
scrollback-limit = 10000`}</CodeBlock>
<h3>Working directory</h3>
<CodeBlock title="~/.config/ghostty/config" lang="ini">{`# Default directory for new terminals
working-directory = ~/Projects`}</CodeBlock>
<h2>App settings</h2>
<p>
In-app settings are available via <strong>cmux Settings</strong> (
<code>,</code>):
</p>
<h3>Theme mode</h3>
<ul>
<li>
<strong>System</strong> follow macOS appearance
</li>
<li>
<strong>Light</strong> always light mode
</li>
<li>
<strong>Dark</strong> always dark mode
</li>
</ul>
<h3>Automation mode</h3>
<p>Control socket access level:</p>
<ul>
<li>
<strong>Off</strong> no socket control (most secure)
</li>
<li>
<strong>Notifications only</strong> only allow notification commands
</li>
<li>
<strong>Full control</strong> allow all socket commands
</li>
</ul>
<Callout type="warn">
On shared machines, consider using &ldquo;Notifications only&rdquo; mode
to prevent other processes from controlling your terminals.
</Callout>
<h2>Example config</h2>
<CodeBlock title="~/.config/ghostty/config" lang="ini">{`# Font
font-family = SF Mono
font-size = 13
# Colors
theme = One Dark
# Scrollback
scrollback-limit = 50000
# Splits
unfocused-split-opacity = 0.85
split-divider-color = #3e4451
# Working directory
working-directory = ~/code`}</CodeBlock>
</>
);
}