new <Figure> component for image captions

components/media/Code.module.css

@@ -1,98 +0,0 @@
-.code_block {
-  position: relative;
-  width: 100%;
-  overflow-x: scroll;
-  margin: 1em auto;
-}
-
-/* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */
-
-.code_block :global(.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_block :global(.code-highlight) > :global(.code-line:first-of-type) {
-  margin-right: 3em;
-}
-
-.code_block :global(.code-highlight) > :global(.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_block :global(.code-highlight) :global(.token.comment),
-.code_block :global(.code-highlight) :global(.token.prolog),
-.code_block :global(.code-highlight) :global(.token.cdata) {
-  color: var(--code-comment);
-}
-
-.code_block :global(.code-highlight) :global(.token.delimiter),
-.code_block :global(.code-highlight) :global(.token.boolean),
-.code_block :global(.code-highlight) :global(.token.keyword),
-.code_block :global(.code-highlight) :global(.token.selector),
-.code_block :global(.code-highlight) :global(.token.important),
-.code_block :global(.code-highlight) :global(.token.doctype),
-.code_block :global(.code-highlight) :global(.token.atrule),
-.code_block :global(.code-highlight) :global(.token.url) {
-  color: var(--code-keyword);
-}
-
-.code_block :global(.code-highlight) :global(.token.tag),
-.code_block :global(.code-highlight) :global(.token.builtin),
-.code_block :global(.code-highlight) :global(.token.regex) {
-  color: var(--code-namespace);
-}
-
-.code_block :global(.code-highlight) :global(.token.property),
-.code_block :global(.code-highlight) :global(.token.constant),
-.code_block :global(.code-highlight) :global(.token.variable),
-.code_block :global(.code-highlight) :global(.token.attr-value),
-.code_block :global(.code-highlight) :global(.token.class-name),
-.code_block :global(.code-highlight) :global(.token.string),
-.code_block :global(.code-highlight) :global(.token.char) {
-  color: var(--code-variable);
-}
-
-.code_block :global(.code-highlight) :global(.token.literal-property),
-.code_block :global(.code-highlight) :global(.token.attr-name) {
-  color: var(--code-attribute);
-}
-
-.code_block :global(.code-highlight) :global(.token.function) {
-  color: var(--code-literal);
-}
-
-.code_block :global(.code-highlight) :global(.token.tag .punctuation),
-.code_block :global(.code-highlight) :global(.token.attr-value .punctuation) {
-  color: var(--code-punctuation);
-}
-
-.code_block :global(.code-highlight) :global(.token.inserted) {
-  background-color: var(--code-addition);
-}
-
-.code_block :global(.code-highlight) :global(.token.deleted) {
-  background-color: var(--code-deletion);
-}
-
-.code_block :global(.code-highlight) :global(.token.url) {
-  text-decoration: underline;
-}
-
-.code_block :global(.code-highlight) :global(.token.bold) {
-  font-weight: bold;
-}
-
-.code_block :global(.code-highlight) :global(.token.italic) {
-  font-style: italic;
-}

components/media/Code.tsx

@@ -1,28 +0,0 @@
-import CopyButton from "../clipboard/CopyButton";
-import type { ReactNode } from "react";
-
-import styles from "./Code.module.css";
-
-type CustomCodeProps = {
-  className?: string;
-  children: ReactNode;
-};
-
-const CustomCode = (props: CustomCodeProps) => {
-  if (props.className?.split(" ").includes("code-highlight")) {
-    // full multi-line code blocks with prism highlighting and copy-to-clipboard button
-    return (
-      <>
-        <div className={styles.code_block}>
-          <CopyButton source={props.children} />
-          <code {...props}>{props.children}</code>
-        </div>
-      </>
-    );
-  } else {
-    // inline code in paragraphs, headings, etc. (not highlighted)
-    return <code {...props}>{props.children}</code>;
-  }
-};
-
-export default CustomCode;

components/media/Figure.tsx

@@ -0,0 +1,20 @@
+import Image from "./Image";
+import innerText from "react-innertext";
+import type { ReactNode } from "react";
+import type { CustomImageProps } from "./Image";
+
+export type CustomFigureProps = Omit<CustomImageProps, "alt"> & {
+  children: ReactNode; // caption (can be in markdown, yay!!!)
+  alt?: string; // becomes optional -- pulled from plaintext-ified caption if missing
+};
+
+const CustomFigure = ({ children, alt, ...imageProps }: CustomFigureProps) => {
+  return (
+    <figure>
+      <Image alt={alt || innerText(children)} {...imageProps} />
+      <figcaption>{children}</figcaption>
+    </figure>
+  );
+};
+
+export default CustomFigure;

components/media/Image.tsx

@@ -2,10 +2,7 @@ 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 & {
+export type CustomImageProps = ImageProps & {
   style?: CSSProperties;
 };