add mui layout and remove mdx-enhanced dependency

next.config.js

@@ -1,6 +1,5 @@
 const { extendNextConfig } = require("./packages/@vulcanjs/next-config");
 //const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ });
-const withMDXEnhanced = require("next-mdx-enhanced");
 
 const flowRight = require("lodash/flowRight");
 const debug = require("debug")("vns:next");
@@ -38,22 +37,6 @@ const withPkgInfo = (nextConfig = {}) => {
   return nextConfig;
 };
 
-const withMDX = withMDXEnhanced({
-  layoutPath: "src/components/layout/mdx", // allow to select layouts in the MD page
-  defaultLayout: true,
-  fileExtensions: ["mdx", "md"],
-  extendFrontMatter: {
-    process: (content, rawFrontMatter) => {
-      const frontMatterExtension = {};
-      // we guess the layout based on the file folder
-      if (!!rawFrontMatter.__resourcePath.match(/docs/)) {
-        frontMatterExtension.layout = "doc-page";
-      }
-      return frontMatterExtension;
-    },
-  },
-});
-
 // @see https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration
 module.exports = (phase, { defaultConfig }) => {
   let extendedConfig;
@@ -82,7 +65,6 @@ module.exports = (phase, { defaultConfig }) => {
   extendedConfig.pageExtensions = ["js", "jsx", "md", "mdx", "ts", "tsx"];
   extendedConfig = flowRight([
     withPkgInfo,
-    withMDX,
     // add other wrappers here
   ])(extendedConfig);
 

package.json

@@ -76,7 +76,6 @@
     "next": "^10.0.2",
     "next-connect": "^0.9.1",
     "next-i18next": "^5.1.0",
-    "next-mdx-enhanced": "^4.0.0",
     "next-mdx-remote": "^2.1.3",
     "next-sitemap": "^1.4.17",
     "passport": "^0.4.1",

src/components/home/home.tsx

@@ -1,5 +1,4 @@
 import "~/types/mdx.d.ts"; // TODO: load this automatically
-import Readme from "../../../README.md";
 import { Typography } from "@material-ui/core";
 
 export const Home = () => (
@@ -18,7 +17,6 @@ export const Home = () => (
       </Typography>
       <Typography>Have fun!</Typography>
     </div>
-    <Readme />
     <style jsx>
       {`
         .welcome-message {

src/components/layout/PageLayout.tsx

@@ -6,6 +6,16 @@ interface PageLayoutProps {
   children: React.ReactNode;
 }
 
-const PageLayout = ({ children }: PageLayoutProps) => <div>{children}</div>;
+const PageLayout = ({ children }: PageLayoutProps) => (
+  <div className="PageLayout root">
+    {children}
+    <style jsx>{`
+      .PageLayout.root {
+        margin: 32px auto;
+        max-width: 1000px;
+      }
+    `}</style>
+  </div>
+);
 
 export default PageLayout;

src/components/layout/index.ts

@@ -1,3 +1,2 @@
-export { default as MDXMuiLayout } from "./MDXMuiLayout";
 export { default as AppLayout } from "./AppLayout";
 export { default as PageLayout } from "./PageLayout";

src/components/layout/MDXMuiLayout.tsx → src/components/layout/muiMdComponents.tsx

@@ -1,19 +1,21 @@
-import { MDXProvider } from "@mdx-js/react";
+/**
+ * MDX Layout, to be used with markdown file known in advance, for instance README.md
+ *
+ * For dynamic content, use next-mdx-remote setup instead (see how docs are handled)
+ */
 import {
   Typography,
   Table,
   TableBody,
   TableHead,
-  TableCell,
+  // TableCell,
   TableRow,
   Link,
 } from "@material-ui/core";
 
-interface MDXLayoutProps {
-  children: React.ReactNode;
-}
 // @see https://mdxjs.com/table-of-components
-const components = {
+// NOTE: those components are also used by next-mdx-remote based pages
+export const muiMdComponents = {
   p: (props) => <Typography {...props} />,
   h1: (props) => <Typography variant="h1" {...props} />,
   h2: (props) => <Typography variant="h2" {...props} />,
@@ -38,7 +40,8 @@ const components = {
   thead: TableHead,
   tbody: TableBody,
   tr: TableRow,
-  "td/th": TableCell,
+  // th/td will give SyntaxError: Arg string terminates parameters early for unknown reasons
+  // "th/td": TableCell,
   // pre: Typography,
   // code: Typography,
   // em: Typography,
@@ -50,17 +53,3 @@ const components = {
   // TODO: didn't find a way to override image styling...
   img: (props) => <img {...props} style={{ maxWidth: "100%" }} />,
 };
-const MDXMuiLayout = ({ children }: MDXLayoutProps) => {
-  return (
-    <MDXProvider components={components}>
-      <div className="MDXProvider root">{children}</div>
-      <style jsx>{`
-        .MDXProvider.root {
-          margin: 32px auto;
-          max-width: 1000px;
-        }
-      `}</style>
-    </MDXProvider>
-  );
-};
-export default MDXMuiLayout;

src/pages/docs/[...fileName].tsx

@@ -3,15 +3,46 @@ import hydrate from "next-mdx-remote/hydrate";
 import path from "path";
 import { listMdxFiles } from "@vulcanjs/mdx";
 import { promises as fsPromises } from "fs";
+import { Link, Typography } from "@material-ui/core";
+
+import matter from "gray-matter";
+import { muiMdComponents } from "~/components/layout/muiMdComponents";
 
 // Define components to allow them in your mdx files
 // import Test from '../components/test'
 //
-// const components = { Test }
+// You can also replace HTML tags (components is passed to MDXProvider )
+// @see https://mdxjs.com/table-of-components
+const components = {
+  //Test,
+  ...muiMdComponents,
+};
+
+const indexLink = (
+  <div style={{ margin: "32px auto", maxWidth: "1000px" }}>
+    <Link href="/docs">
+      <Typography>Back to documentation index</Typography>
+    </Link>
+  </div>
+);
 
-export default function DocPage({ source }) {
-  const content = hydrate(source); //, { components });
-  return <div className="wrapper">{content}</div>;
+export default function DocPage({ source, frontMatter /*, filePath*/ }) {
+  const content = hydrate(source, {
+    components,
+  });
+  return (
+    <div className="MDXProvider root">
+      {indexLink}
+      {content}
+      {indexLink}
+      <style jsx>{`
+        .MDXProvider.root {
+          margin: 32px auto;
+          max-width: 1000px;
+        }
+      `}</style>
+    </div>
+  );
 }
 
 export async function getStaticPaths() {
@@ -29,12 +60,13 @@ export async function getStaticPaths() {
   };
 }
 export async function getStaticProps({ params }) {
-  // MDX text - can be from a local file, database, anywhere
-  // const source = "Some **mdx** text, with a component Test";
   const fileName = params.fileName[0];
   // TODO: supports only .md at this point
   const filePath = path.resolve("./src/content/docs", fileName + ".md"); // get file
   const source = await fsPromises.readFile(filePath, { encoding: "utf8" });
-  const mdxSource = await renderToString(source); //, { components });
-  return { props: { source: mdxSource } };
+  // MDX text - can be from a local file, database, anywhere
+  const { content, data } = matter(source);
+  // Does a server-render of the source and relevant React wrappers + allow to inject React components
+  const mdxSource = await renderToString(content, { components });
+  return { props: { source: mdxSource, frontMatter: data, filePath } };
 }

src/pages/index.tsx

@@ -1,13 +1,24 @@
 import Home from "~/components/home";
 //import { useForm } from "react-hook-form";
-import MDXMuiLayout from "~/components/layout/MDXMuiLayout";
+import path from "path";
+import { promises as fsPromises } from "fs";
+import renderToString from "next-mdx-remote/render-to-string";
+import hydrate from "next-mdx-remote/hydrate";
+import { muiMdComponents } from "~/components/layout/muiMdComponents";
+import { PageLayout } from "~/components/layout";
 
-const HomePage = () => {
+const HomePage = ({ source }) => {
+  const readMeContent = hydrate(source, {
+    components: {
+      // inject both the custom components + default components like h1, p, etc.
+      ...muiMdComponents,
+    },
+  }); //, { components });
   return (
-    <MDXMuiLayout>
+    <PageLayout>
       <main>
         <Home />
-        {/*content*/}
+        {readMeContent}
       </main>
       <style jsx>{`
         main {
@@ -18,8 +29,17 @@ const HomePage = () => {
           border-color: #3f77fa;
         }
       `}</style>
-    </MDXMuiLayout>
+    </PageLayout>
   );
 };
 
+export async function getStaticProps() {
+  const filePath = path.resolve("./README.md");
+  const source = await fsPromises.readFile(filePath, { encoding: "utf8" });
+  // MDX text - can be from a local file, database, anywhere
+  // Does a server-render of the source and relevant React wrappers + allow to inject React components
+  const mdxSource = await renderToString(source); //, { components });
+  return { props: { source: mdxSource } };
+}
+
 export default HomePage;