landing — interactive editor on landing

[hasparus]

Description

Martin proposed making the "How it Works" code samples interactive. 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.

To-do

• Write a small GraphQL Schema for this example
• 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).
• Add a test for this

[hasparus]

Issue: This blink is happening because we switch between the elements and the background (the blurry thing) that we use for the smooth gradient borders is visible. We should use a transition group or straight up position absolute the editor.

Screen.Recording.2025-09-02.at.16.13.49.mov

In this video you might also notice that the color of " characters and name is different between shiki and lezer.