bump next to 13.5

components/ContactForm/ContactForm.tsx

@@ -3,7 +3,8 @@ import { Formik, Form, Field } from "formik";
 import TextareaAutosize from "react-textarea-autosize";
 import Link from "../Link";
 import Captcha from "../Captcha";
-import { CheckOcticon, XOcticon, MarkdownIcon } from "../Icons";
+import { GoCheck, GoX } from "react-icons/go";
+import { SiMarkdown } from "react-icons/si";
 import { styled, theme, css } from "../../lib/styles/stitches.config";
 import type { FormikHelpers, FormikProps, FieldInputProps, FieldMetaProps } from "formik";
 
@@ -47,8 +48,7 @@ const MarkdownTip = styled("div", {
   lineHeight: 1.75,
 });
 
-const MarkdownTipIcon = styled(MarkdownIcon, {
-  fill: "currentColor",
+const MarkdownTipIcon = styled(SiMarkdown, {
   width: "1.25em",
   height: "1.25em",
   verticalAlign: "-0.25em",
@@ -288,7 +288,7 @@ const ContactForm = ({ className }: ContactFormProps) => {
             </SubmitButton>
 
             <Result status={success ? "success" : "error"} hidden={!submitted || !feedback || isSubmitting}>
-              <ResultIcon as={success ? CheckOcticon : XOcticon} /> {feedback}
+              <ResultIcon as={success ? GoCheck : GoX} /> {feedback}
             </Result>
           </ActionRow>
         </Form>

components/CopyButton/CopyButton.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useState, useEffect } from "react";
 import innerText from "react-innertext";
 import copy from "copy-to-clipboard";
-import { ClipboardOcticon, CheckOcticon } from "../Icons";
+import { FiClipboard, FiCheck } from "react-icons/fi";
 import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ReactNode, Ref, ComponentPropsWithoutRef, ElementRef, MouseEventHandler } from "react";
 
@@ -29,7 +29,6 @@ const Icon = styled("svg", {
   width: "1.25em",
   height: "1.25em",
   verticalAlign: "-0.3em",
-  fill: "currentColor",
 });
 
 export type CopyButtonProps = ComponentPropsWithoutRef<typeof Button> & {
@@ -77,7 +76,7 @@ const CopyButton = ({ source, timeout = 2000, ...rest }: CopyButtonProps, ref: R
       copied={copied}
       {...rest}
     >
-      <Icon as={copied ? CheckOcticon : ClipboardOcticon} />
+      <Icon as={copied ? FiCheck : FiClipboard} />
     </Button>
   );
 };

components/Figure/Figure.tsx

@@ -1,7 +1,7 @@
 import innerText from "react-innertext";
-import Image, { ImageProps } from "../Image";
+import Image from "../Image";
 import { styled, theme } from "../../lib/styles/stitches.config";
-import type { PropsWithChildren } from "react";
+import type { PropsWithChildren, ComponentPropsWithoutRef } from "react";
 
 const Wrapper = styled("figure", {
   margin: "1em auto",
@@ -15,7 +15,7 @@ const Caption = styled("figcaption", {
   marginTop: "-0.4em",
 });
 
-export type FigureProps = Omit<ImageProps, "alt"> &
+export type FigureProps = Omit<ComponentPropsWithoutRef<typeof Image>, "alt"> &
   PropsWithChildren<{
     alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
   }>;

components/Footer/Footer.tsx

@@ -1,5 +1,6 @@
 import Link from "../Link";
-import { HeartIcon, NextjsLogo } from "../Icons";
+import { GoHeartFill } from "react-icons/go";
+import { SiNextdotjs } from "react-icons/si";
 import { styled, theme, keyframes } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
 import type { ComponentPropsWithoutRef } from "react";
@@ -37,27 +38,11 @@ const PlainLink = styled(Link, {
   color: theme.colors.mediumDark,
 });
 
-const NextjsLink = styled(PlainLink, {
-  "&:hover, &:focus-visible": {
-    color: theme.colors.medium,
-  },
-});
-
-const ViewSourceLink = styled(PlainLink, {
-  paddingBottom: "2px",
-  borderBottom: `1px solid ${theme.colors.light}`,
-
-  "&:hover, &:focus-visible": {
-    borderColor: theme.colors.kindaLight,
-  },
-});
-
 const Icon = styled("svg", {
   width: "1.25em",
   height: "1.25em",
   verticalAlign: "-0.25em",
   margin: "0 0.075em",
-  fill: "currentColor",
 });
 
 const Heart = styled("span", {
@@ -99,20 +84,38 @@ const Footer = ({ ...rest }: FooterProps) => {
         <div>
           Made with{" "}
           <Heart title="Love">
-            <Icon as={HeartIcon} />
+            <Icon as={GoHeartFill} css={{ strokeWidth: 2 }} />
           </Heart>{" "}
           and{" "}
-          <NextjsLink href="https://nextjs.org/" title="Powered by Next.js" aria-label="Next.js" underline={false}>
-            <Icon as={NextjsLogo} />
-          </NextjsLink>
+          <PlainLink
+            href="https://nextjs.org/"
+            title="Powered by Next.js"
+            aria-label="Next.js"
+            underline={false}
+            css={{
+              "&:hover, &:focus-visible": {
+                color: theme.colors.medium,
+              },
+            }}
+          >
+            <Icon as={SiNextdotjs} />
+          </PlainLink>
           .{" "}
-          <ViewSourceLink
+          <PlainLink
             href={`https://github.com/${config.githubRepo}`}
             title="View Source on GitHub"
             underline={false}
+            css={{
+              paddingBottom: "2px",
+              borderBottom: `1px solid ${theme.colors.light}`,
+
+              "&:hover, &:focus-visible": {
+                borderColor: theme.colors.kindaLight,
+              },
+            }}
           >
             View source.
-          </ViewSourceLink>
+          </PlainLink>
         </div>
       </Row>
     </Wrapper>

components/HeadingAnchor/HeadingAnchor.tsx

@@ -1,27 +1,17 @@
 import Link from "../Link";
-import { LinkIcon } from "../Icons";
-import { styled } from "../../lib/styles/stitches.config";
+import { FiLink } from "react-icons/fi";
 import type { ComponentPropsWithoutRef } from "react";
 
-const AnchorLink = styled(Link, {
-  lineHeight: 1,
-});
-
-const Icon = styled(LinkIcon, {
-  width: "0.8em",
-  height: "0.8em",
-});
-
-export type HeadingAnchorProps = Omit<ComponentPropsWithoutRef<typeof AnchorLink>, "href"> & {
+export type HeadingAnchorProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
   id: string;
   title: string;
 };
 
 const HeadingAnchor = ({ id, title, ...rest }: HeadingAnchorProps) => {
   return (
-    <AnchorLink href={`#${id}`} title={`Jump to "${title}"`} aria-hidden underline={false} {...rest}>
-      <Icon />
-    </AnchorLink>
+    <Link href={`#${id}`} title={`Jump to "${title}"`} aria-hidden underline={false} css={{ lineHeight: 1 }} {...rest}>
+      <FiLink size="0.8em" />
+    </Link>
   );
 };
 

components/Icons/index.ts

@@ -1,28 +0,0 @@
-// Icons from various packs, imported directly from the package's SVG files instead of their exports so they're all
-// processed consistently via svgr/webpack into React components.
-// NOTE: each package's path inside ./node_modules *must* be listed in svgr's webpack config in next.config.js.
-
-// feather icons: https://feathericons.com/
-export { default as ContactIcon } from "feather-icons/dist/icons/mail.svg";
-export { default as DateIcon } from "feather-icons/dist/icons/calendar.svg";
-export { default as EditIcon } from "feather-icons/dist/icons/edit.svg";
-export { default as HomeIcon } from "feather-icons/dist/icons/home.svg";
-export { default as LinkIcon } from "feather-icons/dist/icons/link.svg";
-export { default as NotesIcon } from "feather-icons/dist/icons/edit-3.svg";
-export { default as ProjectsIcon } from "feather-icons/dist/icons/code.svg";
-export { default as TagIcon } from "feather-icons/dist/icons/tag.svg";
-export { default as ViewsIcon } from "feather-icons/dist/icons/eye.svg";
-
-// octicons: https://primer.style/octicons/
-export { default as CheckOcticon } from "@primer/octicons/build/svg/check-16.svg";
-export { default as ClipboardOcticon } from "@primer/octicons/build/svg/paste-16.svg";
-export { default as ForkOcticon } from "@primer/octicons/build/svg/repo-forked-16.svg";
-export { default as HeartIcon } from "@primer/octicons/build/svg/heart-fill-16.svg";
-export { default as MarkdownIcon } from "@primer/octicons/build/svg/markdown-16.svg";
-export { default as OctocatOcticon } from "@primer/octicons/build/svg/mark-github-16.svg";
-export { default as StarOcticon } from "@primer/octicons/build/svg/star-16.svg";
-export { default as XOcticon } from "@primer/octicons/build/svg/x-16.svg";
-
-// simple icons: https://simpleicons.org/
-export { default as NextjsLogo } from "simple-icons/icons/nextdotjs.svg";
-export { default as Windows95Logo } from "simple-icons/icons/windows95.svg";

components/MenuItem/MenuItem.tsx

@@ -1,5 +1,6 @@
 import Link from "../Link";
 import { styled, theme } from "../../lib/styles/stitches.config";
+import type { IconType } from "react-icons";
 
 const MenuLink = styled(Link, {
   display: "inline-block",
@@ -45,20 +46,17 @@ const Label = styled("span", {
 });
 
 export type MenuItemProps = {
-  href?: string;
+  icon?: IconType;
   text?: string;
+  href?: string;
   current?: boolean;
   className?: string;
-
-  // `any` avoids conflicts with @svgr/webpack, see: node_modules/next/image-types/global.d.ts
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  icon: any;
 };
 
-const MenuItem = ({ icon: ItemIcon, href, text, current, className }: MenuItemProps) => {
-  const linkContent = (
+const MenuItem = ({ icon, text, href, current, className }: MenuItemProps) => {
+  const item = (
     <>
-      <Icon as={ItemIcon} />
+      {icon && <Icon as={icon} />}
       {text && <Label>{text}</Label>}
     </>
   );
@@ -67,12 +65,12 @@ const MenuItem = ({ icon: ItemIcon, href, text, current, className }: MenuItemPr
   if (href) {
     return (
       <MenuLink href={href} className={className} current={current} title={text} underline={false} aria-label={text}>
-        {linkContent}
+        {item}
       </MenuLink>
     );
   }
 
-  return linkContent;
+  return item;
 };
 
 export default MenuItem;

components/NoteMeta/NoteMeta.tsx

@@ -2,7 +2,7 @@ import Link from "../Link";
 import Time from "../Time";
 import HitCounter from "../HitCounter";
 import NoteTitle from "../NoteTitle";
-import { DateIcon, TagIcon, EditIcon, ViewsIcon } from "../Icons";
+import { FiCalendar, FiTag, FiEdit, FiEye } from "react-icons/fi";
 import { styled, theme } from "../../lib/styles/stitches.config";
 import * as config from "../../lib/config";
 import type { NoteFrontMatter } from "../../types";
@@ -68,14 +68,14 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags }: NoteMetaProps) => {
             }}
             underline={false}
           >
-            <Icon as={DateIcon} />
+            <Icon as={FiCalendar} />
             <Time date={date} format="MMMM D, YYYY" />
           </MetaLink>
         </MetaItem>
 
         {tags && (
           <MetaItem>
-            <Icon as={TagIcon} />
+            <Icon as={FiTag} />
             <TagsList>
               {tags.map((tag) => (
                 <Tag key={tag} title={tag} aria-label={`Tagged with ${tag}`}>
@@ -92,7 +92,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags }: NoteMetaProps) => {
             title={`Edit "${title}" on GitHub`}
             underline={false}
           >
-            <Icon as={EditIcon} />
+            <Icon as={FiEdit} />
             <span>Improve This Post</span>
           </MetaLink>
         </MetaItem>
@@ -106,7 +106,7 @@ const NoteMeta = ({ slug, date, title, htmlTitle, tags }: NoteMetaProps) => {
               marginRight: 0,
             }}
           >
-            <Icon as={ViewsIcon} />
+            <Icon as={FiEye} />
             <HitCounter slug={`notes/${slug}`} />
           </MetaItem>
         )}

components/NoteTitle/NoteTitle.tsx

@@ -18,23 +18,20 @@ const Title = styled("h1", {
   },
 });
 
-const TitleLink = styled(Link, {
-  color: theme.colors.text,
-});
-
 export type NoteTitleProps = Pick<NoteFrontMatter, "slug" | "title" | "htmlTitle"> &
   ComponentPropsWithoutRef<typeof Title>;
 
 const NoteTitle = ({ slug, title, htmlTitle, ...rest }: NoteTitleProps) => {
   return (
     <Title {...rest}>
-      <TitleLink
+      <Link
         href={{
           pathname: "/notes/[slug]/",
           query: { slug },
         }}
         dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
         underline={false}
+        css={{ color: theme.colors.text }}
       />
     </Title>
   );

components/OctocatLink/OctocatLink.tsx

@@ -1,33 +1,35 @@
 import Link from "../Link";
-import { OctocatOcticon } from "../Icons";
+import { SiGithub } from "react-icons/si";
 import { styled, theme } from "../../lib/styles/stitches.config";
 import type { ComponentPropsWithoutRef } from "react";
 
-const GitHubLink = styled(Link, {
-  margin: "0 0.4em",
-  color: theme.colors.text,
-
-  "&:hover, &:focus-visible": {
-    color: theme.colors.link,
-  },
-});
-
-const Octocat = styled(OctocatOcticon, {
+const Octocat = styled(SiGithub, {
   width: "1.2em",
   height: "1.2em",
   verticalAlign: "-0.2em",
-  fill: "currentColor",
 });
 
-export type OctocatLinkProps = Omit<ComponentPropsWithoutRef<typeof GitHubLink>, "href"> & {
+export type OctocatLinkProps = Omit<ComponentPropsWithoutRef<typeof Link>, "href"> & {
   repo: string;
 };
 
 const OctocatLink = ({ repo, className, ...rest }: OctocatLinkProps) => {
   return (
-    <GitHubLink href={`https://github.com/${repo}`} underline={false} {...rest}>
+    <Link
+      href={`https://github.com/${repo}`}
+      underline={false}
+      css={{
+        margin: "0 0.4em",
+        color: theme.colors.text,
+
+        "&:hover, &:focus-visible": {
+          color: theme.colors.link,
+        },
+      }}
+      {...rest}
+    >
       <Octocat className={className} />
-    </GitHubLink>
+    </Link>
   );
 };
 

components/PageTitle/PageTitle.tsx

@@ -15,10 +15,6 @@ const Title = styled("h1", {
   },
 });
 
-const TitleLink = styled(Link, {
-  color: theme.colors.text,
-});
-
 export type PageTitleProps = ComponentPropsWithoutRef<typeof Title>;
 
 const PageTitle = ({ children, ...rest }: PageTitleProps) => {
@@ -26,9 +22,9 @@ const PageTitle = ({ children, ...rest }: PageTitleProps) => {
 
   return (
     <Title {...rest}>
-      <TitleLink href={router.pathname} underline={false}>
+      <Link href={router.pathname} underline={false} css={{ color: theme.colors.text }}>
         {children}
-      </TitleLink>
+      </Link>
     </Title>
   );
 };

components/RepositoryCard/RepositoryCard.tsx

@@ -1,7 +1,7 @@
 import commaNumber from "comma-number";
 import Link from "../Link";
 import RelativeTime from "../RelativeTime";
-import { StarOcticon, ForkOcticon } from "../Icons";
+import { GoStar, GoRepoForked } from "react-icons/go";
 import { styled, theme } from "../../lib/styles/stitches.config";
 import type { Project } from "../../types";
 
@@ -50,9 +50,9 @@ const MetaLink = styled(Link, {
 const MetaIcon = styled("svg", {
   width: "16px",
   height: "16px",
-  verticalAlign: "text-bottom",
+  verticalAlign: "-0.3em",
   marginRight: "0.5em",
-  fill: "currentColor",
+  strokeWidth: 0.75,
 });
 
 const LanguageCircle = styled("span", {
@@ -100,7 +100,7 @@ const RepositoryCard = ({
               title={`${commaNumber(stars)} ${stars === 1 ? "star" : "stars"}`}
               underline={false}
             >
-              <MetaIcon as={StarOcticon} />
+              <MetaIcon as={GoStar} />
               {commaNumber(stars)}
             </MetaLink>
           </MetaItem>
@@ -113,7 +113,7 @@ const RepositoryCard = ({
               title={`${commaNumber(forks)} ${forks === 1 ? "fork" : "forks"}`}
               underline={false}
             >
-              <MetaIcon as={ForkOcticon} />
+              <MetaIcon as={GoRepoForked} />
               {commaNumber(forks)}
             </MetaLink>
           </MetaItem>

components/ThemeScript/ThemeScript.tsx

@@ -17,9 +17,9 @@ const ThemeScript = memo<ThemeScriptProps>(({ themeClassNames, themeStorageKey }
     // since the client function will end up being injected as a static hard-coded string, we need to determine all of
     // the dynamic values within it *before* generating the final script.
     const source = String(clientScript)
-      .replace("__MEDIA_QUERY__", "(prefers-color-scheme: dark)")
-      .replace("__STORAGE_KEY__", themeStorageKey)
-      .replace("__CLASS_NAMES__", Object.values(themeClassNames).join('","'));
+      .replaceAll("__MEDIA_QUERY__", "(prefers-color-scheme: dark)")
+      .replaceAll("__STORAGE_KEY__", themeStorageKey)
+      .replaceAll("__CLASS_NAMES__", Object.values(themeClassNames).join('","'));
 
     // turn the raw function into an iife
     const unminified = `(${source})()`;

components/ThemeScript/client.js

@@ -17,7 +17,7 @@ export const clientScript = () => {
     const newTheme = (pref && pref === "dark") ?? window.matchMedia("__MEDIA_QUERY__").matches ? 1 : 0;
 
     // remove both `classNames` to start fresh...
-    classList.remove(classNames[0], classNames[1]);
+    classList.remove(...classNames);
 
     // ...and then FINALLY set the root class
     classList.add(classNames[newTheme]);