summaryrefslogtreecommitdiffhomepage
path: root/packages/console
diff options
context:
space:
mode:
authorJay V <[email protected]>2025-11-03 18:03:10 -0500
committerJay V <[email protected]>2025-11-03 18:17:32 -0500
commitd06afd87e5a0325730b11478eb49af4ced12608a (patch)
tree97555b444fac7e289063a3bcded796a9cfc8db0b /packages/console
parent9fb6e81007ad000e5e55255af7e12a6c6fb58bde (diff)
downloadopencode-d06afd87e5a0325730b11478eb49af4ced12608a.tar.gz
opencode-d06afd87e5a0325730b11478eb49af4ced12608a.zip
ignore: lander
Diffstat (limited to 'packages/console')
-rw-r--r--packages/console/app/src/component/footer.tsx7
-rw-r--r--packages/console/app/src/component/header.tsx7
-rw-r--r--packages/console/app/src/config.ts26
-rw-r--r--packages/console/app/src/lib/github.ts11
-rw-r--r--packages/console/app/src/routes/index.tsx776
5 files changed, 706 insertions, 121 deletions
diff --git a/packages/console/app/src/component/footer.tsx b/packages/console/app/src/component/footer.tsx
index 93d8e2d8c..5eac75967 100644
--- a/packages/console/app/src/component/footer.tsx
+++ b/packages/console/app/src/component/footer.tsx
@@ -1,6 +1,7 @@
import { createAsync } from "@solidjs/router"
import { createMemo } from "solid-js"
import { github } from "~/lib/github"
+import { config } from "~/config"
export function Footer() {
const githubData = createAsync(() => github())
@@ -10,13 +11,13 @@ export function Footer() {
notation: "compact",
compactDisplay: "short",
}).format(githubData()!.stars!)
- : "25K",
+ : config.github.starsFormatted.compact,
)
return (
<footer data-component="footer">
<div data-slot="cell">
- <a href="https://github.com/sst/opencode" target="_blank">
+ <a href={config.github.repoUrl} target="_blank">
GitHub <span>[{starCount()}]</span>
</a>
</div>
@@ -27,7 +28,7 @@ export function Footer() {
<a href="/discord">Discord</a>
</div>
<div data-slot="cell">
- <a href="https://x.com/opencode">X</a>
+ <a href={config.social.twitter}>X</a>
</div>
</footer>
)
diff --git a/packages/console/app/src/component/header.tsx b/packages/console/app/src/component/header.tsx
index 7a3d3acec..06e710a18 100644
--- a/packages/console/app/src/component/header.tsx
+++ b/packages/console/app/src/component/header.tsx
@@ -18,6 +18,7 @@ import { createMemo, Match, Show, Switch } from "solid-js"
import { createStore } from "solid-js/store"
import { github } from "~/lib/github"
import { createEffect, onCleanup } from "solid-js"
+import { config } from "~/config"
import "./header-context-menu.css"
const isDarkMode = () => window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -42,7 +43,7 @@ export function Header(props: { zen?: boolean }) {
notation: "compact",
compactDisplay: "short",
}).format(githubData()?.stars!)
- : "29K",
+ : config.github.starsFormatted.compact,
)
const [store, setStore] = createStore({
@@ -148,7 +149,7 @@ export function Header(props: { zen?: boolean }) {
<nav data-component="nav-desktop">
<ul>
<li>
- <a href="https://github.com/sst/opencode" target="_blank">
+ <a href={config.github.repoUrl} target="_blank">
GitHub <span>[{starCount()}]</span>
</a>
</li>
@@ -222,7 +223,7 @@ export function Header(props: { zen?: boolean }) {
<A href="/">Home</A>
</li>
<li>
- <a href="https://github.com/sst/opencode" target="_blank">
+ <a href={config.github.repoUrl} target="_blank">
GitHub <span>[{starCount()}]</span>
</a>
</li>
diff --git a/packages/console/app/src/config.ts b/packages/console/app/src/config.ts
new file mode 100644
index 000000000..097764b87
--- /dev/null
+++ b/packages/console/app/src/config.ts
@@ -0,0 +1,26 @@
+/**
+ * Application-wide constants and configuration
+ */
+export const config = {
+ // GitHub
+ github: {
+ repoUrl: "https://github.com/sst/opencode",
+ starsFormatted: {
+ compact: "30K",
+ full: "30,000",
+ },
+ },
+
+ // Social links
+ social: {
+ twitter: "https://x.com/opencode",
+ discord: "https://discord.gg/opencode",
+ },
+
+ // Static stats (used on landing page)
+ stats: {
+ contributors: "250",
+ commits: "3,500",
+ monthlyUsers: "300,000",
+ },
+} as const
diff --git a/packages/console/app/src/lib/github.ts b/packages/console/app/src/lib/github.ts
index 5f742aef6..dab317751 100644
--- a/packages/console/app/src/lib/github.ts
+++ b/packages/console/app/src/lib/github.ts
@@ -1,4 +1,5 @@
import { query } from "@solidjs/router"
+import { config } from "~/config"
export const github = query(async () => {
"use server"
@@ -6,11 +7,15 @@ export const github = query(async () => {
"User-Agent":
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36",
}
+ const apiBaseUrl = config.github.repoUrl.replace(
+ "https://github.com/",
+ "https://api.github.com/repos/",
+ )
try {
const [meta, releases, contributors] = await Promise.all([
- fetch("https://api.github.com/repos/sst/opencode", { headers }).then((res) => res.json()),
- fetch("https://api.github.com/repos/sst/opencode/releases", { headers }).then((res) => res.json()),
- fetch("https://api.github.com/repos/sst/opencode/contributors?per_page=1", { headers }),
+ fetch(apiBaseUrl, { headers }).then((res) => res.json()),
+ fetch(`${apiBaseUrl}/releases`, { headers }).then((res) => res.json()),
+ fetch(`${apiBaseUrl}/contributors?per_page=1`, { headers }),
])
const [release] = releases
const contributorCount = Number.parseInt(
diff --git a/packages/console/app/src/routes/index.tsx b/packages/console/app/src/routes/index.tsx
index fe6c5698b..a39524250 100644
--- a/packages/console/app/src/routes/index.tsx
+++ b/packages/console/app/src/routes/index.tsx
@@ -13,6 +13,7 @@ import { Footer } from "~/component/footer"
import { Legal } from "~/component/legal"
import { github } from "~/lib/github"
import { createMemo } from "solid-js"
+import { config } from "~/config"
function CopyStatus() {
return (
@@ -41,7 +42,10 @@ export default function Home() {
return (
<main data-page="opencode">
- <HttpHeader name="Cache-Control" value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400" />
+ <HttpHeader
+ name="Cache-Control"
+ value="public, max-age=1, s-maxage=3600, stale-while-revalidate=86400"
+ />
<Title>OpenCode | The AI coding agent built for the terminal</Title>
<Link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<Meta property="og:image" content="/social-share.png" />
@@ -54,19 +58,25 @@ export default function Home() {
<div data-slot="hero-copy">
<a
data-slot="releases"
- href={release()?.url ?? "https://github.com/sst/opencode/releases"}
+ href={release()?.url ?? `${config.github.repoUrl}/releases`}
target="_blank"
>
What’s new in {release()?.name ?? "the latest release"}
</a>
<strong>The AI coding agent built for the terminal</strong>
<p>
- OpenCode is fully open source, giving you control and freedom to use any provider, any model, and any
- editor.
+ OpenCode is fully open source, giving you control and freedom to use any provider,
+ any model, and any editor.
</p>
<a href="/docs">
<span>Read docs </span>
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
stroke="currentColor"
@@ -165,7 +175,10 @@ export default function Home() {
<section data-component="what">
<div data-slot="section-title">
<h3>What is OpenCode?</h3>
- <p>OpenCode is an open source agent that helps you write and run code directly from the terminal.</p>
+ <p>
+ OpenCode is an open source agent that helps you write and run code directly from the
+ terminal.
+ </p>
</div>
<ul>
<li>
@@ -183,7 +196,8 @@ export default function Home() {
<li>
<span>[*]</span>
<div>
- <strong>Multi-session</strong> Start multiple agents in parallel on the same project
+ <strong>Multi-session</strong> Start multiple agents in parallel on the same
+ project
</div>
</li>
<li>
@@ -195,13 +209,15 @@ export default function Home() {
<li>
<span>[*]</span>
<div>
- <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max account
+ <strong>Claude Pro</strong> Log in with Anthropic to use your Claude Pro or Max
+ account
</div>
</li>
<li>
<span>[*]</span>
<div>
- <strong>Any model</strong> 75+ LLM providers through Models.dev, including local models
+ <strong>Any model</strong> 75+ LLM providers through Models.dev, including local
+ models
</div>
</li>
<li>
@@ -219,16 +235,23 @@ export default function Home() {
<div>
<span>[*]</span>
<p>
- With over <strong>29,000</strong> GitHub stars, <strong>230</strong> contributors, and almost{" "}
- <strong>3,500</strong> commits, OpenCode is used and trusted by over <strong>250,000</strong>{" "}
- developers every month.
+ With over <strong>{config.github.starsFormatted.full}</strong> GitHub stars,{" "}
+ <strong>{config.stats.contributors}</strong> contributors, and almost{" "}
+ <strong>{config.stats.commits}</strong> commits, OpenCode is used and trusted by
+ over <strong>{config.stats.monthlyUsers}</strong> developers every month.
</p>
</div>
<div data-component="growth-stats">
<div data-component="growth-stat">
<div data-component="stat-illustration">
- <svg width="205" height="264" viewBox="0 0 205 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="205"
+ height="264"
+ viewBox="0 0 205 264"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<g opacity="0.5" clip-path="url(#clip0_236_15902)">
<mask
id="mask0_236_15902"
@@ -274,13 +297,20 @@ export default function Home() {
</svg>
</div>
<span>
- <figure>Fig 1.</figure> <strong>29K</strong> GitHub Stars
+ <figure>Fig 1.</figure> <strong>{config.github.starsFormatted.compact}</strong>{" "}
+ GitHub Stars
</span>
</div>
<div data-component="growth-stat">
<div data-component="stat-illustration">
- <svg width="205" height="264" viewBox="0 0 205 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="205"
+ height="264"
+ viewBox="0 0 205 264"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<g opacity="0.5" clip-path="url(#clip0_236_15557)">
<g clip-path="url(#clip1_236_15557)">
<rect opacity="0.81" width="6" height="6" fill="#CFCECD" />
@@ -409,12 +439,54 @@ export default function Home() {
<rect opacity="0.32" x="70" y="112" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.52" x="84" y="112" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.02" x="98" y="112" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.88" x="126" y="112" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.12" x="140" y="112" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.93" x="154" y="112" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.79" x="168" y="112" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.24" x="182" y="112" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.64" x="196" y="112" width="6" height="6" fill="#CFCECD" />
+ <rect
+ opacity="0.88"
+ x="126"
+ y="112"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.12"
+ x="140"
+ y="112"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.93"
+ x="154"
+ y="112"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.79"
+ x="168"
+ y="112"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.24"
+ x="182"
+ y="112"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.64"
+ x="196"
+ y="112"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
<rect opacity="0.57" y="126" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.6" x="14" y="126" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.05" x="28" y="126" width="6" height="6" fill="#BCBBBB" />
@@ -423,13 +495,55 @@ export default function Home() {
<rect opacity="0.93" x="70" y="126" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.63" x="84" y="126" width="6" height="6" fill="#DAD9D9" />
<rect opacity="0.58" x="98" y="126" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.64" x="112" y="126" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.74" x="126" y="126" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.74" x="140" y="126" width="6" height="6" fill="#8E8B8B" />
+ <rect
+ opacity="0.64"
+ x="112"
+ y="126"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.74"
+ x="126"
+ y="126"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.74"
+ x="140"
+ y="126"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
<rect opacity="0.1" x="154" y="126" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.93" x="168" y="126" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.43" x="182" y="126" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.45" x="196" y="126" width="6" height="6" fill="#BCBBBB" />
+ <rect
+ opacity="0.93"
+ x="168"
+ y="126"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.43"
+ x="182"
+ y="126"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.45"
+ x="196"
+ y="126"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
<rect opacity="0.77" y="140" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.78" x="14" y="140" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.18" x="28" y="140" width="6" height="6" fill="#DAD9D9" />
@@ -438,13 +552,55 @@ export default function Home() {
<rect opacity="0.53" x="70" y="140" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.06" x="84" y="140" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.81" x="98" y="140" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.49" x="112" y="140" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.45" x="126" y="140" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.37" x="140" y="140" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.58" x="154" y="140" width="6" height="6" fill="#8E8B8B" />
+ <rect
+ opacity="0.49"
+ x="112"
+ y="140"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.45"
+ x="126"
+ y="140"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.37"
+ x="140"
+ y="140"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.58"
+ x="154"
+ y="140"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
<rect opacity="0.8" x="168" y="140" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.35" x="182" y="140" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.73" x="196" y="140" width="6" height="6" fill="#8E8B8B" />
+ <rect
+ opacity="0.35"
+ x="182"
+ y="140"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.73"
+ x="196"
+ y="140"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
<rect opacity="0.92" y="154" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.32" x="14" y="154" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.3" x="28" y="154" width="6" height="6" fill="#8E8B8B" />
@@ -453,12 +609,47 @@ export default function Home() {
<rect opacity="0.66" x="70" y="154" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.83" x="84" y="154" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.52" x="98" y="154" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.82" x="112" y="154" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.95" x="126" y="154" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.89" x="140" y="154" width="6" height="6" fill="#CFCECD" />
+ <rect
+ opacity="0.82"
+ x="112"
+ y="154"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.95"
+ x="126"
+ y="154"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.89"
+ x="140"
+ y="154"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
<rect opacity="0.2" x="154" y="154" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.61" x="168" y="154" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.34" x="196" y="154" width="6" height="6" fill="#DAD9D9" />
+ <rect
+ opacity="0.61"
+ x="168"
+ y="154"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.34"
+ x="196"
+ y="154"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
<rect opacity="0.9" y="168" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.99" x="14" y="168" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.49" x="28" y="168" width="6" height="6" fill="#BCBBBB" />
@@ -467,13 +658,55 @@ export default function Home() {
<rect opacity="0.92" x="70" y="168" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.79" x="84" y="168" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.8" x="98" y="168" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.74" x="112" y="168" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.38" x="126" y="168" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.56" x="140" y="168" width="6" height="6" fill="#CFCECD" />
+ <rect
+ opacity="0.74"
+ x="112"
+ y="168"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.38"
+ x="126"
+ y="168"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.56"
+ x="140"
+ y="168"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
<rect opacity="0.7" x="154" y="168" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.47" x="168" y="168" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.92" x="182" y="168" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.19" x="196" y="168" width="6" height="6" fill="#BCBBBB" />
+ <rect
+ opacity="0.47"
+ x="168"
+ y="168"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.92"
+ x="182"
+ y="168"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.19"
+ x="196"
+ y="168"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
<rect opacity="0.12" y="182" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.16" x="14" y="182" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.98" x="28" y="182" width="6" height="6" fill="#8E8B8B" />
@@ -482,13 +715,55 @@ export default function Home() {
<rect opacity="0.17" x="70" y="182" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.26" x="84" y="182" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.3" x="98" y="182" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.12" x="112" y="182" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.31" x="126" y="182" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.62" x="140" y="182" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.74" x="154" y="182" width="6" height="6" fill="#DAD9D9" />
+ <rect
+ opacity="0.12"
+ x="112"
+ y="182"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.31"
+ x="126"
+ y="182"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.62"
+ x="140"
+ y="182"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.74"
+ x="154"
+ y="182"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
<rect opacity="0.8" x="168" y="182" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.89" x="182" y="182" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.75" x="196" y="182" width="6" height="6" fill="#DAD9D9" />
+ <rect
+ opacity="0.89"
+ x="182"
+ y="182"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.75"
+ x="196"
+ y="182"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
<rect opacity="0.1" y="196" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.11" x="14" y="196" width="6" height="6" fill="#DAD9D9" />
<rect opacity="0.79" x="28" y="196" width="6" height="6" fill="#BCBBBB" />
@@ -497,13 +772,62 @@ export default function Home() {
<rect opacity="0.31" x="70" y="196" width="6" height="6" fill="#DAD9D9" />
<rect opacity="0.33" x="84" y="196" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.2" x="98" y="196" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.21" x="112" y="196" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.02" x="126" y="196" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.82" x="140" y="196" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.28" x="154" y="196" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.19" x="168" y="196" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.97" x="182" y="196" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.45" x="196" y="196" width="6" height="6" fill="#DAD9D9" />
+ <rect
+ opacity="0.21"
+ x="112"
+ y="196"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.02"
+ x="126"
+ y="196"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.82"
+ x="140"
+ y="196"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.28"
+ x="154"
+ y="196"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.19"
+ x="168"
+ y="196"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.97"
+ x="182"
+ y="196"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.45"
+ x="196"
+ y="196"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
<rect opacity="0.88" y="210" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.58" x="14" y="210" width="6" height="6" fill="#DAD9D9" />
<rect opacity="0.53" x="28" y="210" width="6" height="6" fill="#BCBBBB" />
@@ -512,13 +836,55 @@ export default function Home() {
<rect opacity="0.73" x="70" y="210" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.87" x="84" y="210" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.35" x="98" y="210" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.61" x="112" y="210" width="6" height="6" fill="#8E8B8B" />
+ <rect
+ opacity="0.61"
+ x="112"
+ y="210"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
<rect opacity="0.8" x="126" y="210" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.87" x="140" y="210" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.77" x="154" y="210" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.94" x="168" y="210" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.59" x="182" y="210" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.37" x="196" y="210" width="6" height="6" fill="#8E8B8B" />
+ <rect
+ opacity="0.87"
+ x="140"
+ y="210"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.77"
+ x="154"
+ y="210"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.94"
+ x="168"
+ y="210"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.59"
+ x="182"
+ y="210"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.37"
+ x="196"
+ y="210"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
<rect opacity="0.7" y="224" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.72" x="14" y="224" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.95" x="28" y="224" width="6" height="6" fill="#CFCECD" />
@@ -528,12 +894,54 @@ export default function Home() {
<rect opacity="0.2" x="84" y="224" width="6" height="6" fill="#BCBBBB" />
<rect opacity="0.63" x="98" y="224" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.5" x="112" y="224" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.79" x="126" y="224" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.02" x="140" y="224" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.17" x="154" y="224" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.99" x="168" y="224" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.82" x="182" y="224" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.28" x="196" y="224" width="6" height="6" fill="#DAD9D9" />
+ <rect
+ opacity="0.79"
+ x="126"
+ y="224"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.02"
+ x="140"
+ y="224"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.17"
+ x="154"
+ y="224"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.99"
+ x="168"
+ y="224"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.82"
+ x="182"
+ y="224"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.28"
+ x="196"
+ y="224"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
<rect opacity="0.76" y="238" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.39" x="14" y="238" width="6" height="6" fill="#DAD9D9" />
<rect opacity="0.14" x="28" y="238" width="6" height="6" fill="#8E8B8B" />
@@ -542,13 +950,62 @@ export default function Home() {
<rect opacity="0.13" x="70" y="238" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.35" x="84" y="238" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.13" x="98" y="238" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.55" x="112" y="238" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.83" x="126" y="238" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.86" x="140" y="238" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.63" x="154" y="238" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.38" x="168" y="238" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.57" x="182" y="238" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.13" x="196" y="238" width="6" height="6" fill="#8E8B8B" />
+ <rect
+ opacity="0.55"
+ x="112"
+ y="238"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.83"
+ x="126"
+ y="238"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.86"
+ x="140"
+ y="238"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.63"
+ x="154"
+ y="238"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.38"
+ x="168"
+ y="238"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.57"
+ x="182"
+ y="238"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.13"
+ x="196"
+ y="238"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
<rect opacity="0.9" y="252" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.63" x="14" y="252" width="6" height="6" fill="#CFCECD" />
<rect opacity="0.23" x="28" y="252" width="6" height="6" fill="#8E8B8B" />
@@ -557,12 +1014,54 @@ export default function Home() {
<rect opacity="0.19" x="70" y="252" width="6" height="6" fill="#DAD9D9" />
<rect opacity="0.29" x="84" y="252" width="6" height="6" fill="#8E8B8B" />
<rect opacity="0.78" x="98" y="252" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.14" x="112" y="252" width="6" height="6" fill="#BCBBBB" />
- <rect opacity="0.64" x="126" y="252" width="6" height="6" fill="#8E8B8B" />
- <rect opacity="0.27" x="140" y="252" width="6" height="6" fill="#CFCECD" />
- <rect opacity="0.85" x="154" y="252" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.02" x="168" y="252" width="6" height="6" fill="#DAD9D9" />
- <rect opacity="0.29" x="182" y="252" width="6" height="6" fill="#8E8B8B" />
+ <rect
+ opacity="0.14"
+ x="112"
+ y="252"
+ width="6"
+ height="6"
+ fill="#BCBBBB"
+ />
+ <rect
+ opacity="0.64"
+ x="126"
+ y="252"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
+ <rect
+ opacity="0.27"
+ x="140"
+ y="252"
+ width="6"
+ height="6"
+ fill="#CFCECD"
+ />
+ <rect
+ opacity="0.85"
+ x="154"
+ y="252"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.02"
+ x="168"
+ y="252"
+ width="6"
+ height="6"
+ fill="#DAD9D9"
+ />
+ <rect
+ opacity="0.29"
+ x="182"
+ y="252"
+ width="6"
+ height="6"
+ fill="#8E8B8B"
+ />
<rect opacity="0.4" x="196" y="252" width="6" height="6" fill="#8E8B8B" />
</g>
</g>
@@ -571,7 +1070,12 @@ export default function Home() {
<rect width="205" height="264" fill="white" />
</clipPath>
<clipPath id="clip1_236_15557">
- <rect width="236" height="264" fill="white" transform="translate(-0.164062)" />
+ <rect
+ width="236"
+ height="264"
+ fill="white"
+ transform="translate(-0.164062)"
+ />
</clipPath>
</defs>
</svg>
@@ -583,7 +1087,13 @@ export default function Home() {
<div data-component="growth-stat">
<div data-component="stat-illustration">
- <svg width="205" height="264" viewBox="0 0 205 264" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="205"
+ height="264"
+ viewBox="0 0 205 264"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<g opacity="0.5">
<path d="M205 0H203.985V264H205V0Z" fill="#8E8B8B" />
<path d="M197.896 34H196.881V264H197.896V34Z" fill="#8E8B8B" />
@@ -633,8 +1143,9 @@ export default function Home() {
<span>[*]</span>
<p>
- OpenCode does not store any of your code or context data, so that it can operate in privacy sensitive
- environments. Learn more about <a href="/docs/enterprise/ ">privacy</a>.
+ OpenCode does not store any of your code or context data, so that it can operate
+ in privacy sensitive environments. Learn more about{" "}
+ <a href="/docs/enterprise/ ">privacy</a>.
</p>
</div>
</div>
@@ -647,9 +1158,9 @@ export default function Home() {
<ul>
<li>
<Faq question="What is OpenCode?">
- OpenCode is an open source agent that helps you write and run code directly from the terminal. You can
- pair OpenCode with any AI model, and because it’s terminal-based you can pair it with your preferred
- code editor.
+ OpenCode is an open source agent that helps you write and run code directly from
+ the terminal. You can pair OpenCode with any AI model, and because it’s
+ terminal-based you can pair it with your preferred code editor.
</Faq>
</li>
<li>
@@ -659,44 +1170,46 @@ export default function Home() {
</li>
<li>
<Faq question="Do I need extra AI subscriptions to use OpenCode?">
- Not necessarily, but probably. You’ll need an AI subscription if you want to connect OpenCode to a
- paid provider, although you can work with{" "}
+ Not necessarily, but probably. You’ll need an AI subscription if you want to
+ connect OpenCode to a paid provider, although you can work with{" "}
<a href="/docs/providers/#lm-studio" target="_blank">
local models
</a>{" "}
- for free. While we encourage users to use <A href="/zen">Zen</A>, OpenCode works with all popular
- providers such as OpenAI, Anthropic, xAI etc.
+ for free. While we encourage users to use <A href="/zen">Zen</A>, OpenCode works
+ with all popular providers such as OpenAI, Anthropic, xAI etc.
</Faq>
</li>
<li>
<Faq question="Can I only use OpenCode in the terminal?">
- Yes, for now. We are actively working on a desktop app. Join the waitlist for early access.
+ Yes, for now. We are actively working on a desktop app. Join the waitlist for
+ early access.
</Faq>
</li>
<li>
<Faq question="How much does OpenCode cost?">
- OpenCode is 100% free to use. Any additional costs will come from your subscription to a model
- provider. While OpenCode works with any model provider, we recommend using <A href="/zen">Zen</A>.
+ OpenCode is 100% free to use. Any additional costs will come from your
+ subscription to a model provider. While OpenCode works with any model provider, we
+ recommend using <A href="/zen">Zen</A>.
</Faq>
</li>
<li>
<Faq question="What about data and privacy?">
- Your data and information is only stored when you create sharable links in OpenCode. Learn more about{" "}
- <a href="/docs/share/#privacy">share pages</a>.
+ Your data and information is only stored when you create sharable links in
+ OpenCode. Learn more about <a href="/docs/share/#privacy">share pages</a>.
</Faq>
</li>
<li>
<Faq question="Is OpenCode open source?">
Yes, OpenCode is fully open source. The source code is public on{" "}
- <a href="https://github.com/sst/opencode" target="_blank">
+ <a href={config.github.repoUrl} target="_blank">
GitHub
</a>{" "}
under the{" "}
- <a href="https://github.com/sst/opencode?tab=MIT-1-ov-file#readme" target="_blank">
+ <a href={`${config.github.repoUrl}?tab=MIT-1-ov-file#readme`} target="_blank">
MIT License
</a>
- , meaning anyone can use, modify, or contribute to its development. Anyone from the community can file
- issues, submit pull requests, and extend functionality.
+ , meaning anyone can use, modify, or contribute to its development. Anyone from
+ the community can file issues, submit pull requests, and extend functionality.
</Faq>
</li>
</ul>
@@ -706,13 +1219,19 @@ export default function Home() {
<div data-slot="zen-cta-copy">
<strong>Access reliable optimized models for coding agents</strong>
<p>
- Zen gives you access to a handpicked set of AI models that OpenCode has tested and benchmarked
- specifically for coding agents. No need to worry about inconsistent performance and quality across
- providers, use validated models that work.
+ Zen gives you access to a handpicked set of AI models that OpenCode has tested and
+ benchmarked specifically for coding agents. No need to worry about inconsistent
+ performance and quality across providers, use validated models that work.
</p>
<div data-slot="model-logos">
<div>
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<mask
id="mask0_79_128586"
style="mask-type:luminance"
@@ -733,8 +1252,17 @@ export default function Home() {
</svg>
</div>
<div>
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M13.7891 3.93164L20.2223 20.0677H23.7502L17.317 3.93164H13.7891Z" fill="currentColor" />
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M13.7891 3.93164L20.2223 20.0677H23.7502L17.317 3.93164H13.7891Z"
+ fill="currentColor"
+ />
<path
d="M6.32538 13.6824L8.52662 8.01177L10.7279 13.6824H6.32538ZM6.68225 3.93164L0.25 20.0677H3.84652L5.16202 16.6791H11.8914L13.2067 20.0677H16.8033L10.371 3.93164H6.68225Z"
fill="currentColor"
@@ -742,7 +1270,13 @@ export default function Home() {
</svg>
</div>
<div>
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
d="M9.16861 16.0529L17.2018 9.85156C17.5957 9.54755 18.1586 9.66612 18.3463 10.1384C19.3339 12.6288 18.8926 15.6217 16.9276 17.6766C14.9626 19.7314 12.2285 20.1821 9.72948 19.1557L6.9995 20.4775C10.9151 23.2763 15.6699 22.5841 18.6411 19.4749C20.9979 17.0103 21.7278 13.6508 21.0453 10.6214L21.0515 10.6278C20.0617 6.17736 21.2948 4.39847 23.8207 0.760904C23.8804 0.674655 23.9402 0.588405 24 0.5L20.6762 3.97585V3.96506L9.16658 16.0551"
fill="currentColor"
@@ -754,7 +1288,13 @@ export default function Home() {
</svg>
</div>
<div>
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
fill-rule="evenodd"
clip-rule="evenodd"
@@ -764,7 +1304,13 @@ export default function Home() {
</svg>
</div>
<div>
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
d="M12.6241 11.346L20.3848 3.44816C20.5309 3.29931 20.4487 3 20.2601 3H16.0842C16.0388 3 15.9949 3.01897 15.9594 3.05541L7.59764 11.5629C7.46721 11.6944 7.27446 11.5771 7.27446 11.3666V3.25183C7.27446 3.11242 7.18515 3 7.07594 3H4.19843C4.08932 3 4 3.11242 4 3.25183V20.7482C4 20.8876 4.08932 21 4.19843 21H7.07594C7.18515 21 7.27446 20.8876 7.27446 20.7482V17.1834C7.27446 17.1073 7.30136 17.0344 7.34815 16.987L9.94075 14.3486C10.0031 14.2853 10.0895 14.2757 10.159 14.3232L17.0934 19.5573C18.2289 20.3412 19.4975 20.8226 20.786 20.9652C20.9008 20.9778 21 20.8606 21 20.7133V17.3559C21 17.2276 20.9249 17.1232 20.8243 17.1073C20.0659 16.9853 19.326 16.6845 18.6569 16.222L12.6538 11.764C12.5291 11.6785 12.5135 11.4584 12.6241 11.346Z"
fill="currentColor"
@@ -774,7 +1320,13 @@ export default function Home() {
</div>
<A href="/zen">
<span>Learn about Zen </span>
- <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <svg
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ >
<path
d="M6.5 12L17 12M13 16.5L17.5 12L13 7.5"
stroke="currentColor"