Highlight query

Author: hasparus

src/app/conf/_design-system/utils/isSpanElement.tsx

@@ -0,0 +1,11 @@
+import { ReactElement } from "react"
+
+export function isSpanElement(
+  child: React.ReactNode,
+): child is ReactElement<{ children: React.ReactNode }> {
+  return (
+    typeof child === "object" &&
+    !!child &&
+    (child as ReactElement).type === "span"
+  )
+}

src/components/index-page/data-colocation/index.tsx

@@ -19,6 +19,7 @@ import json from "./data-colocation.json"
 import Query from "./data-colocation.mdx"
 import "./data-colocation.css"
 import { useOnClickOutside } from "@/app/conf/_design-system/utils/useOnClickOutside"
+import { isSpanElement } from "@/app/conf/_design-system/utils/isSpanElement"
 
 const highlightedFragments = {
   GetFriendList: 1,
@@ -39,12 +40,15 @@ const components = {
       tabIndex={-1}
     />
   ),
-  code: ({ children, ...rest }: ComponentPropsWithoutRef<typeof Code>) => {
-    let sectorIndex: number | undefined
-    let depth = 0
-
-    if (children) {
-      children = React.Children.map(children, child => {
+  code: function Code2({
+    children,
+    ...rest
+  }: ComponentPropsWithoutRef<typeof Code>) {
+    const childrenTransformed = React.useMemo(() => {
+      let sectorIndex: number | undefined
+      let depth = 0
+
+      return React.Children.map(children, child => {
         if (isSpanElement(child)) {
           let children = (child as ReactElement).props.children
 
@@ -86,19 +90,10 @@ const components = {
 
         return child
       })
-    }
-    return <Code {...rest}>{children}</Code>
-  },
-}
+    }, [children])
 
-function isSpanElement(
-  child: React.ReactNode,
-): child is ReactElement<{ children: React.ReactNode }> {
-  return (
-    typeof child === "object" &&
-    !!child &&
-    (child as ReactElement).type === "span"
-  )
+    return <Code {...rest}>{childrenTransformed}</Code>
+  },
 }
 
 export function DataColocation() {

src/components/index-page/what-is-graphql/wires.module.css

@@ -7,3 +7,26 @@
       opacity 1s linear;
   }
 }
+
+.highlightsQuery {
+  & pre > code:global(.nextra-code) > span {
+    transition: background-color 1s ease-out;
+    transition-delay: 1s;
+
+    &:nth-child(2),
+    &:nth-child(3) {
+      @apply bg-pri-lighter/20 dark:bg-pri-light/5;
+    }
+    &:nth-child(4) {
+      @apply bg-gradient-to-b from-pri-lighter/20 to-sec-lighter/20 dark:from-pri-light/5 dark:to-sec-light/5;
+      background-image: linear-gradient(
+        to bottom in oklab,
+        var(--tw-gradient-stops)
+      );
+    }
+    &:nth-child(5),
+    &:nth-child(6) {
+      @apply bg-sec-light/20 dark:bg-sec-light/5;
+    }
+  }
+}

src/components/index-page/what-is-graphql/wires.tsx

@@ -1,6 +1,16 @@
-import { Pre } from "@/components/pre"
+import clsx from "clsx"
+import {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  useEffect,
+  useReducer,
+  useRef,
+} from "react"
+
 import { Code } from "nextra/components"
 
+import { Pre } from "@/components/pre"
+
 import {
   DesktopIcon,
   PhoneIcon,
@@ -12,17 +22,7 @@ import {
   ModemIcon,
   ServerIcon,
 } from "./icons"
-
 import QueryMdx from "./api-gateway-query.mdx"
-import clsx from "clsx"
-import {
-  ComponentPropsWithoutRef,
-  ReactNode,
-  useEffect,
-  useReducer,
-  useRef,
-} from "react"
-
 import classes from "./wires.module.css"
 
 function ClientEdges({
@@ -469,8 +469,10 @@ const components = {
       {...props}
       containerClassName="!absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-sm:scale-75"
       // the border color on white and black backgrounds blends into border-neu-200 (and border-neu-50 in dark mode)
-      className="overflow-hidden border-none !bg-transparent before:absolute before:inset-0 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-[rgba(55,72,13,0.12)] before:bg-clip-border before:[backdrop-filter:url(#what-is-graphql--code-backdrop)] after:absolute after:inset-[1.5px] after:z-[-9] after:rounded-[5px] after:bg-[linear-gradient(to_right,transparent,hsl(var(--color-neu-0))_15%,hsl(var(--color-neu-0))_85%,transparent)] after:[backdrop-filter:url(#what-is-graphql--code-backdrop-2)] dark:before:border-[rgba(235,252,191,0.2)] dark:before:bg-none dark:before:backdrop-blur-xl dark:before:[backdrop-filter:url(#what-is-graphql--code-backdrop-2-dark)] dark:after:bg-[linear-gradient(to_right,hsl(var(--color-neu-0)/0.5),hsl(var(--color-neu-0)/.8)_10%,hsl(var(--color-neu-0)/.8)_90%,hsl(var(--color-neu-0)/0.5))] dark:after:[backdrop-filter:blur(24px)]"
-    />
+      className="overflow-hidden border-none !bg-transparent before:absolute before:inset-0 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-[rgba(55,72,13,0.12)] before:bg-clip-border before:[backdrop-filter:url(#what-is-graphql--code-backdrop)] after:absolute after:inset-[1.5px] after:z-[-9] after:rounded-[5px] after:bg-[linear-gradient(to_right,transparent,hsl(var(--color-neu-0))_15%,hsl(var(--color-neu-0))_85%,transparent)] after:[backdrop-filter:url(#what-is-graphql--code-backdrop-2)] dark:before:border-[rgba(235,252,191,0.2)] dark:before:bg-none dark:before:backdrop-blur-xl dark:before:[backdrop-filter:url(#what-is-graphql--code-backdrop-2-dark)] dark:after:bg-[linear-gradient(to_right,hsl(var(--color-neu-0)/0.5),hsl(var(--color-neu-0)/.8)_10%,hsl(var(--color-neu-0)/.8)_83%,hsl(var(--color-neu-0)/0.4))] dark:after:[backdrop-filter:blur(24px)]"
+    >
+      {props.children}
+    </Pre>
   ),
   code: Code,
 }
@@ -496,7 +498,15 @@ export function Wires({ className }: { className?: string }) {
   // todo: highlight the lines in step 3
 
   return (
-    <div className={clsx(className, "relative", classes.wires)}>
+    <div
+      className={clsx(
+        className,
+        "relative isolate",
+        classes.wires,
+        step === 1 && classes.highlightsQuery,
+        step === 2 && classes.highlightsResponse,
+      )}
+    >
       <svg
         id="what-is-graphql--wires"
         width="1248"