WIP adding folder tree

components/FileNavBar.js

@@ -0,0 +1,21 @@
+import FolderTree, {initializedTestData, testData} from 'react-folder-tree';
+import 'react-folder-tree/dist/style.css';
+
+const BasicTree = ({directoryTree}) => {
+    const onTreeStateChange = (state, event) => console.log(state, event);
+    // console.log(initializedTestData)
+    // console.log(directoryTree)
+
+    // console.log("_-------_")
+    console.log(testData)
+
+    return (
+        <FolderTree
+            data={directoryTree}
+            onChange={ onTreeStateChange }
+            showCheckbox={ false }
+        />
+    );
+};
+
+export default BasicTree;

components/layout.js

@@ -1,5 +1,5 @@
 import Head from 'next/head'
-
+// import BasicTree from 'lib/MyFolderTree'
 export const siteTitle = 'Digital Backroom - An Internet Archive'
 
 export default function Layout({children, home}) {
@@ -11,20 +11,7 @@ export default function Layout({children, home}) {
                 <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin/>
                 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap"
                       rel="stylesheet"/>
-                <meta
-                    name="description"
-                    content="A Digital Backroom of Can Burak Sofyalioglu"
-                />
-                <meta
-                    property="og:image"
-                    content={`https://og-image.now.sh/${encodeURI(
-                        siteTitle
-                    )}.png?theme=light&md=0&fontSize=75px&images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg`}
-                />
-                <meta name="og:title" content={siteTitle}/>
-                <meta name="twitter:card" content="summary_large_image"/>
             </Head>
-
             <main className="markdown-rendered theme-light">{children}</main>
         </div>
     )

lib/post.js

@@ -1,9 +1,8 @@
 import path from 'path'
-import matter, { test } from 'gray-matter'
-import fs from "fs"
+
+// const dirTree = require("directory-tree");
 import { Node } from "./node"
 import { Transformer } from "./transformer";
-import BiMap from "bimap";
 
 function pathSelector(filename, allFilePaths){
     if (filename.replace(".md", "") === "index"){
@@ -173,4 +172,25 @@ export function getPostListData() {
 
   
   return fileNames
+}
+
+export function getDirectoryData() {
+    const filteredDirectory = dirTree(postsDirectory,{ extensions: /\.md/ });
+    const convertedData = convertObject(filteredDirectory)
+    return convertedData
+}
+let _counter = 0;
+export function convertObject(thisObject) {
+    const children = []
+    const newObject = {name: thisObject.name, children: children, id: _counter++};
+
+    if (thisObject.children != null && thisObject.children.length > 0) {
+        thisObject.children.forEach(aChild => {
+            const newChild = convertObject(aChild)
+            children.push(newChild)
+        })
+        return newObject;
+    } else {
+        return newObject
+    }
 }

next.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+    webpack: (config, { isServer }) => {
+        // Fixes npm packages that depend on `fs` module
+        if (!isServer) {
+            config.node = {
+                fs: 'empty'
+            }
+        }
+
+        return config
+    }
+}

package.json

@@ -12,6 +12,7 @@
     "cytoscape-d3-force": "^1.1.4",
     "cytoscape-node-html-label": "^1.2.1",
     "d3": "^6.2.0",
+    "directory-tree": "^3.2.2",
     "fs": "^0.0.1-security",
     "gray-matter": "^4.0.2",
     "jsnetworkx": "^0.3.4",
@@ -19,6 +20,7 @@
     "path": "^0.12.7",
     "react": "16.13.1",
     "react-dom": "16.13.1",
+    "react-folder-tree": "^5.0.3",
     "remark": "^13.0.0",
     "remark-collapse": "^0.1.2",
     "remark-external-links": "^8.0.0",
@@ -36,6 +38,7 @@
     "cytoscape": "^3.17.0",
     "remark-frontmatter": "^3.0.0",
     "remark-react": "^8.0.0",
-    "remark-stringify": "^9.0.0"
+    "remark-stringify": "^9.0.0",
+    "uuid": "^8.3.2"
   }
 }

pages/index.js

@@ -1,31 +1,11 @@
 import Head from "next/head";
-import {useRouter} from 'next/router'
-import {useEffect, useRef} from "react";
 import Layout, {siteTitle} from "../components/layout";
-import {getSinglePost, getGraphData} from "../lib/post";
-import {Network} from "../components/graph";
+import {getSinglePost, getGraphData, getDirectoryData} from "../lib/post";
 
+import dynamic from 'next/dynamic'
+const BasicTree = dynamic(() => import('../components/FileNavBar'));
 
-export default function Home({content, graphdata, filenames, ...props}) {
-    //console.log("Index Page Props: ", content /* backlinks, filenames*/)
-    const ref = useRef(null);
-    const router = useRouter()
-    const routeQuery = router.query.id
-    const routeHandler = (r) => router.push(r)
-    useEffect(() => {
-        if (ref && ref.current) {
-
-            const G = Network({
-                el: ref.current,
-                graphdata,
-                current: "index",
-                routeQuery,
-                routeHandler,
-                allNodes: false // If true then shows every markdown file as node
-            })
-        }
-    }, [])
-
+export default function Home({content, graphdata, filenames, directoryTree, ...props}) {
 
     return (
         <Layout home>
@@ -36,6 +16,7 @@ export default function Home({content, graphdata, filenames, ...props}) {
                       rel="stylesheet"/>
             </Head>
             <section>
+                {/*<BasicTree directoryTree/>*/}
                 <div dangerouslySetInnerHTML={{__html: content.data}}/>
             </section>
         </Layout>
@@ -44,12 +25,24 @@ export default function Home({content, graphdata, filenames, ...props}) {
 }
 
 export function getStaticProps() {
+
+    console.log("getStaticProps")
+
+    // const abc =
+    const convertedData = {name: "Test", children:[
+            {name: "Test", children:[
+                    {name: "Test", children:[
+
+                        ]}
+                ]}
+        ]}
     const contentData = getSinglePost("index");
     const graphdata = getGraphData();
     return {
         props: {
             content: contentData,
             graphdata: graphdata,
+            directoryTree: convertedData,
         },
     };
 }