monadical/opencode
14
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

feat(web): i18n (#12471)

Browse Source
This commit is contained in:
Adam
2026-02-06 08:54:51 -06:00
committed by GitHub
parent 0ec5f6608b
commit 812597bb8b
75 changed files with 9868 additions and 726 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/console/app/src/routes/download/index.css
View File

@@ -114,6 +114,7 @@
border-radius: 4px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
@media (max-width: 55rem) {
display: none;

116
packages/console/app/src/routes/download/index.tsx
View File

@@ -10,6 +10,7 @@ import { Legal } from "~/component/legal"
import { config } from "~/config"
import { createSignal, onMount, Show, JSX } from "solid-js"
import { DownloadPlatform } from "./types"
import { useI18n } from "~/context/i18n"
type OS = "macOS" | "Windows" | "Linux" | null
@@ -64,6 +65,7 @@ function CopyStatus() {
}
export default function Download() {
const i18n = useI18n()
const [detectedOS, setDetectedOS] = createSignal<OS>(null)
onMount(() => {
@@ -80,24 +82,24 @@ export default function Download() {
}
return (
<main data-page="download">
<Title>OpenCode | Download</Title>
<Title>{i18n.t("download.title")}</Title>
<Link rel="canonical" href={`${config.baseUrl}/download`} />
<Meta name="description" content="Download OpenCode for macOS, Windows, and Linux" />
<Meta name="description" content={i18n.t("download.meta.description")} />
<div data-component="container">
<Header hideGetStarted />
<div data-component="content">
<section data-component="download-hero">
<div data-component="hero-icon">
<img src={desktopAppIcon} alt="OpenCode Desktop" />
<img src={desktopAppIcon} alt="" />
</div>
<div data-component="hero-text">
<h1>Download OpenCode</h1>
<p>Available in Beta for macOS, Windows, and Linux</p>
<h1>{i18n.t("download.hero.title")}</h1>
<p>{i18n.t("download.hero.subtitle")}</p>
<Show when={detectedOS()}>
<a href={getDownloadHref(getDownloadPlatform(detectedOS()))} data-component="download-button">
<IconDownload />
Download for {detectedOS()}
{i18n.t("download.hero.button", { os: detectedOS()! })}
</a>
</Show>
</div>
@@ -105,7 +107,7 @@ export default function Download() {
<section data-component="download-section">
<div data-component="section-label">
<span>[1]</span> OpenCode Terminal
<span>[1]</span> {i18n.t("download.section.terminal")}
</div>
<div data-component="section-content">
<button
@@ -146,7 +148,7 @@ export default function Download() {
<section data-component="download-section">
<div data-component="section-label">
<span>[2]</span> OpenCode Desktop (Beta)
<span>[2]</span> {i18n.t("download.section.desktop")}
</div>
<div data-component="section-content">
<button data-component="cli-row" onClick={handleCopyClick("brew install --cask opencode-desktop")}>
@@ -165,12 +167,10 @@ export default function Download() {
/>
</svg>
</span>
<span>
macOS (<span data-slot="hide-narrow">Apple </span>Silicon)
</span>
<span>{i18n.t("download.platform.macosAppleSilicon")}</span>
</div>
<a href={getDownloadHref("darwin-aarch64-dmg")} data-component="action-button">
Download
{i18n.t("download.action.download")}
</a>
</div>
<div data-component="download-row">
@@ -183,10 +183,10 @@ export default function Download() {
/>
</svg>
</span>
<span>macOS (Intel)</span>
<span>{i18n.t("download.platform.macosIntel")}</span>
</div>
<a href={getDownloadHref("darwin-x64-dmg")} data-component="action-button">
Download
{i18n.t("download.action.download")}
</a>
</div>
<div data-component="download-row">
@@ -206,10 +206,10 @@ export default function Download() {
</defs>
</svg>
</span>
<span>Windows (x64)</span>
<span>{i18n.t("download.platform.windowsX64")}</span>
</div>
<a href={getDownloadHref("windows-x64-nsis")} data-component="action-button">
Download
{i18n.t("download.action.download")}
</a>
</div>
<div data-component="download-row">
@@ -222,10 +222,10 @@ export default function Download() {
/>
</svg>
</span>
<span>Linux (.deb)</span>
<span>{i18n.t("download.platform.linuxDeb")}</span>
</div>
<a href={getDownloadHref("linux-x64-deb")} data-component="action-button">
Download
{i18n.t("download.action.download")}
</a>
</div>
<div data-component="download-row">
@@ -238,10 +238,10 @@ export default function Download() {
/>
</svg>
</span>
<span>Linux (.rpm)</span>
<span>{i18n.t("download.platform.linuxRpm")}</span>
</div>
<a href={getDownloadHref("linux-x64-rpm")} data-component="action-button">
Download
{i18n.t("download.action.download")}
</a>
</div>
{/* Disabled temporarily as it doesn't work */}
@@ -266,7 +266,7 @@ export default function Download() {
<section data-component="download-section">
<div data-component="section-label">
<span>[3]</span> OpenCode Extensions
<span>[3]</span> {i18n.t("download.section.extensions")}
</div>
<div data-component="section-content">
<div data-component="download-row">
@@ -289,7 +289,7 @@ export default function Download() {
<span>VS Code</span>
</div>
<a href="https://opencode.ai/docs/ide/" data-component="action-button">
Install
{i18n.t("download.action.install")}
</a>
</div>
@@ -313,7 +313,7 @@ export default function Download() {
<span>Cursor</span>
</div>
<a href="https://opencode.ai/docs/ide/" data-component="action-button">
Install
{i18n.t("download.action.install")}
</a>
</div>
@@ -330,7 +330,7 @@ export default function Download() {
<span>Zed</span>
</div>
<a href="https://opencode.ai/docs/ide/" data-component="action-button">
Install
{i18n.t("download.action.install")}
</a>
</div>
@@ -347,7 +347,7 @@ export default function Download() {
<span>Windsurf</span>
</div>
<a href="https://opencode.ai/docs/ide/" data-component="action-button">
Install
{i18n.t("download.action.install")}
</a>
</div>
@@ -364,7 +364,7 @@ export default function Download() {
<span>VSCodium</span>
</div>
<a href="https://opencode.ai/docs/ide/" data-component="action-button">
Install
{i18n.t("download.action.install")}
</a>
</div>
</div>
@@ -372,7 +372,7 @@ export default function Download() {
<section data-component="download-section">
<div data-component="section-label">
<span>[4]</span> OpenCode Integrations
<span>[4]</span> {i18n.t("download.section.integrations")}
</div>
<div data-component="section-content">
<div data-component="download-row">
@@ -388,7 +388,7 @@ export default function Download() {
<span>GitHub</span>
</div>
<a href="https://opencode.ai/docs/github/" data-component="action-button">
Install
{i18n.t("download.action.install")}
</a>
</div>
@@ -405,7 +405,7 @@ export default function Download() {
<span>GitLab</span>
</div>
<a href="https://opencode.ai/docs/gitlab/" data-component="action-button">
Install
{i18n.t("download.action.install")}
</a>
</div>
</div>
@@ -414,61 +414,57 @@ export default function Download() {
<section data-component="faq">
<div data-slot="section-title">
<h3>FAQ</h3>
<h3>{i18n.t("common.faq")}</h3>
</div>
<ul>
<li>
<Faq question="What is OpenCode?">
OpenCode is an open source agent that helps you write and run code with any AI model. It's available as
a terminal-based interface, desktop app, or IDE extension.
<Faq question={i18n.t("home.faq.q1")}>{i18n.t("home.faq.a1")}</Faq>
</li>
<li>
<Faq question={i18n.t("home.faq.q2")}>
{i18n.t("home.faq.a2.before")} <a href="/docs">{i18n.t("home.faq.a2.link")}</a>.
</Faq>
</li>
<li>
<Faq question="How do I use OpenCode?">
The easiest way to get started is to read the <a href="/docs">intro</a>.
</Faq>
</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{" "}
<Faq question={i18n.t("home.faq.q3")}>
{i18n.t("download.faq.a3.beforeLocal")}{" "}
<a href="/docs/providers/#lm-studio" target="_blank">
local models
{i18n.t("download.faq.a3.localLink")}
</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.
{i18n.t("download.faq.a3.afterLocal.beforeZen")} <A href="/zen">{i18n.t("nav.zen")}</A>
{i18n.t("download.faq.a3.afterZen")}
</Faq>
</li>
<li>
<Faq question="Can I only use OpenCode in the terminal?">
Not anymore! OpenCode is now available as an app for your <a href="/download">desktop</a> and{" "}
<a href="/docs/cli/#web">web</a>!
<Faq question={i18n.t("home.faq.q5")}>
{i18n.t("home.faq.a5.beforeDesktop")} <a href="/download">{i18n.t("home.faq.a5.desktop")}</a>{" "}
{i18n.t("home.faq.a5.and")} <a href="/docs/cli/#web">{i18n.t("home.faq.a5.web")}</a>!
</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>.
<Faq question={i18n.t("home.faq.q6")}>
{i18n.t("download.faq.a5.p1")} {i18n.t("download.faq.a5.p2.beforeZen")}{" "}
<A href="/zen">{i18n.t("nav.zen")}</A>
{i18n.t("download.faq.a5.p2.afterZen")}
</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>.
<Faq question={i18n.t("home.faq.q7")}>
{i18n.t("download.faq.a6.p1")} {i18n.t("download.faq.a6.p2.beforeShare")}{" "}
<a href="/docs/share/#privacy">{i18n.t("download.faq.a6.shareLink")}</a>.
</Faq>
</li>
<li>
<Faq question="Is OpenCode open source?">
Yes, OpenCode is fully open source. The source code is public on{" "}
<Faq question={i18n.t("home.faq.q8")}>
{i18n.t("home.faq.a8.p1")}{" "}
<a href={config.github.repoUrl} target="_blank">
GitHub
{i18n.t("nav.github")}
</a>{" "}
under the{" "}
{i18n.t("home.faq.a8.p2")}{" "}
<a href={`${config.github.repoUrl}?tab=MIT-1-ov-file#readme`} target="_blank">
MIT License
{i18n.t("home.faq.a8.mitLicense")}
</a>
, meaning anyone can use, modify, or contribute to its development. Anyone from the community can file
issues, submit pull requests, and extend functionality.
{i18n.t("home.faq.a8.p3")}
</Faq>
</li>
</ul>