Merge pull request #307 from LiusCraft/fix/article-view

fix: markdown load slow
goplus · Mar 19, 2024 · 89e7dbd · 89e7dbd
2 parents c421c81 + b0af2f0
commit 89e7dbd
Show file tree

Hide file tree

Showing 5 changed files with 34,179 additions and 33,901 deletions.
diff --git a/cmd/gopcomm/yap/article_yap.html b/cmd/gopcomm/yap/article_yap.html
@@ -230,8 +230,7 @@ <h1 class="my-4 text-3xl font-extrabold leading-tight text-gray-900">
 
                     <hr class="hr-edge-weak" style="margin: 15px 0;">
                 </header>
-
-                <markdown-viewer :md="article.Content" style="height: auto;"></markdown-viewer>
+                <markdown-viewer  :md="article.Content" style="height: auto;"></markdown-viewer>
             </div>
 
             <!-- Toc -->
@@ -428,8 +427,8 @@ <h1 class="my-4 text-3xl font-extrabold leading-tight text-gray-900">
                 </div>
 
                 <hr class="hr-edge-weak" style="margin: 15px 0;">
+
             </header>
-
             <markdown-viewer :md="article.Content" style="height: auto;"></markdown-viewer>
         </div>
 
@@ -471,13 +470,14 @@ <h1 class="my-4 text-3xl font-extrabold leading-tight text-gray-900">
     </div>
 
     <script type="module">
-        const { reactive, toRefs, ref, h } = Vue;
+        const { reactive, toRefs, ref, h, nextTick } = Vue;
 
         /*======= article related =======*/
         const originArticle = {{.Article}};
         const likeState = {{.LikeState}}
         const user = {{.User}}
         const article = ref({{.Article}});
+        article.value.Content = ""
 
         /*======= translate related =======*/
         const showFailedTrans = ref(false);
@@ -499,11 +499,9 @@ <h1 class="my-4 text-3xl font-extrabold leading-tight text-gray-900">
         const isOrigin = ref(true)
         function selectDropdown(key) {
             if (key === 'original' && !isOrigin.value) {
-                console.log("origin")
                 article.value = originArticle
                 isOrigin.value = true
             } else if (key === 'english' && isOrigin.value) {
-                console.log("english")
                 // translate
                 if (transArticle.Content) {
                     article.value = transArticle
@@ -546,10 +544,11 @@ <h1 class="my-4 text-3xl font-extrabold leading-tight text-gray-900">
         }
 
         /*======= toc related =======*/
-        const toc = ref([]);
+        const toc = ref([
+            "Loading..."
+        ]);
         function getArticleToc() {
             toc.value = window.GoplusMarkdown.MarkdownViewer.methods.getToc();
-
             let result = [];
             const stack = [{ children: result }];
             toc.value.forEach((item) => {
@@ -562,7 +561,6 @@ <h1 class="my-4 text-3xl font-extrabold leading-tight text-gray-900">
             });
 
             toc.value = result;
-            // console.log( toc.value)
         }
 
         /*======= share related =======*/
@@ -628,21 +626,22 @@ <h1 class="my-4 text-3xl font-extrabold leading-tight text-gray-900">
                 shareToFacebook,
                 shareToTwitter,
                 selectDropdown,
-                likeArticle,
+                likeArticle
             },
             components: {
                 MarkdownViewer: window.GoplusMarkdown.MarkdownViewer
             },
             mounted() {
+                // set markdown change callback function
+                // look cmd/gopcomm/yap/markdown-vue/src/components/MarkdownViewer.vue
+                window.mdChange=getArticleToc
+                article.value.Content = originArticle.Content
                 // every video must new plyr
                 const video = document.querySelectorAll('video');
                 for (var i = 0; i < video.length; i++) {
                     const player = new Plyr(video[i], { captions: { active: true, update: true, language: 'en' } });
                 }
                 var htmlStr = document.documentElement.outerHTML;
-
-                // get article toc
-                getArticleToc();
             },
             watch: {
                 // automatically close notification after 3 seconds

diff --git a/cmd/gopcomm/yap/layout_yap.html b/cmd/gopcomm/yap/layout_yap.html
@@ -23,7 +23,6 @@
     <link href="https://fonts.cdnfonts.com/css/inter" rel="stylesheet" />
     <link rel="preconnect" href="https://fonts.proxy.ustclug.org" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.proxy.ustclug.org/css2?family=Noto+Sans+SC&display=swap" rel="stylesheet" />
     <style type="text/css" media="screen, print">
         body {
             font-family: "Inter", "Noto Sans SC";

diff --git a/cmd/gopcomm/yap/markdown-vue/src/components/MarkdownViewer.vue b/cmd/gopcomm/yap/markdown-vue/src/components/MarkdownViewer.vue
@@ -3,14 +3,18 @@
 </template>
 
 <script>
+import 'https://goplus-builder.qiniu.io/widgets/loader.js';
 import Plyr from 'plyr';
-import 'plyr/dist/plyr.css'
-import 'https://goplus-builder.qiniu.io/widgets/loader.js'
+import 'plyr/dist/plyr.css';
 
-import 'https://builder.goplus.org/widgets/loader.js'
+import 'https://builder.goplus.org/widgets/loader.js';
 
 var cherrInstance = null
-
+// this is markdown change callback
+// TODO: In order to change the callback function by article_yap.html, this is the worst way to do this.
+// It should use the vue event to handle it, but the current attempt does not work.
+window.mdChange = ()=>{
+}
 var vtt_src = ""
 
 // var origin_vtt_src = ""
@@ -92,6 +96,12 @@ function initCherryMD(value, config) {
     cherrInstance = new Cherry({
         id: 'markdown-container',                    
         value: defaultValue,
+        callback: {
+            // In order to change the callback function, here is the reference relationship
+            afterChange: ()=>{
+                window.mdChange()
+            }
+        },
         customSyntax: {
             importHook: {
                 syntaxClass: CustomHookA, // 将自定义语法对象挂载到 importHook.syntaxClass上