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

improve mdcontent component

Browse Source 
- added backlink group component that places all backlinks into a details element so the page is a little cleaner
- changes the "powered by" section to be more relevent to me
- show "no backlinks found" instead of details if no backlinks
- remove the alert at the top of every note
- formatting changes
This commit is contained in:
Triston Armstrong 2023-12-23 20:10:03 -06:00
parent ccab82f972
commit 2536c40517
1 changed files with 63 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
components/MDContent.js
View File

@ -1,63 +1,71 @@
import React from 'react'; import React from 'react';
import Alert from '@mui/material/Alert'; import { useRouter } from 'next/router'
import AlertTitle from '@mui/material/AlertTitle';
import {useRouter} from 'next/router'
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> <h3 className="backlink-heading">Link to this note</h3>
{(linkList != null && linkList.length > 0) {(linkList != null && linkList.length > 0)
? ?
<> <>
<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>
</>
: <> <p className="no-backlinks"> No backlinks found</p> </>}
</div>);
}
function MDContent({content, backLinks, handleOpenNewContent}) {
function handleInternalLinkClick() {
//Processing fetching
//pass result up to parent container
//TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
handleOpenNewContent(content)
}
useRouter();
return (
<div className="markdown-rendered">
<Alert severity="info">
<AlertTitle>Want to know more?</AlertTitle>
🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a
href="https://twitter.com/tuancm">@tuancm</a></span>
</Alert>
<div dangerouslySetInnerHTML={{__html: content}}/>
{/*<button onClick={handleInternalLinkClick}>Click me</button>*/}
{/*<hr/>*/}
<div>
<BackLinks linkList={backLinks}/>
</div> </div>
<hr/> )}
<footer>
<p>Powered by <a href="https://github.com/TuanManhCao/digital-garden">Mind Stone</a>, © 2022</p>
</footer>
</div> </div>
); </>
: <> <p className="no-backlinks"> No backlinks found</p> </>}
</div>);
} }
export default MDContent; function MDContent({ content, backLinks, handleOpenNewContent }) {
function _handleInternalLinkClick() {
//Processing fetching
//pass result up to parent container
//TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
handleOpenNewContent(content)
}
useRouter();
return (
<div className="markdown-rendered">
<div dangerouslySetInnerHTML={{ __html: content }} />
<BackLinksGroup links={backLinks} />
<hr />
<footer>
<p>Powered by <a href="https://gitlab.com/Tarmstrong95">Triston</a>, © {new Date().getFullYear()}</p>
</footer>
</div>
);
}
function BackLinksGroup({ links }) {
if (!links?.length) {
return (
<p className="no-backlinks"> No backlinks found</p>
)
}
return (
<details>
<summary>
BackLinks
</summary>
<BackLinks linkList={links} />
</details>
)
}
export default MDContent;