2020-11-28 15:45:01 +00:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import Link from 'next/link'
|
2020-11-30 11:29:34 +00:00
|
|
|
import { useRouter } from 'next/router'
|
|
|
|
|
import { useEffect,useRef } from "react";
|
2020-11-28 15:45:01 +00:00
|
|
|
import Layout, { siteTitle } from "../../components/layout";
|
2020-11-30 11:29:34 +00:00
|
|
|
import { getPostListData, getSinglePost, getGraphData} from "../../lib/post";
|
|
|
|
|
import { Network } from "../../components/graph";
|
|
|
|
|
import Cytoscape from "cytoscape";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default function Home({ note, graphdata, ...props }) {
|
|
|
|
|
var jsnx = require('jsnetworkx');
|
|
|
|
|
|
|
|
|
|
//console.log("Note Page: ")
|
|
|
|
|
//console.log("Index Page Props: ", props /* backlinks, filenames*/)
|
|
|
|
|
|
|
|
|
|
const backlinks = graphdata.filter(g => g.data.target === note.id)
|
|
|
|
|
|
|
|
|
|
const ref = useRef(null);
|
|
|
|
|
const router = useRouter()
|
|
|
|
|
var G;
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (ref && ref.current){
|
|
|
|
|
G = Network({el:ref.current, graphdata, current:note.id, router, allNodes:false})
|
|
|
|
|
}
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (backlinks.length > 0){
|
|
|
|
|
const sideBox = document.getElementById("side-graph-box");
|
|
|
|
|
const Backlink = (data) => (
|
|
|
|
|
<div className="backlink-box">
|
|
|
|
|
<Link href={data.id === "index" ? "/" : `/note/${data.id}`}>
|
|
|
|
|
<a>
|
|
|
|
|
{data.title ? data.title : data.id}
|
|
|
|
|
</a>
|
|
|
|
|
</Link>
|
|
|
|
|
</div>
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
//sideBox
|
|
|
|
|
}
|
|
|
|
|
},[])
|
|
|
|
|
|
2020-11-28 15:45:01 +00:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Layout home>
|
2020-11-30 11:29:34 +00:00
|
|
|
<Head>
|
|
|
|
|
{note.title && <meta name="title" content={note.title} />}
|
|
|
|
|
{note.canonical && <meta name="canonical_url" content={note.canonical} />}
|
|
|
|
|
{note.description && <meta name="description" content={note.description} />}
|
|
|
|
|
|
|
|
|
|
</Head>
|
2020-11-28 15:45:01 +00:00
|
|
|
<section
|
|
|
|
|
>
|
2020-12-01 03:28:42 +00:00
|
|
|
{/* COVER IMAGE */}
|
|
|
|
|
{note.cover && <img src={note.cover} />}
|
|
|
|
|
|
|
|
|
|
{/* TITLE */}
|
2020-11-30 11:29:34 +00:00
|
|
|
{note.title && <h1>{note.title}</h1>}
|
2020-12-01 03:28:42 +00:00
|
|
|
|
2020-11-28 15:45:01 +00:00
|
|
|
<div
|
|
|
|
|
className="article-body"
|
|
|
|
|
dangerouslySetInnerHTML={{__html:note.data}}>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2020-11-30 11:29:34 +00:00
|
|
|
<hr/>
|
|
|
|
|
<div id="graph-box" ref={ref}>
|
|
|
|
|
|
|
|
|
|
</div>
|
2020-11-28 15:45:01 +00:00
|
|
|
</Layout>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
export async function getStaticPaths() {
|
|
|
|
|
const allPostsData = await getPostListData();
|
2020-12-01 03:28:42 +00:00
|
|
|
const paths = allPostsData.map(p => ({params: {id:p}}))
|
2020-11-30 11:29:34 +00:00
|
|
|
//console.log("paths", paths)
|
2020-11-28 15:45:01 +00:00
|
|
|
return {
|
|
|
|
|
paths,
|
|
|
|
|
fallback:false
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
export async function getStaticProps({ params }) {
|
2020-12-01 03:28:42 +00:00
|
|
|
//console.log("params1", params.id)
|
2020-11-28 15:45:01 +00:00
|
|
|
const note = await getSinglePost(params.id);
|
2020-12-01 03:28:42 +00:00
|
|
|
//console.log("params2", params)
|
2020-11-30 11:29:34 +00:00
|
|
|
const graphdata = getGraphData();
|
2020-12-01 03:28:42 +00:00
|
|
|
//console.log("params3", params)
|
2020-11-30 11:29:34 +00:00
|
|
|
|
|
|
|
|
//console.log("note: ", params)
|
2020-11-28 15:45:01 +00:00
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
note,
|
2020-11-30 11:29:34 +00:00
|
|
|
graphdata:graphdata,
|
2020-11-28 15:45:01 +00:00
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
}
|
