custom <Image /> wrapper now supports static imports too

.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"
   ]
 }

.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"
 }

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;
 };

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 */

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"
         >

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;
   }

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}>
+      <Selfie className={styles.selfie} />
-        <Name />
+      <Menu className={styles.menu} />
-      </div>
-
-      <div className={styles.menu}>
-        <Menu />
-      </div>
     </nav>
   </header>
 );

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 {
+  .heading {
-    scroll-margin-top: 5em;
+    scroll-margin-top: 6.5rem;
-  }
-
-  .h3,
-  .h4 {
-    scroll-margin-top: 6em;
   }
 }

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
+      {/* @ts-ignore */}
-        src={(src as string).replace(/^\/public/g, "")}
+      <NextImage {...imageProps} {...rest} />
-        layout="intrinsic"
-        width={width}
-        height={height}
-        alt={alt || ""}
-        quality={quality || 65}
-        loading={priority ? "eager" : "lazy"}
-        priority={!!priority}
-        {...rest}
-      />
     </div>
   );
 };

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;
   }
 }

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 = () => (
+const Menu = ({ className }: Props) => (
-  <ul className={styles.menu}>
+  <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>

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);
 }

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);

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.
 };

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"

pages/_app.tsx

@@ -80,8 +80,8 @@ const App = ({ Component, pageProps }: AppProps) => {
           ],
         }}
         twitter={{
-          handle: `@${config.authorSocial.twitter}`,
+          handle: `@${config.authorSocial?.twitter}`,
-          site: `@${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://github.com/${config.authorSocial?.github}`,
-          `https://keybase.io/${config.authorSocial.keybase}`,
+          `https://keybase.io/${config.authorSocial?.keybase}`,
-          `https://twitter.com/${config.authorSocial.twitter}`,
+          `https://twitter.com/${config.authorSocial?.twitter}`,
-          `https://medium.com/@${config.authorSocial.medium}`,
+          `https://medium.com/@${config.authorSocial?.medium}`,
-          `https://www.linkedin.com/in/${config.authorSocial.linkedin}/`,
+          `https://www.linkedin.com/in/${config.authorSocial?.linkedin}/`,
-          `https://www.facebook.com/${config.authorSocial.facebook}`,
+          `https://www.facebook.com/${config.authorSocial?.facebook}`,
-          `https://www.instagram.com/${config.authorSocial.instagram}/`,
+          `https://www.instagram.com/${config.authorSocial?.instagram}/`,
         ]}
       />
 

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>

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>
+      <Figure src={img_wayback} alt="Timeline of this website's past." priority>
-        <a
+        ...the{" "}
-          className="no-underline"
+        <a href="https://web.archive.org/web/20010501000000*/jakejarvis.com" target="_blank" rel="noopener noreferrer">
-          href="https://web.archive.org/web/20010501000000*/jakejarvis.com"
+          Cringey Chronicles&trade;
-          target="_blank"
+        </a>{" "}
-          rel="noopener noreferrer"
+        of this website's past.
-        >
+      </Figure>
-          <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>
 
       <HorizontalRule />
 
@@ -78,131 +64,79 @@ const Previously = () => (
         </a>
       </p>
 
-      <figure>
+      <IFrame
-        <IFrame
+        src="https://jakejarvis.github.io/my-first-website/"
-          src="https://jakejarvis.github.io/my-first-website/"
+        title="My Terrible, Horrible, No Good, Very Bad First Website"
-          title="My Terrible, Horrible, No Good, Very Bad First Website"
+        height={500}
-          height={500}
+        allowScripts
-          allowScripts
+      />
-        />
+      <p className="iframe_caption">
-        <figcaption>
+        November 2001 (
-          November 2001 (
+        <a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
-          <a href="https://github.com/jakejarvis/my-first-website" target="_blank" rel="noopener noreferrer">
+          archived source
-            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" />
         </a>
-        <figcaption>
+        )
-          September 2012 (
+      </p>
-          <a href="https://github.com/jakejarvis/jarv.is/tree/v1" target="_blank" rel="noopener noreferrer">
-            archived source
-          </a>
-          )
-        </figcaption>
-      </figure>
 
       <HorizontalRule />
 
-      <figure>
+      <Figure src={img_2002_02}>February 2002</Figure>
-        <a
+
-          className="no-underline"
+      <HorizontalRule />
-          href="https://github.com/jakejarvis/jarv.is/tree/v2"
+
-          target="_blank"
+      <Figure src={img_2002_10}>October 2002</Figure>
-          rel="noopener noreferrer"
+
-        >
+      <HorizontalRule />
-          <Image src={img_2018_04} placeholder="blur" alt="April 2018" />
+
+      <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 (
+      </Figure>
-          <a href="https://github.com/jakejarvis/jarv.is/tree/v2" target="_blank" rel="noopener noreferrer">
+
-            archived source
+      <HorizontalRule />
-          </a>
+
-          )
+      <Figure src={img_2018_04} alt="April 2018">
-        </figcaption>
+        April 2018 (
-      </figure>
+        <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 {
+      /* components */
-        margin: 1em auto;
+      figcaption,
-        text-align: center;
+      .iframe_caption {
-      }
-      figure img {
-        margin-bottom: 0;
-        border-radius: var(--rounded-edge-radius);
-      }
-      figcaption {
         margin-top: 0.2em;
         font-size: 0.9em;
         line-height: 1.5;
         color: var(--medium);
+        text-align: center;
       }
       hr {
         margin: 1em auto !important;

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">

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>{`
+    <style jsx>{`
-      img {
-        border-radius: var(--rounded-edge-radius);
-      }
       ul {
         margin-left: 1.5em;
         padding-left: 0;

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":
+"@sentry/core@6.17.0":
-  version "6.16.1"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.16.1.tgz#d9f7a75f641acaddf21b6aafa7a32e142f68f17c"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-6.17.0.tgz#687799404c461240a847e530ee54780161c4450e"
-  integrity sha512-UFI0264CPUc5cR1zJH+S2UPOANpm6dLJOnsvnIGTjsrwzR0h8Hdl6rC2R/GPq+WNbnipo9hkiIwDlqbqvIU5vw==
+  integrity sha512-9ozq3mIaOdXW56Vwh0WJlB2lzhmjkEADPvvr65Ai7kYNpvln3HTmwqPGccsq3t5TGXuggRg/QuHZbfShGBb1gA==
   dependencies:
-    "@sentry/hub" "6.16.1"
+    "@sentry/hub" "6.17.0"
-    "@sentry/minimal" "6.16.1"
+    "@sentry/minimal" "6.17.0"
-    "@sentry/types" "6.16.1"
+    "@sentry/types" "6.17.0"
-    "@sentry/utils" "6.16.1"
+    "@sentry/utils" "6.17.0"
     tslib "^1.9.3"
 
-"@sentry/hub@6.16.1":
+"@sentry/hub@6.17.0":
-  version "6.16.1"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.16.1.tgz#526e19db51f4412da8634734044c605b936a7b80"
+  resolved "https://registry.yarnpkg.com/@sentry/hub/-/hub-6.17.0.tgz#5e7eda357dbd922e3598974c00924b3cb4b539ba"
-  integrity sha512-4PGtg6AfpqMkreTpL7ymDeQ/U1uXv03bKUuFdtsSTn/FRf9TLS4JB0KuTZCxfp1IRgAA+iFg6B784dDkT8R9eg==
+  integrity sha512-SAeijR3Vz9r2I5pXjOmUCUgCAofcF/7sj0ig8nGMj7TgZBiVXEpKAkDaxpRHIppa1vR+DrtEbVzcqsxFfAIn4Q==
   dependencies:
-    "@sentry/types" "6.16.1"
+    "@sentry/types" "6.17.0"
-    "@sentry/utils" "6.16.1"
+    "@sentry/utils" "6.17.0"
     tslib "^1.9.3"
 
-"@sentry/minimal@6.16.1":
+"@sentry/minimal@6.17.0":
-  version "6.16.1"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.16.1.tgz#6a9506a92623d2ff1fc17d60989688323326772e"
+  resolved "https://registry.yarnpkg.com/@sentry/minimal/-/minimal-6.17.0.tgz#872984ca93f9cb5e4590edf26aba4c2def899f34"
-  integrity sha512-dq+mI1EQIvUM+zJtGCVgH3/B3Sbx4hKlGf2Usovm9KoqWYA+QpfVBholYDe/H2RXgO7LFEefDLvOdHDkqeJoyA==
+  integrity sha512-W+zibEOFX/XnsfZqOAMs4N2uwRKVsqKQNlkNTSu1PBNrKkjRiEZQqvGh85B5WW+zbcJWjPrfzuJ3o46s+zVqGQ==
   dependencies:
-    "@sentry/hub" "6.16.1"
+    "@sentry/hub" "6.17.0"
-    "@sentry/types" "6.16.1"
+    "@sentry/types" "6.17.0"
     tslib "^1.9.3"
 
-"@sentry/node@^6.16.1":
+"@sentry/node@^6.17.0":
-  version "6.16.1"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-6.16.1.tgz#d92916da3e95d23e1ada274e97d6bf369e74ac51"
+  resolved "https://registry.yarnpkg.com/@sentry/node/-/node-6.17.0.tgz#356e2ec748070c059d10a50d90bd16854264f0af"
-  integrity sha512-SeDDoug2kUxeF1D7JGPa3h5EXxKtmA01mITBPYx5xbJ0sMksnv5I5bC1SJ8arRRzq6+W1C4IEeDBQtrVCk6ixA==
+  integrity sha512-O20edpI4JYICQWbCvYGTY+jTFFb/6m0IlfLRcoCNND+KsxDOVECeM7eKloAAer9/s0i8/BqyKEGTHUIgyS3vJQ==
   dependencies:
-    "@sentry/core" "6.16.1"
+    "@sentry/core" "6.17.0"
-    "@sentry/hub" "6.16.1"
+    "@sentry/hub" "6.17.0"
-    "@sentry/tracing" "6.16.1"
+    "@sentry/tracing" "6.17.0"
-    "@sentry/types" "6.16.1"
+    "@sentry/types" "6.17.0"
-    "@sentry/utils" "6.16.1"
+    "@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":
+"@sentry/tracing@6.17.0":
-  version "6.16.1"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.16.1.tgz#32fba3e07748e9a955055afd559a65996acb7d71"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-6.17.0.tgz#ff61068a308f9fab9f78a01705c6eb7eeaa04be7"
-  integrity sha512-MPSbqXX59P+OEeST+U2V/8Hu/8QjpTUxTNeNyTHWIbbchdcMMjDbXTS3etCgajZR6Ro+DHElOz5cdSxH6IBGlA==
+  integrity sha512-cXcL0EbSwXXai/68VgC3vr15V/XUJ+pbZUmnzIWabiswvrqLD3ZcfjATT3DnX6pHEJj/mqaVDmNzRqMlPe9Aog==
   dependencies:
-    "@sentry/hub" "6.16.1"
+    "@sentry/hub" "6.17.0"
-    "@sentry/minimal" "6.16.1"
+    "@sentry/minimal" "6.17.0"
-    "@sentry/types" "6.16.1"
+    "@sentry/types" "6.17.0"
-    "@sentry/utils" "6.16.1"
+    "@sentry/utils" "6.17.0"
     tslib "^1.9.3"
 
-"@sentry/types@6.16.1":
+"@sentry/types@6.17.0":
-  version "6.16.1"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.16.1.tgz#4917607115b30315757c2cf84f80bac5100b8ac0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-6.17.0.tgz#ea4afbdba53d6d720f630cc9d3d8113831f43655"
-  integrity sha512-Wh354g30UsJ5kYJbercektGX4ZMc9MHU++1NjeN2bTMnbofEcpUDWIiKeulZEY65IC1iU+1zRQQgtYO+/hgCUQ==
+  integrity sha512-JFlXrm0A5S7RG7Xbxh+1XfiNkErByzYmDbg8XR0OSeU/F0DfDZ1lts3qEC7Lv+MjWxWhHg0ceD9hoIi0LzFmsg==
 
-"@sentry/utils@6.16.1":
+"@sentry/utils@6.17.0":
-  version "6.16.1"
+  version "6.17.0"
-  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.16.1.tgz#1b9e14c2831b6e8b816f7021b9876133bf2be008"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-6.17.0.tgz#f025728f1a1fbd47c046094f4377e7b4b652ad47"
-  integrity sha512-7ngq/i4R8JZitJo9Sl8PDnjSbDehOxgr1vsoMmerIsyRZ651C/8B+jVkMhaAPgSdyJ0AlE3O7DKKTP1FXFw9qw==
+  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"
+  version "1.16.7"
-  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.6.tgz#377054f72f671b36dbe78c517ce2b279d83ecc40"
+  resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.16.7.tgz#6048a51abe24b3675e8acccfa13ea472e4476e5e"
-  integrity sha512-dTvnamRITNqNkqhlBd235kZl3KfVJQQoT5jkXeiWSBK7i4/TLKBNLV0S1wOt8gy4E2TY722KLtdmv2xc6+Wevg==
+  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:
+lint-staged@^12.3.1:
-  version "12.2.2"
+  version "12.3.1"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.2.2.tgz#e03d93b41092316e0f38b37c9630da807aae3cca"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-12.3.1.tgz#d475b0c0d0a12d91dde58a429ac6268dea485f06"
-  integrity sha512-bcHEoM1M/f+K1BYdHcEuIn8K+zMOSJR3mkny6PAuQiTgcSUcRbUWaUD6porAYypxF4k1vYZZ2HutZt1p94Z1jQ==
+  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:
+listr2@^4.0.1:
-  version "3.14.0"
+  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.14.0.tgz#23101cc62e1375fd5836b248276d1d2b51fdbe9e"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-4.0.1.tgz#e050c1fd390276e191f582603d6e3531cd6fd2b3"
-  integrity sha512-TyWI8G99GX9GjE54cJ+RrNMcIFBfwMPxc3XTFiAYGN4s10hWROGtOg7+O6u6LE3mNkyld7RSLE6nrKBvTfcs3g==
+  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:
+stylelint@~14.3.0:
-  version "14.2.0"
+  version "14.3.0"
-  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.2.0.tgz#da4f0f4580e66911c38c376ed82447b78e32b0fb"
+  resolved "https://registry.yarnpkg.com/stylelint/-/stylelint-14.3.0.tgz#26b62730da7b3dc320021fc469d80048d7b77ebe"
-  integrity sha512-i0DrmDXFNpDsWiwx6SPRs4/pyw4kvZgqpDGvsTslQMY7hpUl6r33aQvNSn6cnTg2wtZ9rreFElI7XAKpOWi1vQ==
+  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-selector-parser "^6.0.9"
-    postcss-value-parser "^4.1.0"
+    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:
+typedarray-to-buffer@^4.0.0:
-  version "3.1.5"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080"
+  resolved "https://registry.yarnpkg.com/typedarray-to-buffer/-/typedarray-to-buffer-4.0.0.tgz#cdd2933c61dd3f5f02eda5d012d441f95bfeb50a"
-  integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==
+  integrity sha512-6dOYeZfS3O9RtRD1caom0sMxgK59b27+IwoNy8RDPsmslSGOyU+mpTamlaIW7aNKi90ZQZ9DFaZL3YRoiSCULQ==
-  dependencies:
-    is-typedarray "^1.0.0"
 
 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:
+write-file-atomic@^4.0.0:
-  version "3.0.3"
+  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8"
+  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-4.0.0.tgz#0eff5dc687d3e22535ca3fca8558124645a4b053"
-  integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==
+  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"