upgrade nextjs, preact, mdx-bundler, esbuild

.eslintrc.js

@@ -6,24 +6,10 @@ module.exports = {
     node: true,
     es6: true,
   },
-  extends: [
-    'eslint:recommended',
-    'plugin:jsx-a11y/recommended',
-    'plugin:prettier/recommended',
-    'next',
-    'next/core-web-vitals',
-  ],
+  extends: ['eslint:recommended', 'plugin:prettier/recommended', 'next', 'next/core-web-vitals'],
   rules: {
     'prettier/prettier': 'error',
     'react/react-in-jsx-scope': 'off',
-    'jsx-a11y/anchor-is-valid': [
-      'error',
-      {
-        components: ['Link'],
-        specialLink: ['hrefLeft', 'hrefRight'],
-        aspects: ['invalidHref', 'preferButton'],
-      },
-    ],
     'react/prop-types': 0,
     'no-unused-vars': 0,
     'react/no-unescaped-entities': 0,

data/blog/github-markdown-guide.mdx

@@ -153,6 +153,18 @@ function fancyAlert(arg) {
 }
 ```
 
+## Footnotes
+
+```
+Here is a simple footnote[^1]. With some additional text after it.
+
+[^1]: My reference.
+```
+
+Here is a simple footnote[^1]. With some additional text after it.
+
+[^1]: My reference.
+
 ## Task Lists
 
 ```

lib/mdx.js

@@ -56,7 +56,8 @@ export async function getFileBySlug(type, slug) {
 
   // Parsing frontmatter here to pass it in as options to rehype plugin
   const { data: frontmatter } = matter(source)
-  const { code } = await bundleMDX(source, {
+  const { code } = await bundleMDX({
+    source,
     // mdx imports can be automatically source from the components directory
     cwd: path.join(root, 'components'),
     xdmOptions(options) {

next.config.js

@@ -30,6 +30,7 @@ module.exports = withBundleAnalyzer({
     if (!dev && !isServer) {
       // Replace React with Preact only in client production build
       Object.assign(config.resolve.alias, {
+        'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
         react: 'preact/compat',
         'react-dom/test-utils': 'preact/test-utils',
         'react-dom': 'preact/compat',

package.json

@@ -16,40 +16,39 @@
     "@tailwindcss/forms": "^0.3.2",
     "@tailwindcss/typography": "^0.4.0",
     "autoprefixer": "^10.2.5",
-    "esbuild": "^0.12.15",
+    "esbuild": "^0.13.13",
     "github-slugger": "^1.3.0",
     "gray-matter": "^4.0.2",
     "image-size": "1.0.0",
-    "mdx-bundler": "^6.0.1",
-    "next": "12.0.3",
+    "mdx-bundler": "^8.0.0",
+    "next": "12.0.5",
     "next-themes": "^0.0.14",
     "postcss": "^8.3.5",
-    "preact": "10.5.15",
+    "preact": "^10.6.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "reading-time": "1.3.0",
-    "rehype-autolink-headings": "^6.0.0",
+    "rehype-autolink-headings": "^6.1.0",
     "rehype-citation": "^0.1.1",
-    "rehype-katex": "^6.0.0",
+    "rehype-katex": "^6.0.2",
     "rehype-prism-plus": "^1.1.3",
     "rehype-slug": "^5.0.0",
-    "remark-footnotes": "^4.0.0",
-    "remark-gfm": "^2.0.0",
-    "remark-math": "^5.0.0",
+    "remark-footnotes": "^4.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-math": "^5.1.1",
     "sharp": "^0.28.3",
     "smoothscroll-polyfill": "^0.4.4",
     "tailwindcss": "^2.2.2",
     "unist-util-visit": "^4.0.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "12.0.3",
+    "@next/bundle-analyzer": "12.0.5",
     "@svgr/webpack": "^5.5.0",
     "cross-env": "^7.0.3",
     "dedent": "^0.7.0",
     "eslint": "^7.29.0",
-    "eslint-config-next": "12.0.3",
+    "eslint-config-next": "12.0.5",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
     "file-loader": "^6.0.0",
     "globby": "11.0.3",