mincho-js · Jeong-jj · Nov 30, 2025 · Nov 30, 2025 · Nov 30, 2025 · Nov 30, 2025
diff --git a/.gitignore b/.gitignore
@@ -226,4 +226,8 @@ Temporary Items
 .history/
 
 # Built Visual Studio Code Extensions
-*.vsix
+*.vsix
+
+# Temporary planning files (to be removed later)
+CLAUDE.md
+reference/*
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -8,7 +8,7 @@ enableGlobalCache: true
 
 globalFolder: ./.yarn/cache/global
 
-nodeLinker: pnpm
+nodeLinker: node-modules
 
 npmMinimalAgeGate: 7d
 
@@ -22,6 +22,9 @@ packageExtensions:
   prettier-eslint@*:
     dependencies:
       typescript: "*"
+  nextra@*:
+    peerDependencies:
+      typescript: "*"
 
 plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-outdated.cjs

diff --git a/package.json b/package.json
@@ -6,7 +6,8 @@
   "workspaces": [
     "configs/*",
     "packages/*",
-    "examples/*"
+    "examples/*",
+    "site"
   ],
   "scripts": {
     "postinstall": "yarn workspace vite-config-custom build",

diff --git a/site/mdx-components.tsx b/site/mdx-components.tsx
@@ -0,0 +1,14 @@
+import type { MDXComponents } from 'mdx/types'
+import { useMDXComponents as getNextraComponents } from 'nextra/mdx-components'
+import { useMDXComponents as getDocsMDXComponents } from 'nextra-theme-docs'
+
+const nextraComponents = getNextraComponents()
+const docsComponents = getDocsMDXComponents()
+
+export function useMDXComponents(components?: MDXComponents): MDXComponents {
+  return {
+    ...nextraComponents,
+    ...docsComponents,
+    ...components
+  }
+}
diff --git a/site/next-env.d.ts b/site/next-env.d.ts
@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
-/// <reference path="./.next/types/routes.d.ts" />
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
-/// <reference path="./.next/types/routes.d.ts" />
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/site/next.config.mjs b/site/next.config.mjs
@@ -0,0 +1,9 @@
+import nextra from 'nextra'
+
+const withNextra = nextra({
+  contentDirBasePath: '/docs'
+})
+
+export default withNextra({
+  reactStrictMode: true
+})
diff --git a/site/package.json b/site/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "mincho-docs",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "^15.5.10",
+    "nextra": "^4.6.1",
+    "nextra-theme-docs": "^4.6.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/site/src/app/docs/[[...mdxPath]]/page.tsx b/site/src/app/docs/[[...mdxPath]]/page.tsx
@@ -0,0 +1,29 @@
+import { generateStaticParamsFor, importPage } from 'nextra/pages'
+import { useMDXComponents } from '../../../../mdx-components'
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath')
+
+type PageProps = {
+  params: Promise<{ mdxPath?: string[] }>
+}
+
+export async function generateMetadata(props: PageProps) {
+  const params = await props.params
+  const { metadata } = await importPage(params.mdxPath)
+  return metadata
+}
+
+const components = useMDXComponents()
+const Wrapper = components.wrapper!
+
+export default async function Page(props: PageProps) {
+  const params = await props.params
+  const result = await importPage(params.mdxPath)
+  const { default: MDXContent, toc, metadata } = result
+
+  return (
+    <Wrapper toc={toc} metadata={metadata}>
+      <MDXContent {...props} params={params} />
+    </Wrapper>
+  )
+}
diff --git a/site/src/app/layout.tsx b/site/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react'
+import { Footer, Layout, Navbar } from 'nextra-theme-docs'
+import { Head } from 'nextra/components'
+import { getPageMap } from 'nextra/page-map'
+import 'nextra-theme-docs/style.css'
+
+export const metadata = {
+  title: 'Mincho.js',
+  description: 'Natural CSS in TypeScript - A CSS-in-JS framework built on Vanilla Extract'
+}
+
+export default async function RootLayout({ children }: { children: ReactNode }) {
+  const pageMap = await getPageMap()
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <Head />
+      <body suppressHydrationWarning>
+        <Layout
+          navbar={
+            <Navbar
+              logo={<span style={{ fontWeight: 700 }}>Mincho.js</span>}
+              projectLink="https://github.com/mincho-js/mincho"
+            />
+          }
+          pageMap={pageMap}
+          docsRepositoryBase="https://github.com/mincho-js/mincho/tree/main/site"
+          footer={<Footer>MIT {new Date().getFullYear()} © Mincho.js</Footer>}
+        >
+          {children}
+        </Layout>
+      </body>
+    </html>
+  )
+}
diff --git a/site/src/app/page.tsx b/site/src/app/page.tsx
@@ -0,0 +1,26 @@
+export default function IndexPage() {
+  return (
+    <div style={{ textAlign: 'center', padding: '100px 20px' }}>
+      <h1 style={{ fontSize: 48, fontWeight: 'bold', marginBottom: 16 }}>
+        Mincho.js
+      </h1>
+      <p style={{ fontSize: 20, color: '#666', marginBottom: 32 }}>
+        Natural CSS in TypeScript
+      </p>
+      <a
+        href="/docs"
+        style={{
+          display: 'inline-block',
+          padding: '12px 24px',
+          backgroundColor: '#0070f3',
+          color: 'white',
+          borderRadius: 8,
+          textDecoration: 'none',
+          fontWeight: 500
+        }}
+      >
+        Get Started
+      </a>
+    </div>
+  )
+}
diff --git a/site/src/content/_meta.ts b/site/src/content/_meta.ts
@@ -0,0 +1,10 @@
+export default {
+  index: "Introduction",
+  "getting-started": "Getting Started",
+  literal: "Literal CSS",
+  rules: "Rules",
+  theme: "Theme",
+  styled: "Styled Components",
+  classname: "Class Name Utilities",
+  "define-rules": "Define Rules"
+};