fix unused components still loading on posts

components/clipboard/CopyButton.tsx

@@ -1,15 +1,18 @@
 import { useState, useEffect } from "react";
 import copy from "copy-to-clipboard";
+import innerText from "react-innertext";
 import { CopyOcticon, CheckOcticon } from "../icons/octicons";
 
 import styles from "./CopyButton.module.scss";
 
+import type { ReactNode } from "react";
+
 type Props = {
-  content: string;
+  source: ReactNode;
   timeout?: number;
 };
 
-const CopyButton = ({ content, timeout = 2000 }: Props) => {
+const CopyButton = ({ source, timeout = 2000 }: Props) => {
   const [copied, setCopied] = useState(false);
 
   const handleCopy = (e) => {
@@ -19,7 +22,7 @@ const CopyButton = ({ content, timeout = 2000 }: Props) => {
     e.target.blur();
 
     // send plaintext to the clipboard
-    const didCopy = copy(content);
+    const didCopy = copy(innerText(source));
 
     // indicate success
     setCopied(didCopy);

components/loading/Loading.tsx

@@ -24,7 +24,6 @@ const Loading = ({ boxes = 3, timing = 0.1, width }: Props) => {
             background-color: var(--medium-light);
           }
 
-          /* modified from https://tobiasahlin.com/spinkit/ */
           @keyframes loading {
             0%,
             80%,

components/mdxComponents.tsx

@@ -1,8 +1,6 @@
 import dynamic from "next/dynamic";
 import Link from "next/link";
 import Image from "next/image";
-import innerText from "react-innertext";
-import { OctocatOcticon } from "./icons/octicons";
 
 import type { LinkProps } from "next/link";
 import type { ImageProps } from "next/image";
@@ -39,7 +37,7 @@ const CustomCode = (props: any) => {
     // full multi-line code blocks with highlight.js and copy-to-clipboard button
     return (
       <div>
-        <CopyButton content={innerText(props.children)} />
+        <CopyButton source={props.children} />
         <code {...props}>{props.children}</code>
         <style jsx>{`
           div {
@@ -75,21 +73,25 @@ const CustomGist = dynamic(() => import("react-gist"));
 
 const CustomVideo = dynamic(() => import("./video/Video"));
 
-const CustomGitHubLink = (props: { repo: string }) => (
-  <a className="no-underline" href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
-    <OctocatOcticon fill="currentColor" />
-    <style jsx>{`
-      a {
-        margin: 0 0.3em;
-        color: var(--text);
-      }
+const CustomGitHubLink = (props: { repo: string }) => {
+  const OctocatOcticon: any = dynamic(() => import("./icons/octicons").then((mod) => mod.OctocatOcticon));
 
-      a:hover {
-        color: var(--link);
-      }
-    `}</style>
-  </a>
-);
+  return (
+    <a className="no-underline" href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
+      <OctocatOcticon className="icon" fill="currentColor" />
+      <style jsx>{`
+        a {
+          margin: 0 0.3em;
+          color: var(--text);
+        }
+
+        a:hover {
+          color: var(--link);
+        }
+      `}</style>
+    </a>
+  );
+};
 
 // These are the actual tags referenced in mdx files:
 const mdxComponents = {