Wrapping MD Content inside MD Container

Boiler plate code for adding multiple MD Content

components/MDContainer.js

@@ -0,0 +1,24 @@
+import React, {useState} from 'react';
+import MDContent from "./MDContent";
+import {v4 as uuidv4} from 'uuid';
+
+function MDContainer({post}) {
+    const [posts, setPosts] = useState([post]);
+
+    function handleClick(content) {
+        console.log(content)
+        setPosts(prevPosts => {
+            return [...prevPosts, content]
+        })
+    }
+
+    return (
+        <div className="Container">
+            {posts.map(p => (
+                <MDContent key={uuidv4()} content={p} handleOpenNewContent={handleClick}/>
+            ))}
+        </div>
+    );
+}
+
+export default MDContainer;

components/MDContent.js

@@ -1,15 +1,26 @@
 import React from 'react';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
+import {useRouter} from 'next/router'
 
-function MDContent({content}) {
+function MDContent({content, handleOpenNewContent}) {
+
+    function handleInternalLinkClick() {
+        //Processing fetching
+        //pass result up to parent container
+        //TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
+        handleOpenNewContent(content)
+    }
+    const router = useRouter();
     return (
+
     <div className="markdown-rendered">
         <Alert severity="info">
             <AlertTitle>Want to know more?</AlertTitle>
             🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a href="https://twitter.com/tuancm">@tuancm</a></span>
         </Alert>
         <div dangerouslySetInnerHTML={{__html: content}}/>
+        <button onClick={handleInternalLinkClick}>Click me </button>
     </div>
     );
 }

package.json

@@ -9,6 +9,13 @@
     "deploy": "yarn build && git add . && git commit -m '...' && git push"
   },
   "dependencies": {
+    "@emotion/cache": "latest",
+    "@emotion/react": "latest",
+    "@emotion/server": "latest",
+    "@emotion/styled": "latest",
+    "@mui/icons-material": "latest",
+    "@mui/lab": "latest",
+    "@mui/material": "latest",
     "cytoscape-d3-force": "^1.1.4",
     "cytoscape-node-html-label": "^1.2.1",
     "d3": "^6.2.0",
@@ -31,14 +38,7 @@
     "remark-wiki-link": "^1.0.0",
     "to-vfile": "^6.1.0",
     "unified": "^9.2.0",
-    "vfile-reporter": "^6.0.1",
-    "@emotion/cache": "latest",
-    "@emotion/react": "latest",
-    "@emotion/server": "latest",
-    "@emotion/styled": "latest",
-    "@mui/icons-material": "latest",
-    "@mui/material": "latest",
-    "@mui/lab": "latest"
+    "vfile-reporter": "^6.0.1"
   },
   "devDependencies": {
     "bimap": "^0.0.15",

pages/index.js

@@ -1,7 +1,7 @@
 import Layout from "../components/layout";
 import {getSinglePost, getDirectoryData, convertObject, getFlattenArray} from "../lib/utils";
 import FolderTree from "../components/FolderTree";
-import MDContent from "../components/MDContent";
+import MDContainer from "../components/MDContainer";
 
 export default function Home({content, tree, flattenNodes}) {
 
@@ -11,7 +11,7 @@ export default function Home({content, tree, flattenNodes}) {
                 <nav className="nav-bar">
                     <FolderTree tree={tree} flattenNodes={flattenNodes}/>
                 </nav>
-                <MDContent content={note.data}/>
+                <MDContainer post={content.data}/>
             </div>
         </Layout>
     );

pages/note/[id].js

@@ -3,7 +3,7 @@ import Layout from "../../components/layout";
 import {getPostListData, getSinglePost, getGraphData, convertObject, getDirectoryData} from "../../lib/utils";
 import FolderTree from "../../components/FolderTree";
 import {getFlattenArray} from "../../lib/utils";
-import MDContent from "../../components/MDContent";
+import MDContainer from "../../components/MDContainer";
 
 export default function Home({ note, graphdata,tree, flattenNodes}) {
     return (
@@ -15,7 +15,7 @@ export default function Home({ note, graphdata,tree, flattenNodes}) {
                 <nav className="nav-bar">
                     <FolderTree tree={tree} flattenNodes={flattenNodes}/>
                 </nav>
-                <MDContent content={note.data}/>
+                <MDContainer post={note.data}/>
             </div>
         </Layout>
     );