landing — interactive editor on landing

package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "repository": "graphql/graphql.github.io website",
   "private": true,
-  "packageManager": "[email protected].1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67",
+  "packageManager": "[email protected].0",
   "scripts": {
     "analyze": "ANALYZE=true next build",
     "build": "next build && next-image-export-optimizer",

public/images/next-image-export-optimizer-hashes.json

@@ -52,7 +52,7 @@
     "/annual-report-1.5ebe2b34.png": "HmbFFbaUL79rvnCKQ-2oRSLETM2FFh5v5dZxwWquuVM=",
     "/audience.f60c1c99.jpg": "pqx3E31xAO87mNEBlZKqCTX+LRiPlOuQThWQZf08A4A=",
     "/banner.10d4d66b.jpg": "9UJqBQ9RQu2sxDdJ5uaQr3crx2ZXrlOKMAmY82R8ZBA=",
-    "/blur-bean-cropped.62af4aa2.webp": "rdPhhzi5e+RLv-u0B-uPkp-eCYnyGlO84Yn0zCLLG4c=",
+    "/-cropped.62af4aa2.webp": "rdPhhzi5e+RLv-u0B-uPkp-eCYnyGlO84Yn0zCLLG4c=",
     "/blur-bean.21b930bd.webp": "eTUigN2JSyvccNXMnRwneZJ1YIeNnrVs3klseGSUa7o=",
     "/blur-bean.314cdc4a.webp": "YAysN2NZeYYWHNI8cFCabzsTifCknmbp-r+P1LAs1bE=",
     "/blur-bean.d5aa6d13.webp": "30xrtHSB6py7q6r2HxdKzm4gt8WoCiWRownamqyf3wM=",
@@ -189,4 +189,4 @@
     "/uri.387cb001.jpg": "kSx4huEjQidwIg6bF8UEWLiPACDl0nQ0aqxA2R2LIe0=",
     "/whiteboard.60eac8e3.jpg": "NodBqUaO+IanhuPaP9o5jCIe+gSrwyZ9TZ3QUdlWbBg=",
     "/workshop.e02e3501.jpg": "D9ON1z6-vKcjxv50gOH+5XS9HTEWUpc4UgIPW5OXHxE="
-}
+}

scripts/sync-sched/schedule-2025.json

@@ -4576,4 +4576,4 @@
     "event_subtype": "",
     "description": ""
   }
-]
+]

scripts/sync-sched/speakers.json

@@ -3471,4 +3471,4 @@
       "~syncedDetailsAt": 1756904595242
     }
   ]
-}
+}

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

@@ -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/register-today/index.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/testimonials/index.tsx

@@ -115,7 +115,9 @@ export function TestimonialAuthor({
           width={128}
           height={128}
           className="size-16 saturate-[.1] dark:opacity-90 xl:size-32"
-          fetchPriority="low"
+          // @ts-expect-error React doesn't know it exists yet, but @types/react do
+          fetchpriority="low"
+          loading="lazy"
         />
         <div className="absolute inset-0 z-[1] bg-pri-darker opacity-80 mix-blend-plus-lighter dark:mix-blend-color" />
         <Stripes />

src/components/index-page/hero/index.tsx

@@ -57,8 +57,8 @@ function HeroStripes() {
         image={logoBlurred}
         className="relative h-full bg-gradient-to-b from-pri-base to-pri-lighter opacity-0 transition-opacity duration-[1.5s] [mask-position:center_12%] [mask-size:110%] data-[loaded=true]:opacity-100 dark:to-pri-base sm:[mask-size:auto_300%] lg:[mask-position:7%_7%] lg:[mask-size:200%]"
         style={{
-          maskImage: `url(${logoBlurred.src})`,
-          WebkitMaskImage: `url(${logoBlurred.src})`,
+          maskImage: `var(--src)`,
+          WebkitMaskImage: `var(--src)`,
           maskRepeat: "no-repeat",
           WebkitMaskRepeat: "no-repeat",
         }}

src/components/index-page/how-it-works/how-it-works-list-item.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/[21px] [--cm-background:transparent] 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/index.tsx

@@ -0,0 +1,59 @@
+import { useRef } from "react"
+import { useInView } from "motion/react"
+import dynamic from "next/dynamic"
+
+import { Button } from "@/app/conf/_design-system/button"
+import { SectionLabel } from "@/app/conf/_design-system/section-label"
+import { CodeA, CodeB, CodeC } from "@/components/code-blocks"
+
+import { HowItWorksListItem } from "./how-it-works-list-item"
+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)
+  // todo: we could technically consider loading the chunk on hover or focus,
+  // just so people scrolling through the page don't download CodeMirror
+  const inView = useInView(sectionRef)
+
+  return (
+    <section
+      ref={sectionRef}
+      className="gql-container gql-section xl:py-20"
+      // this is mostly for Playwright, we're not getting a hydration warning normally
+      suppressHydrationWarning
+    >
+      <SectionLabel className="mb-6">How it works</SectionLabel>
+      <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
+      <div className="relative">
+        <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 />} />
+          <HowItWorksListItem
+            text="Ask for what you want"
+            icon={<PlayButton disabled={inView} />}
+            code={<CodeB />}
+          />
+          <HowItWorksListItem text="Get predictable results" code={<CodeC />} />
+        </ol>
+        {inView && (
+          <ol
+            // this is rendered *on top* of the static version to avoid layout shift
+            className="absolute inset-0 list-none gap-px lg:grid lg:grid-cols-3"
+          >
+            <div className="pointer-events-none" />
+            <InteractiveEditor />
+          </ol>
+        )}
+      </div>
+
+      <Button className="mx-auto mt-8 w-fit lg:mt-16" href={TRY_IT_OUT_URL}>
+        Try GraphiQL
+      </Button>
+    </section>
+  )
+}