Build out an interactive editor for the landing

Author: hasparus

pnpm-lock.yaml

@@ -21,7 +21,6 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
   const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false)
 
   const handleDrawerClick = useCallback(() => {
-    // todo: block scrolling on body
     setMobileDrawerOpen(prev => !prev)
   }, [])
 

src/app/conf/2025/components/navbar.tsx

@@ -18,7 +18,6 @@ export function RegisterToday({ className }: RegisterTodayProps) {
         className,
       )}
     >
-      {/* todo: placeholders work in preview, but they could use some improvement */}
       <NextImage
         src={speakerImage}
         alt="GraphQL Conference"

src/app/conf/2025/components/register-today/index.tsx

@@ -0,0 +1,21 @@
+export function HowItWorksListItem({
+  text,
+  code,
+  icon,
+}: {
+  text: React.ReactNode
+  code: React.ReactNode
+  icon?: React.ReactNode
+}) {
+  return (
+    <li className="flex flex-col [counter-increment:list-item]">
+      <div className="typography-body-md flex items-center bg-neu-0 py-4 pr-2 before:typography-body-sm before:mr-2 before:inline-flex before:size-5 before:translate-y-[-0.5px] before:items-center before:justify-center before:bg-neu-200 before:p-1 before:text-neu-800 before:content-[counter(list-item)] dark:before:bg-neu-50 md:p-6">
+        {text}
+        {icon}
+      </div>
+      <div className="mt-px flex-1 bg-neu-0 text-sm md:pl-2 md:pt-2 max-md:[&_code>span]:!pl-0 [&_pre]:border-none [&_pre]:ring-0">
+        {code}
+      </div>
+    </li>
+  )
+}

src/components/index-page/how-it-works.tsx

@@ -0,0 +1,50 @@
+import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import { CodeA, CodeB, CodeC } from "../../code-blocks"
+
+import { useRef } from "react"
+import { useInView } from "motion/react"
+import { HowItWorksListItem } from "./how-it-works-list-item"
+import dynamic from "next/dynamic"
+import { PlayButton } from "./play-button"
+
+const InteractiveEditor = dynamic(import("./interactive-editor"), {
+  ssr: false,
+})
+
+const TRY_IT_OUT_URL = "https://graphql.org/swapi-graphql"
+
+export function HowItWorks() {
+  const sectionRef = useRef<HTMLElement>(null)
+  const inView = useInView(sectionRef)
+
+  return (
+    <section ref={sectionRef} className="gql-container gql-section xl:py-20">
+      <SectionLabel className="mb-6">How it works</SectionLabel>
+      <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
+      <ol className="gql-radial-gradient list-none gap-px max-md:bg-gradient-to-r max-md:from-transparent max-md:via-neu-400 max-md:to-transparent lg:grid lg:grid-cols-3">
+        <HowItWorksListItem text="Describe your data" code={<CodeA />} />
+        {/* TODO: There's a blink on transition. We need to mount the new editor before unmounting the old one. */}
+        {inView ? (
+          <InteractiveEditor />
+        ) : (
+          <>
+            <HowItWorksListItem
+              text="Ask for what you want"
+              icon={<PlayButton />}
+              code={<CodeB />}
+            />
+            <HowItWorksListItem
+              text="Get predictable results"
+              code={<CodeC />}
+            />
+          </>
+        )}
+      </ol>
+
+      <Button className="mx-auto mt-8 w-fit lg:mt-16" href={TRY_IT_OUT_URL}>
+        Try GraphiQL
+      </Button>
+    </section>
+  )
+}

src/components/index-page/how-it-works/how-it-works-list-item.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from "react"
+import { graphql, GraphQLSchema } from "graphql"
+
+import { QueryEditor } from "@/components/interactive-code-block/query-editor"
+import { ResultViewer } from "@/components/interactive-code-block/result-viewer"
+
+import { HowItWorksListItem } from "./how-it-works-list-item"
+import { getVariableToType } from "../../interactive-code-block/get-variable-to-type"
+import { CodeBlockLabel } from "../../pre/code-block-label"
+import { VariableEditor } from "../../interactive-code-block/variable-editor"
+import { PlayButton } from "./play-button"
+import { run } from "node:test"
+
+const INITIAL_QUERY_TEXT = `{
+  project(name: "GraphQL") {
+    tagline
+  }
+}`
+
+const INITIAL_RESULTS_TEXT = `{
+  "project": {
+    "tagline": "A query language for APIs"
+  }
+}`
+
+const schema = new GraphQLSchema({
+  types: [],
+})
+
+export default function InteractiveEditor() {
+  const [query, setQuery] = useState(INITIAL_QUERY_TEXT)
+  const [results, setResults] = useState(INITIAL_RESULTS_TEXT)
+  const [variableTypes, setVariableTypes] = useState<Record<string, string>>({})
+  const [variables, setVariables] = useState("")
+  const editorQueryId = React.useRef(0)
+
+  async function runQuery(options: { manual: boolean }) {
+    editorQueryId.current++
+    const queryID = editorQueryId.current
+    try {
+      const result = await graphql({
+        schema: schema,
+        source: query,
+        variableValues: {},
+      })
+
+      let resultToSerialize: any = result
+      if (result.errors) {
+        if (!options.manual) {
+          // if the query was ran on edit, we display errors on the left side
+          // so we can just return instead of showing the resulting error
+          return
+        }
+
+        // Convert errors to serializable format
+        const serializedErrors = result.errors.map(error => ({
+          message: error.message,
+          locations: error.locations,
+          path: error.path,
+        }))
+        // Replace errors with serialized version for JSON.stringify
+        resultToSerialize = { ...result, errors: serializedErrors }
+      }
+
+      if (queryID === editorQueryId.current) {
+        setResults(JSON.stringify(resultToSerialize, null, 2))
+      }
+    } catch (error) {
+      if (queryID === editorQueryId.current) {
+        setResults(JSON.stringify(error, null, 2))
+      }
+    }
+  }
+
+  const editor = (
+    <QueryEditor
+      value={query}
+      schema={schema}
+      onEdit={() => {
+        setQuery(query)
+        runQuery({ manual: false })
+      }}
+      runQuery={() => {
+        setVariableTypes(getVariableToType(schema, query))
+        runQuery({ manual: true })
+      }}
+    />
+  )
+
+  return (
+    <>
+      <HowItWorksListItem
+        text="Ask for what you want"
+        icon={
+          <PlayButton
+            onClick={() => {
+              void runQuery({ manual: true })
+            }}
+          />
+        }
+        code={
+          Object.keys(variableTypes).length > 0 ? (
+            <div className="hasVariables flex flex-col">
+              {editor}
+              <div className="flex flex-col border-neu-200 dark:border-neu-50">
+                <CodeBlockLabel
+                  text="Variables"
+                  className="border-b border-neu-200 bg-[--cm-background] dark:border-neu-50"
+                />
+                <VariableEditor
+                  value={variables}
+                  variableToType={variableTypes}
+                  onEdit={setVariables}
+                  onRunQuery={() => void runQuery({ manual: false })}
+                />
+              </div>
+            </div>
+          ) : (
+            editor
+          )
+        }
+      />
+      <HowItWorksListItem
+        text="Get predictable results"
+        code={<ResultViewer value={results} />}
+      />
+    </>
+  )
+}