diff --git a/app/layout.tsx b/app/layout.tsx index fd075d3..b2aa725 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -22,12 +22,17 @@ const calSans = localFont({ variable: "--font-cal-sans", }); -const baseUrl = async () => { - let h = await headers(); - const host = h.get("host") ?? "localhost:3000" - const proto = host.includes("localhost") ? "http" : "https" - return `${proto}://${host}` -} +const getURL = () => { + let url = + process?.env?.NEXT_PUBLIC_SITE_URL ?? // Custom prod domain + process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Vercel-generated + 'http://localhost:3000/'; + + // Ensure protocol and trailing slash + url = url.startsWith('http') ? url : `https://${url}`; + url = url.endsWith('/') ? url : `${url}/`; + return url; +}; export const metadata: Metadata = { @@ -35,8 +40,8 @@ export const metadata: Metadata = { description: "Simple, extensible multithreaded background task and message processing library for Rust", openGraph: { - images: `${baseUrl()}/images/og.png`, - } + images: `${getURL()}images/og.png`, + }, }; export default function RootLayout({ children }: { children: ReactNode }) { @@ -46,6 +51,7 @@ export default function RootLayout({ children }: { children: ReactNode }) { className={`relative ${inter.variable} ${calSans.variable}`} suppressHydrationWarning > + {children} diff --git a/components/atoms/button.tsx b/components/atoms/button.tsx index 9ef780d..0f09271 100644 --- a/components/atoms/button.tsx +++ b/components/atoms/button.tsx @@ -16,8 +16,8 @@ export const Button: FC<{ href={href} className={`inline-flex relative z-10 h-10 rounded-sm p-px shadow-lg button-hover ${ secondary - ? "bg-gradient-to-br from-zinc-300 to-zinc-500" - : "bg-gradient-to-b from-white to-zinc-300" + ? "bg-gradient-to-br from-zinc-300 to-zinc-500 mx-auto" + : "bg-gradient-to-b from-white to-zinc-300 mx-auto" } ${className}`} {...(external && { rel: "noopener noreferrer", diff --git a/components/layout/mobile-menu.tsx b/components/layout/mobile-menu.tsx new file mode 100644 index 0000000..e0d87f3 --- /dev/null +++ b/components/layout/mobile-menu.tsx @@ -0,0 +1,78 @@ +"use client" + +import { FC, useEffect, useState } from "react" +import { Icon } from "../icons" +import { usePathname } from "next/navigation" +import Link from "next/link" + +export const MobileMenu: FC<{ + menu: { name: string; href: string }[] + socials: { name: string; icon: string; href: string }[] +}> = ({ menu, socials }) => { + const [open, setOpen] = useState(false) + const pathname = usePathname() + + useEffect(() => { + if (open) { + document.body.classList.add("no-scroll") + } else { + document.body.classList.remove("no-scroll") + } + }, [open]) + + const closeMenu = () => setOpen(false) + + useEffect(() => { + closeMenu() + }, [pathname]) + + return ( + <> + + {open && ( +
+ {menu.map(({ name, href }, index) => ( + closeMenu()} + > + {name} + {href.startsWith("http") && ( + + )} + + ))} + {/* +
+ +
+ */} +
+ {socials.map(({ name, icon, href }, index) => ( + + {name} + + + ))} +
+
+ )} + + ) +} diff --git a/components/layout/navigation.tsx b/components/layout/navigation.tsx index 7d97666..181da4a 100644 --- a/components/layout/navigation.tsx +++ b/components/layout/navigation.tsx @@ -6,6 +6,7 @@ import { Icon } from "../icons" import { Search } from "../atoms/search" import { usePathname } from "next/navigation" import React from "react" +import { MobileMenu } from "./mobile-menu" export interface NavigationLink { readonly name: string @@ -49,6 +50,7 @@ export const Navigation: React.FC<{ +
{searchBox && }