- Add Powered By Footer

- Some small styling
- Handle no Backlink case.
This commit is contained in:
Tuan Cao 2022-04-19 08:48:11 +07:00
parent d8806d6771
commit 5c3f6cb4ee
2 changed files with 22 additions and 12 deletions

View File

@ -34,7 +34,7 @@ const styleSheet = [{
selector: "node", selector: "node",
style: { style: {
"background-color": "#666", "background-color": "#666",
"font-size": "10px", "font-size": "12px",
"width": "20px", "width": "20px",
"height": "20px", "height": "20px",
"label":"data(label)" "label":"data(label)"
@ -48,7 +48,7 @@ const styleSheet = [{
style: { style: {
'width': 2, 'width': 2,
"height": 200, "height": 200,
'line-color': '#9a9a9a', 'line-color': '#b2b2b2',
'target-arrow-color': '#ccc', 'target-arrow-color': '#ccc',
// 'target-arrow-shape': 'triangle', // 'target-arrow-shape': 'triangle',
'curve-style': 'straight' 'curve-style': 'straight'
@ -72,11 +72,12 @@ function Graph({graph}) {
return ( return (
<> <>
<div className="right-bar-container"> <div className="right-bar-container">
<h3>Links to this notes</h3> <h3>Interactive Graph</h3>
<div <div
style={{ style={{
border: "1px solid", border: "1px solid #ddd",
backgroundColor: "#f5f6fe" backgroundColor: "#f5f6fe",
borderRadius:"8px"
}} }}
> >
<CytoscapeComponent <CytoscapeComponent

View File

@ -2,29 +2,29 @@ import React from 'react';
import Alert from '@mui/material/Alert'; import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle'; import AlertTitle from '@mui/material/AlertTitle';
import {useRouter} from 'next/router' import {useRouter} from 'next/router'
import Link from 'next/link'
function BackLinks({linkList}) { function BackLinks({linkList}) {
return (<div className="note-footer"> return (<div className="note-footer">
<h3 className="backlink-heading">Link to this note</h3>
{(linkList != null && linkList.length > 0) {(linkList != null && linkList.length > 0)
? ?
<> <>
<h3 className="backlink-heading">Link to this note</h3>
<div className="backlink-container"> <div className="backlink-container">
{linkList.map(aLink => {linkList.map(aLink =>
<div key={aLink.slug} className="backlink"> <div key={aLink.slug} className="backlink">
{/*<Link href={aLink.slug}>*/} {/*<Link href={aLink.slug}>*/}
<a href={aLink.slug} > <a href={aLink.slug}>
<p className="backlink-title">{aLink.title}</p> <p className="backlink-title">{aLink.title}</p>
<p className="backlink-preview">{aLink.shortSummary} </p> <p className="backlink-preview">{aLink.shortSummary} </p>
</a> </a>
{/*</Link>*/} {/*</Link>*/}
</div> </div>
)} )}
</div> </div>
</> </>
: <></>} : <> <p className="no-backlinks"> No backlinks found</p> </>}
</div>); </div>);
} }
@ -36,6 +36,7 @@ function MDContent({content, backLinks, handleOpenNewContent}) {
//TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent //TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
handleOpenNewContent(content) handleOpenNewContent(content)
} }
useRouter(); useRouter();
return ( return (
@ -51,6 +52,14 @@ function MDContent({content, backLinks, handleOpenNewContent}) {
<div> <div>
<BackLinks linkList={backLinks}/> <BackLinks linkList={backLinks}/>
</div> </div>
<hr/>
<footer>
<p>Made by Tuan Cao using <a href="https://github.com/TuanManhCao/digital-garden">Mind Stone</a>, © 2022</p>
<ul>
<li><a href="https://twitter.com/tuancm">Twitter</a></li>
<li><a href="https://github.com/tuanmanhcao">Github</a></li>
</ul>
</footer>
</div> </div>
); );
} }