custom <Image /> wrapper now supports static imports too

2026-01-09 11:22:56 -05:00 · 2022-01-24 08:57:21 -05:00
parent 5d402bc31b
commit 51ecae3c9b
22 changed files with 289 additions and 355 deletions
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -5,6 +5,8 @@
    "divlo.vscode-styled-jsx-syntax",
    "editorconfig.editorconfig",
    "esbenp.prettier-vscode",
-    "stylelint.vscode-stylelint"
+    "silvenon.mdx",
+    "stylelint.vscode-stylelint",
+    "wix.vscode-import-cost"
  ]
 }
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,9 +2,6 @@
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.rulers": [120],
-  "files.associations": {
-    "*.mdx": "markdown"
-  },
  "files.eol": "\n",
  "files.insertFinalNewline": true,
  "files.trimTrailingWhitespace": true,
@@ -12,14 +9,11 @@
    "**/.next": true,
    "**/node_modules": true
  },
-  "css.validate": false,
-  "scss.validate": false,
  "prettier.requireConfig": true,
  "prettier.configPath": ".prettierrc.json",
  "stylelint.packageManager": "yarn",
  "stylelint.reportNeedlessDisables": true,
  "stylelint.reportInvalidScopeDisables": true,
-  "stylelint.validate": ["css", "scss"],
  "npm.packageManager": "yarn",
  "eslint.packageManager": "yarn"
 }
--- a/components/Figure/Figure.tsx
+++ b/components/Figure/Figure.tsx
@@ -7,7 +7,7 @@ import type { ImageProps as NextImageProps } from "next/image";
 import styles from "./Figure.module.css";

 type Props = Omit<NextImageProps, "alt"> & {
-  children: ReactNode; // caption (can be in markdown, yay!!!)
+  children: ReactNode;
  alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
  className?: string;
 };
--- a/components/Footer/Footer.module.css
+++ b/components/Footer/Footer.module.css
@@ -21,6 +21,10 @@
  line-height: 2.3;
 }

+.nextjs:hover {
+  color: var(--medium);
+}
+
 .view_source {
  padding-bottom: 2px;
  border-bottom: 1px solid;
@@ -31,7 +35,7 @@
  border-color: var(--kinda-light);
 }

-.beat {
+.heart {
  display: inline-block;
  animation: beat 10s infinite; /* 6 bpm, call 911 if you see this please. */
  animation-delay: 7.5s; /* offset from wave animation */
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -8,7 +8,7 @@ import styles from "./Footer.module.css";
 const Footer = () => (
  <footer className={styles.footer}>
    <div className={styles.row}>
-      <div className={styles.copyright}>
+      <div className={styles.license}>
        Content{" "}
        <Link href="/license/" prefetch={false}>
          <a title="Creative Commons Attribution 4.0 International">licensed under CC-BY-4.0</a>
@@ -21,11 +21,12 @@ const Footer = () => (
      </div>
      <div className={styles.powered_by}>
        Made with{" "}
-        <span className={styles.beat} title="Love">
+        <span className={styles.heart} title="Love">
          <HeartIcon />
        </span>{" "}
        and{" "}
        <a
+          className={styles.nextjs}
          href="https://nextjs.org/"
          title="Powered by Next.js"
          aria-label="Next.js"
@@ -36,9 +37,9 @@ const Footer = () => (
        </a>
        .{" "}
        <a
+          className={styles.view_source}
          href={`https://github.com/${config.githubRepo}`}
          title="View Source on GitHub"
-          className={styles.view_source}
          target="_blank"
          rel="noopener noreferrer"
        >
--- a/components/Header/Header.module.css
+++ b/components/Header/Header.module.css
@@ -21,26 +21,13 @@
  margin: 0 auto;
 }

-.nav > div {
-  line-height: 0;
-}
-
-.name {
-  flex: 1;
-}
-
@media screen and (max-width: 768px) {
  .header {
    padding: 0.75em 1.25em;
    height: 5.9em;
  }

-  .name {
-    flex: 0;
-  }
-
  .menu {
-    flex: 1;
    max-width: 325px;
    margin-left: 2.5em;
  }
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -1,5 +1,5 @@
 import { memo } from "react";
-import Name from "../Name/Name";
+import Selfie from "../Selfie/Selfie";
 import Menu from "../Menu/Menu";

 import styles from "./Header.module.css";
@@ -7,13 +7,8 @@ import styles from "./Header.module.css";
 const Header = () => (
  <header className={styles.header}>
    <nav className={styles.nav}>
-      <div className={styles.name}>
-        <Name />
-      </div>
-
-      <div className={styles.menu}>
-        <Menu />
-      </div>
+      <Selfie className={styles.selfie} />
+      <Menu className={styles.menu} />
    </nav>
  </header>
 );
--- a/components/Heading/Heading.module.css
+++ b/components/Heading/Heading.module.css
@@ -3,8 +3,11 @@
  margin-bottom: 0.5em;
  line-height: 1.5;

-  /* offset (approximately) with sticky header so jumped-to content isn't hiding behind it */
-  scroll-margin-top: 4em;
+  /**
+   * offset (approximately) with sticky header so jumped-to content isn't hiding behind it.
+   * note: use rem so it isn't based on the heading's font size.
+   */
+  scroll-margin-top: 5.5rem;
 }

 /* special bottom border for <h2>s */
@@ -13,11 +16,6 @@
  border-bottom: 1px solid var(--kinda-light);
 }

-.h3,
-.h4 {
-  scroll-margin-top: 5em;
-}
-
 /* sub-heading anchor styles */
 .anchor {
  margin: 0 0.25em;
@@ -38,12 +36,7 @@
 }

@media screen and (max-width: 768px) {
-  .h2 {
-    scroll-margin-top: 5em;
-  }
-
-  .h3,
-  .h4 {
-    scroll-margin-top: 6em;
+  .heading {
+    scroll-margin-top: 6.5rem;
  }
 }
--- a/components/Image/Image.tsx
+++ b/components/Image/Image.tsx
@@ -4,20 +4,34 @@ import type { ImageProps as NextImageProps } from "next/image";

 import styles from "./Image.module.css";

-const Image = ({ src, width, height, alt, quality, priority, className, ...rest }: NextImageProps) => {
+const Image = ({ src, width, height, placeholder, alt, quality, priority, className, ...rest }: NextImageProps) => {
+  // passed directly into next/image: https://nextjs.org/docs/api-reference/next/image
+  const imageProps: Partial<NextImageProps> = {
+    width,
+    height,
+    layout: "intrinsic",
+    alt: alt || "",
+    quality: quality || 65,
+    loading: priority ? "eager" : "lazy",
+    priority: !!priority,
+  };
+
+  if (typeof src === "object") {
+    // static image imports: extract variables from the src object
+    const staticImg = src as StaticImageData;
+
+    imageProps.src = staticImg;
+    // default to blur placeholder while loading
+    imageProps.placeholder = placeholder || (staticImg.blurDataURL ? "blur" : "empty");
+  } else {
+    // regular path to jpg/png/etc. passed in, which makes explicit width and height required
+    imageProps.src = (src as string).replace(/^\/public/g, "");
+  }
+
  return (
    <div className={classNames(styles.wrapper, className)}>
-      <NextImage
-        src={(src as string).replace(/^\/public/g, "")}
-        layout="intrinsic"
-        width={width}
-        height={height}
-        alt={alt || ""}
-        quality={quality || 65}
-        loading={priority ? "eager" : "lazy"}
-        priority={!!priority}
-        {...rest}
-      />
+      {/* @ts-ignore */}
+      <NextImage {...imageProps} {...rest} />
    </div>
  );
 };
--- a/components/Menu/Menu.module.css
+++ b/components/Menu/Menu.module.css
@@ -4,35 +4,35 @@
  margin: 0;
 }

-.menu li {
+.menu_item {
  list-style: none;
  display: inline-flex;
  margin-left: 1.8em;
 }

-.menu li .link {
+.menu_item .link {
  display: inline-flex;
  align-items: center;
  color: var(--medium-dark);
 }

-.menu li .link:hover {
+.menu_item .link:hover {
  color: var(--link);
 }

-.menu li .icon {
+.menu_item .icon {
  width: 1.6em;
  height: 1.6em;
 }

-.menu li span {
+.menu_item .label {
  font-size: 0.95em;
  font-weight: 500;
  margin-left: 0.8em;
  line-height: 1;
 }

-.menu li.theme_toggle {
+.menu_item.theme_toggle {
  margin-left: 1.25em;
 }

@@ -42,28 +42,28 @@
    justify-content: space-between;
  }

-  .menu li {
+  .menu_item {
    margin-left: 0;
  }

-  .menu li .icon {
+  .menu_item .icon {
    width: 1.8em;
    height: 1.8em;
  }

  /* hide text next to emojis on mobile */
-  .menu li span {
+  .menu_item .label {
    display: none;
  }

-  .menu li.theme_toggle {
+  .menu_item.theme_toggle {
    margin-left: -0.3em;
  }
 }

 /* the home icon is redundant when space is SUPER tight */
@media screen and (max-width: 380px) {
-  .menu li:first-of-type {
+  .menu_item:first-of-type {
    display: none;
  }
 }
--- a/components/Menu/Menu.tsx
+++ b/components/Menu/Menu.tsx
@@ -6,6 +6,10 @@ import { HomeIcon, NotesIcon, ProjectsIcon, ContactIcon } from "../Icons";

 import styles from "./Menu.module.css";

+type Props = {
+  className?: string;
+};
+
 const links = [
  {
    icon: <HomeIcon className={classNames("icon", styles.icon)} />,
@@ -29,19 +33,19 @@ const links = [
  },
 ];

-const Menu = () => (
-  <ul className={styles.menu}>
+const Menu = ({ className }: Props) => (
+  <ul className={classNames(styles.menu, className)}>
    {links.map((link, index) => (
-      <li key={index}>
+      <li key={index} className={styles.menu_item}>
        <Link href={link.href} prefetch={false}>
          <a className={styles.link}>
-            {link.icon} <span>{link.text}</span>
+            {link.icon} <span className={styles.label}>{link.text}</span>
          </a>
        </Link>
      </li>
    ))}

-    <li className={styles.theme_toggle}>
+    <li className={classNames(styles.theme_toggle, styles.menu_item)}>
      <ThemeToggle className={styles.icon} />
    </li>
  </ul>
--- a/components/NoteMeta/NoteMeta.module.css
+++ b/components/NoteMeta/NoteMeta.module.css
@@ -45,7 +45,7 @@
 }

 .tags .tag::before {
-  content: "#"; /* cosmetically hashtagify tags */
+  content: "\0023"; /* cosmetically hashtagify tags */
  padding-right: 0.125em;
  color: var(--light);
 }
--- a/components/Selfie/Selfie.module.css
+++ b/components/Selfie/Selfie.module.css
--- a/components/Selfie/Selfie.tsx
+++ b/components/Selfie/Selfie.tsx
@@ -1,14 +1,19 @@
 import { memo } from "react";
 import Link from "next/link";
 import Image from "next/image";
+import classNames from "classnames";

-import styles from "./Name.module.css";
+import styles from "./Selfie.module.css";

 import meJpg from "../../public/static/images/me.jpg";

-const Name = () => (
+type Props = {
+  className?: string;
+};
+
+const Selfie = ({ className }: Props) => (
  <Link href="/">
-    <a className={styles.link}>
+    <a className={classNames(styles.link, className)}>
      <div className={styles.selfie}>
        <Image src={meJpg} alt="Photo of Jake Jarvis" width={70} height={70} quality={60} layout="intrinsic" priority />
      </div>
@@ -17,4 +22,4 @@ const Name = () => (
  </Link>
 );

-export default memo(Name);
+export default memo(Selfie);
--- a/lib/config.js
+++ b/lib/config.js
@@ -1,4 +1,4 @@
-// do not convert to ESM -- this needs to be imported in CJS files like next.config.js too
+// do not convert to ESM and/or TS -- this needs to be imported in CJS files like next.config.js too
 module.exports = {
  // Site info
  siteName: "Jake Jarvis",
@@ -44,6 +44,4 @@ module.exports = {

  // Next.js constants
  NOTES_DIR: "./notes",
-
-  // ...note / TODO: there is still a metric poop ton of this kind of info hard-coded.
 };
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
    "@next/bundle-analyzer": "^12.0.8",
    "@octokit/graphql": "^4.8.0",
    "@primer/octicons": "^16.2.0",
-    "@sentry/node": "^6.16.1",
+    "@sentry/node": "^6.17.0",
    "classnames": "^2.3.1",
    "copy-to-clipboard": "^3.3.1",
    "date-fns": "^2.28.0",
@@ -95,7 +95,7 @@
    "eslint-plugin-import": "~2.25.4",
    "eslint-plugin-mdx": "~1.16.0",
    "eslint-plugin-prettier": "~4.0.0",
-    "lint-staged": "^12.2.2",
+    "lint-staged": "^12.3.1",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.5",
    "postcss-flexbugs-fixes": "^5.0.2",
@@ -103,7 +103,7 @@
    "postcss-preset-env": "^7.2.3",
    "prettier": "^2.5.1",
    "simple-git-hooks": "^2.7.0",
-    "stylelint": "~14.2.0",
+    "stylelint": "~14.3.0",
    "stylelint-config-prettier": "~9.0.3",
    "stylelint-prettier": "~2.0.0",
    "typescript": "^4.5.5"
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -80,8 +80,8 @@ const App = ({ Component, pageProps }: AppProps) => {
          ],
        }}
        twitter={{
-          handle: `@${config.authorSocial.twitter}`,
-          site: `@${config.authorSocial.twitter}`,
+          handle: `@${config.authorSocial?.twitter}`,
+          site: `@${config.authorSocial?.twitter}`,
          cardType: "summary",
        }}
        additionalLinkTags={[
@@ -169,13 +169,13 @@ const App = ({ Component, pageProps }: AppProps) => {
        url={`${config.baseUrl}/`}
        sameAs={[
          `${config.baseUrl}/`,
-          `https://github.com/${config.authorSocial.github}`,
-          `https://keybase.io/${config.authorSocial.keybase}`,
-          `https://twitter.com/${config.authorSocial.twitter}`,
-          `https://medium.com/@${config.authorSocial.medium}`,
-          `https://www.linkedin.com/in/${config.authorSocial.linkedin}/`,
-          `https://www.facebook.com/${config.authorSocial.facebook}`,
-          `https://www.instagram.com/${config.authorSocial.instagram}/`,
+          `https://github.com/${config.authorSocial?.github}`,
+          `https://keybase.io/${config.authorSocial?.keybase}`,
+          `https://twitter.com/${config.authorSocial?.twitter}`,
+          `https://medium.com/@${config.authorSocial?.medium}`,
+          `https://www.linkedin.com/in/${config.authorSocial?.linkedin}/`,
+          `https://www.facebook.com/${config.authorSocial?.facebook}`,
+          `https://www.instagram.com/${config.authorSocial?.instagram}/`,
        ]}
      />

--- a/pages/cli.tsx
+++ b/pages/cli.tsx
@@ -1,7 +1,7 @@
-import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import Image from "../components/Image/Image";
 import Blockquote from "../components/Blockquote/Blockquote";
 import CodeBlock from "../components/CodeBlock/CodeBlock";
 import { H2 } from "../components/Heading/Heading";
@@ -40,7 +40,7 @@ const CLI = () => (
        target="_blank"
        rel="noopener noreferrer"
      >
-        <Image src={cliImg} placeholder="blur" alt="Terminal Screenshot" priority />
+        <Image src={cliImg} alt="Terminal Screenshot" priority />
      </a>

      <H2>Usage</H2>
--- a/pages/previously.tsx
+++ b/pages/previously.tsx
@@ -1,7 +1,7 @@
-import Image from "next/image";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import Figure from "../components/Figure/Figure";
 import IFrame from "../components/IFrame/IFrame";
 import HorizontalRule from "../components/HorizontalRule/HorizontalRule";
 import { FloppyIcon, SirenIcon } from "../components/Icons";
@@ -39,27 +39,13 @@ const Previously = () => (
    </PageTitle>

    <Content>
-      <figure>
-        <a
-          className="no-underline"
-          href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image src={img_wayback} placeholder="blur" alt="Timeline of this website's past." priority />
-        </a>
-        <figcaption>
-          ...the{" "}
-          <a
-            href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Cringey Chronicles&trade;
-          </a>{" "}
-          of this website's past.
-        </figcaption>
-      </figure>
+      <Figure src={img_wayback} alt="Timeline of this website's past." priority>
+        ...the{" "}
+        <a href="https://web.archive.org/web/20010501000000*/jakejarvis.com" target="_blank" rel="noopener noreferrer">
+          Cringey Chronicles&trade;
+        </a>{" "}
+        of this website's past.
+      </Figure>

      <HorizontalRule />

@@ -78,131 +64,79 @@ const Previously = () => (
        </a>
      </p>

-      <figure>
-        <IFrame
-          src="https://jakejarvis.github.io/my-first-website/"
-          title="My Terrible, Horrible, No Good, Very Bad First Website"
-          height={500}
-          allowScripts
-        />
-        <figcaption>
-          November 2001 (
-          <a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
-            archived source
-          </a>
-          )
-        </figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2002_02} placeholder="blur" alt="February 2002" />
-        <figcaption>February 2002</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2002_10} placeholder="blur" alt="October 2002" />
-        <figcaption>October 2002</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2003_08} placeholder="blur" alt="August 2003" />
-        <figcaption>August 2003</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2004_11} placeholder="blur" alt="November 2004" />
-        <figcaption>November 2004</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2006_04} placeholder="blur" alt="April 2006" />
-        <figcaption>April 2006</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2006_05} placeholder="blur" alt="May 2006" />
-        <figcaption>May 2006</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2007_01} placeholder="blur" alt="January 2007" />
-        <figcaption>January 2007</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2007_04} placeholder="blur" alt="April 2007" />
-        <figcaption>April 2007</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2007_05} placeholder="blur" alt="May 2007" />
-        <figcaption>May 2007</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <Image src={img_2009_07} placeholder="blur" alt="July 2009" />
-        <figcaption>July 2009</figcaption>
-      </figure>
-
-      <HorizontalRule />
-
-      <figure>
-        <a
-          className="no-underline"
-          href="https://github.com/jakejarvis/jarv.is/tree/v1"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image src={img_2012_09} placeholder="blur" alt="September 2012" />
+      <IFrame
+        src="https://jakejarvis.github.io/my-first-website/"
+        title="My Terrible, Horrible, No Good, Very Bad First Website"
+        height={500}
+        allowScripts
+      />
+      <p className="iframe_caption">
+        November 2001 (
+        <a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
+          archived source
        </a>
-        <figcaption>
-          September 2012 (
-          <a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
-            archived source
-          </a>
-          )
-        </figcaption>
-      </figure>
+        )
+      </p>

      <HorizontalRule />

-      <figure>
-        <a
-          className="no-underline"
-          href="https://github.com/jakejarvis/jarv.is/tree/v2"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image src={img_2018_04} placeholder="blur" alt="April 2018" />
+      <Figure src={img_2002_02}>February 2002</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2002_10}>October 2002</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2003_08}>August 2003</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2004_11}>November 2004</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2006_04}>April 2006</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2006_05}>May 2006</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2007_01}>January 2007</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2007_04}>April 2007</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2007_05}>May 2007</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2009_07}>July 2009</Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2012_09} alt="September 2012">
+        September 2012 (
+        <a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
+          archived source
        </a>
-        <figcaption>
-          April 2018 (
-          <a href="https://github.com/jakejarvis/jarv.is/tree/v2" target="_blank" rel="noopener noreferrer">
-            archived source
-          </a>
-          )
-        </figcaption>
-      </figure>
+        )
+      </Figure>
+
+      <HorizontalRule />
+
+      <Figure src={img_2018_04} alt="April 2018">
+        April 2018 (
+        <a href="https://github.com/jakejarvis/jarv.is/tree/v2" target="_blank" rel="noopener noreferrer">
+          archived source
+        </a>
+        )
+      </Figure>
    </Content>

    {/* a complete sh*tshow of overrides, mainly to compensate for font change */}
@@ -211,15 +145,18 @@ const Previously = () => (
        font-family: "Comic Neue", "Comic Sans MS", "Comic Sans", "Inter", sans-serif;
        font-weight: 600 !important;
      }
-      header nav > div:first-of-type span:last-of-type {
+      /* left header */
+      header nav > a:first-of-type span:last-of-type {
        font-size: 1.4em !important;
        font-weight: 700 !important;
      }
-      header nav div:last-of-type a span {
+      /* right header */
+      header nav ul a span {
        font-size: 1.1em !important;
        font-weight: 700 !important;
        line-height: 1.1;
      }
+      /* content */
      main > div > div {
        font-size: 1.1em !important;
        text-align: center;
@@ -237,22 +174,18 @@ const Previously = () => (
      main > div > div figure:last-of-type {
        margin-bottom: 0;
      }
+      /* footer */
      footer > div {
        font-size: 0.95em !important;
      }
-      figure {
-        margin: 1em auto;
-        text-align: center;
-      }
-      figure img {
-        margin-bottom: 0;
-        border-radius: var(--rounded-edge-radius);
-      }
-      figcaption {
+      /* components */
+      figcaption,
+      .iframe_caption {
        margin-top: 0.2em;
        font-size: 0.9em;
        line-height: 1.5;
        color: var(--medium);
+        text-align: center;
      }
      hr {
        margin: 1em auto !important;
--- a/pages/privacy.tsx
+++ b/pages/privacy.tsx
@@ -1,8 +1,8 @@
-import Image from "next/image";
 import Link from "next/link";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import Image from "../components/Image/Image";
 import IFrame from "../components/IFrame/IFrame";
 import { H2 } from "../components/Heading/Heading";
 import Blockquote from "../components/Blockquote/Blockquote";
@@ -96,7 +96,7 @@ const Privacy = () => (
        are public.
      </p>

-      <Image src={faunaImg} placeholder="blur" alt="The entire database schema." />
+      <Image src={faunaImg} alt="The entire database schema." />

      <p>
        <a href="https://usefathom.com/ref/ZEYG0O" target="_blank" rel="noopener noreferrer">
--- a/pages/uses.tsx
+++ b/pages/uses.tsx
@@ -1,8 +1,8 @@
-import Image from "next/image";
 import Link from "next/link";
 import { NextSeo } from "next-seo";
 import Content from "../components/Content/Content";
 import PageTitle from "../components/PageTitle/PageTitle";
+import Image from "../components/Image/Image";
 import { H2 } from "../components/Heading/Heading";
 import { LaptopIcon } from "../components/Icons";

@@ -35,9 +35,9 @@ const Uses = () => (
        . ❤️
      </p>

-      <Image src={desktopImg} placeholder="blur" alt="My mess of a desktop." priority />
+      <Image src={desktopImg} alt="My mess of a desktop." priority />

-      <H2>🍎 Hardware</H2>
+      <H2 id="hardware">🍎 Hardware</H2>
      <ul>
        <li>
          <a href="https://browser.geekbench.com/v5/cpu/8124907" target="_blank" rel="noopener noreferrer">
@@ -160,7 +160,7 @@ const Uses = () => (
        </li>
      </ul>

-      <H2>💾 Development</H2>
+      <H2 id="development">💾 Development</H2>
      <ul>
        <li>
          <a href="https://iterm2.com/" target="_blank" rel="noopener noreferrer">
@@ -510,7 +510,7 @@ const Uses = () => (
        </li>
      </ul>

-      <H2>🌎 Browsing</H2>
+      <H2 id="browsing">🌎 Browsing</H2>
      <ul>
        <li>
          <a href="https://www.mozilla.org/en-US/firefox/developer/" target="_blank" rel="noopener noreferrer">
@@ -687,7 +687,7 @@ const Uses = () => (
        </li>
      </ul>

-      <H2>💻 macOS</H2>
+      <H2 id="macos">💻 macOS</H2>
      <ul>
        <li>
          <a href="https://1password.com/" target="_blank" rel="noopener noreferrer">
@@ -792,7 +792,7 @@ const Uses = () => (
        </li>
      </ul>

-      <H2>📱 iOS</H2>
+      <H2 id="ios">📱 iOS</H2>
      <p>I have far too many apps to count, but here the essentials that have earned a spot on my home screen:</p>
      <ul>
        <li>
@@ -858,7 +858,7 @@ const Uses = () => (
        </li>
      </ul>

-      <H2>☁️ Cloud</H2>
+      <H2 id="cloud">☁️ Cloud</H2>
      <p>
        I've been making recent efforts to{" "}
        <a href="https://www.stallman.org/google.html" target="_blank" rel="noopener noreferrer">
@@ -1017,7 +1017,7 @@ const Uses = () => (
        </li>
      </ul>

-      <H2>
+      <H2 id="iot">
        🏠 Internet of <del>Things</del>{" "}
        <Link href="/notes/shodan-search-queries/">
          <a>Crap</a>
@@ -1078,10 +1078,7 @@ const Uses = () => (
    </Content>

    {/* TODO: use OrderedList component */}
-    <style jsx global>{`
-      img {
-        border-radius: var(--rounded-edge-radius);
-      }
+    <style jsx>{`
      ul {
        margin-left: 1.5em;
        padding-left: 0;
--- a/yarn.lock
+++ b/yarn.lock
@@ -1282,72 +1282,72 @@
  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
  integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==

-"@sentry/core@6.16.1":
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.16.1.tgz#d9f7a75f641acaddf21b6aafa7a32e142f68f17c"
-  integrity sha512-UFI0264CPUc5cR1zJH+S2UPOANpm6dLJOnsvnIGTjsrwzR0h8Hdl6rC2R/GPq+WNbnipo9hkiIwDlqbqvIU5vw==
+"@sentry/core@6.17.0":
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.17.0.tgz#687799404c461240a847e530ee54780161c4450e"
+  integrity sha512-9ozq3mIaOdXW56Vwh0WJlB2lzhmjkEADPvvr65Ai7kYNpvln3HTmwqPGccsq3t5TGXuggRg/QuHZbfShGBb1gA==
  dependencies:
-    "@sentry/hub" "6.16.1"
-    "@sentry/minimal" "6.16.1"
-    "@sentry/types" "6.16.1"
-    "@sentry/utils" "6.16.1"
+    "@sentry/hub" "6.17.0"
+    "@sentry/minimal" "6.17.0"
+    "@sentry/types" "6.17.0"
+    "@sentry/utils" "6.17.0"
    tslib "^1.9.3"

-"@sentry/hub@6.16.1":
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.16.1.tgz#526e19db51f4412da8634734044c605b936a7b80"
-  integrity sha512-4PGtg6AfpqMkreTpL7ymDeQ/U1uXv03bKUuFdtsSTn/FRf9TLS4JB0KuTZCxfp1IRgAA+iFg6B784dDkT8R9eg==
+"@sentry/hub@6.17.0":
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.17.0.tgz#5e7eda357dbd922e3598974c00924b3cb4b539ba"
+  integrity sha512-SAeijR3Vz9r2I5pXjOmUCUgCAofcF/7sj0ig8nGMj7TgZBiVXEpKAkDaxpRHIppa1vR+DrtEbVzcqsxFfAIn4Q==
  dependencies:
-    "@sentry/types" "6.16.1"
-    "@sentry/utils" "6.16.1"
+    "@sentry/types" "6.17.0"
+    "@sentry/utils" "6.17.0"
    tslib "^1.9.3"

-"@sentry/minimal@6.16.1":
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.16.1.tgz#6a9506a92623d2ff1fc17d60989688323326772e"
-  integrity sha512-dq+mI1EQIvUM+zJtGCVgH3/B3Sbx4hKlGf2Usovm9KoqWYA+QpfVBholYDe/H2RXgO7LFEefDLvOdHDkqeJoyA==
+"@sentry/minimal@6.17.0":
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.17.0.tgz#872984ca93f9cb5e4590edf26aba4c2def899f34"
+  integrity sha512-W+zibEOFX/XnsfZqOAMs4N2uwRKVsqKQNlkNTSu1PBNrKkjRiEZQqvGh85B5WW+zbcJWjPrfzuJ3o46s+zVqGQ==
  dependencies:
-    "@sentry/hub" "6.16.1"
-    "@sentry/types" "6.16.1"
+    "@sentry/hub" "6.17.0"
+    "@sentry/types" "6.17.0"
    tslib "^1.9.3"

-"@sentry/node@^6.16.1":
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-6.16.1.tgz#d92916da3e95d23e1ada274e97d6bf369e74ac51"
-  integrity sha512-SeDDoug2kUxeF1D7JGPa3h5EXxKtmA01mITBPYx5xbJ0sMksnv5I5bC1SJ8arRRzq6+W1C4IEeDBQtrVCk6ixA==
+"@sentry/node@^6.17.0":
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-6.17.0.tgz#356e2ec748070c059d10a50d90bd16854264f0af"
+  integrity sha512-O20edpI4JYICQWbCvYGTY+jTFFb/6m0IlfLRcoCNND+KsxDOVECeM7eKloAAer9/s0i8/BqyKEGTHUIgyS3vJQ==
  dependencies:
-    "@sentry/core" "6.16.1"
-    "@sentry/hub" "6.16.1"
-    "@sentry/tracing" "6.16.1"
-    "@sentry/types" "6.16.1"
-    "@sentry/utils" "6.16.1"
+    "@sentry/core" "6.17.0"
+    "@sentry/hub" "6.17.0"
+    "@sentry/tracing" "6.17.0"
+    "@sentry/types" "6.17.0"
+    "@sentry/utils" "6.17.0"
    cookie "^0.4.1"
    https-proxy-agent "^5.0.0"
    lru_map "^0.3.3"
    tslib "^1.9.3"

-"@sentry/tracing@6.16.1":
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.16.1.tgz#32fba3e07748e9a955055afd559a65996acb7d71"
-  integrity sha512-MPSbqXX59P+OEeST+U2V/8Hu/8QjpTUxTNeNyTHWIbbchdcMMjDbXTS3etCgajZR6Ro+DHElOz5cdSxH6IBGlA==
+"@sentry/tracing@6.17.0":
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.17.0.tgz#ff61068a308f9fab9f78a01705c6eb7eeaa04be7"
+  integrity sha512-cXcL0EbSwXXai/68VgC3vr15V/XUJ+pbZUmnzIWabiswvrqLD3ZcfjATT3DnX6pHEJj/mqaVDmNzRqMlPe9Aog==
  dependencies:
-    "@sentry/hub" "6.16.1"
-    "@sentry/minimal" "6.16.1"
-    "@sentry/types" "6.16.1"
-    "@sentry/utils" "6.16.1"
+    "@sentry/hub" "6.17.0"
+    "@sentry/minimal" "6.17.0"
+    "@sentry/types" "6.17.0"
+    "@sentry/utils" "6.17.0"
    tslib "^1.9.3"

-"@sentry/types@6.16.1":
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.16.1.tgz#4917607115b30315757c2cf84f80bac5100b8ac0"
-  integrity sha512-Wh354g30UsJ5kYJbercektGX4ZMc9MHU++1NjeN2bTMnbofEcpUDWIiKeulZEY65IC1iU+1zRQQgtYO+/hgCUQ==
+"@sentry/types@6.17.0":
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.17.0.tgz#ea4afbdba53d6d720f630cc9d3d8113831f43655"
+  integrity sha512-JFlXrm0A5S7RG7Xbxh+1XfiNkErByzYmDbg8XR0OSeU/F0DfDZ1lts3qEC7Lv+MjWxWhHg0ceD9hoIi0LzFmsg==

-"@sentry/utils@6.16.1":
-  version "6.16.1"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.16.1.tgz#1b9e14c2831b6e8b816f7021b9876133bf2be008"
-  integrity sha512-7ngq/i4R8JZitJo9Sl8PDnjSbDehOxgr1vsoMmerIsyRZ651C/8B+jVkMhaAPgSdyJ0AlE3O7DKKTP1FXFw9qw==
+"@sentry/utils@6.17.0":
+  version "6.17.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.17.0.tgz#f025728f1a1fbd47c046094f4377e7b4b652ad47"
+  integrity sha512-t9NoYLYRPe7cdA+9DgqBQC1XnF1CRJHGe4PMYoAt/ymiPhfjJDysZ0owycpnWfhN94gMIZXjMZvJDIxsUN674w==
  dependencies:
-    "@sentry/types" "6.16.1"
+    "@sentry/types" "6.17.0"
    tslib "^1.9.3"

 "@svgr/babel-plugin-add-jsx-attribute@^6.0.0":
@@ -1565,9 +1565,9 @@
  integrity sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==

 "@types/prismjs@^1.0.0":
-  version "1.16.6"
-  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.6.tgz#377054f72f671b36dbe78c517ce2b279d83ecc40"
-  integrity sha512-dTvnamRITNqNkqhlBd235kZl3KfVJQQoT5jkXeiWSBK7i4/TLKBNLV0S1wOt8gy4E2TY722KLtdmv2xc6+Wevg==
+  version "1.16.7"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.7.tgz#6048a51abe24b3675e8acccfa13ea472e4476e5e"
+  integrity sha512-EHN5cCYpZU0KUX+Hl5A7xSVaUFTMihEQFNsXceR6maq3wGhEM2nKkXLFLB00SVzZKlClR8kb3WKtGRATI0bM0Q==

 "@types/prop-types@*", "@types/prop-types@^15.7.4":
  version "15.7.4"
@@ -2963,7 +2963,7 @@ fast-diff@^1.1.2:
  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==

-fast-glob@^3.2.7, fast-glob@^3.2.9:
+fast-glob@^3.2.11, fast-glob@^3.2.9:
  version "3.2.11"
  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
  integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==
@@ -3236,7 +3236,7 @@ globals@^13.6.0, globals@^13.9.0:
  dependencies:
    type-fest "^0.20.2"

-globby@^11.0.4:
+globby@^11.0.4, globby@^11.1.0:
  version "11.1.0"
  resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -3900,10 +3900,10 @@ lines-and-columns@^1.1.6:
  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==

-lint-staged@^12.2.2:
-  version "12.2.2"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.2.tgz#e03d93b41092316e0f38b37c9630da807aae3cca"
-  integrity sha512-bcHEoM1M/f+K1BYdHcEuIn8K+zMOSJR3mkny6PAuQiTgcSUcRbUWaUD6porAYypxF4k1vYZZ2HutZt1p94Z1jQ==
+lint-staged@^12.3.1:
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.1.tgz#d475b0c0d0a12d91dde58a429ac6268dea485f06"
+  integrity sha512-Ocht/eT+4/siWOZDJpNUKcKX2UeWW/pDbohJ4gRsrafAjBi79JK8kiNVk2ciIVNKdw0Q4ABptl2nr6uQAlRImw==
  dependencies:
    cli-truncate "^3.1.0"
    colorette "^2.0.16"
@@ -3911,25 +3911,25 @@ lint-staged@^12.2.2:
    debug "^4.3.3"
    execa "^5.1.1"
    lilconfig "2.0.4"
-    listr2 "^3.13.5"
+    listr2 "^4.0.1"
    micromatch "^4.0.4"
    normalize-path "^3.0.0"
-    object-inspect "^1.11.1"
+    object-inspect "^1.12.0"
    string-argv "^0.3.1"
    supports-color "^9.2.1"
    yaml "^1.10.2"

-listr2@^3.13.5:
-  version "3.14.0"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.14.0.tgz#23101cc62e1375fd5836b248276d1d2b51fdbe9e"
-  integrity sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==
+listr2@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-4.0.1.tgz#e050c1fd390276e191f582603d6e3531cd6fd2b3"
+  integrity sha512-D65Nl+zyYHL2jQBGmxtH/pU8koPZo5C8iCNE8EoB04RwPgQG1wuaKwVbeZv9LJpiH4Nxs0FCp+nNcG8OqpniiA==
  dependencies:
    cli-truncate "^2.1.0"
    colorette "^2.0.16"
    log-update "^4.0.0"
    p-map "^4.0.0"
    rfdc "^1.3.0"
-    rxjs "^7.5.1"
+    rxjs "^7.5.2"
    through "^2.3.8"
    wrap-ansi "^7.0.0"

@@ -4902,7 +4902,7 @@ object-assign@^4.1.0, object-assign@^4.1.1:
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=

-object-inspect@^1.11.0, object-inspect@^1.11.1, object-inspect@^1.9.0:
+object-inspect@^1.11.0, object-inspect@^1.12.0, object-inspect@^1.9.0:
  version "1.12.0"
  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
@@ -5405,7 +5405,7 @@ postcss-selector-not@^5.0.0:
  dependencies:
    balanced-match "^1.0.0"

-postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.7, postcss-selector-parser@^6.0.8:
+postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.8, postcss-selector-parser@^6.0.9:
  version "6.0.9"
  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f"
  integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ==
@@ -5413,7 +5413,7 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector
    cssesc "^3.0.0"
    util-deprecate "^1.0.2"

-postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0:
+postcss-value-parser@^4.2.0:
  version "4.2.0"
  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
@@ -5888,7 +5888,7 @@ run-parallel@^1.1.9:
  dependencies:
    queue-microtask "^1.2.2"

-rxjs@^7.5.1:
+rxjs@^7.5.2:
  version "7.5.2"
  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.2.tgz#11e4a3a1dfad85dbf7fb6e33cbba17668497490b"
  integrity sha512-PwDt186XaL3QN5qXj/H9DGyHhP3/RYYgZZwqBv9Tv8rsAaiwFH1IsJJlcgD37J7UW5a6O67qX0KWKS3/pu0m4w==
@@ -6280,22 +6280,22 @@ stylelint-prettier@~2.0.0:
  dependencies:
    prettier-linter-helpers "^1.0.0"

-stylelint@~14.2.0:
-  version "14.2.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.2.0.tgz#da4f0f4580e66911c38c376ed82447b78e32b0fb"
-  integrity sha512-i0DrmDXFNpDsWiwx6SPRs4/pyw4kvZgqpDGvsTslQMY7hpUl6r33aQvNSn6cnTg2wtZ9rreFElI7XAKpOWi1vQ==
+stylelint@~14.3.0:
+  version "14.3.0"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.3.0.tgz#26b62730da7b3dc320021fc469d80048d7b77ebe"
+  integrity sha512-PZXSwtJe4f4qBPWBwAbHL0M0Qjrv8iHN+cLpUNsffaVMS3YzpDDRI73+2lsqLAYfQEzxRwpll6BDKImREbpHWA==
  dependencies:
    balanced-match "^2.0.0"
    colord "^2.9.2"
    cosmiconfig "^7.0.1"
    debug "^4.3.3"
    execall "^2.0.0"
-    fast-glob "^3.2.7"
+    fast-glob "^3.2.11"
    fastest-levenshtein "^1.0.12"
    file-entry-cache "^6.0.1"
    get-stdin "^8.0.0"
    global-modules "^2.0.0"
-    globby "^11.0.4"
+    globby "^11.1.0"
    globjoin "^0.1.4"
    html-tags "^3.1.0"
    ignore "^5.2.0"
@@ -6309,21 +6309,22 @@ stylelint@~14.2.0:
    normalize-path "^3.0.0"
    normalize-selector "^0.2.0"
    picocolors "^1.0.0"
-    postcss "^8.3.11"
+    postcss "^8.4.5"
    postcss-media-query-parser "^0.2.3"
    postcss-resolve-nested-selector "^0.1.1"
    postcss-safe-parser "^6.0.0"
-    postcss-selector-parser "^6.0.7"
-    postcss-value-parser "^4.1.0"
+    postcss-selector-parser "^6.0.9"
+    postcss-value-parser "^4.2.0"
    resolve-from "^5.0.0"
    specificity "^0.4.1"
    string-width "^4.2.3"
    strip-ansi "^6.0.1"
    style-search "^0.1.0"
+    supports-hyperlinks "^2.2.0"
    svg-tags "^1.0.0"
-    table "^6.7.5"
+    table "^6.8.0"
    v8-compile-cache "^2.3.0"
-    write-file-atomic "^3.0.3"
+    write-file-atomic "^4.0.0"

 supports-color@^5.3.0:
  version "5.5.0"
@@ -6332,7 +6333,7 @@ supports-color@^5.3.0:
  dependencies:
    has-flag "^3.0.0"

-supports-color@^7.1.0:
+supports-color@^7.0.0, supports-color@^7.1.0:
  version "7.2.0"
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
@@ -6344,6 +6345,14 @@ supports-color@^9.2.1:
  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-9.2.1.tgz#599dc9d45acf74c6176e0d880bab1d7d718fe891"
  integrity sha512-Obv7ycoCTG51N7y175StI9BlAXrmgZrFhZOb0/PyjHBher/NmsdBgbbQ1Inhq+gIhz6+7Gb+jWF2Vqi7Mf1xnQ==

+supports-hyperlinks@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz#4f77b42488765891774b70c79babd87f9bd594bb"
+  integrity sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==
+  dependencies:
+    has-flag "^4.0.0"
+    supports-color "^7.0.0"
+
 supports-preserve-symlinks-flag@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
@@ -6385,7 +6394,7 @@ synckit@^0.4.1:
    tslib "^2.3.1"
    uuid "^8.3.2"

-table@^6.7.5:
+table@^6.8.0:
  version "6.8.0"
  resolved "https://registry.yarnpkg.com/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca"
  integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==
@@ -6536,12 +6545,10 @@ type-fest@^0.8.1:
  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
  integrity sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==

-typedarray-to-buffer@^3.1.5:
-  version "3.1.5"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
-  dependencies:
-    is-typedarray "^1.0.0"
+typedarray-to-buffer@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-4.0.0.tgz#cdd2933c61dd3f5f02eda5d012d441f95bfeb50a"
+  integrity sha512-6dOYeZfS3O9RtRD1caom0sMxgK59b27+IwoNy8RDPsmslSGOyU+mpTamlaIW7aNKi90ZQZ9DFaZL3YRoiSCULQ==

 typescript@^4.5.5:
  version "4.5.5"
@@ -6969,15 +6976,15 @@ wrappy@1:
  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=

-write-file-atomic@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
-  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+write-file-atomic@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.0.tgz#0eff5dc687d3e22535ca3fca8558124645a4b053"
+  integrity sha512-JhcWoKffJNF7ivO9yflBhc7tn3wKnokMUfWpBriM9yCXj4ePQnRPcWglBkkg1AHC8nsW/EfxwwhqsLtOy59djA==
  dependencies:
    imurmurhash "^0.1.4"
    is-typedarray "^1.0.0"
    signal-exit "^3.0.2"
-    typedarray-to-buffer "^3.1.5"
+    typedarray-to-buffer "^4.0.0"

 ws@^7.3.1:
  version "7.5.6"