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/_design-system/syntax/dark.json b/src/_design-system/syntax/dark.json new file mode 100644 index 0000000000..6897a3fe5b --- /dev/null +++ b/src/_design-system/syntax/dark.json @@ -0,0 +1,552 @@ +{ + "name": "k-colorable dark, based on GitHub Dark", + "type": "dark", + "semanticHighlighting": true, + "colors": { + "activityBar.activeBorder": "#f9826c", + "activityBar.background": "#24292C", + "activityBar.border": "#1b1f20", + "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": "#1b1f20", + "debugToolBar.background": "#2b3036", + "descriptionForeground": "#959da5", + "diffEditor.insertedTextBackground": "#28a74530", + "diffEditor.removedTextBackground": "#d73a4930", + "dropdown.background": "#2f363d", + "dropdown.border": "#1b1f20", + "dropdown.foreground": "#e1e4e8", + "dropdown.listBackground": "#24292C", + "editor.background": "#24292c", + "editor.findMatchBackground": "#ffd33d44", + "editor.findMatchHighlightBackground": "#ffd33d22", + "editor.focusedStackFrameHighlightBackground": "#2b6a3033", + "editor.foldBackground": "#58606915", + "editor.foreground": "#CFD3C5", + "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": "#79b8ff", + "editorBracketHighlight.foreground2": "#ffab70", + "editorBracketHighlight.foreground3": "#b392f0", + "editorBracketHighlight.foreground4": "#79b8ff", + "editorBracketHighlight.foreground5": "#ffab70", + "editorBracketHighlight.foreground6": "#b392f0", + "editorBracketMatch.background": "#17E5E650", + "editorBracketMatch.border": "#17E5E600", + "editorCursor.foreground": "#c8e1ff", + "editorError.foreground": "#f97583", + "editorGroup.border": "#1b1f20", + "editorGroupHeader.tabsBackground": "#24292C", + "editorGroupHeader.tabsBorder": "#1b1f20", + "editorGutter.addedBackground": "#28a745", + "editorGutter.deletedBackground": "#ea4a5a", + "editorGutter.modifiedBackground": "#2188ff", + "editorIndentGuide.activeBackground": "#444d56", + "editorIndentGuide.background": "#2f363d", + "editorLineNumber.activeForeground": "#e1e4e8", + "editorLineNumber.foreground": "#444d56", + "editorOverviewRuler.border": "#1b1f20", + "editorWarning.foreground": "#ffea7f", + "editorWhitespace.foreground": "#444d56", + "editorWidget.background": "#24292C", + "errorForeground": "#f97583", + "focusBorder": "#005cc5", + "foreground": "#d1d5da", + "gitDecoration.addedResourceForeground": "#34d058", + "gitDecoration.conflictingResourceForeground": "#ffab70", + "gitDecoration.deletedResourceForeground": "#ea4a5a", + "gitDecoration.ignoredResourceForeground": "#6a737d", + "gitDecoration.modifiedResourceForeground": "#79b8ff", + "gitDecoration.submoduleResourceForeground": "#6a737d", + "gitDecoration.untrackedResourceForeground": "#34d058", + "input.background": "#2f363b", + "input.border": "#1b1f20", + "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": "#24292b", + "notificationCenterHeader.foreground": "#959da5", + "notifications.background": "#2f363b", + "notifications.border": "#1b1f20", + "notifications.foreground": "#e1e4e8", + "notificationsErrorIcon.foreground": "#ea4a5a", + "notificationsInfoIcon.foreground": "#79b8ff", + "notificationsWarningIcon.foreground": "#ffab70", + "panel.background": "#24292C", + "panel.border": "#1b1f20", + "panelInput.border": "#2f363d", + "panelTitle.activeBorder": "#f9826c", + "panelTitle.activeForeground": "#e1e4e8", + "panelTitle.inactiveForeground": "#959da5", + "peekViewEditor.background": "#24292C88", + "peekViewEditor.matchHighlightBackground": "#ffd33d33", + "peekViewResult.background": "#1f2425", + "peekViewResult.matchHighlightBackground": "#ffd33d33", + "pickerGroup.border": "#444d56", + "pickerGroup.foreground": "#e1e4e8", + "progressBar.background": "#0366d6", + "quickInput.background": "#24292C", + "quickInput.foreground": "#e1e4e8", + "scrollbar.shadow": "#0008", + "scrollbarSlider.activeBackground": "#6a737d88", + "scrollbarSlider.background": "#6a737d33", + "scrollbarSlider.hoverBackground": "#6a737d44", + "settings.headerForeground": "#e1e4e8", + "settings.modifiedItemIndicator": "#0366d6", + "sideBar.background": "#1f2425", + "sideBar.border": "#1b1f20", + "sideBar.foreground": "#d1d5da", + "sideBarSectionHeader.background": "#24292C", + "sideBarSectionHeader.border": "#1b1f20", + "sideBarSectionHeader.foreground": "#e1e4e8", + "sideBarTitle.foreground": "#e1e4e8", + "statusBar.background": "#24292C", + "statusBar.border": "#1b1f20", + "statusBar.debuggingBackground": "#931c06", + "statusBar.debuggingForeground": "#fff", + "statusBar.foreground": "#d1d5da", + "statusBar.noFolderBackground": "#24292C", + "statusBarItem.prominentBackground": "#282e34", + "statusBarItem.remoteBackground": "#24292C", + "statusBarItem.remoteForeground": "#d1d5da", + "tab.activeBackground": "#24292C", + "tab.activeBorder": "#24292C", + "tab.activeBorderTop": "#f9826c", + "tab.activeForeground": "#e1e4e8", + "tab.border": "#1b1f20", + "tab.hoverBackground": "#24292C", + "tab.inactiveBackground": "#24292C", + "tab.inactiveForeground": "#959da5", + "tab.unfocusedActiveBorder": "#24292C", + "tab.unfocusedActiveBorderTop": "#1b1f20", + "tab.unfocusedHoverBackground": "#24292C", + "terminal.ansiBlack": "#586069", + "terminal.ansiBlue": "#2188ff", + "terminal.ansiBrightBlack": "#959da5", + "terminal.ansiBrightBlue": "#79b8ff", + "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": "#79b8ff", + "textBlockQuote.background": "#24292C", + "textBlockQuote.border": "#444d56", + "textCodeBlock.background": "#2f363d", + "textLink.activeForeground": "#c8e1ff", + "textLink.foreground": "#79b8ff", + "textPreformat.foreground": "#d1d5da", + "textSeparator.foreground": "#586069", + "titleBar.activeBackground": "#24292C", + "titleBar.activeForeground": "#e1e4e8", + "titleBar.border": "#1b1f20", + "titleBar.inactiveBackground": "#24292C", + "titleBar.inactiveForeground": "#959da5", + "tree.indentGuidesStroke": "#2f363d", + "welcomePage.buttonBackground": "#2f363d", + "welcomePage.buttonHoverBackground": "#444d56" + }, + "tokenColors": [ + { + "scope": ["comment", "punctuation.definition.comment", "string.comment"], + "settings": { + "foreground": "#6a737d" + } + }, + { + "scope": [ + "entity.name.constant", + "variable.other.constant", + "variable.other.enummember", + "variable.language" + ], + "settings": { + "foreground": "#79b8ff" + } + }, + { + "scope": "constant", + "settings": { + "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" + } + }, + { + "scope": "variable.parameter.function", + "settings": { + "foreground": "#e1e4e8" + } + }, + { + "scope": "entity.name.tag", + "settings": { + "foreground": "#85e89d" + } + }, + { + "scope": "keyword", + "settings": { + "foreground": "#C2F653" + } + }, + { + "scope": "keyword.operator", + "settings": { + "foreground": "#ECFAD1" + } + }, + { + "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", "support.type.graphql"], + "settings": { + "foreground": "#FF99E0" + } + }, + { + "scope": "meta.property-name", + "settings": { + "foreground": "#79b8ff" + } + }, + { + "scope": ["variable", "support.type.property-name.json"], + "settings": { + "foreground": "#dbf6a2" + } + }, + { + "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": "#24292C" + } + }, + { + "scope": "message.error", + "settings": { + "foreground": "#fdaeb7" + } + }, + { + "scope": ["string variable"], + "settings": { + "foreground": "#79b8ff" + } + }, + { + "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": "#79b8ff" + } + }, + { + "scope": "support.variable", + "settings": { + "foreground": "#79b8ff" + } + }, + { + "scope": "meta.module-reference", + "settings": { + "foreground": "#79b8ff" + } + }, + { + "scope": "punctuation.definition.list.begin.markdown", + "settings": { + "foreground": "#dbf6a2" + } + }, + { + "scope": ["markup.heading", "markup.heading entity.name"], + "settings": { + "fontStyle": "bold", + "foreground": "#79b8ff" + } + }, + { + "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": "#79b8ff" + } + }, + { + "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": "#79b8ff", + "foreground": "#2f363d" + } + }, + { + "scope": "meta.diff.range", + "settings": { + "fontStyle": "bold", + "foreground": "#b392f0" + } + }, + { + "scope": "meta.diff.header", + "settings": { + "foreground": "#79b8ff" + } + }, + { + "scope": "meta.separator", + "settings": { + "fontStyle": "bold", + "foreground": "#79b8ff" + } + }, + { + "scope": "meta.output", + "settings": { + "foreground": "#79b8ff" + } + }, + { + "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" + } + }, + { + "scope": ["punctuation", "meta.selectionset.graphql"], + "settings": { + "foreground": "#6E7557" + } + } + ] +} diff --git a/src/_design-system/syntax/index.js b/src/_design-system/syntax/index.js new file mode 100644 index 0000000000..028fad3b7a --- /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("./dark.json", import.meta.url), "utf-8") + .then(JSON.parse), + fs + .readFile(new URL("./light.json", import.meta.url), "utf-8") + .then(JSON.parse), +]) + +export const syntaxHighlightingThemes = { light, dark } diff --git a/src/_design-system/syntax/light.json b/src/_design-system/syntax/light.json new file mode 100644 index 0000000000..2d1be9542b --- /dev/null +++ b/src/_design-system/syntax/light.json @@ -0,0 +1,317 @@ +{ + "name": "k-colorable light, based on Min Light", + "type": "light", + "semanticHighlighting": true, + "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": "#4f533f", + "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" + }, + "tokenColors": [ + { + "settings": { + "foreground": "#24292eff" + } + }, + { + "scope": [ + "keyword.operator.accessor", + "meta.group.braces.round.function.arguments", + "meta.template.expression", + "markup.fenced_code meta.embedded.block" + ], + "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.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", + "variable.parameter.graphql" + ], + "settings": { + "foreground": "#0E0F0B" + } + }, + { + "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", + "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" + } + }, + { + "scope": ["punctuation", "meta.selectionset.graphql"], + "settings": { + "foreground": "#6E7557" + } + } + ] +} diff --git a/src/components/code-blocks/index.tsx b/src/components/code-blocks/index.tsx index b130879a76..dd58a6679c 100644 --- a/src/components/code-blocks/index.tsx +++ b/src/components/code-blocks/index.tsx @@ -1,4 +1,8 @@ -import { Code, Pre } from "nextra/components" +import { Code } from "nextra/components" +import { ComponentPropsWithoutRef } from "react" +import { clsx } from "clsx" + +import { Pre } from "@/components/pre" import _CodeA from "./describe-your-data.mdx" import _CodeB from "./ask-for-what-you-want.mdx" @@ -8,13 +12,13 @@ import _Code1 from "./code1.mdx" import _Code2 from "./code2.mdx" import _Code3 from "./code3.mdx" import _Code4 from "./code4.mdx" -import _V1 from "./v1.mdx" -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 V1 } from "./v1.mdx" +export { default as V2 } from "./v2.mdx" +export { default as V3 } from "./v3.mdx" +export { default as V4 } from "./v4.mdx" +export { default as V5 } from "./v5.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" @@ -24,6 +28,17 @@ const components = { code: Code, } +export const LandingPagePre = (props: ComponentPropsWithoutRef) => ( + 
+)
+
 // Since we use `layout: 'raw'` in index page, only `` element will be replaced, but not
 // `
` and ``, for this reason we pass `components` to each MDX partial file.
 // This code could be removed in Nextra v4
@@ -33,22 +48,13 @@ 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} />
-export const V1 = () => <_V1 components={components} />
-export const V2 = () => <_V2 components={components} />
-export const V3 = () => <_V3 components={components} />
-export const V4 = () => <_V4 components={components} />
-export const V5 = () => <_V5 components={components} />
+
 export const QueryHeroFriends = () => (
   <_QueryHeroFriends components={components} />
 )
 export const ResponseHeroFriends = () => (
   <_ResponseHeroFriends components={components} />
 )
-export const PredictableResult = () => (
-  <_PredictableResult 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..fac4e78719
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/consistency.tsx
@@ -0,0 +1,64 @@
+import { useEffect, useRef } from "react"
+import { Code } from "nextra/components"
+
+import { LandingPagePre, Query, Schema } from "../../code-blocks"
+
+const components = {
+  pre: LandingPagePre,
+  code: Code,
+}
+
+export function ConsistencyFigure() {
+  const queryRef = useRef(null)
+  useEffect(() => {
+    const [queryCode, responseCode] = queryRef.current!.querySelectorAll(
+      "code",
+    ) as unknown as HTMLElement[]
+    let i = 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: ReturnType | undefined = undefined
+
+    const highlightLine = () => {
+      // Reset previous line
+      queryCode.children[queryLines.at(i - 1)!].classList.remove("highlighted")
+      responseCode.children[typeLines.at(i - 1)!].classList.remove(
+        "highlighted",
+      )
+
+      queryCode.children[queryLines.at(i)!].classList.add("highlighted")
+      responseCode.children[typeLines.at(i)!].classList.add("highlighted")
+
+      // We're scrolling to top when the first line is highlighted and we're
+      // scrolling to the  bottom when the last line is highlighted.
+      const pre = responseCode.parentElement!
+      if (i === 0) {
+        pre.scrollTo({ top: 0, behavior: "smooth" })
+      } else if (i === typeLines.length - 3) {
+        pre.scrollTo({ top: pre.scrollHeight, behavior: "smooth" })
+      }
+
+      i = (i + 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
new file mode 100644
index 0000000000..5a1c8e9435
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/index.tsx
@@ -0,0 +1,131 @@
+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"
+import { VersionlessFigure } from "./versionless"
+import { IntegrationFigure } from "./integration"
+
+export function GraphQLAdvantages() {
+  return (
+    

+      

+        GraphQL advantages
+        

+          }
+            cta={
+              
+            }
+          />
+          }
+            cta={
+              
+            }
+          />
+          }
+            cta={
+              
+            }
+          />
+          }
+            cta={
+              
+            }
+          />
+          }
+            cta={
+              
+            }
+          />
+          }
+            cta={
+              
+            }
+          />
+        

+      

+    

+  )
+}
+
+function Subsection({
+  name,
+  bigText,
+  cta,
+  figure,
+  text,
+  className,
+}: {
+  name: string
+  bigText: ReactNode
+  cta: ReactNode
+  figure: ReactNode
+  text: ReactNode
+  className?: string
+}) {
+  return (
+    

+      

+        {name}
+      

+      
+        {bigText}
+      
+      

+        {figure}
+      

+      

+        {text}
+      

+      
{cta}

+    

+  )
+}
diff --git a/src/components/index-page/graphql-advantages/integration.tsx b/src/components/index-page/graphql-advantages/integration.tsx
new file mode 100644
index 0000000000..032a7faebf
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/integration.tsx
@@ -0,0 +1,38 @@
+export function IntegrationFigure() {
+  const languages = [
+    "C SHARP",
+    "NODE.JS",
+    "PYTHON",
+    "RUST",
+    "POSTGRES",
+    "JAVASCRIPT",
+  ]
+
+  return (
+    

+      

+        
+          GRAPHQL
+        
+      

+
+      

+        

+          {[...languages, ...languages].map((language, index) => (
+            

+              
+                {language}
+              
+            

+          ))}
+        

+      

+    

+  )
+}
diff --git a/src/components/index-page/graphql-advantages/optimization.svg b/src/components/index-page/graphql-advantages/optimization.svg
new file mode 100644
index 0000000000..ba18779d22
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/optimization.svg
@@ -0,0 +1,132 @@
+
+  
+  
+  
+  
+  
+  
+  
+  
+  
+    
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+    
+      
+      
+      
+      
+    
+  
+
diff --git a/src/components/index-page/graphql-advantages/optimization.tsx b/src/components/index-page/graphql-advantages/optimization.tsx
new file mode 100644
index 0000000000..f0f67f3f7f
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/optimization.tsx
@@ -0,0 +1,12 @@
+import OptimizationSvg from "./optimization.svg?svgr"
+
+export function OptimizationFigure() {
+  return (
+    

+      
+    

+  )
+}
diff --git a/src/components/index-page/predictable-results/index.module.css b/src/components/index-page/graphql-advantages/precision.module.css
similarity index 100%
rename from src/components/index-page/predictable-results/index.module.css
rename to src/components/index-page/graphql-advantages/precision.module.css
diff --git a/src/components/index-page/predictable-results/index.tsx b/src/components/index-page/graphql-advantages/precision.tsx
similarity index 50%
rename from src/components/index-page/predictable-results/index.tsx
rename to src/components/index-page/graphql-advantages/precision.tsx
index 0d670546c7..a88b17f9aa 100644
--- a/src/components/index-page/predictable-results/index.tsx
+++ b/src/components/index-page/graphql-advantages/precision.tsx
@@ -1,11 +1,31 @@
-import { useEffect, useRef } from "react"
-import { PredictableResult } from "../../code-blocks"
-import { Pre } from "nextra/components"
+import { ComponentPropsWithoutRef, useEffect, useRef } from "react"
+import { Code } from "nextra/components"
 import { clsx } from "clsx"
-import classes from "./index.module.css"
 
-export function PredictableResults() {
+import { Pre } from "@/components/pre"
+
+import PredictableResult from "../../code-blocks/predictable-result.mdx"
+
+import classes from "./precision.module.css"
+
+const components = {
+  pre: (props: ComponentPropsWithoutRef) => (
+    
+  ),
+  code: Code,
+}
+
+export function PrecisionFigure() {
   const ref = useRef(null)
+
   useEffect(() => {
     const showResponse = (num: Number) => {
       const lines = ref.current!.querySelectorAll(
@@ -66,51 +86,43 @@ export function PredictableResults() {
 
     return () => clearTimeout(timer)
   }, [])
+
+  const Pre = components.pre
+
   return (
-    

-      

-        

-          

-            Ask for what you need, 

-            get exactly that
-          

-          {/*[Illustration: just a simple query and response?]*/}
-          

-            Send a GraphQL query to your API and get exactly what you need,
-            nothing more and nothing less. GraphQL queries always return
-            predictable results. Apps using GraphQL are fast and stable because
-            they control the data they get, not the server.
-          

-        

-        

-          
-            {"{"}
-            {"\n  hero {"}
-            {"\n    name"}
-            {"\n    height\n    mass".split("").map((char, i) => (
-              
-                {char === "\n" ? 
 : char}
-              
-            ))}
-            
-            {"\n  }"}
-            {"\n}"}
-          

-          
-        

-      

+    

+      
+        {"{"}
+        {"\n  "}
+        {"hero"}
+        {" {"}
+        
+          {"\n    name"}
+        
+        {"\n    height\n    mass".split("").map((char, i) => (
+          
+            {char === "\n" ? 
 : char}
+          
+        ))}
+        
+        {"\n  }"}
+        {"\n}"}
+      

+      
     

   )
 }
diff --git a/src/components/index-page/graphql-advantages/productivity.tsx b/src/components/index-page/graphql-advantages/productivity.tsx
new file mode 100644
index 0000000000..36bc48d50a
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/productivity.tsx
@@ -0,0 +1,36 @@
+const VIDEOS_DIR =
+  "https://github.com/graphql/graphql.github.io/raw/refs/heads/source/public/img"
+
+export function ProductivityFigure() {
+  return (
+    

+      

+        

+        
+        
+        

+      

+    

+  )
+}
diff --git a/src/components/index-page/graphql-advantages/versionless.css b/src/components/index-page/graphql-advantages/versionless.css
new file mode 100644
index 0000000000..90aeb26a6f
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/versionless.css
@@ -0,0 +1,121 @@
+.add,
+.remove {
+  @apply shadow-[2px_0_currentColor_inset];
+}
+
+.add {
+  @apply !bg-green-200/35 text-green-300 dark:!bg-green-200/15;
+
+  &::before {
+    @apply absolute start-1.5 content-['+'];
+  }
+}
+
+.remove {
+  @apply !bg-red-200/35 text-red-300 dark:!bg-red-200/15;
+
+  &::before {
+    @apply absolute start-1.5 content-['-'];
+  }
+}
+
+.versionless-figure {
+  @apply relative left-0 flex h-full select-none;
+
+  & pre,
+  & code,
+  .v1,
+  .v2,
+  .v3,
+  .v4,
+  .v5 {
+    @apply h-full;
+  }
+
+  & pre {
+    @apply border-none;
+    background: none !important;
+  }
+
+  & code {
+    grid-auto-rows: min-content;
+  }
+
+  .v1,
+  .v2,
+  .v3,
+  .v4 {
+    @apply w-1/2 shrink-0 border-r border-neu-200 dark:border-neu-50;
+  }
+
+  .v5 {
+    @apply w-full shrink-0;
+  }
+
+  &[data-step="1"] {
+    .v2 {
+      opacity: 1;
+      transition: opacity 0.5s ease-in-out;
+    }
+  }
+
+  &[data-step="2"] {
+    left: calc(-1 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="3"] {
+    left: calc(-2 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="4"] {
+    left: calc(-3 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="5"] {
+    left: calc(-4 * 50%);
+    transition: left 0.5s ease-in-out;
+  }
+
+  &[data-step="6"] {
+    .v5 {
+      left: calc(-4 * 50%);
+      opacity: 0;
+      transition: opacity 0.5s ease-in-out;
+    }
+  }
+
+  &[data-step="0"],
+  &[data-step="6"] {
+    .v2 {
+      @apply opacity-0;
+    }
+  }
+
+  &[data-step="1"] .v2 code > span:nth-child(5) {
+    @apply add;
+  }
+
+  &[data-step="2"] .v3 code > span:nth-child(6) {
+    @apply add;
+  }
+
+  &[data-step="3"] .v4 code > {
+    span:nth-child(7),
+    span:nth-last-child(-n + 5) {
+      @apply add;
+    }
+  }
+
+  &[data-step="4"] {
+    .v4 code > span:nth-child(6) {
+      @apply remove;
+    }
+
+    .v5 code > span:nth-child(6) {
+      @apply add;
+    }
+  }
+}
diff --git a/src/components/index-page/graphql-advantages/versionless.tsx b/src/components/index-page/graphql-advantages/versionless.tsx
new file mode 100644
index 0000000000..95ea24a76e
--- /dev/null
+++ b/src/components/index-page/graphql-advantages/versionless.tsx
@@ -0,0 +1,66 @@
+import { useEffect, useRef } from "react"
+import { Code } from "nextra/components"
+import { clsx } from "clsx"
+
+import { LandingPagePre, V1, V2, V3, V4, V5 } from "../../code-blocks"
+
+import "./versionless.css"
+
+const components = {
+  pre: LandingPagePre,
+  code: Code,
+}
+
+export function VersionlessFigure() {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    let i = -1
+    const inView = ref.current!
+
+    function move() {
+      i = (i + 1) % 7
+      inView.dataset.step = i.toString()
+    }
+
+    move()
+    const interval = setInterval(move, 2200)
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  return (
+    

+      

+        

+          

+            
+          

+          

+            
+          

+          

+            
+          

+          

+            
+          

+          

+            
+          

+        

+      

+    

+  )
+}
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/components/index-page/index.tsx b/src/components/index-page/index.tsx
index 4a9c67a052..26109e0e9b 100644
--- a/src/components/index-page/index.tsx
+++ b/src/components/index-page/index.tsx
@@ -1,16 +1,12 @@
 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"
-import { WithoutVersion } from "./without-version"
 import { BringYourOwnCode } from "./bring-your-own-code"
-import { WhoIsUsing } from "./who-is-using"
 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 +17,7 @@ export function IndexPage() {
       
       
       
+      
       

         
A query language for your API

         

@@ -31,13 +28,8 @@ export function IndexPage() {
           easier to evolve APIs over time, and enables powerful developer tools.
         

       

-      
       
-      
-      
-      
       
-      
     

   )
 }
diff --git a/src/components/index-page/powered-by-community.tsx b/src/components/index-page/powered-by-community.tsx
index 0a75883f47..128e1da1ef 100644
--- a/src/components/index-page/powered-by-community.tsx
+++ b/src/components/index-page/powered-by-community.tsx
@@ -4,7 +4,7 @@ import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.sv
 
 export function PoweredByCommunity() {
   return (
-    

+    

       

         

           

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/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.
-          

-        

-        

-          
-          
-        

-      

-    

-  )
-}
diff --git a/src/components/index-page/who-is-using.tsx b/src/components/index-page/who-is-using.tsx
deleted file mode 100644
index 98dc2a37e0..0000000000
--- a/src/components/index-page/who-is-using.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import Link from "next/link"
-import facebookLogo from "../../../public/users/logos/facebook.png"
-import githubLogo from "../../../public/users/logos/github.png"
-import pinterestLogo from "../../../public/users/logos/pinterest.png"
-import intuitLogo from "../../../public/users/logos/intuit.png"
-import courseraLogo from "../../../public/users/logos/coursera.png"
-import shopifyLogo from "../../../public/users/logos/shopify.png"
-import NextImage from "next-image-export-optimizer"
-import { clsx } from "clsx"
-
-/**
- * @deprecated
- */
-export function WhoIsUsing() {
-  return (
-    

-      

-        

-          
Who's using GraphQL?

-          

-            Facebook's mobile apps have been powered by GraphQL since 2012. A
-            GraphQL spec was open sourced in 2015 and is now available in many
-            environments and used by teams of all sizes.
-          

-          
-
-          
-            More GraphQL Users
-          
-        

-      

-    

-  )
-}
diff --git a/src/components/index-page/without-version.tsx b/src/components/index-page/without-version.tsx
deleted file mode 100644
index 64e9f50cfc..0000000000
--- a/src/components/index-page/without-version.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useEffect, useRef } from "react"
-import { V1, V2, V3, V4, V5 } from "../code-blocks"
-import { clsx } from "clsx"
-
-export function WithoutVersion() {
-  const ref = useRef(null)
-
-  useEffect(() => {
-    let i = -1
-    const inView = ref.current!
-
-    function move() {
-      i = (i + 1) % 7
-      inView.className = "step" + i
-    }
-
-    move()
-    const interval = setInterval(move, 2200)
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
-
-  return (
-    

-      

-        

-          

-            Evolve your API 

-            without versions
-          

-          {/* Illustration showing more legs added to a graph? Or a type evolving over time? */}
-          

-            Add new fields and types to your GraphQL API without impacting
-            existing queries. Aging fields can be deprecated and hidden from
-            tools. By using a single evolving version, GraphQL APIs give apps
-            continuous access to new features and encourage cleaner, more
-            maintainable server code.
-          

-        

-        

-          

-            

-              
-            

-            

-              
-            

-            

-              
-            

-            

-              
-            

-            

-              
-            

-          

-        

-      

-    

-  )
-}
diff --git a/src/components/pre/index.tsx b/src/components/pre/index.tsx
new file mode 100644
index 0000000000..705c8cc4b7
--- /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..54a0ddf66a
--- /dev/null
+++ b/src/components/pre/pre.module.css
@@ -0,0 +1,32 @@
+.pre {
+  & :global(._h-12) {
+    height: unset;
+  }
+}
+
+:global(.nextra-codeblocks) div.pre:not(:last-child) > div:first-child {
+  border-right: none;
+}
+
+:global(.nextra-codeblocks) {
+  & .pre pre {
+    height: 100%;
+  }
+
+  & .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/globals.css b/src/globals.css
index 9dbb2b38bb..4abed41a79 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -308,38 +308,6 @@ div[id^="headlessui-menu-items"] {
   }
 }
 
-.step0,
-.step6 {
-  .v2 {
-    @apply opacity-0;
-  }
-}
-
-.step1 .v2 code > span:nth-child(5) {
-  @apply add;
-}
-
-.step2 .v3 code > span:nth-child(6) {
-  @apply add;
-}
-
-.step3 .v4 code > {
-  span:nth-child(7),
-  span:nth-last-child(-n + 5) {
-    @apply add;
-  }
-}
-
-.step4 {
-  .v4 code > span:nth-child(6) {
-    @apply remove;
-  }
-
-  .v5 code > span:nth-child(6) {
-    @apply add;
-  }
-}
-
 .index-button {
   @apply rounded-md border border-current px-6 py-2.5 transition-colors;
 
@@ -403,60 +371,6 @@ div[id^="headlessui-menu-items"] {
   @apply bg-gradient-to-b from-transparent to-primary/5 dark:to-primary/10;
 }
 
-.type-evolution {
-  @apply w-full overflow-hidden;
-
-  #typeEvolveView {
-    @apply relative left-0 flex h-full select-none;
-
-    .v1,
-    .v2,
-    .v3,
-    .v4 {
-      @apply w-1/2 shrink-0 border-r dark:border-neutral-800;
-    }
-
-    .v5 {
-      @apply w-full shrink-0;
-    }
-
-    &.step1 {
-      .v2 {
-        opacity: 1;
-        transition: opacity 0.5s ease-in-out;
-      }
-    }
-
-    &.step2 {
-      left: calc(-1 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step3 {
-      left: calc(-2 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step4 {
-      left: calc(-3 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step5 {
-      left: calc(-4 * 50%);
-      transition: left 0.5s ease-in-out;
-    }
-
-    &.step6 {
-      .v5 {
-        left: calc(-4 * 50%);
-        opacity: 0;
-        transition: opacity 0.5s ease-in-out;
-      }
-    }
-  }
-}
-
 .apiIndex {
   @apply mt-6;
 }