WIP: Render backlink in MarkDown content component.

components/MDContent.js

@@ -2,9 +2,29 @@ import React from 'react';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import {useRouter} from 'next/router'
-import {Transformer} from "../lib/transformer";
+import Link from 'next/link'
 
-function MDContent({content,fileNames,  handleOpenNewContent}) {
+function BackLinks({linkList}) {
+
+    return (<ul>
+        {
+            (linkList != null && linkList.length > 0)
+                ?
+                linkList.map(aLink =>
+                    <li>
+                     <Link href={aLink.link}>
+                         <a>
+                             {aLink.title}
+                         </a>
+                     </Link>
+                    </li>
+                )
+                : <h1>No Back link found</h1>
+        }
+    </ul>);
+}
+
+function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {
 
     function handleInternalLinkClick() {
         //Processing fetching
@@ -12,16 +32,22 @@ function MDContent({content,fileNames,  handleOpenNewContent}) {
         //TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
         handleOpenNewContent(content)
     }
+
     const router = 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>
+                🌱 <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>
+            <button onClick={handleInternalLinkClick}>Click me</button>
+            <hr/>
+            <div>
+                <BackLinks linkList={backLinks}/>
+            </div>
         </div>
     );
 }

lib/transformer.js

@@ -8,11 +8,6 @@ import html from "remark-html";
 import frontmatter from "remark-frontmatter";
 import externalLinks from "remark-external-links";
 import highlight from "remark-highlight.js";
-import remarkRehype from 'remark-rehype'
-import rehypeStringify from 'rehype-stringify'
-import {createElement, Fragment, useEffect, useState} from 'react'
-import rehypeReact from 'rehype-react'
-import CustomLink from "../components/CustomLink";
 
 const postsDirectory = path.join(process.cwd(), 'posts')
 const isFile = fileName => {
@@ -29,11 +24,9 @@ export const Transformer = {
         if (indexOfFirst === -1) {
             return false
         }
-        var indexOfSecond = content.indexOf("---", (indexOfFirst + 1))
-        if (indexOfSecond !== -1) {
-            return true
-        }
-        return false
+        let indexOfSecond = content.indexOf("---", (indexOfFirst + 1));
+        return indexOfSecond !== -1;
+
     },
     getFrontMatterData: function (filecontent) {
         if (Transformer.haveFrontMatter(filecontent)) {
@@ -42,11 +35,12 @@ export const Transformer = {
         return {}
     },
 
-
-    getProcessor : function (content, {fileNames}) {
+    getHtmlContent: function (content, {fileNames}) {
         let htmlContent = []
         let internalLinks = []
-        return unified()
+        const sanitizedContent = Transformer.preprocessThreeDashes(content)
+
+        unified()
             .use(markdown, {gfm: true})
             .use(highlight)
             .use(externalLinks, {target: "_blank", rel: ['noopener']})
@@ -56,7 +50,14 @@ export const Transformer = {
                 pageResolver: function(pageName){
                     const name = [Transformer.parseFileNameFromPath(pageName)]
                     //console.log("\n\nwiki internal links", Transformer.parseFileNameFromPath(name[0]));
-                internalLinks.push(Transformer.parseFileNameFromPath(name[0]));
+
+                    const backLink = {
+                        title: name,
+                        link: Transformer.parseFileNameFromPath(name[0]),
+                        shortSummary: name
+                    }
+
+                    internalLinks.push(backLink);
                     return name
                 },
                 hrefTemplate: function(permalink){
@@ -68,18 +69,7 @@ export const Transformer = {
 
                 aliasDivider:"|"
             })
-            .use(remarkRehype)
-
-
-    },
-
-    getHtmlContent: function (content, {fileNames}) {
-        let htmlContent = []
-        let internalLinks = []
-        const sanitizedContent = Transformer.preprocessThreeDashes(content)
-        Transformer.getProcessor(content, fileNames)
-            // .use(rehypeReact, {createElement, Fragment})
-            .use(rehypeStringify)
+            .use(html)
             .process(sanitizedContent,
                 function (err, file) {
                     //console.log("asd", String(file).slice(0,50))
@@ -89,7 +79,6 @@ export const Transformer = {
             )
         htmlContent =  htmlContent.join("")
         htmlContent = htmlContent.split("---")
-        //console.log("ffffff ", htmlContent)
         return [htmlContent, internalLinks]
     },
 
@@ -158,10 +147,8 @@ export const Transformer = {
             //console.log("----", providedSanitizedFileName, possibleSanitizedFileName)
 
             //console.log("---", possibleSanitizedFileName, providedSanitizedFileName)
-            if (providedSanitizedFileName === possibleSanitizedFileName) {
-                return true
-            }
-            return false
+            return providedSanitizedFileName === possibleSanitizedFileName;
+
         })
         console.log("p---", possibleFilePath)
         return possibleFilePath[0]

lib/utils.js

@@ -3,18 +3,6 @@ import {Node} from "./node"
 import {Transformer} from "./transformer";
 
 const dirTree = require("directory-tree");
-
-function pathSelector(filename, allFilePaths){
-    if (filename.replace(".md", "") === "index"){
-        return "/index.md"
-    }
-    else if (filename.replace(".md", "") === "sidebar"){
-        return "/sidebar.md"
-    }
-    return allFilePaths.filter(f => !(f.endsWith("index.md") && f.endsWith("sidebar.md")))
-}
-
-
 const postsDirectory = path.join(process.cwd(), 'posts')
 
 export function getAllFileNames() {
@@ -63,7 +51,8 @@ export function getSinglePost(filename) {
 	return {
 		id:filename,
 		...currentFileFrontMatter,
-		data:htmlContent
+		data:htmlContent,
+        backLinks: backlinks
 	  }
 	
   }

pages/note/[id].js

@@ -10,43 +10,46 @@ import {
 } from "../../lib/utils";
 import FolderTree from "../../components/FolderTree";
 import {getFlattenArray} from "../../lib/utils";
-import MDContainer from "../../components/MDContainer";
-import {Transformer} from "../../lib/transformer";
+import MDContent from "../../components/MDContent";
 
-export default function Home({ note, fileNames,tree, flattenNodes}) {
+export default function Home({note, backLinks, fileNames, tree, flattenNodes}) {
     return (
         <Layout>
             <Head>
-                {note.title && <meta name="title" content={note.title} />}
+                {note.title && <meta name="title" content={note.title}/>}
             </Head>
-            <div className = 'container'>
+            <div className='container'>
                 <nav className="nav-bar">
                     <FolderTree tree={tree} flattenNodes={flattenNodes}/>
                 </nav>
-                <MDContainer post={note.data} fileNames = {fileNames}/>
+                <MDContent content={note.data} fileNames={fileNames} handleOpenNewContent={null} backLinks={backLinks}/>
             </div>
         </Layout>
     );
 }
+
 export async function getStaticPaths() {
     const allPostsData = getPostListData();
-    const paths = allPostsData.map(p => ({params: {id:p}}))
+    const paths = allPostsData.map(p => ({params: {id: p}}))
     return {
         paths,
-      fallback:false
+        fallback: false
     };
-  }
-export async function getStaticProps({ params }) {
+}
+
+export function getStaticProps({params}) {
     const note = getSinglePost(params.id);
     const tree = convertObject(getDirectoryData());
     const flattenNodes = getFlattenArray(tree)
     const fileNames = getAllFileNames()
+
     return {
         props: {
             note,
             tree: tree,
             flattenNodes: flattenNodes,
-            fileNames: fileNames
+            fileNames: fileNames,
+            backLinks: note.backLinks
         },
     };
 }