- Show short summary in Backlink section

- Extract content from refered markdown file.

components/MDContent.js

@@ -18,7 +18,7 @@ function BackLinks({linkList}) {
                         <Link href={aLink.slug}>
                             <a >
                                     <p className="backlink-title">{aLink.title}</p>
-                                    <p className="backlink-preview">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum  </p>
+                                    <p className="backlink-preview">{aLink.shortSummary} </p>
                             </a>
                         </Link>
 
@@ -50,8 +50,8 @@ function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {
                 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/>
+            {/*<hr/>*/}
             <div>
                 <BackLinks linkList={backLinks}/>
             </div>

lib/utils.js

@@ -1,6 +1,29 @@
 import path from 'path'
 import {Node} from "./node"
 import {Transformer} from "./transformer";
+import unified from "unified";
+import markdown from "remark-parse";
+import {toString} from 'mdast-util-to-string'
+
+export function getContent(filename) {
+    let { currentFilePath} = getFileNames(filename);
+    //console.log("currentFilePath: ", currentFilePath)
+    if (currentFilePath === undefined || currentFilePath == null) return null
+    return  Node.readFileSync(currentFilePath)
+}
+
+export function getShortSummary(filename) {
+    const content = getContent(filename)
+    if (content === undefined || content === null) {
+        return
+    }
+
+    const tree = unified().use(markdown)
+        .parse(content)
+    let plainText = toString(tree)
+    return plainText.split(" ").splice(0, 40).join(" ")
+}
+
 
 const dirTree = require("directory-tree");
 const postsDirectory = path.join(process.cwd(), 'posts')
@@ -78,6 +101,8 @@ export function constructBackLinks() {
                 }
                 edges.push(anEdge)
                 if (nodes.findIndex(aNode => aNode.slug === aLink.slug) === -1) {
+                    aLink.shortSummary = getShortSummary(aLink.slug)
+                    console.log(aLink.shortSummary)
                     nodes.push(aLink)
                 }
             })

package.json

@@ -23,6 +23,7 @@
     "fs": "^0.0.1-security",
     "gray-matter": "^4.0.2",
     "jsnetworkx": "^0.3.4",
+    "mdast-util-to-string": "^3.1.0",
     "next": "12",
     "path": "^0.12.7",
     "react": "^17.0.2",

styles/style.css

@@ -12,14 +12,13 @@ a:hover {
     height: 100%;
     overflow: hidden;
     position: relative;
-    display: flex;
     flex-direction: row;
     justify-content: center;
 }
 /* Foooter section BEGIN */
 .note-footer {
     display: block;
-    background-color: rgba(238, 238, 238, 0.8);
+    background-color: rgba(238, 238, 238, 0.5);
     border-radius: 16px;
     margin-top: 24px;
     padding: 16px;
@@ -55,7 +54,7 @@ a:hover {
 }
 
 .backlink-container .backlink:hover {
-    background-color: rgba(180, 177, 177, 0.3);
+    background-color: rgba(199, 199, 199, 0.3);
 }
 
 .backlink-container  .backlink-title {

yarn.lock

@@ -1488,6 +1488,11 @@ mdast-util-to-string@^2.0.0:
   resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz"
   integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==
 
+mdast-util-to-string@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9"
+  integrity sha512-n4Vypz/DZgwo0iMHLQL49dJzlp7YtAJP+N07MZHpjPf/5XJuHUWstviF4Mn2jEiR/GNmtnRRqnwsXExk3igfFA==
+
 mdast-util-wiki-link@^0.0.2:
   version "0.0.2"
   resolved "https://registry.npmjs.org/mdast-util-wiki-link/-/mdast-util-wiki-link-0.0.2.tgz"