YeonGyu-Kim
e5369f3a63
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.
32 lines
1022 B
TypeScript
32 lines
1022 B
TypeScript
import { getTranslations } from "next-intl/server"
|
|
import { MDXRemote } from "next-mdx-remote/rsc"
|
|
import { DocsShell } from "@/components/docs/docs-shell"
|
|
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 sectionsWithSource = await Promise.all(
|
|
DOC_SECTIONS.map(async (section) => ({
|
|
...section,
|
|
source: await loadDocSource(section.file),
|
|
})),
|
|
)
|
|
|
|
return (
|
|
<DocsShell
|
|
mobileHeader={t("mobileHeader")}
|
|
searchPlaceholder={t("searchPlaceholder")}
|
|
sections={DOC_SECTIONS.map((s) => ({ id: s.id, title: s.title }))}
|
|
>
|
|
{sectionsWithSource.map((section) => (
|
|
<section key={section.id} id={section.id} className="scroll-mt-24">
|
|
<MDXRemote source={section.source} components={mdxComponents} />
|
|
</section>
|
|
))}
|
|
</DocsShell>
|
|
)
|
|
}
|