Fixed layout on home page.

pages/index.js

@@ -1,8 +1,15 @@
 import Layout from "../components/Layout";
-import {getSinglePost, getDirectoryData, convertObject, getFlattenArray, getLocalGraphData} from "../lib/utils";
+import {
+    getSinglePost,
+    getDirectoryData,
+    convertObject,
+    getFlattenArray,
+    getLocalGraphData,
+    constructGraphData
+} from "../lib/utils";
 import FolderTree from "../components/FolderTree";
-import MDContainer from "../components/MDContainer";
 import dynamic from 'next/dynamic'
+import MDContent from "../components/MDContent";
 
 
 // This trick is to dynamically load component that interact with window object (browser only)
@@ -11,34 +18,38 @@ const DynamicGraph = dynamic(
     { loading: () => <p>Loading ...</p>, ssr: false }
 )
 
-export default function Home({graphData, content, tree, flattenNodes}) {
+export default function Home({graphData, content, tree, flattenNodes, backLinks}) {
     return (
         <Layout>
             <div className = 'container'>
                 <nav className="nav-bar">
                     <FolderTree tree={tree} flattenNodes={flattenNodes}/>
                 </nav>
-                <MDContainer post={content.data}/>
+                <MDContent content={content}  handleOpenNewContent={null} backLinks={backLinks}/>
                 <DynamicGraph graph={graphData}/>
             </div>
-
-
         </Layout>
     );
 
 }
+const {nodes, edges} = constructGraphData()
 
 export function getStaticProps() {
     const tree = convertObject(getDirectoryData());
     const contentData = getSinglePost("index");
     const flattenNodes = getFlattenArray(tree)
+    const listOfEdges =   edges.filter(anEdge => anEdge.target === "index")
+    const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
+    const backLinks = [...new Set(internalLinks)]
+
     const graphData = getLocalGraphData("index");
     return {
         props: {
-            content: contentData,
+            content: contentData.data,
             tree: tree,
             flattenNodes: flattenNodes,
             graphData:graphData,
+            backLinks: backLinks
         },
     };
 }

styles/style.css

@@ -87,7 +87,7 @@ a:hover {
     background-color: var(--background-primary);
     color: var(--text-normal);
     font-family:var(--default-font);
-    padding: 20px;
+    padding: 15px 30px;
 }
 
 .nav-bar {
@@ -184,7 +184,7 @@ a:hover {
     display: block;
 }
 
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: 1400px) {
     .right-bar-container {
         display: none;
     }