passing a custom link component to mdx was unnecessary

components/media/Code.tsx

@@ -0,0 +1,127 @@
+import dynamic from "next/dynamic";
+import type { ReactNode } from "react";
+
+type CustomCodeProps = {
+  className?: string;
+  children: ReactNode;
+};
+
+const CustomCode = (props: CustomCodeProps) => {
+  if (props.className?.split(" ").includes("code-highlight")) {
+    const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
+
+    // full multi-line code blocks with prism highlighting and copy-to-clipboard button
+    return (
+      <>
+        <div className="code-block">
+          <CopyButton source={props.children} />
+          <code {...props}>{props.children}</code>
+        </div>
+
+        <style jsx global>{`
+          .code-block {
+            position: relative;
+            width: 100%;
+            overflow-x: scroll;
+            margin: 1em auto;
+          }
+
+          .code-highlight {
+            display: block;
+            overflow-x: auto;
+            padding: 1em;
+            tab-size: 2;
+            color: var(--code-text);
+            background-color: var(--code-background);
+          }
+
+          /* leave room for clipboard button to the right of the first line */
+          .code-highlight > .code-line:first-of-type {
+            margin-right: 3em;
+          }
+
+          .code-highlight > .code-line.line-number::before {
+            display: inline-block;
+            width: 1.5em;
+            margin-right: 1.5em;
+            text-align: right;
+            color: var(--code-comment);
+            content: attr(line); /* added to spans by prism */
+          }
+
+          .code-highlight .token.comment,
+          .code-highlight .token.prolog,
+          .code-highlight .token.cdata {
+            color: var(--code-comment);
+          }
+
+          .code-highlight .token.delimiter,
+          .code-highlight .token.boolean,
+          .code-highlight .token.keyword,
+          .code-highlight .token.selector,
+          .code-highlight .token.important,
+          .code-highlight .token.doctype,
+          .code-highlight .token.atrule,
+          .code-highlight .token.url {
+            color: var(--code-keyword);
+          }
+
+          .code-highlight .token.tag,
+          .code-highlight .token.builtin,
+          .code-highlight .token.regex {
+            color: var(--code-namespace);
+          }
+
+          .code-highlight .token.property,
+          .code-highlight .token.constant,
+          .code-highlight .token.variable,
+          .code-highlight .token.attr-value,
+          .code-highlight .token.class-name,
+          .code-highlight .token.string,
+          .code-highlight .token.char {
+            color: var(--code-variable);
+          }
+
+          .code-highlight .token.literal-property,
+          .code-highlight .token.attr-name {
+            color: var(--code-attribute);
+          }
+
+          .code-highlight .token.function {
+            color: var(--code-literal);
+          }
+
+          .code-highlight .token.tag .punctuation,
+          .code-highlight .token.attr-value .punctuation {
+            color: var(--code-punctuation);
+          }
+
+          .code-highlight .token.inserted {
+            background-color: var(--code-addition);
+          }
+
+          .code-highlight .token.deleted {
+            background-color: var(--code-deletion);
+          }
+
+          .code-highlight .token.url {
+            text-decoration: underline;
+          }
+
+          .code-highlight .token.bold {
+            font-weight: bold;
+          }
+
+          .code-highlight .token.italic {
+            font-style: italic;
+          }
+        `}</style>
+      </>
+    );
+  } else {
+    // inline code in paragraphs, headings, etc. (not highlighted)
+    return <code {...props}>{props.children}</code>;
+  }
+};
+
+export default CustomCode;

components/media/Gist.tsx

@@ -0,0 +1,3 @@
+import Gist from "react-gist";
+
+export default Gist;

components/media/Image.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import type { ImageProps } from "next/image";
+import type { CSSProperties } from "react";
+
+// TODO: infer ratio when given zero/one dimensions
+// TODO: fold figure/figcaption tags into this component
+
+type CustomImageProps = ImageProps & {
+  style?: CSSProperties;
+};
+
+const CustomImage = (props: CustomImageProps) => {
+  return (
+    <div className="image_wrapper" style={props.style}>
+      <Image
+        src={props.src}
+        layout="intrinsic"
+        width={props.width}
+        height={props.height}
+        alt={props.alt}
+        quality={65}
+        loading={props.priority ? "eager" : "lazy"}
+        priority={!!props.priority}
+      />
+    </div>
+  );
+};
+
+export default CustomImage;

components/media/Tweet.tsx

@@ -0,0 +1,13 @@
+import TweetEmbed from "react-tweet-embed";
+
+const Tweet = (props: { id: string }) => (
+  <TweetEmbed
+    id={props.id}
+    options={{
+      dnt: true,
+      align: "center",
+    }}
+  />
+);
+
+export default Tweet;

components/media/Video.tsx

@@ -0,0 +1,10 @@
+import ReactPlayer from "react-player/lazy";
+import type { ReactPlayerProps } from "react-player";
+
+const Video = (props: ReactPlayerProps) => (
+  <div style={{ position: "relative", paddingTop: "56.25%" }}>
+    <ReactPlayer width="100%" height="100%" style={{ position: "absolute", top: 0, left: 0 }} {...props} />
+  </div>
+);
+
+export default Video;