landing — interactive editor (#2113)

## Description

@martinbonnin proposed making the "How it Works" code samples
interactive on Slack.

We already had CodeMirror, and I already needed to restyle it for the
docs, so it required just a new schema, some refactoring and shuffling
things around.

I think the idea makes sense, and lets the user experience GraphQL
immediately. Even if they're non-programmers, they can maybe get a feel
how the data flows and what the experience is like.

I changed the section CTA to state "Try GraphiQL", because we're already
trying it out live.

<img width="1377" height="359" alt="image"
src="https://github.com/user-attachments/assets/77bcd251-475c-4aaf-a2c6-9cb6b8e0caad"
/>

### To-do

- [x] Write a small GraphQL Schema for this example
- [x] Double check if next/dynamic worked and we don't have CodeMirror
in the main bundle
- (I actually wrote `dynamic(import` instead of `dynamic(() => import`
initially so it's good I double checked).
- [x] Add a test for this

---------

Co-authored-by: Benjie <[email protected]>
Co-authored-by: Jeff Auriemma <[email protected]>
Co-authored-by: Martin Bonnin <[email protected]>

Author: 4 people

.github/workflows/check.yml

@@ -49,6 +49,9 @@ jobs:
       - name: Run Playwright tests
         run: ./node_modules/.bin/playwright test
 
+      - name: Run unit tests
+        run: pnpm test:unit
+
       - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:

next.config.js

@@ -35,6 +35,7 @@ const ALLOWED_SVG_REGEX = new RegExp(`${sep}icons${sep}.+\\.svg$`)
  * @type {import('next').NextConfig}
  */
 const config = {
+  output: undefined,
   // reactStrictMode: true, provoke duplicated codemirror editors
   webpack(config) {
     // #region MDX

package.json

@@ -15,7 +15,7 @@
     "lint:docs": "eslint --ignore-path .gitignore src/pages/learn --format stylish",
     "lint:docs:ci": "eslint --ignore-path .gitignore src/pages/learn --format eslint-formatter-github",
     "postbuild": "next-sitemap",
-    "prebuild": "tsx scripts/get-github-info",
+    "prebuild": "tsx scripts/get-github-info && tsx scripts/sync-landing-schema/src/index.ts",
     "start": "next start",
     "test": "playwright test && pnpm test:unit",
     "test:e2e": "playwright test",
@@ -25,17 +25,17 @@
   },
   "dependencies": {
     "@base-ui-components/react": "1.0.0-beta.4",
-    "@codemirror/autocomplete": "^6.18.6",
-    "@codemirror/commands": "^6.3.3",
-    "@codemirror/language": "^6.10.0",
-    "@codemirror/lint": "^6.8.5",
-    "@codemirror/state": "^6.4.0",
-    "@codemirror/view": "^6.24.0",
-    "@graphql-tools/schema": "10.0.26",
+    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/commands": "6.3.3",
+    "@codemirror/language": "6.10.0",
+    "@codemirror/lint": "6.8.5",
+    "@codemirror/state": "6.4.0",
+    "@codemirror/view": "6.24.0",
+    "@graphql-tools/schema": "10.0.25",
     "@hasparus/lezer-json-shikified": "1.1.3",
     "@headlessui/react": "^2.2.4",
     "@igorkowalczyk/is-browser": "^5.1.0",
-    "@lezer/highlight": "^1.2.1",
+    "@lezer/highlight": "1.2.1",
     "@next/bundle-analyzer": "^15.4.5",
     "@plaiceholder/next": "^3.0.0",
     "@sparticuz/chromium": "^138.0.2",
@@ -92,6 +92,7 @@
   },
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "4.4.0",
+    "@graphql-eslint/parser": "^0.1.0",
     "@next/eslint-plugin-next": "^15.3.3",
     "@playwright/test": "^1.54.2",
     "@svgr/webpack": "^8.1.0",
@@ -140,6 +141,16 @@
       "esbuild",
       "iframe-resizer",
       "sharp"
-    ]
+    ],
+    "overrides": {
+      "@lezer/highlight": "1.2.1",
+      "@lezer/common": "1.2.3",
+      "@codemirror/autocomplete": "6.18.6",
+      "@codemirror/commands": "6.3.3",
+      "@codemirror/language": "6.10.0",
+      "@codemirror/lint": "6.8.5",
+      "@codemirror/state": "6.4.0",
+      "@codemirror/view": "6.24.0"
+    }
   }
 }