Skip to content

Commit 4de096c

Browse files
hasparushasparus
committed
wip
1 parent 04b6171 commit 4de096c

8 files changed

Lines changed: 274 additions & 46 deletions

File tree

‎scripts/render-conference-kit-banners.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const PAGE = `${URL}/conf/conference-kit/`
2323
const PUBLIC_DIR = path.resolve(process.cwd(), "public/conference-kit")
2424
const SCALE = Number(process.env.SCALE ?? 4)
2525

26-
const BANNERS = ["amsterdam", "ai-hero"] as const
26+
const BANNERS = ["amsterdam", "language", "ai-hero"] as const
2727

2828
async function main() {
2929
await mkdir(PUBLIC_DIR, { recursive: true })

‎src/app/conf/conference-kit/_components/amsterdam-banner.tsx‎

Lines changed: 8 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { GraphQLLogo } from "@/app/conf/2026/components/graphql-conf-logo-link"
21
import NotesIcon from "@/app/conf/_design-system/pixelarticons/notes.svg?svgr"
32
import TournamentIcon from "@/app/conf/_design-system/pixelarticons/tournament.svg?svgr"
43
import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
@@ -11,7 +10,7 @@ import fostLogo from "@/app/day/2026/assets/fost-logo.avif"
1110
import { BannerFrame } from "./banner-frame"
1211
import { AmsterdamSkyline } from "./amsterdam-skyline"
1312
import { QRPlaceholder } from "./qr-placeholder"
14-
import { BannerTrustedFooter } from "./trusted-logos"
13+
import { BlobStripes } from "./blob-stripes"
1514
import Image from "next/image"
1615
import { GraphQLWordmarkLogo } from "@/icons"
1716

@@ -45,7 +44,13 @@ export function AmsterdamBanner() {
4544
caption="GraphQL Day Amsterdam 2026"
4645
className="flex flex-col bg-[#0A0B08] px-9 pt-9 text-white"
4746
>
48-
<BgGlow />
47+
<BlobStripes
48+
position="65% 35%"
49+
size="160%"
50+
stripeWidth="14px"
51+
evenClassName="bg-[linear-gradient(180deg,rgba(225,0,152,0.22)_0%,rgba(225,0,152,0.04)_100%)]"
52+
oddClassName="bg-[linear-gradient(180deg,rgba(225,0,152,0.06)_0%,rgba(132,0,89,0.18)_100%)]"
53+
/>
4954

5055
<div className="z-10 flex items-center justify-between">
5156
<GraphQLWordmarkLogo className="h-8 !fill-white" />
@@ -78,7 +83,6 @@ export function AmsterdamBanner() {
7883
</div>
7984
</div>
8085

81-
{/* Description + tags */}
8286
<div className="absolute z-10" style={{ top: 380 }}>
8387
<p
8488
className="typography-body-lg m-0 text-white/80"
@@ -204,50 +208,10 @@ export function AmsterdamBanner() {
204208
</div>
205209
</div>
206210

207-
<BannerTrustedFooter />
208211
</BannerFrame>
209212
)
210213
}
211214

212-
// Concentric magenta glow drifting off the upper-right edge.
213-
function BgGlow() {
214-
return (
215-
<div className="pointer-events-none absolute inset-0 overflow-hidden">
216-
<div
217-
className="absolute rounded-full"
218-
style={{
219-
right: "-20%",
220-
top: "12%",
221-
width: 900,
222-
height: 900,
223-
background:
224-
"radial-gradient(closest-side, rgba(225,0,152,0.35) 0%, rgba(225,0,152,0.15) 35%, rgba(225,0,152,0.05) 60%, transparent 72%)",
225-
filter: "blur(2px)",
226-
}}
227-
/>
228-
<svg
229-
className="absolute"
230-
style={{ right: "-32%", top: "6%", width: 720, height: 720 }}
231-
viewBox="0 0 720 720"
232-
fill="none"
233-
>
234-
{[120, 180, 240, 300, 360].map((r, i) => (
235-
<ellipse
236-
key={i}
237-
cx="360"
238-
cy="360"
239-
rx={r}
240-
ry={r * 1.25}
241-
stroke="rgba(225,0,152,0.45)"
242-
strokeWidth="1.4"
243-
opacity={0.35 + i * 0.1}
244-
/>
245-
))}
246-
</svg>
247-
</div>
248-
)
249-
}
250-
251215
function ArrowRightLine({ className }: { className?: string }) {
252216
return (
253217
<svg

‎src/app/conf/conference-kit/_components/blob-stripes.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import clsx from "clsx"
2+
3+
import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
4+
import blurBlob from "@/app/conf/2025/components/become-a-sponsor/blur-blob.webp"
5+
6+
export interface BlobStripesProps {
7+
className?: string
8+
evenClassName?: string
9+
oddClassName?: string
10+
stripeWidth?: string
11+
angle?: string
12+
/** mask-position passed through. */
13+
position?: string
14+
/** mask-size passed through. */
15+
size?: string
16+
}
17+
18+
export function BlobStripes({
19+
className,
20+
evenClassName,
21+
oddClassName,
22+
stripeWidth,
23+
angle,
24+
position = "center",
25+
size = "140%",
26+
}: BlobStripesProps) {
27+
return (
28+
<div
29+
role="presentation"
30+
className={clsx("pointer-events-none absolute inset-0", className)}
31+
style={{
32+
maskImage: `url(${blurBlob.src})`,
33+
WebkitMaskImage: `url(${blurBlob.src})`,
34+
maskPosition: position,
35+
WebkitMaskPosition: position,
36+
maskSize: size,
37+
WebkitMaskSize: size,
38+
maskRepeat: "no-repeat",
39+
WebkitMaskRepeat: "no-repeat",
40+
}}
41+
>
42+
<StripesDecoration
43+
evenClassName={evenClassName}
44+
oddClassName={oddClassName}
45+
stripeWidth={stripeWidth}
46+
angle={angle}
47+
/>
48+
</div>
49+
)
50+
}

‎src/app/conf/conference-kit/_components/language-banner.tsx‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
import NotesIcon from "@/app/conf/_design-system/pixelarticons/notes.svg?svgr"
2+
import TournamentIcon from "@/app/conf/_design-system/pixelarticons/tournament.svg?svgr"
3+
import ModemIcon from "@/app/conf/_design-system/pixelarticons/modem.svg?svgr"
4+
import ZapIcon from "@/app/conf/_design-system/pixelarticons/zap.svg?svgr"
5+
import { GraphQLWordmarkLogo } from "@/icons"
6+
import { CityQuery } from "@/components/code-blocks"
7+
8+
import { BannerFrame } from "./banner-frame"
9+
import { BlobStripes } from "./blob-stripes"
10+
import { QRPlaceholder } from "./qr-placeholder"
11+
import { BannerTrustedFooter } from "./trusted-logos"
12+
13+
const features = [
14+
{
15+
Icon: NotesIcon,
16+
label: "Typesafe\nschemas",
17+
iconClassName: "text-pri-base",
18+
},
19+
{
20+
Icon: TournamentIcon,
21+
label: "Distributed\nby design",
22+
iconClassName: "text-pri-base",
23+
},
24+
{
25+
Icon: ModemIcon,
26+
label: "Data\ncolocation",
27+
iconClassName: "text-pri-base",
28+
},
29+
{
30+
Icon: ZapIcon,
31+
label: "Performance\nat scale",
32+
iconClassName: "text-sec-base",
33+
},
34+
] as const
35+
36+
export function LanguageBanner() {
37+
return (
38+
<BannerFrame
39+
slug="language"
40+
caption="GraphQL — the query language"
41+
className="flex flex-col bg-[#0A0B08] px-9 pt-9 text-white"
42+
>
43+
<BlobStripes
44+
position="70% 30%"
45+
size="155%"
46+
stripeWidth="14px"
47+
evenClassName="bg-[linear-gradient(180deg,rgba(225,0,152,0.22)_0%,rgba(225,0,152,0.04)_100%)]"
48+
oddClassName="bg-[linear-gradient(180deg,rgba(225,0,152,0.06)_0%,rgba(132,0,89,0.18)_100%)]"
49+
/>
50+
51+
<div className="z-10 flex items-center justify-between">
52+
<GraphQLWordmarkLogo className="h-8 !fill-white" />
53+
<div
54+
className="flex flex-wrap items-center gap-2.5 font-mono text-[13px] text-sec-base"
55+
style={{ letterSpacing: "0.02em" }}
56+
>
57+
<span>schema-first</span>
58+
<span className="text-pri-base">•</span>
59+
<span>typesafe</span>
60+
<span className="text-pri-base">•</span>
61+
<span>flexible</span>
62+
<span className="text-pri-base">•</span>
63+
<span>fast</span>
64+
</div>
65+
</div>
66+
67+
<div className="absolute z-10" style={{ top: 130 }}>
68+
<h2 className="m-0 text-[60px] font-medium leading-none tracking-tight">
69+
The query
70+
</h2>
71+
<div className="mt-0.5 text-[60px] font-medium leading-none tracking-tight text-pri-base">
72+
language
73+
</div>
74+
<div
75+
className="mt-2 text-[54px] font-medium leading-none text-sec-base"
76+
style={{ letterSpacing: "-0.02em" }}
77+
>
78+
for your API
79+
</div>
80+
</div>
81+
82+
<div className="absolute z-10" style={{ top: 380 }}>
83+
<p
84+
className="typography-body-lg m-0 text-white/80"
85+
style={{ lineHeight: 1.4, textWrap: "pretty" }}
86+
>
87+
An open-standard query language and runtime that lets clients ask for
88+
exactly the data they need — and nothing more.
89+
</p>
90+
</div>
91+
92+
<div
93+
className="absolute z-10 grid grid-cols-4 gap-2"
94+
style={{ top: 590 }}
95+
>
96+
{features.map(({ Icon, label, iconClassName }) => (
97+
<div
98+
key={label}
99+
className="flex flex-col items-center gap-3.5 px-1 py-2"
100+
>
101+
<div className="flex size-12 items-center justify-center">
102+
<Icon className={`block size-9 ${iconClassName}`} />
103+
</div>
104+
<div
105+
className="whitespace-pre-line text-center text-[13px] text-white/85"
106+
style={{ lineHeight: 1.25 }}
107+
>
108+
{label}
109+
</div>
110+
</div>
111+
))}
112+
</div>
113+
114+
<div className="absolute inset-x-9 z-10" style={{ top: 810 }}>
115+
<CityQuery />
116+
</div>
117+
{/* Force shiki's dark theme tokens for this banner only — the page renders
118+
light-themed by default, but this banner is dark. */}
119+
<style>{`
120+
[data-print-banner="language"] .nextra-code span {
121+
background-color: var(--shiki-dark-bg);
122+
color: var(--shiki-dark);
123+
}
124+
`}</style>
125+
126+
<div
127+
className="absolute z-10 grid grid-cols-2 gap-2.5"
128+
style={{ top: 1020 }}
129+
>
130+
<div className="flex h-24 items-center gap-3.5 border border-white/10 bg-white/[0.02] p-3.5">
131+
<div className="flex size-16 shrink-0 items-center justify-center border-[1.5px] border-pri-base">
132+
<ArrowRightLine className="size-7 text-pri-base" />
133+
</div>
134+
<div className="min-w-0">
135+
<div
136+
className="text-[15px] font-medium"
137+
style={{ letterSpacing: "-0.01em" }}
138+
>
139+
Read the spec
140+
</div>
141+
<div
142+
className="mt-1 text-[12px] text-white/70"
143+
style={{ lineHeight: 1.3 }}
144+
>
145+
Open standard,
146+
<br />
147+
vendor-neutral.
148+
</div>
149+
</div>
150+
</div>
151+
152+
<div className="flex h-24 items-center gap-3.5 border border-white/10 bg-white/[0.02] p-3.5">
153+
<div className="flex size-[68px] shrink-0 items-center justify-center border-[1.5px] border-sec-base p-1">
154+
<QRPlaceholder size={56} color="#FAFCF4" />
155+
</div>
156+
<div className="min-w-0">
157+
<div
158+
className="font-mono text-[11px] lowercase text-sec-base"
159+
style={{ letterSpacing: "0.06em" }}
160+
>
161+
Learn more
162+
</div>
163+
<div
164+
className="mt-1 text-[18px] font-medium"
165+
style={{ letterSpacing: "-0.01em" }}
166+
>
167+
graphql.org
168+
</div>
169+
</div>
170+
</div>
171+
</div>
172+
173+
<BannerTrustedFooter />
174+
</BannerFrame>
175+
)
176+
}
177+
178+
function ArrowRightLine({ className }: { className?: string }) {
179+
return (
180+
<svg
181+
viewBox="0 0 24 24"
182+
fill="none"
183+
stroke="currentColor"
184+
strokeWidth="1.8"
185+
strokeLinecap="round"
186+
strokeLinejoin="round"
187+
className={className}
188+
aria-hidden="true"
189+
>
190+
<line x1="4" y1="12" x2="19" y2="12" />
191+
<polyline points="13,6 19,12 13,18" />
192+
</svg>
193+
)
194+
}

‎src/app/conf/conference-kit/page.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Hero, HeroStripes } from "../2026/components/hero"
55
import { NavbarPlaceholder } from "../2026/components/navbar"
66

77
import { AmsterdamBanner } from "./_components/amsterdam-banner"
8+
import { LanguageBanner } from "./_components/language-banner"
89
import { AiHeroBanner } from "./_components/ai-hero-banner"
910

1011
export const metadata: Metadata = {
@@ -43,8 +44,9 @@ export default function ConferenceKitPage() {
4344
</Button>
4445
</header>
4546

46-
<div className="flex flex-wrap justify-center gap-12 xl:gap-20">
47+
<div className="grid grid-cols-1 gap-8 xl:grid-cols-2">
4748
<AmsterdamBanner />
49+
<LanguageBanner />
4850
<AiHeroBanner />
4951
</div>
5052
</section>

‎src/components/code-blocks/city-query.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```graphql word-wrap=false filename="getCity"
2+
query getCity($city: String) {
3+
cities(name: $city) {
4+
population
5+
weather {
6+
temperature
7+
precipitation
8+
}
9+
}
10+
}
11+
```

‎src/components/code-blocks/index.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client"
2+
13
import { Code } from "nextra/components"
24
import { ComponentPropsWithoutRef } from "react"
35
import { clsx } from "clsx"
@@ -22,6 +24,7 @@ export { default as Schema } from "./schema.mdx"
2224
import _QueryHeroFriends from "./query.hero-friends.mdx"
2325
import _ResponseHeroFriends from "./response.hero-friends.mdx"
2426
import _PredictableResult from "./predictable-result.mdx"
27+
import _CityQuery from "./city-query.mdx"
2528

2629
const components = {
2730
pre: Pre,
@@ -64,3 +67,5 @@ export const QueryHeroFriends = () => (
6467
export const ResponseHeroFriends = () => (
6568
<_ResponseHeroFriends components={components} />
6669
)
70+
71+
export const CityQuery = () => <_CityQuery components={components} />

‎src/components/pre/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client"
2+
13
import cn from "clsx"
24
import type { ComponentPropsWithoutRef, FC, ReactElement } from "react"
35
import { useRef } from "react"

0 commit comments

Comments
 (0)