feat(web): render docs from repo-root docs/ as MDX SoT at build time
Replace the bespoke 16-section /docs page that pulled prose from
`messages/{locale}.json` with a build-time MDX renderer that reads the
canonical markdown in repo-root `docs/`. Each markdown file becomes
one section of the docs page, scrolled-to via the existing DocsShell
sidebar. Section data structure stays in `lib/docs-sections.ts` so the
sidebar / scroll-spy keeps working with no client changes.
Why this layout:
- One source of truth: `docs/guide/*.md`, `docs/reference/*.md`,
`docs/manifesto.md`. Edits land in one place; the website redeploys
pick them up automatically via the existing web-deploy workflow.
- Build-time only: `MDXRemote` is rendered inside an RSC and the page
is statically generated (`●` SSG). Cloudflare Workers serves the
rendered HTML; no MDX compiler runs at request time.
- next-intl unchanged for everything else: only the docs prose moves
out. `mobileHeader` and `searchPlaceholder` strings stay in
`messages/{locale}.json`; the 18 stale section keys are removed.
Files:
- web/lib/docs-sections.ts: 9 sections matching docs/ files, typed
`DocSection` with `{ id, title, file }`.
- web/lib/docs-source.ts: `loadDocSource(file)` reads
`<repo-root>/docs/<file>` at build time via `node:fs/promises`.
- web/components/docs/mdx-components.tsx: shadcn-styled overrides for
every markdown element (h1-h4, p, a, ul/ol/li, blockquote, code, pre,
table, hr, strong) so the rendered output matches the rest of the
site.
- web/app/[locale]/docs/page.tsx: rewritten as an async RSC that loads
every section's source in parallel and renders one MDXRemote per
section inside DocsShell.
- web/messages/{en,ja,ko,zh}.json: `docs` key trimmed from 20 entries
to 2 (mobileHeader, searchPlaceholder).
- web/package.json: + next-mdx-remote, + gray-matter.
Local verification: `bun run format:check`, `bun run lint`,
`bun run type-check`, `bun run build`, `bunx opennextjs-cloudflare
build` all pass; `/[locale]/docs` builds as static for all 4 locales
at 4.12 kB / 132 kB First Load.
This commit is contained in:
YeonGyu-Kim
+17
-513
@@ -1,527 +1,31 @@
|
||||
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 { MDXRemote } from "next-mdx-remote/rsc"
|
||||
import { DocsShell } from "@/components/docs/docs-shell"
|
||||
import { DOC_SECTION_IDS, DOC_SECTION_TITLE_KEYS } from "@/lib/docs-sections"
|
||||
import { mdxComponents } from "@/components/docs/mdx-components"
|
||||
import { DOC_SECTIONS } from "@/lib/docs-sections"
|
||||
import { loadDocSource } from "@/lib/docs-source"
|
||||
|
||||
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]}`),
|
||||
}))
|
||||
|
||||
const sectionsWithSource = await Promise.all(
|
||||
DOC_SECTIONS.map(async (section) => ({
|
||||
...section,
|
||||
source: await loadDocSource(section.file),
|
||||
})),
|
||||
)
|
||||
|
||||
return (
|
||||
<DocsShell
|
||||
mobileHeader={t("mobileHeader")}
|
||||
searchPlaceholder={t("searchPlaceholder")}
|
||||
sections={sections}
|
||||
sections={DOC_SECTIONS.map((s) => ({ id: s.id, title: s.title }))}
|
||||
>
|
||||
<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>
|
||||
{sectionsWithSource.map((section) => (
|
||||
<section key={section.id} id={section.id} className="scroll-mt-24">
|
||||
<MDXRemote source={section.source} components={mdxComponents} />
|
||||
</section>
|
||||
))}
|
||||
</DocsShell>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user