Merge pull request #167 from 7i7o/dw-2098/mdx-migration

**Please rebase all branches you've been working with, for this PR moves the lessons location in the folder structure from /lessons to /pages/lessons**

Author: 7i7o

.eslintrc.js renamed to .eslintrc.cjs

@@ -1,10 +1,10 @@
 import { Box, HStack, useStyleConfig } from '@chakra-ui/react'
 import React, { FC } from 'react'
 
-const ComponentCallout: FC = (props: any) => {
+const Callout: FC = (props: any) => {
   const { size, variant, emoji, children, ...rest } = props
 
-  const styles = useStyleConfig('ContentCallout', { size, variant })
+  const styles = useStyleConfig('Callout', { size, variant })
   return (
     <Box __css={styles} {...rest}>
       <HStack spacing={4}>
@@ -17,4 +17,4 @@ const ComponentCallout: FC = (props: any) => {
   )
 }
 
-export default ComponentCallout
+export default Callout

components/ContentCallout.tsx renamed to components/mdx/Callout.tsx

@@ -0,0 +1,46 @@
+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'
+import SideDrawer from './SideDrawer'
+import Callout from './Callout'
+
+const Components = {
+  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} />
+  ),
+  SideDrawer,
+  Callout,
+}
+
+export default Components

components/mdx/Components.tsx

@@ -12,9 +12,12 @@ import {
 } from '@chakra-ui/react'
 import React from 'react'
 
-function ContentSideDrawer(props: any) {
+function SideDrawer(props: any) {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
+  const { buttonText, title } = props
+  const drawerTitle = title ? title : buttonText
+
   return (
     <>
       <Button
@@ -25,14 +28,14 @@ function ContentSideDrawer(props: any) {
         fontWeight="bold"
         bg="gray.700"
         mt="1em"
-        height={[`${props.title.length > 30 ? '3.75rem' : '2.5rem'}`, '2.5rem']}
+        height={[`${buttonText.length > 30 ? '3.75rem' : '2.5rem'}`, '2.5rem']}
         style={{
           whiteSpace: 'normal',
           wordWrap: 'break-word',
         }}
+        rightIcon={<ArrowRightIcon />}
       >
-        {props.title}&nbsp;&nbsp;
-        <ArrowRightIcon />
+        {buttonText}
       </Button>
       <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="xl">
         <DrawerOverlay
@@ -44,7 +47,7 @@ function ContentSideDrawer(props: any) {
         <DrawerContent bg="#00000f" px="4" pb="8">
           <DrawerCloseButton />
           <DrawerHeader fontSize="3xl" textColor="yellow.300">
-            {props.title}
+            {drawerTitle}
           </DrawerHeader>
           <DrawerBody>{props.children}</DrawerBody>
         </DrawerContent>
@@ -53,4 +56,4 @@ function ContentSideDrawer(props: any) {
   )
 }
 
-export default ContentSideDrawer
+export default SideDrawer

components/ContentSideDrawer.tsx renamed to components/mdx/SideDrawer.tsx

@@ -0,0 +1 @@
+export const CONTENT_PATH = 'pages/lessons'

lib/constants.ts

@@ -1,6 +1,20 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
 
-module.exports = nextConfig
+import remarkFrontmatter from 'remark-frontmatter'
+import nextMDX from '@next/mdx'
+
+const withMDX = nextMDX({
+  extension: /\.mdx?$/,
+  options: {
+    remarkPlugins: [remarkFrontmatter],
+    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'],
+})

next.config.js

@@ -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",
@@ -62,9 +66,9 @@
     "jest": "^28.1.1",
     "jest-environment-jsdom": "^28.1.1",
     "lint-staged": "^13.0.0",
-    "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": {

package.json

@@ -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 Components from '../components/mdx/Components'
 
 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={Components}>
+            <Component {...pageProps} />
+          </MDXProvider>
           <Footer />
           <ConsentBanner />
         </Box>

pages/_app.tsx

@@ -15,6 +15,7 @@ import {
 import fs from 'fs'
 import path from 'path'
 import matter from 'gray-matter'
+import { CONTENT_PATH } from '../../lib/constants'
 
 interface LessonProps {
   lessons: {
@@ -221,22 +222,27 @@ const GettingStarted: React.FC<LessonProps> = ({ lessons }) => {
 export default GettingStarted
 
 export const getStaticProps = async () => {
-  const directories = fs.readdirSync(path.join('lessons'))
+  const contentDir = path.join(CONTENT_PATH)
+  const directories = fs.readdirSync(path.join(contentDir))
   const lessons: object[] = []
-  directories.reverse().map((filename) => {
-    fs.readdirSync(path.join('lessons', filename)).map((file) => {
-      const markdownWithMeta = fs.readFileSync(
-        path.join('lessons', filename, file),
-        'utf-8',
-      )
+  directories.reverse().map((folder) => {
+    if (fs.lstatSync(path.join(contentDir, folder)).isDirectory()) {
+      fs.readdirSync(path.join(contentDir, folder)).map((file) => {
+        if (!fs.lstatSync(path.join(contentDir, folder, file)).isDirectory()) {
+          const markdownWithMeta = fs.readFileSync(
+            path.join(contentDir, folder, file),
+            'utf-8',
+          )
 
-      const { data: frontMatter } = matter(markdownWithMeta)
-      lessons.push({
-        path: filename,
-        frontMatter,
-        slug: file.replace('.mdx', ''),
+          const { data: frontMatter } = matter(markdownWithMeta)
+          lessons.push({
+            path: folder,
+            frontMatter,
+            slug: file.replace('.mdx', ''),
+          })
+        }
       })
-    })
+    }
   })
   return {
     props: {