v5: Revenge of the JavaScript 🦸 (#711)

Hugo ➡️ Next.js

components/page-header/Header.module.scss

@@ -0,0 +1,25 @@
+.header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  padding: 0.7em 1.5em;
+  border-bottom: 1px solid var(--kinda-light);
+  background-color: var(--background-header);
+  backdrop-filter: saturate(180%) blur(5px);
+  z-index: 1000;
+}
+
+.nav {
+  width: 100%;
+  max-width: 865px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@media screen and (max-width: 800px) {
+  .header {
+    padding: 0.5em 1.25em;
+  }
+}

components/page-header/Header.tsx

@@ -0,0 +1,15 @@
+import Name from "./Name";
+import Menu from "./Menu";
+
+import styles from "./Header.module.scss";
+
+export default function Header() {
+  return (
+    <header className={styles.header}>
+      <nav className={styles.nav}>
+        <Name />
+        <Menu />
+      </nav>
+    </header>
+  );
+}

components/page-header/Menu.module.scss

@@ -0,0 +1,38 @@
+.menu {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+.item {
+  margin-left: 1.8em;
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+
+  svg {
+    width: 1.6em;
+    height: 1.6em;
+  }
+}
+
+.theme_toggle {
+  margin-left: 1.25em;
+}
+
+@media screen and (max-width: 800px) {
+  .item {
+    margin-left: 2em;
+
+    svg {
+      width: 1.75em;
+      height: 1.75em;
+    }
+  }
+
+  .theme_toggle {
+    margin-left: 1.6em;
+  }
+}

components/page-header/Menu.tsx

@@ -0,0 +1,46 @@
+import dynamic from "next/dynamic";
+import MenuItem from "./MenuItem";
+import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
+
+import styles from "./Menu.module.scss";
+
+const menuItems = [
+  {
+    icon: <HomeIcon />,
+    text: "Home",
+    href: "/",
+  },
+  {
+    icon: <NotesIcon />,
+    text: "Notes",
+    href: "/notes/",
+  },
+  {
+    icon: <ProjectsIcon />,
+    text: "Projects",
+    href: "/projects/",
+  },
+  {
+    icon: <ContactIcon />,
+    text: "Contact",
+    href: "/contact/",
+  },
+];
+
+// ensure the theme toggle isn't evaluated server-side
+const ThemeToggle = dynamic(() => import("./ThemeToggle"), { ssr: false });
+
+export default function Menu() {
+  return (
+    <ul className={styles.menu}>
+      {menuItems.map((item, index) => (
+        <li key={index} className={styles.item}>
+          <MenuItem {...item} />
+        </li>
+      ))}
+      <li className={`${styles.item} ${styles.theme_toggle}`}>
+        <ThemeToggle />
+      </li>
+    </ul>
+  );
+}

components/page-header/MenuItem.module.scss

@@ -0,0 +1,30 @@
+.item_link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+
+  &:hover {
+    color: var(--link);
+  }
+}
+
+.item_icon {
+  user-select: none;
+}
+
+.item_text {
+  font-size: 0.95em;
+  font-weight: 500;
+  margin-top: 0.05em;
+  margin-left: 0.75em;
+  line-height: 1;
+}
+
+@media screen and (max-width: 800px) {
+  // hide text next to emojis on mobile
+  .item_text {
+    display: none;
+  }
+}

components/page-header/MenuItem.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+import styles from "./MenuItem.module.scss";
+
+type Props = {
+  href: URL | string;
+  icon: any;
+  text: string;
+};
+
+export default function MenuItem({ href, icon, text }: Props) {
+  return (
+    <Link href={href} prefetch={false}>
+      <a className={styles.item_link}>
+        <span className={styles.item_icon}>{icon}</span>
+        <span className={styles.item_text}>{text}</span>
+      </a>
+    </Link>
+  );
+}

components/page-header/Name.module.scss

@@ -0,0 +1,43 @@
+.title {
+  display: flex;
+  align-items: center;
+  color: var(--medium-dark);
+  background: none;
+  padding-bottom: 0;
+
+  &:hover {
+    color: var(--link);
+
+    .selfie {
+      opacity: 0.9;
+    }
+  }
+}
+
+.selfie {
+  width: 50px;
+  height: 50px;
+
+  img {
+    border: 1px solid var(--light) !important;
+    border-radius: 50%;
+  }
+}
+
+.name {
+  margin: 0 0.6em;
+  font-size: 1.25em;
+  font-weight: 500;
+  letter-spacing: -0.01em;
+}
+
+@media screen and (max-width: 800px) {
+  .selfie {
+    width: 70px;
+    height: 70px;
+  }
+
+  .name {
+    display: none;
+  }
+}

components/page-header/Name.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+import Image from "next/image";
+
+import selfiePic from "../../public/static/images/me.jpg";
+
+import styles from "./Name.module.scss";
+
+export default function Name() {
+  return (
+    <Link href="/">
+      <a className={styles.title}>
+        <span className={styles.selfie}>
+          <Image
+            src={selfiePic}
+            alt="Photo of Jake Jarvis"
+            width={75}
+            height={75}
+            quality={60}
+            layout="intrinsic"
+            priority
+          />
+        </span>
+        <span className={styles.name}>Jake Jarvis</span>
+      </a>
+    </Link>
+  );
+}

components/page-header/ThemeToggle.module.scss

@@ -0,0 +1,7 @@
+.toggle {
+  border: 0;
+  padding: 0;
+  background: none;
+  line-height: 1;
+  cursor: pointer;
+}

components/page-header/ThemeToggle.tsx

@@ -0,0 +1,67 @@
+import { useState, useEffect, useCallback } from "react";
+import { BulbOffIcon, BulbOnIcon } from "../icons";
+
+import styles from "./ThemeToggle.module.scss";
+
+// store preference in local storage
+const storageKey = "dark_mode";
+export const getDarkPref = () => localStorage.getItem(storageKey);
+export const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
+
+// use the `<html class="...">` as a hint to what the theme was set to outside of the button component
+// there's probably (definitely) a cleaner way to do this..?
+export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
+
+// sets appropriate `<html data-theme="...">` CSS property
+export const updateDOM = (dark: boolean) => {
+  const root = document.documentElement;
+
+  // set `<html data-theme="...">`
+  root.setAttribute("data-theme", dark ? "dark" : "light");
+};
+
+export default function ThemeToggle() {
+  // sync button up with theme and preference states after initialization
+  const [dark, setDark] = useState(isDark());
+  const [saved, setSaved] = useState(!!getDarkPref());
+
+  // real-time switching between modes based on user's system if preference isn't set (and it's supported by OS/browser)
+  const matchCallback = useCallback((e) => setDark(e.matches), []);
+  useEffect(() => {
+    try {
+      // https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
+      const matcher = window.matchMedia("(prefers-color-scheme: dark)");
+
+      // only listen to OS if the user hasn't specified a preference
+      if (!saved) {
+        matcher.addEventListener("change", matchCallback, true);
+      }
+
+      // cleanup and stop listening if/when preference is explicitly set
+      return () => matcher.removeEventListener("change", matchCallback, true);
+    } catch (e) {} // eslint-disable-line no-empty
+  }, [saved, matchCallback]);
+
+  // sets appropriate HTML when mode changes
+  useEffect(() => updateDOM(dark), [dark]);
+
+  const handleToggle = () => {
+    // only update the local storage preference if the user explicitly presses the lightbulb
+    setDarkPref(!dark);
+    setSaved(true);
+
+    // set theme to the opposite of current theme
+    setDark(!dark);
+  };
+
+  return (
+    <button
+      className={styles.toggle}
+      onClick={handleToggle}
+      title={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
+      aria-label={dark ? "Toggle Light Mode" : "Toggle Dark Mode"}
+    >
+      {dark ? <BulbOffIcon /> : <BulbOnIcon />}
+    </button>
+  );
+}