refactor: migrating mdx to MDXProvider first draft

Author: 7i7o

components/mdx/MDXComponents.tsx

@@ -0,0 +1,44 @@
+import { Box, Code, Heading, Image, Text } from '@chakra-ui/react'
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
+import dracula from 'react-syntax-highlighter/dist/cjs/styles/prism/dracula'
+import { CopyToClipboard } from '../CopyToClipboard'
+
+const MDXcomponents = {
+  code: (props: any) => {
+    const [, language] =
+      (props.className as string)?.match(/language-(\w+)/) ?? []
+
+    if (language) {
+      return (
+        <Box position="relative">
+          <SyntaxHighlighter language={language} {...props} style={dracula} />
+          <CopyToClipboard {...props} />
+        </Box>
+      )
+    }
+
+    return <Code fontSize="md" wordBreak="break-all" {...props} />
+  },
+  h1: (props: any) => (
+    <Heading as="h1" apply="mdx.h1" fontSize="4xl" {...props} />
+  ),
+  h2: (props: any) => (
+    <Heading as="h2" apply="mdx.h2" fontSize="3xl" {...props} />
+  ),
+  h3: (props: any) => (
+    <Heading as="h3" apply="mdx.h3" fontSize="2xl" {...props} />
+  ),
+  h4: (props: any) => (
+    <Heading as="h4" apply="mdx.h4" fontSize="xl" {...props} />
+  ),
+  p: (props: any) => <Text as="p" apply="mdx.p" fontSize="xl" {...props} />,
+  a: (props: any) => <Text as="a" apply="mdx.a" {...props} />,
+  ul: (props: any) => <Text as="ul" apply="mdx.ul" fontSize="xl" {...props} />,
+  img: (props: any) => (
+    <Image as="img" apply="mdx.image" m="0 auto" alt="" {...props} />
+  ),
+  // ContentSideDrawer,
+  // ContentCallout,
+}
+
+export default MDXcomponents

next.config.js

@@ -1,6 +1,26 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
+// const nextConfig = {
+//   reactStrictMode: true,
+// }
+
+// module.exports = nextConfig
+
+import remarkFrontmatter from 'remark-frontmatter'
+import nextMDX from '@next/mdx'
 
-module.exports = nextConfig
+const withMDX = nextMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [remarkFrontmatter],
+    // remarkPlugins: [],
+    rehypePlugins: [],
+    // If you use `MDXProvider`, uncomment the following line.
+    providerImportSource: '@mdx-js/react',
+  },
+})
+
+export default withMDX({
+  reactStrictMode: true,
+  // Append the default value with md extensions
+  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
+})

package.json

@@ -1,6 +1,7 @@
 {
   "name": "dd-academy",
   "private": true,
+  "type": "module",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -35,6 +36,9 @@
   "devDependencies": {
     "@babel/core": "^7.18.6",
     "@chakra-ui/storybook-addon": "^4.0.8",
+    "@mdx-js/loader": "^2.1.3",
+    "@mdx-js/react": "^2.1.3",
+    "@next/mdx": "^12.3.1",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -65,6 +69,7 @@
     "next-mdx-remote": "^4.0.3",
     "prettier": "^2.6.2",
     "react-syntax-highlighter": "^15.5.0",
+    "remark-frontmatter": "^4.0.1",
     "typescript": "4.6.4"
   },
   "lint-staged": {

pages/_app.tsx

@@ -7,6 +7,8 @@ import Header from '../components/Header'
 import Footer from '../components/footer/Footer'
 import ConsentBanner from '../components/ConsentBanner'
 import { DefaultSeo } from 'next-seo'
+import { MDXProvider } from '@mdx-js/react'
+import MDXcomponents from '../components/mdx/MDXComponents'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -72,7 +74,9 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
         <Box p="1.25em" px="5%" mx={{ base: '2rem', md: '6rem', lg: '10rem' }}>
           <Header />
-          <Component {...pageProps} />
+          <MDXProvider components={MDXcomponents}>
+            <Component {...pageProps} />
+          </MDXProvider>
           <Footer />
           <ConsentBanner />
         </Box>

pages/lessons/index.tsx

@@ -4,6 +4,8 @@ import path from 'path'
 import matter from 'gray-matter'
 import { ContentBanner } from '../../components/ContentBanner'
 
+const CONTENT_PATH = 'lessons'
+
 interface Lesson {
   path: string
   frontMatter: any
@@ -61,7 +63,7 @@ const Lessons: React.FC<LessonProps> = ({ lessons }: { lessons: Lesson[] }) => {
 export default Lessons
 
 export const getStaticProps = async () => {
-  const directories = fs.readdirSync(path.join('lessons'))
+  const directories = fs.readdirSync(path.join(CONTENT_PATH))
   const lessons: Lesson[] = []
   directories.reverse().map((filename) => {
     fs.readdirSync(path.join('lessons', filename)).map((file) => {

yarn.lock

@@ -2910,6 +2910,14 @@
     "@json-rpc-tools/types" "^1.7.6"
     "@pedrouid/environment" "^1.0.1"
 
+"@mdx-js/loader@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-2.1.3.tgz#b89f6e7b02933b1bf8a9cb69f73b43dab1bdb4d1"
+  integrity sha512-7LtklcfzZC9aWWFREop0ivemhwcp/cke2tICHEhnDyGn+hTg7LIbWCfSos68kJv9w7Z47KYfNcg9/8zBD+8eXA==
+  dependencies:
+    "@mdx-js/mdx" "^2.0.0"
+    source-map "^0.7.0"
+
 "@mdx-js/mdx@^1.6.22":
   version "1.6.22"
   resolved "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.22.tgz"
@@ -2971,6 +2979,14 @@
     "@types/mdx" "^2.0.0"
     "@types/react" ">=16"
 
+"@mdx-js/react@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-2.1.3.tgz#4b28a774295ed1398cf6be1b8ddef69d6a30e78d"
+  integrity sha512-11n4lTvvRyxq3OYbWJwEYM+7q6PE0GxKbk0AwYIIQmrRkxDeljIsjDQkKOgdr/orgRRbYy5zi+iERdnwe01CHQ==
+  dependencies:
+    "@types/mdx" "^2.0.0"
+    "@types/react" ">=16"
+
 "@mdx-js/[email protected]":
   version "1.6.22"
   resolved "https://registry.npmjs.org/@mdx-js/util/-/util-1.6.22.tgz"
@@ -3001,6 +3017,11 @@
   dependencies:
     glob "7.1.7"
 
+"@next/mdx@^12.3.1":
+  version "12.3.1"
+  resolved "https://registry.yarnpkg.com/@next/mdx/-/mdx-12.3.1.tgz#7951f27e3fb178319adfcb68b8e6365dbae5c36e"
+  integrity sha512-b7G3CsAwyD/8Eo6uDjCCqNwEi68LTyo/JYPC0N2Yu3yl/iveMDCi03ME+9JsnFPr3DcjmGSKc1ioiYM4dJUkTg==
+
 "@next/[email protected]":
   version "12.1.6"
   resolved "https://registry.yarnpkg.com/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-12.1.6.tgz#79a35349b98f2f8c038ab6261aa9cd0d121c03f9"
@@ -8554,6 +8575,13 @@ fault@^1.0.0:
   dependencies:
     format "^0.2.0"
 
+fault@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/fault/-/fault-2.0.1.tgz#d47ca9f37ca26e4bd38374a7c500b5a384755b6c"
+  integrity sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==
+  dependencies:
+    format "^0.2.0"
+
 fb-watchman@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz"
@@ -11231,6 +11259,13 @@ mdast-util-from-markdown@^1.0.0:
     unist-util-stringify-position "^3.0.0"
     uvu "^0.5.0"
 
+mdast-util-frontmatter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-frontmatter/-/mdast-util-frontmatter-1.0.0.tgz#ef12469379782e4a0fd995fed60cc3b871e6c819"
+  integrity sha512-7itKvp0arEVNpCktOET/eLFAYaZ+0cNjVtFtIPxgQ5tV+3i+D4SDDTjTzPWl44LT59PC+xdx+glNTawBdF98Mw==
+  dependencies:
+    micromark-extension-frontmatter "^1.0.0"
+
 mdast-util-mdx-expression@^1.0.0:
   version "1.2.1"
   resolved "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-1.2.1.tgz"
@@ -11443,6 +11478,15 @@ micromark-core-commonmark@^1.0.0, micromark-core-commonmark@^1.0.1:
     micromark-util-types "^1.0.1"
     uvu "^0.5.0"
 
+micromark-extension-frontmatter@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/micromark-extension-frontmatter/-/micromark-extension-frontmatter-1.0.0.tgz#612498e6dad87c132c95e25f0918e7cc0cd535f6"
+  integrity sha512-EXjmRnupoX6yYuUJSQhrQ9ggK0iQtQlpi6xeJzVD5xscyAI+giqco5fdymayZhJMbIFecjnE2yz85S9NzIgQpg==
+  dependencies:
+    fault "^2.0.0"
+    micromark-util-character "^1.0.0"
+    micromark-util-symbol "^1.0.0"
+
 micromark-extension-mdx-expression@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-1.0.3.tgz"
@@ -13644,6 +13688,16 @@ [email protected]:
   resolved "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz"
   integrity sha512-3Clt8ZMH75Ayjp9q4CorNeyjwIxHFcTkaektplKGl2A1jNGEUey8cKL0ZC5vJwfcD5GFGsNLImLG/NGzWIzoMQ==
 
+remark-frontmatter@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/remark-frontmatter/-/remark-frontmatter-4.0.1.tgz#84560f7ccef114ef076d3d3735be6d69f8922309"
+  integrity sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==
+  dependencies:
+    "@types/mdast" "^3.0.0"
+    mdast-util-frontmatter "^1.0.0"
+    micromark-extension-frontmatter "^1.0.0"
+    unified "^10.0.0"
+
 [email protected]:
   version "1.6.22"
   resolved "https://registry.npmjs.org/remark-mdx/-/remark-mdx-1.6.22.tgz"
@@ -14350,7 +14404,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
+source-map@^0.7.0, source-map@^0.7.3:
   version "0.7.4"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz"
   integrity sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==