[website] rename schema and documents to schema and operations (#2784)

Author: dimaMachina

website/app/_meta.global.ts

@@ -38,7 +38,7 @@ export default {
           },
           graphql: '',
           js: '',
-          'schema-and-documents': '',
+          'schema-and-operations': '',
           'multiple-projects': '',
           programmatic: '',
           _2: {

…tent/docs/usage/schema-and-documents.mdx …ent/docs/usage/schema-and-operations.mdxwebsite/content/docs/usage/schema-and-documents.mdx renamed to website/content/docs/usage/schema-and-operations.mdx website/content/docs/usage/schema-and-documents.mdx renamed to website/content/docs/usage/schema-and-operations.mdx

@@ -1,8 +1,8 @@
 ---
-sidebarTitle: Schema and Documents
+sidebarTitle: Schema and Operations
 icon: HalfIcon
 ---
 
-# Usage to lint both schema/documents
+# Usage to lint both schema/operations
 
 <ESLintConfigs gitFolder="monorepo" graphqlConfigFile="graphql.config.js" />

website/content/docs/usage/vue.mdx

@@ -5,72 +5,4 @@ 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.
-
-> [!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
-
-Add the following configuration to your `eslint.config.js` file to setup `@graphql-eslint` plugin.
-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`).
-
-> [!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'
-
-export default [
-  {
-    // NOTE: Order matters! This has to happen FIRST, before any block that
-    // includes the Vue parser (including e.g. recommended Vue ESLint rules).
-    // It also has to be before the .graphql block, below
-    //
-    // Extract GraphQL from files for linting -- this creates .graphql files
-    // that are then linted below
-    //
-    // graphql-eslint scans all files (using the processor listed) and outputs
-    // an intermediate file with the extracted GraphQL. That intermediate file
-    // is then linted, generating the errors we see. The intermediate file has
-    // a fixed .graphql extension, so you need to include that extension below
-    // or these files won't be linted.
-    files: ['**/*.js', '**/*.ts', '**/*.vue'],
-    processor: graphqlPlugin.processor
-    // NOTE: While you CAN put rules here to affect JS/TS/Vue files, those
-    // rules won't affect GraphQL. To modify rules that effect GraphQL inside
-    // these files, add those to the block for .graphql files, below.
-  },
-  // ...other config
-  {
-    // Lint all GraphQL files, including the intermediate ones above. If you
-    // want to tune the rules that appear in your files, even Vue/JS/TS files,
-    // put those rule changes HERE
-    files: ['**/*.graphql'], // Add .gql extension if you use that
-    languageOptions: {
-      parser: graphqlPlugin.parser
-    },
-
-    // Any rule overrides for GraphQL go HERE. For example, to enable
-    // recommended operations rules
-    plugins: { '@graphql-eslint': graphqlPlugin },
-    rules: {
-      ...graphqlESLint.configs['flat/operations-recommended'].rules
-      // Can also override the recommended rules here, e.g.:
-      // "@graphql-eslint/naming-convention": ["off"],
-    }
-  }
-]
-```
+<ESLintConfigs gitFolder="vue-code-file" />

website/mdx-components.tsx

@@ -8,36 +8,13 @@ import {
 } from '@theguild/components/server';
 
 const docsComponents = getDocsMDXComponents({
-  async OfficialExampleCallout({ gitFolder }) {
+  async ESLintConfigs({ gitFolder, graphqlConfigFile = '' }) {
     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, graphqlConfigFile = '' }) {
     const docsPath = path.join(process.cwd(), '..', 'examples', gitFolder);
     const { ext } = path.parse(graphqlConfigFile);
+
     const graphqlConfig =
       graphqlConfigFile &&
       `
@@ -47,10 +24,20 @@ const docsComponents = getDocsMDXComponents({
 ${(await fs.readFile(`${docsPath}/${graphqlConfigFile}`, 'utf8')).trim()}
 \`\`\`
 `;
+
     return (
       <MDXRemote
         compiledSource={await compileMdx(`
-<OfficialExampleCallout gitFolder="${gitFolder}" />
+> [!NOTE]
+>
+> Check out
+> [the official examples](https://github.com/${user}/${repo}/tree/${branch}/examples/${gitFolder})
+> for
+> [ESLint Flat Config](https://github.com/${user}/${repo}/blob/${branch}/examples/${gitFolder}/eslint.config.js)
+> or
+> [ESLint Legacy Config](https://github.com/${user}/${repo}/blob/${branch}/examples/${gitFolder}/.eslintrc.cjs)
+> .
+
 ${graphqlConfig}
 ## ESLint Flat Config
 \`\`\`js filename="eslint.config.js"