Merge branch 'main' of github.com:walinejs/waline

walinejs · May 19, 2024 · 368d231 · 368d231
2 parents e5c9745 + ae30828
commit 368d231
Show file tree

Hide file tree

Showing 13 changed files with 789 additions and 618 deletions.
diff --git a/.markdownlint-cli2.mjs b/.markdownlint-cli2.mjs
@@ -19,7 +19,7 @@ export default {
         'span',
         'BiliBili',
         'MigrationTool',
-        'YouTube',
+        'VidStack',
       ],
     },
     MD035: {

diff --git a/docs/package.json b/docs/package.json
@@ -10,15 +10,16 @@
   "devDependencies": {
     "@fancyapps/ui": "5.0.36",
     "@vuepress/bundler-vite": "2.0.0-rc.9",
-    "@vuepress/helper": "2.0.0-rc.26",
-    "@vuepress/plugin-docsearch": "2.0.0-rc.26",
-    "@vuepress/plugin-redirect": "2.0.0-rc.26",
+    "@vuepress/helper": "2.0.0-rc.28",
+    "@vuepress/plugin-docsearch": "2.0.0-rc.28",
+    "@vuepress/plugin-redirect": "2.0.0-rc.29",
     "@waline/client": "workspace:*",
     "marked": "12.0.2",
     "mathjax-full": "3.2.2",
-    "vue": "3.4.26",
+    "vidstack": "1.11.21",
+    "vue": "3.4.27",
     "vuepress": "2.0.0-rc.9",
-    "vuepress-shared": "2.0.0-rc.38",
-    "vuepress-theme-hope": "2.0.0-rc.38"
+    "vuepress-shared": "2.0.0-rc.43",
+    "vuepress-theme-hope": "2.0.0-rc.43"
   }
 }
diff --git a/docs/src/.vuepress/components/MigrationTool.vue b/docs/src/.vuepress/components/MigrationTool.vue
@@ -1,45 +1,3 @@
-<template>
-  <form>
-    <div style="margin-bottom: 20px">
-      <div class="input-group">
-        <label for="from">{{ i18n.from }}&nbsp;</label>
-        <select id="from" v-model="from">
-          <option value="valine">Valine</option>
-          <option value="disqus">Disqus</option>
-          <option value="twikoo">Twikoo</option>
-          <option value="typecho">Typecho</option>
-          <option value="artalk">Artalk</option>
-          <option value="commento">Commento</option>
-        </select>
-      </div>
-      <div class="input-group">
-        <label for="to">&nbsp;{{ i18n.to }}&nbsp;</label
-        ><select id="to" v-model="to">
-          <option value="wleancloud">Waline LeanCloud</option>
-          <option value="wcloudbase">Waline CloudBase</option>
-          <option value="wsql">Waline MySQL/PostgreSQL/SQLite</option>
-          <option value="wgithub">Github</option>
-        </select>
-      </div>
-      <div class="input-group">&nbsp;{{ i18n.storage }}</div>
-    </div>
-    <div class="warning custom-block" v-if="from === 'typecho'">
-      <p class="custom-block-title">{{ i18n.tip }}</p>
-      <p v-html="i18n.typeecho" />
-    </div>
-    <div
-      class="warning custom-block"
-      v-else-if="from === 'valine' && to === 'wleancloud'"
-    >
-      <p class="custom-block-title">{{ i18n.tip }}</p>
-      <p v-text="i18n.tip" />
-    </div>
-    <div v-else>
-      <textarea :placeholder="i18n.placeholder" v-model="source"></textarea>
-      <button @click="click">{{ i18n.convert }}</button>
-    </div>
-  </form>
-</template>
 <script setup lang="ts">
 import { useLocaleConfig } from '@vuepress/helper/client';
 import { ref } from 'vue';
@@ -112,6 +70,7 @@ const click = (event: FormDataEvent) => {
 
   if (typeof act === 'function') {
     let text = act(source.value);
+
     console.log(text);
 
     if (typeof text !== 'string') {
@@ -123,6 +82,67 @@ const click = (event: FormDataEvent) => {
 };
 </script>
 
+<template>
+  <form>
+    <div style="margin-bottom: 20px">
+      <div class="input-group">
+        <label for="from">{{ i18n.from }}&nbsp;</label>
+
+        <select id="from" v-model="from">
+          <option value="valine">Valine</option>
+
+          <option value="disqus">Disqus</option>
+
+          <option value="twikoo">Twikoo</option>
+
+          <option value="typecho">Typecho</option>
+
+          <option value="artalk">Artalk</option>
+
+          <option value="commento">Commento</option>
+        </select>
+      </div>
+
+      <div class="input-group">
+        <label for="to">&nbsp;{{ i18n.to }}&nbsp;</label>
+
+        <select id="to" v-model="to">
+          <option value="wleancloud">Waline LeanCloud</option>
+
+          <option value="wcloudbase">Waline CloudBase</option>
+
+          <option value="wsql">Waline MySQL/PostgreSQL/SQLite</option>
+
+          <option value="wgithub">Github</option>
+        </select>
+      </div>
+
+      <div class="input-group">&nbsp;{{ i18n.storage }}</div>
+    </div>
+
+    <div v-if="from === 'typecho'" class="custom-block warning">
+      <p class="custom-block-title">{{ i18n.tip }}</p>
+
+      <p v-html="i18n.typeecho" />
+    </div>
+
+    <div
+      v-else-if="from === 'valine' && to === 'wleancloud'"
+      class="custom-block warning"
+    >
+      <p class="custom-block-title">{{ i18n.tip }}</p>
+
+      <p v-text="i18n.tip" />
+    </div>
+
+    <div v-else>
+      <textarea v-model="source" :placeholder="i18n.placeholder"></textarea>
+
+      <button @click="click">{{ i18n.convert }}</button>
+    </div>
+  </form>
+</template>
+
 <style lang="scss" scoped>
 textarea {
   width: 100%;

diff --git a/docs/src/.vuepress/components/NormalPage.ts b/docs/src/.vuepress/components/NormalPage.ts
@@ -1,13 +1,7 @@
 import { hasGlobalComponent } from '@vuepress/helper/client';
-import { usePageFrontmatter } from 'vuepress/client';
-import {
-  type ComponentOptions,
-  type VNode,
-  computed,
-  defineComponent,
-  h,
-  resolveComponent,
-} from 'vue';
+import type { ComponentOptions, SlotsType, VNode } from 'vue';
+import { computed, defineComponent, h, resolveComponent } from 'vue';
+import { usePageFrontmatter, withBase } from 'vuepress/client';
 import { RenderDefault } from 'vuepress-shared/client';
 
 import BreadCrumb from '@theme-hope/components/BreadCrumb';
@@ -27,39 +21,64 @@ import 'vuepress-theme-hope/styles/page.scss';
 export default defineComponent({
   name: 'NormalPage',
 
+  slots: Object as SlotsType<{
+    top?: () => VNode[] | VNode | null;
+    bottom?: () => VNode[] | VNode | null;
+
+    contentBefore?: () => VNode[] | VNode | null;
+    contentAfter?: () => VNode[] | VNode | null;
+
+    tocBefore?: () => VNode[] | VNode | null;
+    tocAfter?: () => VNode[] | VNode | null;
+  }>,
+
   setup(_props, { slots }) {
     const frontmatter = usePageFrontmatter<ThemeNormalPageFrontmatter>();
     const { isDarkmode } = useDarkmode();
     const themeLocale = useThemeLocaleData();
 
     const tocEnable = computed(
-      () => frontmatter.value.toc ?? themeLocale.value.toc ?? false,
+      () => frontmatter.value.toc ?? themeLocale.value.toc ?? true,
+    );
+
+    const headerDepth = computed(
+      () => frontmatter.value.headerDepth ?? themeLocale.value.headerDepth ?? 2,
     );
 
     return (): VNode =>
       h(
         'main',
-        { class: 'vp-page', id: 'main-content' },
+        { id: 'main-content', class: 'vp-page' },
         h(
           hasGlobalComponent('LocalEncrypt')
             ? (resolveComponent('LocalEncrypt') as ComponentOptions)
             : RenderDefault,
           () => [
             slots.top?.(),
+            frontmatter.value.cover
+              ? h(
+                  'div',
+                  { class: 'page-cover' },
+                  h('img', {
+                    src: withBase(frontmatter.value.cover),
+                    alt: '',
+                    'no-view': '',
+                  }),
+                )
+              : null,
             h(BreadCrumb),
             h(PageTitle),
             tocEnable.value
               ? h(
                   TOC,
+                  { headerDepth: headerDepth.value },
                   {
-                    headerDepth:
-                      frontmatter.value.headerDepth ??
-                      themeLocale.value.headerDepth ??
-                      2,
-                  },
-                  {
-                    before: () => slots.tocBefore?.(),
-                    after: () => slots.tocAfter?.(),
+                    before: slots.tocBefore
+                      ? (): VNode | VNode[] | null => slots.tocBefore!()
+                      : null,
+                    after: slots.tocAfter
+                      ? (): VNode | VNode[] | null => slots.tocAfter!()
+                      : null,
                   },
                 )
               : null,

diff --git a/docs/src/.vuepress/theme.ts b/docs/src/.vuepress/theme.ts
@@ -66,7 +66,7 @@ export default hopeTheme(
       },
 
       components: {
-        components: ['BiliBili', 'YouTube'],
+        components: ['BiliBili', 'VidStack'],
       },
 
       docsearch: {

diff --git a/docs/src/README.md b/docs/src/README.md
@@ -14,24 +14,32 @@ actions:
     type: secondary
 
 features:
+  - title: 轻量
+    icon: light
+    details: 53kb gzip 的完整客户端大小
+
+  - title: 完全免费部署
+    icon: free
+    details: 可免费部署在 Vercel 上
+
+  - title: 易于部署
+    icon: strong
+    details: 多种部署部署方式和存储服务支持
+
+  - title: 登录支持
+    icon: register
+    details: 在允许匿名评论的基础上，支持账号注册，保持身份
+
   - title: 自由评论
     icon: markdown
     details: 完全的 Markdown 支持，同时包含表情、数学公式、HTML 嵌入
     link: /guide/features/syntax.html
 
-  - title: 轻量
-    icon: light
-    details: 53kb gzip 的完整客户端大小
-
   - title: 强大的安全性
     icon: safe
     details: 内容校验、防灌水、保护敏感数据等
     link: /guide/features/safety.html
 
-  - title: 登录支持
-    icon: register
-    details: 在允许匿名评论的基础上，支持账号注册，保持身份
-
   - title: 文章反应
     icon: reaction
     details: 快速表达你对文章的态度
@@ -42,13 +50,5 @@ features:
     details: 通过 <1kb 代码可靠统计文章浏览量
     link: /guide/features/pageview.html
 
-  - title: 完全免费部署
-    icon: free
-    details: 可免费部署在 Vercel 上
-
-  - title: 易于部署
-    icon: strong
-    details: 多种部署部署方式和存储服务支持
-
 footer: GPL-2.0 协议 | Copyright © 2020-present <a href="https://github.com/lizheming" rel="noopener noreferrer " target="_blank">lizheming</a> | 主题使用 <a href="https://vuepress-theme-hope.github.io/v2/zh/" rel="noopener noreferrer " target="_blank">vuepress-theme-hope</a>
 ---
diff --git a/docs/src/en/README.md b/docs/src/en/README.md
@@ -14,24 +14,32 @@ actions:
     type: secondary
 
 features:
+  - title: LightWeight
+    icon: light
+    details: Full client size of 53kb gzip
+
+  - title: Completely free
+    icon: free
+    details: Can be deployed on Vercel for free
+
+  - title: Easy to deploy
+    icon: strong
+    details: Multiple deployment methods and storage service support
+
+  - title: Login support
+    icon: register
+    details: Anonymous comments, account registration and social login are supported
+
   - title: Comment the way you like
     icon: markdown
     details: Full Markdown support, with emojis, math equations, image uploads, and HTML embedding support
     link: /en/guide/features/syntax.html
 
-  - title: LightWeight
-    icon: light
-    details: Full client size of 53kb gzip
-
   - title: Improved Security
     icon: safe
     details: Content verification, anti-spamming, protection of sensitive data, and more
     link: /en/guide/features/safety.html
 
-  - title: Login support
-    icon: register
-    details: Anonymous comments, account registration and social login are supported
-
   - title: Article Reaction
     icon: reaction
     details: Quickly show your attitude towards the article
@@ -42,13 +50,5 @@ features:
     details: Count pageviews accurately with < 1kb code
     link: /en/guide/features/pageview.html
 
-  - title: Completely free
-    icon: free
-    details: Can be deployed on Vercel for free
-
-  - title: Easy to deploy
-    icon: strong
-    details: Multiple deployment methods and storage service support
-
 footer: GPL-2.0 LICENSE | Copyright © 2020-present <a href="https://github.com/lizheming" rel="noopener noreferrer " target="_blank">lizheming</a> | Theme by <a href="https://vuepress-theme-hope.github.io/v2/" rel="noopener noreferrer " target="_blank">vuepress-theme-hope</a>
 ---
diff --git a/docs/src/en/guide/get-started/README.md b/docs/src/en/guide/get-started/README.md
@@ -128,4 +128,4 @@ Here is how you can add Waline to your web page or website:
 
 An enthusiastic Waline user made the following video tutorial. If the instructions above aren't clear, you can refer to the video:
 
-<YouTube id="SzEHzsme8uY" />
+<VidStack src="https://www.youtube.com/watch?v=SzEHzsme8uY" />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -128,4 +128,4 @@ Here is how you can add Waline to your web page or website:

		An enthusiastic Waline user made the following video tutorial. If the instructions above aren't clear, you can refer to the video:

		<YouTube id="SzEHzsme8uY" />
		<VidStack src="https://www.youtube.com/watch?v=SzEHzsme8uY" />