Skip to content

Commit ee3992f

Browse files
hasparushasparus
committed
Refactor the logo link out, restyle old footer
1 parent 2c7c3b9 commit ee3992f

File tree

5 files changed

+135
-44
lines changed

5 files changed

+135
-44
lines changed

‎src/app/conf/2025/components/footer.tsx

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import NextLink from "next/link"
2+
import { ReactNode } from "react"
3+
import { clsx } from "clsx"
4+
import { SocialIcons } from "../../_components/social-icons"
5+
6+
export function Footer({
7+
links,
8+
logo,
9+
}: {
10+
links: { href: string; children: string; "aria-disabled"?: true }[][]
11+
logo: ReactNode
12+
}) {
13+
return (
14+
<footer className="gql-conf-section gql-all-anchors-focusable !bg-neu-100 py-10 text-neu-900 typography-menu dark:!bg-neu-0 max-md:px-0 max-md:pt-0 lg:py-20">
15+
<div className="mb-10 flex flex-wrap items-start justify-between xl:mb-32 xl:gap-10">
16+
<div className="border-neu-400 p-5 max-md:w-full max-md:border-b md:p-4">
17+
{logo}
18+
</div>
19+
{links.map((link, i) => (
20+
<ul key={i} className="max-md:contents">
21+
{link.map(({ "aria-disabled": isDisabled, children, ...link }) => (
22+
<li key={link.href} className="mb-3.5 max-md:w-1/2">
23+
<NextLink
24+
{...link}
25+
className={clsx(
26+
"gql-focus-visible block p-5",
27+
isDisabled
28+
? "pointer-events-none"
29+
: "underline-offset-4 hover:underline",
30+
)}
31+
tabIndex={isDisabled ? -1 : undefined}
32+
>
33+
{children}
34+
</NextLink>
35+
</li>
36+
))}
37+
</ul>
38+
))}
39+
</div>
40+
<div className="flex justify-between gap-10 text-sm max-lg:flex-col max-md:px-5">
41+
<div className="flex flex-col font-light max-md:gap-5">
42+
<p>
43+
Copyright © {new Date().getFullYear()} The GraphQL Foundation. All
44+
rights reserved.
45+
</p>
46+
<p>
47+
For web site terms of use, trademark policy and general project
48+
policies please see{" "}
49+
<a
50+
href="https://lfprojects.org"
51+
target="_blank"
52+
rel="noreferrer"
53+
className="typography-link"
54+
>
55+
https://lfprojects.org
56+
</a>
57+
.
58+
</p>
59+
</div>
60+
<SocialIcons className="[&>a:focus]:text-current [&>a:focus]:ring-transparent [&>a:hover]:bg-neu-900/10 [&>a:hover]:text-current" />
61+
</div>
62+
</footer>
63+
)
64+
}

‎src/app/conf/2025/components/graphql-conf-logo-link.tsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import NextLink from "next/link"
2+
import { clsx } from "clsx"
3+
4+
export interface GraphQLConfLogoLinkProps
5+
extends React.HTMLAttributes<HTMLDivElement> {
6+
year: number
7+
}
8+
9+
export function GraphQLConfLogoLink({
10+
className,
11+
year,
12+
...rest
13+
}: GraphQLConfLogoLinkProps) {
14+
return (
15+
<div
16+
className={clsx(
17+
"flex items-center gap-2 text-xl/none uppercase",
18+
className,
19+
)}
20+
{...rest}
21+
>
22+
<NextLink href="/" className="-m-1 p-1 hover:bg-neu-900/10">
23+
<GraphQLLogo className="h-6" />
24+
</NextLink>
25+
<span>/</span>
26+
<NextLink
27+
href={`/conf/${year}`}
28+
className="-m-2 p-2 underline-offset-4 hover:underline"
29+
>
30+
GraphQLConf {year}
31+
</NextLink>
32+
</div>
33+
)
34+
}
35+
36+
function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
37+
return (
38+
<svg viewBox="0 0 100 100" fill="currentColor" {...props}>
39+
<path
40+
fillRule="evenodd"
41+
clipRule="evenodd"
42+
d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"
43+
/>
44+
<circle cx="50" cy="9.3209" r="8.82" />
45+
<circle cx="85.2292" cy="29.6605" r="8.82" />
46+
<circle cx="85.2292" cy="70.3396" r="8.82" />
47+
<circle cx="50" cy="90.6791" r="8.82" />
48+
<circle cx="14.7659" cy="70.3396" r="8.82" />
49+
<circle cx="14.7659" cy="29.6605" r="8.82" />
50+
</svg>
51+
)
52+
}

‎src/app/conf/2025/components/navbar.tsx

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { Badge } from "../../_components/badge"
99

1010
import MenuIcon from "../pixelarticons/menu.svg?svgr"
1111
import CloseIcon from "../pixelarticons/close.svg?svgr"
12+
import { GraphQLConfLogoLink } from "./graphql-conf-logo-link"
1213

1314
export interface NavbarProps {
1415
links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[]
@@ -49,18 +50,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
4950
>
5051
<BackdropBlur />
5152
<div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 lg:px-10">
52-
<div className="flex items-center gap-2 text-xl/none uppercase">
53-
<NextLink href="/" className="-m-1 p-1 hover:bg-neu-900/10">
54-
<GraphQLLogo className="h-6" />
55-
</NextLink>
56-
<span>/</span>
57-
<NextLink
58-
href={`/conf/${year}`}
59-
className="-m-2 p-2 underline-offset-4 hover:underline"
60-
>
61-
GraphQLConf {year}
62-
</NextLink>
63-
</div>
53+
<GraphQLConfLogoLink year={year} />
6454

6555
<div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-black/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">
6656
<p className="flex items-center gap-2 text-sm">
@@ -127,24 +117,6 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
127117
)
128118
}
129119

130-
function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
131-
return (
132-
<svg viewBox="0 0 100 100" fill="currentColor" {...props}>
133-
<path
134-
fillRule="evenodd"
135-
clipRule="evenodd"
136-
d="M50 6.90308L87.323 28.4515V71.5484L50 93.0968L12.677 71.5484V28.4515L50 6.90308ZM16.8647 30.8693V62.5251L44.2795 15.0414L16.8647 30.8693ZM50 13.5086L18.3975 68.2457H81.6025L50 13.5086ZM77.4148 72.4334H22.5852L50 88.2613L77.4148 72.4334ZM83.1353 62.5251L55.7205 15.0414L83.1353 30.8693V62.5251Z"
137-
/>
138-
<circle cx="50" cy="9.3209" r="8.82" />
139-
<circle cx="85.2292" cy="29.6605" r="8.82" />
140-
<circle cx="85.2292" cy="70.3396" r="8.82" />
141-
<circle cx="50" cy="90.6791" r="8.82" />
142-
<circle cx="14.7659" cy="70.3396" r="8.82" />
143-
<circle cx="14.7659" cy="29.6605" r="8.82" />
144-
</svg>
145-
)
146-
}
147-
148120
function BackdropBlur() {
149121
const mask = "linear-gradient(to bottom,#000 0% 50%, transparent 50% 100%)"
150122
return (

‎src/app/conf/2025/layout.tsx

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { ReactElement, ReactNode } from "react"
22
import { Metadata } from "next"
3-
import { Footer } from "../_components/footer"
4-
import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
5-
import NextLink from "next/link"
3+
64
import { NewFontsStyleTag } from "../../fonts"
75
import "../../colors.css"
6+
87
import { Navbar } from "./components/navbar"
8+
import { Footer } from "./components/footer"
99

1010
// @ts-expect-error: we want to import the same version as Nextra for the main page
1111
import { ThemeProvider } from "next-themes"
12+
import { GraphQLConfLogoLink } from "./components/graphql-conf-logo-link"
1213

1314
export const metadata = {
1415
description:
@@ -51,15 +52,7 @@ export default function Layout({
5152
<div className="bg-neu-0 text-neu-900 antialiased">{children}</div>
5253
</ThemeProvider>
5354
<Footer
54-
logo={
55-
<NextLink href="/conf/2025" className="nextra-logo text-white">
56-
<div className="flex items-center gap-2">
57-
<GraphQLConf className="h-6" />
58-
<span className="select-none text-xl/none">2025</span>
59-
</div>
60-
<HostedByGraphQLFoundation className="mt-2 h-5" />
61-
</NextLink>
62-
}
55+
logo={<GraphQLConfLogoLink year={2025} />}
6356
links={[
6457
[
6558
{ children: "Sponsor", href: "/conf/2025/#sponsors" },

‎src/app/conf/_components/social-icons.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,25 @@ import {
66
YouTubeIcon,
77
FacebookIcon,
88
} from "@/icons"
9+
import clsx from "clsx"
910

1011
const anchorProps = {
1112
target: "_blank",
1213
rel: "noreferrer",
1314
}
1415

15-
export function SocialIcons() {
16+
export function SocialIcons({
17+
className,
18+
...rest
19+
}: React.HTMLAttributes<HTMLDivElement>) {
1620
return (
17-
<div className="flex items-center gap-5 *:outline-none *:transition-colors hover:*:text-primary focus:*:text-primary focus:*:ring focus:*:ring-primary [&_svg]:h-5">
21+
<div
22+
className={clsx(
23+
"flex items-center gap-1 *:p-2 *:outline-none *:transition-colors hover:*:text-primary focus:*:text-primary focus:*:ring focus:*:ring-primary [&_svg]:h-5",
24+
className,
25+
)}
26+
{...rest}
27+
>
1828
<a href="https://github.com/graphql" {...anchorProps}>
1929
<GitHubIcon />
2030
</a>

0 commit comments

Comments
 (0)