From 32981d829aa9d60cac868ca6bfe8daa9f8b7b233 Mon Sep 17 00:00:00 2001 From: Jory Burson Date: Mon, 19 May 2025 10:45:47 -0400 Subject: [PATCH 1/5] Add Board Meeting Summary (#1997) * Create 2025-05-15-governing-board-recap.md * Prettier --------- Co-authored-by: Benjie Gillam --- .../blog/2025-05-15-governing-board-recap.md | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/pages/blog/2025-05-15-governing-board-recap.md diff --git a/src/pages/blog/2025-05-15-governing-board-recap.md b/src/pages/blog/2025-05-15-governing-board-recap.md new file mode 100644 index 0000000000..13ce7ac04d --- /dev/null +++ b/src/pages/blog/2025-05-15-governing-board-recap.md @@ -0,0 +1,28 @@ +--- +title: 📣 April 2025 GraphQL Foundation Board Meeting Recap +tags: ["blog"] +date: 2025-05-15 +byline: GraphQL Governing Board +--- + +The GraphQL Foundation Governing Board met April 17 to discuss ongoing community efforts, technical progress, and upcoming events—read on for the highlights: + +### **🖥️ Website Redesign Underway** + +The first version of the new GraphQL.org design is live for community feedback on [GitHub](https://github.com/graphql/community-wg/issues/21#issuecomment-2766734209)! Championed by The Guild, the new site focuses on communicating GraphQL’s value to different types of users. Check it out on GitHub and [Figma](http://figma.com/proto/aPUvZDSxJfYDJtPd7GF2sB/GraphQL.org?page-id=10%3A13019&node-id=649-3367&viewport=-2607%2C336%2C0.13&t=eZKIRpRkrWRATgQb-9&scaling=scale-down&content-scaling=fixed&starting-point-node-id=649%3A3367&show-proto-sidebar=1)—your feedback is welcome. + +### **🌍 Planning GraphQL All-Hands** + +We had fabulous input and a great turn out for our first public board meeting, which was held at GraphQLConf 2024. We’re building on that idea with a plan to host twice-a-year **GraphQL All-Hands** sessions. These gatherings will celebrate progress, share strategic updates, and foster open discussion. The next one will take place at [GraphQLConf 2025](https://graphql.org/conf/2025/) this fall! + +### **📊 Community Survey Discussion** + +Several Board and community members are exploring a user survey to help shape technical priorities, improve documentation, and inform event content. The Board discussed options to help the effort start small and release iteratively—stay tuned! + +### **💸 Budget & Membership** + +We're exploring aligning our fiscal planning with GraphQLConf to better match our annual rhythm. We also celebrated progress on new community grants! 🎉 + +### **🎤 GraphQLConf 2025** + +We’re expanding community involvement in the CFP process by becoming a **Subject Matter Expert**—we’re looking for volunteers to help rank talks for the conference program. Also, we're proud to support an [ALS charity swim team](https://graphql.org/blog/graphql-stream-team/) happening before the conference. The CFP closed **May 12**. From b7ab00d543caa2e2e9c4ba9a161c35d5ed677544 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 20 May 2025 20:30:42 +0200 Subject: [PATCH 2/5] =?UTF-8?q?new=20conf=20design=20=E2=80=94=20landing?= =?UTF-8?q?=20(#1995)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add Hans Grotesk as --font-sans * Clean up the font setup to make sure .font-sans works consistently * Add Commit Mono as --font-mono * Add new colors * Use relative rgb colors to support alpha * Use unwraped custom properties for colors to support older browsers * Add typography styles * Make the texts switch to different size starting from `lg` * Go back to switching on 768px * Add README.md to explain the new directory * Add Anchor component for internal and external links * Add clsx to classFunctions in Tailwind VSCode settings * Add Button component * Add `variant` prop * Fix Button colors * Tweak hover color * Set text color in dark mode * Add RegisterToday section * Tweak RegisterToday section spacing * Improve mobile styles * Improve paddings for medium screen sizes * Add a global focus style className * Improve medium screen size styles * Add Calendar and Pin from Pixelarticons * Move typography styles to a Tailwind plugin so they autocomplete * Extract the event links * Move RegisterToday to components dir * Fix typography-d1 size * Use next-theems from transitive dep (for now) (we need `dark:` prefix for Hero) * Draft Hero component * Move Pixelarticons to .tsx files * Make the Hero match designs * Redo the Hero stripes in CSS * Tweak focus outline * Use alternative gradients in dark mode * Animate mask bean on load to avoid blinking * Tweak styles for mobiles and large screen sizes * Remove todo comment * Clean up more comments * Add Navbar * Improve the backdrop layer * Make the gradient match Figma * Add What to Expect section * Improve gql-conf-container class * Style What to Expect section nicely * Remove the old Intro section * Add a two hacky classes to make the old part of website still readable * Make the gradient match Figma * Add top minds section * improve styles * Improve social buttons * Add more socials * Update styles * More responsive styles * Show [Become as speakser] if there is no /speakers page yet * Improve the contrast of secondary button in dark mode * Make Tanmai's photo as green as the others * Add GetYourTicket section * Improve GetYourTicket styles * Improve the stripes * Lower the opacity to make text readable * Fix borders * Update text * Make the padding and borders better * Add RegisterSection * Underline links * Add Sponsors section * Tweak styles * Use SVGR to load sponsor logos and fix the grid layout * Make it less transparent and get rid of border radius * Remove a redundant comment * Remove unused import * Fix a type name * Use a proper icon * Fix alignment * Add Call for Proposals section * make the dates table * Improve styles * Begin mobile version * Tweak styles * Add the stripes * Add missing keys * Add .typography-link utility * Add FrequentlyAskedQuestions section * Tweak spacing * Bump navbar opacities * Make the Navbar okay * Add background strips per section * Remove unused import * Make the navbar more mobile friendly * Make the navbar consistent color at the top * Supress hydration warning from next-themes * Make the FAQ work better on medium screens * Fix the CallForProposals on mobile * Take a random shot at fixing the stripes glitch * Fix the navbar root link * Make the logo link to / and the text to conf root * Remove the old Register section * Update old sections to new typography styles * Fix Tyk logo * Add shrink-0 to arrows * Update navbar icons to pixelarticons * Make CallForProposals better on tablet screens * Fix border colors * Tweak spacing * Tweak the top minds for medium screens * Tweak the heading width * Add GraphQLFoundationCard * Use proper trademark color * Tweak spacings * Improve mobile styles * Refactor the logo link out, restyle old footer * Add stripes to the footer * Add grid borders to the footer * Tweak the blur blob position * Unify paddings * Make the Stripes look more like the design * Remove old pnpm-workspace.yaml * Add a basic Marquee with Motion * Copy the content of the marquee way too many times * Make the decoration look like on the design * Add remaining marquee sections * Unify colors and block scroll in navbar * Switch to current sponsors * Restyle the Sponsorship perks section * Run Prettier on SVGs * Change dl to ul in WhatToExpectSection * Show previous edition speakers in the top minds section * Restyle Resources * Unify widths per @saihaj's suggestion Co-authored-by: Saihajpreet Singh * Unify more widths per @saihaj's suggestion Co-authored-by: Saihajpreet Singh * Tweak styles --------- Co-authored-by: Saihajpreet Singh --- .vscode/settings.json | 3 +- next.config.js | 36 +- package.json | 3 + pnpm-lock.yaml | 90 +++ pnpm-workspace.yaml | 2 - public/img/conf/Sponsors/Tyk.svg | 23 +- src/app/colors.css | 40 ++ src/app/conf/2023/layout.tsx | 2 + src/app/conf/2024/layout.tsx | 2 + .../assets/graphql-foundation-wordmark.svg | 113 ++++ .../become-a-sponsor/blur-blob.webp | Bin 0 -> 630866 bytes .../components/become-a-sponsor/index.tsx | 125 +++++ .../2025/components/call-for-proposals.tsx | 525 ++++++++++++++++++ .../2025/components/footer/blur-bean.webp | Bin 0 -> 615738 bytes src/app/conf/2025/components/footer/index.tsx | 150 +++++ .../components/get-your-ticket/blur-bean.webp | Bin 0 -> 5276550 bytes .../2025/components/get-your-ticket/index.tsx | 74 +++ .../get-your-ticket/ticket-period.tsx | 91 +++ .../get-your-ticket/ticket-periods.tsx | 55 ++ .../components/graphql-conf-logo-link.tsx | 52 ++ .../components/graphql-foundation-card.tsx | 20 + .../components/hero/blur-bean-cropped.webp | Bin 0 -> 914356 bytes .../conf/2025/components/hero/hero-photo.jpeg | Bin 0 -> 541125 bytes src/app/conf/2025/components/hero/index.tsx | 112 ++++ src/app/conf/2025/components/image-loaded.tsx | 21 + .../2025/components/marquee-rows/blur.webp | Bin 0 -> 134962 bytes .../2025/components/marquee-rows/index.tsx | 93 ++++ src/app/conf/2025/components/navbar.tsx | 149 +++++ .../components/register-section/index.tsx | 90 +++ .../2025/components/register-today/index.tsx | 48 ++ .../components/register-today/speaker.webp | Bin 0 -> 138084 bytes src/app/conf/2025/components/sponsors.tsx | 85 +++ .../conf/2025/components/top-minds/index.tsx | 207 +++++++ .../conf/2025/components/what-to-expect.tsx | 35 ++ src/app/conf/2025/faq.tsx | 256 +++++++-- src/app/conf/2025/index.module.css | 6 - src/app/conf/2025/layout.tsx | 70 +-- src/app/conf/2025/links.ts | 5 + src/app/conf/2025/page.tsx | 129 +++-- .../conf/2025/pixelarticons/arrow-down.svg | 13 + .../conf/2025/pixelarticons/calendar-icon.tsx | 15 + .../conf/2025/pixelarticons/chevron-right.tsx | 17 + src/app/conf/2025/pixelarticons/close.svg | 5 + src/app/conf/2025/pixelarticons/code.svg | 16 + src/app/conf/2025/pixelarticons/menu.svg | 3 + src/app/conf/2025/pixelarticons/pin-icon.tsx | 15 + src/app/conf/2025/register.tsx | 63 --- src/app/conf/2025/resources/client-mdx.tsx | 15 +- src/app/conf/2025/resources/page.tsx | 28 +- src/app/conf/2025/resources/prose.css | 37 ++ src/app/conf/2025/resources/resources.mdx | 6 +- src/app/conf/2025/speakers.tsx | 390 ------------- src/app/conf/2025/sponsors.tsx | 115 ---- src/app/conf/2025/sponsorship.tsx | 54 -- src/app/conf/2025/venue.tsx | 55 +- src/app/conf/_components/button.tsx | 2 +- src/app/conf/_components/info-grid.tsx | 17 +- src/app/conf/_components/social-icons.tsx | 14 +- src/app/conf/_design-system/README.md | 1 + src/app/conf/_design-system/anchor.tsx | 42 ++ src/app/conf/_design-system/button.tsx | 100 ++++ src/app/conf/_design-system/marquee.tsx | 143 +++++ .../_design-system/stripes-decoration.tsx | 37 ++ src/app/env.d.ts | 5 + src/app/fonts/CommitMono-VariableFont.woff2 | Bin 0 -> 86768 bytes ...HostGrotesk-Italic-VariableFont_wght.woff2 | Bin 0 -> 33724 bytes .../fonts/HostGrotesk-VariableFont_wght.woff2 | Bin 0 -> 31160 bytes src/app/fonts/index.tsx | 30 + src/app/fonts/old-fonts.tsx | 14 + src/app/layout.tsx | 12 +- src/globals.css | 21 + tailwind.config.ts | 149 ++++- 72 files changed, 3259 insertions(+), 887 deletions(-) delete mode 100644 pnpm-workspace.yaml create mode 100644 src/app/colors.css create mode 100644 src/app/conf/2025/assets/graphql-foundation-wordmark.svg create mode 100644 src/app/conf/2025/components/become-a-sponsor/blur-blob.webp create mode 100644 src/app/conf/2025/components/become-a-sponsor/index.tsx create mode 100644 src/app/conf/2025/components/call-for-proposals.tsx create mode 100644 src/app/conf/2025/components/footer/blur-bean.webp create mode 100644 src/app/conf/2025/components/footer/index.tsx create mode 100644 src/app/conf/2025/components/get-your-ticket/blur-bean.webp create mode 100644 src/app/conf/2025/components/get-your-ticket/index.tsx create mode 100644 src/app/conf/2025/components/get-your-ticket/ticket-period.tsx create mode 100644 src/app/conf/2025/components/get-your-ticket/ticket-periods.tsx create mode 100644 src/app/conf/2025/components/graphql-conf-logo-link.tsx create mode 100644 src/app/conf/2025/components/graphql-foundation-card.tsx create mode 100644 src/app/conf/2025/components/hero/blur-bean-cropped.webp create mode 100644 src/app/conf/2025/components/hero/hero-photo.jpeg create mode 100644 src/app/conf/2025/components/hero/index.tsx create mode 100644 src/app/conf/2025/components/image-loaded.tsx create mode 100644 src/app/conf/2025/components/marquee-rows/blur.webp create mode 100644 src/app/conf/2025/components/marquee-rows/index.tsx create mode 100644 src/app/conf/2025/components/navbar.tsx create mode 100644 src/app/conf/2025/components/register-section/index.tsx create mode 100644 src/app/conf/2025/components/register-today/index.tsx create mode 100644 src/app/conf/2025/components/register-today/speaker.webp create mode 100644 src/app/conf/2025/components/sponsors.tsx create mode 100644 src/app/conf/2025/components/top-minds/index.tsx create mode 100644 src/app/conf/2025/components/what-to-expect.tsx delete mode 100644 src/app/conf/2025/index.module.css create mode 100644 src/app/conf/2025/links.ts create mode 100644 src/app/conf/2025/pixelarticons/arrow-down.svg create mode 100644 src/app/conf/2025/pixelarticons/calendar-icon.tsx create mode 100644 src/app/conf/2025/pixelarticons/chevron-right.tsx create mode 100644 src/app/conf/2025/pixelarticons/close.svg create mode 100644 src/app/conf/2025/pixelarticons/code.svg create mode 100644 src/app/conf/2025/pixelarticons/menu.svg create mode 100644 src/app/conf/2025/pixelarticons/pin-icon.tsx delete mode 100644 src/app/conf/2025/register.tsx create mode 100644 src/app/conf/2025/resources/prose.css delete mode 100644 src/app/conf/2025/speakers.tsx delete mode 100644 src/app/conf/2025/sponsors.tsx delete mode 100644 src/app/conf/2025/sponsorship.tsx create mode 100644 src/app/conf/_design-system/README.md create mode 100644 src/app/conf/_design-system/anchor.tsx create mode 100644 src/app/conf/_design-system/button.tsx create mode 100644 src/app/conf/_design-system/marquee.tsx create mode 100644 src/app/conf/_design-system/stripes-decoration.tsx create mode 100644 src/app/fonts/CommitMono-VariableFont.woff2 create mode 100644 src/app/fonts/HostGrotesk-Italic-VariableFont_wght.woff2 create mode 100644 src/app/fonts/HostGrotesk-VariableFont_wght.woff2 create mode 100644 src/app/fonts/index.tsx create mode 100644 src/app/fonts/old-fonts.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json index cb56bf9fab..02d49400e5 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -8,5 +8,6 @@ "typescript.tsdk": "node_modules/typescript/lib", "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" - } + }, + "tailwindCSS.classFunctions": ["clsx"] } 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/package.json b/package.json index 4b92b8bf88..b7d60df083 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@graphql-tools/schema": "10.0.15", "@headlessui/react": "^1.7.17", "@radix-ui/react-radio-group": "^1.1.3", + "@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/nesting": "0.0.0-insiders.565cd3e", "@tailwindcss/typography": "^0.5.10", "autoprefixer": "^10.4.17", @@ -39,6 +40,7 @@ "lucide-react": "^0.469.0", "markdown-to-jsx": "^7.4.0", "marked": "5.1.2", + "motion": "^12.11.0", "next": "^14.2.5", "next-image-export-optimizer": "^1.12.3", "next-query-params": "^5.0.0", @@ -53,6 +55,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-medium-image-zoom": "5.2.13", + "react-use-measure": "^2.1.7", "rss": "1.2.2", "server-only": "0.0.1", "string-similarity": "^4.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c830a6cbd2..c2cde5d2db 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -22,6 +22,9 @@ importers: '@radix-ui/react-radio-group': specifier: ^1.1.3 version: 1.2.2(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tailwindcss/container-queries': + specifier: ^0.1.1 + version: 0.1.1(tailwindcss@3.4.17) '@tailwindcss/nesting': specifier: 0.0.0-insiders.565cd3e version: 0.0.0-insiders.565cd3e(postcss@8.4.49) @@ -70,6 +73,9 @@ importers: marked: specifier: 5.1.2 version: 5.1.2 + motion: + specifier: ^12.11.0 + version: 12.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) next: specifier: ^14.2.5 version: 14.2.22(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -112,6 +118,9 @@ importers: react-medium-image-zoom: specifier: 5.2.13 version: 5.2.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-use-measure: + specifier: ^2.1.7 + version: 2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) rss: specifier: 1.2.2 version: 1.2.2 @@ -1703,6 +1712,11 @@ packages: '@swc/helpers@0.5.5': resolution: {integrity: sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==} + '@tailwindcss/container-queries@0.1.1': + resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==} + peerDependencies: + tailwindcss: '>=3.2.0' + '@tailwindcss/nesting@0.0.0-insiders.565cd3e': resolution: {integrity: sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==} peerDependencies: @@ -2731,6 +2745,20 @@ packages: fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} + framer-motion@12.11.0: + resolution: {integrity: sha512-BaBPmkhaC2l0n619Kt1nQaxSdUdyyz5V1Z7EKJ1CcraOTZitgVx0RTbL8lmg2XesaFi6o8MPBIhkWDIvzDpGaQ==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + fs.realpath@1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} @@ -3596,6 +3624,26 @@ packages: mj-context-menu@0.6.1: resolution: {integrity: sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA==} + motion-dom@12.11.0: + resolution: {integrity: sha512-CItkGYJenn5ZsbzTX0D9mE0UWdjdd9r535FrxEXhzR8Kwa9I2dLr1uhEJgQPWbgaIJ6i0sNFnf2T9NvVDWQVBw==} + + motion-utils@12.9.4: + resolution: {integrity: sha512-BW3I65zeM76CMsfh3kHid9ansEJk9Qvl+K5cu4DVHKGsI52n76OJ4z2CUJUV+Mn3uEP9k1JJA3tClG0ggSrRcg==} + + motion@12.11.0: + resolution: {integrity: sha512-1DIh+uBh2Ledv8VlJfveLuE+6tTAkLqRxhBHQSH6Ct8PxcZpUWY7z9E34L3LvnGbXp8u97hGSjeDsmvmVrjOeQ==} + peerDependencies: + '@emotion/is-prop-valid': '*' + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true + react: + optional: true + react-dom: + optional: true + mri@1.2.0: resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} engines: {node: '>=4'} @@ -4054,6 +4102,15 @@ packages: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-use-measure@2.1.7: + resolution: {integrity: sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==} + peerDependencies: + react: '>=16.13' + react-dom: '>=16.13' + peerDependenciesMeta: + react-dom: + optional: true + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -6456,6 +6513,10 @@ snapshots: '@swc/counter': 0.1.3 tslib: 2.8.1 + '@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.17)': + dependencies: + tailwindcss: 3.4.17 + '@tailwindcss/nesting@0.0.0-insiders.565cd3e(postcss@8.4.49)': dependencies: postcss: 8.4.49 @@ -7593,6 +7654,15 @@ snapshots: fraction.js@4.3.7: {} + framer-motion@12.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + motion-dom: 12.11.0 + motion-utils: 12.9.4 + tslib: 2.8.1 + optionalDependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + fs.realpath@1.0.0: {} fsevents@2.3.3: @@ -8886,6 +8956,20 @@ snapshots: mj-context-menu@0.6.1: {} + motion-dom@12.11.0: + dependencies: + motion-utils: 12.9.4 + + motion-utils@12.9.4: {} + + motion@12.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + framer-motion: 12.11.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + tslib: 2.8.1 + optionalDependencies: + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + mri@1.2.0: {} ms@2.1.2: {} @@ -9332,6 +9416,12 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + react-use-measure@2.1.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + react: 18.3.1 + optionalDependencies: + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml deleted file mode 100644 index cac8a5aaf9..0000000000 --- a/pnpm-workspace.yaml +++ /dev/null @@ -1,2 +0,0 @@ -packages: - - "website" diff --git a/public/img/conf/Sponsors/Tyk.svg b/public/img/conf/Sponsors/Tyk.svg index 5d9487148a..06fa8b1397 100644 --- a/public/img/conf/Sponsors/Tyk.svg +++ b/public/img/conf/Sponsors/Tyk.svg @@ -1,18 +1,7 @@ - - - - - - - - - \ No newline at end of file + + + + + + diff --git a/src/app/colors.css b/src/app/colors.css new file mode 100644 index 0000000000..95ec008b24 --- /dev/null +++ b/src/app/colors.css @@ -0,0 +1,40 @@ +:root, +.light { + --color-pri-lighter: 319 100% 90%; + --color-pri-light: 318 100% 80%; + --color-pri-base: 319 100% 44.1%; + --color-pri-dark: 319 100% 30%; + --color-pri-darker: 319 100% 20%; + + --color-sec-lighter: 79 80% 90%; + --color-sec-light: 79 82% 80%; + --color-sec-base: 79 90% 65%; + --color-sec-dark: 79 98% 37%; + --color-sec-darker: 79 98% 23%; + + --color-neu-0: 0 0% 100%; + --color-neu-50: 75 57% 97%; + --color-neu-100: 75 15% 95%; + --color-neu-200: 77 14% 90%; + --color-neu-300: 76 14% 85%; + --color-neu-400: 77 14% 80%; + --color-neu-500: 74 14% 70%; + --color-neu-600: 76 15% 60%; + --color-neu-700: 76 15% 40%; + --color-neu-800: 77 14% 20%; + --color-neu-900: 75 15% 5%; +} + +.dark { + --color-neu-900: 0 0% 100%; + --color-neu-800: 75 57% 97%; + --color-neu-700: 75 15% 95%; + --color-neu-600: 77 14% 90%; + --color-neu-500: 76 14% 85%; + --color-neu-400: 77 14% 80%; + --color-neu-300: 74 14% 70%; + --color-neu-200: 76 15% 60%; + --color-neu-100: 76 15% 40%; + --color-neu-50: 77 14% 20%; + --color-neu-0: 75 15% 5%; +} diff --git a/src/app/conf/2023/layout.tsx b/src/app/conf/2023/layout.tsx index 4669949d2c..6b3f04a9db 100644 --- a/src/app/conf/2023/layout.tsx +++ b/src/app/conf/2023/layout.tsx @@ -4,6 +4,7 @@ import { Header } from "../_components/header" import { Footer } from "../_components/footer" import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons" import NextLink from "next/link" +import { OldFontsStyleTag } from "../../fonts/old-fonts" export const metadata = { description: @@ -33,6 +34,7 @@ export default function ConfLayout({ const hover = "#c026d3" return ( <> + diff --git a/src/globals.css b/src/globals.css index 4d74f4b054..efca847c5b 100644 --- a/src/globals.css +++ b/src/globals.css @@ -503,3 +503,24 @@ div[id^="headlessui-menu-items"] { @apply text-xl; @apply dark:border-neutral-700/80; } + +.gql-focus-visible, +.gql-all-anchors-focusable a { + @apply focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-[5px] focus-visible:outline-neu-900; +} + +.gql-conf-container { + @apply mx-auto w-full max-w-[120rem]; +} + +.gql-conf-section { + @apply px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24 3xl:px-[240px]; +} + +.gql-conf-navbar-strip { + @apply relative [contain:paint] before:sticky before:top-0 before:z-[9] before:-mt-[var(--navbar-h)] before:block before:h-[var(--navbar-h)] before:w-full before:content-['']; +} + +:root { + --navbar-h: 70px; +} diff --git a/tailwind.config.ts b/tailwind.config.ts index 6a71eba9d0..639673a139 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,8 @@ +import { fontFamily } from "tailwindcss/defaultTheme" import type { Config } from "tailwindcss" import typography from "@tailwindcss/typography" - +import plugin from "tailwindcss/plugin" +import containerQueries from "@tailwindcss/container-queries" const config: Config = { content: ["./src/**/*.{js,ts,jsx,tsx,mdx}", "./theme.config.tsx"], theme: { @@ -9,10 +11,59 @@ const config: Config = { padding: "1rem", }, extend: { + fontFamily: { + sans: [ + `var(--font-sans, ${fontFamily.sans.slice(0, 3).join(", ")})`, + ...fontFamily.sans, + ], + mono: [ + `var(--font-mono, ${fontFamily.mono.slice(0, 3).join(", ")})`, + ...fontFamily.mono, + ], + }, + screens: { + "3xl": "1920px", + }, colors: { primary: "#e10098", "conf-black": "#0e031c", black: "#1b1b1b", + + // #region new design system colors + "pri-lighter": "hsl(var(--color-pri-lighter) / )", + "pri-light": "hsl(var(--color-pri-light) / )", + "pri-base": "hsl(var(--color-pri-base) / )", + "pri-dark": "hsl(var(--color-pri-dark) / )", + "pri-darker": "hsl(var(--color-pri-darker) / )", + + "sec-lighter": "hsl(var(--color-sec-lighter) / )", + "sec-light": "hsl(var(--color-sec-light) / )", + "sec-base": "hsl(var(--color-sec-base) / )", + "sec-dark": "hsl(var(--color-sec-dark) / )", + "sec-darker": "hsl(var(--color-sec-darker) / )", + + // We're using 3-letter color names to avoid conflicting + // with the old `neutral` color. + "neu-0": "hsl(var(--color-neu-0) / )", + "neu-50": "hsl(var(--color-neu-50) / )", + "neu-100": "hsl(var(--color-neu-100) / )", + "neu-200": "hsl(var(--color-neu-200) / )", + "neu-300": "hsl(var(--color-neu-300) / )", + "neu-400": "hsl(var(--color-neu-400) / )", + "neu-500": "hsl(var(--color-neu-500) / )", + "neu-600": "hsl(var(--color-neu-600) / )", + "neu-700": "hsl(var(--color-neu-700) / )", + "neu-800": "hsl(var(--color-neu-800) / )", + "neu-900": "hsl(var(--color-neu-900) / )", + + blk: "#000", + + /** + * GraphQL Rhodamine as per the trademark guidelines + * https://www.graphql.org/brand/ + */ + rhodamine: "#e10098", + // #endregion new design system colors }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", @@ -32,7 +83,101 @@ const config: Config = { }, }, }, - plugins: [typography], + plugins: [ + typography, + containerQueries, + plugin(({ addUtilities }) => { + // heading styles + addUtilities({ + ".typography-d1, .typography-h1, .typography-h2, .typography-h3": { + lineHeight: "1.2", + }, + ".typography-d1": { + fontSize: "48px", + "@screen lg": { + fontSize: "96px", + }, + }, + ".typography-h1": { + fontSize: "40px", + "@screen lg": { + fontSize: "72px", + }, + }, + ".typography-h2": { + fontSize: "32px", + "@screen md": { + fontSize: "48px", + }, + }, + ".typography-h3": { + fontSize: "24px", + "@screen md": { + fontSize: "32px", + }, + }, + }) + + // paragraph styles + addUtilities({ + ".typography-body-lg, .typography-body-md, .typography-body-sm, .typography-body-xs": + { + lineHeight: "1.5", + }, + ".typography-body-lg": { + fontSize: "16px", + "@screen md": { + fontSize: "20px", + }, + }, + ".typography-body-md": { + fontSize: "14px", + "@screen md": { + fontSize: "16px", + }, + }, + ".typography-body-sm": { + fontSize: "12px", + "@screen md": { + fontSize: "14px", + }, + }, + ".typography-body-xs": { + fontSize: "10px", + "@screen md": { + fontSize: "12px", + }, + }, + }) + + // other text styles + addUtilities({ + ".typography-button, .typography-tagline": { + fontSize: "16px", + lineHeight: "1", + }, + ".typography-tagline": { + textTransform: "uppercase", + }, + ".typography-menu": { + fontFamily: "var(--font-mono)", + fontSize: "14px", + lineHeight: "1", + textTransform: "uppercase", + }, + }) + + addUtilities({ + ".typography-link": { + color: "theme('colors.neu-800')", + textDecoration: "underline", + "&:hover": { + textDecoration: "none", + }, + }, + }) + }), + ], darkMode: ["class", 'html[class~="dark"]'], } export default config From fed3feb21f97e4e5d1be79d34f06a60f6b9c9d08 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Tue, 20 May 2025 21:57:57 +0200 Subject: [PATCH 3/5] Unify paddings --- src/app/conf/2025/components/footer/index.tsx | 6 +++--- src/app/conf/2025/components/navbar.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/conf/2025/components/footer/index.tsx b/src/app/conf/2025/components/footer/index.tsx index 14cee22cb9..4728c3e963 100644 --- a/src/app/conf/2025/components/footer/index.tsx +++ b/src/app/conf/2025/components/footer/index.tsx @@ -23,7 +23,7 @@ export function Footer({ return (