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

fix: markdown load slow

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

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";

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上