From 2536c40517502b43ad8763b03622704a98170501 Mon Sep 17 00:00:00 2001
From: Triston Armstrong <tarmstrong95@proton.me>
Date: Sat, 23 Dec 2023 20:10:03 -0600
Subject: [PATCH] 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
---
 components/MDContent.js | 118 +++++++++++++++++++++-------------------
 1 file changed, 63 insertions(+), 55 deletions(-)

diff --git a/components/MDContent.js b/components/MDContent.js
index 3564342..4ca224e 100644
--- a/components/MDContent.js
+++ b/components/MDContent.js
@@ -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;
\ No newline at end of file
+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;