feedback from Benjie

Author: sarahxsanders

.eslintrc.cjs

@@ -1,7 +1,7 @@
 /* eslint-env node */
 
-const CODE_EXT = "js,jsx,cjs,mjs,ts,tsx,cts,mts";
-const MARKDOWN_EXT = "md,mdx";
+const CODE_EXT = "js,jsx,cjs,mjs,ts,tsx,cts,mts"
+const MARKDOWN_EXT = "md,mdx"
 
 module.exports = {
   root: true,
@@ -78,7 +78,7 @@ module.exports = {
         "@graphql-eslint/no-unused-fragments": "warn",
         "@graphql-eslint/no-duplicate-fragment-names": "error",
         "@graphql-eslint/no-undefined-variables": "error",
-        "@graphql-eslint/unique-variable-names": "error"
+        "@graphql-eslint/unique-variable-names": "error",
       },
     },
     {
@@ -98,4 +98,4 @@ module.exports = {
       },
     },
   ],
-};
+}

.github/workflows/docs-validation.yml

@@ -31,21 +31,22 @@ jobs:
       - name: Check links
         run: lychee --verbose --no-progress './src/pages/learn/**/*.mdx' --base https://graphql.org
 
-  code-validate:
-    name: Code snippet and GraphQL validation
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
+code-validate:
+  name: Code snippet and GraphQL validation
+  runs-on: ubuntu-latest
+  steps:
+    - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
-        with:
-          node-version: "20"
+    - uses: actions/setup-node@v4
+      with:
+        node-version: "20"
+        cache: "pnpm"
 
-      - name: Install dependencies
-        run: npm ci
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
 
-      - name: Run validation w/ annotations
-        run: npm run lint:docs:ci
+    - name: Run validation w/ annotations
+      run: pnpm lint:docs:ci
 
-      - name: Validate code snippets
-        run: npm run validate:snippets
+    - name: Validate code snippets
+      run: pnpm validate:snippets

scripts/validate-snippets.js

@@ -1,12 +1,18 @@
 #!/usr/bin/env node
 
 import fs from "node:fs"
+import path from "node:path"
 import glob from "glob"
 import { parse } from "graphql"
 import chalk from "chalk"
+import { fileURLToPath } from "node:url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const projectRoot = path.resolve(__dirname, "../")
 
 const MDX_GLOB = "./src/pages/learn/**/*.mdx"
-const CODE_BLOCK_REGEX = /```(\w+)\s*\r?\n([\s\S]*?)\r?\n```/g
+const CODE_BLOCK_REGEX = /^(`{3,})(\w+)\s*\n([\s\S]*?)\r?\n\1$/gm
 const IGNORE_COMMENT = "snippet-ignore"
 
 let totalFiles = 0
@@ -49,7 +55,7 @@ function extractSnippets(content, filePath) {
   let match
 
   while ((match = CODE_BLOCK_REGEX.exec(content)) !== null) {
-    const [fullMatch, lang, code] = match
+    const [fullMatch, openingBackticks, lang, code] = match
     const beforeBlock = content.slice(0, match.index)
     const lineNumber = beforeBlock.split(/\r?\n/).length
 
@@ -93,9 +99,9 @@ async function validateSnippet(snippet) {
 }
 
 async function main() {
-  console.log(`Validating code snippets in: ${MDX_GLOB}`)
+  console.log(`Validating code snippets in: ${projectRoot}/${MDX_GLOB}`)
 
-  const files = glob.sync(MDX_GLOB)
+  const files = glob.sync(MDX_GLOB, { cwd: projectRoot })
   totalFiles = files.length
 
   if (totalFiles === 0) {

src/pages/learn/response.mdx

@@ -41,9 +41,10 @@ In addition to the `data` key, the GraphQL specification outlines how [errors](h
 
 Request errors typically occur because the client made a mistake. For example, there may be a _syntax error_ in the document, such as a missing bracket or the use of an unknown root operation type keyword:
 
+<!-- snippet-ignore -->
 ```graphql
 # { "graphiql": true }
-mutation { 
+operation { 
   updateHumanName(id: "1000", name: "Luke Starkiller" ) {
     id
     name