Skip to content

Commit 042b771

Browse files
brijeshb42Brijesh Bittu
brijeshb42
and
Brijesh Bittu
authored
[docs] Setup a new next.js application for documentation (mui#299)
Co-authored-by: Brijesh Bittu <[email protected]>
1 parent f632cd9 commit 042b771

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+4043
-383
lines changed

‎.eslintignore

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
/docs/pages/playground/
66
/packages/pigment-css-react/utils/
77
/packages/pigment-css-react/processors/
8+
/packages/pigment-css-react/internal/
89
/packages/pigment-css-react/exports/
910
/packages/pigment-css-react/theme/
1011
/packages/pigment-css-react/tests/**/fixtures

‎.eslintrc.js

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ module.exports = {
4343
*/
4444
rules: {
4545
'consistent-this': ['error', 'self'],
46+
'import/prefer-default-export': 'off',
4647
curly: ['error', 'all'],
4748
// Just as bad as "max components per file"
4849
'max-classes-per-file': 'off',

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
!.vscode/extensions.json
1010
*.log
1111
*.tsbuildinfo
12-
/.eslintcache
12+
.eslintcache
1313
/.nyc_output
1414
/benchmark/**/dist
1515
/coverage

‎docs/.eslintrc.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
module.exports = {
2+
rules: {
3+
'react/prop-types': 'off',
4+
'react/react-in-jsx-scope': 'off',
5+
'react/no-unknown-property': ['error', { ignore: ['sx'] }],
6+
'import/extensions': [
7+
'error',
8+
'ignorePackages',
9+
{
10+
'': 'never',
11+
js: 'never',
12+
jsx: 'never',
13+
ts: 'never',
14+
tsx: 'never',
15+
},
16+
],
17+
},
18+
};

‎docs/.gitignore

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.*
7+
.yarn/*
8+
!.yarn/patches
9+
!.yarn/plugins
10+
!.yarn/releases
11+
!.yarn/versions
12+
13+
# testing
14+
/coverage
15+
16+
# next.js
17+
/.next/
18+
/out/
19+
20+
# production
21+
/build
22+
23+
# misc
24+
.DS_Store
25+
*.pem
26+
27+
# debug
28+
npm-debug.log*
29+
yarn-debug.log*
30+
yarn-error.log*
31+
32+
# env files (can opt-in for commiting if needed)
33+
.env*
34+
35+
# vercel
36+
.vercel
37+
38+
# typescript
39+
*.tsbuildinfo
40+
next-env.d.ts

‎docs/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Pigment CSS Docs app
2+
3+
This is the Pigment CSS docs application bootstrapped with Next.js 15. It uses app router and
4+
Pigment CSS for styling.

‎docs/data/getMarkdownPage.ts

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import * as path from 'path';
2+
import * as fs from 'node:fs/promises';
3+
import { evaluate } from '@mdx-js/mdx';
4+
import * as jsxRuntime from 'react/jsx-runtime';
5+
import remarkFrontmatter from 'remark-frontmatter';
6+
import remarkMdxFrontmatter from 'remark-mdx-frontmatter';
7+
import remarkGfm from 'remark-gfm';
8+
import rehypeSlug from 'rehype-slug';
9+
import extractToc, { type Toc } from '@stefanprobst/rehype-extract-toc';
10+
import exportToc from '@stefanprobst/rehype-extract-toc/mdx';
11+
import { read as readVFile } from 'to-vfile';
12+
import { matter } from 'vfile-matter';
13+
14+
export interface PageMetadata {
15+
title: string;
16+
description: string;
17+
components?: string;
18+
githubLabel?: string;
19+
slug: string;
20+
}
21+
22+
async function getFileHandle(basePath: string, slug: string) {
23+
const mdxFilePath = path.join(process.env.DATA_DIR as string, basePath, slug, `${slug}.mdx`);
24+
const mdFilePath = path.join(process.env.DATA_DIR as string, basePath, slug, `${slug}.md`);
25+
26+
try {
27+
const fileHandle = await fs.open(mdxFilePath);
28+
return {
29+
handle: fileHandle,
30+
path: mdxFilePath,
31+
[Symbol.asyncDispose]: async () => {
32+
await fileHandle.close();
33+
},
34+
};
35+
} catch (ex1) {
36+
try {
37+
const fileHandle = await fs.open(mdFilePath);
38+
return {
39+
handle: fileHandle,
40+
path: mdFilePath,
41+
[Symbol.asyncDispose]: async () => {
42+
await fileHandle.close();
43+
},
44+
};
45+
} catch (ex2) {
46+
throw new Error('404');
47+
}
48+
}
49+
}
50+
51+
export async function getMarkdownPage(basePath: string, slug: string) {
52+
await using file = await getFileHandle(basePath, slug);
53+
const mdxSource = await file.handle.readFile({
54+
encoding: 'utf-8',
55+
});
56+
const {
57+
default: MDXContent,
58+
frontmatter,
59+
tableOfContents,
60+
} = await evaluate(mdxSource, {
61+
...jsxRuntime,
62+
remarkPlugins: [remarkGfm, remarkFrontmatter, remarkMdxFrontmatter],
63+
rehypePlugins: [
64+
// [rehypePrettyCode, { theme: config.shikiThemes }],
65+
rehypeSlug,
66+
extractToc,
67+
exportToc,
68+
],
69+
});
70+
71+
return {
72+
metadata: {
73+
...(frontmatter as Partial<PageMetadata>),
74+
slug,
75+
} as PageMetadata,
76+
tableOfContents: tableOfContents as Toc,
77+
MDXContent,
78+
};
79+
}
80+
81+
export async function getMarkdownPageMetadata(basePath: string, slug: string) {
82+
await using file = await getFileHandle(basePath, slug);
83+
84+
const vfile = await readVFile(file.path);
85+
matter(vfile);
86+
return vfile.data.matter as PageMetadata;
87+
}

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

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Quick start
3+
description: Get started with Pigment CSS, a zero-runtime CSS-in-JS library.
4+
---
5+
6+
# Quick start
7+
8+
<Description />
9+
10+
## Installation
11+
12+
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

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
export interface RouteMetadata {
2+
pathname: string;
3+
title?: string;
4+
children?: readonly RouteMetadata[];
5+
planned?: boolean;
6+
unstable?: boolean;
7+
}
8+
9+
const pages: readonly RouteMetadata[] = [
10+
{
11+
pathname: '/getting-started',
12+
title: 'Getting started',
13+
children: [{ pathname: '/getting-started/overview', title: 'Overview' }],
14+
},
15+
];
16+
17+
export default pages;
18+
19+
function extractSlug(pathname: string) {
20+
return pathname.split('/').pop()!;
21+
}
22+
23+
export function getSlugs(parentPath: string) {
24+
const slugs: string[] = [];
25+
26+
const categoryPages = pages.find((page) => page.pathname === parentPath);
27+
categoryPages?.children?.forEach((level2Page) => {
28+
if (level2Page.children) {
29+
slugs.push(...level2Page.children.map((page) => extractSlug(page.pathname)));
30+
} else {
31+
slugs.push(extractSlug(level2Page.pathname));
32+
}
33+
});
34+
35+
return slugs;
36+
}

‎docs/next.config.ts

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import type { NextConfig } from 'next';
2+
import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin';
3+
import path from 'path';
4+
import { theme as baseTheme } from './src/theme';
5+
6+
const DATA_DIR = path.join(process.cwd(), 'data');
7+
8+
const nextConfig: NextConfig = {
9+
trailingSlash: false,
10+
env: {
11+
DATA_DIR,
12+
},
13+
distDir: 'export',
14+
output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
15+
eslint: {
16+
ignoreDuringBuilds: true,
17+
},
18+
};
19+
20+
const theme = extendTheme({
21+
colorSchemes: {
22+
light: baseTheme,
23+
},
24+
});
25+
26+
export default withPigment(nextConfig, {
27+
theme,
28+
displayName: true,
29+
sourceMap: true,
30+
babelOptions: {
31+
plugins: ['@babel/plugin-proposal-explicit-resource-management'],
32+
},
33+
});

‎docs/package.json

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
{
2+
"name": "docs",
3+
"version": "0.1.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "next dev",
7+
"build": "cross-env NODE_ENV=production next build",
8+
"preview": "serve ./export",
9+
"lint": "next lint",
10+
"typescript": "tsc --noEmit -p ."
11+
},
12+
"dependencies": {
13+
"@base_ui/react": "^1.0.0-alpha.3",
14+
"@mdx-js/mdx": "^3.1.0",
15+
"@pigment-css/react": "workspace:*",
16+
"@stefanprobst/rehype-extract-toc": "^2.2.0",
17+
"clsx": "^2.1.1",
18+
"react": "18.3.1",
19+
"react-dom": "18.3.1",
20+
"next": "15.0.2",
21+
"rehype-slug": "^6.0.0",
22+
"remark-frontmatter": "^5.0.0",
23+
"remark-gfm": "^4.0.0",
24+
"remark-mdx-frontmatter": "^5.0.0",
25+
"to-vfile": "^8.0.0",
26+
"vfile-matter": "^5.0.0"
27+
},
28+
"devDependencies": {
29+
"@babel/plugin-proposal-explicit-resource-management": "^7.25.9",
30+
"@pigment-css/nextjs-plugin": "workspace:*",
31+
"@types/node": "^20",
32+
"@types/react": "^18",
33+
"@types/react-dom": "^18",
34+
"eslint-config-next": "15.0.2",
35+
"serve": "14.2.4",
36+
"tailwindcss": "^3.4.14"
37+
},
38+
"nx": {
39+
"targets": {
40+
"typescript": {
41+
"cache": false,
42+
"dependsOn": [
43+
"^build"
44+
]
45+
},
46+
"build": {
47+
"outputs": [
48+
"{projectRoot}/.next",
49+
"{projectRoot}/export"
50+
]
51+
}
52+
}
53+
}
54+
}

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

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as React from 'react';
2+
import { MainContent } from '@/components/MainContent';
3+
4+
export default function NotFoundPage() {
5+
return (
6+
<MainContent as="main">
7+
<h1>Not Found</h1>
8+
<p>The page that you were looking for could not be found.</p>
9+
</MainContent>
10+
);
11+
}

0 commit comments

Comments
 (0)