minor style tweaks

components/layout/footer.tsx

@@ -0,0 +1,60 @@
+import { env } from "@/lib/env";
+import { HeartIcon } from "lucide-react";
+import Link from "@/components/link";
+import { cn } from "@/lib/utils";
+import siteConfig from "@/lib/config/site";
+import type { ComponentPropsWithoutRef } from "react";
+
+const Footer = ({ className, ...rest }: ComponentPropsWithoutRef<"footer">) => {
+  return (
+    <footer
+      className={cn("text-foreground/85 text-[0.8rem] leading-loose md:flex md:flex-row md:justify-between", className)}
+      {...rest}
+    >
+      <div>
+        Content{" "}
+        <Link href="/license" className="text-foreground/85 hover:no-underline">
+          licensed under {siteConfig.license}
+        </Link>
+        ,{" "}
+        <Link href="/previously" title="Previously on..." className="text-foreground/85 hover:no-underline">
+          {siteConfig.copyrightYearStart}
+        </Link>{" "}
+        – {new Date().getUTCFullYear()}.
+      </div>
+
+      <div>
+        Made with{" "}
+        <HeartIcon className="animate-heartbeat stroke-destructive fill-destructive mx-[1px] inline size-[16px] align-text-top" />{" "}
+        and{" "}
+        <Link
+          href="https://nextjs.org/"
+          title="Powered by Next.js"
+          aria-label="Next.js"
+          className="text-foreground/85 hover:text-muted-foreground/60 hover:no-underline"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="0"
+            viewBox="0 0 24 24"
+            className="mx-[1px] inline size-[16px] align-text-top"
+          >
+            <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
+          </svg>
+        </Link>
+        .{" "}
+        <Link
+          href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
+          title="View Source on GitHub"
+          className="border-muted-foreground text-foreground/85 hover:border-muted-foreground/60 border-b-2 pb-0.5 hover:no-underline"
+        >
+          View source.
+        </Link>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/layout/header.tsx

@@ -0,0 +1,39 @@
+import Image from "next/image";
+import Link from "@/components/link";
+import Menu from "@/components/layout/menu";
+import { cn } from "@/lib/utils";
+import siteConfig from "@/lib/config/site";
+import type { ComponentPropsWithoutRef } from "react";
+
+import avatarImg from "@/app/avatar.jpg";
+
+const Header = ({ className, ...rest }: ComponentPropsWithoutRef<"header">) => {
+  return (
+    <header className={cn("flex items-center justify-between", className)} {...rest}>
+      <Link
+        dynamicOnHover
+        href="/"
+        rel="author"
+        aria-label={siteConfig.name}
+        className="hover:text-primary text-foreground/85 flex flex-shrink-0 items-center hover:no-underline"
+      >
+        <Image
+          src={avatarImg}
+          alt={`Photo of ${siteConfig.name}`}
+          className="border-ring/80 size-[64px] rounded-full border-2 md:size-[48px] md:border-1"
+          width={64}
+          height={64}
+          quality={50}
+          priority
+        />
+        <span className="mx-3 text-xl leading-none font-medium tracking-[0.01rem] max-md:sr-only">
+          {siteConfig.name}
+        </span>
+      </Link>
+
+      <Menu className="ml-6 w-full max-w-64 sm:ml-4 sm:max-w-96 md:ml-0 md:max-w-none" />
+    </header>
+  );
+};
+
+export default Header;

components/layout/menu-item.tsx

@@ -0,0 +1,51 @@
+import Link from "@/components/link";
+import { cn } from "@/lib/utils";
+import type { ComponentPropsWithoutRef } from "react";
+import type { LucideIcon } from "lucide-react";
+
+const MenuItem = ({
+  text,
+  href,
+  icon,
+  current,
+  className,
+  ...rest
+}: Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
+  text?: string;
+  href?: string;
+  icon?: LucideIcon;
+  current?: boolean;
+}) => {
+  const Icon = icon;
+
+  const item = (
+    <>
+      {Icon && <Icon className="stroke-foreground/85 block size-[28px] md:size-[20px]" />}
+      {text && <span className="ml-3 text-sm leading-none font-medium tracking-wide max-md:sr-only">{text}</span>}
+    </>
+  );
+
+  // allow both navigational links and/or other interactive react components (e.g. the theme toggle)
+  if (href) {
+    return (
+      <Link
+        dynamicOnHover
+        href={href}
+        aria-label={text}
+        data-current={current || undefined}
+        className={cn(
+          "text-foreground/85 hover:border-ring -mb-[3px] inline-flex items-center p-2.5 hover:border-b-[3px] hover:no-underline",
+          current && "border-primary/40 hover:border-primary/40 border-b-[3px]",
+          className
+        )}
+        {...rest}
+      >
+        {item}
+      </Link>
+    );
+  }
+
+  return item;
+};
+
+export default MenuItem;

components/layout/menu.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useSelectedLayoutSegment } from "next/navigation";
+import MenuItem from "@/components/layout/menu-item";
+import ThemeToggle from "@/components/layout/theme-toggle";
+import { cn } from "@/lib/utils";
+import { menuItems } from "@/lib/config/menu";
+import type { ComponentPropsWithoutRef } from "react";
+
+const Menu = ({ className, ...rest }: ComponentPropsWithoutRef<"ul">) => {
+  const segment = useSelectedLayoutSegment() || "";
+
+  return (
+    <ul className={cn("flex max-w-2/3 flex-row justify-between md:max-w-none md:justify-end", className)} {...rest}>
+      {menuItems.map((item) => {
+        const isCurrent = item.href === `/${segment}`;
+
+        return (
+          <li className="max-sm:first-of-type:hidden md:ml-4" key={item.href}>
+            <MenuItem {...item} current={isCurrent} />
+          </li>
+        );
+      })}
+
+      <li className="-mr-2.5 md:ml-4">
+        <MenuItem
+          // @ts-ignore
+          icon={ThemeToggle}
+        />
+      </li>
+    </ul>
+  );
+};
+
+export default Menu;

components/layout/skip-nav.tsx

@@ -0,0 +1,19 @@
+const SKIP_NAV_ID = "skip-nav";
+
+export const SkipNavLink = () => {
+  return (
+    <a
+      href={`#${SKIP_NAV_ID}`}
+      tabIndex={0}
+      className="text-primary bg-muted focus:border-ring sr-only z-[1000] underline focus:not-sr-only focus:fixed focus:top-2.5 focus:left-2.5 focus:border-2 focus:border-solid focus:p-4"
+    >
+      Skip to content
+    </a>
+  );
+};
+
+export const SkipNavTarget = () => {
+  return <div id={SKIP_NAV_ID} />;
+};
+
+export default SkipNavLink;

components/layout/theme-context.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { createContext, useEffect, useState } from "react";
+import { useLocalStorage, useMedia } from "react-use";
+import type { PropsWithChildren } from "react";
+
+export const ThemeContext = createContext<{
+  /**
+   * If the user's theme preference is unset, this returns whether the system preference resolved to "light" or "dark".
+   * If the user's theme preference is set, the preference is returned instead, regardless of their system's theme.
+   */
+  theme: string;
+  /** Update the theme manually and save to local storage. */
+  setTheme: (theme: string) => void;
+}>({
+  theme: "",
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setTheme: (_) => {},
+});
+
+// provider used once in _app.tsx to wrap entire app
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  // keep track of if/when the user has set their theme *on this site*
+  const [preferredTheme, setPreferredTheme] = useLocalStorage<string>("theme", undefined, { raw: true });
+  // keep track of changes to the user's OS/browser dark mode setting
+  const [systemTheme, setSystemTheme] = useState("");
+  // hook into system `prefers-dark-mode` setting
+  // https://web.dev/prefers-color-scheme/#the-prefers-color-scheme-media-query
+  const isSystemDark = useMedia("(prefers-color-scheme: dark)", false);
+
+  // listen for changes in OS preference, but don't save it as a website preference to local storage
+  useEffect(() => {
+    setSystemTheme(isSystemDark ? "dark" : "light");
+  }, [isSystemDark]);
+
+  // actual DOM updates must be done in useEffect
+  useEffect(() => {
+    // only "light" and "dark" are valid themes
+    const resolvedTheme = preferredTheme && ["light", "dark"].includes(preferredTheme) ? preferredTheme : systemTheme;
+
+    // this is what actually changes the CSS variables
+    document.documentElement.dataset.theme = resolvedTheme;
+
+    // less important, but tells the browser how to render built-in elements like forms, scrollbars, etc.
+    document.documentElement.style?.setProperty("color-scheme", resolvedTheme);
+  }, [preferredTheme, systemTheme]);
+
+  const providerValues = {
+    theme: preferredTheme ?? systemTheme,
+    setTheme: setPreferredTheme,
+  };
+
+  return <ThemeContext.Provider value={providerValues}>{children}</ThemeContext.Provider>;
+};
+
+// loaded in <head> by layout.tsx to avoid blinding flash of unstyled content (FOUC). irrelevant after the first render
+// since the theme provider above takes over.
+// unminified JS: https://gist.github.com/jakejarvis/79b0ec8506bc843023546d0d29861bf0
+export const ThemeScript = () => (
+  <script
+    id="restore-theme"
+    dangerouslySetInnerHTML={{
+      __html:
+        "(()=>{try{const e=document.documentElement,t='undefined'!=typeof Storage?window.localStorage.getItem('theme'):null,a=(t&&'dark'===t)??window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';e.dataset.theme=a,e.style.colorScheme=a}catch(e){}})()",
+    }}
+  />
+);

components/layout/theme-toggle.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useContext } from "react";
+import { MoonIcon, SunIcon } from "lucide-react";
+import { ThemeContext } from "@/components/layout/theme-context";
+import type { ComponentPropsWithoutRef } from "react";
+import type { LucideIcon } from "lucide-react";
+
+const ThemeToggle = ({ ...rest }: ComponentPropsWithoutRef<LucideIcon>) => {
+  const { theme, setTheme } = useContext(ThemeContext);
+
+  return (
+    <button
+      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
+      aria-label="Toggle Theme"
+      className="hover:[&_svg]:stroke-warning block bg-transparent p-2.5 hover:cursor-pointer not-dark:[&_.lucide-moon]:hidden dark:[&_.lucide-sun]:hidden"
+    >
+      <SunIcon {...rest} />
+      <MoonIcon {...rest} />
+    </button>
+  );
+};
+
+export default ThemeToggle;