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

.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",

scripts/generate-docs.ts

@@ -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');
 }
 

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

@@ -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/_meta.global.ts

@@ -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,
+    },
+  },
+};

website/app/layout.tsx

@@ -0,0 +1,57 @@
+import { ComponentPropsWithoutRef, FC, ReactNode } from 'react';
+import { Banner, PRODUCTS } from '@theguild/components';
+import { getDefaultMetadata, GuildLayout } from '@theguild/components/server';
+import '@theguild/components/style.css';
+
+const description = PRODUCTS.ESLINT.title;
+const websiteName = 'GraphQL-ESLint';
+
+export const metadata = getDefaultMetadata({
+  description,
+  websiteName,
+  productName: 'ESLINT',
+});
+
+const Anchor: FC<ComponentPropsWithoutRef<'a'>> = ({ children, ...props }) => {
+  return (
+    <a
+      target="_blank"
+      rel="noreferrer"
+      className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
+      {...props}
+    >
+      {children}
+    </a>
+  );
+};
+
+const RootLayout: FC<{
+  children: ReactNode;
+}> = async ({ children }) => {
+  return (
+    <GuildLayout
+      websiteName={websiteName}
+      description={description}
+      logo={<PRODUCTS.ESLINT.logo className="text-lg" />}
+      layoutProps={{
+        banner: (
+          <Banner dismissible={false}>
+            🚧 This is WIP documentation for v4 of the plugin. For v3 click{' '}
+            <Anchor href="https://074c6ee9.graphql-eslint.pages.dev/docs">here</Anchor>.
+          </Banner>
+        ),
+        docsRepositoryBase: 'https://github.com/dimaMachina/graphql-eslint/tree/master/website',
+      }}
+      navbarProps={{
+        navLinks: [
+          { children: 'Rules', href: '/rules' },
+          { children: 'Playground', href: '/play' },
+        ],
+      }}
+    >
+      {children}
+    </GuildLayout>
+  );
+};
+
+export default RootLayout;

website/src/components/graphql-editor.tsx → website/app/play/graphql-editor.tsx

@@ -84,7 +84,7 @@ export function GraphQLEditor({
   }, [lintMessages, editorMounted]);
 
   return (
-    <div className="grow overflow-hidden border-l dark:border-neutral-800 md:w-0">
+    <div className="grow overflow-hidden border-l md:w-0 dark:border-neutral-800">
       <div className="truncate border-b bg-gray-100 px-4 py-2 text-xs text-gray-700 dark:border-neutral-800 dark:bg-neutral-900 dark:text-gray-200">
         {fileName}
       </div>