From 828d26800b113f751ed8dc2b43568bd71ba45eac Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Sat, 19 Jul 2025 12:44:25 +0200 Subject: [PATCH 01/18] Add GraphQL Advantages section --- .../index-page/graphql-advantages/index.tsx | 112 ++++++++++++++++++ src/components/index-page/index.tsx | 2 + 2 files changed, 114 insertions(+) create mode 100644 src/components/index-page/graphql-advantages/index.tsx diff --git a/src/components/index-page/graphql-advantages/index.tsx b/src/components/index-page/graphql-advantages/index.tsx new file mode 100644 index 0000000000..bd7d38514e --- /dev/null +++ b/src/components/index-page/graphql-advantages/index.tsx @@ -0,0 +1,112 @@ +import { Button } from "@/app/conf/_design-system/button" +import { SectionLabel } from "@/app/conf/_design-system/section-label" +import { ReactNode } from "react" + +export function GraphQLAdvantages() { + return ( +
+
+ GraphQL advantages +
+ + Learn GraphQL + + } + /> + + Read the docs + + } + /> + + Explore GraphQL tools + + } + /> + + Learn more about GraphQL schemas + + } + /> + + See more in docs + + } + /> + + Learn more about this + + } + /> +
+
+
+ ) +} + +function Subsection({ + name, + bigText, + cta, + figure, + text, +}: { + name: string + bigText: ReactNode + cta: ReactNode + figure: ReactNode + text: ReactNode +}) { + return ( +
+

+ {name} +

+ + {bigText} + +
{figure}
+

{text}

+ {cta} +
+ ) +} diff --git a/src/components/index-page/index.tsx b/src/components/index-page/index.tsx index 4a9c67a052..7bddb036b7 100644 --- a/src/components/index-page/index.tsx +++ b/src/components/index-page/index.tsx @@ -11,6 +11,7 @@ import { HowItWorks } from "./how-it-works" import { ProvenSolution } from "./proven-solution" import { FivePillars } from "./five-pillars" import { PoweredByCommunity } from "./powered-by-community" +import { GraphQLAdvantages } from "./graphql-advantages" export function IndexPage() { return ( @@ -21,6 +22,7 @@ export function IndexPage() { +

A query language for your API

From 8466f87f814f4adb70394eae4afaf73e210f4246 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 21 Jul 2025 14:48:35 +0200 Subject: [PATCH 02/18] Add Precision figure --- src/components/code-blocks/index.tsx | 3 - .../index-page/graphql-advantages/index.tsx | 8 +- .../precision.module.css} | 0 .../precision.tsx} | 96 +++++++++---------- src/components/index-page/index.tsx | 1 - 5 files changed, 52 insertions(+), 56 deletions(-) rename src/components/index-page/{predictable-results/index.module.css => graphql-advantages/precision.module.css} (100%) rename src/components/index-page/{predictable-results/index.tsx => graphql-advantages/precision.tsx} (52%) diff --git a/src/components/code-blocks/index.tsx b/src/components/code-blocks/index.tsx index b130879a76..64e3fb55fc 100644 --- a/src/components/code-blocks/index.tsx +++ b/src/components/code-blocks/index.tsx @@ -49,6 +49,3 @@ export const QueryHeroFriends = () => ( export const ResponseHeroFriends = () => ( <_ResponseHeroFriends components={components} /> ) -export const PredictableResult = () => ( - <_PredictableResult components={components} /> -) diff --git a/src/components/index-page/graphql-advantages/index.tsx b/src/components/index-page/graphql-advantages/index.tsx index bd7d38514e..15406b1dc3 100644 --- a/src/components/index-page/graphql-advantages/index.tsx +++ b/src/components/index-page/graphql-advantages/index.tsx @@ -2,9 +2,11 @@ import { Button } from "@/app/conf/_design-system/button" import { SectionLabel } from "@/app/conf/_design-system/section-label" import { ReactNode } from "react" +import { PrecisionFigure } from "./precision" + export function GraphQLAdvantages() { return ( -

+
GraphQL advantages
@@ -12,7 +14,7 @@ export function GraphQLAdvantages() { name="Precision" bigText="Ask for what you need, get exactly that" text="Send a GraphQL query to your API and get precisely the data you request — no over-fetching, no under-fetching. Predictable responses keep apps efficient and performant." - figure={null} + figure={} cta={
- From 356766402106d5f2811965aa5c7b43f329a3e99c Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 21 Jul 2025 16:45:29 +0200 Subject: [PATCH 03/18] WIP --- next.config.js | 4 +++ .../index-page/graphql-advantages/index.tsx | 12 ++++--- .../graphql-advantages/precision.tsx | 19 ++++++---- src/components/index-page/how-it-works.tsx | 2 +- src/nextra-theme-docs.css | 36 +++++++++++++++++++ tsconfig.json | 2 +- 6 files changed, 62 insertions(+), 13 deletions(-) diff --git a/next.config.js b/next.config.js index 56e13b9dc0..6315ab35ec 100644 --- a/next.config.js +++ b/next.config.js @@ -6,6 +6,7 @@ import withLess from "next-with-less" import fs from "fs" import { remarkGraphiQLComment } from "./src/remark-graphiql-comment.js" +import { syntaxHighlightingThemes } from "./src/_design-system/syntax/index.js" const vercelJSON = JSON.parse(fs.readFileSync("./vercel.json", "utf-8")) @@ -15,6 +16,9 @@ const withNextra = nextra({ themeConfig: "./theme.config.tsx", mdxOptions: { remarkPlugins: [remarkGraphiQLComment], + rehypePrettyCodeOptions: { + theme: syntaxHighlightingThemes, + }, }, }) diff --git a/src/components/index-page/graphql-advantages/index.tsx b/src/components/index-page/graphql-advantages/index.tsx index 15406b1dc3..0e1b5a9e28 100644 --- a/src/components/index-page/graphql-advantages/index.tsx +++ b/src/components/index-page/graphql-advantages/index.tsx @@ -9,7 +9,7 @@ export function GraphQLAdvantages() {
GraphQL advantages -
+
-

+
+

{name}

{bigText} -
{figure}
+
+ {figure} +

{text}

-
{cta}
+
{cta}
) } diff --git a/src/components/index-page/graphql-advantages/precision.tsx b/src/components/index-page/graphql-advantages/precision.tsx index ed7ddafd4a..e0be29fa98 100644 --- a/src/components/index-page/graphql-advantages/precision.tsx +++ b/src/components/index-page/graphql-advantages/precision.tsx @@ -10,7 +10,11 @@ const components = { pre: (props: ComponentPropsWithoutRef) => ( 
   ),
@@ -87,21 +91,24 @@ export function PrecisionFigure() {
     

       
         {"{"}
-        {"\n  hero {"}
-        {"\n    name"}
+        {"\n  "}
+        {/* todo: change this color to brand colors globally */}
+        {"hero"}
+        {" {"}
+        {"\n    name"}
         {"\n    height\n    mass".split("").map((char, i) => (
-          
+          
             {char === "\n" ? 
 : char}
           
         ))}
         
diff --git a/src/components/index-page/how-it-works.tsx b/src/components/index-page/how-it-works.tsx
index 4bcc3aeb18..e20aea999f 100644
--- a/src/components/index-page/how-it-works.tsx
+++ b/src/components/index-page/how-it-works.tsx
@@ -35,7 +35,7 @@ function ListItem({
       

         {text}
       

-      

+      

         {code}
       

     
diff --git a/src/nextra-theme-docs.css b/src/nextra-theme-docs.css
index fbe3ba187a..ff59a5c69e 100644
--- a/src/nextra-theme-docs.css
+++ b/src/nextra-theme-docs.css
@@ -2994,3 +2994,39 @@ body.nextra-banner-hidden .\[body\.nextra-banner-hidden_\&\]\:_hidden {
 div:hover > .\[div\:hover\>\&\]\:_opacity-100 {
   opacity: 1;
 }
+
+/* code blocks */
+.nextra-code {
+  --border-color: hsl(var(--color-neu-200));
+
+  & ._h-12 {
+    height: unset;
+  }
+  
+  & > div:first-child /* file name */ {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: hsl(var(--color-neu-800));
+    font-size: 14px;
+    background-color: hsl(var(--color-neu-0) / 0.64);
+    backdrop-filter: blur(6px);
+    border: 1px solid var(--border-color);
+    border-bottom: none;
+  }
+}
+
+.dark .nextra-code {
+  --border-color: hsl(var(--color-neu-50));
+}
+
+.nextra-codeblocks div.nextra-code:not(:last-child) > div:first-child {
+  border-right: none;
+}
+.nextra-code pre {
+  box-shadow: none;
+  border: 1px solid var(--border-color);
+}
+.nextra-codeblocks div.nextra-code:not(:last-child) pre {
+  border-right: none;
+}
+    
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 8129519fd7..52c58430ed 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -23,6 +23,6 @@
       }
     ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/_design-system/syntax/index.js"],
   "exclude": ["node_modules"]
 }

From 578ddf39f2672b85511b55bbb411195421584892 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz 
Date: Mon, 21 Jul 2025 17:35:11 +0200
Subject: [PATCH 04/18] Eject Pre component

---
 src/_design-system/syntax/github-dark.json    | 515 ++++++++++++++++++
 src/_design-system/syntax/index.js            |  14 +
 src/_design-system/syntax/min-light.json      | 314 +++++++++++
 src/components/code-blocks/index.tsx          |   4 +-
 .../graphql-advantages/precision.tsx          |   4 +-
 src/components/pre/index.tsx                  |  92 ++++
 src/components/pre/pre.module.css             |  28 +
 src/nextra-theme-docs.css                     |  36 --
 8 files changed, 969 insertions(+), 38 deletions(-)
 create mode 100644 src/_design-system/syntax/github-dark.json
 create mode 100644 src/_design-system/syntax/index.js
 create mode 100644 src/_design-system/syntax/min-light.json
 create mode 100644 src/components/pre/index.tsx
 create mode 100644 src/components/pre/pre.module.css

diff --git a/src/_design-system/syntax/github-dark.json b/src/_design-system/syntax/github-dark.json
new file mode 100644
index 0000000000..9e3b3a1575
--- /dev/null
+++ b/src/_design-system/syntax/github-dark.json
@@ -0,0 +1,515 @@
+{
+  "colors": {
+    "activityBar.activeBorder": "#f9826c",
+    "activityBar.background": "#24292e",
+    "activityBar.border": "#1b1f23",
+    "activityBar.foreground": "#e1e4e8",
+    "activityBar.inactiveForeground": "#6a737d",
+    "activityBarBadge.background": "#0366d6",
+    "activityBarBadge.foreground": "#fff",
+    "badge.background": "#044289",
+    "badge.foreground": "#c8e1ff",
+    "breadcrumb.activeSelectionForeground": "#d1d5da",
+    "breadcrumb.focusForeground": "#e1e4e8",
+    "breadcrumb.foreground": "#959da5",
+    "breadcrumbPicker.background": "#2b3036",
+    "button.background": "#176f2c",
+    "button.foreground": "#dcffe4",
+    "button.hoverBackground": "#22863a",
+    "button.secondaryBackground": "#444d56",
+    "button.secondaryForeground": "#fff",
+    "button.secondaryHoverBackground": "#586069",
+    "checkbox.background": "#444d56",
+    "checkbox.border": "#1b1f23",
+    "debugToolBar.background": "#2b3036",
+    "descriptionForeground": "#959da5",
+    "diffEditor.insertedTextBackground": "#28a74530",
+    "diffEditor.removedTextBackground": "#d73a4930",
+    "dropdown.background": "#2f363d",
+    "dropdown.border": "#1b1f23",
+    "dropdown.foreground": "#e1e4e8",
+    "dropdown.listBackground": "#24292e",
+    "editor.background": "#24292e",
+    "editor.findMatchBackground": "#ffd33d44",
+    "editor.findMatchHighlightBackground": "#ffd33d22",
+    "editor.focusedStackFrameHighlightBackground": "#2b6a3033",
+    "editor.foldBackground": "#58606915",
+    "editor.foreground": "#e1e4e8",
+    "editor.inactiveSelectionBackground": "#3392FF22",
+    "editor.lineHighlightBackground": "#2b3036",
+    "editor.linkedEditingBackground": "#3392FF22",
+    "editor.selectionBackground": "#3392FF44",
+    "editor.selectionHighlightBackground": "#17E5E633",
+    "editor.selectionHighlightBorder": "#17E5E600",
+    "editor.stackFrameHighlightBackground": "#C6902625",
+    "editor.wordHighlightBackground": "#17E5E600",
+    "editor.wordHighlightBorder": "#17E5E699",
+    "editor.wordHighlightStrongBackground": "#17E5E600",
+    "editor.wordHighlightStrongBorder": "#17E5E666",
+    "editorBracketHighlight.foreground1": "#FF99E0",
+    "editorBracketHighlight.foreground2": "#ffab70",
+    "editorBracketHighlight.foreground3": "#b392f0",
+    "editorBracketHighlight.foreground4": "#FF99E0",
+    "editorBracketHighlight.foreground5": "#ffab70",
+    "editorBracketHighlight.foreground6": "#b392f0",
+    "editorBracketMatch.background": "#17E5E650",
+    "editorBracketMatch.border": "#17E5E600",
+    "editorCursor.foreground": "#c8e1ff",
+    "editorError.foreground": "#f97583",
+    "editorGroup.border": "#1b1f23",
+    "editorGroupHeader.tabsBackground": "#1f2428",
+    "editorGroupHeader.tabsBorder": "#1b1f23",
+    "editorGutter.addedBackground": "#28a745",
+    "editorGutter.deletedBackground": "#ea4a5a",
+    "editorGutter.modifiedBackground": "#2188ff",
+    "editorIndentGuide.activeBackground": "#444d56",
+    "editorIndentGuide.background": "#2f363d",
+    "editorLineNumber.activeForeground": "#e1e4e8",
+    "editorLineNumber.foreground": "#444d56",
+    "editorOverviewRuler.border": "#1b1f23",
+    "editorWarning.foreground": "#ffea7f",
+    "editorWhitespace.foreground": "#444d56",
+    "editorWidget.background": "#1f2428",
+    "errorForeground": "#f97583",
+    "focusBorder": "#005cc5",
+    "foreground": "#d1d5da",
+    "gitDecoration.addedResourceForeground": "#34d058",
+    "gitDecoration.conflictingResourceForeground": "#ffab70",
+    "gitDecoration.deletedResourceForeground": "#ea4a5a",
+    "gitDecoration.ignoredResourceForeground": "#6a737d",
+    "gitDecoration.modifiedResourceForeground": "#FF99E0",
+    "gitDecoration.submoduleResourceForeground": "#6a737d",
+    "gitDecoration.untrackedResourceForeground": "#34d058",
+    "input.background": "#2f363d",
+    "input.border": "#1b1f23",
+    "input.foreground": "#e1e4e8",
+    "input.placeholderForeground": "#959da5",
+    "list.activeSelectionBackground": "#39414a",
+    "list.activeSelectionForeground": "#e1e4e8",
+    "list.focusBackground": "#044289",
+    "list.hoverBackground": "#282e34",
+    "list.hoverForeground": "#e1e4e8",
+    "list.inactiveFocusBackground": "#1d2d3e",
+    "list.inactiveSelectionBackground": "#282e34",
+    "list.inactiveSelectionForeground": "#e1e4e8",
+    "notificationCenterHeader.background": "#24292e",
+    "notificationCenterHeader.foreground": "#959da5",
+    "notifications.background": "#2f363d",
+    "notifications.border": "#1b1f23",
+    "notifications.foreground": "#e1e4e8",
+    "notificationsErrorIcon.foreground": "#ea4a5a",
+    "notificationsInfoIcon.foreground": "#FF99E0",
+    "notificationsWarningIcon.foreground": "#ffab70",
+    "panel.background": "#1f2428",
+    "panel.border": "#1b1f23",
+    "panelInput.border": "#2f363d",
+    "panelTitle.activeBorder": "#f9826c",
+    "panelTitle.activeForeground": "#e1e4e8",
+    "panelTitle.inactiveForeground": "#959da5",
+    "peekViewEditor.background": "#1f242888",
+    "peekViewEditor.matchHighlightBackground": "#ffd33d33",
+    "peekViewResult.background": "#1f2428",
+    "peekViewResult.matchHighlightBackground": "#ffd33d33",
+    "pickerGroup.border": "#444d56",
+    "pickerGroup.foreground": "#e1e4e8",
+    "progressBar.background": "#0366d6",
+    "quickInput.background": "#24292e",
+    "quickInput.foreground": "#e1e4e8",
+    "scrollbar.shadow": "#0008",
+    "scrollbarSlider.activeBackground": "#6a737d88",
+    "scrollbarSlider.background": "#6a737d33",
+    "scrollbarSlider.hoverBackground": "#6a737d44",
+    "settings.headerForeground": "#e1e4e8",
+    "settings.modifiedItemIndicator": "#0366d6",
+    "sideBar.background": "#1f2428",
+    "sideBar.border": "#1b1f23",
+    "sideBar.foreground": "#d1d5da",
+    "sideBarSectionHeader.background": "#1f2428",
+    "sideBarSectionHeader.border": "#1b1f23",
+    "sideBarSectionHeader.foreground": "#e1e4e8",
+    "sideBarTitle.foreground": "#e1e4e8",
+    "statusBar.background": "#24292e",
+    "statusBar.border": "#1b1f23",
+    "statusBar.debuggingBackground": "#931c06",
+    "statusBar.debuggingForeground": "#fff",
+    "statusBar.foreground": "#d1d5da",
+    "statusBar.noFolderBackground": "#24292e",
+    "statusBarItem.prominentBackground": "#282e34",
+    "statusBarItem.remoteBackground": "#24292e",
+    "statusBarItem.remoteForeground": "#d1d5da",
+    "tab.activeBackground": "#24292e",
+    "tab.activeBorder": "#24292e",
+    "tab.activeBorderTop": "#f9826c",
+    "tab.activeForeground": "#e1e4e8",
+    "tab.border": "#1b1f23",
+    "tab.hoverBackground": "#24292e",
+    "tab.inactiveBackground": "#1f2428",
+    "tab.inactiveForeground": "#959da5",
+    "tab.unfocusedActiveBorder": "#24292e",
+    "tab.unfocusedActiveBorderTop": "#1b1f23",
+    "tab.unfocusedHoverBackground": "#24292e",
+    "terminal.ansiBlack": "#586069",
+    "terminal.ansiBlue": "#2188ff",
+    "terminal.ansiBrightBlack": "#959da5",
+    "terminal.ansiBrightBlue": "#FF99E0",
+    "terminal.ansiBrightCyan": "#56d4dd",
+    "terminal.ansiBrightGreen": "#85e89d",
+    "terminal.ansiBrightMagenta": "#b392f0",
+    "terminal.ansiBrightRed": "#f97583",
+    "terminal.ansiBrightWhite": "#fafbfc",
+    "terminal.ansiBrightYellow": "#ffea7f",
+    "terminal.ansiCyan": "#39c5cf",
+    "terminal.ansiGreen": "#34d058",
+    "terminal.ansiMagenta": "#b392f0",
+    "terminal.ansiRed": "#ea4a5a",
+    "terminal.ansiWhite": "#d1d5da",
+    "terminal.ansiYellow": "#ffea7f",
+    "terminal.foreground": "#d1d5da",
+    "terminal.tab.activeBorder": "#f9826c",
+    "terminalCursor.background": "#586069",
+    "terminalCursor.foreground": "#FF99E0",
+    "textBlockQuote.background": "#24292e",
+    "textBlockQuote.border": "#444d56",
+    "textCodeBlock.background": "#2f363d",
+    "textLink.activeForeground": "#c8e1ff",
+    "textLink.foreground": "#FF99E0",
+    "textPreformat.foreground": "#d1d5da",
+    "textSeparator.foreground": "#586069",
+    "titleBar.activeBackground": "#24292e",
+    "titleBar.activeForeground": "#e1e4e8",
+    "titleBar.border": "#1b1f23",
+    "titleBar.inactiveBackground": "#1f2428",
+    "titleBar.inactiveForeground": "#959da5",
+    "tree.indentGuidesStroke": "#2f363d",
+    "welcomePage.buttonBackground": "#2f363d",
+    "welcomePage.buttonHoverBackground": "#444d56"
+  },
+  "displayName": "GitHub Dark",
+  "name": "github-dark",
+  "semanticHighlighting": true,
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+      "settings": {
+        "foreground": "#6a737d"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language"
+      ],
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": ["entity", "entity.name"],
+      "settings": {
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": ["storage", "storage.type"],
+      "settings": {
+        "foreground": "#f97583"
+      }
+    },
+    {
+      "scope": [
+        "storage.modifier.package",
+        "storage.modifier.import",
+        "storage.type.java"
+      ],
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": [
+        "string",
+        "punctuation.definition.string",
+        "string punctuation.section.embedded source"
+      ],
+      "settings": {
+        "foreground": "#9ecbff"
+      }
+    },
+    {
+      "scope": "support",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "variable",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "carriage-return",
+      "settings": {
+        "background": "#f97583",
+        "content": "^M",
+        "fontStyle": "italic underline",
+        "foreground": "#24292e"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": "string variable",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": ["source.regexp", "string.regexp"],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#dbedff"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": ["markup.heading", "markup.heading entity.name"],
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#e1e4e8"
+      }
+    },
+    {
+      "scope": ["markup.underline"],
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": ["markup.strikethrough"],
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": [
+        "markup.deleted",
+        "meta.diff.header.from-file",
+        "punctuation.definition.deleted"
+      ],
+      "settings": {
+        "background": "#86181d",
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": [
+        "markup.inserted",
+        "meta.diff.header.to-file",
+        "punctuation.definition.inserted"
+      ],
+      "settings": {
+        "background": "#144620",
+        "foreground": "#85e89d"
+      }
+    },
+    {
+      "scope": ["markup.changed", "punctuation.definition.changed"],
+      "settings": {
+        "background": "#c24e00",
+        "foreground": "#ffab70"
+      }
+    },
+    {
+      "scope": ["markup.ignored", "markup.untracked"],
+      "settings": {
+        "background": "#FF99E0",
+        "foreground": "#2f363d"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#b392f0"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#FF99E0"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#d1d5da"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#fdaeb7"
+      }
+    },
+    {
+      "scope": ["constant.other.reference.link", "string.other.link"],
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#dbedff"
+      }
+    }
+  ],
+  "type": "dark"
+}
diff --git a/src/_design-system/syntax/index.js b/src/_design-system/syntax/index.js
new file mode 100644
index 0000000000..f6a443e76e
--- /dev/null
+++ b/src/_design-system/syntax/index.js
@@ -0,0 +1,14 @@
+// @ts-check
+
+import fs from "fs/promises"
+
+const [dark, light] = await Promise.all([
+  fs
+    .readFile(new URL("./github-dark.json", import.meta.url), "utf-8")
+    .then(JSON.parse),
+  fs
+    .readFile(new URL("./min-light.json", import.meta.url), "utf-8")
+    .then(JSON.parse),
+])
+
+export const syntaxHighlightingThemes = { light, dark }
diff --git a/src/_design-system/syntax/min-light.json b/src/_design-system/syntax/min-light.json
new file mode 100644
index 0000000000..95a770ce8d
--- /dev/null
+++ b/src/_design-system/syntax/min-light.json
@@ -0,0 +1,314 @@
+{
+  "colors": {
+    "activityBar.background": "#f6f6f6",
+    "activityBar.foreground": "#9E9E9E",
+    "activityBarBadge.background": "#616161",
+    "badge.background": "#E0E0E0",
+    "badge.foreground": "#616161",
+    "button.background": "#757575",
+    "button.hoverBackground": "#616161",
+    "debugIcon.breakpointCurrentStackframeForeground": "#1976D2",
+    "debugIcon.breakpointDisabledForeground": "#848484",
+    "debugIcon.breakpointForeground": "#D32F2F",
+    "debugIcon.breakpointStackframeForeground": "#1976D2",
+    "debugIcon.continueForeground": "#6f42c1",
+    "debugIcon.disconnectForeground": "#6f42c1",
+    "debugIcon.pauseForeground": "#6f42c1",
+    "debugIcon.restartForeground": "#1976D2",
+    "debugIcon.startForeground": "#1976D2",
+    "debugIcon.stepBackForeground": "#6f42c1",
+    "debugIcon.stepIntoForeground": "#6f42c1",
+    "debugIcon.stepOutForeground": "#6f42c1",
+    "debugIcon.stepOverForeground": "#6f42c1",
+    "debugIcon.stopForeground": "#1976D2",
+    "diffEditor.insertedTextBackground": "#b7e7a44b",
+    "diffEditor.removedTextBackground": "#e597af52",
+    "editor.background": "#ffffff",
+    "editor.foreground": "#212121",
+    "editor.lineHighlightBorder": "#f2f2f2",
+    "editorBracketMatch.background": "#E7F3FF",
+    "editorBracketMatch.border": "#c8e1ff",
+    "editorGroupHeader.tabsBackground": "#f6f6f6",
+    "editorGroupHeader.tabsBorder": "#fff",
+    "editorIndentGuide.background": "#EEE",
+    "editorLineNumber.activeForeground": "#757575",
+    "editorLineNumber.foreground": "#CCC",
+    "editorSuggestWidget.background": "#F3F3F3",
+    "extensionButton.prominentBackground": "#000000AA",
+    "extensionButton.prominentHoverBackground": "#000000BB",
+    "focusBorder": "#D0D0D0",
+    "foreground": "#757575",
+    "gitDecoration.ignoredResourceForeground": "#AAAAAA",
+    "input.border": "#E9E9E9",
+    "inputOption.activeBackground": "#EDEDED",
+    "list.activeSelectionBackground": "#EEE",
+    "list.activeSelectionForeground": "#212121",
+    "list.focusBackground": "#ddd",
+    "list.focusForeground": "#212121",
+    "list.highlightForeground": "#212121",
+    "list.inactiveSelectionBackground": "#E0E0E0",
+    "list.inactiveSelectionForeground": "#212121",
+    "panel.background": "#fff",
+    "panel.border": "#f4f4f4",
+    "panelTitle.activeBorder": "#fff",
+    "panelTitle.inactiveForeground": "#BDBDBD",
+    "peekView.border": "#E0E0E0",
+    "peekViewEditor.background": "#f8f8f8",
+    "pickerGroup.foreground": "#000",
+    "progressBar.background": "#000",
+    "scrollbar.shadow": "#FFF",
+    "sideBar.background": "#f6f6f6",
+    "sideBar.border": "#f6f6f6",
+    "sideBarSectionHeader.background": "#EEE",
+    "sideBarTitle.foreground": "#999",
+    "statusBar.background": "#f6f6f6",
+    "statusBar.border": "#f6f6f6",
+    "statusBar.debuggingBackground": "#f6f6f6",
+    "statusBar.foreground": "#7E7E7E",
+    "statusBar.noFolderBackground": "#f6f6f6",
+    "statusBarItem.prominentBackground": "#0000001a",
+    "statusBarItem.remoteBackground": "#f6f6f600",
+    "statusBarItem.remoteForeground": "#7E7E7E",
+    "symbolIcon.classForeground": "#dd8500",
+    "symbolIcon.constructorForeground": "#6f42c1",
+    "symbolIcon.enumeratorForeground": "#dd8500",
+    "symbolIcon.enumeratorMemberForeground": "#1976D2",
+    "symbolIcon.eventForeground": "#dd8500",
+    "symbolIcon.fieldForeground": "#1976D2",
+    "symbolIcon.functionForeground": "#6f42c1",
+    "symbolIcon.interfaceForeground": "#1976D2",
+    "symbolIcon.methodForeground": "#6f42c1",
+    "symbolIcon.variableForeground": "#1976D2",
+    "tab.activeBorder": "#FFF",
+    "tab.activeForeground": "#424242",
+    "tab.border": "#f6f6f6",
+    "tab.inactiveBackground": "#f6f6f6",
+    "tab.inactiveForeground": "#BDBDBD",
+    "tab.unfocusedActiveBorder": "#fff",
+    "terminal.ansiBlack": "#333",
+    "terminal.ansiBlue": "#e0e0e0",
+    "terminal.ansiBrightBlack": "#a1a1a1",
+    "terminal.ansiBrightBlue": "#6871ff",
+    "terminal.ansiBrightCyan": "#57d9ad",
+    "terminal.ansiBrightGreen": "#a3d900",
+    "terminal.ansiBrightMagenta": "#a37acc",
+    "terminal.ansiBrightRed": "#d6656a",
+    "terminal.ansiBrightWhite": "#7E7E7E",
+    "terminal.ansiBrightYellow": "#e7c547",
+    "terminal.ansiCyan": "#4dbf99",
+    "terminal.ansiGreen": "#77cc00",
+    "terminal.ansiMagenta": "#9966cc",
+    "terminal.ansiRed": "#D32F2F",
+    "terminal.ansiWhite": "#c7c7c7",
+    "terminal.ansiYellow": "#f29718",
+    "terminal.background": "#fff",
+    "textLink.activeForeground": "#000",
+    "textLink.foreground": "#000",
+    "titleBar.activeBackground": "#f6f6f6",
+    "titleBar.border": "#FFFFFF00",
+    "titleBar.inactiveBackground": "#f6f6f6"
+  },
+  "displayName": "Min Light",
+  "name": "min-light",
+  "tokenColors": [
+    {
+      "settings": {
+        "foreground": "#24292eff"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.accessor",
+        "meta.group.braces.round.function.arguments",
+        "meta.template.expression",
+        "markup.fenced_code meta.embedded.block",
+        "punctuation.operation.graphql",
+        "punctuation"
+      ],
+      "settings": {
+        "foreground": "#363A2C"
+      }
+    },
+    {
+      "scope": "emphasis",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": ["strong", "markup.heading.markdown", "markup.bold.markdown"],
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": ["markup.italic.markdown"],
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "meta.link.inline.markdown",
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#1976D2"
+      }
+    },
+    {
+      "scope": ["string", "markup.fenced_code", "markup.inline"],
+      "settings": {
+        "foreground": "#2b5581"
+      }
+    },
+    {
+      "scope": ["comment", "string.quoted.docstring.multi"],
+      "settings": {
+        "foreground": "#c2c3c5"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "constant.language",
+        "constant.other.placeholder",
+        "constant.character.format.placeholder",
+        "variable.language.this",
+        "variable.other.object",
+        "variable.other.class",
+        "variable.other.constant",
+        "meta.property-name",
+        "meta.property-value",
+        "support"
+      ],
+      "settings": {
+        "foreground": "#1976D2"
+      }
+    },
+    {
+      "scope": [
+        "keyword",
+        "storage.modifier",
+        "storage.type",
+        "storage.control.clojure",
+        "entity.name.function.clojure",
+        "entity.name.tag.yaml",
+        "support.function.node",
+        "support.type.property-name.json",
+        "punctuation.separator.key-value",
+        "punctuation.definition.template-expression"
+      ],
+      "settings": {
+        "foreground": "#E10198"
+      }
+    },
+    {
+      "scope": "variable.parameter.function",
+      "settings": {
+        "foreground": "#FF9800"
+      }
+    },
+    {
+      "scope": [
+        "support.function",
+        "entity.name.type",
+        "entity.other.inherited-class",
+        "meta.function-call",
+        "meta.instance.constructor",
+        "entity.other.attribute-name",
+        "entity.name.function",
+        "constant.keyword.clojure"
+      ],
+      "settings": {
+        "foreground": "#6f42c1"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.tag",
+        "string.quoted",
+        "string.regexp",
+        "string.interpolated",
+        "string.template",
+        "string.unquoted.plain.out.yaml",
+        "keyword.other.template"
+      ],
+      "settings": {
+        "foreground": "#609a06"
+      }
+    },
+    {
+      "scope": "token.info-token",
+      "settings": {
+        "foreground": "#316bcd"
+      }
+    },
+    {
+      "scope": "token.warn-token",
+      "settings": {
+        "foreground": "#cd9731"
+      }
+    },
+    {
+      "scope": "token.error-token",
+      "settings": {
+        "foreground": "#cd3131"
+      }
+    },
+    {
+      "scope": "token.debug-token",
+      "settings": {
+        "foreground": "#800080"
+      }
+    },
+    {
+      "scope": ["strong", "markup.heading.markdown", "markup.bold.markdown"],
+      "settings": {
+        "foreground": "#6f42c1"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.arguments",
+        "punctuation.definition.dict",
+        "punctuation.separator",
+        "meta.function-call.arguments"
+      ],
+      "settings": {
+        "foreground": "#212121"
+      }
+    },
+    {
+      "scope": [
+        "markup.underline.link",
+        "punctuation.definition.metadata.markdown"
+      ],
+      "settings": {
+        "foreground": "#609008"
+      }
+    },
+    {
+      "scope": ["beginning.punctuation.definition.list.markdown"],
+      "settings": {
+        "foreground": "#6f42c1"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.string.begin.markdown",
+        "punctuation.definition.string.end.markdown",
+        "string.other.link.title.markdown",
+        "string.other.link.description.markdown"
+      ],
+      "settings": {
+        "foreground": "#d32f2f"
+      }
+    },
+    {
+      "scope": ["variable.graphql"],
+      "settings": {
+        "foreground": "#E10198"
+      }
+    }
+  ],
+  "type": "light"
+}
diff --git a/src/components/code-blocks/index.tsx b/src/components/code-blocks/index.tsx
index 64e3fb55fc..5a402d9c16 100644
--- a/src/components/code-blocks/index.tsx
+++ b/src/components/code-blocks/index.tsx
@@ -1,4 +1,6 @@
-import { Code, Pre } from "nextra/components"
+import { Code } from "nextra/components"
+
+import { Pre } from "@/components/pre"
 
 import _CodeA from "./describe-your-data.mdx"
 import _CodeB from "./ask-for-what-you-want.mdx"
diff --git a/src/components/index-page/graphql-advantages/precision.tsx b/src/components/index-page/graphql-advantages/precision.tsx
index e0be29fa98..77195be50d 100644
--- a/src/components/index-page/graphql-advantages/precision.tsx
+++ b/src/components/index-page/graphql-advantages/precision.tsx
@@ -1,7 +1,9 @@
 import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
-import { Pre, Code } from "nextra/components"
+import { Code } from "nextra/components"
 import { clsx } from "clsx"
 
+import { Pre } from "@/components/pre"
+
 import PredictableResult from "../../code-blocks/predictable-result.mdx"
 
 import classes from "./precision.module.css"
diff --git a/src/components/pre/index.tsx b/src/components/pre/index.tsx
new file mode 100644
index 0000000000..b5b7b7414e
--- /dev/null
+++ b/src/components/pre/index.tsx
@@ -0,0 +1,92 @@
+import cn from "clsx"
+import type { ComponentPropsWithoutRef, FC, ReactElement } from "react"
+import { useRef } from "react"
+import { WordWrapIcon } from "nextra/icons"
+import { Button, CopyToClipboard } from "nextra/components"
+
+import classes from "./pre.module.css"
+
+interface PreProps extends ComponentPropsWithoutRef<"pre"> {
+  "data-filename"?: string
+  "data-copy"?: ""
+  "data-language"?: string
+  "data-word-wrap"?: ""
+  icon?: FC<{ className?: string }>
+}
+
+export function Pre({
+  children,
+  className,
+  "data-filename": filename,
+  "data-copy": copy,
+  "data-language": _language,
+  "data-word-wrap": hasWordWrap,
+  icon: Icon,
+  ...props
+}: PreProps): ReactElement {
+  const preRef = useRef(null)
+
+  const copyButton = copy === "" && (
+     preRef.current?.querySelector("code")?.textContent || ""}
+    />
+  )
+
+  return (
+    

+      {filename && (
+        

+          {Icon && }
+          {filename}
+          {copyButton}
+        

+      )}
+      
+        {children}
+      

+      
&]:_opacity-100 focus-within:_opacity-100",
+          "_flex _gap-1 _absolute _right-4",
+          filename ? "_top-14" : "_top-2",
+        )}
+      >
+        {hasWordWrap === "" && (
+          
+        )}
+        {!filename && copyButton}
+      

+    

+  )
+}
+
+function toggleWordWrap() {
+  const htmlDataset = document.documentElement.dataset
+  const hasWordWrap = "nextraWordWrap" in htmlDataset
+  if (hasWordWrap) {
+    delete htmlDataset.nextraWordWrap
+  } else {
+    htmlDataset.nextraWordWrap = ""
+  }
+}
diff --git a/src/components/pre/pre.module.css b/src/components/pre/pre.module.css
new file mode 100644
index 0000000000..39aa6d8583
--- /dev/null
+++ b/src/components/pre/pre.module.css
@@ -0,0 +1,28 @@
+.pre {
+  & :global(._h-12) {
+    height: unset;
+  }
+}
+
+:global(.nextra-codeblocks) div.pre:not(:last-child) > div:first-child {
+  border-right: none;
+}
+
+:global(.nextra-codeblocks) {
+  & .pre:not(:last-child) pre {
+    border-right: none;
+    border-bottom-right-radius: 0;
+  }
+
+  & :not(:last-child) .filename {
+    border-top-right-radius: 0;
+  }
+
+  & :not(:first-child) .filename {
+    border-top-left-radius: 0;
+  }
+
+  & .pre:not(:first-child) pre {
+    border-bottom-left-radius: 0;
+  }
+}
diff --git a/src/nextra-theme-docs.css b/src/nextra-theme-docs.css
index ff59a5c69e..fbe3ba187a 100644
--- a/src/nextra-theme-docs.css
+++ b/src/nextra-theme-docs.css
@@ -2994,39 +2994,3 @@ body.nextra-banner-hidden .\[body\.nextra-banner-hidden_\&\]\:_hidden {
 div:hover > .\[div\:hover\>\&\]\:_opacity-100 {
   opacity: 1;
 }
-
-/* code blocks */
-.nextra-code {
-  --border-color: hsl(var(--color-neu-200));
-
-  & ._h-12 {
-    height: unset;
-  }
-  
-  & > div:first-child /* file name */ {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    color: hsl(var(--color-neu-800));
-    font-size: 14px;
-    background-color: hsl(var(--color-neu-0) / 0.64);
-    backdrop-filter: blur(6px);
-    border: 1px solid var(--border-color);
-    border-bottom: none;
-  }
-}
-
-.dark .nextra-code {
-  --border-color: hsl(var(--color-neu-50));
-}
-
-.nextra-codeblocks div.nextra-code:not(:last-child) > div:first-child {
-  border-right: none;
-}
-.nextra-code pre {
-  box-shadow: none;
-  border: 1px solid var(--border-color);
-}
-.nextra-codeblocks div.nextra-code:not(:last-child) pre {
-  border-right: none;
-}
-    
\ No newline at end of file

From fbfd11ccf7e28ea667da95b0de99cb784baad478 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz 
Date: Mon, 21 Jul 2025 17:58:42 +0200
Subject: [PATCH 05/18] Tweak colors, fix bugs

---
 src/_design-system/syntax/github-dark.json    | 52 +++++++++++--------
 .../graphql-advantages/precision.tsx          | 13 +++--
 src/components/index-page/index.tsx           |  1 -
 src/components/pre/index.tsx                  |  2 +-
 src/components/pre/pre.module.css             |  4 ++
 5 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/src/_design-system/syntax/github-dark.json b/src/_design-system/syntax/github-dark.json
index 9e3b3a1575..1440bc9989 100644
--- a/src/_design-system/syntax/github-dark.json
+++ b/src/_design-system/syntax/github-dark.json
@@ -34,7 +34,7 @@
     "editor.findMatchHighlightBackground": "#ffd33d22",
     "editor.focusedStackFrameHighlightBackground": "#2b6a3033",
     "editor.foldBackground": "#58606915",
-    "editor.foreground": "#e1e4e8",
+    "editor.foreground": "#6E7557",
     "editor.inactiveSelectionBackground": "#3392FF22",
     "editor.lineHighlightBackground": "#2b3036",
     "editor.linkedEditingBackground": "#3392FF22",
@@ -46,10 +46,10 @@
     "editor.wordHighlightBorder": "#17E5E699",
     "editor.wordHighlightStrongBackground": "#17E5E600",
     "editor.wordHighlightStrongBorder": "#17E5E666",
-    "editorBracketHighlight.foreground1": "#FF99E0",
+    "editorBracketHighlight.foreground1": "#79b8ff",
     "editorBracketHighlight.foreground2": "#ffab70",
     "editorBracketHighlight.foreground3": "#b392f0",
-    "editorBracketHighlight.foreground4": "#FF99E0",
+    "editorBracketHighlight.foreground4": "#79b8ff",
     "editorBracketHighlight.foreground5": "#ffab70",
     "editorBracketHighlight.foreground6": "#b392f0",
     "editorBracketMatch.background": "#17E5E650",
@@ -77,7 +77,7 @@
     "gitDecoration.conflictingResourceForeground": "#ffab70",
     "gitDecoration.deletedResourceForeground": "#ea4a5a",
     "gitDecoration.ignoredResourceForeground": "#6a737d",
-    "gitDecoration.modifiedResourceForeground": "#FF99E0",
+    "gitDecoration.modifiedResourceForeground": "#79b8ff",
     "gitDecoration.submoduleResourceForeground": "#6a737d",
     "gitDecoration.untrackedResourceForeground": "#34d058",
     "input.background": "#2f363d",
@@ -98,7 +98,7 @@
     "notifications.border": "#1b1f23",
     "notifications.foreground": "#e1e4e8",
     "notificationsErrorIcon.foreground": "#ea4a5a",
-    "notificationsInfoIcon.foreground": "#FF99E0",
+    "notificationsInfoIcon.foreground": "#79b8ff",
     "notificationsWarningIcon.foreground": "#ffab70",
     "panel.background": "#1f2428",
     "panel.border": "#1b1f23",
@@ -151,7 +151,7 @@
     "terminal.ansiBlack": "#586069",
     "terminal.ansiBlue": "#2188ff",
     "terminal.ansiBrightBlack": "#959da5",
-    "terminal.ansiBrightBlue": "#FF99E0",
+    "terminal.ansiBrightBlue": "#79b8ff",
     "terminal.ansiBrightCyan": "#56d4dd",
     "terminal.ansiBrightGreen": "#85e89d",
     "terminal.ansiBrightMagenta": "#b392f0",
@@ -167,12 +167,12 @@
     "terminal.foreground": "#d1d5da",
     "terminal.tab.activeBorder": "#f9826c",
     "terminalCursor.background": "#586069",
-    "terminalCursor.foreground": "#FF99E0",
+    "terminalCursor.foreground": "#79b8ff",
     "textBlockQuote.background": "#24292e",
     "textBlockQuote.border": "#444d56",
     "textCodeBlock.background": "#2f363d",
     "textLink.activeForeground": "#c8e1ff",
-    "textLink.foreground": "#FF99E0",
+    "textLink.foreground": "#79b8ff",
     "textPreformat.foreground": "#d1d5da",
     "textSeparator.foreground": "#586069",
     "titleBar.activeBackground": "#24292e",
@@ -203,7 +203,7 @@
         "variable.language"
       ],
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
@@ -259,19 +259,19 @@
     {
       "scope": "support",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": ""
       }
     },
     {
       "scope": "meta.property-name",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
       "scope": "variable",
       "settings": {
-        "foreground": "#ffab70"
+        "foreground": "#dbf6a2"
       }
     },
     {
@@ -326,7 +326,7 @@
     {
       "scope": "string variable",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
@@ -356,32 +356,32 @@
     {
       "scope": "support.constant",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
       "scope": "support.variable",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
       "scope": "meta.module-reference",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
       "scope": "punctuation.definition.list.begin.markdown",
       "settings": {
-        "foreground": "#ffab70"
+        "foreground": "#dbf6a2"
       }
     },
     {
       "scope": ["markup.heading", "markup.heading entity.name"],
       "settings": {
         "fontStyle": "bold",
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
@@ -419,7 +419,7 @@
     {
       "scope": "markup.inline.raw",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
@@ -454,7 +454,7 @@
     {
       "scope": ["markup.ignored", "markup.untracked"],
       "settings": {
-        "background": "#FF99E0",
+        "background": "#79b8ff",
         "foreground": "#2f363d"
       }
     },
@@ -468,20 +468,20 @@
     {
       "scope": "meta.diff.header",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
       "scope": "meta.separator",
       "settings": {
         "fontStyle": "bold",
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
       "scope": "meta.output",
       "settings": {
-        "foreground": "#FF99E0"
+        "foreground": "#79b8ff"
       }
     },
     {
@@ -509,6 +509,12 @@
         "fontStyle": "underline",
         "foreground": "#dbedff"
       }
+    },
+    {
+      "scope": ["punctuation"],
+      "settings": {
+        "foreground": "#6E7557"
+      }
     }
   ],
   "type": "dark"
diff --git a/src/components/index-page/graphql-advantages/precision.tsx b/src/components/index-page/graphql-advantages/precision.tsx
index 77195be50d..c3646e0cc8 100644
--- a/src/components/index-page/graphql-advantages/precision.tsx
+++ b/src/components/index-page/graphql-advantages/precision.tsx
@@ -99,12 +99,17 @@ export function PrecisionFigure() {
       
         {"{"}
         {"\n  "}
-        {/* todo: change this color to brand colors globally */}
-        {"hero"}
+        {"hero"}
         {" {"}
-        {"\n    name"}
+        
+          {"\n    name"}
+        
         {"\n    height\n    mass".split("").map((char, i) => (
-          
+          
             {char === "\n" ? 
 : char}
           
         ))}
diff --git a/src/components/index-page/index.tsx b/src/components/index-page/index.tsx
index 0bb5606c1a..6349fee426 100644
--- a/src/components/index-page/index.tsx
+++ b/src/components/index-page/index.tsx
@@ -1,6 +1,5 @@
 import { Hero } from "./hero"
 import { TrustedBy } from "./trusted-by"
-import { PredictableResults } from "./predictable-results"
 import { SingleRequest } from "./single-request"
 import { TypeSystem } from "./type-system"
 import { PowerFulTools } from "./powerful-tools"
diff --git a/src/components/pre/index.tsx b/src/components/pre/index.tsx
index b5b7b7414e..705c8cc4b7 100644
--- a/src/components/pre/index.tsx
+++ b/src/components/pre/index.tsx
@@ -39,7 +39,7 @@ export function Pre({
         

           {Icon && }
diff --git a/src/components/pre/pre.module.css b/src/components/pre/pre.module.css
index 39aa6d8583..54a0ddf66a 100644
--- a/src/components/pre/pre.module.css
+++ b/src/components/pre/pre.module.css
@@ -9,6 +9,10 @@
 }
 
 :global(.nextra-codeblocks) {
+  & .pre pre {
+    height: 100%;
+  }
+
   & .pre:not(:last-child) pre {
     border-right: none;
     border-bottom-right-radius: 0;

From 1e3f60809dd5eebab01af42c19814477d87e8785 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz 
Date: Tue, 22 Jul 2025 23:01:30 +0200
Subject: [PATCH 06/18] Change colors based on design's feedback

---
 .../syntax/{github-dark.json => dark.json}    | 145 +++++++++++-------
 src/_design-system/syntax/index.js            |   4 +-
 .../syntax/{min-light.json => light.json}     |  25 +--
 .../index-page/graphql-advantages/index.tsx   |   3 +-
 4 files changed, 107 insertions(+), 70 deletions(-)
 rename src/_design-system/syntax/{github-dark.json => dark.json} (80%)
 rename src/_design-system/syntax/{min-light.json => light.json} (95%)

diff --git a/src/_design-system/syntax/github-dark.json b/src/_design-system/syntax/dark.json
similarity index 80%
rename from src/_design-system/syntax/github-dark.json
rename to src/_design-system/syntax/dark.json
index 1440bc9989..6897a3fe5b 100644
--- a/src/_design-system/syntax/github-dark.json
+++ b/src/_design-system/syntax/dark.json
@@ -1,8 +1,11 @@
 {
+  "name": "k-colorable dark, based on GitHub Dark",
+  "type": "dark",
+  "semanticHighlighting": true,
   "colors": {
     "activityBar.activeBorder": "#f9826c",
-    "activityBar.background": "#24292e",
-    "activityBar.border": "#1b1f23",
+    "activityBar.background": "#24292C",
+    "activityBar.border": "#1b1f20",
     "activityBar.foreground": "#e1e4e8",
     "activityBar.inactiveForeground": "#6a737d",
     "activityBarBadge.background": "#0366d6",
@@ -20,21 +23,21 @@
     "button.secondaryForeground": "#fff",
     "button.secondaryHoverBackground": "#586069",
     "checkbox.background": "#444d56",
-    "checkbox.border": "#1b1f23",
+    "checkbox.border": "#1b1f20",
     "debugToolBar.background": "#2b3036",
     "descriptionForeground": "#959da5",
     "diffEditor.insertedTextBackground": "#28a74530",
     "diffEditor.removedTextBackground": "#d73a4930",
     "dropdown.background": "#2f363d",
-    "dropdown.border": "#1b1f23",
+    "dropdown.border": "#1b1f20",
     "dropdown.foreground": "#e1e4e8",
-    "dropdown.listBackground": "#24292e",
-    "editor.background": "#24292e",
+    "dropdown.listBackground": "#24292C",
+    "editor.background": "#24292c",
     "editor.findMatchBackground": "#ffd33d44",
     "editor.findMatchHighlightBackground": "#ffd33d22",
     "editor.focusedStackFrameHighlightBackground": "#2b6a3033",
     "editor.foldBackground": "#58606915",
-    "editor.foreground": "#6E7557",
+    "editor.foreground": "#CFD3C5",
     "editor.inactiveSelectionBackground": "#3392FF22",
     "editor.lineHighlightBackground": "#2b3036",
     "editor.linkedEditingBackground": "#3392FF22",
@@ -56,9 +59,9 @@
     "editorBracketMatch.border": "#17E5E600",
     "editorCursor.foreground": "#c8e1ff",
     "editorError.foreground": "#f97583",
-    "editorGroup.border": "#1b1f23",
-    "editorGroupHeader.tabsBackground": "#1f2428",
-    "editorGroupHeader.tabsBorder": "#1b1f23",
+    "editorGroup.border": "#1b1f20",
+    "editorGroupHeader.tabsBackground": "#24292C",
+    "editorGroupHeader.tabsBorder": "#1b1f20",
     "editorGutter.addedBackground": "#28a745",
     "editorGutter.deletedBackground": "#ea4a5a",
     "editorGutter.modifiedBackground": "#2188ff",
@@ -66,10 +69,10 @@
     "editorIndentGuide.background": "#2f363d",
     "editorLineNumber.activeForeground": "#e1e4e8",
     "editorLineNumber.foreground": "#444d56",
-    "editorOverviewRuler.border": "#1b1f23",
+    "editorOverviewRuler.border": "#1b1f20",
     "editorWarning.foreground": "#ffea7f",
     "editorWhitespace.foreground": "#444d56",
-    "editorWidget.background": "#1f2428",
+    "editorWidget.background": "#24292C",
     "errorForeground": "#f97583",
     "focusBorder": "#005cc5",
     "foreground": "#d1d5da",
@@ -80,8 +83,8 @@
     "gitDecoration.modifiedResourceForeground": "#79b8ff",
     "gitDecoration.submoduleResourceForeground": "#6a737d",
     "gitDecoration.untrackedResourceForeground": "#34d058",
-    "input.background": "#2f363d",
-    "input.border": "#1b1f23",
+    "input.background": "#2f363b",
+    "input.border": "#1b1f20",
     "input.foreground": "#e1e4e8",
     "input.placeholderForeground": "#959da5",
     "list.activeSelectionBackground": "#39414a",
@@ -92,28 +95,28 @@
     "list.inactiveFocusBackground": "#1d2d3e",
     "list.inactiveSelectionBackground": "#282e34",
     "list.inactiveSelectionForeground": "#e1e4e8",
-    "notificationCenterHeader.background": "#24292e",
+    "notificationCenterHeader.background": "#24292b",
     "notificationCenterHeader.foreground": "#959da5",
-    "notifications.background": "#2f363d",
-    "notifications.border": "#1b1f23",
+    "notifications.background": "#2f363b",
+    "notifications.border": "#1b1f20",
     "notifications.foreground": "#e1e4e8",
     "notificationsErrorIcon.foreground": "#ea4a5a",
     "notificationsInfoIcon.foreground": "#79b8ff",
     "notificationsWarningIcon.foreground": "#ffab70",
-    "panel.background": "#1f2428",
-    "panel.border": "#1b1f23",
+    "panel.background": "#24292C",
+    "panel.border": "#1b1f20",
     "panelInput.border": "#2f363d",
     "panelTitle.activeBorder": "#f9826c",
     "panelTitle.activeForeground": "#e1e4e8",
     "panelTitle.inactiveForeground": "#959da5",
-    "peekViewEditor.background": "#1f242888",
+    "peekViewEditor.background": "#24292C88",
     "peekViewEditor.matchHighlightBackground": "#ffd33d33",
-    "peekViewResult.background": "#1f2428",
+    "peekViewResult.background": "#1f2425",
     "peekViewResult.matchHighlightBackground": "#ffd33d33",
     "pickerGroup.border": "#444d56",
     "pickerGroup.foreground": "#e1e4e8",
     "progressBar.background": "#0366d6",
-    "quickInput.background": "#24292e",
+    "quickInput.background": "#24292C",
     "quickInput.foreground": "#e1e4e8",
     "scrollbar.shadow": "#0008",
     "scrollbarSlider.activeBackground": "#6a737d88",
@@ -121,33 +124,33 @@
     "scrollbarSlider.hoverBackground": "#6a737d44",
     "settings.headerForeground": "#e1e4e8",
     "settings.modifiedItemIndicator": "#0366d6",
-    "sideBar.background": "#1f2428",
-    "sideBar.border": "#1b1f23",
+    "sideBar.background": "#1f2425",
+    "sideBar.border": "#1b1f20",
     "sideBar.foreground": "#d1d5da",
-    "sideBarSectionHeader.background": "#1f2428",
-    "sideBarSectionHeader.border": "#1b1f23",
+    "sideBarSectionHeader.background": "#24292C",
+    "sideBarSectionHeader.border": "#1b1f20",
     "sideBarSectionHeader.foreground": "#e1e4e8",
     "sideBarTitle.foreground": "#e1e4e8",
-    "statusBar.background": "#24292e",
-    "statusBar.border": "#1b1f23",
+    "statusBar.background": "#24292C",
+    "statusBar.border": "#1b1f20",
     "statusBar.debuggingBackground": "#931c06",
     "statusBar.debuggingForeground": "#fff",
     "statusBar.foreground": "#d1d5da",
-    "statusBar.noFolderBackground": "#24292e",
+    "statusBar.noFolderBackground": "#24292C",
     "statusBarItem.prominentBackground": "#282e34",
-    "statusBarItem.remoteBackground": "#24292e",
+    "statusBarItem.remoteBackground": "#24292C",
     "statusBarItem.remoteForeground": "#d1d5da",
-    "tab.activeBackground": "#24292e",
-    "tab.activeBorder": "#24292e",
+    "tab.activeBackground": "#24292C",
+    "tab.activeBorder": "#24292C",
     "tab.activeBorderTop": "#f9826c",
     "tab.activeForeground": "#e1e4e8",
-    "tab.border": "#1b1f23",
-    "tab.hoverBackground": "#24292e",
-    "tab.inactiveBackground": "#1f2428",
+    "tab.border": "#1b1f20",
+    "tab.hoverBackground": "#24292C",
+    "tab.inactiveBackground": "#24292C",
     "tab.inactiveForeground": "#959da5",
-    "tab.unfocusedActiveBorder": "#24292e",
-    "tab.unfocusedActiveBorderTop": "#1b1f23",
-    "tab.unfocusedHoverBackground": "#24292e",
+    "tab.unfocusedActiveBorder": "#24292C",
+    "tab.unfocusedActiveBorderTop": "#1b1f20",
+    "tab.unfocusedHoverBackground": "#24292C",
     "terminal.ansiBlack": "#586069",
     "terminal.ansiBlue": "#2188ff",
     "terminal.ansiBrightBlack": "#959da5",
@@ -168,25 +171,22 @@
     "terminal.tab.activeBorder": "#f9826c",
     "terminalCursor.background": "#586069",
     "terminalCursor.foreground": "#79b8ff",
-    "textBlockQuote.background": "#24292e",
+    "textBlockQuote.background": "#24292C",
     "textBlockQuote.border": "#444d56",
     "textCodeBlock.background": "#2f363d",
     "textLink.activeForeground": "#c8e1ff",
     "textLink.foreground": "#79b8ff",
     "textPreformat.foreground": "#d1d5da",
     "textSeparator.foreground": "#586069",
-    "titleBar.activeBackground": "#24292e",
+    "titleBar.activeBackground": "#24292C",
     "titleBar.activeForeground": "#e1e4e8",
-    "titleBar.border": "#1b1f23",
-    "titleBar.inactiveBackground": "#1f2428",
+    "titleBar.border": "#1b1f20",
+    "titleBar.inactiveBackground": "#24292C",
     "titleBar.inactiveForeground": "#959da5",
     "tree.indentGuidesStroke": "#2f363d",
     "welcomePage.buttonBackground": "#2f363d",
     "welcomePage.buttonHoverBackground": "#444d56"
   },
-  "displayName": "GitHub Dark",
-  "name": "github-dark",
-  "semanticHighlighting": true,
   "tokenColors": [
     {
       "scope": ["comment", "punctuation.definition.comment", "string.comment"],
@@ -196,7 +196,6 @@
     },
     {
       "scope": [
-        "constant",
         "entity.name.constant",
         "variable.other.constant",
         "variable.other.enummember",
@@ -207,9 +206,36 @@
       }
     },
     {
-      "scope": ["entity", "entity.name"],
+      "scope": "constant",
       "settings": {
-        "foreground": "#b392f0"
+        "foreground": "#F3F4F0"
+      }
+    },
+    {
+      "scope": [
+        "keyword.other.unit.deg.css",
+        "keyword.other.unit.ex.css",
+        "keyword.other.unit.fr.css",
+        "keyword.other.unit.in.css",
+        "keyword.other.unit.mm.css",
+        "keyword.other.unit.pc.css",
+        "keyword.other.unit.pt.css",
+        "keyword.other.unit.px.css",
+        "keyword.other.unit.rem.css",
+        "keyword.other.unit.vh.css",
+        "keyword.other.unit.vw.css",
+        "keyword.other.unit.vmin.css",
+        "keyword.other.unit.vmax.css",
+        "keyword.other.unit.percentage.css"
+      ],
+      "settings": {
+        "foreground": "#FFAc71"
+      }
+    },
+    {
+      "scope": ["entity", "entity.name", "variable.parameter.graphql"],
+      "settings": {
+        "foreground": "#F3F4F0"
       }
     },
     {
@@ -227,7 +253,13 @@
     {
       "scope": "keyword",
       "settings": {
-        "foreground": "#f97583"
+        "foreground": "#C2F653"
+      }
+    },
+    {
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#ECFAD1"
       }
     },
     {
@@ -257,9 +289,9 @@
       }
     },
     {
-      "scope": "support",
+      "scope": ["support", "support.type.graphql"],
       "settings": {
-        "foreground": ""
+        "foreground": "#FF99E0"
       }
     },
     {
@@ -269,7 +301,7 @@
       }
     },
     {
-      "scope": "variable",
+      "scope": ["variable", "support.type.property-name.json"],
       "settings": {
         "foreground": "#dbf6a2"
       }
@@ -314,7 +346,7 @@
         "background": "#f97583",
         "content": "^M",
         "fontStyle": "italic underline",
-        "foreground": "#24292e"
+        "foreground": "#24292C"
       }
     },
     {
@@ -324,7 +356,7 @@
       }
     },
     {
-      "scope": "string variable",
+      "scope": ["string variable"],
       "settings": {
         "foreground": "#79b8ff"
       }
@@ -511,11 +543,10 @@
       }
     },
     {
-      "scope": ["punctuation"],
+      "scope": ["punctuation", "meta.selectionset.graphql"],
       "settings": {
         "foreground": "#6E7557"
       }
     }
-  ],
-  "type": "dark"
+  ]
 }
diff --git a/src/_design-system/syntax/index.js b/src/_design-system/syntax/index.js
index f6a443e76e..028fad3b7a 100644
--- a/src/_design-system/syntax/index.js
+++ b/src/_design-system/syntax/index.js
@@ -4,10 +4,10 @@ import fs from "fs/promises"
 
 const [dark, light] = await Promise.all([
   fs
-    .readFile(new URL("./github-dark.json", import.meta.url), "utf-8")
+    .readFile(new URL("./dark.json", import.meta.url), "utf-8")
     .then(JSON.parse),
   fs
-    .readFile(new URL("./min-light.json", import.meta.url), "utf-8")
+    .readFile(new URL("./light.json", import.meta.url), "utf-8")
     .then(JSON.parse),
 ])
 
diff --git a/src/_design-system/syntax/min-light.json b/src/_design-system/syntax/light.json
similarity index 95%
rename from src/_design-system/syntax/min-light.json
rename to src/_design-system/syntax/light.json
index 95a770ce8d..dfdb4fc134 100644
--- a/src/_design-system/syntax/min-light.json
+++ b/src/_design-system/syntax/light.json
@@ -1,4 +1,7 @@
 {
+  "name": "k-colorable light, based on Min Light",
+  "type": "light",
+  "semanticHighlighting": true,
   "colors": {
     "activityBar.background": "#f6f6f6",
     "activityBar.foreground": "#9E9E9E",
@@ -24,7 +27,7 @@
     "diffEditor.insertedTextBackground": "#b7e7a44b",
     "diffEditor.removedTextBackground": "#e597af52",
     "editor.background": "#ffffff",
-    "editor.foreground": "#212121",
+    "editor.foreground": "#6E7557",
     "editor.lineHighlightBorder": "#f2f2f2",
     "editorBracketMatch.background": "#E7F3FF",
     "editorBracketMatch.border": "#c8e1ff",
@@ -108,8 +111,6 @@
     "titleBar.border": "#FFFFFF00",
     "titleBar.inactiveBackground": "#f6f6f6"
   },
-  "displayName": "Min Light",
-  "name": "min-light",
   "tokenColors": [
     {
       "settings": {
@@ -121,9 +122,7 @@
         "keyword.operator.accessor",
         "meta.group.braces.round.function.arguments",
         "meta.template.expression",
-        "markup.fenced_code meta.embedded.block",
-        "punctuation.operation.graphql",
-        "punctuation"
+        "markup.fenced_code meta.embedded.block"
       ],
       "settings": {
         "foreground": "#363A2C"
@@ -216,10 +215,11 @@
         "meta.instance.constructor",
         "entity.other.attribute-name",
         "entity.name.function",
-        "constant.keyword.clojure"
+        "constant.keyword.clojure",
+        "variable.parameter.graphql"
       ],
       "settings": {
-        "foreground": "#6f42c1"
+        "foreground": "#0E0F0B"
       }
     },
     {
@@ -308,7 +308,12 @@
       "settings": {
         "foreground": "#E10198"
       }
+    },
+    {
+      "scope": ["punctuation", "meta.selectionset.graphql"],
+      "settings": {
+        "foreground": "#6E7557"
+      }
     }
-  ],
-  "type": "light"
+  ]
 }
diff --git a/src/components/index-page/graphql-advantages/index.tsx b/src/components/index-page/graphql-advantages/index.tsx
index 0e1b5a9e28..7e24cde0b9 100644
--- a/src/components/index-page/graphql-advantages/index.tsx
+++ b/src/components/index-page/graphql-advantages/index.tsx
@@ -3,6 +3,7 @@ import { SectionLabel } from "@/app/conf/_design-system/section-label"
 import { ReactNode } from "react"
 
 import { PrecisionFigure } from "./precision"
+import { OptimizationFigure } from "./optimization"
 
 export function GraphQLAdvantages() {
   return (
@@ -58,7 +59,7 @@ export function GraphQLAdvantages() {
             name="Versionless"
             bigText="Evolve without versions"
             text="Add new fields and types without impacting existing queries. Deprecate outdated fields while keeping APIs clean and future-proof. By using a single evolving version, GraphQL APIs give apps continuous access to new features and encourage more maintainable server code."
-            figure={null}
+            figure={}
             cta={

- diff --git a/src/components/index-page/powerful-tools.tsx b/src/components/index-page/powerful-tools.tsx index f56f703ee4..4944bd1f91 100644 --- a/src/components/index-page/powerful-tools.tsx +++ b/src/components/index-page/powerful-tools.tsx @@ -21,35 +21,6 @@ export function PowerFulTools() { by leveraging your API’s type system.

-
- - -
) } diff --git a/tsconfig.json b/tsconfig.json index 52c58430ed..8129519fd7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -23,6 +23,6 @@ } ] }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/_design-system/syntax/index.js"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } From 11bb166fd92c4e618d9b3e8ff56b42db07a3ba8f Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 23 Jul 2025 22:01:53 +0200 Subject: [PATCH 09/18] Add extra padding --- .../index-page/graphql-advantages/productivity.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/index-page/graphql-advantages/productivity.tsx b/src/components/index-page/graphql-advantages/productivity.tsx index ed4f354f60..36bc48d50a 100644 --- a/src/components/index-page/graphql-advantages/productivity.tsx +++ b/src/components/index-page/graphql-advantages/productivity.tsx @@ -4,7 +4,8 @@ const VIDEOS_DIR = export function ProductivityFigure() { return (
-
+
+
+
) From 84604d8671b3f5a2b47dc139a9a3c46b77115d40 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Wed, 23 Jul 2025 23:22:51 +0200 Subject: [PATCH 10/18] Improve the landing --- src/_design-system/syntax/light.json | 4 +- src/components/code-blocks/index.tsx | 6 +- .../graphql-advantages/consistency.tsx | 71 +++++++++++++++++++ .../index-page/graphql-advantages/index.tsx | 25 +++++-- src/components/index-page/index.tsx | 2 - src/components/index-page/type-system.tsx | 70 ------------------ 6 files changed, 92 insertions(+), 86 deletions(-) create mode 100644 src/components/index-page/graphql-advantages/consistency.tsx delete mode 100644 src/components/index-page/type-system.tsx diff --git a/src/_design-system/syntax/light.json b/src/_design-system/syntax/light.json index dfdb4fc134..2d1be9542b 100644 --- a/src/_design-system/syntax/light.json +++ b/src/_design-system/syntax/light.json @@ -27,7 +27,7 @@ "diffEditor.insertedTextBackground": "#b7e7a44b", "diffEditor.removedTextBackground": "#e597af52", "editor.background": "#ffffff", - "editor.foreground": "#6E7557", + "editor.foreground": "#4f533f", "editor.lineHighlightBorder": "#f2f2f2", "editorBracketMatch.background": "#E7F3FF", "editorBracketMatch.border": "#c8e1ff", @@ -193,7 +193,6 @@ "entity.name.tag.yaml", "support.function.node", "support.type.property-name.json", - "punctuation.separator.key-value", "punctuation.definition.template-expression" ], "settings": { @@ -270,7 +269,6 @@ "scope": [ "punctuation.definition.arguments", "punctuation.definition.dict", - "punctuation.separator", "meta.function-call.arguments" ], "settings": { diff --git a/src/components/code-blocks/index.tsx b/src/components/code-blocks/index.tsx index 5a402d9c16..a28c34f216 100644 --- a/src/components/code-blocks/index.tsx +++ b/src/components/code-blocks/index.tsx @@ -15,8 +15,8 @@ import _V2 from "./v2.mdx" import _V3 from "./v3.mdx" import _V4 from "./v4.mdx" import _V5 from "./v5.mdx" -import _Query from "./query.mdx" -import _Schema from "./schema.mdx" +export { default as Query } from "./query.mdx" +export { default as Schema } from "./schema.mdx" import _QueryHeroFriends from "./query.hero-friends.mdx" import _ResponseHeroFriends from "./response.hero-friends.mdx" import _PredictableResult from "./predictable-result.mdx" @@ -35,8 +35,6 @@ export const Code2 = () => <_Code2 components={components} /> export const Code3 = () => <_Code3 components={components} /> export const Code4 = () => <_Code4 components={components} /> -export const Query = () => <_Query components={components} /> -export const Schema = () => <_Schema components={components} /> export const CodeA = () => <_CodeA components={components} /> export const CodeB = () => <_CodeB components={components} /> export const CodeC = () => <_CodeC components={components} /> diff --git a/src/components/index-page/graphql-advantages/consistency.tsx b/src/components/index-page/graphql-advantages/consistency.tsx new file mode 100644 index 0000000000..0deadcd239 --- /dev/null +++ b/src/components/index-page/graphql-advantages/consistency.tsx @@ -0,0 +1,71 @@ +import { ComponentPropsWithoutRef, useEffect, useRef } from "react" +import { clsx } from "clsx" +import { Code } from "nextra/components" + +import { Pre } from "@/components/pre" + +import { Query, Schema } from "../../code-blocks" + +const components = { + pre: (props: ComponentPropsWithoutRef) => ( + 
+  ),
+  code: Code,
+}
+
+export function ConsistencyFigure() {
+  const queryRef = useRef(null)
+  useEffect(() => {
+    const [queryCode, responseCode] = queryRef.current!.querySelectorAll(
+      "code",
+    ) as unknown as HTMLElement[]
+    let line = 0
+    const typeLines = [1, 5, 6, 5, 7, 12, 13, 8, 17, 18, 19, 12]
+    const queryLines = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13]
+    let timer: any
+
+    const highlightLine = () => {
+      // Reset previous line
+      queryCode.children[queryLines.at(line - 1)!].classList.remove(
+        "highlighted",
+      )
+      responseCode.children[typeLines.at(line - 1)!].classList.remove(
+        "highlighted",
+      )
+
+      // TODO: Whenever we're adding .highlighted, we should also ensure it's visible on screen.
+      // We can simplify this by scrolling to bottom in last 3 steps.
+      queryCode.children[queryLines.at(line)!].classList.add("highlighted")
+      responseCode.children[typeLines.at(line)!].classList.add("highlighted")
+      line = (line + 1) % typeLines.length
+
+      timer = setTimeout(highlightLine, 1_000 + Math.random() * 200)
+    }
+    highlightLine()
+    return () => clearTimeout(timer)
+  }, [])
+
+  return (
+    

+      

+        
+        
+      

+    

+  )
+}
diff --git a/src/components/index-page/graphql-advantages/index.tsx b/src/components/index-page/graphql-advantages/index.tsx
index 6505c3ca67..faf42ae252 100644
--- a/src/components/index-page/graphql-advantages/index.tsx
+++ b/src/components/index-page/graphql-advantages/index.tsx
@@ -1,10 +1,12 @@
 import { Button } from "@/app/conf/_design-system/button"
 import { SectionLabel } from "@/app/conf/_design-system/section-label"
 import { ReactNode } from "react"
+import { clsx } from "clsx"
 
 import { PrecisionFigure } from "./precision"
 import { OptimizationFigure } from "./optimization"
 import { ProductivityFigure } from "./productivity"
+import { ConsistencyFigure } from "./consistency"
 
 export function GraphQLAdvantages() {
   return (
@@ -48,8 +50,8 @@ export function GraphQLAdvantages() {
           }
             cta={
- diff --git a/src/components/index-page/type-system.tsx b/src/components/index-page/type-system.tsx deleted file mode 100644 index 1b6d954f6e..0000000000 --- a/src/components/index-page/type-system.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import { useEffect, useRef } from "react" -import { Query, Schema } from "../code-blocks" -import { clsx } from "clsx" - -export function TypeSystem() { - const queryRef = useRef(null) - useEffect(() => { - const [queryCode, responseCode] = queryRef.current!.querySelectorAll( - "code", - ) as unknown as HTMLElement[] - let line = 0 - const typeLines = [1, 5, 6, 5, 7, 12, 13, 8, 17, 18, 19, 12] - const queryLines = [1, 2, 3, 4, 5, 6, 7, 9, 10, 11, 12, 13] - let timer: any - - const highlightLine = () => { - // Reset previous line - queryCode.children[queryLines.at(line - 1)!].classList.remove( - "highlighted", - ) - responseCode.children[typeLines.at(line - 1)!].classList.remove( - "highlighted", - ) - - queryCode.children[queryLines.at(line)!].classList.add("highlighted") - responseCode.children[typeLines.at(line)!].classList.add("highlighted") - line = (line + 1) % typeLines.length - - timer = setTimeout(highlightLine, 1_000 + Math.random() * 200) - } - highlightLine() - return () => clearTimeout(timer) - }, []) - - return ( -
-
-
-

- Describe what's possible
- with a type system -

- {/*Illustration of a type IDL following a query by line*/} - {/*Under: a server <-> client (Capabilities, Requirements)?*/} -

- GraphQL APIs are organized in terms of types and fields, not - endpoints. Access the full capabilities of your data from a single - endpoint. GraphQL uses types to ensure Apps only ask for what's - possible and provide clear and helpful errors. Apps can use types to - avoid writing manual parsing code. -

-
-
- - -
-
-
- ) -} From 22b82e08a4abd401e564b854f8453cc35263723f Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 24 Jul 2025 20:06:30 +0200 Subject: [PATCH 11/18] wip --- src/components/index-page/graphql-advantages/index.tsx | 3 ++- .../versionless.tsx} | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) rename src/components/index-page/{without-version.tsx => graphql-advantages/versionless.tsx} (95%) diff --git a/src/components/index-page/graphql-advantages/index.tsx b/src/components/index-page/graphql-advantages/index.tsx index faf42ae252..7a90ebcb3e 100644 --- a/src/components/index-page/graphql-advantages/index.tsx +++ b/src/components/index-page/graphql-advantages/index.tsx @@ -7,6 +7,7 @@ import { PrecisionFigure } from "./precision" import { OptimizationFigure } from "./optimization" import { ProductivityFigure } from "./productivity" import { ConsistencyFigure } from "./consistency" +import { VersionlessFigure } from "./versionless" export function GraphQLAdvantages() { return ( @@ -62,7 +63,7 @@ export function GraphQLAdvantages() { name="Versionless" bigText="Evolve without versions" text="Add new fields and types without impacting existing queries. Deprecate outdated fields while keeping APIs clean and future-proof. By using a single evolving version, GraphQL APIs give apps continuous access to new features and encourage more maintainable server code." - figure={null} + figure={} cta={