Use next-mdx-enhanced temporarily with amplify-docs

docs/next.config.js

@@ -1,4 +1,5 @@
 const { execSync } = require("child_process");
+const path = require("path");
 
 const gitHead = execSync("git rev-parse --abbrev-ref HEAD")
   .toString()
@@ -7,17 +8,50 @@ const gitHead = execSync("git rev-parse --abbrev-ref HEAD")
 const BRANCH = gitHead === "HEAD" ? "main" : gitHead;
 
 const withCompileNodeModules = require("@moxy/next-compile-node-modules")({
-  include: /[\\/]packages[\\/]/,
+  include: [
+    // Using `path.dirname` because `package.json#main` doesn't exist in some packages yet
+    path.dirname(require.resolve("@aws-amplify/ui-core/package.json")),
+    path.dirname(require.resolve("@aws-amplify/ui-react/package.json")),
+    path.dirname(require.resolve("amplify-docs/package.json")),
+  ],
   test: /\.(js|ts)x?/,
 });
 
-const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ });
+const withMdxEnhanced = require("next-mdx-enhanced")({
+  defaultLayout: true,
+  layoutPath: "src/layouts",
+  remarkPlugins: [
+    require("remark-slug"),
+    // ❗️ Cannot use this with <TableOfContents> because it expects a different structure
+    // [
+    //   require("remark-autolink-headings"),
+    //   {
+    //     linkProperties: {
+    //       className: ["anchor"],
+    //     },
+    //   },
+    // ],
+    require("amplify-docs/src/plugins/headings.tsx"),
+    require("remark-code-titles"),
+  ],
+  rehypePlugins: [require("mdx-prism")],
+});
 
 module.exports = withCompileNodeModules(
-  withMDX({
-    env: {
-      BRANCH,
+  withMdxEnhanced({
+    env: { BRANCH },
+
+    pageExtensions: ["mdx", "tsx"],
+
+    // Improve local DX, since we're working on a subset of https://docs.amplify.aws/
+    async redirects() {
+      return [
+        {
+          source: "/",
+          destination: "/ui",
+          permanent: true,
+        },
+      ];
     },
-    pageExtensions: ["js", "jsx", "mdx", "tsx"],
   })
 );

docs/package.json

@@ -3,7 +3,7 @@
   "name": "docs",
   "version": "0.0.1",
   "scripts": {
-    "dev": "PORT=5000 next-remote-watch 'src/content' '../packages/e2e/**/*.feature'",
+    "dev": "next dev -p 5000",
     "build": "next build && next export",
     "start": "next start",
     "test": "$_ run build"
@@ -22,10 +22,9 @@
     "amplify-docs": "github:https://github.com/aws-amplify/docs#next",
     "aws-amplify": "latest",
     "aws-amplify-react": "latest",
-    "gray-matter": "^4.0.3",
     "mdx-prism": "^0.3.3",
     "next": "latest",
-    "next-mdx-remote": "^3.0.2",
+    "next-mdx-enhanced": "^5.0.0",
     "prism-react-renderer": "^1.2.0",
     "prism-theme-night-owl": "^1.4.0",
     "raw-loader": "^4.0.2",
@@ -47,7 +46,6 @@
     "@types/node": "^14.14.31",
     "@types/react": "^17.0.2",
     "autoprefixer": "^10.2.4",
-    "next-remote-watch": "^1.0.0",
     "postcss": "^8.2.6",
     "tailwindcss": "^2.0.3",
     "typescript": "^4.2.2"