From 97668446142970ea4865fa54898d3fc0958e493d Mon Sep 17 00:00:00 2001
From: Tuan Cao <caomanhtuanbsb@gmail.com>
Date: Fri, 8 Apr 2022 14:44:45 +0700
Subject: [PATCH] - Show short summary in Backlink section - Extract content
 from refered markdown file.

---
 components/MDContent.js |  6 +++---
 lib/utils.js            | 25 +++++++++++++++++++++++++
 package.json            |  1 +
 styles/style.css        |  5 ++---
 yarn.lock               |  5 +++++
 5 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/components/MDContent.js b/components/MDContent.js
index 274a4ce..f521ce0 100644
--- a/components/MDContent.js
+++ b/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>
-            <hr/>
+            {/*<button onClick={handleInternalLinkClick}>Click me</button>*/}
+            {/*<hr/>*/}
             <div>
                 <BackLinks linkList={backLinks}/>
             </div>
diff --git a/lib/utils.js b/lib/utils.js
index 2ce4e17..dc69103 100644
--- a/lib/utils.js
+++ b/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)
                 }
             })
diff --git a/package.json b/package.json
index 1951ffe..7f3c13a 100644
--- a/package.json
+++ b/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",
diff --git a/styles/style.css b/styles/style.css
index 0c206f4..37222c7 100644
--- a/styles/style.css
+++ b/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 {
diff --git a/yarn.lock b/yarn.lock
index 77205e9..4d0a625 100644
--- a/yarn.lock
+++ b/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"