From 72899ced573d13477e90f2277a0464330027f92e Mon Sep 17 00:00:00 2001
From: Jake Jarvis <jake@jarv.is>
Date: Tue, 4 Jan 2022 15:00:22 -0500
Subject: [PATCH] also dynamically load components passed to mdx

---
 components/mdxComponents.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/mdxComponents.tsx b/components/mdxComponents.tsx
index fa33a576..25e76db1 100644
--- a/components/mdxComponents.tsx
+++ b/components/mdxComponents.tsx
@@ -1,16 +1,19 @@
+import dynamic from "next/dynamic";
 import Link from "next/link";
 import Image from "next/image";
-import TweetEmbed from "react-tweet-embed";
-import Gist from "react-gist";
-import Video from "./video/FullPageVideo";
-import CopyButton from "./clipboard/CopyButton";
 import getNodeText from "../lib/get-node-text";
 import { OctocatOcticon } from "./icons/octicons";
 
 import type { LinkProps } from "next/link";
 import type { ImageProps } from "next/image";
+import type { GistProps } from "react-gist";
 import type { ReactPlayerProps } from "react-player";
 
+const TweetEmbed = dynamic(() => import("react-tweet-embed"));
+const Gist = dynamic(() => import("react-gist"));
+const Video = dynamic(() => import("./video/FullPageVideo"));
+const CopyButton = dynamic(() => import("./clipboard/CopyButton"));
+
 // The following components are all passed into <MDXProvider /> as replacement HTML tags or drop-in React components
 // available in .mdx files containing post content, since they're not directly aware of the components in this folder.
 
@@ -76,11 +79,11 @@ const CustomTweet = (props: { id: string }) => (
   />
 );
 
-const CustomGist = (props: { id: string; file?: string }) => <Gist {...props} />;
+const CustomGist = (props: GistProps) => <Gist {...props} />;
 
 const CustomGitHubLink = (props: { repo: string }) => (
   <a className="no-underline" href={`https://github.com/${props.repo}`} target="_blank" rel="noopener noreferrer">
-    <OctocatOcticon verticalAlign="text-top" fill="currentColor" />
+    <OctocatOcticon fill="currentColor" />
     <style jsx>{`
       a {
         margin: 0 0.3em;