Skip to content

Commit b3fe6f8

Browse files
hasparushasparus
authored
Merge pull request #38 from hasparus/new-landing--data-colocation
new landing — data colocation
2 parents 07f549e + 4887f70 commit b3fe6f8

File tree

25 files changed

+668
-19
lines changed

25 files changed

+668
-19
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export function TestimonialsList({
8585
className="flex shrink-0 snap-start flex-row-reverse items-center gap-6 max-md:flex-col md:px-10"
8686
>
8787
<div>
88-
<p className="typography-body-lg max-w-[calc(100vw-32px)] !leading-[1.1] max-md:text-center md:max-w-[544px]">
88+
<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]">
8989
{testimonial.quote}
9090
</p>
9191
<AuthorNameAndRole

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

Lines changed: 7 additions & 0 deletions
Loading

‎src/app/conf/_design-system/pixelarticons/modem.svg

Lines changed: 12 additions & 0 deletions
Loading

‎src/app/conf/_design-system/utils/useOnClickOutside.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useEffect } from "react"
2+
3+
export function useOnClickOutside(
4+
ref: React.RefObject<HTMLElement | null>,
5+
handler: (event: MouseEvent) => void,
6+
) {
7+
useEffect(() => {
8+
const listener = (event: MouseEvent) => {
9+
if (ref.current && event.composedPath().includes(ref.current)) {
10+
return
11+
}
12+
handler(event)
13+
}
14+
15+
document.addEventListener("click", listener)
16+
return () => document.removeEventListener("click", listener)
17+
// eslint-disable-next-line react-hooks/exhaustive-deps
18+
}, [])
19+
}

‎src/app/env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ declare module "*.svg?svgr" {
1212
export default content
1313
}
1414

15-
declare module "*.mdx?raw" {
15+
declare module "*?raw" {
1616
const content: string
1717
export default content
1818
}

‎src/components/footer/conference-footer-box.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function ConferenceFooterBox({
1616
<Anchor
1717
href={href}
1818
className={clsx(
19-
"dark group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark",
19+
"dark gql-focus-visible group relative inline-flex flex-col bg-pri-base text-neu-900 after:absolute after:inset-0 hover:after:bg-white/[.025] dark:bg-pri-dark",
2020
className,
2121
)}
2222
>

‎src/components/footer/index.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
5151
<h3 className="font-bold lg:mb-4 3xl:mb-10">
5252
{section.route ? (
5353
<Anchor
54-
className="gql-focus-visible block p-4 underline-offset-4 hover:underline md:px-6 2xl:px-10"
54+
className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
5555
href={section.route}
5656
>
5757
{section.title}
@@ -61,11 +61,11 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
6161
)}
6262
</h3>
6363
)}
64-
{section.links.map(link => (
64+
{section.links.map((link, i) => (
6565
<Anchor
66-
key={link.route}
66+
key={i}
6767
href={link.route}
68-
className="gql-focus-visible block p-4 underline-offset-4 hover:underline md:px-6 2xl:px-10"
68+
className="gql-focus-visible block p-4 underline-offset-4 hover:underline focus-visible:!-outline-offset-4 md:px-6 2xl:px-10"
6969
>
7070
{link.title}
7171
</Anchor>
@@ -81,7 +81,7 @@ export function Footer({ extraLinks }: { extraLinks: FooterLink[] }) {
8181
)}
8282
<SocialIcons
8383
count={4}
84-
className="col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"
84+
className="gql-all-anchors-focusable col-span-full gap-px text-pri-base *:flex *:flex-1 *:items-center *:justify-center *:bg-neu-100 *:dark:bg-neu-0 max-sm:*:aspect-square lg:*:aspect-square [&>a:focus]:text-current [&>a:focus]:!-outline-offset-[6px] [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-0/90 [&>a:hover]:text-current [&_svg]:!h-8"
8585
/>
8686
</div>
8787
</div>

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

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
2+
import clsx from "clsx"
3+
4+
const INNER_BOX_SIZE = 16
5+
6+
interface ComponentTreeProps extends React.HTMLAttributes<HTMLDivElement> {
7+
names: [string, string, string, string]
8+
}
9+
10+
export function ComponentTree({
11+
names,
12+
className,
13+
...rest
14+
}: ComponentTreeProps) {
15+
return (
16+
<div
17+
className={clsx(
18+
"sector-opacity mx-auto flex max-w-[500px] justify-between [--gap-x:20px] md:gap-x-10 md:[--gap-x:32px] 3xl:gap-x-20",
19+
className,
20+
)}
21+
{...rest}
22+
>
23+
<div className="flex flex-col">
24+
<div className="flex h-12 items-center" data-sector="1">
25+
<ComponentLabel className="border-neu-300 bg-neu-0 dark:border-neu-200">
26+
{names[0]}
27+
</ComponentLabel>
28+
</div>
29+
30+
<div className="h-4" />
31+
32+
<div className="flex h-12 items-center" data-sector="2">
33+
<ComponentLabel className="border-neu-600 bg-neu-400 dark:border-neu-200 dark:bg-neu-50">
34+
{names[1]}
35+
</ComponentLabel>
36+
</div>
37+
38+
<div className="h-4" />
39+
40+
<div className="flex h-12 items-center" data-sector="3">
41+
<ComponentLabel className="border-sec-base bg-sec-lighter dark:border-sec-dark dark:bg-sec-darker/50">
42+
{names[2]}
43+
</ComponentLabel>
44+
</div>
45+
46+
<div className="h-4" />
47+
48+
<div className="flex h-12 items-center" data-sector="4">
49+
<ComponentLabel className="border-pri-base bg-pri-lighter/40 dark:border-pri-dark dark:bg-pri-darker/50">
50+
{names[3]}
51+
</ComponentLabel>
52+
</div>
53+
</div>
54+
55+
<div className="flex flex-col items-center">
56+
<div
57+
className="flex size-12 items-center justify-center bg-neu-100 dark:bg-neu-50"
58+
data-sector="1"
59+
>
60+
<ModemIcon className="size-6 text-neu-600" />
61+
</div>
62+
63+
<div className="h-4 w-px bg-neu-300 dark:bg-neu-100" />
64+
65+
<NestedBox
66+
bgColor="bg-neu-600 dark:bg-neu-200"
67+
middleColor="bg-sec-base"
68+
innerColor="bg-pri-base"
69+
data-sector="2"
70+
/>
71+
72+
<Fork
73+
className="text-neu-300 dark:text-neu-100"
74+
style={{
75+
width: `calc(100% - var(--gap-x) - ${INNER_BOX_SIZE * 5.75}px)`,
76+
}}
77+
/>
78+
79+
<div className="flex gap-[--gap-x]">
80+
<div className="flex flex-col items-center">
81+
<NestedBox
82+
bgColor="bg-neu-100 dark:bg-neu-50"
83+
middleColor="bg-sec-base"
84+
innerColor="bg-pri-base"
85+
data-sector="3"
86+
/>
87+
<Fork className="text-neu-300 dark:text-neu-100" />
88+
<div className="flex gap-[--gap-x]" data-sector="4">
89+
<LeafBox />
90+
<LeafBox />
91+
</div>
92+
</div>
93+
<div className="flex flex-col items-center">
94+
<NestedBox
95+
bgColor="bg-neu-100 dark:bg-neu-50"
96+
middleColor="bg-sec-base"
97+
innerColor="bg-pri-base"
98+
data-sector="3"
99+
/>
100+
<Fork className="text-neu-300 dark:text-neu-100" />
101+
<div className="flex gap-[--gap-x]" data-sector="4">
102+
<LeafBox />
103+
<LeafBox />
104+
</div>
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
)
110+
}
111+
112+
interface NestedBoxProps extends React.HTMLAttributes<HTMLDivElement> {
113+
bgColor: string
114+
middleColor?: string
115+
innerColor: string
116+
}
117+
118+
function NestedBox({
119+
bgColor,
120+
middleColor,
121+
innerColor,
122+
...rest
123+
}: NestedBoxProps) {
124+
const padding = INNER_BOX_SIZE / 2
125+
126+
return (
127+
<div className={bgColor} style={{ padding }} {...rest}>
128+
<div className={middleColor || bgColor} style={{ padding }}>
129+
<div className={innerColor} style={{ padding }} />
130+
</div>
131+
</div>
132+
)
133+
}
134+
135+
interface ComponentLabelProps extends React.HTMLAttributes<HTMLDivElement> {
136+
children: React.ReactNode
137+
className: string
138+
}
139+
140+
function ComponentLabel({ children, className, ...rest }: ComponentLabelProps) {
141+
return (
142+
<div
143+
className={clsx(
144+
"rounded border px-1 py-0.5 font-mono text-[10px] text-neu-800 dark:font-medium",
145+
className,
146+
)}
147+
{...rest}
148+
>
149+
{children}
150+
</div>
151+
)
152+
}
153+
154+
function LeafBox(props: React.HTMLAttributes<HTMLDivElement>) {
155+
return (
156+
<NestedBox
157+
bgColor="bg-neu-100 dark:bg-neu-50"
158+
innerColor="bg-pri-base"
159+
{...props}
160+
/>
161+
)
162+
}
163+
164+
function Fork(props: React.SVGProps<SVGSVGElement>) {
165+
return (
166+
<svg
167+
width="81"
168+
height="16"
169+
viewBox="0 0 81 16"
170+
stroke="currentColor"
171+
fill="none"
172+
preserveAspectRatio="none"
173+
{...props}
174+
>
175+
<path d="M40.5 8V0M1 16V8m79 8V8" vectorEffect="non-scaling-stroke" />
176+
<path
177+
d="m1 8 79-.00001"
178+
stroke-linecap="square"
179+
vectorEffect="non-scaling-stroke"
180+
/>
181+
</svg>
182+
)
183+
}

‎src/components/index-page/data-colocation/data-colocation.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.sector-opacity {
2+
& [data-sector] {
3+
transition: opacity 0.2s ease-in;
4+
transition-delay: 0.1s;
5+
}
6+
7+
[data-active-sector] & [data-sector] {
8+
opacity: 0.4;
9+
transition-delay: 0s;
10+
transition-timing-function: ease-out;
11+
}
12+
13+
[data-active-sector="1"] & [data-sector="1"],
14+
[data-active-sector="2"] & [data-sector="2"],
15+
[data-active-sector="3"] & [data-sector="3"],
16+
[data-active-sector="4"] & [data-sector="4"] {
17+
opacity: 1;
18+
}
19+
}
20+
21+
.sector-ring {
22+
& [data-sector] {
23+
@apply ring-2 ring-transparent ring-offset-2 ring-offset-transparent transition-shadow duration-200 ease-in;
24+
}
25+
26+
[data-active-sector="1"] & [data-sector="1"],
27+
[data-active-sector="2"] & [data-sector="2"],
28+
[data-active-sector="3"] & [data-sector="3"],
29+
[data-active-sector="4"] & [data-sector="4"] {
30+
@apply ring-2 ring-neu-500 duration-200 ease-out dark:ring-neu-400 dark:ring-offset-neu-0;
31+
}
32+
}

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"friends": [
3+
{
4+
"name": "Trudie",
5+
"profilePic": "trudie.webp",
6+
"mutualFriendsCount": 120,
7+
"isSubscribed": true,
8+
"username": "funkytrudster89",
9+
"email": "[email protected]",
10+
"location": "New York, USA"
11+
},
12+
{
13+
"name": "Frances",
14+
"profilePic": "frances.webp",
15+
"mutualFriendsCount": 42,
16+
"isSubscribed": false,
17+
"username": "frannyfran12",
18+
"email": "[email protected]",
19+
"location": "Madrid, Spain"
20+
},
21+
{
22+
"name": "Fernando",
23+
"profilePic": "fernando.webp",
24+
"mutualFriendsCount": 114,
25+
"isSubscribed": true,
26+
"username": "fern_whirlwind",
27+
"email": "[email protected]",
28+
"location": "Amsterdam, Netherlands"
29+
}
30+
]
31+
}

0 commit comments

Comments
 (0)