From 07cf8847fb1908ff5dc47a771f57d23926baa1ce Mon Sep 17 00:00:00 2001 From: Dax Raad Date: Fri, 15 Aug 2025 19:29:24 -0400 Subject: wip: cloud stuff --- cloud/app/src/routes/[...404].tsx | 19 +++ cloud/app/src/routes/index.css | 264 ++++++++++++++++++++++++++++++++++++++ cloud/app/src/routes/index.tsx | 169 ++++++++++++++++++++++++ 3 files changed, 452 insertions(+) create mode 100644 cloud/app/src/routes/[...404].tsx create mode 100644 cloud/app/src/routes/index.css create mode 100644 cloud/app/src/routes/index.tsx (limited to 'cloud/app/src/routes') diff --git a/cloud/app/src/routes/[...404].tsx b/cloud/app/src/routes/[...404].tsx new file mode 100644 index 000000000..4ea71ec7f --- /dev/null +++ b/cloud/app/src/routes/[...404].tsx @@ -0,0 +1,19 @@ +import { Title } from "@solidjs/meta"; +import { HttpStatusCode } from "@solidjs/start"; + +export default function NotFound() { + return ( +
+ Not Found + +

Page Not Found

+

+ Visit{" "} + + start.solidjs.com + {" "} + to learn how to build SolidStart apps. +

+
+ ); +} diff --git a/cloud/app/src/routes/index.css b/cloud/app/src/routes/index.css new file mode 100644 index 000000000..e3b11c605 --- /dev/null +++ b/cloud/app/src/routes/index.css @@ -0,0 +1,264 @@ +[data-page="home"] { + --color-bg: oklch(0.2097 0.008 274.53); + --color-border: oklch(0.46 0.02 269.88); + --color-text: #ffffff; + --color-text-secondary: oklch(0.72 0.01 270.15); + --color-text-dimmed: hsl(224, 7%, 46%); + padding: var(--space-6); + font-family: var(--font-mono); + color: var(--color-text); + + a { + color: var(--color-text); + text-decoration: underline; + text-underline-offset: 0.1875rem; + } + + background: var(--color-bg); + position: fixed; + overflow-y: scroll; + inset: 0; + + [data-component="content"] { + max-width: 67.5rem; + margin: 0 auto; + border: 2px solid var(--color-border); + } + + [data-component="top"] { + padding: var(--space-12); + display: flex; + flex-direction: column; + align-items: start; + gap: var(--space-4); + + [data-slot="logo"] { + height: 70px; + } + + [data-slot="title"] { + font-size: var(--font-size-2xl); + text-transform: uppercase; + } + } + + [data-component="cta"] { + height: var(--space-19); + border-top: 2px solid var(--color-border); + display: flex; + + [data-slot="left"] { + display: flex; + padding: 0 var(--space-12); + text-transform: uppercase; + text-decoration: underline; + align-items: center; + justify-content: center; + text-underline-offset: 0.1875rem; + border-right: 2px solid var(--color-border); + + a { + color: var(--color-text); + text-decoration: underline; + } + } + + [data-slot="right"] { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: 0.625rem; + padding: 0 var(--space-6); + } + + [data-slot="command"] { + all: unset; + display: flex; + align-items: center; + cursor: pointer; + color: var(--color-text-secondary); + font-size: 1.125rem; + font-family: var(--font-mono); + gap: var(--space-2); + } + + [data-slot="highlight"] { + color: var(--color-text); + font-weight: 500; + } + } + + [data-component="features"] { + border-top: 2px solid var(--color-border); + padding: var(--space-12); + + [data-slot="list"] { + padding-left: var(--space-4); + margin: 0; + list-style: disc; + + li { + margin-bottom: var(--space-4); + + strong { + text-transform: uppercase; + font-weight: 600; + } + } + + li:last-child { + margin-bottom: 0; + } + } + } + + [data-component="install"] { + border-top: 2px solid var(--color-border); + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + + @media (max-width: 40rem) { + grid-template-columns: 1fr; + grid-template-rows: auto; + } + } + + [data-component="title"] { + letter-spacing: -0.03125rem; + text-transform: uppercase; + font-weight: 400; + font-size: var(--font-size-md); + flex-shrink: 0; + color: oklch(0.55 0.02 269.87); + } + + [data-component="method"] { + padding: var(--space-4) var(--space-6); + display: flex; + flex-direction: column; + align-items: start; + gap: var(--space-3); + + &:nth-child(1) {} + + &:nth-child(2) { + border-left: 2px solid var(--color-border); + } + + &:nth-child(3) { + border-top: 2px solid var(--color-border); + } + + &:nth-child(4) { + border-top: 2px solid var(--color-border); + border-left: 2px solid var(--color-border); + } + + [data-slot="button"] { + all: unset; + cursor: pointer; + display: flex; + align-items: center; + color: var(--color-text-secondary); + gap: var(--space-2); + + strong { + color: var(--color-text); + font-weight: 500; + } + } + } + + [data-component="screenshots"] { + border-top: 2px solid var(--color-border); + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0; + + [data-slot="left"] { + padding: var(--space-8) var(--space-6); + display: flex; + flex-direction: column; + + img { + width: 100%; + height: "auto"; + } + } + + [data-slot="right"] { + display: grid; + grid-template-rows: 1fr 1fr; + border-left: 2px solid var(--color-border); + } + + [data-slot="filler"] { + display: flex; + flex-grow: 1; + align-items: center; + justify-content: center; + } + + [data-slot="cell"] { + padding: var(--space-8) var(--space-6); + display: flex; + flex-direction: column; + gap: var(--space-4); + + &:nth-child(2) { + border-top: 2px solid var(--color-border); + } + + img { + width: 80%; + height: "auto"; + } + } + } + + [data-component="copy-status"] { + [data-slot="copy"] { + display: block; + width: 16px; + height: 16px; + color: var(--color-text-dimmed); + + [data-copied] & { + display: none; + } + } + + [data-slot="check"] { + display: none; + width: 16px; + height: 16px; + color: white; + + [data-copied] & { + display: block; + } + } + } + + [data-component="footer"] { + border-top: 2px solid var(--color-border); + display: grid; + grid-template-columns: 1fr 1fr 1fr; + font-size: var(--font-size-lg); + height: var(--space-20); + + [data-slot="cell"] { + display: flex; + align-items: center; + justify-content: center; + border-right: 2px solid var(--color-border); + text-transform: uppercase; + + &:last-child { + border-right: none; + } + } + } +} 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 ( +
+ + +
+ ) +} + +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 ( +
+ opencode | AI coding agent built for the terminal +
+
+ logo +

The AI coding agent built for the terminal.

+
+ +
+
+ Get Started +
+
+ +
+
+ +
+
    +
  • + Native TUI: A responsive, native, themeable terminal UI. +
    • +
  • + LSP enabled: Automatically loads the right LSPs for the LLM. +
    • +
  • + Multi-session: Start multiple agents in parallel on the same project. +
    • +
  • + Shareable links: Share a link to any sessions for reference or to debug. +
    • +
  • + Claude Pro: Log in with Anthropic to use your Claude Pro or Max account. +
    • +
  • + Use any model: Supports 75+ LLM providers through{" "} + Models.dev, including local models. +
    • +
+
+ +
+
+

npm

+ +
+
+

bun

+ +
+
+

homebrew

+ +
+
+

paru

+ +
+
+ +
+
+
opencode TUI with tokyonight theme
+
+ opencode TUI with tokyonight theme +
+
+
+
+
opencode in VS Code
+
+ opencode in VS Code +
+
+
+
opencode in GitHub
+
+ opencode in GitHub +
+
+
+
+ + +
+
+ ) +} -- cgit v1.2.3