From 10e679be569863769e5ba1ecf8b6ef81ccaa9bc1 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 4 Jul 2025 17:13:54 +0200 Subject: [PATCH 1/7] wip --- package.json | 4 +- src/components/index-page/hero.tsx | 4 +- src/components/navbar/navbar.tsx | 198 +++++++++++++++++++++++++++++ src/components/utils.tsx | 9 ++ src/globals.css | 6 - theme.config.tsx | 7 +- 6 files changed, 217 insertions(+), 11 deletions(-) create mode 100644 src/components/navbar/navbar.tsx create mode 100644 src/components/utils.tsx diff --git a/package.json b/package.json index ab39267ca6..8738f012ae 100644 --- a/package.json +++ b/package.json @@ -48,8 +48,8 @@ "next-query-params": "^5.0.1", "next-sitemap": "^4.2.3", "next-with-less": "^3.0.1", - "nextra": "^3", - "nextra-theme-docs": "^3", + "nextra": "3.3.1", + "nextra-theme-docs": "3.3.1", "numbro": "2.5.0", "p-limit": "^4.0.0", "parser-front-matter": "1.6.4", diff --git a/src/components/index-page/hero.tsx b/src/components/index-page/hero.tsx index 4d8588556a..5e5b709c7d 100644 --- a/src/components/index-page/hero.tsx +++ b/src/components/index-page/hero.tsx @@ -7,7 +7,7 @@ import logoBlurred from "./hero/logo-blurred.png" export function Hero() { return ( -
+

@@ -44,7 +44,7 @@ function HeroStripes() {
[route.name, route]), + ) + return ( + + + cn( + classes.link, + classes.inactive, + "max-md:_hidden _items-center _whitespace-nowrap _flex _gap-1.5 _ring-inset", + focus && "nextra-focusable", + ) + } + > + {children} + {"->"} + + + cn( + "motion-reduce:_transition-none", + "nextra-focus", + open ? "_opacity-100" : "_opacity-0", + "nextra-scrollbar _transition-opacity", + "_border _border-black/5 dark:_border-white/20", + "_backdrop-blur-lg bg-[rgb(var(--nextra-bg),.8)]", // todo: full screen overlay + "_z-20 _rounded-md _py-1 _text-sm", + // headlessui adds max-height as style, use !important to override + "!_max-h-[min(calc(100vh-5rem),256px)]", + ) + } + anchor={{ to: "top end", gap: 10, padding: 16 }} + > + {Object.entries(menu.items || {}).map(([key, item]) => ( + + + {item.title} + + + ))} + + + ) +} + +export function Navbar({ items }: NavBarProps): ReactElement { + const themeConfig = useThemeConfig() + + const activeRoute = useFSRoute() + const { menu, setMenu } = useMenu() + + return ( +
+
+ +
+ ) +} diff --git a/src/components/utils.tsx b/src/components/utils.tsx new file mode 100644 index 0000000000..13d2cec23a --- /dev/null +++ b/src/components/utils.tsx @@ -0,0 +1,9 @@ +export function renderComponent( + ComponentOrNode: React.FC | React.ReactNode, + props?: T, +) { + if (!ComponentOrNode) return null + if (typeof ComponentOrNode !== "function") return ComponentOrNode + // @ts-expect-error TS2322: Type '{}' is not assignable to type 'T' + return +} diff --git a/src/globals.css b/src/globals.css index 4dbefd6e5c..8321f3a953 100644 --- a/src/globals.css +++ b/src/globals.css @@ -3,12 +3,6 @@ @import "tailwindcss/utilities"; @import "tailwindcss/components"; -/* #region nextra tweaks (preferably removed later, replaced with components) */ -.nextra-nav-container > nav > div:nth-child(2) { - margin-right: auto; -} -/* #endregion nextra tweaks */ - :root { --foreground-rgb: 0, 0, 0; --background-start-rgb: 214, 219, 220; diff --git a/theme.config.tsx b/theme.config.tsx index 2580fae932..430d1753df 100644 --- a/theme.config.tsx +++ b/theme.config.tsx @@ -1,5 +1,9 @@ import { DocsThemeConfig, ThemeSwitch, useConfig } from "nextra-theme-docs" import NextLink from "next/link" +import { useRouter } from "next/router" + +import { Navbar } from "@/components/navbar/navbar" + import { GraphQLWordmarkLogo, StackOverflowIcon, @@ -7,7 +11,7 @@ import { DiscordIcon, TwitterIcon, } from "./src/icons" -import { useRouter } from "next/router" + // import { createElement } from "react" // import NextImage from "next-image-export-optimizer" @@ -229,6 +233,7 @@ export default { content: Footer, }, navbar: { + component: Navbar, extraContent: , }, toc: { From a49550ba0e979780589d3f8999d1b6873260738b Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 4 Jul 2025 19:28:11 +0200 Subject: [PATCH 2/7] style the navbar more --- src/components/navbar/navbar.tsx | 118 +++++++++++++++++++++---------- src/globals.css | 5 ++ src/nextra-theme-docs.css | 50 ------------- src/pages/_meta.tsx | 7 +- theme.config.tsx | 12 +++- 5 files changed, 101 insertions(+), 91 deletions(-) diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx index 3e5287d6fd..ebe7155571 100644 --- a/src/components/navbar/navbar.tsx +++ b/src/components/navbar/navbar.tsx @@ -1,5 +1,5 @@ import { MenuItem, Menu, MenuButton, MenuItems } from "@headlessui/react" -import cn from "clsx" +import clsx from "clsx" // eslint-disable-next-line no-restricted-imports -- since we don't need newWindow prop import NextLink from "next/link" import { Button } from "nextra/components" @@ -19,13 +19,7 @@ export interface NavBarProps { } const classes = { - link: cn( - "_text-sm contrast-more:_text-gray-700 contrast-more:dark:_text-gray-100", - ), - active: cn("_font-medium _subpixel-antialiased"), - inactive: cn( - "_text-gray-600 hover:_text-gray-800 dark:_text-gray-400 dark:hover:_text-gray-200", - ), + link: "typography-menu flex items-center text-neu-900 px-3 py-1 nextra-focus [text-box:trim-both_cap_alphabetic] leading-none", } function NavbarMenu({ @@ -42,33 +36,32 @@ function NavbarMenu({ - cn( + clsx( classes.link, - classes.inactive, - "max-md:_hidden _items-center _whitespace-nowrap _flex _gap-1.5 _ring-inset", + "flex items-center gap-1.5 whitespace-nowrap max-md:hidden", focus && "nextra-focusable", ) } > {children} - {"->"} - cn( - "motion-reduce:_transition-none", - "nextra-focus", - open ? "_opacity-100" : "_opacity-0", - "nextra-scrollbar _transition-opacity", - "_border _border-black/5 dark:_border-white/20", - "_backdrop-blur-lg bg-[rgb(var(--nextra-bg),.8)]", // todo: full screen overlay - "_z-20 _rounded-md _py-1 _text-sm", + clsx( + "motion-reduce:transition-none", + "focus-visible:outline-none", + open ? "opacity-100" : "opacity-0", + "nextra-scrollbar transition-opacity", + "bg-[rgb(var(--nextra-bg),.8)] backdrop-blur-lg", // todo: full screen overlay + "z-20 rounded-md py-1 text-sm", // headlessui adds max-height as style, use !important to override - "!_max-h-[min(calc(100vh-5rem),256px)]", + "!max-h-[min(calc(100vh-5rem),256px)]", ) } - anchor={{ to: "top end", gap: 10, padding: 16 }} + anchor={{ to: "top start", gap: 21, padding: 16 }} > {Object.entries(menu.items || {}).map(([key, item]) => ( -
- +
) } @@ -240,3 +264,14 @@ export function NavbarPlaceholder({ /> ) } + +function SubmenuBackdrop({ className }: { className: string }) { + return ( +
+ ) +} diff --git a/src/pages/_meta.tsx b/src/pages/_meta.tsx index 2c8fe04893..fa6c9544c6 100644 --- a/src/pages/_meta.tsx +++ b/src/pages/_meta.tsx @@ -81,7 +81,7 @@ export default { conf: { type: "page", title: ( - + GraphQLConf 2025 From f4f22611def23724304c8f70037c74540fe406e5 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 4 Jul 2025 20:33:06 +0200 Subject: [PATCH 4/7] Get rid of ts-expect-error --- src/components/utils.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/utils.tsx b/src/components/utils.tsx index 13d2cec23a..9074a85647 100644 --- a/src/components/utils.tsx +++ b/src/components/utils.tsx @@ -4,6 +4,5 @@ export function renderComponent( ) { if (!ComponentOrNode) return null if (typeof ComponentOrNode !== "function") return ComponentOrNode - // @ts-expect-error TS2322: Type '{}' is not assignable to type 'T' - return + return } From 3cbb21652774d5fee7be1ac8c79a23050654a3d3 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 4 Jul 2025 20:35:16 +0200 Subject: [PATCH 5/7] Update lockfile --- pnpm-lock.yaml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3770393c41..fb8006eaa9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -98,10 +98,10 @@ importers: specifier: ^3.0.1 version: 3.0.1(less-loader@12.2.0(less@4.2.1))(less@4.2.1)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)) nextra: - specifier: ^3 + specifier: 3.3.1 version: 3.3.1(patch_hash=ytqsrocfyxyupt7yg3khzgrhfe)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3) nextra-theme-docs: - specifier: ^3 + specifier: 3.3.1 version: 3.3.1(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(nextra@3.3.1(patch_hash=ytqsrocfyxyupt7yg3khzgrhfe)(@types/react@18.3.23)(next@14.2.29(@babel/core@7.26.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.8.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) numbro: specifier: 2.5.0 From 290933fe9765febf04b902e436187f9d7d9191b8 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Fri, 4 Jul 2025 20:37:08 +0200 Subject: [PATCH 6/7] Format --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8738f012ae..0869824cd4 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "next-sitemap": "^4.2.3", "next-with-less": "^3.0.1", "nextra": "3.3.1", - "nextra-theme-docs": "3.3.1", + "nextra-theme-docs": "3.3.1", "numbro": "2.5.0", "p-limit": "^4.0.0", "parser-front-matter": "1.6.4", From 4161131eff63b7583b9f116d6c3ac6f835750628 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 7 Jul 2025 16:27:28 +0200 Subject: [PATCH 7/7] Comment out the banner for now --- theme.config.tsx | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/theme.config.tsx b/theme.config.tsx index ffee4a6e98..63fd1090aa 100644 --- a/theme.config.tsx +++ b/theme.config.tsx @@ -205,21 +205,22 @@ export default { ) }, - banner: { - content: ( - <> - 📣 GraphQLConf 2025 • Sept 08-10 • Amsterdam • Early bird tickets - available & sponsorship opportunities open •{" "} - - Learn more - - - ), - key: "graphqlconf-2024", - }, + // Hidden for now, Design is discussing it. + // banner: { + // content: ( + // <> + // 📣 GraphQLConf 2025 • Sept 08-10 • Amsterdam • Early bird tickets + // available & sponsorship opportunities open •{" "} + // + // Learn more + // + // + // ), + // key: "graphqlconf-2024", + // }, logo: graphQLLogo, docsRepositoryBase: "https://github.com/graphql/graphql.github.io/tree/source",