update docs to use Nextra 4 (#2726)

* move

* rename

* more

* more

* more

* more

* more

* more

* more

* moree

* moree

* moree

* moree

* more

* more

* more

* [skip ci]

* more

* fix icons

* update docs to use Nextra 4

* [skip ci]

* fix lint [skip ci]

* more [skip ci]

* more

* upd

* pnpm dedupe

* yoyo

* aa

* aa

* build pass

Author: dimaMachina

.eslintrc.cjs

@@ -119,5 +119,11 @@ module.exports = {
         'no-undef': 'off',
       },
     },
+    {
+      files: ['website/**/*.mdx/**'],
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
   ],
 };

package.json

@@ -45,7 +45,7 @@
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "0.6.9",
     "rimraf": "6.0.1",
-    "tsup": "^8.0.0",
+    "tsup": "^8.3.5",
     "tsx": "4.19.2",
     "turbo": "2.3.1",
     "typescript": "5.6.3",

pnpm-lock.yaml

@@ -11,7 +11,7 @@ import { rules } from '../packages/plugin/src/index.js';
 const BR = '';
 const NBSP = ' ';
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
-const RULES_PATH = resolve(__dirname, '..', 'website', 'src', 'pages', 'rules');
+const RULES_PATH = resolve(__dirname, '..', 'website', 'content', 'rules');
 
 enum Icon {
   SCHEMA = '📄',
@@ -52,7 +52,6 @@ const MARKDOWN_LINK_RE = /\[(.*?)]\(.*\)/;
 
 async function generateDocs(): Promise<void> {
   const prettierConfigMd = await prettier.resolveConfig('./README.md');
-  const prettierConfigTs = await prettier.resolveConfig('./_meta.ts');
 
   const result = Object.entries(rules).map(async ([ruleName, rule]) => {
     const frontMatterDescription = rule.meta
@@ -101,7 +100,7 @@ async function generateDocs(): Promise<void> {
       `- Requires GraphQL Schema: \`${requiresSchema}\` [ℹ️](/docs/getting-started#extended-linting-rules-with-graphql-schema)`,
       `- Requires GraphQL Operations: \`${requiresSiblings}\` [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)`,
       BR,
-      docs.description === frontMatterDescription ? '{frontMatter.description}' : docs.description,
+      docs.description === frontMatterDescription ? '{metadata.description}' : docs.description,
     );
 
     if (docs.examples?.length > 0) {
@@ -237,60 +236,6 @@ async function generateDocs(): Promise<void> {
     );
   }
 
-  const { schemaRules, operationsRules, schemaAndOperationsRules } = Object.entries(rules)
-    .sort(([a], [b]) => a.localeCompare(b))
-    .reduce<{
-      schemaRules: string[];
-      operationsRules: string[];
-      schemaAndOperationsRules: [];
-    }>(
-      (acc, [ruleId, curr]) => {
-        const { category } = curr.meta.docs;
-        if (category === 'Schema') {
-          acc.schemaRules.push(ruleId);
-        } else if (category === 'Operations') {
-          acc.operationsRules.push(ruleId);
-        } else {
-          acc.schemaAndOperationsRules.push(ruleId);
-        }
-        return acc;
-      },
-      { schemaRules: [], operationsRules: [], schemaAndOperationsRules: [] },
-    );
-  const metaJson = {
-    index: {
-      title: 'Overview',
-      theme: {
-        layout: 'full',
-      },
-    },
-    prettier: '`prettier` Rule',
-    'deprecated-rules': 'Deprecated Rules',
-    '---1': {
-      title: 'Schema & Operations Rules',
-      type: 'separator',
-    },
-    ...Object.fromEntries(schemaAndOperationsRules.map(key => [key, ''])),
-    '---2': {
-      title: 'Schema Rules',
-      type: 'separator',
-    },
-    ...Object.fromEntries(schemaRules.map(key => [key, ''])),
-    '---3': {
-      title: 'Operations Rules',
-      type: 'separator',
-    },
-    ...Object.fromEntries(operationsRules.map(key => [key, ''])),
-  };
-
-  writeFile(
-    resolve(RULES_PATH, '_meta.ts'),
-    await prettier.format('export default ' + JSON.stringify(metaJson), {
-      parser: 'typescript',
-      ...prettierConfigTs,
-    }),
-  );
-
   console.log('✅  Documentation generated');
 }
 

scripts/generate-docs.ts

@@ -0,0 +1,31 @@
+/* eslint-disable react-hooks/rules-of-hooks -- false positive, useMDXComponents are not react hooks */
+
+import { generateStaticParamsFor, importPage } from '@theguild/components/pages';
+import { useMDXComponents } from '../../mdx-components';
+
+export const generateStaticParams = generateStaticParamsFor('mdxPath');
+
+export async function generateMetadata(props: Props) {
+  const params = await props.params;
+  const { metadata } = await importPage(params.mdxPath);
+  return metadata;
+}
+
+const Wrapper = useMDXComponents().wrapper;
+
+type Props = {
+  params: Promise<{
+    mdxPath: string[];
+  }>;
+};
+
+export default async function Page(props: Props) {
+  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>
+  );
+}

website/app/[[...mdxPath]]/page.tsx

@@ -0,0 +1,106 @@
+import { rules } from '@graphql-eslint/eslint-plugin';
+
+const { schemaRules, operationsRules, schemaAndOperationsRules } = Object.entries(rules)
+  .sort(([a], [b]) => a.localeCompare(b))
+  .reduce<{
+    schemaRules: string[];
+    operationsRules: string[];
+    schemaAndOperationsRules: [];
+  }>(
+    (acc, [ruleId, curr]) => {
+      // @ts-expect-error -- fixme
+      const { category } = curr.meta.docs;
+      if (category === 'Schema') {
+        acc.schemaRules.push(ruleId);
+      } else if (category === 'Operations') {
+        acc.operationsRules.push(ruleId);
+      } else {
+        // @ts-expect-error -- fixme
+        acc.schemaAndOperationsRules.push(ruleId);
+      }
+      return acc;
+    },
+    { schemaRules: [], operationsRules: [], schemaAndOperationsRules: [] },
+  );
+
+export default {
+  docs: {
+    title: 'Documentation',
+    type: 'page',
+    items: {
+      index: '',
+      'getting-started': '',
+      'parser-options': '',
+      usage: {
+        title: 'Usage',
+        items: {
+          _1: {
+            type: 'separator',
+            title: 'Basic',
+          },
+          graphql: '',
+          js: '',
+          'schema-and-documents': '',
+          'multiple-projects': '',
+          programmatic: '',
+          _2: {
+            type: 'separator',
+            title: 'Advanced',
+          },
+          svelte: '',
+          vue: '',
+          astro: '',
+          prettier: '',
+        },
+      },
+      _1: {
+        type: 'separator',
+        title: 'Users',
+      },
+      configs: '',
+      'disabling-rules': '',
+      vscode: '',
+      _2: {
+        type: 'separator',
+        title: 'Developers',
+      },
+      parser: '',
+      'custom-rules': '',
+    },
+  },
+  rules: {
+    title: 'Rules',
+    type: 'page',
+    items: {
+      index: {
+        theme: {
+          layout: 'full',
+        },
+      },
+      prettier: '',
+      'deprecated-rules': '',
+      _1: {
+        title: 'Schema & Operations Rules',
+        type: 'separator',
+      },
+      ...Object.fromEntries(schemaAndOperationsRules.map(key => [key, ''])),
+      _2: {
+        title: 'Schema Rules',
+        type: 'separator',
+      },
+      ...Object.fromEntries(schemaRules.map(key => [key, ''])),
+      _3: {
+        title: 'Operations Rules',
+        type: 'separator',
+      },
+      ...Object.fromEntries(operationsRules.map(key => [key, ''])),
+    },
+  },
+  play: {
+    title: 'Playground',
+    type: 'page',
+    theme: {
+      footer: false,
+    },
+  },
+};