consistent use of arrow functions/default exports

components/Container.tsx

@@ -10,7 +10,7 @@ type Props = {
   children: unknown;
 };
 
-export default function Container({ title, description, children }: Props) {
+const Container = ({ title, description, children }: Props) => {
   const router = useRouter();
 
   return (
@@ -27,4 +27,6 @@ export default function Container({ title, description, children }: Props) {
       <div className={styles.container}>{children}</div>
     </>
   );
-}
+};
+
+export default Container;

components/Content.tsx

@@ -4,6 +4,6 @@ type Props = {
   children: unknown;
 };
 
-export default function Content({ children }: Props) {
-  return <div className={styles.content}>{children}</div>;
-}
+const Content = ({ children }: Props) => <div className={styles.content}>{children}</div>;
+
+export default Content;

components/Layout.tsx

@@ -3,12 +3,12 @@ import Footer from "./page-footer/Footer";
 
 import styles from "./Layout.module.scss";
 
-export default function Layout({ children }) {
-  return (
-    <>
-      <Header />
-      <main className={styles.main}>{children}</main>
-      <Footer />
-    </>
-  );
-}
+const Layout = ({ children }) => (
+  <>
+    <Header />
+    <main className={styles.main}>{children}</main>
+    <Footer />
+  </>
+);
+
+export default Layout;

components/clipboard/CopyButton.tsx

@@ -10,7 +10,7 @@ type Props = {
   timeout?: number;
 };
 
-export default function CopyButton({ content, timeout = 2000 }: Props) {
+const CopyButton = ({ content, timeout = 2000 }: Props) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (e) => {
@@ -54,4 +54,6 @@ export default function CopyButton({ content, timeout = 2000 }: Props) {
       )}
     </button>
   );
-}
+};
+
+export default CopyButton;

components/contact/ContactForm.tsx

@@ -5,7 +5,7 @@ import { SendIcon } from "../icons";
 
 import styles from "./ContactForm.module.scss";
 
-export default function ContactForm() {
+const ContactForm = () => {
   // status/feedback:
   const [status, setStatus] = useState({ success: false, message: "" });
   // keep track of fetch:
@@ -136,4 +136,6 @@ export default function ContactForm() {
       </div>
     </form>
   );
-}
+};
+
+export default ContactForm;

components/hits/Hits.tsx

@@ -2,7 +2,7 @@ import useSWR from "swr";
 import { fetcher } from "../../lib/fetcher";
 import Loading from "../loading/Loading";
 
-export default function Hits({ slug }) {
+const Hits = ({ slug }) => {
   // start fetching repos from API immediately
   const { data, error } = useSWR(`/api/hits/?slug=${encodeURIComponent(slug)}`, fetcher, {
     // avoid double (or more) counting views
@@ -25,4 +25,6 @@ export default function Hits({ slug }) {
       {data.hits.toLocaleString("en-US")}
     </span>
   );
-}
+};
+
+export default Hits;

components/loading/Loading.tsx

@@ -4,7 +4,7 @@ type Props = {
   width: number;
 };
 
-export default function Loading({ boxes = 3, timing = 0.1, width }: Props) {
+const Loading = ({ boxes = 3, timing = 0.1, width }: Props) => {
   // each box is just an empty div
   const divs = [];
 
@@ -53,4 +53,6 @@ export default function Loading({ boxes = 3, timing = 0.1, width }: Props) {
       `}</style>
     </div>
   );
-}
+};
+
+export default Loading;

components/notes/List.tsx

@@ -9,7 +9,7 @@ type NoteProps = {
   slug: string;
 };
 
-export default function List({ notesByYear }) {
+const List = ({ notesByYear }) => {
   const sections = [];
 
   Object.entries(notesByYear).forEach(([year, notes]: [string, NoteProps[]]) => {
@@ -36,4 +36,6 @@ export default function List({ notesByYear }) {
   const reversed = sections.reverse();
 
   return <>{reversed}</>;
-}
+};
+
+export default List;

components/notes/Meta.tsx

@@ -13,58 +13,58 @@ export type Props = {
   tags?: string[];
 };
 
-export default function Meta({ title, date, slug, tags = [] }: Props) {
-  return (
-    <>
-      <div className={styles.meta}>
-        <div className={styles.date}>
-          <span>
-            <DateIcon className={`icon ${styles.icon}`} />
-          </span>
-          <span title={format(parseISO(date), "PPppp")}>
-            <Link href={`/notes/${slug}/`}>{format(parseISO(date), "MMMM d, yyyy")}</Link>
-          </span>
-        </div>
-        {tags.length > 0 && (
-          <div className={styles.tags}>
-            <span>
-              <TagIcon className={`icon ${styles.icon}`} />
-            </span>
-            {tags.map((tag) => (
-              <span key={tag} className={styles.tag}>
-                {tag}
-              </span>
-            ))}
-          </div>
-        )}
-        <div>
-          <span>
-            <EditIcon className={`icon ${styles.icon}`} />
-          </span>
-          <span>
-            <a
-              href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={`Edit "${title}" on GitHub`}
-            >
-              Improve This Post
-            </a>
-          </span>
-        </div>
-        <div>
-          <span>
-            <ViewsIcon className={`icon ${styles.icon}`} />
-          </span>
-          <Hits slug={`notes/${slug}`} />
-        </div>
+const Meta = ({ title, date, slug, tags = [] }: Props) => (
+  <>
+    <div className={styles.meta}>
+      <div className={styles.date}>
+        <span>
+          <DateIcon className={`icon ${styles.icon}`} />
+        </span>
+        <span title={format(parseISO(date), "PPppp")}>
+          <Link href={`/notes/${slug}/`}>{format(parseISO(date), "MMMM d, yyyy")}</Link>
+        </span>
       </div>
+      {tags.length > 0 && (
+        <div className={styles.tags}>
+          <span>
+            <TagIcon className={`icon ${styles.icon}`} />
+          </span>
+          {tags.map((tag) => (
+            <span key={tag} className={styles.tag}>
+              {tag}
+            </span>
+          ))}
+        </div>
+      )}
+      <div>
+        <span>
+          <EditIcon className={`icon ${styles.icon}`} />
+        </span>
+        <span>
+          <a
+            href={`https://github.com/${config.githubRepo}/blob/main/notes/${slug}.mdx`}
+            target="_blank"
+            rel="noopener noreferrer"
+            title={`Edit "${title}" on GitHub`}
+          >
+            Improve This Post
+          </a>
+        </span>
+      </div>
+      <div>
+        <span>
+          <ViewsIcon className={`icon ${styles.icon}`} />
+        </span>
+        <Hits slug={`notes/${slug}`} />
+      </div>
+    </div>
 
-      <h1 className={styles.title}>
-        <Link href={`/notes/${slug}/`}>
-          <a>{title}</a>
-        </Link>
-      </h1>
-    </>
-  );
-}
+    <h1 className={styles.title}>
+      <Link href={`/notes/${slug}/`}>
+        <a>{title}</a>
+      </Link>
+    </h1>
+  </>
+);
+
+export default Meta;

components/page-footer/Footer.tsx

@@ -4,42 +4,42 @@ import * as config from "../../lib/config";
 
 import styles from "./Footer.module.scss";
 
-export default function Footer() {
-  return (
-    <footer className={styles.footer}>
-      <div className={styles.row}>
-        <div className={styles.copyright}>
-          Content{" "}
-          <Link href="/license/" prefetch={false}>
-            <a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
-          </Link>
-          ,{" "}
-          <Link href="/previously/" prefetch={false}>
-            <a title="Previously on...">2001 –</a>
-          </Link>{" "}
-          {new Date().getFullYear()}.
-        </div>
-        <div className={styles.powered_by}>
-          Made with{" "}
-          <span className={styles.beat}>
-            <HeartIcon alt="Love" />
-          </span>{" "}
-          and{" "}
-          <a href="https://nextjs.org/" title="Powered by Next.js" target="_blank" rel="noopener noreferrer">
-            <NextjsIcon alt="Next.js" fill="currentColor" />
-          </a>
-          .{" "}
-          <a
-            href={`https://github.com/${config.githubRepo}`}
-            title="View Source on GitHub"
-            className={styles.view_source}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            View source.
-          </a>
-        </div>
+const Footer = () => (
+  <footer className={styles.footer}>
+    <div className={styles.row}>
+      <div className={styles.copyright}>
+        Content{" "}
+        <Link href="/license/" prefetch={false}>
+          <a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
+        </Link>
+        ,{" "}
+        <Link href="/previously/" prefetch={false}>
+          <a title="Previously on...">2001 –</a>
+        </Link>{" "}
+        {new Date().getFullYear()}.
       </div>
-    </footer>
-  );
-}
+      <div className={styles.powered_by}>
+        Made with{" "}
+        <span className={styles.beat}>
+          <HeartIcon alt="Love" />
+        </span>{" "}
+        and{" "}
+        <a href="https://nextjs.org/" title="Powered by Next.js" target="_blank" rel="noopener noreferrer">
+          <NextjsIcon alt="Next.js" fill="currentColor" />
+        </a>
+        .{" "}
+        <a
+          href={`https://github.com/${config.githubRepo}`}
+          title="View Source on GitHub"
+          className={styles.view_source}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          View source.
+        </a>
+      </div>
+    </div>
+  </footer>
+);
+
+export default Footer;

components/page-header/Header.tsx

@@ -3,13 +3,13 @@ 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>
-  );
-}
+const Header = () => (
+  <header className={styles.header}>
+    <nav className={styles.nav}>
+      <Name />
+      <Menu />
+    </nav>
+  </header>
+);
+
+export default Header;

components/page-header/Menu.tsx

@@ -4,7 +4,7 @@ import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../icons";
 
 import styles from "./Menu.module.scss";
 
-const menuItems = [
+const links = [
   {
     icon: <HomeIcon className={`icon ${styles.icon}`} />,
     text: "Home",
@@ -30,21 +30,21 @@ const menuItems = [
 // 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}>
-          <Link href={item.href} prefetch={false}>
-            <a className={styles.link}>
-              {item.icon} <span className={styles.text}>{item.text}</span>
-            </a>
-          </Link>
-        </li>
-      ))}
-      <li className={`${styles.item} ${styles.theme_toggle}`}>
-        <ThemeToggle className={styles.icon} />
+const Menu = () => (
+  <ul className={styles.menu}>
+    {links.map((link, index) => (
+      <li key={index} className={styles.item}>
+        <Link href={link.href} prefetch={false}>
+          <a className={styles.link}>
+            {link.icon} <span className={styles.text}>{link.text}</span>
+          </a>
+        </Link>
       </li>
-    </ul>
-  );
-}
+    ))}
+    <li className={`${styles.item} ${styles.theme_toggle}`}>
+      <ThemeToggle className={styles.icon} />
+    </li>
+  </ul>
+);
+
+export default Menu;

components/page-header/Name.tsx

@@ -5,23 +5,23 @@ 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>
-  );
-}
+const Name = () => (
+  <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>
+);
+
+export default Name;

components/page-header/ThemeToggle.tsx

@@ -6,15 +6,15 @@ 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);
+const getDarkPref = () => localStorage.getItem(storageKey);
+const setDarkPref = (pref: boolean) => localStorage.setItem(storageKey, pref as unknown as string);
 
 // use the `<html data-theme="...">` as a hint to what the theme was set to outside of the button component
 // TODO: there's probably (definitely) a cleaner way to do this, maybe with react hooks..?
-export const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
+const isDark = () => document.documentElement.getAttribute("data-theme") === "dark";
 
 // sets appropriate `<html data-theme="...">`, `<meta name="color-scheme" ...>`, and color-scheme CSS property
-export const updateDOM = (dark: boolean) => {
+const updateDOM = (dark: boolean) => {
   document.documentElement.setAttribute("data-theme", dark ? "dark" : "light");
   document.documentElement.style.colorScheme = dark ? "dark" : "light";
   document.head
@@ -22,7 +22,7 @@ export const updateDOM = (dark: boolean) => {
     ?.setAttribute("content", dark ? config.themeColorDark : config.themeColorLight);
 };
 
-export default function ThemeToggle({ className = "" }) {
+const ThemeToggle = ({ className = "" }) => {
   // sync button up with theme and preference states after initialization
   const [dark, setDark] = useState(isDark());
   const [saved, setSaved] = useState(!!getDarkPref());
@@ -66,4 +66,6 @@ export default function ThemeToggle({ className = "" }) {
       {dark ? <BulbOffIcon className={`icon ${className}`} /> : <BulbOnIcon className={`icon ${className}`} />}
     </button>
   );
-}
+};
+
+export default ThemeToggle;

components/page/PageTitle.tsx

@@ -6,7 +6,7 @@ type Props = {
   title: unknown;
 };
 
-export default function PageTitle({ title }: Props) {
+const PageTitle = ({ title }: Props) => {
   const router = useRouter();
 
   return (
@@ -14,4 +14,6 @@ export default function PageTitle({ title }: Props) {
       <a href={router.asPath}>{title}</a>
     </h1>
   );
-}
+};
+
+export default PageTitle;

components/projects/RepoCard.tsx

@@ -16,77 +16,77 @@ type Props = {
   updatedAt: string;
 };
 
-export default function RepoCard({ name, url, description, language, stars, forks, updatedAt }: Props) {
-  return (
-    <div className={styles.card}>
-      <a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">
-        {name}
-      </a>
+const RepoCard = ({ name, url, description, language, stars, forks, updatedAt }: Props) => (
+  <div className={styles.card}>
+    <a className={styles.name} href={url} target="_blank" rel="noopener noreferrer">
+      {name}
+    </a>
 
-      {description && <p className={styles.description}>{description}</p>}
+    {description && <p className={styles.description}>{description}</p>}
 
-      <div className={styles.meta}>
-        {language && (
-          <div className={styles.meta_item}>
-            <span className={styles.language_color}>
-              <style jsx>{`
-                span {
-                  background-color: ${language.color};
-                }
-              `}</style>
-            </span>
-            <span>{language.name}</span>
-          </div>
-        )}
-
-        {stars > 0 && (
-          <div className={styles.meta_item}>
-            <a
-              href={`${url}/stargazers`}
-              title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <StarOcticon fill="currentColor" className={styles.octicon} />
-              <span>{stars.toLocaleString("en-US")}</span>
-            </a>
-          </div>
-        )}
-
-        {forks > 0 && (
-          <div className={styles.meta_item}>
-            <a
-              href={`${url}/network/members`}
-              title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <ForkOcticon fill="currentColor" className={styles.octicon} />
-              <span>{forks.toLocaleString("en-US")}</span>
-            </a>
-          </div>
-        )}
-
-        <div
-          className={styles.meta_item}
-          title={intlFormat(
-            parseISO(updatedAt),
-            {
-              year: "numeric",
-              month: "short",
-              day: "numeric",
-              hour: "numeric",
-              minute: "numeric",
-              timeZoneName: "short",
-            },
-            {
-              locale: "en-US",
-            }
-          )}
-        >
-          <span>Updated {formatDistanceToNowStrict(parseISO(updatedAt), { addSuffix: true })}</span>
+    <div className={styles.meta}>
+      {language && (
+        <div className={styles.meta_item}>
+          <span className={styles.language_color}>
+            <style jsx>{`
+              span {
+                background-color: ${language.color};
+              }
+            `}</style>
+          </span>
+          <span>{language.name}</span>
         </div>
+      )}
+
+      {stars > 0 && (
+        <div className={styles.meta_item}>
+          <a
+            href={`${url}/stargazers`}
+            title={`${stars.toLocaleString("en-US")} ${stars === 1 ? "star" : "stars"}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <StarOcticon fill="currentColor" className={styles.octicon} />
+            <span>{stars.toLocaleString("en-US")}</span>
+          </a>
+        </div>
+      )}
+
+      {forks > 0 && (
+        <div className={styles.meta_item}>
+          <a
+            href={`${url}/network/members`}
+            title={`${forks.toLocaleString("en-US")} ${forks === 1 ? "fork" : "forks"}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <ForkOcticon fill="currentColor" className={styles.octicon} />
+            <span>{forks.toLocaleString("en-US")}</span>
+          </a>
+        </div>
+      )}
+
+      <div
+        className={styles.meta_item}
+        title={intlFormat(
+          parseISO(updatedAt),
+          {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+            hour: "numeric",
+            minute: "numeric",
+            timeZoneName: "short",
+          },
+          {
+            locale: "en-US",
+          }
+        )}
+      >
+        <span>Updated {formatDistanceToNowStrict(parseISO(updatedAt), { addSuffix: true })}</span>
       </div>
     </div>
-  );
-}
+  </div>
+);
+
+export default RepoCard;

components/video/FullPageVideo.tsx

@@ -3,10 +3,10 @@ import type { ReactPlayerProps } from "react-player";
 
 import styles from "./FullPageVideo.module.scss";
 
-export default function FullPageVideo(props: ReactPlayerProps) {
-  return (
-    <div className={styles.wrapper}>
-      <ReactPlayer className={styles.react_player} width="100%" height="100%" {...props} />
-    </div>
-  );
-}
+const FullPageVideo = (props: ReactPlayerProps) => (
+  <div className={styles.wrapper}>
+    <ReactPlayer className={styles.react_player} width="100%" height="100%" {...props} />
+  </div>
+);
+
+export default FullPageVideo;