82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { useRouter } from 'next/router'
|
|
|
|
interface LinkType {
|
|
slug: string
|
|
title: string
|
|
shortSummary: string
|
|
}
|
|
|
|
interface BackLinksProps {
|
|
linkList: LinkType[]
|
|
}
|
|
|
|
function BackLinks({ linkList }: BackLinksProps) {
|
|
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>);
|
|
}
|
|
|
|
|
|
interface MDContentProps {
|
|
content: string
|
|
backLinks: LinkType[]
|
|
}
|
|
|
|
function MDContent({ content, backLinks }: MDContentProps) {
|
|
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>
|
|
);
|
|
}
|
|
|
|
interface BackLinksGroupProps {
|
|
links: LinkType[]
|
|
}
|
|
|
|
function BackLinksGroup({ links }: BackLinksGroupProps) {
|
|
|
|
if (!links?.length) {
|
|
return (
|
|
<p className="no-backlinks"> No backlinks found</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<details>
|
|
<summary>
|
|
BackLinks
|
|
</summary>
|
|
<BackLinks linkList={links} />
|
|
</details>
|
|
)
|
|
}
|
|
|
|
export default MDContent;
|