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:
parent
ccab82f972
commit
2536c40517
@ -1,63 +1,71 @@
|
||||
import React from 'react';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import AlertTitle from '@mui/material/AlertTitle';
|
||||
import {useRouter} from 'next/router'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
function BackLinks({linkList}) {
|
||||
function BackLinks({ linkList }) {
|
||||
|
||||
return (<div className="note-footer">
|
||||
<h3 className="backlink-heading">Link to this note</h3>
|
||||
{(linkList != null && linkList.length > 0)
|
||||
?
|
||||
<>
|
||||
return (<div className="note-footer">
|
||||
<h3 className="backlink-heading">Link to this note</h3>
|
||||
{(linkList != null && linkList.length > 0)
|
||||
?
|
||||
<>
|
||||
|
||||
<div className="backlink-container">
|
||||
{linkList.map(aLink =>
|
||||
<div key={aLink.slug} className="backlink">
|
||||
{/*<Link href={aLink.slug}>*/}
|
||||
<a href={aLink.slug}>
|
||||
<p className="backlink-title">{aLink.title}</p>
|
||||
<p className="backlink-preview">{aLink.shortSummary} </p>
|
||||
</a>
|
||||
{/*</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 className="backlink-container">
|
||||
{linkList.map(aLink =>
|
||||
<div key={aLink.slug} className="backlink">
|
||||
{/*<Link href={aLink.slug}>*/}
|
||||
<a href={aLink.slug}>
|
||||
<p className="backlink-title">{aLink.title}</p>
|
||||
<p className="backlink-preview">{aLink.shortSummary} </p>
|
||||
</a>
|
||||
{/*</Link>*/}
|
||||
</div>
|
||||
<hr/>
|
||||
<footer>
|
||||
<p>Powered by <a href="https://github.com/TuanManhCao/digital-garden">Mind Stone</a>, © 2022</p>
|
||||
</footer>
|
||||
)}
|
||||
</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;
|
||||
|
Loading…
Reference in New Issue
Block a user