Add Data Colocation section

Author: hasparus

src/app/conf/2025/components/testimonials/index.tsx

@@ -85,7 +85,7 @@ export function TestimonialsList({
           className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
         >
           <div>
-            <p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
+            <p className="typography-body-lg max-w-[100vw] !leading-[1.1] max-md:text-center sm:max-w-[calc(100vw-32px)] md:max-w-[544px]">
               {testimonial.quote}
             </p>
             <AuthorNameAndRole

src/app/conf/_design-system/pixelarticons/info.svg

@@ -12,7 +12,7 @@ declare module "*.svg?svgr" {
   export default content
 }
 
-declare module "*.mdx?raw" {
+declare module "*?raw" {
   const content: string
   export default content
 }

src/app/env.d.ts

@@ -2,7 +2,6 @@ import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
 import clsx from "clsx"
 
 const INNER_BOX_SIZE = 16
-const GAP_X = 32
 
 interface ComponentTreeProps extends React.HTMLAttributes<HTMLDivElement> {
   names: [string, string, string, string]
@@ -14,86 +13,86 @@ export function ComponentTree({
   ...rest
 }: ComponentTreeProps) {
   return (
-    <div className={clsx("mx-auto flex gap-x-20", className)} {...rest}>
+    <div
+      className={clsx(
+        "mx-auto flex max-w-[500px] justify-between [--gap-x:20px] md:gap-x-10 md:[--gap-x:32px] 3xl:gap-x-20",
+        className,
+      )}
+      {...rest}
+    >
       <div className="flex flex-col">
         <div className="flex h-12 items-center">
-          <ComponentLabel bgColor="bg-neu-0" borderColor="border-neu-300">
+          <ComponentLabel className="border-neu-300 bg-neu-0 dark:border-neu-200">
             {names[0]}
           </ComponentLabel>
         </div>
 
         <div className="h-4" />
 
         <div className="flex h-12 items-center">
-          <ComponentLabel bgColor="bg-neu-400" borderColor="border-neu-600">
+          <ComponentLabel className="border-neu-600 bg-neu-400 dark:border-neu-200 dark:bg-neu-50">
             {names[1]}
           </ComponentLabel>
         </div>
 
         <div className="h-4" />
 
         <div className="flex h-12 items-center">
-          <ComponentLabel
-            bgColor="bg-sec-lighter"
-            borderColor="border-sec-base"
-          >
+          <ComponentLabel className="border-sec-base bg-sec-lighter dark:border-sec-dark dark:bg-sec-darker/50">
             {names[2]}
           </ComponentLabel>
         </div>
 
         <div className="h-4" />
 
         <div className="flex h-12 items-center">
-          <ComponentLabel
-            bgColor="bg-pri-lighter/40"
-            borderColor="border-pri-base"
-          >
+          <ComponentLabel className="border-pri-base bg-pri-lighter/40 dark:border-pri-dark dark:bg-pri-darker/50">
             {names[3]}
           </ComponentLabel>
         </div>
       </div>
 
       <div className="flex flex-col items-center">
-        <div className="flex size-12 items-center justify-center bg-neu-100">
-          <ModemIcon className="size-8 text-neu-600" />
+        <div className="flex size-12 items-center justify-center bg-neu-100 dark:bg-neu-50">
+          <ModemIcon className="size-6 text-neu-600" />
         </div>
 
-        <div className="h-4 w-px bg-neu-300" />
+        <div className="h-4 w-px bg-neu-300 dark:bg-neu-100" />
 
         <NestedBox
-          bgColor="bg-neu-600"
+          bgColor="bg-neu-600 dark:bg-neu-200"
           middleColor="bg-sec-base"
           innerColor="bg-pri-base"
         />
 
         <Fork
-          className="text-neu-300"
+          className="text-neu-300 dark:text-neu-100"
           style={{
-            width: `calc(100% - ${GAP_X + INNER_BOX_SIZE * 5.75}px)`,
+            width: `calc(100% - var(--gap-x) - ${INNER_BOX_SIZE * 5.75}px)`,
           }}
         />
 
-        <div className="flex" style={{ gap: GAP_X }}>
+        <div className="flex gap-[--gap-x]">
           <div className="flex flex-col items-center">
             <NestedBox
-              bgColor="bg-neu-100"
+              bgColor="bg-neu-100 dark:bg-neu-50"
               middleColor="bg-sec-base"
               innerColor="bg-pri-base"
             />
-            <Fork className="text-neu-300" />
-            <div className="flex" style={{ gap: GAP_X }}>
+            <Fork className="text-neu-300 dark:text-neu-100" />
+            <div className="flex gap-[--gap-x]">
               <LeafBox />
               <LeafBox />
             </div>
           </div>
           <div className="flex flex-col items-center">
             <NestedBox
-              bgColor="bg-neu-100"
+              bgColor="bg-neu-100 dark:bg-neu-50"
               middleColor="bg-sec-base"
               innerColor="bg-pri-base"
             />
-            <Fork className="text-neu-300" />
-            <div className="flex" style={{ gap: GAP_X }}>
+            <Fork className="text-neu-300 dark:text-neu-100" />
+            <div className="flex gap-[--gap-x]">
               <LeafBox />
               <LeafBox />
             </div>
@@ -124,26 +123,26 @@ function NestedBox({ bgColor, middleColor, innerColor }: NestedBoxProps) {
 
 interface ComponentLabelProps {
   children: React.ReactNode
-  bgColor: string
-  borderColor: string
+  className: string
 }
 
-function ComponentLabel({
-  children,
-  bgColor,
-  borderColor,
-}: ComponentLabelProps) {
+function ComponentLabel({ children, className }: ComponentLabelProps) {
   return (
     <div
-      className={`rounded border ${borderColor} ${bgColor} px-1 py-0.5 font-mono text-[10px] text-neu-800`}
+      className={clsx(
+        "rounded border px-1 py-0.5 font-mono text-[10px] text-neu-800 dark:font-medium",
+        className,
+      )}
     >
       {children}
     </div>
   )
 }
 
 function LeafBox() {
-  return <NestedBox bgColor="bg-neu-100" innerColor="bg-pri-base" />
+  return (
+    <NestedBox bgColor="bg-neu-100 dark:bg-neu-50" innerColor="bg-pri-base" />
+  )
 }
 
 function Fork(props: React.SVGProps<SVGSVGElement>) {

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

@@ -0,0 +1,31 @@
+{
+  "friends": [
+    {
+      "name": "Trudie",
+      "profilePic": "trudie.webp",
+      "mutualFriendsCount": 120,
+      "isSubscribed": true,
+      "username": "funkytrudster89",
+      "email": "[email protected]",
+      "location": "New York, USA"
+    },
+    {
+      "name": "Frances",
+      "profilePic": "frances.webp",
+      "mutualFriendsCount": 42,
+      "isSubscribed": false,
+      "username": "frannyfran12",
+      "email": "[email protected]",
+      "location": "Madrid, Spain"
+    },
+    {
+      "name": "Fernando",
+      "profilePic": "fernando.webp",
+      "mutualFriendsCount": 114,
+      "isSubscribed": true,
+      "username": "fern_whirlwind",
+      "email": "[email protected]",
+      "location": "Amsterdam, Netherlands"
+    }
+  ]
+}

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

@@ -0,0 +1,25 @@
+```graphql
+query GetFriendList {
+  ...FriendList
+}
+
+fragment FriendList on Query {
+  friends {
+    ...FriendListItem
+  }
+}
+
+fragment FriendListItem on Friend {
+  name
+  profilePic
+  mutualFriendsCount
+  isSubscribed
+  ...FriendInfo
+}
+
+fragment FriendInfo on Friend {
+  username
+  email
+  location
+}
+```

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

@@ -0,0 +1,9 @@
+import trudie from "./trudie.webp"
+import frances from "./frances.webp"
+import fernando from "./fernando.webp"
+
+export const friendAvatars = {
+  trudie,
+  frances,
+  fernando,
+}