WIP

Author: hasparus

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,
+    },
   },
 })
 

src/components/index-page/graphql-advantages/index.tsx

@@ -9,7 +9,7 @@ export function GraphQLAdvantages() {
     <section className="bg-neu-50 dark:bg-neu-50/25">
       <div className="gql-container gql-section">
         <SectionLabel>GraphQL advantages</SectionLabel>
-        <div className="mt-8 flex flex-col gap-y-10">
+        <div className="mt-8 flex flex-col gap-y-10 lg:gap-y-16 xl:gap-y-24">
           <Subsection
             name="Precision"
             bigText="Ask for what you need, get exactly that"
@@ -99,16 +99,18 @@ function Subsection({
   text: ReactNode
 }) {
   return (
-    <article className="grid lg:grid-cols-2 lg:*:[grid-column:1]">
-      <h3 className="typography-body-sm w-min items-center justify-center bg-sec-light px-1 py-[1.5px] font-normal dark:bg-sec-darker">
+    <article className="grid gap-x-4 lg:grid-cols-2 lg:*:[grid-column:1] xl:gap-x-12">
+      <h3 className="typography-body-sm size-min items-center justify-center bg-sec-light px-1 py-[1.5px] font-normal dark:bg-sec-darker">
         {name}
       </h3>
       <strong className="typography-h3 mt-4 font-normal lg:mt-8">
         {bigText}
       </strong>
-      <div className="max-lg:mt-6 lg:![grid-column:2]">{figure}</div>
+      <div className="flex max-lg:mt-6 max-sm:-mx-4 lg:row-start-1 lg:row-end-5 lg:![grid-column:2]">
+        {figure}
+      </div>
       <p className="typography-body-lg my-6 lg:mb-4 lg:mt-8">{text}</p>
-      <div>{cta}</div>
+      <div className="self-end lg:justify-self-start">{cta}</div>
     </article>
   )
 }

src/components/index-page/graphql-advantages/precision.tsx

@@ -10,7 +10,11 @@ const components = {
   pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
     <Pre
       {...props}
-      className={clsx(props.className, "!bg-neu-0/[.48]")}
+      // todo: this bg style might need to become global for all code blocks
+      className={clsx(
+        props.className,
+        "!bg-neu-0/[.48] pr-4 backdrop-blur-[6px] max-xs:[&_span]:!text-xs",
+      )}
       tabIndex={-1}
     />
   ),
@@ -87,21 +91,24 @@ export function PrecisionFigure() {
     <div
       ref={ref}
       id="predictable-results"
-      className="nextra-codeblocks flex bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 [&_pre]:!h-48"
+      className="nextra-codeblocks flex w-full bg-gradient-to-b from-transparent to-sec-lighter px-[14px] py-[30px] *:w-1/2 dark:to-sec-darker/25 xl:px-[46px] [&_pre]:!h-48"
       aria-hidden
     >
       <Pre data-filename="Query" className="p-4">
         {"{"}
-        {"\n  hero {"}
-        {"\n    name"}
+        {"\n  "}
+        {/* todo: change this color to brand colors globally */}
+        <span className="!text-pri-base">{"hero"}</span>
+        {" {"}
+        <span className="!text-pri-base">{"\n    name"}</span>
         {"\n    height\n    mass".split("").map((char, i) => (
-          <span key={i} id={"ch" + i} className="hidden">
+          <span key={i} id={"ch" + i} className="hidden !text-pri-base">
             {char === "\n" ? <br /> : char}
           </span>
         ))}
         <span
           className={clsx(
-            "-mb-0.5 ml-px inline-block h-4 w-2 !bg-pri-base/50 dark:!bg-sec-base/50",
+            "-mb-0.5 ml-px inline-block h-4 w-2 !bg-pri-base/50 dark:!bg-pri-light/60",
             classes.cursor,
           )}
         />

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

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

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;
+}
+    

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"]
 }