directly (and still dynamically) assign a few of the mdx components

components/mdxComponents.tsx

@@ -6,29 +6,17 @@ 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.
 
-const CustomLink = ({
-  href,
-  target,
-  rel,
-  className,
-  children,
-}: LinkProps & {
+type CustomLinkProps = LinkProps & {
   target?: string;
   rel?: string;
   className?: string;
   children?: unknown;
-}) => (
+};
+const CustomLink = ({ href, target, rel, className, children }: CustomLinkProps) => (
   <Link href={href} passHref={true}>
     <a className={className} target={target} rel={rel}>
       {children}
@@ -36,18 +24,19 @@ const CustomLink = ({
   </Link>
 );
 
-const CustomImg = (props: ImageProps) => {
-  return (
-    // height and width are part of the props, so they get automatically passed here with {...props}
-    <div className={props.className}>
-      {/* eslint-disable-next-line jsx-a11y/alt-text */}
-      <Image {...props} />
-    </div>
-  );
-};
+const CustomImg = (props: ImageProps) => (
+  // the required height and width are part of the props, so they get automatically passed here with {...props}
+  <div className={props.className}>
+    {/* eslint-disable-next-line jsx-a11y/alt-text */}
+    <Image {...props} />
+  </div>
+);
 
 const CustomCode = (props: any) => {
   if (props.className?.split(" ").includes("hljs")) {
+    const CopyButton = dynamic(() => import("./clipboard/CopyButton"));
+
+    // full multi-line code blocks with highlight.js and copy-to-clipboard button
     return (
       <div>
         <CopyButton content={innerText(props.children)} />
@@ -63,23 +52,28 @@ const CustomCode = (props: any) => {
       </div>
     );
   } else {
+    // inline code in paragraphs, headings, etc. (not highlighted)
     return <code {...props}>{props.children}</code>;
   }
 };
 
-const CustomVideo = (props: ReactPlayerProps) => <Video {...props} />;
+const CustomTweet = (props: { id: string }) => {
+  const TweetEmbed = dynamic(() => import("react-tweet-embed"));
 
-const CustomTweet = (props: { id: string }) => (
-  <TweetEmbed
-    id={props.id}
-    options={{
-      dnt: true,
-      align: "center",
-    }}
-  />
-);
+  return (
+    <TweetEmbed
+      id={props.id}
+      options={{
+        dnt: true,
+        align: "center",
+      }}
+    />
+  );
+};
 
-const CustomGist = (props: GistProps) => <Gist {...props} />;
+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">
@@ -97,6 +91,7 @@ const CustomGitHubLink = (props: { repo: string }) => (
   </a>
 );
 
+// These are the actual tags referenced in mdx files:
 const mdxComponents = {
   a: CustomLink,
   img: CustomImg,

components/video/Video.tsx

@@ -1,14 +1,14 @@
 import dynamic from "next/dynamic";
 import type { ReactPlayerProps } from "react-player";
 
-import styles from "./FullPageVideo.module.scss";
+import styles from "./Video.module.scss";
 
 const ReactPlayer = dynamic(() => import("react-player"));
 
-const FullPageVideo = (props: ReactPlayerProps) => (
+const Video = (props: ReactPlayerProps) => (
   <div className={styles.wrapper}>
     <ReactPlayer className={styles.react_player} width="100%" height="100%" {...props} />
   </div>
 );
 
-export default FullPageVideo;
+export default Video;

lib/config.js

@@ -1,3 +1,4 @@
+// do not convert to ESM -- this needs to be imported in CJS files like next.config.js too
 module.exports = {
   // Site info
   siteName: "Jake Jarvis",

lib/parse-notes.ts

@@ -3,6 +3,7 @@ import path from "path";
 import matter from "gray-matter";
 import { NOTES_DIR, baseUrl } from "./config";
 
+// returns front matter and/or *raw* markdown contents of a given slug
 export const getNoteData = (slug: string) => {
   const fullPath = path.join(process.cwd(), NOTES_DIR, `${slug}.mdx`);
   const rawContent = fs.readFileSync(fullPath, "utf8");
@@ -19,15 +20,15 @@ export const getNoteData = (slug: string) => {
   };
 };
 
-// all .mdx files in NOTES_DIR
+// returns all .mdx files in NOTES_DIR (without .mdx extension)
 export const getNoteSlugs = () =>
   fs
     .readdirSync(path.join(process.cwd(), NOTES_DIR))
     .filter((file) => /\.mdx$/.test(file))
     .map((noteFile) => noteFile.replace(/\.mdx$/, ""));
 
+// returns the front matter of ALL notes, sorted reverse chronologically
 export const getAllNotes = () =>
   getNoteSlugs()
     .map((slug) => getNoteData(slug).frontMatter)
-    // sort notes by date in descending order
     .sort((note1: any, note2: any) => (note1.date > note2.date ? -1 : 1));

pages/_app.tsx

@@ -30,7 +30,9 @@ const App = ({ Component, pageProps }: AppProps) => {
     // https://usefathom.com/docs/integrations/next
     // https://vercel.com/guides/deploying-nextjs-using-fathom-analytics-with-vercel
     Fathom.load(config.fathomSiteId, {
+      // optional custom domain: https://usefathom.com/docs/script/custom-domains
       url: `${config.fathomCustomDomain || "https://cdn.usefathom.com"}/script.js`,
+      // don't track branch/deploy previews and localhost
       includedDomains: [config.siteDomain],
     });
 
@@ -38,7 +40,7 @@ const App = ({ Component, pageProps }: AppProps) => {
       Fathom.trackPageview();
     };
 
-    // send ping when route changes
+    // needs to be triggered manually on link clicks (the page doesn't actually change)
     router.events.on("routeChangeComplete", onRouteChangeComplete);
 
     return () => {

pages/birthday.tsx

@@ -2,7 +2,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import Video from "../components/video/FullPageVideo";
+import Video from "../components/video/Video";
 import { TapeIcon } from "../components/icons";
 
 import thumbnail from "../public/static/images/birthday/thumb.png";

pages/hillary.tsx

@@ -2,7 +2,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import Video from "../components/video/FullPageVideo";
+import Video from "../components/video/Video";
 
 import thumbnail from "../public/static/images/hillary/thumb.png";
 

pages/leo.tsx

@@ -2,7 +2,7 @@ import Layout from "../components/Layout";
 import Container from "../components/Container";
 import Content from "../components/Content";
 import PageTitle from "../components/page/PageTitle";
-import Video from "../components/video/FullPageVideo";
+import Video from "../components/video/Video";
 
 import thumbnail from "../public/static/images/leo/thumb.png";