refactor: use unifiedjs esm packages

lib/img-to-jsx.js

@@ -1,33 +0,0 @@
-const visit = require('unist-util-visit')
-const sizeOf = require('image-size')
-const fs = require('fs')
-
-module.exports = (options) => (tree) => {
-  visit(
-    tree,
-    // only visit p tags that contain an img element
-    (node) => node.type === 'paragraph' && node.children.some((n) => n.type === 'image'),
-    (node) => {
-      const imageNode = node.children.find((n) => n.type === 'image')
-
-      // only local files
-      if (fs.existsSync(`${process.cwd()}/public${imageNode.url}`)) {
-        const dimensions = sizeOf(`${process.cwd()}/public${imageNode.url}`)
-
-        // Convert original node to next/image
-        ;(imageNode.type = 'mdxJsxFlowElement'),
-          (imageNode.name = 'Image'),
-          (imageNode.attributes = [
-            { type: 'mdxJsxAttribute', name: 'alt', value: imageNode.alt },
-            { type: 'mdxJsxAttribute', name: 'src', value: imageNode.url },
-            { type: 'mdxJsxAttribute', name: 'width', value: dimensions.width },
-            { type: 'mdxJsxAttribute', name: 'height', value: dimensions.height },
-          ])
-
-        // Change node type from p to div to avoid nesting error
-        node.type = 'div'
-        node.children = [imageNode]
-      }
-    }
-  )
-}

lib/mdx.js

@@ -3,11 +3,20 @@ import fs from 'fs'
 import matter from 'gray-matter'
 import path from 'path'
 import readingTime from 'reading-time'
-import visit from 'unist-util-visit'
-import codeTitles from './remark-code-title'
-import remarkTocHeadings from './remark-toc-headings'
-import imgToJsx from './img-to-jsx'
+import { visit } from 'unist-util-visit'
 import getAllFilesRecursively from './utils/files'
+// Remark packages
+import remarkSlug from 'remark-slug'
+import remarkAutolinkHeadings from 'remark-autolink-headings'
+import remarkGfm from 'remark-gfm'
+import remarkFootnotes from 'remark-footnotes'
+import remarkMath from 'remark-math'
+import remarkCodeTitles from './remark-code-title'
+import remarkTocHeadings from './remark-toc-headings'
+import remarkImgToJsx from './remark-img-to-jsx'
+// Rehype packages
+import rehypeKatex from 'rehype-katex'
+import rehypePrismPlus from 'rehype-prism-plus'
 
 const root = process.cwd()
 
@@ -78,19 +87,19 @@ export async function getFileBySlug(type, slug) {
       // plugins in the future.
       options.remarkPlugins = [
         ...(options.remarkPlugins ?? []),
-        require('remark-slug'),
-        require('remark-autolink-headings'),
+        remarkSlug,
+        remarkAutolinkHeadings,
         [remarkTocHeadings, { exportRef: toc }],
-        require('remark-gfm'),
-        codeTitles,
-        [require('remark-footnotes'), { inlineNotes: true }],
-        require('remark-math'),
-        imgToJsx,
+        remarkGfm,
+        remarkCodeTitles,
+        [remarkFootnotes, { inlineNotes: true }],
+        remarkMath,
+        remarkImgToJsx,
       ]
       options.rehypePlugins = [
         ...(options.rehypePlugins ?? []),
-        require('rehype-katex'),
-        [require('rehype-prism-plus'), { ignoreMissing: true }],
+        rehypeKatex,
+        [rehypePrismPlus, { ignoreMissing: true }],
         () => {
           return (tree) => {
             visit(tree, 'element', (node, index, parent) => {

lib/remark-code-title.js

@@ -1,6 +1,6 @@
-import visit from 'unist-util-visit'
+import { visit } from 'unist-util-visit'
 
-module.exports = function (options) {
+export default function remarkCodeTitles() {
   return (tree) =>
     visit(tree, 'code', (node, index) => {
       const nodeLang = node.lang || ''

lib/remark-img-to-jsx.js

@@ -0,0 +1,35 @@
+import { visit } from 'unist-util-visit'
+import sizeOf from 'image-size'
+import fs from 'fs'
+
+export default function remarkImgToJsx() {
+  return (tree) => {
+    visit(
+      tree,
+      // only visit p tags that contain an img element
+      (node) => node.type === 'paragraph' && node.children.some((n) => n.type === 'image'),
+      (node) => {
+        const imageNode = node.children.find((n) => n.type === 'image')
+
+        // only local files
+        if (fs.existsSync(`${process.cwd()}/public${imageNode.url}`)) {
+          const dimensions = sizeOf(`${process.cwd()}/public${imageNode.url}`)
+
+          // Convert original node to next/image
+          ;(imageNode.type = 'mdxJsxFlowElement'),
+            (imageNode.name = 'Image'),
+            (imageNode.attributes = [
+              { type: 'mdxJsxAttribute', name: 'alt', value: imageNode.alt },
+              { type: 'mdxJsxAttribute', name: 'src', value: imageNode.url },
+              { type: 'mdxJsxAttribute', name: 'width', value: dimensions.width },
+              { type: 'mdxJsxAttribute', name: 'height', value: dimensions.height },
+            ])
+
+          // Change node type from p to div to avoid nesting error
+          node.type = 'div'
+          node.children = [imageNode]
+        }
+      }
+    )
+  }
+}

lib/remark-toc-headings.js

@@ -1,6 +1,6 @@
-import visit from 'unist-util-visit'
+import { visit } from 'unist-util-visit'
 
-module.exports = function (options) {
+export default function remarkTocHeadings(options) {
   return (tree) =>
     visit(tree, 'heading', (node, index, parent) => {
       options.exportRef.push({