tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put Side bar to both Index and post pages

Browse Source 
Make nav bar appear on the left side.
This commit is contained in:
Tuan Cao 2022-03-24 14:43:18 +07:00
parent bae2cc6be7
commit c56bacc34b
5 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/FolderTree.js
View File

@ -29,7 +29,7 @@ export default function FolderTree(props) {
router.push(currentNode.routePath) router.push(currentNode.routePath)
} }
}} }}
sx={{ height: 110, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }} sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
> >
{renderTree(props.tree)} {renderTree(props.tree)}
</TreeView> </TreeView>

6
components/layout.js
View File

@ -1,12 +1,14 @@
import Head from 'next/head' import Head from 'next/head'
// import BasicTree from 'lib/MyFolderTree' // import BasicTree from 'lib/MyFolderTree'
export const siteTitle = 'Digital Backroom - An Internet Archive' export const siteTitle = 'Digital Backroom - An Internet Archive'
import {Box} from '@mui/material'
export default function Layout({children, home}) { export default function Layout({children, home}) {
return ( return (
<div> <div>
<main className="markdown-rendered theme-light">{children}</main> <main className= "theme-light">
{children}
</main>
</div> </div>
) )
} }

9
pages/index.js
View File

@ -1,15 +1,20 @@
import Layout, {siteTitle} from "../components/layout"; import Layout, {siteTitle} from "../components/layout";
import {getSinglePost, getGraphData, getDirectoryData, convertObject, getFlattenArray} from "../lib/utils"; import {getSinglePost, getGraphData, getDirectoryData, convertObject, getFlattenArray} from "../lib/utils";
import FolderTree from "../components/FolderTree"; import FolderTree from "../components/FolderTree";
import {Box} from '@mui/material'
export default function Home({content, graphdata, filenames, tree, flattenNodes, ...props}) { export default function Home({content, graphdata, filenames, tree, flattenNodes, ...props}) {
return ( return (
<Layout home> <Layout home>
<section> <div className = 'container'>
<nav className="nav-bar">
<FolderTree tree={tree} flattenNodes={flattenNodes}/> <FolderTree tree={tree} flattenNodes={flattenNodes}/>
</nav>
<main className="markdown-rendered">
<div dangerouslySetInnerHTML={{__html: content.data}}/> <div dangerouslySetInnerHTML={{__html: content.data}}/>
</section> </main>
</div>
</Layout> </Layout>
); );

25
pages/note/[id].js
View File

@ -3,11 +3,12 @@ import Link from 'next/link'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useEffect,useRef } from "react"; import { useEffect,useRef } from "react";
import Layout, { siteTitle } from "../../components/layout"; import Layout, { siteTitle } from "../../components/layout";
import { getPostListData, getSinglePost, getGraphData} from "../../lib/utils"; import {getPostListData, getSinglePost, getGraphData, convertObject, getDirectoryData} from "../../lib/utils";
import { Network } from "../../components/graph"; import { Network } from "../../components/graph";
import FolderTree from "../../components/FolderTree";
import {getFlattenArray} from "../../lib/utils";
export default function Home({ note, graphdata,tree, flattenNodes, ...props }) {
export default function Home({ note, graphdata, ...props }) {
var jsnx = require('jsnetworkx'); var jsnx = require('jsnetworkx');
//console.log("Note Page: ") //console.log("Note Page: ")
@ -57,14 +58,17 @@ export default function Home({ note, graphdata, ...props }) {
<Head> <Head>
{note.title && <meta name="title" content={note.title} />} {note.title && <meta name="title" content={note.title} />}
</Head> </Head>
<section <div className = 'container'>
> <nav className="nav-bar">
<FolderTree tree={tree} flattenNodes={flattenNodes}/>
</nav>
<div <div
className="article-body" className="markdown-rendered"
dangerouslySetInnerHTML={{__html:note.data}}> dangerouslySetInnerHTML={{__html:note.data}}>
</div> </div>
</section> </div>
<hr/>
</Layout> </Layout>
); );
@ -84,12 +88,15 @@ export async function getStaticProps({ params }) {
//console.log("params2", note) //console.log("params2", note)
const graphdata = getGraphData(); const graphdata = getGraphData();
//console.log("params3", params) //console.log("params3", params)
const tree = convertObject(getDirectoryData());
const flattenNodes = getFlattenArray(tree)
//console.log("note: ", params) //console.log("note: ", params)
return { return {
props: { props: {
note, note,
graphdata:graphdata, graphdata:graphdata,
tree: tree,
flattenNodes: flattenNodes
}, },
}; };
} }

9
styles/style.css
View File

@ -6,6 +6,10 @@ a:hover {
color: var(--text-accent-hover); color: var(--text-accent-hover);
} }
.container {
display: flex;
justify-content: center;
}
.markdown-rendered { .markdown-rendered {
font-size: 18px; font-size: 18px;
@ -14,10 +18,13 @@ a:hover {
background-color: var(--background-primary); background-color: var(--background-primary);
color: var(--text-normal); color: var(--text-normal);
font-family:var(--default-font); font-family:var(--default-font);
margin: auto;
padding: 20px; padding: 20px;
} }
.nav-bar {
width: 400px;
padding: 20px;
}
:root { :root {
--default-font: 'Inter', sans-serif; --default-font: 'Inter', sans-serif;
} }