Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: markdown load slow #307

Merged
merged 3 commits into from
Mar 19, 2024
Merged

fix: markdown load slow #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
048ea8a
fix: markdown load slow
LiusCraft Mar 15, 2024
a3b7ef4
chore: rm log
LiusCraft Mar 15, 2024
b0af2f0
fix: timeout to load tocs
LiusCraft Mar 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 12 additions & 13 deletions cmd/gopcomm/yap/article_yap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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);
Expand All @@ -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
Expand Down Expand Up @@ -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) => {
Expand All @@ -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 =======*/
Expand Down Expand Up @@ -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
Copy link

@nighca nighca Mar 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

通过 window.xxx 作为事件 handler 不是常规的做法，也有明显的问题

这里 MarkdownViewer 是个 vue component，可以通过 vue component 的事件来做，比如把 getArticleToc 添加到上边 methods 里，然后在模板中绑定事件：

<markdown-viewer :md="article.Content" style="height: auto;" @change="getArticleToc"></markdown-viewer>

对应地在 MarkdownViewer 中去 emit change 事件即可；

详见 https://vuejs.org/guide/components/events.html#component-events

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我最开始是这样去做的，它无法生效

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

那先保留 window.mdChange 的做法，然后在这里注释记个 TODO 吧

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

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
Expand Down
1 change: 0 additions & 1 deletion cmd/gopcomm/yap/layout_yap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
18 changes: 14 additions & 4 deletions cmd/gopcomm/yap/markdown-vue/src/components/MarkdownViewer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: TODO 中说明下要“do”什么会更好。这边只说了问题，没说要做什么

// 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 = ""
Expand Down Expand Up @@ -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上
Expand Down
Loading
Loading