feat: add /output path with native mdx loader

markdown/md.mdx

@@ -0,0 +1,5 @@
+# Test file
+
+slkjsldkjslkj
+
+<Alert severity="info">Dont mix nested items with conent.</Alert>

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,5 +1,8 @@
 const withMDX = require("@next/mdx")({
   extension: /\.(md|mdx)$/,
+  options: {
+    providerImportSource: "@mdx-js/react",
+  }
 });
 
 const path = require('path');

package.json

@@ -19,11 +19,12 @@
     "@fortawesome/free-brands-svg-icons": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "^5.11.7",
     "@next/mdx": "^13.1.6",
+    "ahooks": "^3.7.7",
     "airview-mdx": "^1.4.0",
     "axios": "^1.3.1",
     "eslint-config-next": "^13.1.6",
@@ -36,8 +37,10 @@
     "path": "^0.12.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.4",
     "react-swipeable": "^6.1.2",
     "react-syntax-highlighter": "^15.4.4",
+    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-unwrap-images": "^3.0.1",
     "sharp": "^0.31.3",

pages/api/files/file.js

@@ -0,0 +1,37 @@
+
+import fs from 'fs'
+import path from 'path'
+const glob = require("glob");
+
+export default async function handler(req, res) {
+
+  const { filePath } = req.query;
+
+  try {
+    // Resolve the absolute path of the file
+    // const absolutePath = path.resolve(filePath);
+    const absolutePath = path.join(process.cwd(), '/', req.query.filePath)
+    console.log('absolutePath: ', absolutePath)
+    // Read the file from the filesystem
+    const fileContent = fs.readFileSync(absolutePath, 'utf-8');
+
+    // Return the file content as the response
+    res.status(200).json({ content: fileContent });
+  } catch (error) {
+    console.log('api:file Error: ', error)
+
+    // Return an error response if the file couldn't be read
+    res.status(500).json({ error: 'Failed to read the file.' });
+  }
+
+
+  // try {
+  //       const filePath = path.join(process.cwd(), '/', req.query.path)
+  //       console.log('api:files/file: ', filePath)
+  //       const fileData = fs.readFileSync(filePath, "utf8")
+  //       return { fileData, error: false }
+  //   } catch (error) {
+  //       return { fileData: null, error: error }
+  //   }
+};
+

pages/files/[format]/[file].jsx.old

@@ -0,0 +1,119 @@
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
+import path from "path";
+import { fs } from "file-system";
+import matter from "gray-matter";
+import { compile, run } from "@mdx-js/mdx";
+import remarkGfm from "remark-gfm";
+import remarkUnwrapImages from 'remark-unwrap-images';
+import { mdComponents } from "../../../components/MDXProvider";
+import remarkFrontmatter from 'remark-frontmatter'
+import { MDXProvider } from '@mdx-js/react'
+import { ThemeProvider } from '@mui/material/styles';
+import { theme } from '../../../constants/theme';
+
+import CssBaseline from '@mui/material/CssBaseline';
+//  import remarkMath from "remark-math";
+//  import remarkHtml from "remark-html";
+import * as runtime from "react/jsx-runtime"; // Production.
+import { Previewer } from "pagedjs";
+
+const glob = require("glob");
+
+export async function getStaticPaths() {
+    let paths = [];
+
+    const targetDir = path.join(process.cwd(), "markdown", "/");
+    // grab all markdown files
+
+    const docPaths = glob.sync(path.join(targetDir, "**/*.{md,mdx}"));
+    docPaths.forEach((element) => {
+        paths.push({
+            params: {
+                format: "pdf",
+                file: element.replace(targetDir, ""),
+            },
+        });
+        paths.push({
+            params: {
+                format: "ppt",
+                file: element.replace(targetDir, ""),
+            },
+        });
+        paths.push({
+            params: {
+                format: "mdx",
+                file: element.replace(targetDir, ""),
+            },
+        });
+        return paths;
+    });
+
+    return {
+        paths,
+        fallback: true,
+    };
+}
+export async function getStaticProps({ params }) {
+    const filePath = path.join(process.cwd(), "markdown", params.file);
+    const fileData = fs.readFileSync(filePath, "utf8");
+    const { content, data } = matter(fileData);
+    const source = await compile(content, {
+        remarkPlugins: [remarkGfm, remarkUnwrapImages, remarkFrontmatter],
+        // outputFormat: "function-body",
+        outputFormat: "mdx",
+        development: false,
+    });
+    return {
+        props: {
+            source: String(source),
+            format: params.format,
+        },
+    };
+}
+export default function File({ source, format }) {
+    const [mdxModule, setMdxModule] = useState();
+    const mdxContainer = useRef(null);
+    const previewContainer = useRef(null);
+    const Content = mdxModule ? mdxModule.default : React.Fragment;
+    let contentMdx = ``;
+
+    useEffect(() => {
+        (async () => {
+            setMdxModule(await run(source, runtime));
+        })();
+        (async () => {
+            if (mdxContainer.current !== null && previewContainer.current !== null) {
+                let paged = new Previewer();
+                let flow = paged
+                    .preview(mdxContainer.current, ["/pdf.css"], previewContainer.current)
+                    .then((flow) => {
+                        console.log("Rendered", flow.total, "pages.");
+                    });
+            }
+        })();
+    }, [source, format]);
+
+    if (format === "pdf") {
+        return (
+            <>
+                <div ref={mdxContainer} style={{ display: "none" }}>
+                    <ThemeProvider theme={theme}>
+                        <CssBaseline />
+                        <MDXProvider components={mdComponents}>
+                            <Content />
+                        </MDXProvider>
+                    </ThemeProvider>
+                </div>
+                <div className="pagedjs_page" ref={previewContainer}></div>
+            </>
+        );
+    }
+    return (
+        <div>
+            <h1>test</h1>
+            <MDXProvider components={mdComponents}>
+                <Content />
+            </MDXProvider>
+        </div>
+    );
+}