pass mdx images through next/image for full optimization benefits

components/embeds/Code.tsx

@@ -0,0 +1,28 @@
+import dynamic from "next/dynamic";
+
+const CustomCode = (props: any) => {
+  if (props.className?.split(" ").includes("hljs")) {
+    const CopyButton = dynamic(() => import("../clipboard/CopyButton"));
+
+    // full multi-line code blocks with highlight.js and copy-to-clipboard button
+    return (
+      <div>
+        <CopyButton source={props.children} />
+        <code {...props}>{props.children}</code>
+        <style jsx>{`
+          div {
+            position: relative;
+            max-width: 100%;
+            overflow-x: scroll;
+            margin: 1em 0;
+          }
+        `}</style>
+      </div>
+    );
+  } else {
+    // inline code in paragraphs, headings, etc. (not highlighted)
+    return <code {...props}>{props.children}</code>;
+  }
+};
+
+export default CustomCode;

components/embeds/Image.tsx

@@ -0,0 +1,25 @@
+import Image from "next/image";
+
+import type { ImageProps } from "next/image";
+
+// TODO: infer ratio when given zero/one dimensions
+// TODO: fold figure/figcaption tags into this component
+
+const CustomImg = (props: ImageProps) => {
+  return (
+    // the required height and width are part of the props, so they get automatically passed here with {...props}
+    <div className={props.className}>
+      <Image
+        src={props.src}
+        layout="intrinsic"
+        width={props.width}
+        height={props.height}
+        alt={props.alt}
+        quality={85}
+        loading="lazy"
+      />
+    </div>
+  );
+};
+
+export default CustomImg;

components/embeds/Link.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link";
+
+import type { LinkProps } from "next/link";
+
+type CustomLinkProps = LinkProps & {
+  target?: string;
+  rel?: string;
+  className?: string;
+  children?: unknown;
+};
+const CustomLink = ({ href, target, rel, className, children }: CustomLinkProps) => (
+  <Link href={href} passHref={true}>
+    <a className={className} target={target} rel={rel}>
+      {children}
+    </a>
+  </Link>
+);
+
+export default CustomLink;