new conf design — speakers (#1996)

* 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 <[email protected]>

* Unify more widths per @saihaj's suggestion

Co-authored-by: Saihajpreet Singh <[email protected]>

* Tweak styles

* Draft new Speakers and Schedule pages

* Bring styles closer to the design

* Improve styles

* Improve schedule grid styles

* Add [See the speakers] link

* Add comboboxes to filters

* Improve dark mode styles

* Add variant=tertiary to Button

* Reuse Hero component

* Improve [Clear Filters] button

* Fix the background color

* Improve hover style

* Improve the backlink

* Actually improve the backlink

* Bring styles closer to the design

* Add SpeakerCard

* Add a speaker name above the title

* Fix the TS target (match Node version)

* Remove (now redundant) @ts-ignore comments

* Display socials in consistent order

* Bring the schedule page closer to the design

* Improve UI

* Format

* Stop showing socials on speaker cards

* Improve styles

* Remove [View full PDF] button

* Improve the UI of session page

* Add a footer to speakers page

* Format

* Upgrade `@headlessui/react`

* Open the combobox as soon as it's focused

* Add USE_2025 constant

* Link to proper Sched on Schedule page

* Add a footer to the schedule page

* Improve styles

* Fix type errors

* Grab speaker tags

* Display returning and first time speaker

* Fix icon size

* Shorten a tag that's way too long

* wip

* wip

* wip

* wip

* wip

* Tweak things

* Progress

* Improve how session description looks like

* add force-cache to old data to help develop

* Format links in bios

* Remove a TODO comment

* Improve padding

* bring it closer to the design

* style the speaker page

* Format

* Fix speaker card on mobiles

* Tweak spacing

* Update Prettier to try to fix the CI

* Add React rules for ESLint back

* Remove extra padding on very narrow screens

* Run ESLint on CI

* Tailwind class autosorting is inconsistent between runs tailwindlabs/prettier-plugin-tailwindcss#246

* Format

* Fix type error

* Improve error handling

* Sync 2025 speakers

* Hide [Add to calendar] for now

* Fix schedule paddings, hide [first time speaker] (yes) and [add to calendar] (for now?)

* Clean up empty tag

* Add calendar link and fix long session cards

* Fix text color

* Fix type error

* Sync schedule 2025

* Omit inactive sessions

* Rotate speakers properly when syncing

* Show only speakers that have an active session

* Add aspect-square

* Fix schedule styles and handle malformed event types

* Fix it again

* Tweak cards knowing 2025 data

* Remove placeholder video

* Always lowercase social service name

* Tweak filters for new design

* Tweak the copy in What to Expect section

* Tweak tags for new data

* Add new colors

* Fix filters

* Improve Filters

* Fix filters for multiselects

* Fix type error

* Fix sticky navbar when listbox opens

---------

Co-authored-by: Saihajpreet Singh <[email protected]>

Author: hasparus

.eslintrc.cjs

@@ -5,7 +5,15 @@ const MARKDOWN_EXT = "md,mdx"
 
 module.exports = {
   root: true,
-  plugins: ["@graphql-eslint", "mdx", "@typescript-eslint", "tailwindcss"],
+  plugins: [
+    "@graphql-eslint",
+    "mdx",
+    "@typescript-eslint",
+    "tailwindcss",
+    "react",
+    "@next/next",
+    "react-hooks",
+  ],
   overrides: [
     {
       files: [`**/*.{${CODE_EXT}}`],
@@ -14,8 +22,42 @@ module.exports = {
         "plugin:@typescript-eslint/recommended",
         "plugin:tailwindcss/recommended",
         "prettier",
+        "plugin:@next/next/recommended",
+        "plugin:react-hooks/recommended-legacy",
+        "plugin:react/recommended",
       ],
       rules: {
+        "react/react-in-jsx-scope": "off", // TS checks this
+        "react/prop-types": "off", // and this
+        "no-undef": "off", // and this too
+        // This is type checking for projects without `@types/react`. Disabled due to false positives.
+        "react/no-unknown-property": "off",
+
+        "react/no-unescaped-entities": [
+          "warn", // quotes and apostrophes are okay
+          {
+            forbid: [
+              {
+                char: "<",
+                alternatives: ["&lt;"],
+              },
+              {
+                char: ">",
+                alternatives: ["&gt;"],
+              },
+              {
+                char: "{",
+                alternatives: ["&#123;"],
+              },
+              {
+                char: "}",
+                alternatives: ["&#125;"],
+              },
+            ],
+          },
+        ],
+        "@next/next/no-img-element": "off", // straight up upsell, small `img`s actually don't need optimization
+
         "tailwindcss/classnames-order": "off",
         "@typescript-eslint/no-restricted-imports": [
           "error",
@@ -41,6 +83,9 @@ module.exports = {
         tailwindcss: {
           whitelist: ["roboto-mono"],
         },
+        react: {
+          version: "detect",
+        },
       },
     },
     {
@@ -63,6 +108,7 @@ module.exports = {
       },
       rules: {
         "mdx/remark": "error",
+        "no-unused-expressions": "off",
       },
     },
     {
@@ -90,7 +136,9 @@ module.exports = {
     {
       files: [
         `src/pages/blog/**/*.{${MARKDOWN_EXT}}`,
+        `src/pages/graphql-js/running-an-express-graphql-server.mdx`,
         `src/code/**/*.{${MARKDOWN_EXT}}`,
+        `src/app/conf/**/*.{${MARKDOWN_EXT}}`,
       ],
       rules: {
         // Disable `remark-lint-first-heading-level` since in blogs we don't want to enforce the first heading to be an `h1`

.github/workflows/check.yml

@@ -17,9 +17,8 @@ jobs:
       - name: Install Dependencies
         run: pnpm i
 
-      # Commented out until later PR that changes the ESLint config
-      # - name: Run ESLint
-      #   run: pnpm lint --quiet
+      - name: Run ESLint
+        run: pnpm lint --quiet
 
       - name: Run Prettier Check
         run: pnpm format:check

package.json

@@ -21,74 +21,78 @@
   },
   "dependencies": {
     "@graphql-tools/schema": "10.0.15",
-    "@headlessui/react": "^1.7.17",
-    "@radix-ui/react-radio-group": "^1.1.3",
+    "@headlessui/react": "^2.2.4",
+    "@radix-ui/react-radio-group": "^1.2.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/nesting": "0.0.0-insiders.565cd3e",
-    "@tailwindcss/typography": "^0.5.10",
-    "autoprefixer": "^10.4.17",
-    "clsx": "^2.1.0",
+    "@tailwindcss/typography": "^0.5.15",
+    "autoprefixer": "^10.4.20",
+    "calendar-link": "^2.10.0",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.19",
     "codemirror-graphql": "1.3.2",
     "date-fns": "^2.30.0",
-    "fast-glob": "^3.3.2",
+    "fast-glob": "^3.3.3",
     "graphql": "16.10.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-string": "3.0.1",
-    "iframe-resizer-react": "^1.1.0",
+    "iframe-resizer-react": "^1.1.1",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.469.0",
-    "markdown-to-jsx": "^7.4.0",
+    "markdown-to-jsx": "^7.7.2",
     "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",
+    "next": "^14.2.22",
+    "next-image-export-optimizer": "^1.18.0",
+    "next-query-params": "^5.0.1",
     "next-sitemap": "^4.2.3",
     "next-with-less": "^3.0.1",
     "nextra": "3.0.0-alpha.28",
     "nextra-theme-docs": "3.0.0-alpha.28",
     "numbro": "2.5.0",
     "p-limit": "^4.0.0",
     "parser-front-matter": "1.6.4",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.49",
     "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",
-    "string-strip-html": "^13.4.5",
-    "tailwindcss": "^3.4.1",
+    "string-strip-html": "^13.4.8",
+    "tailwindcss": "^3.4.17",
     "timeago.js": "4.0.2",
     "unified": "11.0.5",
     "unist-util-visit": "^5.0.0",
     "use-query-params": "^2.2.1"
   },
   "devDependencies": {
     "@graphql-eslint/eslint-plugin": "4.3.0",
-    "@svgr/webpack": "^8.0.1",
+    "@next/eslint-plugin-next": "^15.3.3",
+    "@svgr/webpack": "^8.1.0",
     "@types/codemirror": "5.60.7",
     "@types/hast": "3.0.4",
-    "@types/node": "^22.10.2",
-    "@types/react": "^18.2.73",
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.3.18",
     "@types/rss": "0.0.32",
     "@types/string-similarity": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "7.18.0",
     "@typescript-eslint/parser": "7.18.0",
     "eslint": "8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-tailwindcss": "3.17.5",
-    "prettier": "3.4.2",
-    "prettier-plugin-pkg": "^0.18.1",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier": "3.5.3",
+    "prettier-plugin-pkg": "^0.20.0",
+    "prettier-plugin-tailwindcss": "^0.6.12",
     "remark-frontmatter": "5.0.0",
     "remark-lint-first-heading-level": "3.1.2",
     "remark-lint-heading-increment": "3.1.2",
-    "tsx": "^4.7.0",
-    "typescript": "^5.4.3"
+    "tsx": "^4.19.4",
+    "typescript": "^5.8.3"
   },
   "pnpm": {
     "patchedDependencies": {