[docs] Setup a new next.js application for documentation

This app only uses Pigment and some CSS module for styling and will
serve as an internal dogfood for us.

docs/.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": "next",
+  "rules": {
+    "react/react-in-jsx-scope": "off"
+  }
+}

docs/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# env files (can opt-in for commiting if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

docs/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

docs/data/getMarkdownPage.ts

@@ -0,0 +1,87 @@
+import * as path from 'path';
+import * as fs from 'node:fs/promises';
+import { evaluate } from '@mdx-js/mdx';
+import * as jsxRuntime from 'react/jsx-runtime';
+import remarkFrontmatter from 'remark-frontmatter';
+import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
+import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+import extractToc, { type Toc } from '@stefanprobst/rehype-extract-toc';
+import exportToc from '@stefanprobst/rehype-extract-toc/mdx';
+import { read as readVFile } from 'to-vfile';
+import { matter } from 'vfile-matter';
+
+export interface PageMetadata {
+  title: string;
+  description: string;
+  components?: string;
+  githubLabel?: string;
+  slug: string;
+}
+
+async function getFileHandle(basePath: string, slug: string) {
+  const mdxFilePath = path.join(process.env.DATA_DIR as string, basePath, slug, `${slug}.mdx`);
+  const mdFilePath = path.join(process.env.DATA_DIR as string, basePath, slug, `${slug}.md`);
+
+  try {
+    const fileHandle = await fs.open(mdxFilePath);
+    return {
+      handle: fileHandle,
+      path: mdxFilePath,
+      [Symbol.asyncDispose]: async () => {
+        await fileHandle.close();
+      },
+    };
+  } catch (ex) {
+    try {
+      const fileHandle = await fs.open(mdFilePath);
+      return {
+        handle: fileHandle,
+        path: mdFilePath,
+        [Symbol.asyncDispose]: async () => {
+          await fileHandle.close();
+        },
+      };
+    } catch (ex) {
+      throw new Error('404');
+    }
+  }
+}
+
+export async function getMarkdownPage(basePath: string, slug: string) {
+  await using file = await getFileHandle(basePath, slug);
+  const mdxSource = await file.handle.readFile({
+    encoding: 'utf-8',
+  });
+  const {
+    default: MDXContent,
+    frontmatter,
+    tableOfContents,
+  } = await evaluate(mdxSource, {
+    ...jsxRuntime,
+    remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
+    rehypePlugins: [
+      // [rehypePrettyCode, { theme: config.shikiThemes }],
+      rehypeSlug,
+      extractToc,
+      exportToc,
+    ],
+  });
+
+  return {
+    metadata: {
+      ...(frontmatter as Partial<PageMetadata>),
+      slug,
+    } as PageMetadata,
+    tableOfContents: tableOfContents as Toc,
+    MDXContent,
+  };
+}
+
+export async function getMarkdownPageMetadata(basePath: string, slug: string) {
+  await using file = await getFileHandle(basePath, slug);
+
+  const vfile = await readVFile(file.path);
+  matter(vfile);
+  return vfile.data.matter as PageMetadata;
+}

docs/data/getting-started/overview/overview.mdx

@@ -0,0 +1,12 @@
+---
+title: Quick start
+description: Get started with Pigment CSS, a zero-runtime CSS-in-JS library.
+---
+
+# Quick start
+
+<Description />
+
+## Installation
+
+Pigment CSS has two category of packages. First one is to be imported and used in your source code. This includes the public API of the package. Second category is to be imported in your bundler config file to configure and actually be able to use Pigment CSS. We currently support [`Next.js`](https://nextjs.org/) (no Turbopack yet), [`Vite`](https://vite.dev/) and [`Webpack`](https://webpack.js.org/).

docs/data/pages.ts

@@ -0,0 +1,36 @@
+export interface RouteMetadata {
+  pathname: string;
+  title?: string;
+  children?: readonly RouteMetadata[];
+  planned?: boolean;
+  unstable?: boolean;
+}
+
+const pages: readonly RouteMetadata[] = [
+  {
+    pathname: '/getting-started',
+    title: 'Getting started',
+    children: [{ pathname: '/getting-started/overview', title: 'Overview' }],
+  },
+];
+
+export default pages;
+
+function extractSlug(pathname: string) {
+  return pathname.split('/').pop()!;
+}
+
+export function getSlugs(parentPath: string) {
+  const slugs: string[] = [];
+
+  const categoryPages = pages.find((page) => page.pathname === parentPath);
+  categoryPages?.children?.forEach((level2Page) => {
+    if (level2Page.children) {
+      slugs.push(...level2Page.children.map((page) => extractSlug(page.pathname)));
+    } else {
+      slugs.push(extractSlug(level2Page.pathname));
+    }
+  });
+
+  return slugs;
+}

docs/next.config.ts

@@ -0,0 +1,31 @@
+import type { NextConfig } from 'next';
+import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
+import { theme as baseTheme } from './src/theme';
+import path from 'path';
+
+const DATA_DIR = path.join(process.cwd(), 'data');
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  trailingSlash: false,
+  env: {
+    DATA_DIR,
+  },
+  distDir: 'export',
+  output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
+};
+
+const theme = extendTheme({
+  colorSchemes: {
+    light: baseTheme,
+  },
+});
+
+export default withPigment(nextConfig, {
+  theme,
+  displayName: true,
+  sourceMap: true,
+  babelOptions: {
+    plugins: ['@babel/plugin-proposal-explicit-resource-management'],
+  },
+});

docs/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "docs",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "NODE_ENV=production next build",
+    "preview": "serve ./export",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@base_ui/react": "^1.0.0-alpha.3",
+    "@mdx-js/mdx": "^3.1.0",
+    "@pigment-css/react": "workspace:*",
+    "@stefanprobst/rehype-extract-toc": "^2.2.0",
+    "clsx": "^2.1.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021",
+    "next": "15.0.2",
+    "rehype-slug": "^6.0.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-mdx-frontmatter": "^5.0.0",
+    "to-vfile": "^8.0.0",
+    "vfile-matter": "^5.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-explicit-resource-management": "^7.25.9",
+    "@pigment-css/nextjs-plugin": "workspace:*",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "serve": "14.2.4",
+    "tailwindcss": "^3.4.14"
+  }
+}

docs/src/app/(content)/getting-started/[slug]/not-found.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { MainContent } from '@/components/MainContent';
+
+export default function NotFoundPage() {
+  return (
+    <React.Fragment>
+      <MainContent as="main">
+        <h1>Not Found</h1>
+        <p>The page that you were looking for could not be found.</p>
+      </MainContent>
+    </React.Fragment>
+  );
+}