diff options
Diffstat (limited to 'cloud/app/src/routes/index.tsx')
| -rw-r--r-- | cloud/app/src/routes/index.tsx | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/cloud/app/src/routes/index.tsx b/cloud/app/src/routes/index.tsx new file mode 100644 index 000000000..90062d0b5 --- /dev/null +++ b/cloud/app/src/routes/index.tsx @@ -0,0 +1,169 @@ +import { Title } from "@solidjs/meta" +import { onCleanup, onMount } from "solid-js" +import "./index.css" +import logo from "../asset/logo-ornate-dark.svg" +import IMG_SPLASH from "../asset/screenshot-splash.webp" +import IMG_VSCODE from "../asset/screenshot-vscode.webp" +import IMG_GITHUB from "../asset/screenshot-github.webp" +import { IconCopy, IconCheck } from "../component/icon" + +function CopyStatus() { + return ( + <div data-component="copy-status"> + <IconCopy data-slot="copy" /> + <IconCheck data-slot="check" /> + </div> + ) +} + +export default function Home() { + onMount(() => { + const commands = document.querySelectorAll("[data-copy]") + for (const button of commands) { + const callback = () => { + const text = button.textContent + alert(text) + if (text) { + navigator.clipboard.writeText(text) + button.setAttribute("data-copied", "") + setTimeout(() => { + button.removeAttribute("data-copied") + }, 1500) + } + } + button.addEventListener("click", callback) + onCleanup(() => { + button.removeEventListener("click", callback) + }) + } + }) + + return ( + <main data-page="home"> + <Title>opencode | AI coding agent built for the terminal</Title> + <div data-component="content"> + <section data-component="top"> + <img data-slot="logo" src={logo} alt="logo" /> + <h1 data-slot="title">The AI coding agent built for the terminal.</h1> + </section> + + <section data-component="cta"> + <div data-slot="left"> + <a href="/docs">Get Started</a> + </div> + <div data-slot="right"> + <button data-copy data-slot="command" data-command="curl -fsSL https://opencode.ai/install | bash"> + <span> + <span>curl -fsSL </span> + <span data-slot="protocol">https://</span> + <span data-slot="highlight">opencode.ai/install</span> + | bash + </span> + <CopyStatus /> + </button> + </div> + </section> + + <section data-component="features"> + <ul data-slot="list"> + <li> + <strong>Native TUI</strong>: A responsive, native, themeable terminal UI. + </li> + <li> + <strong>LSP enabled</strong>: Automatically loads the right LSPs for the LLM. + </li> + <li> + <strong>Multi-session</strong>: Start multiple agents in parallel on the same project. + </li> + <li> + <strong>Shareable links</strong>: Share a link to any sessions for reference or to debug. + </li> + <li> + <strong>Claude Pro</strong>: Log in with Anthropic to use your Claude Pro or Max account. + </li> + <li> + <strong>Use any model</strong>: Supports 75+ LLM providers through{" "} + <a href="https://models.dev">Models.dev</a>, including local models. + </li> + </ul> + </section> + + <section data-component="install"> + <div data-component="method"> + <h3 data-component="title">npm</h3> + <button data-copy data-slot="button"> + <span> + npm install -g <strong>opencode-ai</strong> + </span> + <CopyStatus /> + </button> + </div> + <div data-component="method"> + <h3 data-component="title">bun</h3> + <button data-copy data-slot="button"> + <span> + bun install -g <strong>opencode-ai</strong> + </span> + <CopyStatus /> + </button> + </div> + <div data-component="method"> + <h3 data-component="title">homebrew</h3> + <button data-copy data-slot="button"> + <span> + brew install <strong>sst/tap/opencode</strong> + </span> + <CopyStatus /> + </button> + </div> + <div data-component="method"> + <h3 data-component="title">paru</h3> + <button data-copy data-slot="button"> + <span> + paru -S <strong>opencode-bin</strong> + </span> + <CopyStatus /> + </button> + </div> + </section> + + <section data-component="screenshots"> + <div data-slot="left"> + <div data-component="title">opencode TUI with tokyonight theme</div> + <div data-slot="filler"> + <img src={IMG_SPLASH} alt="opencode TUI with tokyonight theme" /> + </div> + </div> + <div data-slot="right"> + <div data-slot="cell"> + <div data-component="title">opencode in VS Code</div> + <div data-slot="filler"> + <img src={IMG_VSCODE} alt="opencode in VS Code" /> + </div> + </div> + <div data-slot="cell"> + <div data-component="title">opencode in GitHub</div> + <div data-slot="filler"> + <img src={IMG_GITHUB} alt="opencode in GitHub" /> + </div> + </div> + </div> + </section> + + <footer data-component="footer"> + <div data-slot="cell"> + <a href="https://github.com/sst/opencode">GitHub</a> + </div> + <div data-slot="cell"> + <a href="https://opencode.ai/discord">Discord</a> + </div> + <div data-slot="cell"> + <span> + ©2025 <a href="https://anoma.ly">Anomaly Innovations</a> + </span> + </div> + </footer> + </div> + </main> + ) +} |