[Issue #23] Implement some tag, from .md to my vDom Objects.

SeeChen · Dec 15, 2024 · 9866fd7 · 9866fd7
1 parent 905963b
commit 9866fd7
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 1 deletion.
diff --git a/JavaScript/About/about.js b/JavaScript/About/about.js
@@ -260,6 +260,33 @@ const SeeChen_AboutPage_AboutSites = {
 
             window.myData.about.contentExpand.children[0].children[0].children = [e.target.dataset.originalObj];
 
+            var test_md = `# 一级标题
+## 二级标题
+
+###### test
+
+这是一个段落。
+
+- 无序列表项 1
+- 无序列表项 2
+
+1. 有序列表项 1
+2. 有序列表项 2
+
+**加粗文本**
+*斜体文本*
+***测试用例***
+
+#### _language_-about
+
+# aaa[_language_-about](https://seechen.github.io).
+
+eieieiei [seechen.github.io](#) is 
+
+> # 这是一个引用
+>> 这是一个子引用`
+            window.myData.about.contentExpand.children[1].children = window.md2vDom.convert(test_md);
+
             window.vDom.Patch(
                 document.querySelector("#about_ExpandContent"),
                 window.vDom.Diff(

diff --git a/JavaScript/General/footer.js b/JavaScript/General/footer.js
@@ -1,3 +1,14 @@
+/* 
+    File: footer.js (https://github.com/SeeChen/seechen.github.io/blob/main/JavaScript/General/footer.js).
+    Part of [seechen.github.io] (https://github.com/SeeChen/seechen.github.io).
+
+    Copyright (C) 2024 LEE SEE CHEN.
+
+    This file is licensed under the GNU General Public License v3.0 (GPLv3).
+    You can redistribute it and/or modify it under the terms of the GPLv3.
+    For more details, see <https://www.gnu.org/licenses/>. 
+*/
+
 
 export const SeeChen_Footer = {
 

diff --git a/JavaScript/General/md2vDom.js b/JavaScript/General/md2vDom.js
@@ -1,11 +1,158 @@
+/* 
+    File: md2vDom.js (https://github.com/SeeChen/seechen.github.io/blob/main/JavaScript/General/md2vDom.js).
+    Part of [seechen.github.io] (https://github.com/SeeChen/seechen.github.io).
+
+    Copyright (C) 2024 LEE SEE CHEN.
+
+    This file is licensed under the GNU General Public License v3.0 (GPLv3).
+    You can redistribute it and/or modify it under the terms of the GPLv3.
+    For more details, see <https://www.gnu.org/licenses/>. 
+*/
+
 
 export const Markdown2vDom = {
 
+    // Markdown rules reference https://www.markdownguide.org/basic-syntax/
+
+    getRealContent: (
+        content
+    ) => {
+
+        const contentObj = content.split("-");
+
+        return {
+            lang: contentObj[1] ? contentObj[1] : "",
+            content: contentObj[0]
+        }
+    },
+
     convert: (
         markdown
     ) => {
 
-        const vDomObj = {};
+        const vDomObj = [];
+
+        const lines = markdown.split("\n");
+        let inParagraph = false;
+
+        for(let line of lines) {
+
+            line.trim();
+
+            let vDomChildren = {}
+
+            line = line.replace(/\*\*\*(.*?)\*\*\*/gim, '<strong><em>$1</em></strong>');
+            line = line.replace(/\*\*(.*?)\*\*/gim, '<strong>$1</strong>');
+            line = line.replace(/\*(.*?)\*/gim, '<em>$1</em>');
+
+            line = line.replace(/\[(.*?)\]\((.*?)\)/gim, '<a href="$2" target="_blank">$1</a>');
+
+            if (line.startsWith(">> ")) {
+
+                line = line.replace(">> ", "");
+            } else if (line.startsWith("> ")) {
+                line = line.replace("> ", "");
+            }
+
+            if (/^###### (.*)/.test(line)) {
+                inParagraph = false;
+
+                var realContent = Markdown2vDom.getRealContent(line.replace(/^###### /, ''));
+
+                vDomChildren = {
+                    tag: "h6",
+                    props: {},
+                    lang: realContent.lang,
+                    children: [realContent.content]
+                };
+            } else if (/^##### (.*)/.test(line)) {
+                inParagraph = false;
+
+                var realContent = Markdown2vDom.getRealContent(line.replace(/^##### /, ''));
+
+                vDomChildren = {
+                    tag: "h5",
+                    props: {},
+                    lang: realContent.lang,
+                    children: [realContent.content]
+                };
+            } else if (/^#### (.*)/.test(line)) {
+                inParagraph = false;
+
+                var realContent = Markdown2vDom.getRealContent(line.replace(/^#### /, ''));
+
+                vDomChildren = {
+                    tag: "h4",
+                    props: {},
+                    lang: realContent.lang,
+                    children: [realContent.content]
+                };
+            } else if (/^### (.*)/.test(line)) {
+                inParagraph = false;
+
+                var realContent = Markdown2vDom.getRealContent(line.replace(/^### /, ''));
+
+                vDomChildren = {
+                    tag: "h3",
+                    props: {},
+                    lang: realContent.lang,
+                    children: [realContent.content]
+                };
+            } else if (/^## (.*)/.test(line)) {
+                inParagraph = false;
+
+                var realContent = Markdown2vDom.getRealContent(line.replace(/^## /, ''));
+
+                vDomChildren = {
+                    tag: "h2",
+                    props: {},
+                    lang: realContent.lang,
+                    children: [realContent.content]
+                };
+            } else if (/^# (.*)/.test(line)) {
+                inParagraph = false;
+
+                var realContent = Markdown2vDom.getRealContent(line.replace(/^# /, ''));
+
+                vDomChildren = {
+                    tag: "h1",
+                    props: {},
+                    lang: realContent.lang,
+                    children: [realContent.content]
+                };
+            }
+
+            else if (line.length === 0) {
+                inParagraph = false;
+            } else if (line.length > 0) {
+
+                if (inParagraph) {
+
+                    const lastDom = vDomObj[vDomObj.length - 1];
+                    if (lastDom.tag === "p") {
+                        lastDom.children = [`${lastDom.children[0]}<br>${line}`]
+                    }
+                } else {
+
+                    inParagraph = true;
+
+                    var realContent = Markdown2vDom.getRealContent(line);
+
+                    vDomChildren = {
+                        tag: "p",
+                        props: {
+                            style: "color: red;"
+                        },
+                        lang: realContent.lang,
+                        children: [realContent.content]
+                    };
+                }
+            }
+
+            if (Object.keys(vDomChildren).length > 0) {
+                vDomObj.push(vDomChildren);
+            }
+        }
 
         return vDomObj;
     }

diff --git a/JavaScript/Index/index.js b/JavaScript/Index/index.js
@@ -26,8 +26,10 @@ import { SeeChen_Pages404 } from "../General/Page404.js";
 import { SeeChen_ServicesPages } from "../Services/services.js";
 import { SeeChen_ProjectsPage } from "../Projects/projects.js";
 import { SeeChen_AboutPage } from "../About/about.js";
+import { Markdown2vDom } from "../General/md2vDom.js";
 
 window.vDom = vDom;
+window.md2vDom = Markdown2vDom;
 window.router = router;
 window.myTools = tools;
 window.eventBus = EventBus;

diff --git a/spa.html b/spa.html
@@ -54,6 +54,7 @@
 
         <!-- JavaScript -->
         <script src = "/JavaScript/General/VirtualDOM.js" type = "module"></script>
+        <script src = "/JavaScript/General/md2vDom.js" type = "module"></script>
         <script src = "/JavaScript/General/route.js" type = "module"></script>
         <script src = "/JavaScript/General/language.js" type = "module"></script>
         <script src = "/JavaScript/General/eventBus.js" type = "module"></script>