From 3dcbd53e792bcc3a38de59587fcb7c787ee5c937 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Thu, 8 May 2025 18:56:03 +0200 Subject: [PATCH 1/6] Refactor the logo link out, restyle old footer --- src/app/conf/2025/components/footer.tsx | 64 +++++++++++++++++++ .../components/graphql-conf-logo-link.tsx | 52 +++++++++++++++ src/app/conf/2025/components/navbar.tsx | 32 +--------- src/app/conf/2025/layout.tsx | 17 ++--- src/app/conf/_components/social-icons.tsx | 14 +++- 5 files changed, 135 insertions(+), 44 deletions(-) create mode 100644 src/app/conf/2025/components/footer.tsx create mode 100644 src/app/conf/2025/components/graphql-conf-logo-link.tsx diff --git a/src/app/conf/2025/components/footer.tsx b/src/app/conf/2025/components/footer.tsx new file mode 100644 index 0000000000..f1b85f5a2e --- /dev/null +++ b/src/app/conf/2025/components/footer.tsx @@ -0,0 +1,64 @@ +import NextLink from "next/link" +import { ReactNode } from "react" +import { clsx } from "clsx" +import { SocialIcons } from "../../_components/social-icons" + +export function Footer({ + links, + logo, +}: { + links: { href: string; children: string; "aria-disabled"?: true }[][] + logo: ReactNode +}) { + return ( + + ) +} diff --git a/src/app/conf/2025/components/graphql-conf-logo-link.tsx b/src/app/conf/2025/components/graphql-conf-logo-link.tsx new file mode 100644 index 0000000000..1862f2f45a --- /dev/null +++ b/src/app/conf/2025/components/graphql-conf-logo-link.tsx @@ -0,0 +1,52 @@ +import NextLink from "next/link" +import { clsx } from "clsx" + +export interface GraphQLConfLogoLinkProps + extends React.HTMLAttributes { + year: number +} + +export function GraphQLConfLogoLink({ + className, + year, + ...rest +}: GraphQLConfLogoLinkProps) { + return ( +
+ + + + / + + GraphQLConf {year} + +
+ ) +} + +function GraphQLLogo(props: React.SVGProps) { + return ( + + + + + + + + + + ) +} diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx index 914b7edcb8..bf05f34254 100644 --- a/src/app/conf/2025/components/navbar.tsx +++ b/src/app/conf/2025/components/navbar.tsx @@ -9,6 +9,7 @@ import { Badge } from "../../_components/badge" import MenuIcon from "../pixelarticons/menu.svg?svgr" import CloseIcon from "../pixelarticons/close.svg?svgr" +import { GraphQLConfLogoLink } from "./graphql-conf-logo-link" export interface NavbarProps { links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[] @@ -49,18 +50,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement { >
-
- - - - / - - GraphQLConf {year} - -
+

@@ -127,24 +117,6 @@ export function Navbar({ links, year }: NavbarProps): ReactElement { ) } -function GraphQLLogo(props: React.SVGProps) { - return ( - - - - - - - - - - ) -} - function BackdropBlur() { const mask = "linear-gradient(to bottom,#000 0% 50%, transparent 50% 100%)" return ( diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx index 271ae1807c..2f17c08bfe 100644 --- a/src/app/conf/2025/layout.tsx +++ b/src/app/conf/2025/layout.tsx @@ -1,14 +1,15 @@ import { ReactElement, ReactNode } from "react" import { Metadata } from "next" -import { Footer } from "../_components/footer" -import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons" -import NextLink from "next/link" + import { NewFontsStyleTag } from "../../fonts" import "../../colors.css" + import { Navbar } from "./components/navbar" +import { Footer } from "./components/footer" // @ts-expect-error: we want to import the same version as Nextra for the main page import { ThemeProvider } from "next-themes" +import { GraphQLConfLogoLink } from "./components/graphql-conf-logo-link" export const metadata = { description: @@ -51,15 +52,7 @@ export default function Layout({

{children}