new landing page (graphql#2078)

* Start working on Hero, upgrade Nextra to 3.3.1

* Work around _meta validation

* Make the hero look like on designs

* Format

* wip

* style the navbar more

* Fight HeadlessUI

* Get rid of ts-expect-error

* Update lockfile

* Format

* Comment out the banner for now

* Add logos of companies using GraphQL

* Rename gql-conf-section and gql-conf-container

* Add missing pointer-events-none to navbar

* Lay out the new TrustedBy section

* Add a divider between logos

* Tweak the logos for mobile and dark mode

* Tweak Trusted By section styles

* Change index page background color

* Restyle how-it-works section

* Improve mobile styles in HowItWorks

* Remove external link arrow from Spec link in Navbar

* Draft Proven Solution section

* Use proper blur blob (wrong stripes colors tho)

* Tweak navbar blur

* Fix Proven Solution mobile styles

* Tweak paddings

* Tweak opacity

* Add a TODO

* Add Five Pillars section

* Tweak styles

* Add icons, tweak the medium viewport styles

* Rename a variable

* Add Powered by the Community card

* Add GraphQL Advantages section

* Add Precision figure

* WIP

* Eject Pre component

* Tweak colors, fix bugs

* Change colors based on design's feedback

* Add OptimizationFigure

* wip

* Add extra padding

* Improve the landing

* wip

* Scroll in Consistency figure

* Tweak colors

* Remove paddings on narrow mobiles

* Add Integration figure, improve padding

* Fix the width for mobiles

* Unify line height in Precision section

* Format

* Add Quotes From Industry section

* Add Join the Community section

* wip

* Remove old Bring Your Own Code version, tweak styles

* Tweak the width of the arrow box

* Fix type error

* Hide "Join" on small screens

* wip

* WIP

* Add Data Colocation section

* Add .gql-all-anchors-focusable

* Unify focus styles

* Format

* Mark sectors

* wip

* Count curlies

* wip

* wip

* Add missing Webkit prefixes for older Chrome.

* wip

* simplify

* wip

* wip

* Animate wires

* Add a TODO comment

* Bugfix mobile Data Colocation section

* Remove redundant comment

* Make the step transition nice

* wip

* wip

* Okay, this is pretty good

* Tweak styles

* Change gql keyword color

* Update Search input and Kbd styles

* Run format

* Revert to old footer links, simplify the code

* Tweak the navbar link styles

* Polish the footer links

* Improve data allocation layout for tablets

* Highlight query

* wip (transition between 2 and 3 still bad)

* wip

* Fix Safari

* Rotate queries in X axis

I had to do it because of a bug with opacity and
backdrop-filter.

* Fix styles

* Make the What is GraphQL illustration taller on mobiles

* Fix sponsor logos on Safari

* Fix social icon colors if user localStorage color scheme doesn't match system color scheme

* Fix double spins (again)

* Disable overscroll-y in Safari to make the hero look less weird

* Fix Nicolai's pic, remove scroll-snap

* Add shrink-0 to fix Safari

* Format

* Tweak mobile styles

* Fix lint error (bad class)

* Add a subtle background to Hero

* Update copy and add shrink-0

* Speed up the animation by 2x

* Bump the stroke width

* Add serve:build script

* Change h4 to h3 to fix the order

* Add aria-label to company logos

* Add fetchPriority to ImageLoaded and use it in Hero

* Move hero to a directory

* Add aria-label to social icons

* Add aria-label, change blur logo to webp

* Add description

* Add longer texts with sr-only

* Inherit tabIndex in Pre

* Run image export optimizer

* post-audit improvements

* Add fetchpriority=low

* Add fetchPriority=low to testimonials images

* Add bundle analyzer

* Add meta description

* Remove redundant markdown parser code

* Add Playwright

* Add tests for MiniGraphiQL

* Move Playwright to optional dependencies

* Fix links

* Actually, these redirects make sense

* Update lockfile

* add Curtain

* Fix ProductivityFigure

* wip

* wip

* Add UseCases

* Improve DataColocation on very small phones

* Tweak mobile UI

* Iterate on wording

* Use dynamic for MiniGraphiQL

* Add missing role tab

* Fix roles not contained

* Add aria-hidden to video

* Add link rel=preload to Hero

* Fix type error

* Fight aria-role, get rid of world wrap button

* Remove aria-selected fro mobile tab

* Add wide browserslist to package.json

* Fix indentation in docs-validation.yml

* Format

* Format

* Switch out @theguild/remark-mermaid to for rehype-mermaid

* Expose Heading hooks from nextra-theme-docs

* Customize MDX links and headings

* Support Tailwind text opacity in typography-link

* fixup! Expose Heading hooks from nextra-theme-docs

* fixup! Expose Heading hooks from nextra-theme-docs

* Style Mermaid charts with CSS Custom Properties

* Fix search styles

* install Chromium Headless Shell in builds

* Install libnspr4 and libgbm1 in builds

* Update lockfile

* patch mermaid-isomorphic

* Patch again

* Update flowchart padding

* Remove old comment

* Remove duplicate border

* Clarify GraphQL works at "any" scale

Co-authored-by: Benjie <[email protected]>

* validated queries -> validated requests

Co-authored-by: Benjie <[email protected]>

* new landing — vertical diagram (#43)

* Extract edges and boxes out from the components.

* Make diagram boxes and edges responsive

* Make the diagram less tall

* Animate client edge on small screens

* Animate server edges on small screens

* Remove next step on background click per Uri's request

* Rotate query sideways on small screens

* *the* GraphQL spec

Co-authored-by: Benjie <[email protected]>

* Change "Reduce dependencies" to "Reduce communication overhead"

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

* new landing — try it out link (#44)

* Add [Try it out] link to the Hero

* Add redirect from /docs to /learn

* Ignore Lucide in autoImport

* Add scroll-into-view-if-needed

* Eject Sidebar from Nextra

* Replace Nextra MDX Wrapper and restyle TOC

* Fix type error in a patch

* Add Matteo's quote

* Fix a bad link

* Update src/components/index-page/use-cases/index.tsx

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

* Update src/components/index-page/powered-by-community.tsx

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

* Update src/components/index-page/trusted-by/index.tsx

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

* Tweak the AI-powered app description

* Add Uri's quote

* Use shorter copy in Hero

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

* format

* Add Benjie's quote

* Shorten Benjie's quote even more

* Change ! to .

* learn — new interactive code blocks (#47)

* Render MiniGraphiQL with `graphiql` string in node.meta

* Don't validate in Marked: not its responsibility

* Change interactive code snippet colors

* Remove global .miniGraphiQL class

* Refactor MiniGraphiQL to separate files

* Add a TODO comment

* Run Playwright on CI

* wip

* color codemirrors properly

* Style codemirrors properly

* Upgrade pnpm from 9.15.9 to 10.15.0

* Update 2025 conference schedule and speaker details

* Improve syntax highlighting for comments and diffs

* Remove focus outline

* Extract CodeBlockLabel

* Remove unused marked dependency

* Rename `marked` to `interactive-code-block`

* Update codemirror styles

* Allow running esbuild builds

* Remove duplicate image

* Format

* Change syntax theme names to avoid a bug

* Fix heights and properly chain handlers

* Fix tests for new editor

* Run Playwright on CI

* Use the same colors for VariableEditor

* Use the same font for interactive code blocks

* Match the coloring on t.separator [,:] between Lezer and Shiki

* Remove duplicate t.separator

* Add iframe-resizer and sharp to onlyBuiltDependencies

* Start running lychee and snippet validation again

* Add JSDoc types to validate-snippets.js

* Remove a validation that never worked (we'll add something else later)

* fix a broken link to FAQ

* Improve testimonial images

---------

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

@@ -3,7 +3,7 @@ name: Lint and check formatting
 on: pull_request
 
 jobs:
-  prettier-check:
+  check:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -22,3 +22,22 @@ jobs:
 
       - name: Run Prettier Check
         run: pnpm format:check
+
+      - name: Validate code snippets
+        run: pnpm validate:snippets
+
+        # per the docs: "caching browser binaries is not recommended,
+        # since the amount of time it takes to restore the cache is
+        # comparable to the time it takes to download the binaries"
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Run Playwright tests
+        run: npx playwright test
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.github/workflows/docs-validation.yml

@@ -63,3 +63,5 @@ public/sitemap.xml
 out/
 
 tsconfig.tsbuildinfo
+
+playwright-report/

.gitignore

@@ -9,5 +9,11 @@
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "tailwindCSS.classFunctions": ["clsx"]
+  "tailwindCSS.classFunctions": ["clsx"],
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+  "typescript.preferences.autoImportFileExcludePatterns": [
+    "**/node_modules/lucide-react"
+  ]
 }