feat(web): import oh-my-openagent-web Next.js + Cloudflare Workers site
Imports the public marketing site previously living in ../oh-my-opencode-web. Independent of the npm plugin: own package.json, bun.lock, tsconfig.json. Not included in the published package — root files: array still only ships dist/, bin/, postinstall.mjs. Stack: - Next.js 15.5 App Router + RSC, deployed to Cloudflare Workers via @opennextjs/cloudflare (build target .open-next/worker.js). - Tailwind v4 + shadcn/ui primitives. - next-intl with 4 locales (en/ja/ko/zh) under app/[locale]/. - Playwright e2e tests under web/e2e/. - Custom domains ohmyopenagent.com (primary) and ohmyopencode.org (legacy alias) declared in web/wrangler.toml. Source files were re-formatted via `bun run format` to bring them in line with the existing .prettierrc (singleQuote: false). Functional code unchanged.
This commit is contained in:
YeonGyu-Kim
@@ -0,0 +1,11 @@
|
||||
import type { Metadata } from "next"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Documentation",
|
||||
description:
|
||||
"Configuration reference for Oh My OpenAgent. Agents, categories, skills, hooks, MCPs, and more.",
|
||||
}
|
||||
|
||||
export default function DocsLayout({ children }: { children: React.ReactNode }) {
|
||||
return children
|
||||
}
|
||||
@@ -0,0 +1,527 @@
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion"
|
||||
import { CodeBlock } from "@/components/ui/code-block"
|
||||
import { OptionTable } from "@/components/ui/option-table"
|
||||
import { DocsShell } from "@/components/docs/docs-shell"
|
||||
import { DOC_SECTION_IDS, DOC_SECTION_TITLE_KEYS } from "@/lib/docs-sections"
|
||||
|
||||
export default async function DocsPage() {
|
||||
const t = await getTranslations("docs")
|
||||
const sections = DOC_SECTION_IDS.map((id) => ({
|
||||
id,
|
||||
title: t(`sections.${DOC_SECTION_TITLE_KEYS[id]}`),
|
||||
}))
|
||||
|
||||
return (
|
||||
<DocsShell
|
||||
mobileHeader={t("mobileHeader")}
|
||||
searchPlaceholder={t("searchPlaceholder")}
|
||||
sections={sections}
|
||||
>
|
||||
<section id="overview" className="scroll-mt-24 space-y-4">
|
||||
<h1 className="text-4xl font-bold tracking-tight">{t("overview.title")}</h1>
|
||||
<p className="text-muted-foreground text-lg">
|
||||
{t("overview.description", { command: "bunx oh-my-openagent install" })}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="quick-start" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("quickStart.title")}</h2>
|
||||
<CodeBlock
|
||||
code={`{
|
||||
"$schema": "https://raw.githubusercontent.com/code-yeongyu/oh-my-openagent/master/assets/oh-my-openagent.schema.json",
|
||||
"agents": {
|
||||
"oracle": { "model": "openai/gpt-5.4", "variant": "high" },
|
||||
"explore": { "model": "github-copilot/grok-code-fast-1" }
|
||||
},
|
||||
"categories": {
|
||||
"quick": { "model": "opencode/gpt-5-nano" },
|
||||
"visual-engineering": { "model": "google/gemini-3.1-pro" }
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="config-locations" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("configLocations.title")}</h2>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<ul className="text-muted-foreground list-disc space-y-2 pl-5">
|
||||
<li>
|
||||
<code className="text-foreground font-mono">.opencode/oh-my-openagent.json</code>{" "}
|
||||
{t("configLocations.projectLevel")}
|
||||
</li>
|
||||
<li>
|
||||
<code className="text-foreground font-mono">
|
||||
~/.config/opencode/oh-my-openagent.json
|
||||
</code>{" "}
|
||||
{t("configLocations.userLevel")}
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-muted-foreground mt-4 text-sm">{t("configLocations.jsonc")}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</section>
|
||||
|
||||
<section id="agents" className="scroll-mt-24 space-y-6">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("agentsSection.title")}</h2>
|
||||
<p className="text-muted-foreground">{t("agentsSection.description")}</p>
|
||||
|
||||
<h3 className="text-xl font-semibold">{t("agentsSection.overrideOptions")}</h3>
|
||||
<OptionTable
|
||||
options={[
|
||||
{ name: "model", type: "string", description: t("agentsSection.options.model") },
|
||||
{ name: "variant", type: "string", description: t("agentsSection.options.variant") },
|
||||
{ name: "category", type: "string", description: t("agentsSection.options.category") },
|
||||
{
|
||||
name: "temperature",
|
||||
type: "number",
|
||||
description: t("agentsSection.options.temperature"),
|
||||
},
|
||||
{ name: "top_p", type: "number", description: t("agentsSection.options.topP") },
|
||||
{ name: "prompt", type: "string", description: t("agentsSection.options.prompt") },
|
||||
{
|
||||
name: "prompt_append",
|
||||
type: "string",
|
||||
description: t("agentsSection.options.promptAppend"),
|
||||
},
|
||||
{ name: "tools", type: "Record", description: t("agentsSection.options.tools") },
|
||||
{
|
||||
name: "disable",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: t("agentsSection.options.disable"),
|
||||
},
|
||||
{
|
||||
name: "maxTokens",
|
||||
type: "number",
|
||||
description: t("agentsSection.options.maxTokens"),
|
||||
},
|
||||
{ name: "thinking", type: "object", description: t("agentsSection.options.thinking") },
|
||||
{
|
||||
name: "reasoningEffort",
|
||||
type: "string",
|
||||
description: t("agentsSection.options.reasoningEffort"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<h3 className="text-xl font-semibold">{t("agentsSection.permissions")}</h3>
|
||||
<div className="border-border overflow-hidden rounded-lg border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50 text-left font-medium">
|
||||
<tr>
|
||||
<th className="p-3">Permission</th>
|
||||
<th className="p-3">Values</th>
|
||||
<th className="p-3">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-border divide-y">
|
||||
{[
|
||||
{ name: "edit", descKey: "edit" as const },
|
||||
{ name: "bash", descKey: "bash" as const },
|
||||
{ name: "webfetch", descKey: "webfetch" as const },
|
||||
{ name: "doom_loop", descKey: "doomLoop" as const },
|
||||
{ name: "external_directory", descKey: "externalDirectory" as const },
|
||||
].map((p) => (
|
||||
<tr key={p.name}>
|
||||
<td className="p-3 font-mono font-medium">{p.name}</td>
|
||||
<td className="text-muted-foreground p-3 font-mono">
|
||||
{t("agentsSection.permissionValues")}
|
||||
</td>
|
||||
<td className="text-muted-foreground p-3">
|
||||
{t(`agentsSection.permissionDescriptions.${p.descKey}`)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="categories" className="scroll-mt-24 space-y-6">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("categoriesSection.title")}</h2>
|
||||
<p className="text-muted-foreground">{t("categoriesSection.description")}</p>
|
||||
|
||||
<div className="border-border overflow-hidden rounded-lg border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50 text-left font-medium">
|
||||
<tr>
|
||||
<th className="p-3">Category</th>
|
||||
<th className="p-3">Default Model</th>
|
||||
<th className="p-3">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-border divide-y">
|
||||
{[
|
||||
{
|
||||
name: "visual-engineering",
|
||||
model: "gemini-3.1-pro (high)",
|
||||
descKey: "visualEngineering" as const,
|
||||
},
|
||||
{
|
||||
name: "ultrabrain",
|
||||
model: "gpt-5.3-codex (xhigh)",
|
||||
descKey: "ultrabrain" as const,
|
||||
},
|
||||
{ name: "deep", model: "gpt-5.3-codex (medium)", descKey: "deep" as const },
|
||||
{ name: "artistry", model: "gemini-3.1-pro (high)", descKey: "artistry" as const },
|
||||
{ name: "quick", model: "claude-haiku-4-5", descKey: "quick" as const },
|
||||
{
|
||||
name: "unspecified-low",
|
||||
model: "claude-sonnet-4-6",
|
||||
descKey: "unspecifiedLow" as const,
|
||||
},
|
||||
{
|
||||
name: "unspecified-high",
|
||||
model: "gpt-5.4 (high)",
|
||||
descKey: "unspecifiedHigh" as const,
|
||||
},
|
||||
{ name: "writing", model: "gemini-3-flash", descKey: "writing" as const },
|
||||
].map((c) => (
|
||||
<tr key={c.name}>
|
||||
<td className="text-primary p-3 font-mono font-medium">{c.name}</td>
|
||||
<td className="text-muted-foreground p-3 font-mono">{c.model}</td>
|
||||
<td className="text-muted-foreground p-3">
|
||||
{t(`categoriesSection.categories.${c.descKey}`)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("categoriesSection.availableOptions", {
|
||||
options:
|
||||
"model, variant, temperature, top_p, maxTokens, thinking, reasoningEffort, textVerbosity, tools, prompt_append, is_unstable_agent",
|
||||
})}
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="skills" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("skillsSection.title")}</h2>
|
||||
<p className="text-muted-foreground">
|
||||
{t("skillsSection.description", {
|
||||
playwright: "playwright",
|
||||
agentBrowser: "agent-browser",
|
||||
gitMaster: "git-master",
|
||||
})}
|
||||
</p>
|
||||
<CodeBlock
|
||||
code={`"skills": {
|
||||
"my-custom-skill": {
|
||||
"description": "A custom skill for specific tasks",
|
||||
"instructions": "Always use this skill when..."
|
||||
}
|
||||
}`}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="background-tasks" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
{t("backgroundTasksSection.title")}
|
||||
</h2>
|
||||
<OptionTable
|
||||
options={[
|
||||
{
|
||||
name: "defaultConcurrency",
|
||||
type: "number",
|
||||
description: t("backgroundTasksSection.options.defaultConcurrency"),
|
||||
},
|
||||
{
|
||||
name: "staleTimeoutMs",
|
||||
type: "number",
|
||||
description: t("backgroundTasksSection.options.staleTimeoutMs"),
|
||||
},
|
||||
{
|
||||
name: "providerConcurrency",
|
||||
type: "number",
|
||||
description: t("backgroundTasksSection.options.providerConcurrency"),
|
||||
},
|
||||
{
|
||||
name: "modelConcurrency",
|
||||
type: "number",
|
||||
description: t("backgroundTasksSection.options.modelConcurrency"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className="text-muted-foreground flex items-center gap-2 text-sm">
|
||||
<span className="font-semibold">{t("backgroundTasksSection.priority")}</span>
|
||||
<Badge variant="secondary">modelConcurrency</Badge> >
|
||||
<Badge variant="secondary">providerConcurrency</Badge> >
|
||||
<Badge variant="secondary">defaultConcurrency</Badge>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="hooks" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("hooksSection.title")}</h2>
|
||||
<p className="text-muted-foreground mb-4">{t("hooksSection.description")}</p>
|
||||
<div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
|
||||
{[
|
||||
"agent-usage-reminder",
|
||||
"anthropic-context-window-limit-recovery",
|
||||
"anthropic-effort",
|
||||
"atlas",
|
||||
"auto-slash-command",
|
||||
"auto-update-checker",
|
||||
"background-notification",
|
||||
"category-skill-reminder",
|
||||
"claude-code-hooks",
|
||||
"comment-checker",
|
||||
"compaction-context-injector",
|
||||
"compaction-todo-preserver",
|
||||
"delegate-task-retry",
|
||||
"directory-agents-injector",
|
||||
"directory-readme-injector",
|
||||
"edit-error-recovery",
|
||||
"interactive-bash-session",
|
||||
"keyword-detector",
|
||||
"non-interactive-env",
|
||||
"prometheus-md-only",
|
||||
"question-label-truncator",
|
||||
"ralph-loop",
|
||||
"rules-injector",
|
||||
"session-recovery",
|
||||
"sisyphus-junior-notepad",
|
||||
"start-work",
|
||||
"stop-continuation-guard",
|
||||
"subagent-question-blocker",
|
||||
"task-reminder",
|
||||
"task-resume-info",
|
||||
"tasks-todowrite-disabler",
|
||||
"think-mode",
|
||||
"thinking-block-validator",
|
||||
"unstable-agent-babysitter",
|
||||
"write-existing-file-guard",
|
||||
].map((hook) => (
|
||||
<div
|
||||
key={hook}
|
||||
className="border-border bg-card text-muted-foreground rounded border p-2 font-mono text-xs transition-colors"
|
||||
>
|
||||
{hook}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="mcps" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("mcpsSection.title")}</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">{t("mcpsSection.websearch.title")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("mcpsSection.websearch.description")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">{t("mcpsSection.context7.title")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("mcpsSection.context7.description")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-base">{t("mcpsSection.grepApp.title")}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("mcpsSection.grepApp.description")}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="browser-automation" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
{t("browserAutomationSection.title")}
|
||||
</h2>
|
||||
<div className="border-border overflow-hidden rounded-lg border">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-muted/50 text-left font-medium">
|
||||
<tr>
|
||||
<th className="p-3">Tool</th>
|
||||
<th className="p-3">Description</th>
|
||||
<th className="p-3">Use Case</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-border divide-y">
|
||||
<tr>
|
||||
<td className="text-primary p-3 font-mono font-medium">
|
||||
{t("browserAutomationSection.playwright.tool")}
|
||||
</td>
|
||||
<td className="text-muted-foreground p-3">
|
||||
{t("browserAutomationSection.playwright.description")}
|
||||
</td>
|
||||
<td className="text-muted-foreground p-3">
|
||||
{t("browserAutomationSection.playwright.useCase")}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="text-primary p-3 font-mono font-medium">
|
||||
{t("browserAutomationSection.agentBrowser.tool")}
|
||||
</td>
|
||||
<td className="text-muted-foreground p-3">
|
||||
{t("browserAutomationSection.agentBrowser.description")}
|
||||
</td>
|
||||
<td className="text-muted-foreground p-3">
|
||||
{t("browserAutomationSection.agentBrowser.useCase")}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tmux" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("tmuxSection.title")}</h2>
|
||||
<OptionTable
|
||||
options={[
|
||||
{ name: "enabled", type: "boolean", description: t("tmuxSection.options.enabled") },
|
||||
{ name: "layout", type: "string", description: t("tmuxSection.options.layout") },
|
||||
{
|
||||
name: "main_pane_size",
|
||||
type: "string",
|
||||
description: t("tmuxSection.options.mainPaneSize"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="git-master" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("gitMasterSection.title")}</h2>
|
||||
<OptionTable
|
||||
options={[
|
||||
{
|
||||
name: "commit_footer",
|
||||
type: "string",
|
||||
description: t("gitMasterSection.options.commitFooter"),
|
||||
},
|
||||
{
|
||||
name: "include_co_authored_by",
|
||||
type: "boolean",
|
||||
description: t("gitMasterSection.options.includeCoAuthoredBy"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="comment-checker" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">
|
||||
{t("commentCheckerSection.title")}
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
{t("commentCheckerSection.description", { placeholder: "{{comments}}" })}
|
||||
</p>
|
||||
<CodeBlock
|
||||
code={`"comment-checker": {
|
||||
"custom_prompt": "Review these comments: {{comments}}"
|
||||
}`}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="experimental" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("experimentalSection.title")}</h2>
|
||||
<OptionTable
|
||||
options={[
|
||||
{
|
||||
name: "aggressive_truncation",
|
||||
type: "boolean",
|
||||
description: t("experimentalSection.options.aggressiveTruncation"),
|
||||
},
|
||||
{
|
||||
name: "auto_resume",
|
||||
type: "boolean",
|
||||
description: t("experimentalSection.options.autoResume"),
|
||||
},
|
||||
{
|
||||
name: "preemptive_compaction",
|
||||
type: "boolean",
|
||||
description: t("experimentalSection.options.preemptiveCompaction"),
|
||||
},
|
||||
{
|
||||
name: "truncate_all_tool_outputs",
|
||||
type: "boolean",
|
||||
description: t("experimentalSection.options.truncateAllToolOutputs"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
<AccordionItem value="dynamic-pruning">
|
||||
<AccordionTrigger>{t("experimentalSection.dynamicPruning.trigger")}</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<p className="text-muted-foreground mb-2 text-sm">
|
||||
{t("experimentalSection.dynamicPruning.description")}
|
||||
</p>
|
||||
<CodeBlock
|
||||
code={`"dynamic_context_pruning": {
|
||||
"enabled": true,
|
||||
"strategy": "smart",
|
||||
"max_tokens": 10000
|
||||
}`}
|
||||
/>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</section>
|
||||
|
||||
<section id="lsp" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("lspSection.title")}</h2>
|
||||
<OptionTable
|
||||
options={[
|
||||
{ name: "command", type: "string", description: t("lspSection.options.command") },
|
||||
{ name: "extensions", type: "array", description: t("lspSection.options.extensions") },
|
||||
{ name: "priority", type: "number", description: t("lspSection.options.priority") },
|
||||
{ name: "env", type: "object", description: t("lspSection.options.env") },
|
||||
{
|
||||
name: "initialization",
|
||||
type: "object",
|
||||
description: t("lspSection.options.initialization"),
|
||||
},
|
||||
{ name: "disabled", type: "boolean", description: t("lspSection.options.disabled") },
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
<section id="env-vars" className="scroll-mt-24 space-y-4">
|
||||
<h2 className="text-2xl font-semibold tracking-tight">{t("envVarsSection.title")}</h2>
|
||||
<div className="border-border rounded-lg border p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-primary font-mono font-bold">
|
||||
{t("envVarsSection.opencodeConfigDir.name")}
|
||||
</h3>
|
||||
<p className="text-muted-foreground mt-1 text-sm">
|
||||
{t("envVarsSection.opencodeConfigDir.description")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Separator className="my-12" />
|
||||
|
||||
<footer className="text-muted-foreground text-sm">
|
||||
<p>{t("footer", { year: new Date().getFullYear().toString() })}</p>
|
||||
</footer>
|
||||
</DocsShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
import type { Metadata } from "next"
|
||||
import type { JSX } from "react"
|
||||
import { notFound } from "next/navigation"
|
||||
import { hasLocale } from "next-intl"
|
||||
import { setRequestLocale } from "next-intl/server"
|
||||
import { LocalizedPageShell } from "@/app/_components/localized-page-shell"
|
||||
import { routing } from "@/i18n/routing"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
description:
|
||||
"Meet Sisyphus: The batteries-included agent that codes like you. Multi-model orchestration, background agents, 40+ lifecycle hooks.",
|
||||
}
|
||||
|
||||
export function generateStaticParams() {
|
||||
return routing.locales.map((locale) => ({ locale }))
|
||||
}
|
||||
|
||||
export default async function LocaleLayout({
|
||||
children,
|
||||
params,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
params: Promise<{ locale: string }>
|
||||
}): Promise<JSX.Element> {
|
||||
const { locale } = await params
|
||||
|
||||
if (!hasLocale(routing.locales, locale)) {
|
||||
notFound()
|
||||
}
|
||||
|
||||
setRequestLocale(locale)
|
||||
|
||||
return <LocalizedPageShell locale={locale}>{children}</LocalizedPageShell>
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { Metadata } from "next"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Ultrawork Manifesto",
|
||||
description:
|
||||
"The philosophy of high-output engineering. Why human developers should be architects, not spell-checkers.",
|
||||
}
|
||||
|
||||
export default function ManifestoLayout({ children }: { children: React.ReactNode }) {
|
||||
return children
|
||||
}
|
||||
@@ -0,0 +1,358 @@
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import Image from "next/image"
|
||||
import { ArrowRight, Check, Terminal, Zap } from "lucide-react"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Section } from "@/components/ui/section"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { Link } from "@/i18n/routing"
|
||||
|
||||
async function ManifestoPage() {
|
||||
const t = await getTranslations("manifesto")
|
||||
|
||||
const painPointKeys = ["fixing", "syntax", "copyPasting", "reviewing"] as const
|
||||
const indistinguishableKeys = [
|
||||
"patterns",
|
||||
"errorHandling",
|
||||
"tests",
|
||||
"noSlop",
|
||||
"comments",
|
||||
] as const
|
||||
const ultraworkStepKeys = ["analyze", "breakdown", "execute", "verify", "commit"] as const
|
||||
|
||||
const coreLoopKeys = [
|
||||
"prometheus",
|
||||
"metis",
|
||||
"momus",
|
||||
"orchestrator",
|
||||
"todoContinuation",
|
||||
"categorySystem",
|
||||
"backgroundAgents",
|
||||
"wisdomAccumulation",
|
||||
] as const
|
||||
|
||||
const futureKeys = ["focus", "quality", "complexity", "promptEngineering"] as const
|
||||
|
||||
return (
|
||||
<main className="bg-background text-foreground min-h-screen overflow-x-hidden">
|
||||
<section className="relative flex min-h-[80vh] flex-col items-center justify-center overflow-hidden px-6 pt-20 text-center">
|
||||
<div className="absolute inset-0 z-0 opacity-20">
|
||||
<Image
|
||||
src="/images/core-loop.png"
|
||||
alt="Background"
|
||||
fill
|
||||
className="object-cover object-center"
|
||||
priority
|
||||
/>
|
||||
<div className="from-background/80 via-background/90 to-background absolute inset-0 bg-gradient-to-b" />
|
||||
</div>
|
||||
|
||||
<div className="animate-in fade-in slide-in-from-bottom-2 relative z-10 mx-auto max-w-4xl space-y-6 duration-500">
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="border-primary/50 text-primary mb-4 px-4 py-1 text-sm"
|
||||
>
|
||||
{t("badge")}
|
||||
</Badge>
|
||||
<h1 className="from-foreground to-foreground/60 bg-gradient-to-b bg-clip-text text-5xl font-bold tracking-tight text-transparent md:text-7xl">
|
||||
{t("hero.title")}
|
||||
</h1>
|
||||
<p className="text-muted-foreground text-xl font-light tracking-wide md:text-2xl">
|
||||
{t("hero.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<Section className="mx-auto max-w-3xl">
|
||||
<div className="space-y-12">
|
||||
<div className="text-primary/90 border-primary/20 bg-primary/5 border-y py-8 text-center font-mono text-lg md:text-xl">
|
||||
{t("bottleneck")}
|
||||
</div>
|
||||
|
||||
<div className="prose prose-invert prose-lg max-w-none">
|
||||
<p>{t("autonomousCar")}</p>
|
||||
|
||||
<h2 className="mt-8 mb-4 text-2xl font-bold">{t("whyDifferent")}</h2>
|
||||
|
||||
<p>{t("micromanagement")}</p>
|
||||
|
||||
<ul className="my-6 list-none space-y-4 pl-0">
|
||||
{painPointKeys.map((key) => (
|
||||
<li key={key} className="flex items-start gap-3">
|
||||
<span className="mt-1 text-red-500">✕</span>
|
||||
<span>{t(`painPoints.${key}`)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<p className="my-8 border-l-4 border-red-500 bg-red-500/5 py-2 pl-6 text-xl font-semibold">
|
||||
{t("notCollaboration")}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<Link href="/" className="text-primary underline-offset-4 hover:underline">
|
||||
{t("premiseLinkText")}
|
||||
</Link>{" "}
|
||||
{t("premise", { linkText: "" })}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Separator className="mx-auto max-w-4xl opacity-20" />
|
||||
|
||||
<Section className="mx-auto max-w-3xl">
|
||||
<h2 className="mb-8 text-3xl font-bold md:text-4xl">{t("indistinguishable.title")}</h2>
|
||||
|
||||
<p className="text-muted-foreground mb-8 text-xl">{t("indistinguishable.subtitle")}</p>
|
||||
|
||||
<div className="mb-10 grid gap-6">
|
||||
{indistinguishableKeys.map((key) => (
|
||||
<div
|
||||
key={key}
|
||||
className="bg-secondary/30 border-border/50 flex items-start gap-4 rounded-lg border p-4"
|
||||
>
|
||||
<Check className="h-6 w-6 shrink-0 text-green-500" />
|
||||
<span>{t(`indistinguishable.items.${key}`)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<blockquote className="border-primary bg-primary/5 rounded-r-lg border-l-4 py-4 pl-6 text-2xl font-light italic">
|
||||
{t("indistinguishable.quote")}
|
||||
</blockquote>
|
||||
</Section>
|
||||
|
||||
<Section className="mx-auto max-w-4xl">
|
||||
<div className="grid items-center gap-12 md:grid-cols-2">
|
||||
<div>
|
||||
<h2 className="mb-6 text-3xl font-bold md:text-4xl">{t("tokenCost.title")}</h2>
|
||||
<p className="text-muted-foreground mb-6 text-lg">{t("tokenCost.description")}</p>
|
||||
<ul className="mb-8 space-y-3">
|
||||
<li className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-yellow-500" />
|
||||
<span>{t("tokenCost.parallelAgents")}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-yellow-500" />
|
||||
<span>{t("tokenCost.completeWork")}</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 text-yellow-500" />
|
||||
<span>{t("tokenCost.selfVerification")}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-secondary/20 border-border/50 rounded-xl border p-8">
|
||||
<h3 className="text-primary mb-4 text-xl font-semibold">{t("tokenCost.however")}</h3>
|
||||
<p className="text-muted-foreground mb-4">{t("tokenCost.optimizeDescription")}</p>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li className="text-muted-foreground flex items-center gap-2">
|
||||
<div className="bg-primary h-1.5 w-1.5 rounded-full" />
|
||||
{t("tokenCost.cheaperModels")}
|
||||
</li>
|
||||
<li className="text-muted-foreground flex items-center gap-2">
|
||||
<div className="bg-primary h-1.5 w-1.5 rounded-full" />
|
||||
{t("tokenCost.avoidingRedundant")}
|
||||
</li>
|
||||
<li className="text-muted-foreground flex items-center gap-2">
|
||||
<div className="bg-primary h-1.5 w-1.5 rounded-full" />
|
||||
{t("tokenCost.intelligentCaching")}
|
||||
</li>
|
||||
<li className="text-muted-foreground flex items-center gap-2">
|
||||
<div className="bg-primary h-1.5 w-1.5 rounded-full" />
|
||||
{t("tokenCost.stoppingExactly")}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="mx-auto max-w-5xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-3xl font-bold md:text-4xl">{t("cognitiveLoad.title")}</h2>
|
||||
<p className="text-muted-foreground mx-auto max-w-2xl text-xl">
|
||||
{t("cognitiveLoad.subtitle")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<Card className="from-background to-primary/5 border-primary/20 relative overflow-hidden bg-gradient-to-br">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10">
|
||||
<Terminal className="h-24 w-24" />
|
||||
</div>
|
||||
<CardHeader>
|
||||
<Badge className="mb-2 w-fit">{t("cognitiveLoad.ultrawork.badge")}</Badge>
|
||||
<CardTitle className="text-2xl">{t("cognitiveLoad.ultrawork.title")}</CardTitle>
|
||||
<p className="text-muted-foreground">{t("cognitiveLoad.ultrawork.subtitle")}</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="border-primary/20 relative ml-2 space-y-6 border-l pl-4">
|
||||
{ultraworkStepKeys.map((key) => (
|
||||
<div key={key} className="relative">
|
||||
<div className="bg-primary border-background absolute top-1.5 -left-[21px] h-3 w-3 rounded-full border-2" />
|
||||
<p className="text-sm">{t(`cognitiveLoad.ultrawork.steps.${key}`)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="border-border/50 text-primary mt-8 border-t pt-6 text-center font-bold">
|
||||
{t("cognitiveLoad.ultrawork.footer")}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-secondary/10 border-border/50">
|
||||
<CardHeader>
|
||||
<Badge variant="secondary" className="mb-2 w-fit">
|
||||
{t("cognitiveLoad.prometheus.badge")}
|
||||
</Badge>
|
||||
<CardTitle className="text-2xl">{t("cognitiveLoad.prometheus.title")}</CardTitle>
|
||||
<p className="text-muted-foreground">{t("cognitiveLoad.prometheus.subtitle")}</p>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<div className="bg-background/50 border-border/50 rounded-lg border p-4">
|
||||
<h3 className="text-primary mb-1 font-semibold">
|
||||
{t("cognitiveLoad.prometheus.prometheusTitle")}
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("cognitiveLoad.prometheus.prometheusDescription")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<ArrowRight className="text-muted-foreground/50 rotate-90 md:rotate-0" />
|
||||
</div>
|
||||
<div className="bg-background/50 border-border/50 rounded-lg border p-4">
|
||||
<h3 className="text-primary mb-1 font-semibold">
|
||||
{t("cognitiveLoad.prometheus.atlasTitle")}
|
||||
</h3>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t("cognitiveLoad.prometheus.atlasDescription")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-border/50 text-muted-foreground mt-4 border-t pt-6 text-center font-bold">
|
||||
{t("cognitiveLoad.prometheus.footer")}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="mx-auto max-w-6xl">
|
||||
<div className="grid gap-8 md:grid-cols-3">
|
||||
{(["predictable", "continuous", "delegatable"] as const).map((key) => (
|
||||
<div
|
||||
key={key}
|
||||
className="bg-secondary/10 border-border/30 rounded-xl border p-6 text-center transition-colors"
|
||||
>
|
||||
<div className="mb-4 flex justify-center">
|
||||
<Image
|
||||
src={`/images/${key}.png`}
|
||||
alt={key}
|
||||
width={64}
|
||||
height={64}
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<h3 className="mb-3 text-xl font-bold">{t(`principles.${key}.title`)}</h3>
|
||||
<p className="text-muted-foreground">{t(`principles.${key}.description`)}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Separator className="mx-auto max-w-4xl opacity-20" />
|
||||
|
||||
<Section className="mx-auto max-w-5xl">
|
||||
<h2 className="mb-12 text-center text-3xl font-bold md:text-4xl">{t("coreLoop.title")}</h2>
|
||||
|
||||
<div className="bg-background border-border/50 mb-16 rounded-xl border p-6 shadow-lg">
|
||||
<div className="flex flex-wrap items-center justify-center gap-4 py-8 md:gap-8">
|
||||
<div className="rounded-lg border-2 border-white bg-black px-6 py-3 text-sm font-semibold text-white md:text-base">
|
||||
Human Intent
|
||||
</div>
|
||||
<svg
|
||||
className="text-muted-foreground h-8 w-8 shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
<div className="rounded-lg border-2 border-zinc-600 bg-zinc-900 px-6 py-3 text-sm font-semibold text-white md:text-base">
|
||||
Agent Execution
|
||||
</div>
|
||||
<svg
|
||||
className="text-muted-foreground h-8 w-8 shrink-0"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path d="M5 12h14M12 5l7 7-7 7" />
|
||||
</svg>
|
||||
<div className="rounded-lg border-2 border-cyan-500 bg-black px-6 py-3 text-sm font-semibold text-cyan-400 md:text-base">
|
||||
Verified Result
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-2 text-center text-xs">↻ Minimum Intervention</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{coreLoopKeys.map((key) => (
|
||||
<Card key={key} className="bg-secondary/5 border-border/40 transition-colors">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-primary text-lg">
|
||||
{t(`coreLoop.features.${key}.feature`)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
{t(`coreLoop.features.${key}.purpose`)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<Section className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="mb-8 text-3xl font-bold md:text-4xl">{t("future.title")}</h2>
|
||||
|
||||
<div className="mx-auto mb-12 max-w-2xl space-y-4 text-left">
|
||||
{futureKeys.map((key) => (
|
||||
<div key={key} className="flex items-center gap-3">
|
||||
<div className="bg-primary h-2 w-2 shrink-0 rounded-full" />
|
||||
<span className="text-lg">{t(`future.items.${key}`)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<p className="text-2xl font-light">{t("future.quote1")}</p>
|
||||
<p className="text-primary text-3xl font-bold">{t("future.quote2")}</p>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<section className="from-primary/10 to-background bg-gradient-to-t px-6 py-32 text-center">
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-foreground text-6xl font-black tracking-tighter md:text-8xl">
|
||||
{t("finalCta.title")}
|
||||
</h2>
|
||||
|
||||
<Button size="lg" className="rounded-full px-8 py-6 text-lg" asChild>
|
||||
<Link href="https://github.com/code-yeongyu/oh-my-openagent" target="_blank">
|
||||
{t("finalCta.button")} <ArrowRight className="ml-2 h-5 w-5" />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default ManifestoPage
|
||||
@@ -0,0 +1,17 @@
|
||||
export { landingMetadata as metadata } from "@/app/_components/landing-page"
|
||||
|
||||
import type { JSX } from "react"
|
||||
import { setRequestLocale } from "next-intl/server"
|
||||
import { LandingPage } from "@/app/_components/landing-page"
|
||||
|
||||
export default async function LocaleLandingPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string }>
|
||||
}): Promise<JSX.Element> {
|
||||
const { locale } = await params
|
||||
|
||||
setRequestLocale(locale)
|
||||
|
||||
return <LandingPage />
|
||||
}
|
||||
@@ -0,0 +1,712 @@
|
||||
import type { Metadata } from "next"
|
||||
import type { JSX, SVGProps } from "react"
|
||||
import { getTranslations } from "next-intl/server"
|
||||
import Image from "next/image"
|
||||
import {
|
||||
Layers,
|
||||
Star,
|
||||
Check,
|
||||
Zap,
|
||||
Search,
|
||||
Code2,
|
||||
Brain,
|
||||
Eye,
|
||||
MessageSquare,
|
||||
Shield,
|
||||
Lightbulb,
|
||||
Route,
|
||||
HardDrive,
|
||||
ArrowRight,
|
||||
Target,
|
||||
} from "lucide-react"
|
||||
import { HeroStats } from "@/components/landing/hero-stats"
|
||||
import { InstallCommand } from "@/components/landing/install-command"
|
||||
import { TerminalTypewriter } from "@/components/landing/motion-wrappers"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Link } from "@/i18n/routing"
|
||||
import { formatStats, getStats } from "@/lib/stats"
|
||||
|
||||
const FALLBACK_STATS = {
|
||||
stars: "40k+",
|
||||
totalDownloads: "1M+",
|
||||
monthlyDownloads: "580k+",
|
||||
weeklyDownloads: "90k+",
|
||||
}
|
||||
|
||||
export const landingMetadata: Metadata = {
|
||||
title: "Oh My OpenAgent — The Best Agent Harness",
|
||||
description:
|
||||
"Meet Sisyphus: The batteries-included agent that codes like you. Multi-model orchestration, background agents, 40+ lifecycle hooks.",
|
||||
}
|
||||
|
||||
export async function LandingPage(): Promise<JSX.Element> {
|
||||
const t = await getTranslations("landing")
|
||||
|
||||
let formattedStats = FALLBACK_STATS
|
||||
try {
|
||||
const stats = await getStats()
|
||||
formattedStats = formatStats(stats)
|
||||
} catch {
|
||||
formattedStats = FALLBACK_STATS
|
||||
}
|
||||
|
||||
const subAgentKeys = ["oracle", "librarian", "explore", "metis", "momus"] as const
|
||||
type SubAgentKey = (typeof subAgentKeys)[number]
|
||||
|
||||
const agentStyles: Record<
|
||||
SubAgentKey,
|
||||
{ color: string; border: string; bg: string; icon: typeof Brain }
|
||||
> = {
|
||||
oracle: {
|
||||
color: "text-purple-400",
|
||||
border: "border-zinc-800",
|
||||
bg: "bg-purple-400/5",
|
||||
icon: Eye,
|
||||
},
|
||||
librarian: {
|
||||
color: "text-green-400",
|
||||
border: "border-zinc-800",
|
||||
bg: "bg-green-400/5",
|
||||
icon: Search,
|
||||
},
|
||||
explore: {
|
||||
color: "text-blue-400",
|
||||
border: "border-zinc-800",
|
||||
bg: "bg-blue-400/5",
|
||||
icon: Code2,
|
||||
},
|
||||
metis: {
|
||||
color: "text-pink-400",
|
||||
border: "border-zinc-800",
|
||||
bg: "bg-pink-400/5",
|
||||
icon: MessageSquare,
|
||||
},
|
||||
momus: { color: "text-red-400", border: "border-zinc-800", bg: "bg-red-400/5", icon: Check },
|
||||
}
|
||||
|
||||
const reviewKeys = ["review1", "review2", "review3", "review4", "review5", "review6"] as const
|
||||
|
||||
const principleKeys = [
|
||||
"specialization",
|
||||
"trustVerify",
|
||||
"wisdom",
|
||||
"modelOptimization",
|
||||
"categories",
|
||||
"continuity",
|
||||
] as const
|
||||
type PrincipleKey = (typeof principleKeys)[number]
|
||||
|
||||
const principleIcons: Record<PrincipleKey, typeof Brain> = {
|
||||
specialization: Target,
|
||||
trustVerify: Shield,
|
||||
wisdom: Lightbulb,
|
||||
modelOptimization: Zap,
|
||||
categories: Route,
|
||||
continuity: HardDrive,
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen flex-col overflow-x-hidden">
|
||||
<section className="relative flex min-h-[90vh] items-center justify-center overflow-hidden pt-16">
|
||||
<div className="absolute inset-0 z-0 opacity-30">
|
||||
<Image
|
||||
src="/images/hero.png"
|
||||
alt=""
|
||||
fill
|
||||
priority
|
||||
fetchPriority="high"
|
||||
className="object-cover object-center"
|
||||
sizes="100vw"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute inset-0 z-0 bg-gradient-to-b from-black/80 via-black/90 to-[#0a0a0a]" />
|
||||
|
||||
<div className="relative z-10 container mx-auto flex flex-col items-center gap-8 px-4 text-center md:px-6">
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-5xl font-bold tracking-tighter text-white md:text-7xl">
|
||||
{t("hero.title")}
|
||||
<span className="text-cyan-400">{t("hero.titleHighlight")}</span>
|
||||
</h1>
|
||||
<p className="mx-auto max-w-3xl text-xl font-light text-zinc-400 md:text-2xl">
|
||||
{t("hero.subtitle", {
|
||||
stars: formattedStats.stars,
|
||||
downloads: formattedStats.totalDownloads,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<HeroStats
|
||||
initialStats={{
|
||||
stars: formattedStats.stars,
|
||||
totalDownloads: formattedStats.totalDownloads,
|
||||
monthlyDownloads: formattedStats.monthlyDownloads,
|
||||
weeklyDownloads: formattedStats.weeklyDownloads,
|
||||
}}
|
||||
labels={{
|
||||
githubStars: t("hero.githubStars", { count: "{count}" }),
|
||||
specializedAgents: t("hero.specializedAgents", { count: "10" }),
|
||||
totalDownloads: t("hero.totalDownloads", { count: "{count}" }),
|
||||
monthlyDownloads: t("hero.monthlyDownloads", { count: "{count}" }),
|
||||
lifecycleHooks: t("hero.lifecycleHooks", { count: "40+" }),
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="w-full max-w-md">
|
||||
<InstallCommand command={t("hero.installCommand")} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 sm:flex-row">
|
||||
<Link href="https://github.com/code-yeongyu/oh-my-openagent" target="_blank">
|
||||
<Button
|
||||
size="lg"
|
||||
className="h-12 bg-cyan-500 px-8 text-lg font-bold text-black shadow-sm hover:bg-cyan-600"
|
||||
>
|
||||
{t("hero.getStarted")}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="https://github.com/code-yeongyu/oh-my-openagent" target="_blank">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="h-12 border-zinc-700 px-8 text-lg text-white hover:bg-zinc-800"
|
||||
>
|
||||
<GithubIcon className="mr-2 h-5 w-5" />
|
||||
{t("hero.viewOnGitHub")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="features" className="overflow-hidden border-t border-white/5 bg-[#0a0a0a] py-24">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div className="flex flex-col items-center gap-16 lg:flex-row">
|
||||
<div className="flex-1 space-y-8">
|
||||
<Badge className="border-cyan-500/20 bg-cyan-500/10 px-4 py-1.5 text-cyan-400">
|
||||
{t("ulw.badge")}
|
||||
</Badge>
|
||||
<h2 className="bg-gradient-to-r from-cyan-400 to-purple-600 bg-clip-text text-4xl font-black tracking-tighter text-transparent md:text-5xl">
|
||||
{t("ulw.title")}
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-3xl font-bold text-white">{t("ulw.headline")}</h3>
|
||||
<p className="text-xl leading-relaxed text-zinc-400">{t("ulw.description")}</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Badge className="border-cyan-500/20 bg-cyan-500/10 px-4 py-2 text-sm text-cyan-400">
|
||||
{t("ulw.autoPlanning")}
|
||||
</Badge>
|
||||
<Badge className="border-purple-500/20 bg-purple-500/10 px-4 py-2 text-sm text-purple-400">
|
||||
{t("ulw.deepResearch")}
|
||||
</Badge>
|
||||
<Badge className="border-green-500/20 bg-green-500/10 px-4 py-2 text-sm text-green-400">
|
||||
{t("ulw.selfCorrection")}
|
||||
</Badge>
|
||||
<Badge className="border-amber-500/20 bg-amber-500/10 px-4 py-2 text-sm text-amber-400">
|
||||
{t("ulw.parallelAgents")}
|
||||
</Badge>
|
||||
</div>
|
||||
<p className="text-lg text-zinc-400/90 italic">{t("ulw.tagline")}</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-xl flex-1">
|
||||
<div className="overflow-hidden rounded-xl border border-zinc-800 bg-black shadow-xl">
|
||||
<div className="flex items-center gap-2 border-b border-zinc-800 bg-zinc-900/50 px-4 py-3">
|
||||
<div className="h-3 w-3 rounded-full border border-red-500/50 bg-red-500/20" />
|
||||
<div className="h-3 w-3 rounded-full border border-yellow-500/50 bg-yellow-500/20" />
|
||||
<div className="h-3 w-3 rounded-full border border-green-500/50 bg-green-500/20" />
|
||||
<div className="ml-2 font-mono text-xs text-zinc-400">
|
||||
{t("ulw.terminalTitle")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4 overflow-x-auto p-6 font-mono text-sm">
|
||||
<div className="flex gap-2">
|
||||
<span className="text-green-500">➜</span>
|
||||
<span className="text-cyan-500">~</span>
|
||||
<TerminalTypewriter text={t("ulw.terminalInput")} />
|
||||
</div>
|
||||
<div className="space-y-2 border-l-2 border-zinc-800 pl-4">
|
||||
<div className="text-cyan-400">{t("ulw.steps.scanning")}</div>
|
||||
<div className="text-zinc-400">{t("ulw.steps.context")}</div>
|
||||
<div className="text-purple-400">{t("ulw.steps.planning")}</div>
|
||||
<div className="text-amber-400">{t("ulw.steps.delegating")}</div>
|
||||
<div className="text-blue-400">{t("ulw.steps.verifying")}</div>
|
||||
</div>
|
||||
<div className="flex gap-2 pt-4">
|
||||
<span className="text-green-500">✓</span>
|
||||
<span className="font-bold text-green-400">{t("ulw.steps.complete")}</span>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<span className="text-green-500">➜</span>
|
||||
<span className="text-cyan-500">~</span>
|
||||
<span className="animate-pulse text-white">_</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="agents" className="relative overflow-hidden bg-black py-24">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-cyan-900/20 via-black to-black opacity-50" />
|
||||
<div className="relative z-10 container mx-auto px-4 md:px-6">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<Badge className="border-cyan-500/20 bg-cyan-500/10 px-4 py-1.5 text-cyan-400">
|
||||
{t("sisyphus.badge")}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-zinc-700 text-xs text-zinc-400">
|
||||
{t("sisyphus.model")}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<h2 className="mb-4 text-4xl font-bold text-white md:text-5xl">
|
||||
<span className="text-cyan-400">{t("sisyphus.title")}</span>
|
||||
</h2>
|
||||
<h3 className="mb-6 text-2xl font-bold text-zinc-300 md:text-3xl">
|
||||
{t("sisyphus.headline")}
|
||||
</h3>
|
||||
<p className="mb-12 max-w-3xl text-xl leading-relaxed text-zinc-400">
|
||||
{t("sisyphus.description")}
|
||||
</p>
|
||||
|
||||
<div className="mb-12 grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
{(["intent", "explore", "delegate", "verify"] as const).map((phase, i) => (
|
||||
<div key={phase}>
|
||||
<Card className="h-full border-zinc-800 bg-zinc-900/30">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="mb-1 font-mono text-xs text-cyan-400">PHASE {i + 1}</div>
|
||||
<CardTitle className="text-lg text-white">
|
||||
{t(`sisyphus.phases.${phase}.title`)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-zinc-400">
|
||||
{t(`sisyphus.phases.${phase}.description`)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="rounded-xl border border-cyan-400/20 bg-cyan-400/5 p-6 md:p-8">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="rounded-lg bg-cyan-400/10 p-3">
|
||||
<HardDrive className="h-6 w-6 text-cyan-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-2 text-xl font-bold text-cyan-400">
|
||||
{t("sisyphus.boulderTitle")}
|
||||
</h4>
|
||||
<p className="leading-relaxed text-zinc-300">
|
||||
{t("sisyphus.boulderDescription")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-y border-white/5 bg-[#0a0a0a] py-24">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div className="mb-16 text-center">
|
||||
<Badge className="mb-6 border-amber-500/20 bg-amber-500/10 px-4 py-1.5 text-amber-400">
|
||||
{t("prometheusAtlas.badge")}
|
||||
</Badge>
|
||||
<h2 className="mb-4 text-4xl font-bold text-white md:text-5xl">
|
||||
{t("prometheusAtlas.title")}
|
||||
</h2>
|
||||
<p className="mx-auto max-w-2xl text-xl text-zinc-400">
|
||||
{t("prometheusAtlas.headline")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mb-12 grid grid-cols-1 gap-8 lg:grid-cols-2">
|
||||
<div>
|
||||
<Card className="h-full border-zinc-800 bg-zinc-900/30">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="rounded-lg bg-amber-400/10 p-2">
|
||||
<Brain className="h-6 w-6 text-amber-400" />
|
||||
</div>
|
||||
<Badge variant="outline" className="border-zinc-700 text-xs text-zinc-400">
|
||||
{t("prometheusAtlas.prometheus.model")}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className="mt-4 text-2xl text-amber-400">
|
||||
{t("prometheusAtlas.prometheus.name")}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-medium text-zinc-400">
|
||||
{t("prometheusAtlas.prometheus.role")}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="leading-relaxed text-zinc-300">
|
||||
{t("prometheusAtlas.prometheus.description")}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{([0, 1, 2, 3] as const).map((i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-zinc-400">
|
||||
<ArrowRight className="h-3 w-3 shrink-0 text-amber-400" />
|
||||
{t(`prometheusAtlas.prometheus.features.${i}`)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Card className="h-full border-zinc-800 bg-zinc-900/30">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="rounded-lg bg-indigo-400/10 p-2">
|
||||
<Layers className="h-6 w-6 text-indigo-400" />
|
||||
</div>
|
||||
<Badge variant="outline" className="border-zinc-700 text-xs text-zinc-400">
|
||||
{t("prometheusAtlas.atlas.model")}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className="mt-4 text-2xl text-indigo-400">
|
||||
{t("prometheusAtlas.atlas.name")}
|
||||
</CardTitle>
|
||||
<CardDescription className="font-medium text-zinc-400">
|
||||
{t("prometheusAtlas.atlas.role")}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="leading-relaxed text-zinc-300">
|
||||
{t("prometheusAtlas.atlas.description")}
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
{([0, 1, 2, 3] as const).map((i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-zinc-400">
|
||||
<ArrowRight className="h-3 w-3 shrink-0 text-indigo-400" />
|
||||
{t(`prometheusAtlas.atlas.features.${i}`)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="overflow-x-auto rounded-xl border border-zinc-800 bg-zinc-900/20 p-6 md:p-8">
|
||||
<div className="flex min-w-[600px] flex-col items-start justify-between gap-4 md:min-w-0 md:flex-row md:items-center md:gap-0">
|
||||
{([1, 2, 3, 4, 5] as const).map((step, i) => (
|
||||
<div key={step} className="flex flex-1 items-center gap-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-8 w-8 items-center justify-center rounded-full border border-zinc-700 bg-zinc-800 font-mono text-xs text-zinc-400">
|
||||
{step}
|
||||
</div>
|
||||
<span className="text-sm whitespace-nowrap text-zinc-300">
|
||||
{t(`prometheusAtlas.workflow.step${step}`)}
|
||||
</span>
|
||||
</div>
|
||||
{i < 4 && (
|
||||
<ArrowRight className="ml-auto hidden h-4 w-4 shrink-0 text-zinc-600 md:block" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="mt-6 border-t border-zinc-800 pt-6 text-center text-zinc-400 italic">
|
||||
{t("prometheusAtlas.whyItWorks")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="relative overflow-hidden bg-black py-24">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom,_var(--tw-gradient-stops))] from-orange-900/10 via-black to-black opacity-70" />
|
||||
<div className="relative z-10 container mx-auto px-4 md:px-6">
|
||||
<div className="mx-auto max-w-4xl">
|
||||
<div className="mb-6 flex items-center gap-3">
|
||||
<Badge className="border-orange-500/20 bg-orange-500/10 px-4 py-1.5 text-orange-400">
|
||||
{t("hephaestus.badge")}
|
||||
</Badge>
|
||||
<Badge variant="outline" className="border-zinc-700 text-xs text-zinc-400">
|
||||
{t("hephaestus.model")}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<h2 className="mb-4 text-4xl font-bold md:text-5xl">
|
||||
<span className="text-orange-400">{t("hephaestus.title")}</span>
|
||||
</h2>
|
||||
<h3 className="mb-6 text-2xl font-bold text-zinc-300 md:text-3xl">
|
||||
{t("hephaestus.headline")}
|
||||
</h3>
|
||||
<p className="mb-12 max-w-3xl text-xl leading-relaxed text-zinc-400">
|
||||
{t("hephaestus.description")}
|
||||
</p>
|
||||
|
||||
<div className="mb-8 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
|
||||
{(["explore", "plan", "decide", "execute", "verify"] as const).map((step, i) => (
|
||||
<div key={step}>
|
||||
<div className="rounded-lg border border-orange-400/20 bg-orange-400/5 p-4 text-center">
|
||||
<div className="mb-2 font-mono text-xs text-orange-400">0{i + 1}</div>
|
||||
<p className="text-sm leading-snug break-keep text-zinc-300">
|
||||
{t(`hephaestus.loop.${step}`)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-lg text-zinc-400/90 italic">{t("hephaestus.tagline")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-t border-white/5 bg-[#0a0a0a] py-24">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-white md:text-5xl">{t("agents.title")}</h2>
|
||||
<p className="text-xl text-zinc-400">{t("agents.subtitle")}</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-5">
|
||||
{subAgentKeys.map((key) => {
|
||||
const style = agentStyles[key]
|
||||
const Icon = style.icon
|
||||
return (
|
||||
<div key={key}>
|
||||
<Card
|
||||
className={`h-full border-zinc-800 bg-zinc-900/30 ${style.border} ${style.bg}`}
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className={`rounded-lg bg-black/50 p-2 ${style.color}`}>
|
||||
<Icon className="h-5 w-5" />
|
||||
</div>
|
||||
<Badge variant="outline" className="border-zinc-700 text-xs text-zinc-400">
|
||||
{t(`agents.${key}.model`)}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className={`mt-3 text-lg ${style.color}`}>
|
||||
{t(`agents.${key}.name`)}
|
||||
</CardTitle>
|
||||
<CardDescription className="text-sm font-medium text-zinc-400">
|
||||
{t(`agents.${key}.role`)}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm leading-relaxed text-zinc-300">
|
||||
{t(`agents.${key}.description`)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<div className="col-span-1 mt-4 md:col-span-2 lg:col-span-5">
|
||||
<Card className="h-full overflow-hidden border-zinc-800 bg-zinc-900/30">
|
||||
<CardHeader>
|
||||
<div className="mb-2 flex items-center gap-3">
|
||||
<Badge className="border-teal-500/20 bg-teal-500/10 px-3 py-1 text-teal-400">
|
||||
{t("agents.dynamicSystem.role")}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardTitle className="text-2xl text-teal-400">
|
||||
{t("agents.dynamicSystem.name")}
|
||||
</CardTitle>
|
||||
<CardDescription className="max-w-3xl text-base text-zinc-400">
|
||||
{t("agents.dynamicSystem.description")}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="mt-4 grid grid-cols-1 gap-8 md:grid-cols-2">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold tracking-wider text-zinc-300 uppercase">
|
||||
Category Routing
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
{ cat: "visual-engineering", model: "Gemini 3.1 Pro" },
|
||||
{ cat: "ultrabrain", model: "GPT 5.4" },
|
||||
{ cat: "artistry", model: "Gemini 3.1 Pro" },
|
||||
{ cat: "quick", model: "Claude Haiku 4.5" },
|
||||
{ cat: "deep", model: "GPT 5.3 Codex" },
|
||||
{ cat: "writing", model: "Kimi K2.5" },
|
||||
{ cat: "git", model: "Claude Haiku 4.5" },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.cat}
|
||||
className="flex items-center justify-between rounded border border-zinc-800/50 bg-black/40 p-2"
|
||||
>
|
||||
<span className="font-mono text-sm text-teal-400">{item.cat}</span>
|
||||
<ArrowRight className="h-3 w-3 text-zinc-600" />
|
||||
<span className="text-sm text-zinc-300">{item.model}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-bold tracking-wider text-zinc-300 uppercase">
|
||||
Skill Injection
|
||||
</h3>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{["playwright", "git-master", "frontend-ui-ux", "dev-browser"].map(
|
||||
(skill) => (
|
||||
<div
|
||||
key={skill}
|
||||
className="flex items-center gap-2 rounded border border-zinc-700/50 bg-zinc-800/30 p-3"
|
||||
>
|
||||
<Zap className="h-4 w-4 text-yellow-400" />
|
||||
<span className="font-mono text-sm text-zinc-200">{skill}</span>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-6 rounded-lg border border-teal-500/10 bg-teal-500/5 p-4">
|
||||
<p className="text-sm text-teal-300 italic">
|
||||
"The right model + right expertise, every time."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-black py-24">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div className="mb-16 text-center">
|
||||
<h2 className="mb-4 text-4xl font-bold text-white md:text-5xl">
|
||||
{t("architecture.title")}
|
||||
</h2>
|
||||
<p className="text-xl text-zinc-400">{t("architecture.subtitle")}</p>
|
||||
</div>
|
||||
|
||||
<div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{principleKeys.map((key) => {
|
||||
const Icon = principleIcons[key]
|
||||
return (
|
||||
<div key={key}>
|
||||
<Card className="h-full border-zinc-800 bg-zinc-900/30">
|
||||
<CardHeader>
|
||||
<div className="w-fit rounded-lg bg-zinc-800 p-2">
|
||||
<Icon className="h-5 w-5 text-zinc-300" />
|
||||
</div>
|
||||
<CardTitle className="mt-3 text-lg text-white">
|
||||
{t(`architecture.principles.${key}.title`)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm leading-relaxed text-zinc-400">
|
||||
{t(`architecture.principles.${key}.description`)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="border-t border-white/5 bg-[#0a0a0a] py-24">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div>
|
||||
<h2 className="mb-16 text-center text-4xl font-bold text-white md:text-5xl">
|
||||
{t("reviews.title")}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{reviewKeys.map((key) => (
|
||||
<div key={key}>
|
||||
<Card className="h-full border-zinc-800 bg-zinc-900/30">
|
||||
<CardContent className="pt-6">
|
||||
<div className="mb-4 text-cyan-500">
|
||||
<Star className="h-5 w-5 fill-cyan-500" />
|
||||
</div>
|
||||
<p className="mb-6 leading-relaxed text-zinc-300 italic">
|
||||
“{t(`reviews.${key}.text`)}”
|
||||
</p>
|
||||
<p className="text-sm font-medium text-zinc-400">
|
||||
— {t(`reviews.${key}.author`)}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-black py-24">
|
||||
<div className="container mx-auto px-4 md:px-6">
|
||||
<div>
|
||||
<div className="relative overflow-hidden rounded-3xl border border-zinc-800 bg-zinc-900/30 p-8 text-center md:p-16">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-purple-500/10 to-cyan-500/10 opacity-50" />
|
||||
<div className="relative z-10 mx-auto max-w-3xl space-y-8">
|
||||
<h2 className="text-4xl font-bold text-white md:text-5xl">{t("cta.title")}</h2>
|
||||
<p className="text-lg text-zinc-400">{t("cta.subtitle")}</p>
|
||||
<div className="flex justify-center">
|
||||
<div className="inline-flex items-center gap-2 rounded-full border border-zinc-800 bg-black px-6 py-3 font-mono text-sm text-zinc-300">
|
||||
<span className="text-cyan-500">$</span>
|
||||
{t("cta.installCommand")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col justify-center gap-4 sm:flex-row">
|
||||
<Link href="https://github.com/code-yeongyu/oh-my-openagent" target="_blank">
|
||||
<Button
|
||||
size="lg"
|
||||
className="h-12 bg-cyan-500 px-8 font-bold text-black hover:bg-cyan-600"
|
||||
>
|
||||
{t("cta.installNow")}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/docs">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="h-12 border-zinc-700 px-8 text-white hover:bg-zinc-800"
|
||||
>
|
||||
{t("cta.readTheDocs")}
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GithubIcon(props: SVGProps<SVGSVGElement>) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
role="img"
|
||||
>
|
||||
<title>GitHub</title>
|
||||
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
||||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import type { JSX } from "react"
|
||||
import { NextIntlClientProvider } from "next-intl"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { NavHeader } from "@/components/nav-header"
|
||||
import type { Locale } from "@/i18n/config"
|
||||
|
||||
type LocalizedPageShellProps = {
|
||||
children: React.ReactNode
|
||||
locale: Locale
|
||||
}
|
||||
|
||||
type IntlMessages = Record<string, Record<string, unknown>>
|
||||
|
||||
function getLanguageTag(locale: Locale): string {
|
||||
switch (locale) {
|
||||
case "zh":
|
||||
return "zh-CN"
|
||||
default:
|
||||
return locale
|
||||
}
|
||||
}
|
||||
|
||||
export async function LocalizedPageShell({
|
||||
children,
|
||||
locale,
|
||||
}: LocalizedPageShellProps): Promise<JSX.Element> {
|
||||
const messages = (await import(`../../messages/${locale}.json`)).default as IntlMessages
|
||||
const languageTag = getLanguageTag(locale)
|
||||
|
||||
return (
|
||||
<NextIntlClientProvider locale={locale} messages={messages}>
|
||||
<div lang={languageTag} data-locale={locale} className="flex min-h-screen flex-col">
|
||||
<NavHeader />
|
||||
<main className="flex-1">{children}</main>
|
||||
<Footer locale={locale} />
|
||||
</div>
|
||||
</NextIntlClientProvider>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import { NextResponse } from "next/server"
|
||||
import { getStats } from "@/lib/stats"
|
||||
|
||||
/**
|
||||
* Shields.io endpoint badge for combined NPM downloads.
|
||||
* Usage: https://img.shields.io/endpoint?url=https://ohmyopenagent.com/api/npm-downloads
|
||||
*
|
||||
* Combines downloads from both oh-my-opencode and oh-my-openagent packages.
|
||||
*/
|
||||
|
||||
function formatDownloads(num: number): string {
|
||||
if (num >= 1_000_000) {
|
||||
const formatted = (num / 1_000_000).toFixed(1)
|
||||
return `${formatted.replace(/\.0$/, "")}M`
|
||||
}
|
||||
if (num >= 1_000) {
|
||||
const formatted = (num / 1_000).toFixed(1)
|
||||
return `${formatted.replace(/\.0$/, "")}k`
|
||||
}
|
||||
return String(num)
|
||||
}
|
||||
|
||||
export async function GET(request: Request) {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const period = searchParams.get("period") ?? "total"
|
||||
|
||||
try {
|
||||
const stats = await getStats()
|
||||
|
||||
let value: number
|
||||
let label: string
|
||||
|
||||
switch (period) {
|
||||
case "monthly":
|
||||
value = stats.monthlyDownloads
|
||||
label = "npm downloads/month"
|
||||
break
|
||||
case "weekly":
|
||||
value = stats.weeklyDownloads
|
||||
label = "npm downloads/week"
|
||||
break
|
||||
case "total":
|
||||
default:
|
||||
value = stats.totalDownloads
|
||||
label = "npm downloads"
|
||||
break
|
||||
}
|
||||
|
||||
// Shields.io endpoint badge schema
|
||||
// https://shields.io/badges/endpoint-badge
|
||||
const badge = {
|
||||
schemaVersion: 1,
|
||||
label,
|
||||
message: formatDownloads(value),
|
||||
color: "ff6b35",
|
||||
labelColor: "000000",
|
||||
style: "flat-square",
|
||||
}
|
||||
|
||||
return NextResponse.json(badge, {
|
||||
headers: {
|
||||
"Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
})
|
||||
} catch {
|
||||
// Fallback badge
|
||||
return NextResponse.json(
|
||||
{
|
||||
schemaVersion: 1,
|
||||
label: "npm downloads",
|
||||
message: "1M+",
|
||||
color: "ff6b35",
|
||||
labelColor: "000000",
|
||||
style: "flat-square",
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
"Cache-Control": "public, s-maxage=300, stale-while-revalidate=3600",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { NextResponse } from "next/server"
|
||||
import { getStats, formatStats } from "@/lib/stats"
|
||||
|
||||
const FALLBACK = {
|
||||
stars: "37.3k",
|
||||
totalDownloads: "1M+",
|
||||
monthlyDownloads: "580k+",
|
||||
weeklyDownloads: "90k+",
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const stats = await getStats()
|
||||
const formatted = formatStats(stats)
|
||||
|
||||
return NextResponse.json(
|
||||
{ ...formatted, raw: stats },
|
||||
{
|
||||
headers: {
|
||||
"Cache-Control": "public, s-maxage=3600, stale-while-revalidate=86400",
|
||||
},
|
||||
},
|
||||
)
|
||||
} catch {
|
||||
return NextResponse.json(FALLBACK, {
|
||||
headers: {
|
||||
"Cache-Control": "public, s-maxage=300, stale-while-revalidate=3600",
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180">
|
||||
<rect width="180" height="180" rx="40" fill="#0a0a0a"/>
|
||||
<text x="90" y="128" font-family="system-ui, sans-serif" font-size="120" font-weight="bold" fill="#00d4ff" text-anchor="middle">O</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 292 B |
@@ -0,0 +1,234 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
|
||||
--font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace;
|
||||
--font-manrope: var(--font-manrope), sans-serif;
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
|
||||
--radius-lg: var(--radius);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
--animate-accordion-down: accordion-down 0.2s ease-out;
|
||||
--animate-accordion-up: accordion-up 0.2s ease-out;
|
||||
|
||||
@keyframes accordion-down {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
}
|
||||
@keyframes accordion-up {
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
The default border color has changed to `currentColor` in Tailwind CSS v4,
|
||||
so we've added these compatibility styles to make sure everything still
|
||||
looks the same as it did with Tailwind CSS v3.
|
||||
*/
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Dark Theme Only - Terminal/Hacker Aesthetic */
|
||||
|
||||
/* Colors */
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
|
||||
--card: #111111;
|
||||
--card-foreground: #ededed;
|
||||
|
||||
--popover: #111111;
|
||||
--popover-foreground: #ededed;
|
||||
|
||||
--primary: #00d4ff;
|
||||
--primary-foreground: #000000;
|
||||
|
||||
--secondary: #7c3aed;
|
||||
--secondary-foreground: #ffffff;
|
||||
|
||||
--muted: #1a1a1a;
|
||||
--muted-foreground: #a1a1a1;
|
||||
|
||||
--accent: #1a1a1a;
|
||||
--accent-foreground: #ededed;
|
||||
|
||||
--destructive: #ef4444;
|
||||
--destructive-foreground: #ffffff;
|
||||
|
||||
--border: #262626;
|
||||
--input: #262626;
|
||||
--ring: #00d4ff;
|
||||
|
||||
/* Charts */
|
||||
--chart-1: #00d4ff;
|
||||
--chart-2: #7c3aed;
|
||||
--chart-3: #10b981;
|
||||
--chart-4: #f59e0b;
|
||||
--chart-5: #ef4444;
|
||||
|
||||
/* Code */
|
||||
--code-bg: #1e1e2e;
|
||||
--code-text: #cdd6f4;
|
||||
|
||||
/* Spacing */
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Typography */
|
||||
--font-geist-sans: var(--font-geist-sans);
|
||||
--font-geist-mono: var(--font-geist-mono);
|
||||
--font-manrope: var(--font-manrope);
|
||||
--font-inter: var(--font-inter);
|
||||
|
||||
/* Semantic Fonts */
|
||||
--font-heading: var(--font-manrope);
|
||||
--font-body: var(--font-geist-sans);
|
||||
--font-code: var(--font-geist-mono);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings:
|
||||
"rlig" 1,
|
||||
"calt" 1;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-manrope);
|
||||
}
|
||||
|
||||
[lang|="ko"] h1,
|
||||
[lang|="ko"] h2,
|
||||
[lang|="ko"] h3,
|
||||
[lang|="ko"] h4,
|
||||
[lang|="ko"] h5,
|
||||
[lang|="ko"] h6,
|
||||
[lang|="ja"] h1,
|
||||
[lang|="ja"] h2,
|
||||
[lang|="ja"] h3,
|
||||
[lang|="ja"] h4,
|
||||
[lang|="ja"] h5,
|
||||
[lang|="ja"] h6,
|
||||
[lang|="zh"] h1,
|
||||
[lang|="zh"] h2,
|
||||
[lang|="zh"] h3,
|
||||
[lang|="zh"] h4,
|
||||
[lang|="zh"] h5,
|
||||
[lang|="zh"] h6 {
|
||||
letter-spacing: normal !important;
|
||||
text-wrap: pretty;
|
||||
}
|
||||
|
||||
:where([lang|="ko"], [lang|="ja"], [lang|="zh"])
|
||||
:where(p, li, blockquote, figcaption, td, th, a, button, span) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
[lang|="ko"]
|
||||
:where(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, td, th, a, button, span) {
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
:where([lang|="ja"], [lang|="zh"])
|
||||
:where(h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, td, th, a, button, span) {
|
||||
word-break: normal;
|
||||
line-break: strict;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-primary/20 text-primary;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-muted;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-border hover:bg-muted-foreground/50 rounded-full transition-colors;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.glow-cyan {
|
||||
box-shadow: 0 0 15px -5px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
.glow-purple {
|
||||
box-shadow: 0 0 15px -5px rgba(124, 58, 237, 0.3);
|
||||
}
|
||||
|
||||
.text-glow-cyan {
|
||||
text-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<rect width="32" height="32" rx="8" fill="#0a0a0a"/>
|
||||
<text x="16" y="23" font-family="system-ui, sans-serif" font-size="22" font-weight="bold" fill="#00d4ff" text-anchor="middle">O</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 283 B |
@@ -0,0 +1,122 @@
|
||||
import type { Metadata } from "next"
|
||||
import { GeistSans } from "geist/font/sans"
|
||||
import { GeistMono } from "geist/font/mono"
|
||||
import { Inter, Manrope } from "next/font/google"
|
||||
import Script from "next/script"
|
||||
import "./globals.css"
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
display: "swap",
|
||||
})
|
||||
|
||||
const manrope = Manrope({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-manrope",
|
||||
display: "swap",
|
||||
})
|
||||
|
||||
const primarySiteUrl = "https://ohmyopenagent.com"
|
||||
|
||||
export const metadata: Metadata = {
|
||||
metadataBase: new URL(primarySiteUrl),
|
||||
title: {
|
||||
default: "Oh My OpenAgent — The Best Agent Harness",
|
||||
template: "%s | Oh My OpenAgent",
|
||||
},
|
||||
description:
|
||||
"Meet Sisyphus: The batteries-included agent that codes like you. Multi-model orchestration, background agents, 40+ lifecycle hooks.",
|
||||
keywords: [
|
||||
"opencode",
|
||||
"oh-my-opencode",
|
||||
"openagent",
|
||||
"oh-my-openagent",
|
||||
"ai agent",
|
||||
"code agent",
|
||||
"sisyphus",
|
||||
"multi-model",
|
||||
"claude",
|
||||
"gpt",
|
||||
"gemini",
|
||||
"coding assistant",
|
||||
],
|
||||
authors: [{ name: "Yeongyu Kim", url: "https://github.com/code-yeongyu" }],
|
||||
creator: "Yeongyu Kim",
|
||||
openGraph: {
|
||||
type: "website",
|
||||
locale: "en_US",
|
||||
url: primarySiteUrl,
|
||||
siteName: "Oh My OpenAgent",
|
||||
title: "Oh My OpenAgent — The Best Agent Harness",
|
||||
description:
|
||||
"Meet Sisyphus: The batteries-included agent that codes like you. Multi-model orchestration, background agents, 40+ lifecycle hooks.",
|
||||
images: [{ url: "/images/hero.png", width: 1200, height: 630, alt: "Oh My OpenAgent" }],
|
||||
},
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
title: "Oh My OpenAgent — The Best Agent Harness",
|
||||
description: "Meet Sisyphus: The batteries-included agent that codes like you.",
|
||||
images: ["/images/hero.png"],
|
||||
},
|
||||
robots: {
|
||||
index: true,
|
||||
follow: true,
|
||||
googleBot: {
|
||||
index: true,
|
||||
follow: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const jsonLd = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
name: "Oh My OpenAgent",
|
||||
applicationCategory: "DeveloperApplication",
|
||||
operatingSystem: "macOS, Linux, Windows",
|
||||
url: primarySiteUrl,
|
||||
author: {
|
||||
"@type": "Person",
|
||||
name: "Yeongyu Kim",
|
||||
url: "https://github.com/code-yeongyu",
|
||||
},
|
||||
description:
|
||||
"The batteries-included agent harness for OpenCode. Multi-model orchestration, background agents, 40+ lifecycle hooks.",
|
||||
offers: {
|
||||
"@type": "Offer",
|
||||
price: "0",
|
||||
priceCurrency: "USD",
|
||||
},
|
||||
}
|
||||
|
||||
const gaMeasurementId = "G-S0QJFKT46Q"
|
||||
const gaTrackedDomain = "ohmyopenagent.com"
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html
|
||||
lang="en"
|
||||
className={`dark ${GeistSans.variable} ${GeistMono.variable} ${inter.variable} ${manrope.variable}`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<body className="flex min-h-screen flex-col bg-[#0a0a0a] text-[#ededed] antialiased">
|
||||
<Script
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${gaMeasurementId}`}
|
||||
strategy="afterInteractive"
|
||||
/>
|
||||
<Script id="google-analytics" strategy="afterInteractive">
|
||||
{`window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '${gaMeasurementId}', { cookie_domain: '${gaTrackedDomain}' });`}
|
||||
</Script>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import type { MetadataRoute } from "next"
|
||||
|
||||
export default function manifest(): MetadataRoute.Manifest {
|
||||
return {
|
||||
name: "Oh My OpenAgent",
|
||||
short_name: "OMO",
|
||||
description:
|
||||
"The Best Agent Harness. Meet Sisyphus: The batteries-included agent that codes like you.",
|
||||
start_url: "/",
|
||||
display: "standalone",
|
||||
background_color: "#0a0a0a",
|
||||
theme_color: "#00d4ff",
|
||||
icons: [
|
||||
{
|
||||
src: "/icon.svg",
|
||||
sizes: "any",
|
||||
type: "image/svg+xml",
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
export { landingMetadata as metadata } from "@/app/_components/landing-page"
|
||||
|
||||
import type { JSX } from "react"
|
||||
import { setRequestLocale } from "next-intl/server"
|
||||
import { LandingPage } from "@/app/_components/landing-page"
|
||||
import { LocalizedPageShell } from "@/app/_components/localized-page-shell"
|
||||
import { defaultLocale } from "@/i18n/config"
|
||||
|
||||
export default function HomePage(): JSX.Element {
|
||||
setRequestLocale(defaultLocale)
|
||||
|
||||
return (
|
||||
<LocalizedPageShell locale={defaultLocale}>
|
||||
<LandingPage />
|
||||
</LocalizedPageShell>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import type { MetadataRoute } from "next"
|
||||
|
||||
export default function robots(): MetadataRoute.Robots {
|
||||
return {
|
||||
rules: {
|
||||
userAgent: "*",
|
||||
allow: "/",
|
||||
},
|
||||
sitemap: "https://ohmyopenagent.com/sitemap.xml",
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import type { MetadataRoute } from "next"
|
||||
|
||||
const BASE_URL = "https://ohmyopenagent.com"
|
||||
|
||||
export default function sitemap(): MetadataRoute.Sitemap {
|
||||
const routes = ["", "/docs", "/manifesto"]
|
||||
const locales = ["en", "ko", "ja", "zh"]
|
||||
|
||||
return routes.flatMap((route) =>
|
||||
locales.map((locale) => ({
|
||||
url: `${BASE_URL}/${locale}${route}`,
|
||||
lastModified: new Date(),
|
||||
changeFrequency: "weekly" as const,
|
||||
priority: route === "" ? 1 : 0.8,
|
||||
})),
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user