feat: revamped docs site

It is now in sync with the base-ui docs design.

.eslintrc.js

@@ -57,12 +57,6 @@ module.exports = {
     // Airbnb use warn https://github.com/airbnb/javascript/blob/63098cbb6c05376dbefc9a91351f5727540c1ce1/packages/eslint-config-airbnb-base/rules/style.js#L97
     // but eslint recommands error
     'func-names': 'error',
-    'no-restricted-imports': [
-      'error',
-      {
-        patterns: ['@mui/*/*/*'],
-      },
-    ],
     'no-continue': 'off',
     'no-constant-condition': 'error',
     // Use the proptype inheritance chain

apps/pigment-css-next-app/package.json

@@ -15,13 +15,13 @@
     "local-ui-lib": "workspace:^",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.1.3"
+    "next": "15.1.6"
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "workspace:^",
-    "@types/node": "^18.19.63",
-    "@types/react": "^19.0.2",
-    "@types/react-dom": "^19.0.2",
+    "@types/node": "^20",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "eslint": "^8.57.0",
     "typescript": "^5.4.4"
   },

docs/.env

@@ -1,3 +1,2 @@
-REPO_ROOT=https://github.com/mui/pigment-css
-DEFAULT_BRANCH=master
-
+SOURCE_CODE_REPO=https://github.com/mui/pigment-css
+SOURCE_GITHUB_BRANCH=master

docs/.gitignore

@@ -28,10 +28,15 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+export

docs/README.md

@@ -1,4 +1,36 @@
-# Pigment CSS Docs app
+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).
 
-This is the Pigment CSS docs application bootstrapped with Next.js 15. It uses App Router and
-Pigment CSS for styling.
+## 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/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

docs/next.config.ts

@@ -1,54 +1,46 @@
-import * as url from 'url';
-import * as path from 'path';
 import type { NextConfig } from 'next';
-// @ts-ignore
-// eslint-disable-next-line no-restricted-imports
+import nextMdx from '@next/mdx';
+import withPigment, { type PigmentCSSConfig } from '@pigment-css/plugin/nextjs';
+import remarkGfm from 'remark-gfm';
+import remarkTypography from 'remark-typography';
+import rehypeExtractToc from '@stefanprobst/rehype-extract-toc';
+// @ts-expect-error This file doesn't have TS definitions.
 import withDocsInfra from '@mui/monorepo/docs/nextConfigDocsInfra.js';
-import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
 
-import { theme as baseTheme } from './src/theme';
+import theme from './src/theme';
 import rootPackage from '../package.json';
 
-const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
-const DATA_DIR = path.join(currentDirectory, 'data');
+const withMdx = nextMdx({
+  options: {
+    remarkPlugins: [remarkGfm, remarkTypography],
+    rehypePlugins: [rehypeExtractToc],
+  },
+});
+
+const isProd = process.env.NODE_ENV === 'production';
 
 const nextConfig: NextConfig = {
   trailingSlash: false,
+  pageExtensions: ['mdx', 'tsx'],
   env: {
-    DATA_DIR,
-    CURRENT_VERSION: rootPackage.version,
-  },
-  distDir: 'export',
-  output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-  devIndicators: {
-    buildActivity: true,
-    buildActivityPosition: 'bottom-right',
-    appIsrStatus: false,
+    LIB_VERSION: rootPackage.version,
+    APP_NAME: 'Pigment CSS',
+    GITHUB: 'https://github.com/mui/pigment-css',
+    NPM: 'https://www.npmjs.com/package/@pigment-css/core',
   },
+  ...(isProd && { distDir: 'export', output: 'export' }),
   experimental: {
     esmExternals: true,
     workerThreads: false,
-    turbo: undefined,
   },
 };
 
-const theme = extendTheme({
-  colorSchemes: {
-    light: baseTheme,
-  },
-});
-
-export default withPigment(withDocsInfra(nextConfig), {
+const pigmentConfig: PigmentCSSConfig = {
   theme,
-  displayName: true,
-  sourceMap: process.env.NODE_ENV !== 'production',
-  babelOptions: {
-    plugins: [
-      '@babel/plugin-proposal-explicit-resource-management',
-      '@babel/plugin-transform-unicode-property-regex',
-    ],
-  },
-});
+  transformSx: false,
+  displayName: !isProd,
+  sourceMap: !isProd,
+  include: /\.pigment\.tsx?$/,
+};
+
+export default withPigment(withMdx(withDocsInfra(nextConfig)), pigmentConfig);

docs/package.json

@@ -1,43 +1,38 @@
 {
   "name": "docs",
-  "version": "0.1.0",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "cross-env NODE_ENV=production next build",
-    "preview": "serve ./export",
-    "lint": "next lint",
-    "typescript": "tsc --noEmit -p ."
+    "build": "next build",
+    "start": "pnpm dlx 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",
+    "@base-ui-components/react": "^1.0.0-alpha.6",
+    "@pigment-css/theme": "workspace:*",
+    "@pigment-css/react-new": "workspace:*",
     "clsx": "^2.1.1",
-    "next": "15.0.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "rehype-pretty-code": "0.14.0",
-    "rehype-slug": "^6.0.0",
-    "remark-frontmatter": "^5.0.0",
-    "remark-gfm": "^4.0.0",
-    "remark-mdx-frontmatter": "^5.0.0",
-    "shiki": "^1.22.2",
-    "to-vfile": "^8.0.0",
-    "vfile-matter": "^5.0.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next": "15.1.6",
+    "scroll-into-view-if-needed": "^3.1.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-explicit-resource-management": "^7.25.9",
-    "@babel/plugin-transform-unicode-property-regex": "^7.25.9",
-    "@mui/monorepo": "github:mui/material-ui#ae455647016fe5dee968b017aa191e176bc113dd",
-    "@pigment-css/nextjs-plugin": "workspace:*",
+    "@mdx-js/loader": "^3.1.0",
+    "@next/mdx": "^15.1.6",
+    "@pigment-css/plugin": "workspace:*",
+    "@stefanprobst/rehype-extract-toc": "^2.2.1",
+    "@mui/monorepo": "github:mui/material-ui#v6.4.2",
+    "remark-gfm": "^4.0.0",
+    "remark-typography": "^0.6.21",
+    "typescript": "^5",
     "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "eslint-config-next": "15.0.2",
-    "serve": "14.2.4",
-    "tailwindcss": "^3.4.14"
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.6",
+    "@eslint/eslintrc": "^3"
   },
   "nx": {
     "targets": {

docs/public/_headers

@@ -0,0 +1,24 @@
+/_next/*.js
+  Cache-Control: public, max-age=31536000, immutable
+
+/static/*.ico
+  Content-Type: image/x-icon
+
+/performance/*
+  X-Robots-Tag: noindex
+
+/experiments/*
+  X-Robots-Tag: noindex
+
+/*
+  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
+  # Block usage in iframes.
+  X-Frame-Options: SAMEORIGIN
+  # Force the browser to trust the Content-Type header
+  # https://stackoverflow.com/questions/18337630/what-is-x-content-type-options-nosniff
+  X-Content-Type-Options: nosniff
+  X-XSS-Protection: 1; mode=block
+  Referrer-Policy: strict-origin-when-cross-origin
+  # TODO: progressively reduce the CSP scopes
+  # Start with a wildcard, using https://github.com/mui/toolpad/blob/f4c4eb046b352e4fc00729c3bed605e671b040c4/packages/toolpad-studio/src/server/index.ts#L241
+  Content-Security-Policy: default-src * data: mediastream: blob: filesystem: about: ws: wss: 'unsafe-eval' 'wasm-unsafe-eval' 'unsafe-inline'; script-src * data: blob: 'unsafe-inline' 'unsafe-eval'; script-src-elem * data: blob: 'unsafe-inline'; connect-src * data: blob: 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; media-src * data: blob: 'unsafe-inline'; frame-src * data: blob: ; style-src * data: blob: 'unsafe-inline'; font-src * data: blob: 'unsafe-inline'; frame-ancestors *;

docs/public/robots.txt

@@ -0,0 +1,4 @@
+# Algolia-Crawler-Verif: 98C49CAFF7AEED76
+
+User-agent: *
+Allow: /