refactor <CodeBlock /> to make it useful outside of mdx

components/CodeBlock/CodeBlock.module.css

@@ -17,12 +17,19 @@
   padding: 0.2em 0.3em;
 }
 
+/* full-blown code blocks, with copy/paste button and (usually) line numbers */
 .block {
   position: relative;
   width: 100%;
   margin: 1em auto;
 }
 
+.block .code {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
 .copy_btn {
   position: absolute;
   top: 0;
@@ -42,20 +49,14 @@
   color: var(--link);
 }
 
-/* the following sub-classes MUST be global -- the highlight rehype plugin isn't aware of this file */
+/* the following sub-classes MUST be global -- the prism rehype plugin isn't aware of this file */
-
-.block :global(.code-highlight) {
-  display: block;
-  overflow-x: auto;
-  padding: 1em;
-}
 
 /* leave room for clipboard button to the right of the first line */
-.block :global(.code-highlight) > :global(.code-line:first-of-type) {
+.highlight > :global(.code-line:first-of-type) {
   margin-right: 3em;
 }
 
-.block :global(.code-highlight) > :global(.code-line.line-number::before) {
+.highlight > :global(.code-line.line-number::before) {
   display: inline-block;
   width: 1.5em;
   margin-right: 1.5em;
@@ -64,69 +65,69 @@
   content: attr(line); /* added to spans by prism */
 }
 
-.block :global(.code-highlight) :global(.token.comment),
+.highlight :global(.token.comment),
-.block :global(.code-highlight) :global(.token.prolog),
+.highlight :global(.token.prolog),
-.block :global(.code-highlight) :global(.token.cdata) {
+.highlight :global(.token.cdata) {
   color: var(--code-comment);
 }
 
-.block :global(.code-highlight) :global(.token.delimiter),
+.highlight :global(.token.delimiter),
-.block :global(.code-highlight) :global(.token.boolean),
+.highlight :global(.token.boolean),
-.block :global(.code-highlight) :global(.token.keyword),
+.highlight :global(.token.keyword),
-.block :global(.code-highlight) :global(.token.selector),
+.highlight :global(.token.selector),
-.block :global(.code-highlight) :global(.token.important),
+.highlight :global(.token.important),
-.block :global(.code-highlight) :global(.token.doctype),
+.highlight :global(.token.doctype),
-.block :global(.code-highlight) :global(.token.atrule),
+.highlight :global(.token.atrule),
-.block :global(.code-highlight) :global(.token.url) {
+.highlight :global(.token.url) {
   color: var(--code-keyword);
 }
 
-.block :global(.code-highlight) :global(.token.tag),
+.highlight :global(.token.tag),
-.block :global(.code-highlight) :global(.token.builtin),
+.highlight :global(.token.builtin),
-.block :global(.code-highlight) :global(.token.regex) {
+.highlight :global(.token.regex) {
   color: var(--code-namespace);
 }
 
-.block :global(.code-highlight) :global(.token.property),
+.highlight :global(.token.property),
-.block :global(.code-highlight) :global(.token.constant),
+.highlight :global(.token.constant),
-.block :global(.code-highlight) :global(.token.variable),
+.highlight :global(.token.variable),
-.block :global(.code-highlight) :global(.token.attr-value),
+.highlight :global(.token.attr-value),
-.block :global(.code-highlight) :global(.token.class-name),
+.highlight :global(.token.class-name),
-.block :global(.code-highlight) :global(.token.string),
+.highlight :global(.token.string),
-.block :global(.code-highlight) :global(.token.char) {
+.highlight :global(.token.char) {
   color: var(--code-variable);
 }
 
-.block :global(.code-highlight) :global(.token.literal-property),
+.highlight :global(.token.literal-property),
-.block :global(.code-highlight) :global(.token.attr-name) {
+.highlight :global(.token.attr-name) {
   color: var(--code-attribute);
 }
 
-.block :global(.code-highlight) :global(.token.function) {
+.highlight :global(.token.function) {
   color: var(--code-literal);
 }
 
-.block :global(.code-highlight) :global(.token.tag .punctuation),
+.highlight :global(.token.tag .punctuation),
-.block :global(.code-highlight) :global(.token.attr-value .punctuation) {
+.highlight :global(.token.attr-value .punctuation) {
   color: var(--code-punctuation);
 }
 
-.block :global(.code-highlight) :global(.token.inserted) {
+.highlight :global(.token.inserted) {
   background-color: var(--code-addition);
 }
 
-.block :global(.code-highlight) :global(.token.deleted) {
+.highlight :global(.token.deleted) {
   background-color: var(--code-deletion);
 }
 
-.block :global(.code-highlight) :global(.token.url) {
+.highlight :global(.token.url) {
   text-decoration: underline;
 }
 
-.block :global(.code-highlight) :global(.token.bold) {
+.highlight :global(.token.bold) {
   font-weight: bold;
 }
 
-.block :global(.code-highlight) :global(.token.italic) {
+.highlight :global(.token.italic) {
   font-style: italic;
 }

components/CodeBlock/CodeBlock.tsx

@@ -1,18 +1,27 @@
-import classNames from "classnames";
+import classNames from "classnames/bind";
 import CopyButton from "../CopyButton/CopyButton";
-import type { HTMLAttributes } from "react";
 
 import styles from "./CodeBlock.module.css";
+const cx = classNames.bind(styles);
 
-type Props = HTMLAttributes<HTMLElement>;
+type CodeBlockProps = JSX.IntrinsicElements["code"] & {
+  forceBlock?: boolean;
+};
 
-const CodeBlock = ({ children, className, ...rest }: Props) => {
+const CodeBlock = ({ forceBlock, className, children, ...rest }: CodeBlockProps) => {
-  if (className?.split(" ").includes("code-highlight")) {
+  // detect if this input has already been touched by prism.js via rehype
-    // full multi-line code blocks with prism highlighting and copy-to-clipboard button
+  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 (
       <div className={styles.block}>
         <CopyButton source={children} className={styles.copy_btn} />
-        <code className={classNames(styles.code, className)} {...rest}>
+        <code
+          className={cx({ code: true, highlight: prismEnabled }, className?.replace("code-highlight", "").trim())}
+          {...rest}
+        >
           {children}
         </code>
       </div>

pages/cli.tsx

@@ -34,10 +34,10 @@ const CLI = () => (
         <Image src={cliImg} alt="Terminal Screenshot" priority />
       </a>
 
-      <H2>Usage</H2>
+      <H2 id="usage">Usage</H2>
-      <CodeBlock className="code-highlight">npx @jakejarvis/cli</CodeBlock>
+      <CodeBlock forceBlock>npx @jakejarvis/cli</CodeBlock>
 
-      <H2>Inspired by</H2>
+      <H2 id="inspired-by">Inspired by</H2>
       <UnorderedList>
         <ListItem>
           <Link href="https://github.com/sindresorhus/sindresorhus-cli">@sindresorhus/sindresorhus-cli</Link>
@@ -47,7 +47,7 @@ const CLI = () => (
         </ListItem>
       </UnorderedList>
 
-      <H2>Built with</H2>
+      <H2 id="built-with">Built with</H2>
       <UnorderedList>
         <ListItem>
           <Link href="https://github.com/vadimdemedes/ink">ink</Link> - React for interactive command-line apps
@@ -62,7 +62,7 @@ const CLI = () => (
         </Link>
       </p>
 
-      <H2>License</H2>
+      <H2 id="license">License</H2>
       <p>
         MIT &copy; <Link href="https://jarv.is/">Jake Jarvis</Link>,{" "}
         <Link href="https://sindresorhus.com">Sindre Sorhus</Link>

pages/projects.tsx

@@ -8,11 +8,7 @@ import { OctocatOcticon } from "../components/Icons";
 import type { GetStaticProps } from "next";
 import type { RepoType } from "../types";
 
-type Props = {
+const Projects = ({ repos }) => (
-  repos: RepoType[];
-};
-
-const Projects = ({ repos }: Props) => (
   <>
     <NextSeo
       title="Projects"