separate out inline code and code block components

components/Code/Code.tsx

@@ -0,0 +1,13 @@
+import { styled } from "../../lib/styles/stitches.config";
+
+const Code = styled("code", {
+  fontSize: "0.925em",
+  backgroundColor: "$codeBackground",
+  border: "1px solid $kindaLight",
+  borderRadius: "$rounded",
+
+  // light-dark theme switch fading
+  transition: "background 0.25s ease, border 0.25s ease",
+});
+
+export default Code;

components/Code/index.ts

@@ -0,0 +1,2 @@
+export * from "./Code";
+export { default } from "./Code";

components/CodeBlock/CodeBlock.tsx

@@ -1,39 +1,41 @@
+import Code from "../Code";
 import CopyButton from "../CopyButton";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 
-const Code = styled("code", {
-  fontSize: "0.925em",
+const Block = styled("div", {
+  position: "relative",
+  width: "100%",
+  margin: "1em auto",
   color: "$codeText",
-  pageBreakInside: "avoid",
-  backgroundColor: "$codeBackground",
-  border: "1px solid $kindaLight",
-  borderRadius: "$rounded",
 
-  // light-dark theme switch fading
-  transition: "background 0.25s ease, border 0.25s ease",
+  [`& ${Code}`]: {
+    display: "block",
+    overflowX: "auto",
+    padding: "1em",
+    tabSize: 2,
+
+    // optional line numbers added at time of prism compilation
+    ".line-number::before": {
+      display: "inline-block",
+      width: "1.5em",
+      marginRight: "1.5em",
+      textAlign: "right",
+      color: "$codeComment",
+      content: "attr(line)", // added as spans by prism
+      userSelect: "none",
+    },
+
+    // leave room for clipboard button to the right of the first line
+    ".code-line:first-of-type": {
+      marginRight: "3em",
+    },
+  },
 
   variants: {
-    // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
-    showLineNumbers: {
-      true: {
-        ".line-number::before": {
-          display: "inline-block",
-          width: "1.5em",
-          marginRight: "1.5em",
-          textAlign: "right",
-          color: "$codeComment",
-          content: "attr(line)", // added to spans by prism
-          userSelect: "none",
-        },
-        // leave room for clipboard button to the right of the first line
-        ".code-line:first-of-type": {
-          marginRight: "3em",
-        },
-      },
-    },
     highlight: {
       true: {
+        // the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file
         ".token": {
           "&.comment, &.prolog, &.cdata": {
             color: "$codeComment",
@@ -69,27 +71,6 @@ const Code = styled("code", {
       },
     },
   },
-
-  defaultVariants: {
-    showLineNumbers: true,
-  },
-});
-
-const InlineCode = styled(Code, {
-  padding: "0.2em 0.3em",
-});
-
-const Block = styled("div", {
-  position: "relative",
-  width: "100%",
-  margin: "1em auto",
-
-  [`& ${Code}`]: {
-    display: "block",
-    overflowX: "auto",
-    padding: "1em",
-    tabSize: 2,
-  },
 });
 
 const CornerCopyButton = styled(CopyButton, {
@@ -107,32 +88,16 @@ const CornerCopyButton = styled(CopyButton, {
 });
 
 export type CodeBlockProps = ComponentProps<typeof Code> & {
-  forceBlock?: boolean;
+  highlight?: boolean;
 };
 
-const CodeBlock = ({ forceBlock, className, children, ...rest }: CodeBlockProps) => {
-  // detect if this input has already been touched by prism.js via rehype
-  const prismEnabled = className?.split(" ").includes("code-highlight");
-
-  if (prismEnabled || forceBlock) {
-    // full multi-line code blocks with copy-to-clipboard button
-    // automatic if highlighted by prism, otherwise can be forced (rather than inlined) with `forceBlock={true}`
-    return (
-      <Block>
-        <CornerCopyButton source={children} />
-        <Code highlight={prismEnabled} className={className?.replace("code-highlight", "").trim()} {...rest}>
-          {children}
-        </Code>
-      </Block>
-    );
-  } else {
-    // inline code in paragraphs, headings, etc. (not highlighted)
-    return (
-      <InlineCode className={className} {...rest}>
-        {children}
-      </InlineCode>
-    );
-  }
-};
+const CodeBlock = ({ highlight, className, children, ...rest }: CodeBlockProps) => (
+  <Block highlight={highlight}>
+    <CornerCopyButton source={children} />
+    <Code className={className?.replace("code-highlight", "").trim()} {...rest}>
+      {children}
+    </Code>
+  </Block>
+);
 
 export default CodeBlock;

components/CodeHybrid/CodeHybrid.tsx

@@ -0,0 +1,39 @@
+import CodeBlock from "../CodeBlock";
+import CodeInline from "../CodeInline";
+import type { PropsWithChildren } from "react";
+
+export type CodeHybridProps = PropsWithChildren<{
+  forceBlock?: boolean;
+  className?: string;
+}>;
+
+// a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax
+// highlighting & a clipboard button)
+const CodeHybrid = ({ forceBlock, className, children, ...rest }: CodeHybridProps) => {
+  // detect if this input has already been touched by prism.js via rehype
+  const classNames = className?.split(" ");
+  const prismEnabled = classNames?.includes("code-highlight");
+
+  if (prismEnabled || forceBlock) {
+    // full multi-line code blocks with copy-to-clipboard button
+    // automatic if highlighted by prism, otherwise can be forced (rather than inlined) with `forceBlock={true}`
+    return (
+      <CodeBlock
+        highlight={prismEnabled && !classNames?.includes("language-plaintext")}
+        className={className}
+        {...rest}
+      >
+        {children}
+      </CodeBlock>
+    );
+  } else {
+    // inline code in paragraphs, headings, etc. (never highlighted)
+    return (
+      <CodeInline className={className} {...rest}>
+        {children}
+      </CodeInline>
+    );
+  }
+};
+
+export default CodeHybrid;

components/CodeHybrid/index.ts

@@ -0,0 +1,2 @@
+export * from "./CodeHybrid";
+export { default } from "./CodeHybrid";

components/CodeInline/CodeInline.tsx

@@ -0,0 +1,9 @@
+import Code from "../Code";
+import { styled } from "../../lib/styles/stitches.config";
+
+const CodeInline = styled(Code, {
+  padding: "0.2em 0.3em",
+  pageBreakInside: "avoid",
+});
+
+export default CodeInline;

components/CodeInline/index.ts

@@ -0,0 +1,2 @@
+export * from "./CodeInline";
+export { default } from "./CodeInline";

components/IFrame/IFrame.tsx

@@ -1,6 +1,5 @@
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
-import type * as Stitches from "@stitches/react";
 
 const RoundedIFrame = styled("iframe", {
   width: "100%",
@@ -16,7 +15,6 @@ export type IFrameProps = ComponentProps<typeof RoundedIFrame> & {
   width?: number; // defaults to 100%
   allowScripts?: boolean;
   noScroll?: boolean;
-  css?: Stitches.CSS;
 };
 
 const IFrame = ({ src, title, height, width, allowScripts, noScroll, css, ...rest }: IFrameProps) => (

components/Loading/Loading.tsx

@@ -1,6 +1,6 @@
 import { memo } from "react";
 import { styled, keyframes } from "../../lib/styles/stitches.config";
-import type * as Stitches from "@stitches/react";
+import type { ComponentProps } from "react";
 
 const pulse = keyframes({
   "0%, 80%, 100%": {
@@ -23,15 +23,13 @@ const Box = styled("div", {
   backgroundColor: "$mediumLight",
 });
 
-export type LoadingProps = {
+export type LoadingProps = ComponentProps<typeof Wrapper> & {
   width: number; // of entire container, in pixels
   boxes?: number; // total number of boxes (default: 3)
   timing?: number; // staggered timing between each box's pulse, in seconds (default: 0.1s)
-  css?: Stitches.CSS;
-  className?: string;
 };
 
-const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProps) => {
+const Loading = ({ width, boxes = 3, timing = 0.1, css, ...rest }: LoadingProps) => {
   // each box is just an empty div
   const divs = [];
 
@@ -52,12 +50,12 @@ const Loading = ({ width, boxes = 3, timing = 0.1, css, className }: LoadingProp
 
   return (
     <Wrapper
-      className={className}
       css={{
         width: `${width}px`,
         height: `${width / 2}px`,
         ...css,
       }}
+      {...rest}
     >
       {divs}
     </Wrapper>