Skip to content

Commit b58036e

Browse files
hasparushasparus
committed
Use SVGR to load sponsor logos and fix the grid layout
1 parent 99d68aa commit b58036e

File tree

7 files changed

+73
-256
lines changed

7 files changed

+73
-256
lines changed

‎next.config.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,38 @@ export default withLess(
3131
rule.test?.test?.(".svg"),
3232
)
3333

34-
fileLoaderRule.exclude = ALLOWED_SVG_REGEX
34+
fileLoaderRule.exclude = /\.svg$/i
35+
36+
config.module.rules.push(
37+
// All .svg from /icons/ and with ?svgr are going to be processed by @svgr/webpack
38+
{
39+
test: ALLOWED_SVG_REGEX,
40+
use: ["@svgr/webpack"],
41+
},
42+
{
43+
test: /\.svg$/i,
44+
exclude: ALLOWED_SVG_REGEX,
45+
resourceQuery: /svgr/,
46+
use: [
47+
{
48+
loader: "@svgr/webpack",
49+
options: {
50+
dimensions: false, // **adds** viewBox.
51+
},
52+
},
53+
],
54+
},
55+
// Otherwise, we use the default file loader
56+
{
57+
...fileLoaderRule,
58+
test: /\.svg$/i,
59+
exclude: ALLOWED_SVG_REGEX,
60+
resourceQuery: {
61+
not: [...fileLoaderRule.resourceQuery.not, /svgr/],
62+
},
63+
},
64+
)
3565

36-
config.module.rules.push({
37-
test: ALLOWED_SVG_REGEX,
38-
use: ["@svgr/webpack"],
39-
})
4066
return config
4167
},
4268
output: "export",

‎public/img/conf/Sponsors/Tyk.svg

Lines changed: 1 addition & 5 deletions
Loading

‎src/app/conf/2025/components/register-today/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function RegisterToday({ className }: RegisterTodayProps) {
1818
className,
1919
)}
2020
>
21-
{/* todo: test if the placeholder works in deploy preview */}
21+
{/* todo: placeholders work in preview, but they could use some improvement */}
2222
<NextImage
2323
src={speakerImage}
2424
alt="GraphQL Conference"

‎src/app/conf/2025/components/sponsors.tsx

Lines changed: 34 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
1-
import Stellate from "public/img/conf/Sponsors/Stellate.svg"
2-
import Postman from "public/img/conf/Sponsors/Postman.svg"
3-
import Solo from "public/img/conf/Sponsors/Solo.svg"
4-
import Hasura from "public/img/conf/Sponsors/Hasura.svg"
5-
import TheGraph from "public/img/conf/Sponsors/TheGraph.svg"
6-
import TheGuild from "public/img/conf/Sponsors/TheGuild.svg"
7-
import Hygraph from "public/img/conf/Sponsors/Hygraph.svg"
8-
import StepZen from "public/img/conf/Sponsors/StepZen.svg"
9-
import Inigo from "public/img/conf/Sponsors/Inigo.svg"
10-
import Neo4j from "public/img/conf/Sponsors/Neo4j.svg"
11-
import WunderGraph from "public/img/conf/Sponsors/WunderGraph.svg"
12-
import Graphabase from "public/img/conf/Sponsors/Graphabase.svg"
13-
import GraphQLWeekly from "public/img/conf/Partners/GraphQLWeekly.svg"
14-
import GraphQLWTF from "public/img/conf/Partners/GraphQLwtf.svg"
15-
import EscapeTechnologies from "public/img/conf/Partners/EscapeTechnologies.svg"
16-
import AmsterdamGraphQL from "public/img/conf/Partners/AmsterdamGraphQL.svg"
17-
import BangkokGraphQL from "public/img/conf/Partners/BangkokGraphQL.svg"
18-
import TypeGraphQL from "public/img/conf/Partners/TypeGraphQL.svg"
1+
import Stellate from "public/img/conf/Sponsors/Stellate.svg?svgr"
2+
import Hasura from "public/img/conf/Sponsors/Hasura.svg?svgr"
3+
import TheGuild from "public/img/conf/Sponsors/TheGuild.svg?svgr"
4+
import Apollo from "public/img/conf/Sponsors/Apollo.svg?svgr"
5+
import Tyk from "public/img/conf/Sponsors/Tyk.svg?svgr"
6+
import IBM from "public/img/conf/Sponsors/IBM.svg?svgr"
7+
import Graphweaver from "public/img/conf/Sponsors/Graphweaver.svg?svgr"
8+
199
import NextImage from "next-image-export-optimizer"
2010
import { clsx } from "clsx"
2111

@@ -36,101 +26,27 @@ function TierIcon() {
3626
}
3727

3828
interface Image {
39-
icon: string
29+
icon: React.FC<React.SVGProps<SVGElement>>
4030
name: string
4131
link: string
4232
}
4333

4434
const sponsorDiamond: Image[] = [
45-
{ icon: Hasura, name: "Hasura", link: "https://hasura.io" },
46-
{ icon: Postman, name: "Postman", link: "https://postman.com" },
4735
{ icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" },
48-
]
49-
50-
const sponsorPlatinum: Image[] = [
51-
{ icon: Hygraph, name: "Hygraph", link: "https://hygraph.com" },
52-
{ icon: Solo, name: "Solo.io", link: "https://solo.io" },
36+
{ icon: IBM, name: "IBM", link: "https://www.ibm.com/products/api-connect" },
5337
]
5438

5539
const sponsorGold: Image[] = [
56-
{ icon: StepZen, name: "StepZen", link: "https://stepzen.com" },
57-
{ icon: Inigo, name: "Inigo", link: "https://inigo.io" },
58-
{ icon: TheGraph, name: "The Graph", link: "https://thegraph.com" },
40+
{ icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" },
41+
{ icon: Graphweaver, name: "Graphweaver", link: "https://graphweaver.com" },
42+
{ icon: Hasura, name: "Hasura", link: "https://hasura.io" },
5943
]
6044

6145
const sponsorSilver: Image[] = [
62-
{ icon: Graphabase, name: "Graphabase", link: "https://graphabase.com" },
63-
{ icon: Neo4j, name: "Neo4j", link: "https://neo4j.com" },
6446
{ icon: Stellate, name: "Stellate", link: "https://stellate.co" },
65-
{ icon: WunderGraph, name: "WunderGraph", link: "https://wundergraph.com" },
47+
{ icon: Tyk, name: "Tyk", link: "https://tyk.io/" },
6648
]
6749

68-
const workshopDaySponsors: Image[] = [
69-
{ icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" },
70-
]
71-
72-
const mediaPartners: Image[] = [
73-
{ icon: GraphQLWTF, name: "GraphQLWTF", link: "https://graphql.wtf" },
74-
{
75-
icon: GraphQLWeekly,
76-
name: "GraphQLWeekly",
77-
link: "https://graphqlweekly.com",
78-
},
79-
]
80-
81-
const communityPartners: Image[] = [
82-
{
83-
icon: AmsterdamGraphQL,
84-
name: "Amsterdam GraphQL",
85-
link: "https://meetup.com/amsterdam-graphql-meetup",
86-
},
87-
{
88-
icon: BangkokGraphQL,
89-
name: "Bangkok GraphQL",
90-
link: "https://meetup.com/graphql-bangkok",
91-
},
92-
{
93-
icon: EscapeTechnologies,
94-
name: "EscapeTechnologies",
95-
link: "https://escape.tech",
96-
},
97-
{ icon: TypeGraphQL, name: "TypeGraphQL", link: "https://typegraphql.com" },
98-
]
99-
100-
function List({
101-
items,
102-
className,
103-
linkClassName,
104-
}: {
105-
items: Image[]
106-
className?: string
107-
linkClassName?: string
108-
}) {
109-
return (
110-
<div className={clsx("flex flex-row flex-wrap gap-x-8 gap-y-4", className)}>
111-
{items.map(({ link, icon, name }, i) => (
112-
<a
113-
key={i}
114-
href={link}
115-
target="_blank"
116-
rel="noreferrer"
117-
title={name}
118-
className={clsx(
119-
"flex h-24 w-72 items-center justify-center",
120-
linkClassName,
121-
)}
122-
>
123-
<NextImage
124-
alt={`${name} logo`}
125-
src={icon}
126-
className="max-h-16 w-auto max-w-[80%] shrink-0 object-contain text-neu-600"
127-
/>
128-
</a>
129-
))}
130-
</div>
131-
)
132-
}
133-
13450
export interface SponsorsProps {
13551
heading?: string
13652
}
@@ -146,10 +62,6 @@ const sponsorTiers: Tier[] = [
14662
name: "Diamond",
14763
items: sponsorDiamond,
14864
},
149-
{
150-
name: "Platinum",
151-
items: sponsorPlatinum,
152-
},
15365
{
15466
name: "Gold",
15567
items: sponsorGold,
@@ -158,53 +70,47 @@ const sponsorTiers: Tier[] = [
15870
name: "Silver",
15971
items: sponsorSilver,
16072
},
161-
{
162-
name: "Workshop Day Sponsor",
163-
items: workshopDaySponsors,
164-
},
16573
]
16674

167-
const partnerTiers: Tier[] = [
168-
{
169-
name: "Media Partners",
170-
items: mediaPartners,
171-
},
172-
{
173-
name: "Community Partners",
174-
items: communityPartners,
175-
},
176-
]
177-
// --- End Data structure ---
178-
17975
export function Sponsors({ heading }: SponsorsProps) {
18076
return (
181-
<section className="gql-conf-section py-16">
77+
<section className="gql-conf-section mx-auto w-fit max-w-full py-16">
18278
<h1 className="typography-h2">{heading}</h1>
18379

18480
<div className="mt-10 md:mt-16">
18581
{sponsorTiers.map(tier => (
18682
<Tier key={tier.name} tier={tier} />
18783
))}
18884
</div>
189-
190-
<div className="flex flex-col self-stretch border-t border-[#E7E9E2] pt-16">
191-
<h1 className="mb-4 text-5xl font-normal text-[#0E0F0B]">Partners</h1>
192-
{partnerTiers.map(tier => (
193-
<Tier key={tier.name} tier={tier} />
194-
))}
195-
</div>
19685
</section>
19786
)
19887
}
19988

20089
function Tier({ tier }: { tier: Tier }) {
20190
return (
20291
<div className="flex gap-x-12 gap-y-4 border-t border-neu-200 py-4 dark:border-neu-50 max-md:flex-col">
203-
<h3 className="min-w-[180px] whitespace-nowrap font-mono text-sm font-normal uppercase text-primary">
92+
<h3 className="min-w-[60px] whitespace-nowrap font-mono text-sm font-normal uppercase text-primary">
20493
<TierIcon />
20594
{tier.name}
20695
</h3>
207-
<List items={tier.items} />
96+
<div
97+
className={clsx(
98+
"grid justify-center gap-x-8 gap-y-4 md:grid-cols-2 xl:grid-cols-3",
99+
)}
100+
>
101+
{tier.items.map(({ link, icon: Icon, name }, i) => (
102+
<a
103+
key={i}
104+
href={link}
105+
target="_blank"
106+
rel="noreferrer"
107+
title={name}
108+
className="group flex h-24 w-72 items-center justify-center rounded-lg opacity-70 [--fill:hsl(var(--color-neu-700))] hover:bg-neu-500/10 hover:[--fill:hsl(var(--color-neu-800))] dark:opacity-90"
109+
>
110+
<Icon className="h-16 w-auto max-w-[80%] shrink-0 fill-[--fill] [&_path]:fill-[--fill]" />
111+
</a>
112+
))}
113+
</div>
208114
</div>
209115
)
210116
}

‎src/app/conf/2025/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export default function Page() {
3434
</div>
3535
<div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
3636
<Sponsor />
37-
<Speakers />
37+
{/* <Speakers /> */}
3838
<Register />
3939
<Venue />
4040
<FAQ />

0 commit comments

Comments
 (0)