Upgrade next-mdx-remote and other markdown-related dependencies

site/package.json

@@ -61,7 +61,7 @@
     "mongodb": "^4.2.2",
     "next": "^12.1.6",
     "next-connect": "^0.12.1",
-    "next-mdx-remote": "^3.0.8",
+    "next-mdx-remote": "^4.0.3",
     "next-session": "^4.0.4",
     "nodemailer": "^6.7.2",
     "oembed-providers": "^1.0.20220105",
@@ -73,14 +73,14 @@
     "react-html-parser": "^2.0.2",
     "react-slick": "^0.28.1",
     "react-use": "^17.3.2",
-    "remark-mdx": "1.6.22",
-    "remark-parse": "9.0.0",
+    "remark-mdx": "^2.1.1",
+    "remark-parse": "^10.0.1",
     "rword": "^3.2.0",
     "slick-carousel": "^1.8.1",
     "slugify": "^1.6.3",
     "tmp-promise": "3.0.3",
     "twind": "^0.16.17",
-    "unified": "9.2.2",
+    "unified": "^10.1.2",
     "use-mousetrap": "^1.0.4",
     "uuid": "^8.3.2"
   },

site/src/_pages/docs/2_publishing-blocks.mdx

@@ -30,14 +30,12 @@ The JSON metadata file should look like this:
 }
 ```
 
-<!-- markdownlint-disable no-emphasis-as-heading -->
-
-**My block source is in a subfolder**
+### My block source is in a subfolder
 
 - If it’s in a yarn workspace, please provide `workspace`
 - If it’s not in a yarn workspace, please provide its `folder` path
 
-**My block requires building from its source**
+### My block requires building from its source
 
 - please provide the `distDir` where the build artifacts will appear
 

site/src/components/info-card/info-card-wrapper.tsx

@@ -8,8 +8,10 @@ import {
   VoidFunctionComponent,
 } from "react";
 
+import { InfoCard } from "./info-card";
+
 type InfoCardWrapperProps = {
-  children: ReactNode;
+  children?: ReactNode;
 };
 
 export const INFO_CARD_WIDTH = 275;
@@ -19,7 +21,7 @@ export const InfoCardWrapper: VoidFunctionComponent<InfoCardWrapperProps> = ({
 }) => {
   const childrenAsArray = Children.toArray(children);
   const infoCardElements = childrenAsArray.filter(
-    (child) => isValidElement(child) && child.props.mdxType === "InfoCard",
+    (child) => isValidElement(child) && child.type === InfoCard,
   );
 
   if (infoCardElements.length !== 1) {

site/src/components/info-card/info-card.tsx

@@ -24,7 +24,7 @@ const mapInfoCardVariantToPaperVariant = (
 
 type InfoCardProps = {
   variant?: "info" | "warning";
-  title: ReactNode;
+  title?: ReactNode;
   children?: ReactNode;
   sx?: PaperProps["sx"];
 };

site/src/util/mdx-components.tsx

@@ -1,8 +1,11 @@
 import { faLink } from "@fortawesome/free-solid-svg-icons";
 import { Box, Paper, styled, Typography, TypographyProps } from "@mui/material";
 import {
+  Children,
+  ComponentType,
   HTMLAttributes,
   HTMLProps,
+  isValidElement,
   ReactNode,
   useContext,
   useEffect,
@@ -103,7 +106,7 @@ const HEADING_MARGIN_TOP = {
 };
 const HEADING_MARGIN_BOTTOM = 2;
 
-export const mdxComponents: Record<string, ReactNode> = {
+export const mdxComponents: Record<string, ComponentType> = {
   Box,
   Paper,
   Typography,
@@ -269,7 +272,8 @@ export const mdxComponents: Record<string, ReactNode> = {
       </Typography>
     </Box>
   ),
-  inlineCode: (props: HTMLAttributes<HTMLElement>) => (
+  // inline code (`)
+  code: (props: HTMLAttributes<HTMLElement>) => (
     <Box
       component="code"
       sx={(theme) => ({
@@ -285,53 +289,63 @@ export const mdxComponents: Record<string, ReactNode> = {
       {...props}
     />
   ),
-  pre: (props: HTMLAttributes<HTMLElement>) => {
-    // Delegate full control to code for more styling options
-    return props.children;
-  },
-  code: (props: HTMLAttributes<HTMLElement>) => {
-    const isLanguageBlockFunction =
-      props.className === "language-block-function";
-    if (isLanguageBlockFunction) {
-      const anchor = `${props.children}`.match(/^[\w]+/)?.[0] ?? "";
+  // block code (```) - consists of <pre><code>...</code></pre>
+  pre: ({ children, ...rest }: HTMLAttributes<HTMLElement>) => {
+    const [child, ...otherChildren] = Children.toArray(children);
+    if (
+      isValidElement(child) &&
+      child.type === mdxComponents.code &&
+      !otherChildren.length
+    ) {
+      const childProps = child.props;
+      const isLanguageBlockFunction =
+        childProps.className === "language-block-function";
+
+      if (isLanguageBlockFunction) {
+        const anchor = `${childProps.children}`.match(/^[\w]+/)?.[0] ?? "";
+        return (
+          <Box
+            id={anchor}
+            component="code"
+            sx={{
+              fontWeight: "bold",
+              color: "#d18d5b",
+              display: "block",
+              marginTop: 4,
+            }}
+          >
+            <Link href={`#${anchor}`}>{childProps.children}</Link>
+          </Box>
+        );
+      }
+
       return (
         <Box
-          id={anchor}
-          component="code"
-          sx={{
-            fontWeight: "bold",
-            color: "#d18d5b",
+          component="pre"
+          sx={(theme) => ({
+            overflow: "auto",
             display: "block",
-            marginTop: 4,
-          }}
+            fontSize: "90%",
+            color: theme.palette.purple[400],
+            background: "#161a1f",
+            padding: theme.spacing(3),
+            borderWidth: 1,
+            borderStyle: "solid",
+            borderRadius: "8px",
+            textShadow: "none",
+            marginBottom: 2,
+            maxWidth: "72ch",
+          })}
         >
-          <Link href={`#${anchor}`}>{props.children}</Link>
+          <Snippet
+            source={`${childProps.children}`}
+            language={childProps.className?.replace("language-", "") ?? ""}
+          />
         </Box>
       );
     }
-    return (
-      <Box
-        component="pre"
-        sx={(theme) => ({
-          overflow: "auto",
-          display: "block",
-          fontSize: "90%",
-          color: theme.palette.purple[400],
-          background: "#161a1f",
-          padding: theme.spacing(3),
-          borderWidth: 1,
-          borderStyle: "solid",
-          borderRadius: "8px",
-          textShadow: "none",
-          marginBottom: 2,
-          maxWidth: "72ch",
-        })}
-      >
-        <Snippet
-          source={`${props.children}`}
-          language={props.className?.replace("language-", "") ?? ""}
-        />
-      </Box>
-    );
+
+    // fallback
+    return <pre {...rest}>{children}</pre>;
   },
 };

site/src/util/mdx-utils.tsx

@@ -3,11 +3,10 @@ import matter from "gray-matter";
 import { MDXRemoteSerializeResult } from "next-mdx-remote";
 import { serialize } from "next-mdx-remote/serialize";
 import path from "node:path";
-// @ts-expect-error -- Need to figure out how to get or declare the necessary types
 import remarkMdx from "remark-mdx";
 import remarkParse from "remark-parse";
 import slugify from "slugify";
-import unified from "unified";
+import { unified } from "unified";
 
 import { SiteMapPage, SiteMapPageSection } from "../lib/sitemap";