feat(console): switch install links to v2 (#49874)

This commit is contained in:
Dax
2026-09-19 01:27:27 +00:00
committed by GitHub
parent 5f9d9187c0
commit 285cff53da
6 changed files with 40 additions and 269 deletions
@@ -143,12 +143,12 @@ export function Header(props: { zen?: boolean; go?: boolean; hideGetStarted?: bo
<nav data-component="nav-desktop">
<ul>
<li>
<a href={config.github.repoUrl} target="_blank" style="white-space: nowrap;">
<a href={`${config.github.repoUrl}/tree/v2`} target="_blank" style="white-space: nowrap;">
{i18n.t("nav.github")}
</a>
</li>
<li>
<a href={language.route("/docs")}>{i18n.t("nav.docs")}</a>
<a href="/v2/docs">{i18n.t("nav.docs")}</a>
</li>
<li>
<a href={language.route("/data")}>{i18n.t("nav.data")}</a>
@@ -243,12 +243,12 @@ export function Header(props: { zen?: boolean; go?: boolean; hideGetStarted?: bo
<A href={language.route("/")}>{i18n.t("nav.home")}</A>
</li>
<li>
<a href={config.github.repoUrl} target="_blank" style="white-space: nowrap;">
<a href={`${config.github.repoUrl}/tree/v2`} target="_blank" style="white-space: nowrap;">
{i18n.t("nav.github")}
</a>
</li>
<li>
<a href={language.route("/docs")}>{i18n.t("nav.docs")}</a>
<a href="/v2/docs">{i18n.t("nav.docs")}</a>
</li>
<li>
<a href={language.route("/data")}>{i18n.t("nav.data")}</a>
@@ -314,98 +314,6 @@
}
}
/* Download Hero Section */
[data-component="download-hero"] {
display: grid;
grid-template-columns: 255px 1fr;
gap: 4rem;
padding: 4px;
border: 1px solid var(--color-border-weak);
border-radius: 8px;
margin-bottom: 4rem;
@media (max-width: 50rem) {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 2rem;
}
[data-component="hero-video"] {
video {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 4px;
@media (max-width: 50rem) {
aspect-ratio: 16 / 9;
}
}
}
[data-component="hero-text"] {
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 3rem;
@media (max-width: 50rem) {
padding: 1.5rem;
}
h1 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-strong);
margin-bottom: 4px;
@media (max-width: 40rem) {
margin-bottom: 1rem;
}
}
p {
color: var(--color-text);
margin-bottom: 12px;
@media (max-width: 40rem) {
margin-bottom: 2.5rem;
line-height: 1.6;
}
}
[data-component="download-button"] {
padding: 8px 20px 8px 16px;
background: var(--color-background-strong);
color: var(--color-text-inverted);
border: none;
border-radius: 4px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.2s ease;
text-decoration: none;
width: fit-content;
&:hover:not(:disabled) {
background: var(--color-background-strong-hover);
}
&:active {
transform: scale(0.98);
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
}
}
}
}
/* Download Sections */
[data-component="download-section"] {
display: grid;
@@ -1,7 +1,6 @@
import "./index.css"
import { Meta, Title } from "@solidjs/meta"
import { A } from "@solidjs/router"
import { createSignal, type JSX, onMount, Show } from "solid-js"
import { Faq } from "~/component/faq"
import { Footer } from "~/component/footer"
import { Header } from "~/component/header"
@@ -11,52 +10,12 @@ import { LocaleLinks } from "~/component/locale-links"
import { config } from "~/config"
import { useI18n } from "~/context/i18n"
import { useLanguage } from "~/context/language"
import desktopTabsVideo from "../../asset/lander/desktop-tabs-landscape.mp4"
import type { DownloadPlatform } from "./types"
type OS = "macOS" | "Windows" | "Linux" | null
function detectOS(): OS {
if (typeof navigator === "undefined") return null
const platform = navigator.platform.toLowerCase()
const userAgent = navigator.userAgent.toLowerCase()
if (platform.includes("mac") || userAgent.includes("mac")) return "macOS"
if (platform.includes("win") || userAgent.includes("win")) return "Windows"
if (platform.includes("linux") || userAgent.includes("linux")) return "Linux"
return null
}
function getDownloadPlatform(os: OS): DownloadPlatform {
switch (os) {
case "macOS":
return "darwin-aarch64-dmg"
case "Windows":
return "windows-x64-nsis"
case "Linux":
return "linux-x64-deb"
default:
return "darwin-aarch64-dmg"
}
}
function getDownloadHref(platform: DownloadPlatform, channel: "stable" | "beta" = "stable") {
return `/download/${channel}/${platform}`
}
function IconDownload(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
return (
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
<path
d="M13.9583 10.6247L10 14.583L6.04167 10.6247M10 2.08301V13.958M16.25 17.9163H3.75"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="square"
/>
</svg>
)
}
function CopyStatus() {
return (
<span data-component="copy-status">
@@ -69,12 +28,6 @@ function CopyStatus() {
export default function Download() {
const i18n = useI18n()
const language = useLanguage()
const [detectedOS, setDetectedOS] = createSignal<OS>(null)
onMount(() => {
setDetectedOS(detectOS())
})
const handleCopyClick = (command: string) => (event: Event) => {
const button = event.currentTarget as HTMLButtonElement
void navigator.clipboard.writeText(command)
@@ -92,27 +45,6 @@ export default function Download() {
<Header hideGetStarted />
<div data-component="content">
<section data-component="download-hero">
<div data-component="hero-video">
<video src={desktopTabsVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
</div>
<div data-component="hero-text">
<h1>{i18n.t("download.hero.title")}</h1>
<p>
{i18n.t("home.promo.body")} {i18n.t("home.promo.cta")}
</p>
<Show when={detectedOS()}>
<a
href={language.route(getDownloadHref(getDownloadPlatform(detectedOS())))}
data-component="download-button"
>
<IconDownload />
{i18n.t("download.hero.button", { os: detectedOS()! })}
</a>
</Show>
</div>
</section>
<section data-component="download-section">
<div data-component="section-label">
<span>[1]</span> {i18n.t("download.section.terminal")}
@@ -120,34 +52,40 @@ export default function Download() {
<div data-component="section-content">
<button
data-component="cli-row"
onClick={handleCopyClick("curl -fsSL https://opencode.ai/install | bash")}
onClick={handleCopyClick("curl -fsSL https://opencode.ai/v2/install | bash")}
>
<code>
curl -fsSL https://<strong>opencode.ai/install</strong> | bash
curl -fsSL https://<strong>opencode.ai/v2/install</strong> | bash
</code>
<CopyStatus />
</button>
<button data-component="cli-row" onClick={handleCopyClick("npm i -g opencode-ai")}>
<button data-component="cli-row" onClick={handleCopyClick("npm install -g @opencode/cli")}>
<code>
npm i -g <strong>opencode-ai</strong>
npm install -g <strong>@opencode/cli</strong>
</code>
<CopyStatus />
</button>
<button data-component="cli-row" onClick={handleCopyClick("bun add -g opencode-ai")}>
<button data-component="cli-row" onClick={handleCopyClick("bun install -g --trust @opencode/cli")}>
<code>
bun add -g <strong>opencode-ai</strong>
bun install -g --trust <strong>@opencode/cli</strong>
</code>
<CopyStatus />
</button>
<button data-component="cli-row" onClick={handleCopyClick("brew install anomalyco/tap/opencode")}>
<button data-component="cli-row" onClick={handleCopyClick("brew install anomalyco/tap/opencode-v2")}>
<code>
brew install <strong>anomalyco/tap/opencode</strong>
brew install <strong>anomalyco/tap/opencode-v2</strong>
</code>
<CopyStatus />
</button>
<button data-component="cli-row" onClick={handleCopyClick("paru -S opencode")}>
<button data-component="cli-row" onClick={handleCopyClick("paru -S opencode-beta")}>
<code>
paru -S <strong>opencode</strong>
paru -S <strong>opencode-beta</strong>
</code>
<CopyStatus />
</button>
<button data-component="cli-row" onClick={handleCopyClick("yay -S opencode-beta")}>
<code>
yay -S <strong>opencode-beta</strong>
</code>
<CopyStatus />
</button>
-71
View File
@@ -490,77 +490,6 @@ body {
}
}
[data-component="desktop-app-banner"] {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 32px;
[data-slot="badge"] {
background: var(--color-background-strong);
color: var(--color-text-inverted);
font-weight: 500;
padding: 4px 8px;
line-height: 1;
flex-shrink: 0;
}
[data-slot="content"] {
display: flex;
align-items: center;
gap: 1ch;
}
[data-slot="text"] {
color: var(--color-text-strong);
line-height: 1.4;
@media (max-width: 30.625rem) {
display: none;
}
}
[data-slot="platforms"] {
@media (max-width: 49.125rem) {
display: none;
}
}
[data-slot="link"] {
color: var(--color-text-weak);
white-space: nowrap;
text-decoration: none;
@media (max-width: 30.625rem) {
display: none;
}
}
[data-slot="link"]:hover {
color: var(--color-text);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
[data-slot="link-mobile"] {
display: none;
color: var(--color-text-strong);
white-space: nowrap;
text-decoration: none;
@media (max-width: 30.625rem) {
display: inline;
}
}
[data-slot="link-mobile"]:hover {
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
}
}
[data-slot="hero-copy"] {
[data-slot="releases"] {
background: none;
+19 -23
View File
@@ -54,22 +54,6 @@ export default function Home() {
<div data-component="content">
<section data-component="hero">
<div data-component="desktop-app-banner">
<span data-slot="badge">{i18n.t("home.banner.badge")}</span>
<div data-slot="content">
<span data-slot="text">
{i18n.t("home.banner.text")}
<span data-slot="platforms"> {i18n.t("home.banner.platforms")}</span>.
</span>
<a href={language.route("/download")} data-slot="link">
{i18n.t("home.banner.downloadNow")}
</a>
<a href={language.route("/download")} data-slot="link-mobile">
{i18n.t("home.banner.downloadBetaNow")}
</a>
</div>
</div>
<div data-slot="hero-copy">
{/*<a data-slot="releases"*/}
{/* href={release()?.url ?? `${config.github.repoUrl}/releases`}*/}
@@ -107,6 +91,9 @@ export default function Home() {
<Tabs.Trigger value="paru" data-slot="tab">
paru
</Tabs.Trigger>
<Tabs.Trigger value="yay" data-slot="tab">
yay
</Tabs.Trigger>
<Tabs.Indicator />
</Tabs.List>
<div data-slot="panels">
@@ -115,7 +102,7 @@ export default function Home() {
<span data-slot="command-script">
<span>curl -fsSL </span>
<span data-slot="protocol">https://</span>
<span data-slot="highlight">opencode.ai/install</span>
<span data-slot="highlight">opencode.ai/v2/install</span>
<span> | bash</span>
</span>
<CopyStatus />
@@ -124,8 +111,8 @@ export default function Home() {
<Tabs.Content as="pre" data-slot="panel" value="npm">
<button data-copy data-slot="command" onClick={handleCopyClick}>
<span>
<span data-slot="protocol">npm i -g </span>
<span data-slot="highlight">opencode-ai</span>
<span data-slot="protocol">npm install -g </span>
<span data-slot="highlight">@opencode/cli</span>
</span>
<CopyStatus />
</button>
@@ -133,8 +120,8 @@ export default function Home() {
<Tabs.Content as="pre" data-slot="panel" value="bun">
<button data-copy data-slot="command" onClick={handleCopyClick}>
<span>
<span data-slot="protocol">bun add -g </span>
<span data-slot="highlight">opencode-ai</span>
<span data-slot="protocol">bun install -g --trust </span>
<span data-slot="highlight">@opencode/cli</span>
</span>
<CopyStatus />
</button>
@@ -143,7 +130,7 @@ export default function Home() {
<button data-copy data-slot="command" onClick={handleCopyClick}>
<span>
<span data-slot="protocol">brew install </span>
<span data-slot="highlight">anomalyco/tap/opencode</span>
<span data-slot="highlight">anomalyco/tap/opencode-v2</span>
</span>
<CopyStatus />
</button>
@@ -152,7 +139,16 @@ export default function Home() {
<button data-copy data-slot="command" onClick={handleCopyClick}>
<span>
<span data-slot="protocol">paru -S </span>
<span data-slot="highlight">opencode</span>
<span data-slot="highlight">opencode-beta</span>
</span>
<CopyStatus />
</button>
</Tabs.Content>
<Tabs.Content as="pre" data-slot="panel" value="yay">
<button data-copy data-slot="command" onClick={handleCopyClick}>
<span>
<span data-slot="protocol">yay -S </span>
<span data-slot="highlight">opencode-beta</span>
</span>
<CopyStatus />
</button>
+1 -1
View File
@@ -9,6 +9,6 @@ export default {
discord: "https://opencode.ai/discord",
headerLinks: [
{ name: "app.header.home", url: "/" },
{ name: "app.header.docs", url: "/docs/" },
{ name: "app.header.docs", url: "/v2/docs" },
],
}