improve mdcontent component

- 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

View File

@ -1,9 +1,7 @@
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>
@ -28,9 +26,9 @@ function BackLinks({linkList}) {
</div>); </div>);
} }
function MDContent({content, backLinks, handleOpenNewContent}) { function MDContent({ content, backLinks, handleOpenNewContent }) {
function handleInternalLinkClick() { function _handleInternalLinkClick() {
//Processing fetching //Processing fetching
//pass result up to parent container //pass result up to parent container
//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
@ -38,26 +36,36 @@ function MDContent({content, backLinks, handleOpenNewContent}) {
} }
useRouter(); useRouter();
return ( return (
<div className="markdown-rendered"> <div className="markdown-rendered">
<Alert severity="info"> <div dangerouslySetInnerHTML={{ __html: content }} />
<AlertTitle>Want to know more?</AlertTitle> <BackLinksGroup links={backLinks} />
🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a <hr />
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>
<hr/>
<footer> <footer>
<p>Powered by <a href="https://github.com/TuanManhCao/digital-garden">Mind Stone</a>, © 2022</p> <p>Powered by <a href="https://gitlab.com/Tarmstrong95">Triston</a>, © {new Date().getFullYear()}</p>
</footer> </footer>
</div> </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; export default MDContent;