refactor code block detection and css

app/global.css

@@ -27,6 +27,7 @@ samp,
 pre {
   font-size: 1em;
   font-family: var(--fonts-mono);
+  font-variant-ligatures: none; /* i hate them. fwiw. */
 }
 
 small {

components/Code/Code.module.css

@@ -1,10 +1,8 @@
-.inline,
+/**
-.highlighted {
+ * Inline code
-  font-family: var(--fonts-mono);
+ **/
-  font-variant-ligatures: none; /* i hate them. fwiw. */
-}
 
-.inline {
+:not([data-rehype-pretty-code-figure]) .code {
   padding: 0.2em 0.3em;
   font-size: 0.925em;
   page-break-inside: avoid;
@@ -13,14 +11,18 @@
   border-radius: 0.6em;
 }
 
-figure:has(.highlighted) {
+/**
+ * Syntax-highlighted code blocks
+ **/
+
+[data-rehype-pretty-code-figure]:has(.code) {
   margin: 1em auto;
   position: relative;
   width: 100%;
   background-color: var(--colors-background-header);
 }
 
-.highlighted {
+[data-rehype-pretty-code-figure] .code {
   display: block;
   overflow-x: auto;
   padding: 1em;
@@ -28,48 +30,45 @@ figure:has(.highlighted) {
   tab-size: 2px;
   border: 1px solid var(--colors-kinda-light);
   border-radius: 0.6em;
+  counter-reset: line;
 }
 
-.highlighted [style*="--shiki"] {
+[data-rehype-pretty-code-figure] .code [style*="--shiki"] {
   color: var(--shiki-light);
   font-style: var(--shiki-light-font-style);
   font-weight: var(--shiki-light-font-weight);
   text-decoration: var(--shiki-light-text-decoration);
 }
 
-[data-theme="dark"] .highlighted [style*="--shiki"] {
+[data-theme="dark"] [data-rehype-pretty-code-figure] .code [style*="--shiki"] {
   color: var(--shiki-dark);
   font-style: var(--shiki-dark-font-style);
   font-weight: var(--shiki-dark-font-weight);
   text-decoration: var(--shiki-dark-text-decoration);
 }
 
-.highlighted > [data-line]:nth-of-type(1),
+[data-rehype-pretty-code-figure] .code[data-line-numbers] > [data-line]:nth-of-type(1),
-.highlighted > [data-line]:nth-of-type(2) {
+[data-rehype-pretty-code-figure] .code[data-line-numbers] > [data-line]:nth-of-type(2) {
   /* excessive right padding to prevent copy button from covering the first two lines of code */
   padding-right: 4em;
 }
 
-.highlighted[data-line-numbers] {
+[data-rehype-pretty-code-figure] .code[data-line-numbers] > [data-line]::before {
-  counter-reset: line;
-}
-
-.highlighted[data-line-numbers] > [data-line]::before {
   display: inline-block;
   width: 1em;
   margin-right: 1.5em;
   text-align: right;
   color: var(--colors-medium-light);
+  user-select: none;
   counter-increment: line;
   content: counter(line);
-  user-select: none;
 }
 
-.highlighted[data-line-numbers-max-digits="2"] > [data-line]::before {
+[data-rehype-pretty-code-figure] .code[data-line-numbers-max-digits="2"] > [data-line]::before {
   width: 1.25rem;
 }
 
-.highlighted[data-line-numbers-max-digits="3"] > [data-line]::before {
+[data-rehype-pretty-code-figure] .code[data-line-numbers-max-digits="3"] > [data-line]::before {
   width: 1.75rem;
 }
 

components/Code/Code.tsx

@@ -12,30 +12,23 @@ export type CodeProps = ComponentPropsWithoutRef<"code"> & {
 // a simple wrapper component that "intelligently" picks between inline code and code blocks (w/ optional syntax
 // highlighting & a clipboard button)
 const Code = ({
-  "data-language": dataLanguage,
+  "data-language": dataLanguage, // eslint-disable-line @typescript-eslint/no-unused-vars
-  "data-theme": dataTheme, // eslint-disable-line @typescript-eslint/no-unused-vars
+  "data-theme": dataTheme,
   className,
   children,
   ...rest
 }: CodeProps) => {
-  // detect if this input has already been touched by shiki via rehype-pretty-code
-  if (dataLanguage) {
-    // full multi-line code blocks with copy-to-clipboard button
-    return (
-      <>
-        <CopyButton className={styles.copyButton} source={children} />
-        <code className={clsx(styles.highlighted, className)} {...rest}>
-          {children}
-        </code>
-      </>
-    );
-  }
-
-  // simple inline code in paragraphs, headings, etc. (never highlighted)
   return (
-    <code className={clsx(styles.inline, className)} {...rest}>
+    <>
-      {children}
+      {
-    </code>
+        // detect if this input has been touched by shiki via rehype-pretty-code and if so, include a copy-to-clipboard
+        // button as its sibling.
+        dataTheme && <CopyButton className={styles.copyButton} source={children} />
+      }
+      <code className={clsx(styles.code, className)} {...rest}>
+        {children}
+      </code>
+    </>
   );
 };
 

components/SkipNav/SkipNav.module.css

@@ -1,5 +1,5 @@
-/*
+/*!
- * Pulled from @reach/skip-nav: https://github.com/reach/reach-ui/blob/main/packages/skip-nav/styles.css
+ * @reach/skip-nav | MIT License | https://github.com/reach/reach-ui/blob/v0.18.0/packages/skip-nav/styles.css
  */
 
 .hidden {