new <Figure> component for image captions

components/code-block/Code.module.css

@@ -0,0 +1,98 @@
+.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/code-block/Code.tsx

@@ -0,0 +1,28 @@
+import CopyButton from "./CopyButton";
+import type { ReactNode } from "react";
+
+import styles from "./Code.module.css";
+
+export 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/code-block/CopyButton.module.css

@@ -0,0 +1,19 @@
+.copy {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.65em;
+  line-height: 1;
+  color: var(--medium-dark);
+  background-color: var(--background-inner);
+  border: 1px solid var(--kinda-light);
+  cursor: pointer;
+}
+
+.copy:hover {
+  color: var(--link);
+}
+
+.success {
+  color: var(--success) !important;
+}

components/code-block/CopyButton.tsx

@@ -0,0 +1,61 @@
+import { useState, useEffect } from "react";
+import classNames from "classnames/bind";
+import copy from "copy-to-clipboard";
+import innerText from "react-innertext";
+import { ClipboardOcticon, CheckOcticon } from "../icons";
+import type { ReactNode } from "react";
+
+import styles from "./CopyButton.module.css";
+const cx = classNames.bind(styles);
+
+type Props = {
+  source: ReactNode;
+  timeout?: number;
+};
+
+const CopyButton = ({ source, timeout = 2000 }: Props) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (e) => {
+    // prevent unintentional double-clicks by unfocusing button
+    e.target.blur();
+
+    // send plaintext to the clipboard
+    const didCopy = copy(innerText(source));
+
+    // indicate success
+    setCopied(didCopy);
+  };
+
+  useEffect(() => {
+    // reset to original icon after given ms (defaults to 2 seconds)
+    if (copied) {
+      const reset = setTimeout(() => {
+        setCopied(false);
+      }, timeout);
+
+      return () => clearTimeout(reset);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [timeout, copied]);
+
+  return (
+    <button
+      className={cx({ copy: true, success: !!copied })}
+      title="Copy to clipboard"
+      aria-label="Copy to clipboard"
+      onClick={handleCopy}
+      disabled={!!copied}
+    >
+      {copied ? (
+        <CheckOcticon className="icon" fill="currentColor" />
+      ) : (
+        <ClipboardOcticon className="icon" fill="currentColor" />
+      )}
+    </button>
+  );
+};
+
+export default CopyButton;