Skip to content

Commit 27a85d2

Browse files
hasparushasparus
committed
wip
1 parent 4de096c commit 27a85d2

11 files changed

Lines changed: 128 additions & 125 deletions

File tree

‎public/conference-kit/banners.zip‎

185 KB
Binary file not shown.

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

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,15 @@ 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", "language", "ai-hero"] as const
26+
type ColorScheme = "light" | "dark"
27+
28+
const BANNERS: ReadonlyArray<{ slug: string; colorScheme: ColorScheme }> = [
29+
{ slug: "amsterdam", colorScheme: "light" },
30+
// The language banner's inline `getCity` snippet uses shiki's dark token
31+
// colors; next-themes flips html.dark when prefers-color-scheme matches.
32+
{ slug: "language", colorScheme: "dark" },
33+
{ slug: "ai-hero", colorScheme: "light" },
34+
]
2735

2836
async function main() {
2937
await mkdir(PUBLIC_DIR, { recursive: true })
@@ -44,7 +52,17 @@ async function main() {
4452
await page.goto(PAGE, { waitUntil: "networkidle" })
4553
await page.evaluate(() => document.fonts.ready)
4654

47-
for (const slug of BANNERS) {
55+
for (const { slug, colorScheme } of BANNERS) {
56+
await page.emulateMedia({ colorScheme })
57+
// next-themes listens for the prefers-color-scheme change and toggles
58+
// html.dark; wait for that to settle before screenshotting.
59+
await page.waitForFunction(
60+
expected =>
61+
document.documentElement.classList.contains("dark") ===
62+
(expected === "dark"),
63+
colorScheme,
64+
{ timeout: 2000 },
65+
)
4866
const target = page.locator(`[data-print-banner="${slug}"]`)
4967
await target.waitFor({ state: "visible" })
5068
await target.screenshot({ path: path.join(tmpDir, `${slug}.png`) })
@@ -56,7 +74,7 @@ async function main() {
5674
await rm(zipPath, { force: true })
5775
await exec(
5876
"zip",
59-
["-j", zipPath, ...BANNERS.map(s => path.join(tmpDir, `${s}.png`))],
77+
["-j", zipPath, ...BANNERS.map(b => path.join(tmpDir, `${b.slug}.png`))],
6078
)
6179
console.log(`[render-banners] wrote ${path.relative(process.cwd(), zipPath)}`)
6280
} finally {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export function AiHeroBanner() {
7878
<StripesDecoration
7979
stripeWidth="5px"
8080
angle="90deg"
81-
oddClassName="bg-[linear-gradient(to_bottom,rgba(255,255,255,0),rgba(255,255,255,0.18),rgba(255,255,255,0))]"
81+
oddClassName="bg-[linear-gradient(to_bottom,rgba(255,255,255,0),rgba(255,255,255,0.18),rgba(255,255,255,0)_88%)]"
8282
/>
8383
</div>
8484

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

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function AmsterdamBanner() {
4242
<BannerFrame
4343
slug="amsterdam"
4444
caption="GraphQL Day Amsterdam 2026"
45-
className="flex flex-col bg-[#0A0B08] px-9 pt-9 text-white"
45+
className="flex flex-col gap-[60px] bg-[#0A0B08] p-9 text-white"
4646
>
4747
<BlobStripes
4848
position="65% 35%"
@@ -68,7 +68,7 @@ export function AmsterdamBanner() {
6868
</div>
6969
</div>
7070

71-
<div className="absolute z-10" style={{ top: 130 }}>
71+
<div className="z-10">
7272
<h2 className="m-0 text-[60px] font-medium leading-none tracking-tight">
7373
GraphQL Day
7474
</h2>
@@ -83,7 +83,7 @@ export function AmsterdamBanner() {
8383
</div>
8484
</div>
8585

86-
<div className="absolute z-10" style={{ top: 380 }}>
86+
<div className="z-10">
8787
<p
8888
className="typography-body-lg m-0 text-white/80"
8989
style={{ lineHeight: 1.4, textWrap: "pretty" }}
@@ -97,10 +97,7 @@ export function AmsterdamBanner() {
9797
</div>
9898
</div>
9999

100-
<div
101-
className="absolute z-10 grid grid-cols-4 gap-2"
102-
style={{ top: 590 }}
103-
>
100+
<div className="z-10 grid grid-cols-4 gap-2">
104101
{features.map(({ Icon, label, iconClassName }) => (
105102
<div
106103
key={label}
@@ -120,8 +117,8 @@ export function AmsterdamBanner() {
120117
</div>
121118

122119
<div
123-
className="absolute z-10 grid grid-cols-[44%_1fr] overflow-hidden border border-white/10 bg-white/[0.025]"
124-
style={{ top: 810, height: 180 }}
120+
className="z-10 grid grid-cols-[44%_1fr] overflow-hidden border border-white/10 bg-white/[0.025]"
121+
style={{ height: 180 }}
125122
>
126123
<div className="relative bg-sec-darker/15 p-2.5">
127124
<AmsterdamSkyline
@@ -161,10 +158,7 @@ export function AmsterdamBanner() {
161158
</div>
162159
</div>
163160

164-
<div
165-
className="absolute z-10 grid grid-cols-2 gap-2.5"
166-
style={{ top: 1020 }}
167-
>
161+
<div className="z-10 grid grid-cols-2 gap-2.5">
168162
<div className="flex h-24 items-center gap-3.5 border border-white/10 bg-white/[0.02] p-3.5">
169163
<div className="flex size-16 shrink-0 items-center justify-center border-[1.5px] border-pri-base">
170164
<ArrowRightLine className="size-7 text-pri-base" />

‎src/app/conf/conference-kit/_components/city-query-snippet.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use client"
2+
3+
import type { ComponentPropsWithoutRef } from "react"
4+
import { Code } from "nextra/components"
5+
6+
import { Pre } from "@/components/pre"
7+
8+
import _CityQuery from "./city-query.mdx"
9+
10+
// Mirrors the components-map override the landing-page Wires illustration
11+
// uses for its API-gateway query: render the snippet frameless (no header,
12+
// no border, no bg) so the parent's .highlightsQuery class can extend the
13+
// per-line nth-child highlight overlays flush to the snippet's edges.
14+
const framelessSnippetComponents = {
15+
pre: (props: ComponentPropsWithoutRef<typeof Pre>) => (
16+
<Pre
17+
{...props}
18+
tabIndex={-1}
19+
className="!rounded-none !border-0 !bg-transparent !px-0 !py-2"
20+
/>
21+
),
22+
code: Code,
23+
}
24+
25+
export function CityQuerySnippet() {
26+
return <_CityQuery components={framelessSnippetComponents} />
27+
}

src/components/code-blocks/city-query.mdx renamed to src/app/conf/conference-kit/_components/city-query.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
```graphql word-wrap=false filename="getCity"
1+
```graphql word-wrap=false
22
query getCity($city: String) {
33
cities(name: $city) {
44
population

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

Lines changed: 56 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,26 @@
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"
51
import { GraphQLWordmarkLogo } from "@/icons"
6-
import { CityQuery } from "@/components/code-blocks"
2+
import { MobileDiagram } from "@/components/index-page/what-is-graphql/wires"
3+
import wiresStyles from "@/components/index-page/what-is-graphql/wires.module.css"
74

85
import { BannerFrame } from "./banner-frame"
96
import { BlobStripes } from "./blob-stripes"
7+
import { CityQuerySnippet } from "./city-query-snippet"
108
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
9+
import { TRUSTED_LOGOS } from "./trusted-logos"
3510

3611
export function LanguageBanner() {
3712
return (
3813
<BannerFrame
3914
slug="language"
4015
caption="GraphQL — the query language"
41-
className="flex flex-col bg-[#0A0B08] px-9 pt-9 text-white"
16+
className="flex flex-col gap-7 bg-[#0A0B08] p-9 text-white"
4217
>
4318
<BlobStripes
4419
position="70% 30%"
4520
size="155%"
4621
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%)]"
22+
evenClassName="bg-[linear-gradient(180deg,rgba(132,205,22,0.18)_0%,rgba(132,205,22,0.03)_100%)]"
23+
oddClassName="bg-[linear-gradient(180deg,rgba(132,205,22,0.04)_0%,rgba(70,109,11,0.18)_100%)]"
4924
/>
5025

5126
<div className="z-10 flex items-center justify-between">
@@ -55,81 +30,47 @@ export function LanguageBanner() {
5530
style={{ letterSpacing: "0.02em" }}
5631
>
5732
<span>schema-first</span>
58-
<span className="text-pri-base">•</span>
33+
<span className="text-sec-light">•</span>
5934
<span>typesafe</span>
60-
<span className="text-pri-base">•</span>
35+
<span className="text-sec-light">•</span>
6136
<span>flexible</span>
62-
<span className="text-pri-base">•</span>
37+
<span className="text-sec-light">•</span>
6338
<span>fast</span>
6439
</div>
6540
</div>
6641

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>
42+
<h2 className="z-10 mb-0 mt-16 text-[60px] font-medium leading-[1.05] tracking-tight">
43+
The query
44+
<br />
45+
language
46+
<br />
47+
for your API
48+
</h2>
8149

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 }}
50+
<p
51+
className="typography-body-lg z-10 m-0 text-white/80"
52+
style={{ lineHeight: 1.4, textWrap: "pretty" }}
9553
>
96-
{features.map(({ Icon, label, iconClassName }) => (
54+
An open-standard query language and runtime that lets clients ask for
55+
exactly the data they need — and nothing more.
56+
</p>
57+
58+
<div className="relative isolate z-10 flex flex-1 items-center justify-center">
59+
<MobileDiagram step={1} className="block overflow-visible" />
60+
<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
9761
<div
98-
key={label}
99-
className="flex flex-col items-center gap-3.5 px-1 py-2"
62+
className={`${wiresStyles.highlightsQuery} border border-sec-base/25 bg-[#0A0B08]/80 py-3 backdrop-blur-sm`}
63+
style={{ ["--highlight-opacity" as string]: 1 }}
10064
>
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>
65+
<CityQuerySnippet />
11066
</div>
111-
))}
112-
</div>
113-
114-
<div className="absolute inset-x-9 z-10" style={{ top: 810 }}>
115-
<CityQuery />
67+
</div>
11668
</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>
12569

126-
<div
127-
className="absolute z-10 grid grid-cols-2 gap-2.5"
128-
style={{ top: 1020 }}
129-
>
70+
<div className="z-10 mt-auto grid grid-cols-2 gap-2.5">
13071
<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" />
72+
<div className="flex size-16 shrink-0 items-center justify-center border-[1.5px] border-sec-base">
73+
<ArrowRightLine className="size-7 text-sec-base" />
13374
</div>
13475
<div className="min-w-0">
13576
<div
@@ -170,7 +111,28 @@ export function LanguageBanner() {
170111
</div>
171112
</div>
172113

173-
<BannerTrustedFooter />
114+
<div className="z-10">
115+
<div
116+
className="mb-3 font-mono text-[11px] uppercase text-white/55"
117+
style={{ letterSpacing: "0.04em" }}
118+
>
119+
Trusted in production
120+
</div>
121+
<div className="grid grid-cols-5 grid-rows-2 items-center gap-x-2 gap-y-3">
122+
{TRUSTED_LOGOS.map(({ name, Component, height }) => (
123+
<div
124+
key={name}
125+
className="flex h-[38px] min-w-0 items-center justify-center overflow-hidden"
126+
aria-label={name}
127+
>
128+
<Component
129+
className="max-h-full w-auto max-w-full shrink"
130+
style={{ height, filter: "brightness(0) invert(1)" }}
131+
/>
132+
</div>
133+
))}
134+
</div>
135+
</div>
174136
</BannerFrame>
175137
)
176138
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export default function ConferenceKitPage() {
2323
stripes={
2424
<HeroStripes
2525
className="-scale-x-100 dark:data-[loaded=true]:opacity-80"
26-
evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-sec-light))_0%,hsl(319deg_100%_90%_/_0.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-100))_100%)]"
27-
oddClassName="bg-[linear-gradient(180deg,hsl(319deg_100%_90%_/_0.2)_0%,hsl(var(--color-sec-base))_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-0))_100%)]"
26+
evenClassName="bg-[linear-gradient(180deg,hsl(var(--color-sec-light))_0%,hsl(319deg_100%_90%_/_0.2)_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-100)/0.1)_100%)]"
27+
oddClassName="bg-[linear-gradient(180deg,hsl(319deg_100%_90%_/_0.2)_0%,hsl(var(--color-sec-base))_100%)] dark:bg-[linear-gradient(180deg,hsl(var(--color-sec-dark))_0%,hsl(var(--color-neu-0)/0.6)_100%)]"
2828
/>
2929
}
3030
>
@@ -36,15 +36,15 @@ export default function ConferenceKitPage() {
3636
</Hero>
3737

3838
<main className="gql-all-anchors-focusable gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
39-
<section className="gql-container gql-section">
40-
<header className="mb-10 flex flex-wrap items-end justify-between gap-4">
39+
<section className="gql-container">
40+
<header className="gql-section flex flex-wrap items-end justify-between gap-4">
4141
<h2 className="typography-h2">Roll-up banners</h2>
4242
<Button href="/conference-kit/banners.zip" download>
4343
Download
4444
</Button>
4545
</header>
4646

47-
<div className="grid grid-cols-1 gap-8 xl:grid-cols-2">
47+
<div className="flex max-w-full gap-4 overflow-scroll p-4">
4848
<AmsterdamBanner />
4949
<LanguageBanner />
5050
<AiHeroBanner />

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

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

2926
const components = {
3027
pre: Pre,
@@ -68,4 +65,3 @@ export const ResponseHeroFriends = () => (
6865
<_ResponseHeroFriends components={components} />
6966
)
7067

71-
export const CityQuery = () => <_CityQuery components={components} />

0 commit comments

Comments
 (0)