diff --git a/next.config.js b/next.config.js index bfd990f81e..24baa11c51 100644 --- a/next.config.js +++ b/next.config.js @@ -31,12 +31,38 @@ export default withLess( rule.test?.test?.(".svg"), ) - fileLoaderRule.exclude = ALLOWED_SVG_REGEX + fileLoaderRule.exclude = /\.svg$/i + + config.module.rules.push( + // All .svg from /icons/ and with ?svgr are going to be processed by @svgr/webpack + { + test: ALLOWED_SVG_REGEX, + use: ["@svgr/webpack"], + }, + { + test: /\.svg$/i, + exclude: ALLOWED_SVG_REGEX, + resourceQuery: /svgr/, + use: [ + { + loader: "@svgr/webpack", + options: { + dimensions: false, // **adds** viewBox. + }, + }, + ], + }, + // Otherwise, we use the default file loader + { + ...fileLoaderRule, + test: /\.svg$/i, + exclude: ALLOWED_SVG_REGEX, + resourceQuery: { + not: [...fileLoaderRule.resourceQuery.not, /svgr/], + }, + }, + ) - config.module.rules.push({ - test: ALLOWED_SVG_REGEX, - use: ["@svgr/webpack"], - }) return config }, output: "export", diff --git a/public/img/conf/Sponsors/Tyk.svg b/public/img/conf/Sponsors/Tyk.svg index 5d9487148a..fa93f6756b 100644 --- a/public/img/conf/Sponsors/Tyk.svg +++ b/public/img/conf/Sponsors/Tyk.svg @@ -5,14 +5,10 @@ .c { fill: #fff; } - - .d { - fill: #20edba; - } - \ No newline at end of file + diff --git a/src/app/conf/2025/components/register-today/index.tsx b/src/app/conf/2025/components/register-today/index.tsx index 0858a5dcd1..a5ab991340 100644 --- a/src/app/conf/2025/components/register-today/index.tsx +++ b/src/app/conf/2025/components/register-today/index.tsx @@ -18,7 +18,7 @@ export function RegisterToday({ className }: RegisterTodayProps) { className, )} > - {/* todo: test if the placeholder works in deploy preview */} + {/* todo: placeholders work in preview, but they could use some improvement */} > + name: string + link: string +} + +const sponsorDiamond: Sponsor[] = [ + { icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" }, + { icon: IBM, name: "IBM", link: "https://www.ibm.com/products/api-connect" }, +] + +const sponsorGold: Sponsor[] = [ + { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" }, + { icon: Graphweaver, name: "Graphweaver", link: "https://graphweaver.com" }, + { icon: Hasura, name: "Hasura", link: "https://hasura.io" }, +] + +const sponsorSilver: Sponsor[] = [ + { icon: Stellate, name: "Stellate", link: "https://stellate.co" }, + { icon: Tyk, name: "Tyk", link: "https://tyk.io/" }, +] + +export interface SponsorsProps { + heading?: string +} + +interface Tier { + name: string + items: Sponsor[] +} + +const sponsorTiers: Tier[] = [ + { + name: "Diamond", + items: sponsorDiamond, + }, + { + name: "Gold", + items: sponsorGold, + }, + { + name: "Silver", + items: sponsorSilver, + }, +] + +export function Sponsors({ heading }: SponsorsProps) { + return ( +
+

{heading}

+ +
+ {sponsorTiers.map(tier => ( + + ))} +
+
+ ) +} + +function Tier({ tier }: { tier: Tier }) { + return ( +
+

+ + {tier.name} +

+
+ {tier.items.map(({ link, icon: Icon, name }, i) => ( + + + + ))} +
+
+ ) +} diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx index c02f4c3d6f..76ee2bd4f1 100644 --- a/src/app/conf/2025/page.tsx +++ b/src/app/conf/2025/page.tsx @@ -5,7 +5,6 @@ import { Sponsor } from "./sponsorship" import { Venue } from "./venue" import { FAQ } from "./faq" import { Register } from "./register" -import { Sponsors } from "./sponsors" import { Speakers } from "./speakers" import { RegisterToday } from "./components/register-today" import { Hero } from "./components/hero" @@ -13,6 +12,7 @@ import WhatToExpectSection from "./components/what-to-expect" import TopMindsSection from "./components/top-minds" import { GetYourTicket } from "./components/get-your-ticket" import { RegisterSection } from "./components/register-section" +import { Sponsors } from "./components/sponsors" export const metadata: Metadata = { title: "GraphQLConf 2025 — Sept 08-10", @@ -30,11 +30,11 @@ export default function Page() {
+
- - + {/* */} diff --git a/src/app/conf/2025/pixelarticons/chevron-right.tsx b/src/app/conf/2025/pixelarticons/chevron-right.tsx new file mode 100644 index 0000000000..180cbc0c4d --- /dev/null +++ b/src/app/conf/2025/pixelarticons/chevron-right.tsx @@ -0,0 +1,17 @@ +export function ChevronRight(props: React.SVGProps) { + return ( + + + + ) +} diff --git a/src/app/conf/2025/sponsors.tsx b/src/app/conf/2025/sponsors.tsx deleted file mode 100644 index 3896c1fae2..0000000000 --- a/src/app/conf/2025/sponsors.tsx +++ /dev/null @@ -1,116 +0,0 @@ -import Grafbase from "public/img/conf/Sponsors/Grafbase.svg" - -import { clsx } from "clsx" -import NextImage from "next-image-export-optimizer" -import { Fragment } from "react" - -type LogosType = { - icon: string - name: string - link: string -} - -const SPONSORS: Array<{ - title: string - logos: Array -}> = [ - // { - // title: "Diamond", - // logos: [ - // { icon: TheGuild, name: "The Guild", link: "https://the-guild.dev" }, - // { - // icon: IBM, - // name: "IBM", - // link: "https://www.ibm.com/products/api-connect", - // }, - // ], - // }, - // { - // title: "Gold", - // logos: [ - // { icon: Apollo, name: "Apollo", link: "https://www.apollographql.com/" }, - // { - // icon: Graphweaver, - // name: "Graphweaver", - // link: "https://graphweaver.com", - // }, - // { icon: Hasura, name: "Hasura", link: "https://hasura.io" }, - // ], - // }, - { - title: "Silver", - logos: [ - { icon: Grafbase, name: "Grafbase", link: "https://grafbase.com/" }, - ], - }, -] - -function List({ - items, - className, - linkClassName, -}: { - className?: string - items: Array - linkClassName?: string -}) { - return ( -
- {items.map(({ link, icon, name }, i) => ( - - - - ↗ - - - ))} -
- ) -} - -export function Sponsors() { - return ( -
-

Sponsors

- {SPONSORS.map(({ title, logos }, i) => ( - -
- {/* Square box */} -
-

{title}

-
- - - ))} -
- ) -} diff --git a/src/app/env.d.ts b/src/app/env.d.ts index f83eac487c..a0ee3ba5f3 100644 --- a/src/app/env.d.ts +++ b/src/app/env.d.ts @@ -6,3 +6,8 @@ declare module "*.mdx" { export default ReactComponent export const getStaticPaths: GetStaticPaths } + +declare module "*.svg?svgr" { + const content: React.FC> + export default content +}