diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 2572e2becd9..59f81c46ba9 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -119,5 +119,11 @@ module.exports = {
         'no-undef': 'off',
       },
     },
+    {
+      files: ['website/**/*.mdx/**'],
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
   ],
 };
diff --git a/examples/svelte-code-file/eslint.config.js b/examples/svelte-code-file/eslint.config.js
index 53f51e6574f..948fd269593 100644
--- a/examples/svelte-code-file/eslint.config.js
+++ b/examples/svelte-code-file/eslint.config.js
@@ -1,18 +1,28 @@
-import svelteParser from 'svelte-eslint-parser';
+import { mergeProcessors } from 'eslint-merge-processors';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
+import processorVueBlocks from 'eslint-processor-vue-blocks';
 import js from '@eslint/js';
 import graphqlPlugin from '@graphql-eslint/eslint-plugin';
 
 export default [
   {
-    files: ['**/*.js', '**/*.svelte'],
+    files: ['**/*.js'],
     processor: graphqlPlugin.processor,
     rules: js.configs.recommended.rules,
   },
+  ...eslintPluginSvelte.configs['flat/recommended'],
   {
     files: ['**/*.svelte'],
-    languageOptions: {
-      parser: svelteParser,
-    },
+    // `eslint-plugin-svelte` will set a default processor for `.svelte` files
+    // we use `eslint-merge-processors` to extend it
+    processor: mergeProcessors([
+      eslintPluginSvelte.processors.svelte,
+      processorVueBlocks({
+        blocks: {
+          script: true,
+        },
+      }),
+    ]),
   },
   {
     files: ['**/*.graphql'],
diff --git a/examples/svelte-code-file/package.json b/examples/svelte-code-file/package.json
index a5abc781018..a8cd773a71e 100644
--- a/examples/svelte-code-file/package.json
+++ b/examples/svelte-code-file/package.json
@@ -13,8 +13,8 @@
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "workspace:*",
     "eslint": "9.14.0",
-    "svelte": "5.2.4",
-    "svelte-eslint-parser": "0.43.0",
-    "svelte2tsx": "0.7.26"
+    "eslint-merge-processors": "^0.1.0",
+    "eslint-plugin-svelte": "^2.46.0",
+    "eslint-processor-vue-blocks": "^0.1.2"
   }
 }
diff --git a/examples/svelte-code-file/test.svelte b/examples/svelte-code-file/test.svelte
index 3418360b22d..58278e9e9bf 100644
--- a/examples/svelte-code-file/test.svelte
+++ b/examples/svelte-code-file/test.svelte
@@ -1,6 +1,4 @@
 <script>
-/* eslint-disable no-unused-vars */
-
 const GET_USER = /* GraphQL */ `
   query {
     user {
diff --git a/examples/vue-code-file/eslint.config.js b/examples/vue-code-file/eslint.config.js
index d4c93c8b4bc..522f5987fa7 100644
--- a/examples/vue-code-file/eslint.config.js
+++ b/examples/vue-code-file/eslint.config.js
@@ -1,18 +1,31 @@
-import vueParser from 'vue-eslint-parser';
+import { mergeProcessors } from 'eslint-merge-processors';
+import pluginVue from 'eslint-plugin-vue';
+import processorVueBlocks from 'eslint-processor-vue-blocks';
 import js from '@eslint/js';
 import graphqlPlugin from '@graphql-eslint/eslint-plugin';
 
 export default [
   {
-    files: ['**/*.js', '**/*.vue'],
+    files: ['**/*.js'],
     processor: graphqlPlugin.processor,
     rules: js.configs.recommended.rules,
   },
+  ...pluginVue.configs['flat/recommended'],
   {
     files: ['**/*.vue'],
-    languageOptions: {
-      parser: vueParser,
-    },
+    // `eslint-plugin-vue` will set a default processor for `.vue` files
+    // we use `eslint-merge-processors` to extend it
+    processor: mergeProcessors([
+      pluginVue.processors.vue,
+      processorVueBlocks({
+        blocks: {
+          styles: false,
+          customBlocks: true,
+          script: true,
+          template: false,
+        },
+      }),
+    ]),
   },
   {
     files: ['**/*.graphql'],
diff --git a/examples/vue-code-file/package.json b/examples/vue-code-file/package.json
index 6a1efbe91ff..4bb097d8f8e 100644
--- a/examples/vue-code-file/package.json
+++ b/examples/vue-code-file/package.json
@@ -12,8 +12,9 @@
   },
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "workspace:*",
-    "@vue/compiler-sfc": "3.5.13",
     "eslint": "9.14.0",
-    "vue-eslint-parser": "9.4.3"
+    "eslint-merge-processors": "^0.1.0",
+    "eslint-plugin-vue": "^9.31.0",
+    "eslint-processor-vue-blocks": "^0.1.2"
   }
 }
diff --git a/examples/vue-code-file/test.vue b/examples/vue-code-file/test.vue
index d666f4e5cc7..ccf4251bb16 100644
--- a/examples/vue-code-file/test.vue
+++ b/examples/vue-code-file/test.vue
@@ -2,8 +2,6 @@
   <span>test</span>
 </template>
 <script>
-/* eslint-disable no-unused-vars */
-
 const GET_USER = /* GraphQL */ `
   query {
     user {
diff --git a/package.json b/package.json
index ac8b34fc0df..e818ae2f1a4 100644
--- a/package.json
+++ b/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.0",
     "typescript": "5.6.3",
diff --git a/packages/plugin/__tests__/__snapshots__/examples.spec.md b/packages/plugin/__tests__/__snapshots__/examples.spec.md
index a5604b4232b..869b3cc781d 100644
--- a/packages/plugin/__tests__/__snapshots__/examples.spec.md
+++ b/packages/plugin/__tests__/__snapshots__/examples.spec.md
@@ -572,21 +572,71 @@ exports[`Examples > should work in svelte 1`] = `
     filePath: examples/svelte-code-file/test.svelte,
     messages: [
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 16,
+        endLine: 2,
+        line: 2,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 4,
+        endColumn: 9,
+        endLine: 3,
+        line: 3,
         message: Anonymous GraphQL operations are forbidden. Make sure to name your query!,
         messageId: no-anonymous-operations,
         nodeType: null,
         ruleId: @graphql-eslint/no-anonymous-operations,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`user\`,
+            fix: {
+              range: [
+                40,
+                40,
+              ],
+              text:  user,
+            },
+          },
+        ],
       },
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 24,
+        endLine: 10,
+        line: 10,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 10,
+        endColumn: 19,
+        endLine: 11,
+        line: 11,
         message: Operation "UserQuery" should not have "Query" suffix,
         nodeType: Name,
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`User\`,
+            fix: {
+              range: [
+                128,
+                137,
+              ],
+              text: User,
+            },
+          },
+        ],
       },
     ],
   },
@@ -615,6 +665,28 @@ exports[`Examples > should work in svelte 2`] = `
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
       },
+      {
+        column: 7,
+        endColumn: 15,
+        endLine: 2,
+        line: 2,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 7,
+        endColumn: 23,
+        endLine: 10,
+        line: 10,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
     ],
   },
 ]
@@ -626,21 +698,71 @@ exports[`Examples > should work in vue 1`] = `
     filePath: examples/vue-code-file/test.vue,
     messages: [
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 16,
+        endLine: 5,
+        line: 5,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 4,
+        endColumn: 9,
+        endLine: 6,
+        line: 6,
         message: Anonymous GraphQL operations are forbidden. Make sure to name your query!,
         messageId: no-anonymous-operations,
         nodeType: null,
         ruleId: @graphql-eslint/no-anonymous-operations,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`user\`,
+            fix: {
+              range: [
+                40,
+                40,
+              ],
+              text:  user,
+            },
+          },
+        ],
       },
       {
-        column: 0,
-        line: 1,
+        column: 8,
+        endColumn: 24,
+        endLine: 13,
+        line: 13,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 10,
+        endColumn: 19,
+        endLine: 14,
+        line: 14,
         message: Operation "UserQuery" should not have "Query" suffix,
         nodeType: Name,
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
+        suggestions: [
+          {
+            desc: Rename to \`User\`,
+            fix: {
+              range: [
+                128,
+                137,
+              ],
+              text: User,
+            },
+          },
+        ],
       },
     ],
   },
@@ -669,6 +791,28 @@ exports[`Examples > should work in vue 2`] = `
         ruleId: @graphql-eslint/naming-convention,
         severity: 2,
       },
+      {
+        column: 7,
+        endColumn: 15,
+        endLine: 5,
+        line: 5,
+        message: 'GET_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
+      {
+        column: 7,
+        endColumn: 23,
+        endLine: 13,
+        line: 13,
+        message: 'GET_ANOTHER_USER' is assigned a value but never used.,
+        messageId: unusedVar,
+        nodeType: Identifier,
+        ruleId: no-unused-vars,
+        severity: 2,
+      },
     ],
   },
 ]
diff --git a/packages/plugin/__tests__/examples.spec.ts b/packages/plugin/__tests__/examples.spec.ts
index acc4973d7d0..1fe8de14bd5 100644
--- a/packages/plugin/__tests__/examples.spec.ts
+++ b/packages/plugin/__tests__/examples.spec.ts
@@ -109,12 +109,12 @@ describe('Examples', () => {
 
   it('should work in svelte', () => {
     const cwd = path.join(CWD, 'examples', 'svelte-code-file');
-    testESLintOutput(cwd, 2);
+    testESLintOutput(cwd, 4);
   });
 
   it('should work in vue', () => {
     const cwd = path.join(CWD, 'examples', 'vue-code-file');
-    testESLintOutput(cwd, 2);
+    testESLintOutput(cwd, 4);
   });
 
   it('should work in multiple projects', () => {
diff --git a/packages/plugin/src/graphql-config.ts b/packages/plugin/src/graphql-config.ts
index 1129e442252..e95ce7b00b6 100644
--- a/packages/plugin/src/graphql-config.ts
+++ b/packages/plugin/src/graphql-config.ts
@@ -1,3 +1,4 @@
+import fs from 'node:fs';
 import path from 'node:path';
 import debugFactory from 'debug';
 import { GraphQLConfig, GraphQLExtensionDeclaration, loadConfigSync } from 'graphql-config';
@@ -7,10 +8,21 @@ import { ParserOptions } from './types.js';
 const debug = debugFactory('graphql-eslint:graphql-config');
 let graphQLConfig: GraphQLConfig;
 
+/**
+ * Filepath can be a virtual file, so we need to find the first existing path
+ *
+ */
+export function getFirstExistingPath(filePath: string): string {
+  while (!fs.existsSync(filePath)) {
+    filePath = path.dirname(filePath);
+  }
+  return filePath;
+}
+
 export function loadOnDiskGraphQLConfig(filePath: string): GraphQLConfig {
   return loadConfigSync({
     // load config relative to the file being linted
-    rootDir: path.dirname(filePath),
+    rootDir: getFirstExistingPath(path.dirname(filePath)),
     throwOnMissing: false,
     extensions: [codeFileLoaderExtension],
   });
diff --git a/packages/plugin/src/parser.ts b/packages/plugin/src/parser.ts
index a08fe51e32b..63101189ab7 100644
--- a/packages/plugin/src/parser.ts
+++ b/packages/plugin/src/parser.ts
@@ -4,12 +4,12 @@ import { GraphQLProjectConfig, IGraphQLProject } from 'graphql-config';
 import { parseGraphQLSDL, Source } from '@graphql-tools/utils';
 import { getDocuments } from './documents.js';
 import { convertToESTree, extractComments, extractTokens } from './estree-converter/index.js';
-import { loadGraphQLConfig } from './graphql-config.js';
+import { getFirstExistingPath, loadGraphQLConfig } from './graphql-config.js';
 import { version } from './meta.js';
 import { getSchema } from './schema.js';
 import { getSiblings } from './siblings.js';
 import { GraphQLESLintParseResult, ParserOptions, Schema } from './types.js';
-import { CWD, VIRTUAL_DOCUMENT_REGEX } from './utils.js';
+import { CWD } from './utils.js';
 
 const debug = debugFactory('graphql-eslint:parser');
 
@@ -44,11 +44,9 @@ export function parseForESLint(code: string, options: ParserOptions): GraphQLESL
     const { document } = parseGraphQLSDL(filePath, code, { noLocation: false });
     let project: GraphQLProjectConfig;
     let schema: Schema, documents: Source[];
-
     if (typeof window === 'undefined') {
       const gqlConfig = loadGraphQLConfig(options);
-      const realFilepath = filePath.replace(VIRTUAL_DOCUMENT_REGEX, '');
-      project = gqlConfig.getProjectForFile(realFilepath);
+      project = gqlConfig.getProjectForFile(getFirstExistingPath(filePath));
       documents = getDocuments(project);
     } else {
       documents = [
diff --git a/packages/plugin/src/processor.ts b/packages/plugin/src/processor.ts
index 21ff05faa4e..fc64a0e0d6a 100644
--- a/packages/plugin/src/processor.ts
+++ b/packages/plugin/src/processor.ts
@@ -1,4 +1,4 @@
-import { relative } from 'node:path';
+import path from 'node:path';
 import { Linter } from 'eslint';
 import { GraphQLConfig } from 'graphql-config';
 import {
@@ -29,6 +29,12 @@ export const processor = {
   },
   supportsAutofix: true,
   preprocess(code, filePath) {
+    const ext = path.parse(filePath).ext.slice(1);
+    if (process.env.ESLINT_USE_FLAT_CONFIG !== 'false' && (ext === 'vue' || ext === 'svelte')) {
+      throw new Error(
+        `Processing of \`.${ext}\` files is no longer supported, follow the new official ${ext} example for ESLint's flat config https://github.com/dimaMachina/graphql-eslint/tree/master/examples/${ext}-code-file`,
+      );
+    }
     if (!onDiskConfigLoaded) {
       onDiskConfig = loadOnDiskGraphQLConfig(filePath);
       onDiskConfigLoaded = true;
@@ -78,7 +84,7 @@ export const processor = {
       return [...blocks, code /* source code must be provided and be last */];
     } catch (error) {
       if (error instanceof Error) {
-        error.message = `[graphql-eslint] Error while preprocessing "${relative(
+        error.message = `[graphql-eslint] Error while preprocessing "${path.relative(
           CWD,
           filePath,
         )}" file\n\n${error.message}`;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5783d800fc6..5a23eb16a13 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -77,7 +77,7 @@ importers:
         specifier: 6.0.1
         version: 6.0.1
       tsup:
-        specifier: ^8.0.0
+        specifier: ^8.3.5
         version: 8.3.5(jiti@2.4.0)(postcss@8.4.49)(tsx@4.19.2)(typescript@5.6.3)(yaml@2.6.1)
       tsx:
         specifier: 4.19.2
@@ -206,15 +206,15 @@ importers:
       eslint:
         specifier: 9.14.0
         version: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
-      svelte:
-        specifier: 5.2.4
-        version: 5.2.4
-      svelte-eslint-parser:
-        specifier: 0.43.0
-        version: 0.43.0(svelte@5.2.4)
-      svelte2tsx:
-        specifier: 0.7.26
-        version: 0.7.26(svelte@5.2.4)(typescript@5.6.3)
+      eslint-merge-processors:
+        specifier: ^0.1.0
+        version: 0.1.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint-plugin-svelte:
+        specifier: ^2.46.0
+        version: 2.46.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(svelte@5.2.4)
+      eslint-processor-vue-blocks:
+        specifier: ^0.1.2
+        version: 0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
 
   examples/vue-code-file:
     dependencies:
@@ -225,15 +225,18 @@ importers:
       '@graphql-eslint/eslint-plugin':
         specifier: workspace:*
         version: link:../../packages/plugin/dist
-      '@vue/compiler-sfc':
-        specifier: 3.5.13
-        version: 3.5.13
       eslint:
         specifier: 9.14.0
         version: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
-      vue-eslint-parser:
-        specifier: 9.4.3
-        version: 9.4.3(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint-merge-processors:
+        specifier: ^0.1.0
+        version: 0.1.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint-plugin-vue:
+        specifier: ^9.31.0
+        version: 9.31.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint-processor-vue-blocks:
+        specifier: ^0.1.2
+        version: 0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
 
   packages/plugin:
     dependencies:
@@ -328,8 +331,8 @@ importers:
         specifier: ^2.0.0
         version: 2.1.2(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@theguild/components':
-        specifier: 7.2.7
-        version: 7.2.7(@theguild/tailwind-config@0.6.0(postcss-import@16.1.0(postcss@8.4.49))(postcss-lightningcss@1.0.1(postcss@8.4.49))(tailwindcss@3.4.14))(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)(webpack@5.96.1(esbuild@0.24.0))
+        specifier: 8.0.0-alpha-20241120035725-2b8cadd078ebc2ace612021973b3e50944386052
+        version: 8.0.0-alpha-20241120035725-2b8cadd078ebc2ace612021973b3e50944386052(@theguild/tailwind-config@0.6.0(postcss-import@16.1.0(postcss@8.4.49))(postcss-lightningcss@1.0.1(postcss@8.4.49))(tailwindcss@3.4.14))(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
       clsx:
         specifier: ^2.0.0
         version: 2.1.1
@@ -379,6 +382,9 @@ importers:
       '@types/react':
         specifier: 18.3.12
         version: 18.3.12
+      pagefind:
+        specifier: 1.1.1
+        version: 1.1.1
       tailwindcss-radix:
         specifier: 3.0.5
         version: 3.0.5(tailwindcss@3.4.14)
@@ -1976,12 +1982,6 @@ packages:
   '@mdx-js/mdx@3.1.0':
     resolution: {integrity: sha512-/QxEhPAvGwbQmy1Px8F899L5Uc2KZ6JtXwlCgJmjSTBedwOZkByYcBG4GceIGPXRDsmfxhHazuS+hlOShRLeDw==}
 
-  '@mdx-js/react@3.1.0':
-    resolution: {integrity: sha512-QjHtSaoameoalGnKDT3FoIl4+9RwyTmo9ZJGBdLOks/YOiWHoRDI3PUwEzOE7kEmGcV3AFcp9K6dYu9rEuKLAQ==}
-    peerDependencies:
-      '@types/react': '>=16'
-      react: '>=16'
-
   '@mermaid-js/parser@0.3.0':
     resolution: {integrity: sha512-HsvL6zgE5sUPGgkIDlmAWR1HTNHz2Iy11BAWPTa4Jjabkpguy4Ze2gzfLrg6pdRuBvFwgUYyxiaNqZwrEEXepA==}
 
@@ -2185,6 +2185,31 @@ packages:
     resolution: {integrity: sha512-xhfYPXoV5Dy4UkY0D+v2KkwvnDfiA/8Mt3sWCGI/hM03NsYIH8ZaG6QzS9x7pje5vHZBZJ2v6VRFVTWACnqcmQ==}
     engines: {node: ^16.14.0 || >=18.0.0}
 
+  '@pagefind/darwin-arm64@1.1.1':
+    resolution: {integrity: sha512-tZ9tysUmQpFs2EqWG2+E1gc+opDAhSyZSsgKmFzhnWfkK02YHZhvL5XJXEZDqYy3s1FAKhwjTg8XDxneuBlDZQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@pagefind/darwin-x64@1.1.1':
+    resolution: {integrity: sha512-ChohLQ39dLwaxQv0jIQB/SavP3TM5K5ENfDTqIdzLkmfs3+JlzSDyQKcJFjTHYcCzQOZVeieeGq8PdqvLJxJxQ==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@pagefind/linux-arm64@1.1.1':
+    resolution: {integrity: sha512-H5P6wDoCoAbdsWp0Zx0DxnLUrwTGWGLu/VI1rcN2CyFdY2EGSvPQsbGBMrseKRNuIrJDFtxHHHyjZ7UbzaM9EA==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@pagefind/linux-x64@1.1.1':
+    resolution: {integrity: sha512-yJs7tTYbL2MI3HT+ngs9E1BfUbY9M4/YzA0yEM5xBo4Xl8Yu8Qg2xZTOQ1/F6gwvMrjCUFo8EoACs6LRDhtMrQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@pagefind/windows-x64@1.1.1':
+    resolution: {integrity: sha512-b7/qPqgIl+lMzkQ8fJt51SfguB396xbIIR+VZ3YrL2tLuyifDJ1wL5mEm+ddmHxJ2Fki340paPcDan9en5OmAw==}
+    cpu: [x64]
+    os: [win32]
+
   '@pkgjs/parseargs@0.11.0':
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
@@ -2729,10 +2754,10 @@ packages:
   '@tanstack/virtual-core@3.10.9':
     resolution: {integrity: sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==}
 
-  '@theguild/components@7.2.7':
-    resolution: {integrity: sha512-qav8jhK2e0aaMVQvwDKPTRO9liFGpzIeCAhOZ2xOymCLhdXKMYN0gCF/BmZhgOTEFVfx/4xxIo6qZcGbyUQDXQ==}
+  '@theguild/components@8.0.0-alpha-20241120035725-2b8cadd078ebc2ace612021973b3e50944386052':
+    resolution: {integrity: sha512-fUwrdg0FVkngOiOtH1Uls8cMgZ9VGLOYRcIFWTJ92TvVSn8XRGPICaWxslQ/9sWiVrH4/zghLzz9jDiTDbL9dg==}
     peerDependencies:
-      '@theguild/tailwind-config': 0.6.0
+      '@theguild/tailwind-config': ^0.6.0
       next: ^13 || ^14 || ^15.0.0
       react: ^18.2.0
       react-dom: ^18.2.0
@@ -2896,9 +2921,6 @@ packages:
   '@types/graphql-depth-limit@1.1.6':
     resolution: {integrity: sha512-WU4bjoKOzJ8CQE32Pbyq+YshTMcLJf2aJuvVtSLv1BQPwDUGa38m2Vr8GGxf0GZ0luCQcfxlhZeHKu6nmTBvrw==}
 
-  '@types/hast@2.3.10':
-    resolution: {integrity: sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==}
-
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -3370,9 +3392,6 @@ packages:
     peerDependencies:
       react: '>=16.8'
 
-  big.js@5.2.2:
-    resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
-
   binary-extensions@2.3.0:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
@@ -3866,9 +3885,6 @@ packages:
   decode-named-character-reference@1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
 
-  dedent-js@1.0.1:
-    resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
-
   dedent@1.5.3:
     resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==}
     peerDependencies:
@@ -3992,10 +4008,6 @@ packages:
   emojilib@2.4.0:
     resolution: {integrity: sha512-5U0rVMU5Y2n2+ykNLQqMoqklN9ICBT/KsvC1Gz6vqHbz2AXXGkG+Pm5rMWk/8Vjrr/mY9985Hi8DYzn1F09Nyw==}
 
-  emojis-list@3.0.0:
-    resolution: {integrity: sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==}
-    engines: {node: '>= 4'}
-
   enhanced-resolve@5.17.1:
     resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
@@ -4143,6 +4155,11 @@ packages:
     peerDependencies:
       eslint: '>=8.0.0'
 
+  eslint-merge-processors@0.1.0:
+    resolution: {integrity: sha512-IvRXXtEajLeyssvW4wJcZ2etxkR9mUf4zpNwgI+m/Uac9RfXHskuJefkHUcawVzePnd6xp24enp5jfgdHzjRdQ==}
+    peerDependencies:
+      eslint: '*'
+
   eslint-module-utils@2.12.0:
     resolution: {integrity: sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==}
     engines: {node: '>=4'}
@@ -4281,6 +4298,16 @@ packages:
     peerDependencies:
       eslint: ^8.0.0 || ^9.0.0
 
+  eslint-plugin-svelte@2.46.0:
+    resolution: {integrity: sha512-1A7iEMkzmCZ9/Iz+EAfOGYL8IoIG6zeKEq1SmpxGeM5SXmoQq+ZNnCpXFVJpsxPWYx8jIVGMerQMzX20cqUl0g==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      svelte:
+        optional: true
+
   eslint-plugin-tailwindcss@3.17.5:
     resolution: {integrity: sha512-8Mi7p7dm+mO1dHgRHHFdPu4RDTBk69Cn4P0B40vRQR+MrguUpwmKwhZy1kqYe3Km8/4nb+cyrCF+5SodOEmaow==}
     engines: {node: '>=18.12.0'}
@@ -4293,12 +4320,24 @@ packages:
     peerDependencies:
       eslint: '>=8.56.0'
 
+  eslint-plugin-vue@9.31.0:
+    resolution: {integrity: sha512-aYMUCgivhz1o4tLkRHj5oq9YgYPM4/EJc0M7TAKRLCUA5OYxRLAhYEVD2nLtTwLyixEFI+/QXSvKU9ESZFgqjQ==}
+    engines: {node: ^14.17.0 || >=16.0.0}
+    peerDependencies:
+      eslint: ^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+
   eslint-plugin-yml@1.15.0:
     resolution: {integrity: sha512-leC8APYVOsKyWUlvRwVhewytK5wS70BfMqIaUplFstRfzCoVp0YoEroV4cUEvQrBj93tQ3M9LcjO/ewr6D4kjA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: '>=6.0.0'
 
+  eslint-processor-vue-blocks@0.1.2:
+    resolution: {integrity: sha512-PfpJ4uKHnqeL/fXUnzYkOax3aIenlwewXRX8jFinA1a2yCFnLgMuiH3xvCgvHHUlV2xJWQHbCTdiJWGwb3NqpQ==}
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.3.0
+      eslint: ^8.50.0 || ^9.0.0
+
   eslint-scope@5.1.1:
     resolution: {integrity: sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==}
     engines: {node: '>=8.0.0'}
@@ -4436,10 +4475,6 @@ packages:
     resolution: {integrity: sha512-bFi65yM+xZgk+u/KRIpekdSYkTB5W1pEf0Lt8Q8Msh7b+eQ7LXVtIB1Bkm4fvclDEL1b2CZkMhv2mOeF8tMdkA==}
     engines: {node: '>=12.0.0'}
 
-  extend-shallow@2.0.1:
-    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
-    engines: {node: '>=0.10.0'}
-
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
@@ -4497,12 +4532,6 @@ packages:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
 
-  file-loader@4.3.0:
-    resolution: {integrity: sha512-aKrYPYjF1yG3oX0kWRrqrSMfgftm7oJW5M+m4owoldH5C51C0RkIwB++JbRvEW3IU6/ZG5n8UvEcdgwOt2UOWA==}
-    engines: {node: '>= 8.9.0'}
-    peerDependencies:
-      webpack: ^4.0.0
-
   fill-range@7.1.1:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
@@ -4522,9 +4551,6 @@ packages:
   flatted@3.3.1:
     resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==}
 
-  flexsearch@0.7.43:
-    resolution: {integrity: sha512-c5o/+Um8aqCSOXGcZoqZOm+NqtVwNsvVpWv6lfmSclU954O3wvQKxxK8zj74fPaSJbXpSLTs4PRhh+wnoCXnKg==}
-
   for-each@0.3.3:
     resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
 
@@ -4623,6 +4649,10 @@ packages:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
 
+  globals@13.24.0:
+    resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==}
+    engines: {node: '>=8'}
+
   globals@14.0.0:
     resolution: {integrity: sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==}
     engines: {node: '>=18'}
@@ -4681,10 +4711,6 @@ packages:
     resolution: {integrity: sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==}
     engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0}
 
-  gray-matter@4.0.3:
-    resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
-    engines: {node: '>=6.0'}
-
   gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}
@@ -4890,10 +4916,6 @@ packages:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
     engines: {node: '>= 0.4'}
 
-  is-buffer@2.0.5:
-    resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
-    engines: {node: '>=4'}
-
   is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
     engines: {node: '>=6'}
@@ -4931,10 +4953,6 @@ packages:
   is-empty@1.2.0:
     resolution: {integrity: sha512-F2FnH/otLNJv0J6wc73A5Xo7oHLNnqplYqZhUu01tD54DIPvxIRSTSLkrUB/M0nHO4vo1O9PDfN4KoTxCzLh/w==}
 
-  is-extendable@0.1.1:
-    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
-    engines: {node: '>=0.10.0'}
-
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -5177,14 +5195,13 @@ packages:
   khroma@2.1.0:
     resolution: {integrity: sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw==}
 
-  kind-of@6.0.3:
-    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
-    engines: {node: '>=0.10.0'}
-
   kleur@4.1.5:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
+  known-css-properties@0.35.0:
+    resolution: {integrity: sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==}
+
   kolorist@1.8.0:
     resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
 
@@ -5311,10 +5328,6 @@ packages:
     resolution: {integrity: sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==}
     engines: {node: '>=6.11.5'}
 
-  loader-utils@1.4.2:
-    resolution: {integrity: sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==}
-    engines: {node: '>=4.0.0'}
-
   local-pkg@0.5.0:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
@@ -5713,9 +5726,6 @@ packages:
       react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
       react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
 
-  next-videos@1.5.0:
-    resolution: {integrity: sha512-U6HY68UDxsDMMRgjABYq1S2EIStqZNp8FFtL8LKXJrhGFIO1nM2a3Afy0jw3JI2nK1HSXq4s4anQ96Yn4ukceA==}
-
   next@15.0.3:
     resolution: {integrity: sha512-ontCbCRKJUIoivAdGB34yCaOcPgYXr9AAkV/IwqFfWWTXEPUgLYkSkqBhIk9KK7gGmgjc64B+RdoeIDM13Irnw==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -5737,19 +5747,19 @@ packages:
       sass:
         optional: true
 
-  nextra-theme-docs@3.2.4:
-    resolution: {integrity: sha512-3fg7zMHInuvSDURRJjh6UrbdqkK8uLs8RNriY38kVukWLvaVP2f6mmVJKIYqxVv6qAKWEzDLTr4dlJCY81eXuQ==}
+  nextra-theme-docs@4.0.0-app-router.28:
+    resolution: {integrity: sha512-HhA3wrKr0Jemt4aH4ImofR00qUxMlTV6c6Hl8zaprN2MCUF/Sssg1BQoS0Nv2nAl+vBHg8DagOB5xmc6HTOckQ==}
     peerDependencies:
-      next: '>=13'
-      nextra: 3.2.4
+      next: '>=14'
+      nextra: 4.0.0-app-router.28
       react: '>=18'
       react-dom: '>=18'
 
-  nextra@3.2.4:
-    resolution: {integrity: sha512-xvQuPVtRoJTz4ynIbEkxYkEtviIX699lt4coij2IMmafYrBNaD0Ofj93jIz7VngYxyT9f4gWSiwqNgoIlnbsjQ==}
+  nextra@4.0.0-app-router.28:
+    resolution: {integrity: sha512-Kn+/23Ofb2RPGmyIQw8pZecGDIpNTIrq9tohI++e32zPrCKInLHc+CinmMbHG2e2umifDBPMpAVAj3rTfdtfvg==}
     engines: {node: '>=18'}
     peerDependencies:
-      next: '>=13'
+      next: '>=14'
       react: '>=18'
       react-dom: '>=18'
 
@@ -5896,10 +5906,6 @@ packages:
     resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==}
     engines: {node: '>=10'}
 
-  p-limit@6.1.0:
-    resolution: {integrity: sha512-H0jc0q1vOzlEk0TqAKXKZxdl7kX3OFUzCnNVUnq5Pc3DGo0kpeaMuPqxQn235HibwBEb0/pm9dgKTjXy66fBkg==}
-    engines: {node: '>=18'}
-
   p-locate@4.1.0:
     resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
     engines: {node: '>=8'}
@@ -5922,6 +5928,10 @@ packages:
   package-manager-detector@0.2.2:
     resolution: {integrity: sha512-VgXbyrSNsml4eHWIvxxG/nTL4wgybMTXCV2Un/+yEc3aDKKU6nQBZjbeP3Pl3qm9Qg92X/1ng4ffvCeD/zwHgg==}
 
+  pagefind@1.1.1:
+    resolution: {integrity: sha512-U2YR0dQN5B2fbIXrLtt/UXNS0yWSSYfePaad1KcBPTi0p+zRtsVjwmoPaMQgTks5DnHNbmDxyJUL5TGaLljK3A==}
+    hasBin: true
+
   parent-module@1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
@@ -5958,9 +5968,6 @@ packages:
   parse5@7.2.1:
     resolution: {integrity: sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==}
 
-  pascal-case@3.1.2:
-    resolution: {integrity: sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==}
-
   path-data-parser@0.1.0:
     resolution: {integrity: sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==}
 
@@ -6062,6 +6069,18 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
 
+  postcss-load-config@3.1.4:
+    resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
+    engines: {node: '>= 10'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+
   postcss-load-config@4.0.2:
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
@@ -6098,6 +6117,12 @@ packages:
     peerDependencies:
       postcss: ^8.2.14
 
+  postcss-safe-parser@6.0.0:
+    resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.3.3
+
   postcss-scss@4.0.9:
     resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
     engines: {node: '>=12.0'}
@@ -6422,9 +6447,6 @@ packages:
   remark-math@6.0.0:
     resolution: {integrity: sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==}
 
-  remark-mdx-disable-explicit-jsx@0.1.0:
-    resolution: {integrity: sha512-NC7NUbu4bExZnsWDTJE3UhBRZujW3gyqMufhTHn2GHhZ5LetWzyieyuZerBPdSniLx4d7QKDbf+d3u/qmMGyaQ==}
-
   remark-mdx@3.1.0:
     resolution: {integrity: sha512-Ngl/H3YXyBV9RcRNdlYsZujAmhsxwzxpDzpDEhFBVAGthS4GDgnctpDjgFl/ULx5UEDzqtW1cyBSNKqYYrqLBA==}
 
@@ -6533,10 +6555,6 @@ packages:
   scheduler@0.23.2:
     resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
 
-  schema-utils@2.7.1:
-    resolution: {integrity: sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==}
-    engines: {node: '>= 8.9.0'}
-
   schema-utils@3.3.0:
     resolution: {integrity: sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==}
     engines: {node: '>= 10.13.0'}
@@ -6548,10 +6566,6 @@ packages:
     resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
     engines: {node: ^14.0.0 || >=16.0.0}
 
-  section-matter@1.0.0:
-    resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==}
-    engines: {node: '>=4'}
-
   semver@5.7.2:
     resolution: {integrity: sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==}
     hasBin: true
@@ -6754,10 +6768,6 @@ packages:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
 
-  strip-bom-string@1.0.0:
-    resolution: {integrity: sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==}
-    engines: {node: '>=0.10.0'}
-
   strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
@@ -6830,12 +6840,6 @@ packages:
       svelte:
         optional: true
 
-  svelte2tsx@0.7.26:
-    resolution: {integrity: sha512-cBGGZ3Hejuh9gYICQcGKg1zyYhrzZR04iTUdP5pD+CIbjoZiyzS4cpCi4IHh0PA2Vf6cFuwVRmDs9wnOfJotJA==}
-    peerDependencies:
-      svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0
-      typescript: ^4.9.4 || ^5.0.0
-
   svelte@5.2.4:
     resolution: {integrity: sha512-hsab3Inx/HKV6Y/FUwtX8yCkt+nl6n46zC7Z6y7VWoDFhJWEQ453vP0KmDL42cLm9Q92nZyOE+izANqjss61/A==}
     engines: {node: '>=18'}
@@ -7072,6 +7076,10 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
+  type-fest@0.20.2:
+    resolution: {integrity: sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==}
+    engines: {node: '>=10'}
+
   type-fest@0.6.0:
     resolution: {integrity: sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==}
     engines: {node: '>=8'}
@@ -7150,9 +7158,6 @@ packages:
   unified-engine@11.2.2:
     resolution: {integrity: sha512-15g/gWE7qQl9tQ3nAEbMd5h9HV1EACtFs6N9xaRBZICoCwnNGbal1kOs++ICf4aiTdItZxU2s/kYWhW7htlqJg==}
 
-  unified@10.1.2:
-    resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
-
   unified@11.0.5:
     resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
 
@@ -7186,9 +7191,6 @@ packages:
   unist-util-stringify-position@2.0.3:
     resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
 
-  unist-util-stringify-position@3.0.3:
-    resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
-
   unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
 
@@ -7198,18 +7200,12 @@ packages:
   unist-util-visit-parents@4.1.1:
     resolution: {integrity: sha512-1xAFJXAKpnnJl8G7K5KgU7FY55y3GcLIXqkzUj5QF/QVP7biUm0K0O2oqVkYsdjzJKifYeWn9+o6piAK2hGSHw==}
 
-  unist-util-visit-parents@5.1.3:
-    resolution: {integrity: sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==}
-
   unist-util-visit-parents@6.0.1:
     resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
 
   unist-util-visit@3.1.0:
     resolution: {integrity: sha512-Szoh+R/Ll68QWAyQyZZpQzZQm2UPbxibDvaY8Xc9SUtYgPsDzx5AWSk++UUt2hJuow8mvwR+rG+LQLw+KsuAKA==}
 
-  unist-util-visit@4.1.2:
-    resolution: {integrity: sha512-MSd8OUGISqHdVvfY9TPhyK2VdUrPgxkUtWSuMHF6XAAFuL4LokseigBnZtPnJMu+FbynTkFNnFlyjxpVKujMRg==}
-
   unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
 
@@ -7292,9 +7288,6 @@ packages:
   vfile-location@5.0.3:
     resolution: {integrity: sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==}
 
-  vfile-message@3.1.4:
-    resolution: {integrity: sha512-fa0Z6P8HUrQN4BZaX05SIVXic+7kE3b05PWAtPuYP9QLHsLKYR7/AlLW3NtOrpXRLeawpDLMsVkmk5DG0NXgWw==}
-
   vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
 
@@ -7307,9 +7300,6 @@ packages:
   vfile-statistics@3.0.0:
     resolution: {integrity: sha512-/qlwqwWBWFOmpXujL/20P+Iuydil0rZZNglR+VNm6J0gpLHwuVM5s7g2TfVoswbXjZ4HuIhLMySEyIw5i7/D8w==}
 
-  vfile@5.3.7:
-    resolution: {integrity: sha512-r7qlzkgErKjobAmyNIkkSpizsFPYiUPuJb5pNW1RB4JcYVZhs4lIbVqk8XPk033CV/1z8ss5pkax8SuhGpcG8g==}
-
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
 
@@ -7522,6 +7512,10 @@ packages:
       utf-8-validate:
         optional: true
 
+  xml-name-validator@4.0.0:
+    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
+    engines: {node: '>=12'}
+
   xmldom-sre@0.1.31:
     resolution: {integrity: sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==}
     engines: {node: '>=0.1'}
@@ -7540,6 +7534,10 @@ packages:
     resolution: {integrity: sha512-4wZWvE398hCP7O8n3nXKu/vdq1HcH01ixYlCREaJL5NUMwQ0g3MaGFUBNSlmBtKmhbtVG/Cm6lyYmSVTEVil8A==}
     engines: {node: ^14.17.0 || >=16.0.0}
 
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
   yaml@2.6.1:
     resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==}
     engines: {node: '>= 14'}
@@ -7557,10 +7555,6 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
-  yocto-queue@1.1.1:
-    resolution: {integrity: sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==}
-    engines: {node: '>=12.20'}
-
   zimmerframe@1.1.2:
     resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==}
 
@@ -7573,6 +7567,24 @@ packages:
   zod@3.23.8:
     resolution: {integrity: sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==}
 
+  zustand@5.0.1:
+    resolution: {integrity: sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -10025,12 +10037,6 @@ snapshots:
       - acorn
       - supports-color
 
-  '@mdx-js/react@3.1.0(@types/react@18.3.12)(react@18.3.1)':
-    dependencies:
-      '@types/mdx': 2.0.13
-      '@types/react': 18.3.12
-      react: 18.3.1
-
   '@mermaid-js/parser@0.3.0':
     dependencies:
       langium: 3.0.0
@@ -10211,6 +10217,21 @@ snapshots:
     dependencies:
       which: 4.0.0
 
+  '@pagefind/darwin-arm64@1.1.1':
+    optional: true
+
+  '@pagefind/darwin-x64@1.1.1':
+    optional: true
+
+  '@pagefind/linux-arm64@1.1.1':
+    optional: true
+
+  '@pagefind/linux-x64@1.1.1':
+    optional: true
+
+  '@pagefind/windows-x64@1.1.1':
+    optional: true
+
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
@@ -10708,7 +10729,7 @@ snapshots:
 
   '@tanstack/virtual-core@3.10.9': {}
 
-  '@theguild/components@7.2.7(@theguild/tailwind-config@0.6.0(postcss-import@16.1.0(postcss@8.4.49))(postcss-lightningcss@1.0.1(postcss@8.4.49))(tailwindcss@3.4.14))(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)(webpack@5.96.1(esbuild@0.24.0))':
+  '@theguild/components@8.0.0-alpha-20241120035725-2b8cadd078ebc2ace612021973b3e50944386052(@theguild/tailwind-config@0.6.0(postcss-import@16.1.0(postcss@8.4.49))(postcss-lightningcss@1.0.1(postcss@8.4.49))(tailwindcss@3.4.14))(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)':
     dependencies:
       '@giscus/react': 3.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@next/bundle-analyzer': 15.0.3
@@ -10717,14 +10738,12 @@ snapshots:
       clsx: 2.1.1
       fuzzy: 0.1.3
       next: 15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      next-videos: 1.5.0(webpack@5.96.1(esbuild@0.24.0))
-      nextra: 3.2.4(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
-      nextra-theme-docs: 3.2.4(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.2.4(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      nextra: 4.0.0-app-router.28(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
+      nextra-theme-docs: 4.0.0-app-router.28(@types/react@18.3.12)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@4.0.0-app-router.28(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       react-paginate: 8.2.0(react@18.3.1)
       react-player: 2.16.0(react@18.3.1)
-      remark-mdx-disable-explicit-jsx: 0.1.0
       semver: 7.6.3
       tailwind-merge: 2.5.4
     transitivePeerDependencies:
@@ -10732,10 +10751,11 @@ snapshots:
       - '@types/react-dom'
       - acorn
       - bufferutil
+      - immer
       - supports-color
       - typescript
+      - use-sync-external-store
       - utf-8-validate
-      - webpack
 
   '@theguild/eslint-config@0.13.1(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(typescript@5.6.3)':
     dependencies:
@@ -10956,10 +10976,6 @@ snapshots:
     dependencies:
       graphql: 14.7.0
 
-  '@types/hast@2.3.10':
-    dependencies:
-      '@types/unist': 2.0.11
-
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -11361,6 +11377,7 @@ snapshots:
   acorn-typescript@1.4.13(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
+    optional: true
 
   acorn-walk@8.3.4:
     dependencies:
@@ -11566,8 +11583,6 @@ snapshots:
       mathjax-full: 3.2.2
       react: 18.3.1
 
-  big.js@5.2.2: {}
-
   binary-extensions@2.3.0: {}
 
   boolbase@1.0.0: {}
@@ -12075,8 +12090,6 @@ snapshots:
     dependencies:
       character-entities: 2.0.2
 
-  dedent-js@1.0.1: {}
-
   dedent@1.5.3: {}
 
   deep-eql@5.0.2: {}
@@ -12194,8 +12207,6 @@ snapshots:
 
   emojilib@2.4.0: {}
 
-  emojis-list@3.0.0: {}
-
   enhanced-resolve@5.17.1:
     dependencies:
       graceful-fs: 4.2.11
@@ -12493,6 +12504,10 @@ snapshots:
       - bluebird
       - supports-color
 
+  eslint-merge-processors@0.1.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
+    dependencies:
+      eslint: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
+
   eslint-module-utils@2.12.0(@typescript-eslint/parser@8.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(typescript@5.6.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(typescript@5.6.3))(eslint-plugin-import@2.31.0(@typescript-eslint/parser@8.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(typescript@5.6.3))(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)))(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)))(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
     dependencies:
       debug: 3.2.7
@@ -12759,6 +12774,25 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
+  eslint-plugin-svelte@2.46.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))(svelte@5.2.4):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      '@jridgewell/sourcemap-codec': 1.5.0
+      eslint: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
+      eslint-compat-utils: 0.5.1(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      esutils: 2.0.3
+      known-css-properties: 0.35.0
+      postcss: 8.4.49
+      postcss-load-config: 3.1.4(postcss@8.4.49)
+      postcss-safe-parser: 6.0.0(postcss@8.4.49)
+      postcss-selector-parser: 6.1.2
+      semver: 7.6.3
+      svelte-eslint-parser: 0.43.0(svelte@5.2.4)
+    optionalDependencies:
+      svelte: 5.2.4
+    transitivePeerDependencies:
+      - ts-node
+
   eslint-plugin-tailwindcss@3.17.5(tailwindcss@3.4.14):
     dependencies:
       fast-glob: 3.3.2
@@ -12785,6 +12819,20 @@ snapshots:
       semver: 7.6.3
       strip-indent: 3.0.0
 
+  eslint-plugin-vue@9.31.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
+    dependencies:
+      '@eslint-community/eslint-utils': 4.4.1(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      eslint: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
+      globals: 13.24.0
+      natural-compare: 1.4.0
+      nth-check: 2.1.1
+      postcss-selector-parser: 6.1.2
+      semver: 7.6.3
+      vue-eslint-parser: 9.4.3(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0))
+      xml-name-validator: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
+
   eslint-plugin-yml@1.15.0(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
     dependencies:
       debug: 4.3.7
@@ -12796,6 +12844,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  eslint-processor-vue-blocks@0.1.2(@vue/compiler-sfc@3.5.13)(eslint@9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)):
+    dependencies:
+      '@vue/compiler-sfc': 3.5.13
+      eslint: 9.14.0(patch_hash=t64n7kxodazs6lnwu42sgf5voe)(jiti@2.4.0)
+
   eslint-scope@5.1.1:
     dependencies:
       esrecurse: 4.3.0
@@ -12905,7 +12958,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  esm-env@1.1.4: {}
+  esm-env@1.1.4:
+    optional: true
 
   esm@3.2.25: {}
 
@@ -12931,6 +12985,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
       '@types/estree': 1.0.6
+    optional: true
 
   esrecurse@4.3.0:
     dependencies:
@@ -13003,10 +13058,6 @@ snapshots:
 
   expect-type@1.1.0: {}
 
-  extend-shallow@2.0.1:
-    dependencies:
-      is-extendable: 0.1.1
-
   extend@3.0.2: {}
 
   extendable-error@0.1.7: {}
@@ -13059,12 +13110,6 @@ snapshots:
     dependencies:
       flat-cache: 4.0.1
 
-  file-loader@4.3.0(webpack@5.96.1(esbuild@0.24.0)):
-    dependencies:
-      loader-utils: 1.4.2
-      schema-utils: 2.7.1
-      webpack: 5.96.1(esbuild@0.24.0)
-
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -13086,8 +13131,6 @@ snapshots:
 
   flatted@3.3.1: {}
 
-  flexsearch@0.7.43: {}
-
   for-each@0.3.3:
     dependencies:
       is-callable: 1.2.7
@@ -13191,6 +13234,10 @@ snapshots:
 
   globals@11.12.0: {}
 
+  globals@13.24.0:
+    dependencies:
+      type-fest: 0.20.2
+
   globals@14.0.0: {}
 
   globals@15.12.0: {}
@@ -13255,13 +13302,6 @@ snapshots:
 
   graphql@16.9.0: {}
 
-  gray-matter@4.0.3:
-    dependencies:
-      js-yaml: 3.14.1
-      kind-of: 6.0.3
-      section-matter: 1.0.0
-      strip-bom-string: 1.0.0
-
   gzip-size@6.0.0:
     dependencies:
       duplexer: 0.1.2
@@ -13542,8 +13582,6 @@ snapshots:
       call-bind: 1.0.7
       has-tostringtag: 1.0.2
 
-  is-buffer@2.0.5: {}
-
   is-builtin-module@3.2.1:
     dependencies:
       builtin-modules: 3.3.0
@@ -13574,8 +13612,6 @@ snapshots:
 
   is-empty@1.2.0: {}
 
-  is-extendable@0.1.1: {}
-
   is-extglob@2.1.1: {}
 
   is-finalizationregistry@1.0.2:
@@ -13621,6 +13657,7 @@ snapshots:
   is-reference@3.0.3:
     dependencies:
       '@types/estree': 1.0.6
+    optional: true
 
   is-regex@1.1.4:
     dependencies:
@@ -13782,10 +13819,10 @@ snapshots:
 
   khroma@2.1.0: {}
 
-  kind-of@6.0.3: {}
-
   kleur@4.1.5: {}
 
+  known-css-properties@0.35.0: {}
+
   kolorist@1.8.0: {}
 
   langium@3.0.0:
@@ -13893,18 +13930,13 @@ snapshots:
 
   loader-runner@4.3.0: {}
 
-  loader-utils@1.4.2:
-    dependencies:
-      big.js: 5.2.2
-      emojis-list: 3.0.0
-      json5: 1.0.2
-
   local-pkg@0.5.0:
     dependencies:
       mlly: 1.7.2
       pkg-types: 1.2.1
 
-  locate-character@3.0.0: {}
+  locate-character@3.0.0:
+    optional: true
 
   locate-path@5.0.0:
     dependencies:
@@ -14599,12 +14631,6 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  next-videos@1.5.0(webpack@5.96.1(esbuild@0.24.0)):
-    dependencies:
-      file-loader: 4.3.0(webpack@5.96.1(esbuild@0.24.0))
-    transitivePeerDependencies:
-      - webpack
-
   next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@next/env': 15.0.3
@@ -14630,26 +14656,29 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nextra-theme-docs@3.2.4(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.2.4(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  nextra-theme-docs@4.0.0-app-router.28(@types/react@18.3.12)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@4.0.0-app-router.28(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@headlessui/react': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       clsx: 2.1.1
-      escape-string-regexp: 5.0.0
-      flexsearch: 0.7.43
       next: 15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       next-themes: 0.4.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      nextra: 3.2.4(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
+      nextra: 4.0.0-app-router.28(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       scroll-into-view-if-needed: 3.1.0
       zod: 3.23.8
+      zod-validation-error: 3.4.0(zod@3.23.8)
+      zustand: 5.0.1(@types/react@18.3.12)(react@18.3.1)
+    transitivePeerDependencies:
+      - '@types/react'
+      - immer
+      - use-sync-external-store
 
-  nextra@3.2.4(@types/react@18.3.12)(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3):
+  nextra@4.0.0-app-router.28(acorn@8.14.0)(next@15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3):
     dependencies:
       '@formatjs/intl-localematcher': 0.5.7
       '@headlessui/react': 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@mdx-js/mdx': 3.1.0(acorn@8.14.0)
-      '@mdx-js/react': 3.1.0(@types/react@18.3.12)(react@18.3.1)
       '@napi-rs/simple-git': 0.1.19
       '@shikijs/twoslash': 1.22.2(typescript@5.6.3)
       '@theguild/remark-mermaid': 0.1.3(react@18.3.1)
@@ -14658,9 +14687,8 @@ snapshots:
       clsx: 2.1.1
       estree-util-to-js: 2.0.0
       estree-util-value-to-estree: 3.2.1
+      fast-glob: 3.3.2
       github-slugger: 2.0.0
-      graceful-fs: 4.2.11
-      gray-matter: 4.0.3
       hast-util-to-estree: 3.1.0
       katex: 0.16.11
       mdast-util-from-markdown: 2.0.2
@@ -14668,7 +14696,6 @@ snapshots:
       mdast-util-to-hast: 13.2.0
       negotiator: 1.0.0
       next: 15.0.3(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      p-limit: 6.1.0
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       rehype-katex: 7.0.1
@@ -14688,7 +14715,6 @@ snapshots:
       zod: 3.23.8
       zod-validation-error: 3.4.0(zod@3.23.8)
     transitivePeerDependencies:
-      - '@types/react'
       - acorn
       - supports-color
       - typescript
@@ -14848,10 +14874,6 @@ snapshots:
     dependencies:
       yocto-queue: 0.1.0
 
-  p-limit@6.1.0:
-    dependencies:
-      yocto-queue: 1.1.1
-
   p-locate@4.1.0:
     dependencies:
       p-limit: 2.3.0
@@ -14868,6 +14890,14 @@ snapshots:
 
   package-manager-detector@0.2.2: {}
 
+  pagefind@1.1.1:
+    optionalDependencies:
+      '@pagefind/darwin-arm64': 1.1.1
+      '@pagefind/darwin-x64': 1.1.1
+      '@pagefind/linux-arm64': 1.1.1
+      '@pagefind/linux-x64': 1.1.1
+      '@pagefind/windows-x64': 1.1.1
+
   parent-module@1.0.1:
     dependencies:
       callsites: 3.1.0
@@ -14930,11 +14960,6 @@ snapshots:
     dependencies:
       entities: 4.5.0
 
-  pascal-case@3.1.2:
-    dependencies:
-      no-case: 3.0.4
-      tslib: 2.8.1
-
   path-data-parser@0.1.0: {}
 
   path-exists@4.0.0: {}
@@ -15015,6 +15040,13 @@ snapshots:
       lightningcss: 1.28.1
       postcss: 8.4.49
 
+  postcss-load-config@3.1.4(postcss@8.4.49):
+    dependencies:
+      lilconfig: 2.1.0
+      yaml: 1.10.2
+    optionalDependencies:
+      postcss: 8.4.49
+
   postcss-load-config@4.0.2(postcss@8.4.49):
     dependencies:
       lilconfig: 3.1.2
@@ -15036,6 +15068,10 @@ snapshots:
       postcss: 8.4.49
       postcss-selector-parser: 6.1.2
 
+  postcss-safe-parser@6.0.0(postcss@8.4.49):
+    dependencies:
+      postcss: 8.4.49
+
   postcss-scss@4.0.9(postcss@8.4.48):
     dependencies:
       postcss: 8.4.48
@@ -15377,12 +15413,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  remark-mdx-disable-explicit-jsx@0.1.0:
-    dependencies:
-      '@types/hast': 2.3.10
-      unified: 10.1.2
-      unist-util-visit: 4.1.2
-
   remark-mdx@3.1.0:
     dependencies:
       mdast-util-mdx: 3.0.0
@@ -15547,12 +15577,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  schema-utils@2.7.1:
-    dependencies:
-      '@types/json-schema': 7.0.15
-      ajv: 6.12.6
-      ajv-keywords: 3.5.2(ajv@6.12.6)
-
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
@@ -15569,11 +15593,6 @@ snapshots:
       refa: 0.12.1
       regexp-ast-analysis: 0.7.1
 
-  section-matter@1.0.0:
-    dependencies:
-      extend-shallow: 2.0.1
-      kind-of: 6.0.3
-
   semver@5.7.2: {}
 
   semver@6.3.1: {}
@@ -15829,8 +15848,6 @@ snapshots:
     dependencies:
       ansi-regex: 6.1.0
 
-  strip-bom-string@1.0.0: {}
-
   strip-bom@3.0.0: {}
 
   strip-final-newline@3.0.0: {}
@@ -15895,13 +15912,6 @@ snapshots:
     optionalDependencies:
       svelte: 5.2.4
 
-  svelte2tsx@0.7.26(svelte@5.2.4)(typescript@5.6.3):
-    dependencies:
-      dedent-js: 1.0.1
-      pascal-case: 3.1.2
-      svelte: 5.2.4
-      typescript: 5.6.3
-
   svelte@5.2.4:
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -15917,6 +15927,7 @@ snapshots:
       locate-character: 3.0.0
       magic-string: 0.30.12
       zimmerframe: 1.1.2
+    optional: true
 
   svg-parser@2.0.4: {}
 
@@ -16153,6 +16164,8 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
+  type-fest@0.20.2: {}
+
   type-fest@0.6.0: {}
 
   type-fest@0.8.1: {}
@@ -16250,16 +16263,6 @@ snapshots:
       - bluebird
       - supports-color
 
-  unified@10.1.2:
-    dependencies:
-      '@types/unist': 2.0.11
-      bail: 2.0.2
-      extend: 3.0.2
-      is-buffer: 2.0.5
-      is-plain-obj: 4.1.0
-      trough: 2.2.0
-      vfile: 5.3.7
-
   unified@11.0.5:
     dependencies:
       '@types/unist': 3.0.3
@@ -16315,10 +16318,6 @@ snapshots:
     dependencies:
       '@types/unist': 2.0.11
 
-  unist-util-stringify-position@3.0.3:
-    dependencies:
-      '@types/unist': 2.0.11
-
   unist-util-stringify-position@4.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -16332,11 +16331,6 @@ snapshots:
       '@types/unist': 2.0.11
       unist-util-is: 5.2.1
 
-  unist-util-visit-parents@5.1.3:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-
   unist-util-visit-parents@6.0.1:
     dependencies:
       '@types/unist': 3.0.3
@@ -16348,12 +16342,6 @@ snapshots:
       unist-util-is: 5.2.1
       unist-util-visit-parents: 4.1.1
 
-  unist-util-visit@4.1.2:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-is: 5.2.1
-      unist-util-visit-parents: 5.1.3
-
   unist-util-visit@5.0.0:
     dependencies:
       '@types/unist': 3.0.3
@@ -16424,11 +16412,6 @@ snapshots:
       '@types/unist': 3.0.3
       vfile: 6.0.3
 
-  vfile-message@3.1.4:
-    dependencies:
-      '@types/unist': 2.0.11
-      unist-util-stringify-position: 3.0.3
-
   vfile-message@4.0.2:
     dependencies:
       '@types/unist': 3.0.3
@@ -16455,13 +16438,6 @@ snapshots:
       vfile: 6.0.3
       vfile-message: 4.0.2
 
-  vfile@5.3.7:
-    dependencies:
-      '@types/unist': 2.0.11
-      is-buffer: 2.0.5
-      unist-util-stringify-position: 3.0.3
-      vfile-message: 3.1.4
-
   vfile@6.0.3:
     dependencies:
       '@types/unist': 3.0.3
@@ -16722,6 +16698,8 @@ snapshots:
 
   ws@8.18.0: {}
 
+  xml-name-validator@4.0.0: {}
+
   xmldom-sre@0.1.31: {}
 
   y18n@5.0.8: {}
@@ -16736,6 +16714,8 @@ snapshots:
       lodash: 4.17.21
       yaml: 2.6.1
 
+  yaml@1.10.2: {}
+
   yaml@2.6.1: {}
 
   yargs-parser@20.2.9: {}
@@ -16752,9 +16732,8 @@ snapshots:
 
   yocto-queue@0.1.0: {}
 
-  yocto-queue@1.1.1: {}
-
-  zimmerframe@1.1.2: {}
+  zimmerframe@1.1.2:
+    optional: true
 
   zod-validation-error@3.4.0(zod@3.23.8):
     dependencies:
@@ -16762,4 +16741,9 @@ snapshots:
 
   zod@3.23.8: {}
 
+  zustand@5.0.1(@types/react@18.3.12)(react@18.3.1):
+    optionalDependencies:
+      '@types/react': 18.3.12
+      react: 18.3.1
+
   zwitch@2.0.4: {}
diff --git a/scripts/generate-docs.ts b/scripts/generate-docs.ts
index 2e20745b3a3..bc927f5b1e5 100644
--- a/scripts/generate-docs.ts
+++ b/scripts/generate-docs.ts
@@ -11,7 +11,7 @@ import { rules } from '../packages/plugin/src/index.js';
 const BR = '';
 const NBSP = '&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');
 }
 
diff --git a/website/app/[[...mdxPath]]/page.tsx b/website/app/[[...mdxPath]]/page.tsx
new file mode 100644
index 00000000000..809ac1693b8
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/website/app/_meta.global.ts b/website/app/_meta.global.ts
new file mode 100644
index 00000000000..0a83888eb55
--- /dev/null
+++ b/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,
+    },
+  },
+};
diff --git a/website/public/logo.png b/website/app/icon.png
similarity index 100%
rename from website/public/logo.png
rename to website/app/icon.png
diff --git a/website/src/icons/astro.svg b/website/app/icons/astro.svg
similarity index 91%
rename from website/src/icons/astro.svg
rename to website/app/icons/astro.svg
index 848bf481ba0..f93d4d747c4 100644
--- a/website/src/icons/astro.svg
+++ b/website/app/icons/astro.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="#000" viewBox="0 0 128 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 128 128">
   <path
     d="M47.7 107.1c-5.5-5-7.2-15.7-4.9-23.4 4 4.9 9.6 6.4 15.4 7.3 8.9 1.3 17.6.8 25.9-3.2l2.8-1.7a18 18 0 0 1-7.2 20l-5.5 3.8c-5.6 3.8-7.2 8.2-5 14.7l.2.7a14 14 0 0 1-6.6-5.6 15.8 15.8 0 0 1-2.6-8.6c0-1.5 0-3-.2-4.5-.5-3.7-2.2-5.3-5.5-5.4-3.3-.1-5.9 2-6.6 5.2l-.2.7ZM16 82.4s16.5-8 33-8l12.4-38.3c.5-2 1.8-3.2 3.3-3.2 1.6 0 3 1.3 3.4 3.2l12.4 38.3c19.6 0 33 8 33 8l-28-76c-.8-2.3-2.2-3.7-4-3.7H48c-1.8 0-3.1 1.4-4 3.7l-28 76Z"
   />
diff --git a/website/src/icons/gear.svg b/website/app/icons/gear.svg
similarity index 95%
rename from website/src/icons/gear.svg
rename to website/app/icons/gear.svg
index 3f0aeadccfe..7e38ee94664 100644
--- a/website/src/icons/gear.svg
+++ b/website/app/icons/gear.svg
@@ -1,10 +1,4 @@
-<svg
-  width="15"
-  height="15"
-  viewBox="0 0 15 15"
-  fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg"
->
+<svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M7.07095 0.650238C6.67391 0.650238 6.32977 0.925096 6.24198 1.31231L6.0039 2.36247C5.6249 2.47269 5.26335 2.62363 4.92436 2.81013L4.01335 2.23585C3.67748 2.02413 3.23978 2.07312 2.95903 2.35386L2.35294 2.95996C2.0722 3.2407 2.0232 3.6784 2.23493 4.01427L2.80942 4.92561C2.62307 5.2645 2.47227 5.62594 2.36216 6.00481L1.31209 6.24287C0.924883 6.33065 0.650024 6.6748 0.650024 7.07183V7.92897C0.650024 8.32601 0.924883 8.67015 1.31209 8.75794L2.36228 8.99603C2.47246 9.375 2.62335 9.73652 2.80979 10.0755L2.2354 10.9867C2.02367 11.3225 2.07267 11.7602 2.35341 12.041L2.95951 12.6471C3.24025 12.9278 3.67795 12.9768 4.01382 12.7651L4.92506 12.1907C5.26384 12.377 5.62516 12.5278 6.0039 12.6379L6.24198 13.6881C6.32977 14.0753 6.67391 14.3502 7.07095 14.3502H7.92809C8.32512 14.3502 8.66927 14.0753 8.75705 13.6881L8.99505 12.6383C9.37411 12.5282 9.73573 12.3773 10.0748 12.1909L10.986 12.7653C11.3218 12.977 11.7595 12.928 12.0403 12.6473L12.6464 12.0412C12.9271 11.7604 12.9761 11.3227 12.7644 10.9869L12.1902 10.076C12.3768 9.73688 12.5278 9.37515 12.638 8.99596L13.6879 8.75794C14.0751 8.67015 14.35 8.32601 14.35 7.92897V7.07183C14.35 6.6748 14.0751 6.33065 13.6879 6.24287L12.6381 6.00488C12.528 5.62578 12.3771 5.26414 12.1906 4.92507L12.7648 4.01407C12.9766 3.6782 12.9276 3.2405 12.6468 2.95975L12.0407 2.35366C11.76 2.07292 11.3223 2.02392 10.9864 2.23565L10.0755 2.80989C9.73622 2.62328 9.37437 2.47229 8.99505 2.36209L8.75705 1.31231C8.66927 0.925096 8.32512 0.650238 7.92809 0.650238H7.07095ZM4.92053 3.81251C5.44724 3.44339 6.05665 3.18424 6.71543 3.06839L7.07095 1.50024H7.92809L8.28355 3.06816C8.94267 3.18387 9.5524 3.44302 10.0794 3.81224L11.4397 2.9547L12.0458 3.56079L11.1882 4.92117C11.5573 5.44798 11.8164 6.0575 11.9321 6.71638L13.5 7.07183V7.92897L11.932 8.28444C11.8162 8.94342 11.557 9.55301 11.1878 10.0798L12.0453 11.4402L11.4392 12.0462L10.0787 11.1886C9.55192 11.5576 8.94241 11.8166 8.28355 11.9323L7.92809 13.5002H7.07095L6.71543 11.932C6.0569 11.8162 5.44772 11.5572 4.92116 11.1883L3.56055 12.046L2.95445 11.4399L3.81213 10.0794C3.4431 9.55266 3.18403 8.94326 3.06825 8.2845L1.50002 7.92897V7.07183L3.06818 6.71632C3.18388 6.05765 3.44283 5.44833 3.81171 4.92165L2.95398 3.561L3.56008 2.95491L4.92053 3.81251ZM9.02496 7.50008C9.02496 8.34226 8.34223 9.02499 7.50005 9.02499C6.65786 9.02499 5.97513 8.34226 5.97513 7.50008C5.97513 6.65789 6.65786 5.97516 7.50005 5.97516C8.34223 5.97516 9.02496 6.65789 9.02496 7.50008ZM9.92496 7.50008C9.92496 8.83932 8.83929 9.92499 7.50005 9.92499C6.1608 9.92499 5.07513 8.83932 5.07513 7.50008C5.07513 6.16084 6.1608 5.07516 7.50005 5.07516C8.83929 5.07516 9.92496 6.16084 9.92496 7.50008Z"
     fill-rule="evenodd"
diff --git a/website/src/icons/graphql.svg b/website/app/icons/graphql.svg
similarity index 100%
rename from website/src/icons/graphql.svg
rename to website/app/icons/graphql.svg
diff --git a/website/src/icons/half.svg b/website/app/icons/half.svg
similarity index 77%
rename from website/src/icons/half.svg
rename to website/app/icons/half.svg
index 8f3724ede38..a7d410b8d1f 100644
--- a/website/src/icons/half.svg
+++ b/website/app/icons/half.svg
@@ -1,10 +1,4 @@
-<svg
-  width="15"
-  height="15"
-  viewBox="0 0 15 15"
-  fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg"
->
+<svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM7.49988 1.82689C4.36688 1.8269 1.82707 4.36672 1.82707 7.49972C1.82707 10.6327 4.36688 13.1725 7.49988 13.1726V1.82689Z"
     fill-rule="evenodd"
diff --git a/website/src/icons/javascript.svg b/website/app/icons/javascript.svg
similarity index 100%
rename from website/src/icons/javascript.svg
rename to website/app/icons/javascript.svg
diff --git a/website/src/icons/prettier.svg b/website/app/icons/prettier.svg
similarity index 94%
rename from website/src/icons/prettier.svg
rename to website/app/icons/prettier.svg
index 20b376b9d09..e97406a5fd1 100644
--- a/website/src/icons/prettier.svg
+++ b/website/app/icons/prettier.svg
@@ -1,4 +1,4 @@
-<svg width="210" height="210" viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 210 210" xmlns="http://www.w3.org/2000/svg">
   <rect fill="#56b3b4" x="165" y="40" width="20" height="10" rx="5" />
   <rect fill="#ea5e5e" x="15" y="200" width="60" height="10" rx="5" />
   <rect fill="#bf85bf" x="135" y="120" width="40" height="10" rx="5" />
diff --git a/website/src/icons/stack.svg b/website/app/icons/stack.svg
similarity index 86%
rename from website/src/icons/stack.svg
rename to website/app/icons/stack.svg
index 605e4f8cdbb..2fb8a2f78b6 100644
--- a/website/src/icons/stack.svg
+++ b/website/app/icons/stack.svg
@@ -1,10 +1,4 @@
-<svg
-  width="15"
-  height="15"
-  viewBox="0 0 15 15"
-  fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg"
->
+<svg viewBox="0 0 15 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path
     d="M7.75432 1.81954C7.59742 1.72682 7.4025 1.72682 7.24559 1.81954L1.74559 5.06954C1.59336 5.15949 1.49996 5.32317 1.49996 5.5C1.49996 5.67683 1.59336 5.84051 1.74559 5.93046L7.24559 9.18046C7.4025 9.27318 7.59742 9.27318 7.75432 9.18046L13.2543 5.93046C13.4066 5.84051 13.5 5.67683 13.5 5.5C13.5 5.32317 13.4066 5.15949 13.2543 5.06954L7.75432 1.81954ZM7.49996 8.16923L2.9828 5.5L7.49996 2.83077L12.0171 5.5L7.49996 8.16923ZM2.25432 8.31954C2.01658 8.17906 1.70998 8.2579 1.56949 8.49564C1.42901 8.73337 1.50785 9.03998 1.74559 9.18046L7.24559 12.4305C7.4025 12.5232 7.59742 12.5232 7.75432 12.4305L13.2543 9.18046C13.4921 9.03998 13.5709 8.73337 13.4304 8.49564C13.2899 8.2579 12.9833 8.17906 12.7456 8.31954L7.49996 11.4192L2.25432 8.31954Z"
   />
diff --git a/website/src/icons/svelte.svg b/website/app/icons/svelte.svg
similarity index 94%
rename from website/src/icons/svelte.svg
rename to website/app/icons/svelte.svg
index 810e7cc08c9..936717d11d0 100644
--- a/website/src/icons/svelte.svg
+++ b/website/app/icons/svelte.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" fill="#fff" viewBox="0 0 107 128">
+<svg xmlns="http://www.w3.org/2000/svg" fill="#fff" viewBox="0 0 107 128">
   <path
     d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
     fill="#ff3e00"
diff --git a/website/src/icons/vue.svg b/website/app/icons/vue.svg
similarity index 60%
rename from website/src/icons/vue.svg
rename to website/app/icons/vue.svg
index 0779e4df470..2a8ec841f4e 100644
--- a/website/src/icons/vue.svg
+++ b/website/app/icons/vue.svg
@@ -1,10 +1,4 @@
-<svg
-  viewBox="0 0 128 128"
-  width="24"
-  height="24"
-  fill="currentColor"
-  xmlns="http://www.w3.org/2000/svg"
->
+<svg viewBox="0 0 128 128" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" />
   <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" />
 </svg>
diff --git a/website/app/layout.tsx b/website/app/layout.tsx
new file mode 100644
index 00000000000..7d009c1b5b2
--- /dev/null
+++ b/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;
diff --git a/website/src/components/button.tsx b/website/app/play/button.tsx
similarity index 100%
rename from website/src/components/button.tsx
rename to website/app/play/button.tsx
diff --git a/website/src/components/graphql-editor.tsx b/website/app/play/graphql-editor.tsx
similarity index 98%
rename from website/src/components/graphql-editor.tsx
rename to website/app/play/graphql-editor.tsx
index 6fc322567fc..7241a505841 100644
--- a/website/src/components/graphql-editor.tsx
+++ b/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>
diff --git a/website/src/components/play-page.tsx b/website/app/play/page.client.tsx
similarity index 69%
rename from website/src/components/play-page.tsx
rename to website/app/play/page.client.tsx
index f2a02b38fc0..b6b6cbfaf34 100644
--- a/website/src/components/play-page.tsx
+++ b/website/app/play/page.client.tsx
@@ -1,9 +1,9 @@
-import { ReactElement, useRef } from 'react';
-import { clsx } from 'clsx';
-import { Linter } from 'eslint';
+'use client';
+
+import { FC, ReactNode, useRef } from 'react';
 import debounce from 'lodash.debounce';
 import { StringParam, useQueryParam, withDefault } from 'use-query-params';
-import { ConfigName, configs, parser, rules } from '@graphql-eslint/eslint-plugin';
+import { ConfigName, configs, rules } from '@graphql-eslint/eslint-plugin';
 import { asArray } from '@graphql-tools/utils';
 import { GraphQLEditor } from './graphql-editor';
 import { Select } from './select';
@@ -30,39 +30,6 @@ const operationsRulesOptions = Object.entries(rules)
 const schemaConfigsOptions = schemaConfigs.map(name => ({ key: name, name }));
 const operationsConfigsOptions = operationsConfigs.map(name => ({ key: name, name }));
 
-function dedent(code: string) {
-  return code
-    .split('\n')
-    .map(line => line.slice(2))
-    .join('\n')
-    .trimStart();
-}
-
-const DEFAULT_SCHEMA = dedent(/* GraphQL*/ `
-  scalar DateTime
-
-  type Post {
-    id: ID!
-    title: String
-    createdAt: DateTime
-    modifiedAt: DateTime
-  }
-
-  type Query {
-    post: Post!
-    posts: [Post!]
-  }
-`);
-
-const DEFAULT_OPERATION = dedent(/* GraphQL */ `
-  query {
-    posts {
-      id
-      title
-    }
-  }
-`);
-
 function useDebouncedQueryParams<TypeToEncode, TypeFromDecode = TypeToEncode>(
   ...args: Parameters<typeof useQueryParam<TypeToEncode, TypeFromDecode>>
 ): ReturnType<typeof useQueryParam<TypeToEncode, TypeFromDecode>> {
@@ -73,11 +40,12 @@ function useDebouncedQueryParams<TypeToEncode, TypeFromDecode = TypeToEncode>(
   return [query, fn.current];
 }
 
-const classes = {
-  heading: clsx('font-medium mb-2'),
-};
-
-export function PlayPage(): ReactElement {
+export const ClientPage: FC<{
+  defaultSchema: string;
+  defaultOperation: string;
+  children: ReactNode;
+  headingClass: string;
+}> = ({ defaultSchema, defaultOperation, children, headingClass }) => {
   const [schemaConfig, setSchemaConfig] = useDebouncedQueryParams(
     'sc',
     withDefault(StringParam, 'schema-recommended'),
@@ -88,36 +56,18 @@ export function PlayPage(): ReactElement {
     withDefault(StringParam, 'operations-recommended'),
   );
   const [operationRule, setOperationRule] = useDebouncedQueryParams<string>('or');
-  const [schema, setSchema] = useDebouncedQueryParams(
-    's',
-    withDefault(StringParam, DEFAULT_SCHEMA),
-  );
+  const [schema, setSchema] = useDebouncedQueryParams('s', withDefault(StringParam, defaultSchema));
   const [operation, setOperation] = useDebouncedQueryParams(
     'o',
-    withDefault(StringParam, DEFAULT_OPERATION),
+    withDefault(StringParam, defaultOperation),
   );
 
   return (
-    <div
-      className={clsx(
-        'h-[calc(100dvh-var(--nextra-navbar-height))]',
-        'flex bg-gradient-to-br from-fuchsia-200/60 via-pink-300/60 to-purple-300/60 dark:from-pink-800/30 dark:via-fuchsia-900/30 dark:to-purple-800/30 max-md:min-w-[1280px]',
-      )}
-    >
+    <>
       <div className="nextra-scrollbar flex w-72 flex-col gap-4 overflow-y-auto p-5 text-xs">
+        {children}
         <div>
-          <h3 className={classes.heading}>VERSIONING</h3>
-          <span className="flex justify-between text-sm">
-            <span>ESLint</span>
-            <span>{Linter.version}</span>
-          </span>
-          <span className="flex justify-between text-sm">
-            <span>GraphQL-ESLint</span>
-            <span>{parser.meta.version}</span>
-          </span>
-        </div>
-        <div>
-          <h3 className={classes.heading}>SCHEMA CONFIG</h3>
+          <h3 className={headingClass}>SCHEMA CONFIG</h3>
           <Select
             options={schemaConfigsOptions}
             value={schemaConfig}
@@ -126,7 +76,7 @@ export function PlayPage(): ReactElement {
           />
         </div>
         <div>
-          <h3 className={classes.heading}>SCHEMA RULE</h3>
+          <h3 className={headingClass}>SCHEMA RULE</h3>
           <Select
             options={schemaRulesOptions}
             value={schemaRule}
@@ -136,7 +86,7 @@ export function PlayPage(): ReactElement {
         </div>
         <hr className="dark:border-neutral-800" />
         <div>
-          <h3 className={classes.heading}>OPERATION CONFIG</h3>
+          <h3 className={headingClass}>OPERATION CONFIG</h3>
           <Select
             options={operationsConfigsOptions}
             value={operationConfig}
@@ -145,7 +95,7 @@ export function PlayPage(): ReactElement {
           />
         </div>
         <div>
-          <h3 className={classes.heading}>OPERATION RULE</h3>
+          <h3 className={headingClass}>OPERATION RULE</h3>
           <Select
             options={operationsRulesOptions}
             value={operationRule}
@@ -187,6 +137,6 @@ export function PlayPage(): ReactElement {
         }}
         onChange={setOperation}
       />
-    </div>
+    </>
   );
-}
+};
diff --git a/website/app/play/page.tsx b/website/app/play/page.tsx
new file mode 100644
index 00000000000..2c65f01a6b7
--- /dev/null
+++ b/website/app/play/page.tsx
@@ -0,0 +1,82 @@
+import { FC, Suspense } from 'react';
+import { clsx } from 'clsx';
+import { Linter } from 'eslint';
+import { parser } from '@graphql-eslint/eslint-plugin';
+import { ClientPage } from './page.client';
+import { QueryParamProvider } from './query-params-provider';
+
+export const metadata = {
+  title: 'Playground',
+};
+
+function dedent(code: string) {
+  return code
+    .split('\n')
+    .map(line => line.slice(2))
+    .join('\n')
+    .trimStart();
+}
+
+const DEFAULT_SCHEMA = dedent(/* GraphQL*/ `
+  scalar DateTime
+
+  type Post {
+    id: ID!
+    title: String
+    createdAt: DateTime
+    modifiedAt: DateTime
+  }
+
+  type Query {
+    post: Post!
+    posts: [Post!]
+  }
+`);
+
+const DEFAULT_OPERATION = dedent(/* GraphQL */ `
+  query {
+    posts {
+      id
+      title
+    }
+  }
+`);
+
+const classes = {
+  heading: clsx('font-medium mb-2'),
+};
+
+const PlayPage: FC = () => {
+  return (
+    <div
+      className={clsx(
+        'h-[calc(100dvh-var(--nextra-navbar-height))]',
+        'flex bg-gradient-to-br from-fuchsia-200/60 via-pink-300/60 to-purple-300/60 max-md:min-w-[1280px] dark:from-pink-800/30 dark:via-fuchsia-900/30 dark:to-purple-800/30',
+      )}
+    >
+      <Suspense fallback="Loading...">
+        <QueryParamProvider>
+          <ClientPage
+            defaultOperation={DEFAULT_OPERATION}
+            defaultSchema={DEFAULT_SCHEMA}
+            headingClass={classes.heading}
+          >
+            <div>
+              <h3 className={classes.heading}>VERSIONING</h3>
+              <span className="flex justify-between text-sm">
+                <span>ESLint</span>
+                <span>{Linter.version}</span>
+              </span>
+              <span className="flex justify-between text-sm">
+                <span>GraphQL-ESLint</span>
+                <span>{parser.meta.version}</span>
+              </span>
+            </div>
+          </ClientPage>
+        </QueryParamProvider>
+      </Suspense>
+    </div>
+  );
+};
+
+export default PlayPage;
diff --git a/website/app/play/query-params-provider.tsx b/website/app/play/query-params-provider.tsx
new file mode 100644
index 00000000000..a28533ff88a
--- /dev/null
+++ b/website/app/play/query-params-provider.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+import { FC, ReactNode } from 'react';
+import NextAdapterApp from 'next-query-params/app';
+import { QueryParamProvider as Provider } from 'use-query-params';
+
+export const QueryParamProvider: FC<{ children: ReactNode }> = ({ children }) => {
+  return <Provider adapter={NextAdapterApp}>{children}</Provider>;
+};
diff --git a/website/src/components/select.tsx b/website/app/play/select.tsx
similarity index 100%
rename from website/src/components/select.tsx
rename to website/app/play/select.tsx
diff --git a/website/content/docs/configs.mdx b/website/content/docs/configs.mdx
new file mode 100644
index 00000000000..c2aca5c9701
--- /dev/null
+++ b/website/content/docs/configs.mdx
@@ -0,0 +1,53 @@
+# Shared Configs
+
+## Schema Configs
+
+|                                                                Name                                                                | Description                                                                                               |
+| :--------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------- |
+| [`flat/schema-recommended`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/schema-recommended.ts) | enables recommended rules for schema development                                                          |
+|         [`flat/schema-all`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/schema-all.ts)         | enables all rules for schema development, except for those that require `parserOptions.operations` option |
+|       [`flat/schema-relay`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/schema-relay.ts)       | enables rules from Relay specification for schema development                                             |
+
+## Operations Configs
+
+|                                                                    Name                                                                    | Description                                                              |
+| :----------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------------ |
+| [`flat/operations-recommended`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/operations-recommended.ts) | enables recommended rules for consuming GraphQL (operations) development |
+|         [`flat/operations-all`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/operations-all.ts)         | enables all rules for consuming GraphQL (operations) development         |
+
+> [!WARNING]
+>
+> If you are in a project that develops the GraphQL schema, you'll need `schema` rules.
+>
+> If you are in a project that develops GraphQL operations (`query`/`mutation`/`subscription`),
+> you'll need `operations` rules.
+>
+> If you are in a monorepo project, you probably need both sets of rules, see
+> [example of configuration](https://github.com/B2o5T/graphql-eslint/tree/master/examples/monorepo/eslint.config.js).
+
+## Config Usage
+
+For example, to enable the `flat/schema-recommended` config, in a new configuration object assign
+the `rules` field to the `rules` field from the associated config from `graphqlPlugin.configs`
+object.
+
+```diff filename="eslint.config.js"
+import graphqlPlugin from '@graphql-eslint/eslint-plugin'
+
+export default [
+  // ... other config
+  {
+    files: ['**/*.graphql'],
+    languageOptions: {
+      parser: graphqlPlugin.parser
+    },
+    plugins: {
+      '@graphql-eslint': graphqlPlugin
+    }
+  },
++ {
++   files: ['path-to-schema/**/*.graphql'],
++   rules: graphqlPlugin.configs['flat/schema-recommended'].rules
++ }
+]
+```
diff --git a/website/src/pages/docs/custom-rules.mdx b/website/content/docs/custom-rules.mdx
similarity index 99%
rename from website/src/pages/docs/custom-rules.mdx
rename to website/content/docs/custom-rules.mdx
index e2390408d1e..99f4791e4b7 100644
--- a/website/src/pages/docs/custom-rules.mdx
+++ b/website/content/docs/custom-rules.mdx
@@ -1,8 +1,4 @@
----
-title: Writing Custom Rules
----
-
-# {frontMatter.title}
+# Writing Custom Rules
 
 To get started with your own rules, start by understanding how
 [ESLint custom rules works](https://eslint.org/docs/latest/extend/custom-rules).
diff --git a/website/src/pages/docs/disabling-rules.mdx b/website/content/docs/disabling-rules.mdx
similarity index 100%
rename from website/src/pages/docs/disabling-rules.mdx
rename to website/content/docs/disabling-rules.mdx
diff --git a/website/src/pages/docs/getting-started.mdx b/website/content/docs/getting-started.mdx
similarity index 98%
rename from website/src/pages/docs/getting-started.mdx
rename to website/content/docs/getting-started.mdx
index 2592f8b9a56..80121b989be 100644
--- a/website/src/pages/docs/getting-started.mdx
+++ b/website/content/docs/getting-started.mdx
@@ -1,10 +1,6 @@
----
-sidebarTitle: 🚧 Getting Started
----
-
 import { Callout } from '@theguild/components'
 
-# Getting Started
+# 🚧 Getting Started
 
 <WIP />
 
diff --git a/website/src/pages/docs/index.mdx b/website/content/docs/index.mdx
similarity index 88%
rename from website/src/pages/docs/index.mdx
rename to website/content/docs/index.mdx
index a06f19a7ca0..ff1b7ae5b65 100644
--- a/website/src/pages/docs/index.mdx
+++ b/website/content/docs/index.mdx
@@ -1,17 +1,13 @@
 ---
-title: Introduction
 description: What's GraphQL-ESLint, key features and helpful resources.
 ---
 
-# {frontMatter.title}
+# Introduction
 
 This project integrates GraphQL and ESLint, for a better developer experience.
 
 <video autoPlay loop muted playsInline>
-  <source
-    src={(process.env.NODE_ENV === 'production' ? '/graphql/eslint' : '') + '/demo.mp4'}
-    type="video/mp4"
-  />
+  <source src="/demo.mp4" type="video/mp4" />
 </video>
 
 <p className="mt-3 text-center text-sm italic">Demo GraphQL-ESLint in VSCode</p>
diff --git a/website/src/pages/docs/parser-options.mdx b/website/content/docs/parser-options.mdx
similarity index 97%
rename from website/src/pages/docs/parser-options.mdx
rename to website/content/docs/parser-options.mdx
index b99e7a4ee62..3060b562c15 100644
--- a/website/src/pages/docs/parser-options.mdx
+++ b/website/content/docs/parser-options.mdx
@@ -1,10 +1,6 @@
----
-sidebarTitle: 🚧 Parser Options
----
-
 import { Callout } from '@theguild/components'
 
-# Parser Options
+# 🚧 Parser Options
 
 <WIP />
 
diff --git a/website/src/pages/docs/parser.mdx b/website/content/docs/parser.mdx
similarity index 98%
rename from website/src/pages/docs/parser.mdx
rename to website/content/docs/parser.mdx
index 826d2e4816e..093d06fa834 100644
--- a/website/src/pages/docs/parser.mdx
+++ b/website/content/docs/parser.mdx
@@ -1,5 +1,5 @@
 ---
-title: How Does a Parser Work?
+sidebarTitle: How Does a Parser Work?
 ---
 
 # How Does a GraphQL-ESLint Parser Work?
diff --git a/website/content/docs/usage/astro.mdx b/website/content/docs/usage/astro.mdx
new file mode 100644
index 00000000000..90aceab255d
--- /dev/null
+++ b/website/content/docs/usage/astro.mdx
@@ -0,0 +1,12 @@
+---
+sidebarTitle: Astro
+icon: AstroIcon
+---
+
+# Usage with `.astro` files
+
+> [!NOTE]
+>
+> GraphQL-ESLint should work with Astro files as well. Feel free to submit a PR with a
+> [new example](https://github.com/dimaMachina/graphql-eslint/tree/master/examples) in the
+> GraphQL-ESLint repository.
diff --git a/website/content/docs/usage/graphql.mdx b/website/content/docs/usage/graphql.mdx
new file mode 100644
index 00000000000..e84eeb0da62
--- /dev/null
+++ b/website/content/docs/usage/graphql.mdx
@@ -0,0 +1,8 @@
+---
+sidebarTitle: GraphQL Files
+icon: GraphQLIcon
+---
+
+# Usage with `.graphql` files
+
+<ESLintConfigs gitFolder="graphql-config" />
diff --git a/website/content/docs/usage/index.mdx b/website/content/docs/usage/index.mdx
new file mode 100644
index 00000000000..fb5aee6da22
--- /dev/null
+++ b/website/content/docs/usage/index.mdx
@@ -0,0 +1,76 @@
+---
+asIndexPage: true
+---
+
+import AstroIcon from '@icons/astro.svg?svgr'
+import GearIcon from '@icons/gear.svg?svgr'
+import GraphQLIcon from '@icons/graphql.svg?svgr'
+import HalfIcon from '@icons/half.svg?svgr'
+import JSIcon from '@icons/javascript.svg?svgr'
+import PrettierIcon from '@icons/prettier.svg?svgr'
+import StackIcon from '@icons/stack.svg?svgr'
+import SvelteIcon from '@icons/svelte.svg?svgr'
+import VueIcon from '@icons/vue.svg?svgr'
+import { Cards, Steps } from '@theguild/components'
+import { createIndexPage, getPageMap, MDXRemote } from '@theguild/components/server'
+
+# Usage
+
+## Quickstart
+
+<Steps>
+
+### Installation
+
+Install the plugin package with your favourite package manager.
+
+```sh npm2yarn
+npm i -D @graphql-eslint/eslint-plugin
+```
+
+> [!WARNING]
+>
+> Make sure you have [`graphql`](https://npmjs.com/package/graphql) dependency in your project.
+
+### Configuration
+
+Create a new
+[configuration object](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects)
+in your `eslint.config.js` file to setup `@graphql-eslint` plugin.
+
+```js filename="eslint.config.js"
+import graphqlPlugin from '@graphql-eslint/eslint-plugin'
+
+export default [
+  // ... other config
+  {
+    files: ['**/*.graphql'],
+    languageOptions: {
+      parser: graphqlPlugin.parser
+    },
+    plugins: {
+      '@graphql-eslint': graphqlPlugin
+    }
+  }
+]
+```
+
+</Steps>
+
+## Usage
+
+<MDXRemote
+  compiledSource={await createIndexPage(await getPageMap('/docs/usage'))}
+  components={{
+    Cards,
+    GraphQLIcon,
+    JSIcon,
+    HalfIcon,
+    StackIcon,
+    GearIcon,
+    SvelteIcon,
+    VueIcon,
+    AstroIcon,
+    PrettierIcon
+  }}
+/>
diff --git a/website/content/docs/usage/js.mdx b/website/content/docs/usage/js.mdx
new file mode 100644
index 00000000000..d58cffa99aa
--- /dev/null
+++ b/website/content/docs/usage/js.mdx
@@ -0,0 +1,8 @@
+---
+sidebarTitle: Code Files
+icon: JSIcon
+---
+
+# Usage with code files `.js/.jsx`
+
+<ESLintConfigs gitFolder="code-file" />
diff --git a/website/content/docs/usage/multiple-projects.mdx b/website/content/docs/usage/multiple-projects.mdx
new file mode 100644
index 00000000000..782dfd9da2f
--- /dev/null
+++ b/website/content/docs/usage/multiple-projects.mdx
@@ -0,0 +1,8 @@
+---
+sidebarTitle: Multiple Projects
+icon: StackIcon
+---
+
+# Usage to lint different schemas
+
+<ESLintConfigs gitFolder="multiple-projects-graphql-config" />
diff --git a/website/content/docs/usage/prettier.mdx b/website/content/docs/usage/prettier.mdx
new file mode 100644
index 00000000000..911f21eea5d
--- /dev/null
+++ b/website/content/docs/usage/prettier.mdx
@@ -0,0 +1,8 @@
+---
+sidebarTitle: Prettier
+icon: PrettierIcon
+---
+
+# Usage with `eslint-plugin-prettier`
+
+<ESLintConfigs gitFolder="prettier" />
diff --git a/website/content/docs/usage/programmatic.mdx b/website/content/docs/usage/programmatic.mdx
new file mode 100644
index 00000000000..9f00038c9a9
--- /dev/null
+++ b/website/content/docs/usage/programmatic.mdx
@@ -0,0 +1,8 @@
+---
+sidebarTitle: Programmatic
+icon: GearIcon
+---
+
+# Programmatic usage
+
+<ESLintConfigs gitFolder="programmatic" />
diff --git a/website/content/docs/usage/schema-and-documents.mdx b/website/content/docs/usage/schema-and-documents.mdx
new file mode 100644
index 00000000000..aeac2542f4a
--- /dev/null
+++ b/website/content/docs/usage/schema-and-documents.mdx
@@ -0,0 +1,8 @@
+---
+sidebarTitle: Schema and Documents
+icon: HalfIcon
+---
+
+# Usage to lint both schema/documents
+
+<ESLintConfigs gitFolder="monorepo" />
diff --git a/website/content/docs/usage/svelte.mdx b/website/content/docs/usage/svelte.mdx
new file mode 100644
index 00000000000..4d93b84a54c
--- /dev/null
+++ b/website/content/docs/usage/svelte.mdx
@@ -0,0 +1,8 @@
+---
+sidebarTitle: Svelte
+icon: SvelteIcon
+---
+
+# Usage with `.svelte` files
+
+<ESLintConfigs gitFolder="svelte-code-file" />
diff --git a/website/src/pages/docs/usage/vue.mdx b/website/content/docs/usage/vue.mdx
similarity index 85%
rename from website/src/pages/docs/usage/vue.mdx
rename to website/content/docs/usage/vue.mdx
index 34d45c444a3..67e3c88875e 100644
--- a/website/src/pages/docs/usage/vue.mdx
+++ b/website/content/docs/usage/vue.mdx
@@ -1,18 +1,23 @@
-import { Callout } from '@theguild/components'
+---
+sidebarTitle: Vue
+icon: VueIcon
+---
 
 # Usage with `.vue` files
 
+<OfficialExampleCallout gitFolder="vue-code-file" />
+
 `graphql-eslint` can lint GraphQL documents inside Vue Single-File Components (`.vue` files). It
 does this in two steps: (1) extract the GraphQL documents from the Vue (or `.js`/`.ts`) file, and
 (2) lint the extracted GraphQL documents.
 
 If you don't embed GraphQL documents in your Vue files, you can skip this page.
 
-<Callout type="warning">
-  Due to [a limitation in
-  `graphql-tag-pluck`](https://github.com/dimaMachina/graphql-eslint/issues/2103), lint violations
-  will show up at the top of the Vue document, on the first character, not inline.
-</Callout>
+> [!WARNING]
+>
+> Due to
+> [a limitation in `graphql-tag-pluck`](https://github.com/dimaMachina/graphql-eslint/issues/2103),
+> lint violations will show up at the top of the Vue document, on the first character, not inline.
 
 ## Configuration
 
@@ -20,10 +25,10 @@ Add the following configuration to your `eslint.config.js` file to setup `@graph
 The intermediate graphql files always have the `.graphql` extension. Make sure the second block
 matches those files, even if you use another extension for your project's GraphQL (e.g. `.gql`).
 
-<Callout type="warning">
-  Make sure the first section, which extracts GraphQL from Vue files, comes **before** any other Vue
-  rules. Otherwise, eslint may incorrectly rewrite all error messages to say only "clear".
-</Callout>
+> [!WARNING]
+>
+> Make sure the first section, which extracts GraphQL from Vue files, comes **before** any other Vue
+> rules. Otherwise, eslint may incorrectly rewrite all error messages to say only "clear".
 
 ```js filename="eslint.config.js"
 import graphqlPlugin from '@graphql-eslint/eslint-plugin'
@@ -69,5 +74,3 @@ export default [
   }
 ]
 ```
-
-<OfficialExampleCallout gitFolder="vue-code-file" />
diff --git a/website/src/pages/docs/vscode.mdx b/website/content/docs/vscode.mdx
similarity index 86%
rename from website/src/pages/docs/vscode.mdx
rename to website/content/docs/vscode.mdx
index 20de15dadcd..530b3aed8d7 100644
--- a/website/src/pages/docs/vscode.mdx
+++ b/website/content/docs/vscode.mdx
@@ -1,8 +1,4 @@
----
-title: VSCode Integration
----
-
-# {frontMatter.title}
+# VSCode Integration
 
 Use
 [ESLint VSCode extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
diff --git a/website/src/pages/rules/alphabetize.mdx b/website/content/rules/alphabetize.mdx
similarity index 99%
rename from website/src/pages/rules/alphabetize.mdx
rename to website/content/rules/alphabetize.mdx
index b39e3446c8e..87ea8c86de2 100644
--- a/website/src/pages/rules/alphabetize.mdx
+++ b/website/content/rules/alphabetize.mdx
@@ -17,7 +17,7 @@ fix some of the problems reported by this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/deprecated-rules.md b/website/content/rules/deprecated-rules.md
similarity index 100%
rename from website/src/pages/rules/deprecated-rules.md
rename to website/content/rules/deprecated-rules.md
diff --git a/website/src/pages/rules/description-style.mdx b/website/content/rules/description-style.mdx
similarity index 98%
rename from website/src/pages/rules/description-style.mdx
rename to website/content/rules/description-style.mdx
index eec430ea7e2..57573d08029 100644
--- a/website/src/pages/rules/description-style.mdx
+++ b/website/content/rules/description-style.mdx
@@ -17,7 +17,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/executable-definitions.mdx b/website/content/rules/executable-definitions.mdx
similarity index 100%
rename from website/src/pages/rules/executable-definitions.mdx
rename to website/content/rules/executable-definitions.mdx
diff --git a/website/src/pages/rules/fields-on-correct-type.mdx b/website/content/rules/fields-on-correct-type.mdx
similarity index 100%
rename from website/src/pages/rules/fields-on-correct-type.mdx
rename to website/content/rules/fields-on-correct-type.mdx
diff --git a/website/src/pages/rules/fragments-on-composite-type.mdx b/website/content/rules/fragments-on-composite-type.mdx
similarity index 100%
rename from website/src/pages/rules/fragments-on-composite-type.mdx
rename to website/content/rules/fragments-on-composite-type.mdx
diff --git a/website/src/pages/rules/index.md b/website/content/rules/index.md
similarity index 100%
rename from website/src/pages/rules/index.md
rename to website/content/rules/index.md
diff --git a/website/src/pages/rules/input-name.mdx b/website/content/rules/input-name.mdx
similarity index 100%
rename from website/src/pages/rules/input-name.mdx
rename to website/content/rules/input-name.mdx
diff --git a/website/src/pages/rules/known-argument-names.mdx b/website/content/rules/known-argument-names.mdx
similarity index 100%
rename from website/src/pages/rules/known-argument-names.mdx
rename to website/content/rules/known-argument-names.mdx
diff --git a/website/src/pages/rules/known-directives.mdx b/website/content/rules/known-directives.mdx
similarity index 100%
rename from website/src/pages/rules/known-directives.mdx
rename to website/content/rules/known-directives.mdx
diff --git a/website/src/pages/rules/known-fragment-names.mdx b/website/content/rules/known-fragment-names.mdx
similarity index 100%
rename from website/src/pages/rules/known-fragment-names.mdx
rename to website/content/rules/known-fragment-names.mdx
diff --git a/website/src/pages/rules/known-type-names.mdx b/website/content/rules/known-type-names.mdx
similarity index 100%
rename from website/src/pages/rules/known-type-names.mdx
rename to website/content/rules/known-type-names.mdx
diff --git a/website/src/pages/rules/lone-anonymous-operation.mdx b/website/content/rules/lone-anonymous-operation.mdx
similarity index 100%
rename from website/src/pages/rules/lone-anonymous-operation.mdx
rename to website/content/rules/lone-anonymous-operation.mdx
diff --git a/website/src/pages/rules/lone-executable-definition.mdx b/website/content/rules/lone-executable-definition.mdx
similarity index 98%
rename from website/src/pages/rules/lone-executable-definition.mdx
rename to website/content/rules/lone-executable-definition.mdx
index 611e473646d..7bc00983809 100644
--- a/website/src/pages/rules/lone-executable-definition.mdx
+++ b/website/content/rules/lone-executable-definition.mdx
@@ -12,7 +12,7 @@ description:
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/lone-schema-definition.mdx b/website/content/rules/lone-schema-definition.mdx
similarity index 100%
rename from website/src/pages/rules/lone-schema-definition.mdx
rename to website/content/rules/lone-schema-definition.mdx
diff --git a/website/src/pages/rules/match-document-filename.mdx b/website/content/rules/match-document-filename.mdx
similarity index 99%
rename from website/src/pages/rules/match-document-filename.mdx
rename to website/content/rules/match-document-filename.mdx
index e47ace42f07..b1c12f4c4ac 100644
--- a/website/src/pages/rules/match-document-filename.mdx
+++ b/website/content/rules/match-document-filename.mdx
@@ -11,7 +11,7 @@ description: 'This rule allows you to enforce that the file name should match th
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/naming-convention.mdx b/website/content/rules/naming-convention.mdx
similarity index 99%
rename from website/src/pages/rules/naming-convention.mdx
rename to website/content/rules/naming-convention.mdx
index 15b800b545b..ed9bef931f5 100644
--- a/website/src/pages/rules/naming-convention.mdx
+++ b/website/content/rules/naming-convention.mdx
@@ -18,7 +18,7 @@ rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-anonymous-operations.mdx b/website/content/rules/no-anonymous-operations.mdx
similarity index 97%
rename from website/src/pages/rules/no-anonymous-operations.mdx
rename to website/content/rules/no-anonymous-operations.mdx
index f8b590417d4..fc8494ad7ca 100644
--- a/website/src/pages/rules/no-anonymous-operations.mdx
+++ b/website/content/rules/no-anonymous-operations.mdx
@@ -19,7 +19,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-deprecated.mdx b/website/content/rules/no-deprecated.mdx
similarity index 98%
rename from website/src/pages/rules/no-deprecated.mdx
rename to website/content/rules/no-deprecated.mdx
index 054cc4ac32f..7a88388bbd5 100644
--- a/website/src/pages/rules/no-deprecated.mdx
+++ b/website/content/rules/no-deprecated.mdx
@@ -17,7 +17,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-duplicate-fields.mdx b/website/content/rules/no-duplicate-fields.mdx
similarity index 98%
rename from website/src/pages/rules/no-duplicate-fields.mdx
rename to website/content/rules/no-duplicate-fields.mdx
index 12ad6fa1449..6eed8cd92f3 100644
--- a/website/src/pages/rules/no-duplicate-fields.mdx
+++ b/website/content/rules/no-duplicate-fields.mdx
@@ -19,7 +19,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-fragment-cycles.mdx b/website/content/rules/no-fragment-cycles.mdx
similarity index 100%
rename from website/src/pages/rules/no-fragment-cycles.mdx
rename to website/content/rules/no-fragment-cycles.mdx
diff --git a/website/src/pages/rules/no-hashtag-description.mdx b/website/content/rules/no-hashtag-description.mdx
similarity index 100%
rename from website/src/pages/rules/no-hashtag-description.mdx
rename to website/content/rules/no-hashtag-description.mdx
diff --git a/website/src/pages/rules/no-one-place-fragments.mdx b/website/content/rules/no-one-place-fragments.mdx
similarity index 97%
rename from website/src/pages/rules/no-one-place-fragments.mdx
rename to website/content/rules/no-one-place-fragments.mdx
index c6b400cabbc..a119a6b2308 100644
--- a/website/src/pages/rules/no-one-place-fragments.mdx
+++ b/website/content/rules/no-one-place-fragments.mdx
@@ -11,7 +11,7 @@ description: 'Disallow fragments that are used only in one place.'
 - Requires GraphQL Operations: `true`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-root-type.mdx b/website/content/rules/no-root-type.mdx
similarity index 98%
rename from website/src/pages/rules/no-root-type.mdx
rename to website/content/rules/no-root-type.mdx
index f360576d8f2..6cc46449556 100644
--- a/website/src/pages/rules/no-root-type.mdx
+++ b/website/content/rules/no-root-type.mdx
@@ -14,7 +14,7 @@ description: 'Disallow using root types `mutation` and/or `subscription`.'
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-scalar-result-type-on-mutation.mdx b/website/content/rules/no-scalar-result-type-on-mutation.mdx
similarity index 97%
rename from website/src/pages/rules/no-scalar-result-type-on-mutation.mdx
rename to website/content/rules/no-scalar-result-type-on-mutation.mdx
index 702bdadf3aa..4c7725b4f7a 100644
--- a/website/src/pages/rules/no-scalar-result-type-on-mutation.mdx
+++ b/website/content/rules/no-scalar-result-type-on-mutation.mdx
@@ -14,7 +14,7 @@ description: 'Avoid scalar result type on mutation type to make sure to return a
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-typename-prefix.mdx b/website/content/rules/no-typename-prefix.mdx
similarity index 97%
rename from website/src/pages/rules/no-typename-prefix.mdx
rename to website/content/rules/no-typename-prefix.mdx
index c39208ca460..dcada3c9bf7 100644
--- a/website/src/pages/rules/no-typename-prefix.mdx
+++ b/website/content/rules/no-typename-prefix.mdx
@@ -18,7 +18,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-undefined-variables.mdx b/website/content/rules/no-undefined-variables.mdx
similarity index 100%
rename from website/src/pages/rules/no-undefined-variables.mdx
rename to website/content/rules/no-undefined-variables.mdx
diff --git a/website/src/pages/rules/no-unreachable-types.mdx b/website/content/rules/no-unreachable-types.mdx
similarity index 97%
rename from website/src/pages/rules/no-unreachable-types.mdx
rename to website/content/rules/no-unreachable-types.mdx
index 7a453455cd1..aba5bf3e28d 100644
--- a/website/src/pages/rules/no-unreachable-types.mdx
+++ b/website/content/rules/no-unreachable-types.mdx
@@ -17,7 +17,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-unused-fields.mdx b/website/content/rules/no-unused-fields.mdx
similarity index 99%
rename from website/src/pages/rules/no-unused-fields.mdx
rename to website/content/rules/no-unused-fields.mdx
index 9c114492d3d..472efac05a0 100644
--- a/website/src/pages/rules/no-unused-fields.mdx
+++ b/website/content/rules/no-unused-fields.mdx
@@ -14,7 +14,7 @@ description: 'Requires all fields to be used at some level by siblings operation
 - Requires GraphQL Operations: `true`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/no-unused-fragments.mdx b/website/content/rules/no-unused-fragments.mdx
similarity index 100%
rename from website/src/pages/rules/no-unused-fragments.mdx
rename to website/content/rules/no-unused-fragments.mdx
diff --git a/website/src/pages/rules/no-unused-variables.mdx b/website/content/rules/no-unused-variables.mdx
similarity index 100%
rename from website/src/pages/rules/no-unused-variables.mdx
rename to website/content/rules/no-unused-variables.mdx
diff --git a/website/src/pages/rules/one-field-subscriptions.mdx b/website/content/rules/one-field-subscriptions.mdx
similarity index 100%
rename from website/src/pages/rules/one-field-subscriptions.mdx
rename to website/content/rules/one-field-subscriptions.mdx
diff --git a/website/src/pages/rules/overlapping-fields-can-be-merged.mdx b/website/content/rules/overlapping-fields-can-be-merged.mdx
similarity index 100%
rename from website/src/pages/rules/overlapping-fields-can-be-merged.mdx
rename to website/content/rules/overlapping-fields-can-be-merged.mdx
diff --git a/website/src/pages/rules/possible-fragment-spread.mdx b/website/content/rules/possible-fragment-spread.mdx
similarity index 100%
rename from website/src/pages/rules/possible-fragment-spread.mdx
rename to website/content/rules/possible-fragment-spread.mdx
diff --git a/website/src/pages/rules/possible-type-extension.mdx b/website/content/rules/possible-type-extension.mdx
similarity index 100%
rename from website/src/pages/rules/possible-type-extension.mdx
rename to website/content/rules/possible-type-extension.mdx
diff --git a/website/src/pages/rules/prettier.md b/website/content/rules/prettier.md
similarity index 100%
rename from website/src/pages/rules/prettier.md
rename to website/content/rules/prettier.md
diff --git a/website/src/pages/rules/provided-required-arguments.mdx b/website/content/rules/provided-required-arguments.mdx
similarity index 100%
rename from website/src/pages/rules/provided-required-arguments.mdx
rename to website/content/rules/provided-required-arguments.mdx
diff --git a/website/src/pages/rules/relay-arguments.mdx b/website/content/rules/relay-arguments.mdx
similarity index 100%
rename from website/src/pages/rules/relay-arguments.mdx
rename to website/content/rules/relay-arguments.mdx
diff --git a/website/src/pages/rules/relay-connection-types.mdx b/website/content/rules/relay-connection-types.mdx
similarity index 100%
rename from website/src/pages/rules/relay-connection-types.mdx
rename to website/content/rules/relay-connection-types.mdx
diff --git a/website/src/pages/rules/relay-edge-types.mdx b/website/content/rules/relay-edge-types.mdx
similarity index 100%
rename from website/src/pages/rules/relay-edge-types.mdx
rename to website/content/rules/relay-edge-types.mdx
diff --git a/website/src/pages/rules/relay-page-info.mdx b/website/content/rules/relay-page-info.mdx
similarity index 100%
rename from website/src/pages/rules/relay-page-info.mdx
rename to website/content/rules/relay-page-info.mdx
diff --git a/website/src/pages/rules/require-deprecation-date.mdx b/website/content/rules/require-deprecation-date.mdx
similarity index 98%
rename from website/src/pages/rules/require-deprecation-date.mdx
rename to website/content/rules/require-deprecation-date.mdx
index 9052d8c0755..b6c2ef3923f 100644
--- a/website/src/pages/rules/require-deprecation-date.mdx
+++ b/website/content/rules/require-deprecation-date.mdx
@@ -16,7 +16,7 @@ description:
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/require-deprecation-reason.mdx b/website/content/rules/require-deprecation-reason.mdx
similarity index 98%
rename from website/src/pages/rules/require-deprecation-reason.mdx
rename to website/content/rules/require-deprecation-reason.mdx
index 5ff0ab85116..da498a42524 100644
--- a/website/src/pages/rules/require-deprecation-reason.mdx
+++ b/website/content/rules/require-deprecation-reason.mdx
@@ -14,7 +14,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/require-description.mdx b/website/content/rules/require-description.mdx
similarity index 99%
rename from website/src/pages/rules/require-description.mdx
rename to website/content/rules/require-description.mdx
index 281a33a55d4..70d65778547 100644
--- a/website/src/pages/rules/require-description.mdx
+++ b/website/content/rules/require-description.mdx
@@ -14,7 +14,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/require-field-of-type-query-in-mutation-result.mdx b/website/content/rules/require-field-of-type-query-in-mutation-result.mdx
similarity index 100%
rename from website/src/pages/rules/require-field-of-type-query-in-mutation-result.mdx
rename to website/content/rules/require-field-of-type-query-in-mutation-result.mdx
diff --git a/website/src/pages/rules/require-import-fragment.mdx b/website/content/rules/require-import-fragment.mdx
similarity index 98%
rename from website/src/pages/rules/require-import-fragment.mdx
rename to website/content/rules/require-import-fragment.mdx
index b4a432e6699..afd00181cb2 100644
--- a/website/src/pages/rules/require-import-fragment.mdx
+++ b/website/content/rules/require-import-fragment.mdx
@@ -14,7 +14,7 @@ description: 'Require fragments to be imported via an import expression.'
 - Requires GraphQL Operations: `true`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/require-nullable-fields-with-oneof.mdx b/website/content/rules/require-nullable-fields-with-oneof.mdx
similarity index 97%
rename from website/src/pages/rules/require-nullable-fields-with-oneof.mdx
rename to website/content/rules/require-nullable-fields-with-oneof.mdx
index a112f05d2d8..906f08c211c 100644
--- a/website/src/pages/rules/require-nullable-fields-with-oneof.mdx
+++ b/website/content/rules/require-nullable-fields-with-oneof.mdx
@@ -11,7 +11,7 @@ description: 'Require `input` or `type` fields to be non-nullable with `@oneOf`
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/require-nullable-result-in-root.mdx b/website/content/rules/require-nullable-result-in-root.mdx
similarity index 97%
rename from website/src/pages/rules/require-nullable-result-in-root.mdx
rename to website/content/rules/require-nullable-result-in-root.mdx
index 5ff8d399d9c..5fed6be84ad 100644
--- a/website/src/pages/rules/require-nullable-result-in-root.mdx
+++ b/website/content/rules/require-nullable-result-in-root.mdx
@@ -14,7 +14,7 @@ description: 'Require nullable fields in root types.'
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/require-selections.mdx b/website/content/rules/require-selections.mdx
similarity index 98%
rename from website/src/pages/rules/require-selections.mdx
rename to website/content/rules/require-selections.mdx
index 67c32a7f88a..f97596f01b9 100644
--- a/website/src/pages/rules/require-selections.mdx
+++ b/website/content/rules/require-selections.mdx
@@ -17,7 +17,7 @@ enables this rule.
 - Requires GraphQL Operations: `true`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/require-type-pattern-with-oneof.mdx b/website/content/rules/require-type-pattern-with-oneof.mdx
similarity index 97%
rename from website/src/pages/rules/require-type-pattern-with-oneof.mdx
rename to website/content/rules/require-type-pattern-with-oneof.mdx
index 480f1252b2a..3b31c26d82f 100644
--- a/website/src/pages/rules/require-type-pattern-with-oneof.mdx
+++ b/website/content/rules/require-type-pattern-with-oneof.mdx
@@ -11,7 +11,7 @@ description: 'Enforce types with `@oneOf` directive have `error` and `ok` fields
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/scalar-leafs.mdx b/website/content/rules/scalar-leafs.mdx
similarity index 100%
rename from website/src/pages/rules/scalar-leafs.mdx
rename to website/content/rules/scalar-leafs.mdx
diff --git a/website/src/pages/rules/selection-set-depth.mdx b/website/content/rules/selection-set-depth.mdx
similarity index 100%
rename from website/src/pages/rules/selection-set-depth.mdx
rename to website/content/rules/selection-set-depth.mdx
diff --git a/website/src/pages/rules/strict-id-in-types.mdx b/website/content/rules/strict-id-in-types.mdx
similarity index 99%
rename from website/src/pages/rules/strict-id-in-types.mdx
rename to website/content/rules/strict-id-in-types.mdx
index c98ad29a416..57328c68c8a 100644
--- a/website/src/pages/rules/strict-id-in-types.mdx
+++ b/website/content/rules/strict-id-in-types.mdx
@@ -16,7 +16,7 @@ enables this rule.
 - Requires GraphQL Operations: `false`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/unique-argument-names.mdx b/website/content/rules/unique-argument-names.mdx
similarity index 100%
rename from website/src/pages/rules/unique-argument-names.mdx
rename to website/content/rules/unique-argument-names.mdx
diff --git a/website/src/pages/rules/unique-directive-names-per-location.mdx b/website/content/rules/unique-directive-names-per-location.mdx
similarity index 100%
rename from website/src/pages/rules/unique-directive-names-per-location.mdx
rename to website/content/rules/unique-directive-names-per-location.mdx
diff --git a/website/src/pages/rules/unique-directive-names.mdx b/website/content/rules/unique-directive-names.mdx
similarity index 100%
rename from website/src/pages/rules/unique-directive-names.mdx
rename to website/content/rules/unique-directive-names.mdx
diff --git a/website/src/pages/rules/unique-enum-value-names.mdx b/website/content/rules/unique-enum-value-names.mdx
similarity index 100%
rename from website/src/pages/rules/unique-enum-value-names.mdx
rename to website/content/rules/unique-enum-value-names.mdx
diff --git a/website/src/pages/rules/unique-field-definition-names.mdx b/website/content/rules/unique-field-definition-names.mdx
similarity index 100%
rename from website/src/pages/rules/unique-field-definition-names.mdx
rename to website/content/rules/unique-field-definition-names.mdx
diff --git a/website/src/pages/rules/unique-fragment-name.mdx b/website/content/rules/unique-fragment-name.mdx
similarity index 97%
rename from website/src/pages/rules/unique-fragment-name.mdx
rename to website/content/rules/unique-fragment-name.mdx
index 738cafb9afb..0bc3ac3eaff 100644
--- a/website/src/pages/rules/unique-fragment-name.mdx
+++ b/website/content/rules/unique-fragment-name.mdx
@@ -14,7 +14,7 @@ enables this rule.
 - Requires GraphQL Operations: `true`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/unique-input-field-names.mdx b/website/content/rules/unique-input-field-names.mdx
similarity index 100%
rename from website/src/pages/rules/unique-input-field-names.mdx
rename to website/content/rules/unique-input-field-names.mdx
diff --git a/website/src/pages/rules/unique-operation-name.mdx b/website/content/rules/unique-operation-name.mdx
similarity index 97%
rename from website/src/pages/rules/unique-operation-name.mdx
rename to website/content/rules/unique-operation-name.mdx
index 794f016330c..4999ff0ed31 100644
--- a/website/src/pages/rules/unique-operation-name.mdx
+++ b/website/content/rules/unique-operation-name.mdx
@@ -14,7 +14,7 @@ enables this rule.
 - Requires GraphQL Operations: `true`
   [ℹ️](/docs/getting-started#extended-linting-rules-with-siblings-operations)
 
-{frontMatter.description}
+{metadata.description}
 
 ## Usage Examples
 
diff --git a/website/src/pages/rules/unique-operation-types.mdx b/website/content/rules/unique-operation-types.mdx
similarity index 100%
rename from website/src/pages/rules/unique-operation-types.mdx
rename to website/content/rules/unique-operation-types.mdx
diff --git a/website/src/pages/rules/unique-type-names.mdx b/website/content/rules/unique-type-names.mdx
similarity index 100%
rename from website/src/pages/rules/unique-type-names.mdx
rename to website/content/rules/unique-type-names.mdx
diff --git a/website/src/pages/rules/unique-variable-names.mdx b/website/content/rules/unique-variable-names.mdx
similarity index 100%
rename from website/src/pages/rules/unique-variable-names.mdx
rename to website/content/rules/unique-variable-names.mdx
diff --git a/website/src/pages/rules/value-literals-of-correct-type.mdx b/website/content/rules/value-literals-of-correct-type.mdx
similarity index 100%
rename from website/src/pages/rules/value-literals-of-correct-type.mdx
rename to website/content/rules/value-literals-of-correct-type.mdx
diff --git a/website/src/pages/rules/variables-are-input-types.mdx b/website/content/rules/variables-are-input-types.mdx
similarity index 100%
rename from website/src/pages/rules/variables-are-input-types.mdx
rename to website/content/rules/variables-are-input-types.mdx
diff --git a/website/src/pages/rules/variables-in-allowed-position.mdx b/website/content/rules/variables-in-allowed-position.mdx
similarity index 100%
rename from website/src/pages/rules/variables-in-allowed-position.mdx
rename to website/content/rules/variables-in-allowed-position.mdx
diff --git a/website/mdx-components.tsx b/website/mdx-components.tsx
new file mode 100644
index 00000000000..8d5990b86a2
--- /dev/null
+++ b/website/mdx-components.tsx
@@ -0,0 +1,91 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { addBasePath } from 'next/dist/client/add-base-path';
+import { Callout } from '@theguild/components';
+import {
+  compileMdx,
+  useMDXComponents as getDocsMDXComponents,
+  MDXRemote,
+} from '@theguild/components/server';
+
+const docsComponents = getDocsMDXComponents({
+  async OfficialExampleCallout({ gitFolder }) {
+    const user = 'dimaMachina';
+    const repo = 'graphql-eslint';
+    const branch = 'master';
+    const docsPath = `examples/${gitFolder}/`;
+    return (
+      <MDXRemote
+        compiledSource={await compileMdx(`
+> [!NOTE]
+>
+> Check out
+> [the official examples](https://github.com/${user}/${repo}/tree/${branch}/${docsPath})
+> for
+> [ESLint Flat Config](https://github.com/${user}/${repo}/blob/${branch}/${docsPath}eslint.config.js)
+> or
+> [ESLint Legacy Config](https://github.com/${user}/${repo}/blob/${branch}/${docsPath}/.eslintrc.cjs)
+> .`)}
+      />
+    );
+  },
+  WIP() {
+    return (
+      <Callout type="warning" emoji="🚧">
+        This page is under construction. Help us improve the content by submitting a PR.
+      </Callout>
+    );
+  },
+  async ESLintConfigs({ gitFolder }) {
+    const docsPath = path.join(process.cwd(), '..', 'examples', gitFolder);
+    return (
+      <MDXRemote
+        compiledSource={await compileMdx(`
+<OfficialExampleCallout gitFolder="${gitFolder}" />
+
+## ESLint Flat Config
+\`\`\`js filename="eslint.config.js"
+${await fs.readFile(`${docsPath}/eslint.config.js`)}
+\`\`\`
+
+## ESLint Legacy Config
+
+> [!WARNING]
+>
+> An eslintrc configuration file, is deprecated and support will be removed in ESLint v10.0.0. Migrate to an [\`eslint.config.js\` file](#eslint-flat-config)
+
+\`\`\`js filename=".eslintrc.cjs"
+${await fs.readFile(`${docsPath}/.eslintrc.cjs`)}
+\`\`\``)}
+      />
+    );
+  },
+  async source({ src, type, ...props }) {
+    if (!src) {
+      throw new Error('Must provide `src` prop');
+    }
+    if (src.startsWith('/')) {
+      const filePath = path.join(process.cwd(), 'public', src);
+      try {
+        await fs.access(filePath);
+      } catch (error) {
+        const relativePath = path.relative(process.cwd(), filePath);
+        if ((error as any).code === 'ENOENT') {
+          throw new Error(`File doesn't exist: ${relativePath}`);
+        }
+        throw new Error(`Error checking file: ${relativePath}`);
+      }
+    }
+
+    let ext = path.extname(src).slice(1); // remove dot;
+    if (ext === 'mov') {
+      ext = 'quicktime';
+    }
+    return <source {...props} src={addBasePath(src)} type={type || `video/${ext}`} />;
+  },
+});
+
+export const useMDXComponents: typeof getDocsMDXComponents = components => ({
+  ...docsComponents,
+  ...components,
+});
diff --git a/website/next-env.d.ts b/website/next-env.d.ts
index a4a7b3f5cfa..40c3d68096c 100644
--- a/website/next-env.d.ts
+++ b/website/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/website/next-sitemap.config.js b/website/next-sitemap.config.js
index a3759550f3e..09d0d6c0f4d 100644
--- a/website/next-sitemap.config.js
+++ b/website/next-sitemap.config.js
@@ -2,6 +2,5 @@
 export default {
   siteUrl: process.env.SITE_URL || 'https://the-guild.dev/graphql/eslint',
   generateIndexSitemap: false,
-  exclude: ['*/_meta'],
   output: 'export',
 };
diff --git a/website/next.config.js b/website/next.config.ts
similarity index 78%
rename from website/next.config.js
rename to website/next.config.ts
index 346977bc6cf..27c5591c276 100644
--- a/website/next.config.js
+++ b/website/next.config.ts
@@ -5,15 +5,10 @@ import { withGuildDocs } from '@theguild/components/next.config';
 
 const require = createRequire(import.meta.url);
 
-const sep = path.sep === '/' ? '/' : '\\\\';
-
-const ALLOWED_SVG_REGEX = new RegExp(`src${sep}icons${sep}.+\\.svg$`);
-
-/** @type {import("next").Config} */
 export default withGuildDocs({
   cleanDistDir: true,
   output: 'export',
-  redirects: () =>
+  redirects: async () =>
     Object.entries({
       '/': '/docs', // TODO: add landing page later
       '/docs/getting-started/parser': '/docs/parser',
@@ -48,20 +43,19 @@ export default withGuildDocs({
       }),
     );
 
-    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.('.svg'));
-    fileLoaderRule.exclude = ALLOWED_SVG_REGEX;
-
+    // rule.exclude doesn't work starting from Next.js 15
+    // @ts-expect-error -- fixme
+    const { test: _test, ...imageLoaderOptions } = config.module.rules.find(rule =>
+      rule.test?.test?.('.svg'),
+    );
     config.module.rules.push({
-      test: ALLOWED_SVG_REGEX,
-      use: [
+      test: /\.svg$/,
+      oneOf: [
         {
-          loader: '@svgr/webpack',
-          options: {
-            svgoConfig: {
-              plugins: ['removeXMLNS'],
-            },
-          },
+          resourceQuery: /svgr/,
+          use: ['@svgr/webpack'],
         },
+        imageLoaderOptions,
       ],
     });
     return config;
diff --git a/website/package.json b/website/package.json
index 484275787e1..e579b19896a 100644
--- a/website/package.json
+++ b/website/package.json
@@ -7,6 +7,7 @@
     "analyze": "ANALYZE=true yarn build",
     "build": "next build && next-sitemap",
     "dev": "next",
+    "postbuild": "pagefind --site .next/server/app --output-path out/_pagefind",
     "prebuild": "tsx ../scripts/generate-docs.ts",
     "start": "next start"
   },
@@ -15,7 +16,7 @@
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.0.0",
-    "@theguild/components": "7.2.7",
+    "@theguild/components": "8.0.0-alpha-20241120035725-2b8cadd078ebc2ace612021973b3e50944386052",
     "clsx": "^2.0.0",
     "graphql": "^16.9.0",
     "lodash.debounce": "^4.0.8",
@@ -34,6 +35,7 @@
     "@types/lodash.uniqwith": "4.5.9",
     "@types/node": "22.9.1",
     "@types/react": "18.3.12",
+    "pagefind": "1.1.1",
     "tailwindcss-radix": "3.0.5",
     "webpack": "^5.88.2"
   },
diff --git a/website/src/components/index-page.tsx b/website/src/components/index-page.tsx
deleted file mode 100644
index a8c8e9d3f12..00000000000
--- a/website/src/components/index-page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { ReactElement } from 'react';
-
-export function IndexPage(): ReactElement {
-  return <span />;
-}
diff --git a/website/src/pages/_app.tsx b/website/src/pages/_app.tsx
deleted file mode 100644
index 877822f4d1a..00000000000
--- a/website/src/pages/_app.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { NextAdapter } from 'next-query-params';
-import { QueryParamProvider } from 'use-query-params';
-import '@theguild/components/style.css';
-import { AppProps } from 'next/app';
-
-export default function App({ Component, pageProps }: AppProps) {
-  return (
-    <QueryParamProvider adapter={NextAdapter}>
-      <Component {...pageProps} />
-    </QueryParamProvider>
-  );
-}
diff --git a/website/src/pages/_meta.ts b/website/src/pages/_meta.ts
deleted file mode 100644
index 10c6e1213fe..00000000000
--- a/website/src/pages/_meta.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export default {
-  index: {
-    title: 'Home',
-    type: 'page',
-    display: 'hidden',
-    theme: {
-      layout: 'raw',
-    },
-  },
-  docs: {
-    title: 'Documentation',
-    type: 'page',
-  },
-  rules: {
-    title: 'Rules',
-    type: 'page',
-  },
-  play: {
-    title: 'Playground',
-    type: 'page',
-    theme: {
-      layout: 'raw',
-      footer: false,
-    },
-  },
-};
diff --git a/website/src/pages/docs/_meta.ts b/website/src/pages/docs/_meta.ts
deleted file mode 100644
index c11d271f122..00000000000
--- a/website/src/pages/docs/_meta.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-  index: '',
-  'getting-started': '',
-  'parser-options': '',
-  usage: '',
-  _1: {
-    type: 'separator',
-    title: 'Users',
-  },
-  configs: '',
-  'disabling-rules': '',
-  vscode: '',
-  _2: {
-    type: 'separator',
-    title: 'Developers',
-  },
-  parser: '',
-  'custom-rules': '',
-};
diff --git a/website/src/pages/docs/configs.mdx b/website/src/pages/docs/configs.mdx
deleted file mode 100644
index b2048c3447f..00000000000
--- a/website/src/pages/docs/configs.mdx
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: Shared Configs
----
-
-import { Callout } from '@theguild/components'
-
-# {frontMatter.title}
-
-## Schema Configs
-
-{/* prettier-ignore-start */}
-|Name|Description|
-|:-:|-|
-|[`flat/schema-recommended`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/schema-recommended.ts)|enables recommended rules for schema development|
-|[`flat/schema-all`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/schema-all.ts)|enables all rules for schema development, except for those that require `parserOptions.operations` option|
-|[`flat/schema-relay`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/schema-relay.ts)|enables rules from Relay specification for schema development|
-{/* prettier-ignore-end */}
-
-## Operations Configs
-
-{/* prettier-ignore-start */}
-|Name|Description|
-|:-:|-|
-|[`flat/operations-recommended`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/operations-recommended.ts) |enables recommended rules for consuming GraphQL (operations) development|
-|[`flat/operations-all`](https://github.com/B2o5T/graphql-eslint/tree/master/packages/plugin/src/configs/operations-all.ts)|enables all rules for consuming GraphQL (operations) development|
-{/* prettier-ignore-end */}
-
-<Callout type="warning">
-If you are in a project that develops the GraphQL schema, you'll need `schema` rules.
-
-If you are in a project that develops GraphQL operations (`query`/`mutation`/`subscription`), you'll
-need `operations` rules.
-
-If you are in a monorepo project, you probably need both sets of rules, see
-[example of configuration](https://github.com/B2o5T/graphql-eslint/tree/master/examples/monorepo/eslint.config.js).
-
-</Callout>
-
-## Config Usage
-
-For example, to enable the `flat/schema-recommended` config, in a new configuration object assign the `rules` field to the `rules` field from the associated config from
-`graphqlPlugin.configs` object.
-
-```diff filename="eslint.config.js"
-import graphqlPlugin from '@graphql-eslint/eslint-plugin'
-
-export default [
-  // ... other config
-  {
-    files: ['**/*.graphql'],
-    languageOptions: {
-      parser: graphqlPlugin.parser
-    },
-    plugins: {
-      '@graphql-eslint': graphqlPlugin
-    }
-  },
-+ {
-+   files: ['path-to-schema/**/*.graphql'],
-+   rules: graphqlPlugin.configs['flat/schema-recommended'].rules
-+ }
-]
-```
diff --git a/website/src/pages/docs/usage.mdx b/website/src/pages/docs/usage.mdx
deleted file mode 100644
index d922a50b479..00000000000
--- a/website/src/pages/docs/usage.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
-import AstroIcon from '@/icons/astro.svg'
-import GearIcon from '@/icons/gear.svg'
-import GraphQLIcon from '@/icons/graphql.svg'
-import HalfIcon from '@/icons/half.svg'
-import JSIcon from '@/icons/javascript.svg'
-import PrettierIcon from '@/icons/prettier.svg'
-import StackIcon from '@/icons/stack.svg'
-import SvelteIcon from '@/icons/svelte.svg'
-import VueIcon from '@/icons/vue.svg'
-import { Callout, Cards, Steps } from '@theguild/components'
-
-# Getting Started
-
-## Quickstart
-
-<Steps>
-
-### Installation
-
-Install the plugin package with your favourite package manager.
-
-```sh npm2yarn
-npm i -D @graphql-eslint/eslint-plugin
-```
-
-<Callout type="warning">
-  Make sure you have [`graphql`](https://npmjs.com/package/graphql) dependency in your project.
-</Callout>
-
-### Configuration
-
-Create a new
-[configuration object](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-objects)
-in your `eslint.config.js` file to setup `@graphql-eslint` plugin.
-
-```js filename="eslint.config.js"
-import graphqlPlugin from '@graphql-eslint/eslint-plugin'
-
-export default [
-  // ... other config
-  {
-    files: ['**/*.graphql'],
-    languageOptions: {
-      parser: graphqlPlugin.parser
-    },
-    plugins: {
-      '@graphql-eslint': graphqlPlugin
-    }
-  }
-]
-```
-
-</Steps>
-
-## Usage
-
-### Basic
-
-<Cards num={2} className="[&_svg]:shrink-0 [&_svg]:self-start">
-  <Cards.Card
-    icon={<GraphQLIcon />}
-    title="Usage with `.graphql` files"
-    href="/docs/usage/graphql"
-    arrow
-  />
-  <Cards.Card
-    icon={<JSIcon />}
-    title="Usage with code files `.js/.jsx`"
-    href="/docs/usage/js"
-    arrow
-  />
-  <Cards.Card
-    icon={<HalfIcon />}
-    title="Usage to lint both schema/documents"
-    href="/docs/usage/schema-and-documents"
-    arrow
-  />
-  <Cards.Card
-    icon={<StackIcon />}
-    title="Usage to lint different schemas"
-    href="/docs/usage/multiple-projects"
-    arrow
-  />
-  <Cards.Card
-    icon={<GearIcon />}
-    title="Programmatic usage"
-    href="/docs/usage/programmatic"
-    arrow
-  />
-</Cards>
-
-### Advanced
-
-<Cards num={2}>
-  <Cards.Card
-    icon={<SvelteIcon />}
-    title="Usage with `.svelte` files"
-    href="/docs/usage/svelte"
-    arrow
-  />
-  <Cards.Card icon={<VueIcon />} title="Usage with `.vue` files" href="/docs/usage/vue" arrow />
-  <Cards.Card
-    icon={<AstroIcon className="dark:fill-white" />}
-    title="Usage with `.astro` files"
-    href="/docs/usage/astro"
-    arrow
-  />
-  <Cards.Card
-    icon={<PrettierIcon />}
-    title="Usage with `eslint-plugin-prettier`"
-    href="/docs/usage/prettier"
-    arrow
-  />
-</Cards>
diff --git a/website/src/pages/docs/usage/_meta.ts b/website/src/pages/docs/usage/_meta.ts
deleted file mode 100644
index 7ca12e0d034..00000000000
--- a/website/src/pages/docs/usage/_meta.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-  _1: {
-    type: 'separator',
-    title: 'Basic',
-  },
-  graphql: '',
-  js: '',
-  'schema-and-documents': '',
-  'multiple-projects': '',
-  programmatic: '',
-  _2: {
-    type: 'separator',
-    title: 'Advanced',
-  },
-  svelte: '',
-  vue: '',
-  astro: '',
-  prettier: '',
-};
diff --git a/website/src/pages/docs/usage/astro.mdx b/website/src/pages/docs/usage/astro.mdx
deleted file mode 100644
index 9565aec151b..00000000000
--- a/website/src/pages/docs/usage/astro.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Callout } from '@theguild/components'
-
-# Usage with `.astro` files
-
-<Callout type="info">
-  GraphQL-ESLint should work with Astro files as well. Feel free to submit a PR with a [new
-  example](https://github.com/dimaMachina/graphql-eslint/tree/master/examples) in the GraphQL-ESLint
-  repository.
-</Callout>
diff --git a/website/src/pages/docs/usage/graphql.mdx b/website/src/pages/docs/usage/graphql.mdx
deleted file mode 100644
index f79c37d8eff..00000000000
--- a/website/src/pages/docs/usage/graphql.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Usage with `.graphql` files
-sidebarTitle: 🚧 GraphQL Files
----
-
-# Usage with `.graphql` files
-
-<WIP />
-
-<OfficialExampleCallout gitFolder="graphql-config" />
diff --git a/website/src/pages/docs/usage/js.mdx b/website/src/pages/docs/usage/js.mdx
deleted file mode 100644
index a18d877cd69..00000000000
--- a/website/src/pages/docs/usage/js.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
----
-title: Usage with code files `.js/.jsx`
-sidebarTitle: 🚧 Code Files
----
-
-# Usage with code files `.js/.jsx`
-
-<WIP />
-
-<OfficialExampleCallout gitFolder="code-file" />
diff --git a/website/src/pages/docs/usage/multiple-projects.mdx b/website/src/pages/docs/usage/multiple-projects.mdx
deleted file mode 100644
index 0ab12b6ae82..00000000000
--- a/website/src/pages/docs/usage/multiple-projects.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebarTitle: 🚧 Multiple Projects
----
-
-# Usage to lint different schemas
-
-<WIP />
-
-<OfficialExampleCallout gitFolder="multiple-projects-graphql-config" />
diff --git a/website/src/pages/docs/usage/prettier.mdx b/website/src/pages/docs/usage/prettier.mdx
deleted file mode 100644
index c21be92ed90..00000000000
--- a/website/src/pages/docs/usage/prettier.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebarTitle: 🚧 Prettier
----
-
-# Usage with `eslint-plugin-prettier`
-
-<WIP />
-
-<OfficialExampleCallout gitFolder="prettier" />
diff --git a/website/src/pages/docs/usage/programmatic.mdx b/website/src/pages/docs/usage/programmatic.mdx
deleted file mode 100644
index 88f6f69bc37..00000000000
--- a/website/src/pages/docs/usage/programmatic.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebarTitle: 🚧 Programmatic
----
-
-# Programmatic usage
-
-<WIP />
-
-<OfficialExampleCallout gitFolder="programmatic" />
diff --git a/website/src/pages/docs/usage/schema-and-documents.mdx b/website/src/pages/docs/usage/schema-and-documents.mdx
deleted file mode 100644
index b14da463efa..00000000000
--- a/website/src/pages/docs/usage/schema-and-documents.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebarTitle: 🚧 Schema and Documents
----
-
-# Usage to lint both schema/documents
-
-<WIP />
-
-<OfficialExampleCallout gitFolder="monorepo" />
diff --git a/website/src/pages/docs/usage/svelte.mdx b/website/src/pages/docs/usage/svelte.mdx
deleted file mode 100644
index a3cbeed0f19..00000000000
--- a/website/src/pages/docs/usage/svelte.mdx
+++ /dev/null
@@ -1,9 +0,0 @@
----
-sidebarTitle: 🚧 Svelte
----
-
-# Usage with `.svelte` files
-
-<WIP />
-
-<OfficialExampleCallout gitFolder="svelte-code-file" />
diff --git a/website/src/pages/index.mdx b/website/src/pages/index.mdx
deleted file mode 100644
index 590f7e18475..00000000000
--- a/website/src/pages/index.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Home
----
-
-export { IndexPage as default } from '../components/index-page'
diff --git a/website/src/pages/play.mdx b/website/src/pages/play.mdx
deleted file mode 100644
index 0b316c9da80..00000000000
--- a/website/src/pages/play.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Playground
----
-
-export { PlayPage as default } from '../components/play-page'
diff --git a/website/src/pages/rules/_meta.ts b/website/src/pages/rules/_meta.ts
deleted file mode 100644
index e61f8f57070..00000000000
--- a/website/src/pages/rules/_meta.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-export default {
-  index: { title: 'Overview', theme: { layout: 'full' } },
-  prettier: '`prettier` Rule',
-  'deprecated-rules': 'Deprecated Rules',
-  '---1': { title: 'Schema & Operations Rules', type: 'separator' },
-  alphabetize: '',
-  'known-argument-names': '',
-  'known-directives': '',
-  'known-type-names': '',
-  'naming-convention': '',
-  'provided-required-arguments': '',
-  'unique-directive-names-per-location': '',
-  '---2': { title: 'Schema Rules', type: 'separator' },
-  'description-style': '',
-  'input-name': '',
-  'lone-schema-definition': '',
-  'no-hashtag-description': '',
-  'no-root-type': '',
-  'no-scalar-result-type-on-mutation': '',
-  'no-typename-prefix': '',
-  'no-unreachable-types': '',
-  'no-unused-fields': '',
-  'possible-type-extension': '',
-  'relay-arguments': '',
-  'relay-connection-types': '',
-  'relay-edge-types': '',
-  'relay-page-info': '',
-  'require-deprecation-date': '',
-  'require-deprecation-reason': '',
-  'require-description': '',
-  'require-field-of-type-query-in-mutation-result': '',
-  'require-nullable-fields-with-oneof': '',
-  'require-nullable-result-in-root': '',
-  'require-type-pattern-with-oneof': '',
-  'strict-id-in-types': '',
-  'unique-directive-names': '',
-  'unique-enum-value-names': '',
-  'unique-field-definition-names': '',
-  'unique-operation-types': '',
-  'unique-type-names': '',
-  '---3': { title: 'Operations Rules', type: 'separator' },
-  'executable-definitions': '',
-  'fields-on-correct-type': '',
-  'fragments-on-composite-type': '',
-  'known-fragment-names': '',
-  'lone-anonymous-operation': '',
-  'lone-executable-definition': '',
-  'match-document-filename': '',
-  'no-anonymous-operations': '',
-  'no-deprecated': '',
-  'no-duplicate-fields': '',
-  'no-fragment-cycles': '',
-  'no-one-place-fragments': '',
-  'no-undefined-variables': '',
-  'no-unused-fragments': '',
-  'no-unused-variables': '',
-  'one-field-subscriptions': '',
-  'overlapping-fields-can-be-merged': '',
-  'possible-fragment-spread': '',
-  'require-import-fragment': '',
-  'require-selections': '',
-  'scalar-leafs': '',
-  'selection-set-depth': '',
-  'unique-argument-names': '',
-  'unique-fragment-name': '',
-  'unique-input-field-names': '',
-  'unique-operation-name': '',
-  'unique-variable-names': '',
-  'value-literals-of-correct-type': '',
-  'variables-are-input-types': '',
-  'variables-in-allowed-position': '',
-};
diff --git a/website/theme.config.tsx b/website/theme.config.tsx
deleted file mode 100644
index 0178435e8dd..00000000000
--- a/website/theme.config.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint sort-keys: error */
-import { ComponentProps } from 'react';
-import { Callout, defineConfig, PRODUCTS } from '@theguild/components';
-
-function Anchor({ children, ...props }: ComponentProps<'a'>) {
-  return (
-    <a
-      target="_blank"
-      rel="noreferrer"
-      className="_text-primary-600 _underline _decoration-from-font [text-underline-position:from-font]"
-      {...props}
-    >
-      {children}
-    </a>
-  );
-}
-
-export default defineConfig({
-  backgroundColor: {
-    dark: '15,17,20',
-    light: '250,250,250',
-  },
-  banner: {
-    content: (
-      <>
-        🚧 This is WIP documentation for v4 of the plugin. For v3 click{' '}
-        <Anchor href="https://074c6ee9.graphql-eslint.pages.dev/docs">here</Anchor>.
-      </>
-    ),
-    dismissible: false,
-  },
-  components: {
-    // @ts-expect-error -- fixme
-    OfficialExampleCallout({ gitFolder }: { gitFolder: string }) {
-      return (
-        <Callout type="info">
-          <strong>Note</strong>: Check out{' '}
-          <Anchor
-            href={`https://github.com/dimaMachina/graphql-eslint/tree/master/examples/${gitFolder}`}
-          >
-            the official examples
-          </Anchor>{' '}
-          for{' '}
-          <Anchor
-            href={`https://github.com/dimaMachina/graphql-eslint/blob/master/examples/${gitFolder}/eslint.config.js`}
-          >
-            ESLint Flat Config
-          </Anchor>{' '}
-          or{' '}
-          <Anchor
-            href={`https://github.com/dimaMachina/graphql-eslint/blob/master/examples/${gitFolder}/.eslintrc.cjs`}
-          >
-            ESLint Legacy Config
-          </Anchor>
-          .
-        </Callout>
-      );
-    },
-    WIP() {
-      return (
-        <Callout type="warning" emoji="🚧">
-          This page is under construction. Help us improve the content by submitting a PR.
-        </Callout>
-      );
-    },
-  },
-  description: PRODUCTS.ESLINT.title,
-  docsRepositoryBase: 'https://github.com/B2o5T/graphql-eslint/tree/master/website', // base URL for the docs repository
-  logo: <PRODUCTS.ESLINT.logo />,
-  websiteName: 'GraphQL-ESLint',
-});
diff --git a/website/tsconfig.json b/website/tsconfig.json
index 000fa475155..d39367855a1 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -16,9 +16,14 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"]
-    }
+      "@icons/*": ["app/icons/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
 }