refactor: finished migration of mdxs and removed next-mdx-remote package

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

@@ -2,8 +2,10 @@ 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 MDXcomponents = {
+const Components = {
   code: (props: any) => {
     const [, language] =
       (props.className as string)?.match(/language-(\w+)/) ?? []
@@ -37,8 +39,8 @@ const MDXcomponents = {
   img: (props: any) => (
     <Image as="img" apply="mdx.image" m="0 auto" alt="" {...props} />
   ),
-  // ContentSideDrawer,
-  // ContentCallout,
+  SideDrawer,
+  Callout,
 }
 
-export default MDXcomponents
+export default Components

components/mdx/MDXComponents.tsx renamed to 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,16 @@ 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}
+        {/* &nbsp;&nbsp; */}
+        {/* <ArrowRightIcon /> */}
       </Button>
       <Drawer isOpen={isOpen} placement="right" onClose={onClose} size="xl">
         <DrawerOverlay
@@ -44,7 +49,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 +58,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,9 +1,4 @@
 /** @type {import('next').NextConfig} */
-// const nextConfig = {
-//   reactStrictMode: true,
-// }
-
-// module.exports = nextConfig
 
 import remarkFrontmatter from 'remark-frontmatter'
 import nextMDX from '@next/mdx'
@@ -12,7 +7,6 @@ const withMDX = nextMDX({
   extension: /\.mdx?$/,
   options: {
     remarkPlugins: [remarkFrontmatter],
-    // remarkPlugins: [],
     rehypePlugins: [],
     // If you use `MDXProvider`, uncomment the following line.
     providerImportSource: '@mdx-js/react',

next.config.js

@@ -66,7 +66,6 @@
     "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",

package.json

@@ -8,7 +8,7 @@ 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'
+import Components from '../components/mdx/Components'
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
@@ -74,7 +74,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         />
         <Box p="1.25em" px="5%" mx={{ base: '2rem', md: '6rem', lg: '10rem' }}>
           <Header />
-          <MDXProvider components={MDXcomponents}>
+          <MDXProvider components={Components}>
             <Component {...pageProps} />
           </MDXProvider>
           <Footer />

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: {