WIP adding folder tree

This commit is contained in:
Tuan Cao 2022-03-23 10:50:06 +07:00
parent 7c1f478c45
commit 9027596d06
8 changed files with 951 additions and 18580 deletions

21
components/FileNavBar.js Normal file
View File

@ -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;

View File

@ -1,5 +1,5 @@
import Head from 'next/head' import Head from 'next/head'
// import BasicTree from 'lib/MyFolderTree'
export const siteTitle = 'Digital Backroom - An Internet Archive' export const siteTitle = 'Digital Backroom - An Internet Archive'
export default function Layout({children, home}) { 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 rel="preconnect" href="https://fonts.gstatic.com" crossOrigin/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap" <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap"
rel="stylesheet"/> 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> </Head>
<main className="markdown-rendered theme-light">{children}</main> <main className="markdown-rendered theme-light">{children}</main>
</div> </div>
) )

View File

@ -1,9 +1,8 @@
import path from 'path' import path from 'path'
import matter, { test } from 'gray-matter'
import fs from "fs" // const dirTree = require("directory-tree");
import { Node } from "./node" import { Node } from "./node"
import { Transformer } from "./transformer"; import { Transformer } from "./transformer";
import BiMap from "bimap";
function pathSelector(filename, allFilePaths){ function pathSelector(filename, allFilePaths){
if (filename.replace(".md", "") === "index"){ if (filename.replace(".md", "") === "index"){
@ -174,3 +173,24 @@ export function getPostListData() {
return fileNames 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
}
}

12
next.config.js Normal file
View File

@ -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
}
}

15812
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

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

View File

@ -1,31 +1,11 @@
import Head from "next/head"; import Head from "next/head";
import {useRouter} from 'next/router'
import {useEffect, useRef} from "react";
import Layout, {siteTitle} from "../components/layout"; import Layout, {siteTitle} from "../components/layout";
import {getSinglePost, getGraphData} from "../lib/post"; import {getSinglePost, getGraphData, getDirectoryData} from "../lib/post";
import {Network} from "../components/graph";
import dynamic from 'next/dynamic'
const BasicTree = dynamic(() => import('../components/FileNavBar'));
export default function Home({content, graphdata, filenames, ...props}) { export default function Home({content, graphdata, filenames, directoryTree, ...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
})
}
}, [])
return ( return (
<Layout home> <Layout home>
@ -36,6 +16,7 @@ export default function Home({content, graphdata, filenames, ...props}) {
rel="stylesheet"/> rel="stylesheet"/>
</Head> </Head>
<section> <section>
{/*<BasicTree directoryTree/>*/}
<div dangerouslySetInnerHTML={{__html: content.data}}/> <div dangerouslySetInnerHTML={{__html: content.data}}/>
</section> </section>
</Layout> </Layout>
@ -44,12 +25,24 @@ export default function Home({content, graphdata, filenames, ...props}) {
} }
export function getStaticProps() { export function getStaticProps() {
console.log("getStaticProps")
// const abc =
const convertedData = {name: "Test", children:[
{name: "Test", children:[
{name: "Test", children:[
]}
]}
]}
const contentData = getSinglePost("index"); const contentData = getSinglePost("index");
const graphdata = getGraphData(); const graphdata = getGraphData();
return { return {
props: { props: {
content: contentData, content: contentData,
graphdata: graphdata, graphdata: graphdata,
directoryTree: convertedData,
}, },
}; };
} }

3599
yarn.lock

File diff suppressed because it is too large Load Diff