@sugarat/theme 0.2.29 → 0.3.0

package/src/components/CommentArtalk.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { useData, useRoute } from 'vitepress'
+import type Artalk from 'artalk'
+
+import { useBlogConfig } from '../composables/config/blog'
+
+const { isDark, page } = useData()
+const el = ref<HTMLDivElement>()
+
+const route = useRoute()
+
+const artalk = ref<Artalk>()
+
+const { comment } = useBlogConfig()
+const commentConfig = computed(() => {
+  if (comment && 'type' in comment && comment.type === 'artalk') {
+    return comment.options
+  }
+
+  return false
+})
+
+onMounted(() => {
+  // CDN 异步加载，有优化空间
+  const observer = new MutationObserver((mutationsList, observer) => {
+    if (window.Artalk && commentConfig.value && el.value) {
+      artalk.value = window.Artalk.init({
+        el: el.value,
+        darkMode: isDark.value,
+        pageKey: route.path,
+        pageTitle: page.value.title,
+        server: commentConfig.value?.server,
+        site: commentConfig.value?.site,
+      })
+      observer.disconnect()
+    }
+  })
+
+  observer.observe(document.head, { subtree: true, childList: true, attributes: true, attributeFilter: ['id'] })
+})
+
+watch(() => route.path, () => {
+  if (artalk.value) {
+    artalk.value.update({
+      pageKey: route.path,
+      pageTitle: page.value.title,
+    })
+    artalk.value.reload()
+  }
+})
+
+onUnmounted(() => {
+  if (artalk.value) {
+    artalk.value.destroy()
+  }
+})
+
+watch(isDark, () => {
+  if (artalk.value) {
+    artalk.value.setDarkMode(isDark.value)
+  }
+})
+</script>
+
+<template>
+  <div v-if="commentConfig" ref="el" class="artalk-container" />
+</template>
+
+<style lang="scss" scoped>
+.artalk-container {
+  --at-color-main: var(--vp-c-brand-2);
+}
+</style>

package/src/components/CommentGiscus.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { computed, ref, watch } from 'vue'
+import Giscus from '@giscus/vue'
+import { useBlogConfig } from '../composables/config/blog'
+
+// 读取配制
+const { comment } = useBlogConfig()
+const commentConfig = computed(() => {
+  if (!comment) {
+    return false
+  }
+  if ('type' in comment && comment.type === 'giscus') {
+    return comment.options
+  }
+  else if (!('type' in comment)) {
+    return comment
+  }
+
+  return false
+})
+
+const { isDark } = useData()
+
+const route = useRoute()
+const showComment = ref(true)
+watch(
+  () => route.path,
+  () => {
+    showComment.value = false
+    setTimeout(() => {
+      showComment.value = true
+    }, 200)
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<template>
+  <Giscus
+    v-if="commentConfig" :repo="commentConfig.repo" :repo-id="commentConfig.repoId"
+    :category="commentConfig.category" :category-id="commentConfig.categoryId"
+    :mapping="commentConfig.mapping || 'pathname'" reactions-enabled="1" emit-metadata="0"
+    :input-position="commentConfig.inputPosition || 'top'" :theme="isDark ? 'dark' : 'light'"
+    :lang="commentConfig.lang || 'zh-CN'" :loading="commentConfig.loading || 'eager'"
+  />
+</template>

package/src/composables/config/blog.ts

@@ -108,11 +108,6 @@ export function useBlogThemeMode() {
   return inject(configSymbol)!.value?.blog?.blog ?? true
 }
 
-export function useGiscusConfig() {
-  const blogConfig = useConfig()
-  return blogConfig.config?.blog?.comment
-}
-
 export function useArticles() {
   const blogConfig = useConfig()
   const articles = computed(() => blogConfig.config?.blog?.pagesData || [])

package/src/composables/config/index.ts

@@ -100,7 +100,9 @@ export namespace Theme {
     type: string
   }
 
-  export interface CommentConfig extends GiscusConfig {
+  export type CommentConfig = ((GiscusOption & CommentCommonConfig) | GiscusConfig | ArtalkConfig)
+
+  export interface CommentCommonConfig {
     /**
      * @default '评论'
      */
@@ -116,7 +118,15 @@ export namespace Theme {
      */
     mobileMinify?: boolean
   }
-  export interface GiscusConfig {
+  export interface GiscusConfig extends CommentCommonConfig {
+    type: 'giscus'
+    options: GiscusOption
+  }
+  export interface ArtalkConfig extends CommentCommonConfig {
+    type: 'artalk'
+    options: ArtalkOption
+  }
+  export interface GiscusOption {
     repo: Repo
     repoId: string
     category: string
@@ -126,6 +136,10 @@ export namespace Theme {
     lang?: string
     loading?: 'lazy' | 'eager'
   }
+  export interface ArtalkOption {
+    site: string
+    server: string
+  }
 
   export interface HotArticle {
     title?: string
@@ -340,7 +354,7 @@ export namespace Theme {
     pagesData: PageData[]
     srcDir?: string
     author?: string
-    hotArticle?: HotArticle
+    hotArticle?: HotArticle | false
     home?: HomeBlog
     /**
      * 本地全文搜索定制
@@ -351,7 +365,8 @@ export namespace Theme {
     search?: SearchConfig
     /**
      * 配置评论
-     * power by https://giscus.app/zh-CN
+     * giscus: https://giscus.app/zh-CN
+     * artalk: https://artalk.js.org/
      */
     comment?: CommentConfig | false
     /**
@@ -423,6 +438,8 @@ export namespace Theme {
      * 详见 https://oml2d.com/options/Options.html
      */
     oml2d?: Oml2dOptions
+    homeTags?: boolean
+    buttonAfterArticle?: ButtonAfterArticleConfig | false
   }
 
   export interface BackToTop {
@@ -508,4 +525,20 @@ export namespace Theme {
      */
     handleChangeSlogan?: (oldSlogan: string) => string | Promise<string>
   }
+  export interface ButtonAfterArticleConfig {
+    openTitle?: string
+    closeTitle?: string
+    content?: string
+    icon?: 'aliPay' | 'wechatPay' | string
+    /**
+     * 按钮尺寸
+     * @default 'default'
+     */
+    size?: 'small' | 'default' | 'large'
+    /**
+     * 默认展开
+     * @default false
+     */
+    expand?: boolean
+  }
 }

package/src/constants/svg.ts

@@ -52,3 +52,26 @@ export const themeSVG = `<svg width="128" height="128" viewBox="0 0 24 24" xmlns
 export const icpSVG = '<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" data-v-2f084f89=""><title data-v-2f084f89="">ICP备案号</title><path d="M778.24 163.84c-76.8-40.96-165.888-61.44-269.312-61.44s-192.512 20.48-269.312 61.44h-133.12l23.552 337.92c8.192 113.664 67.584 217.088 162.816 280.576l215.04 144.384 215.04-144.384c96.256-63.488 155.648-166.912 163.84-280.576l23.552-337.92H778.24z m47.104 333.824c-7.168 94.208-56.32 181.248-135.168 233.472l-181.248 120.832L327.68 731.136c-78.848-53.248-129.024-139.264-135.168-233.472L173.056 225.28h136.192v-26.624c58.368-23.552 124.928-34.816 199.68-34.816s141.312 12.288 199.68 34.816V225.28H844.8l-19.456 272.384z" data-v-2f084f89=""></path><path d="M685.056 328.704v-46.08H455.68c2.048-4.096 6.144-9.216 11.264-15.36 5.12-7.168 9.216-12.288 11.264-15.36L419.84 240.64c-31.744 46.08-75.776 87.04-133.12 123.904 4.096 4.096 10.24 11.264 18.432 21.504l17.408 17.408c23.552-15.36 45.056-31.744 63.488-50.176 26.624 25.6 49.152 43.008 67.584 51.2-46.08 15.36-104.448 27.648-175.104 35.84 2.048 5.12 6.144 13.312 9.216 24.576 4.096 11.264 6.144 19.456 7.168 24.576l39.936-7.168v218.112H389.12V680.96h238.592v19.456h54.272V481.28H348.16c60.416-12.288 114.688-27.648 163.84-46.08 49.152 19.456 118.784 34.816 210.944 46.08 5.12-17.408 10.24-34.816 17.408-51.2-62.464-4.096-116.736-12.288-161.792-24.576 38.912-20.48 74.752-46.08 106.496-76.8z m-150.528 194.56h94.208v41.984h-94.208v-41.984z m0 78.848h94.208v41.984h-94.208v-41.984z m-144.384-78.848h94.208v41.984H390.144v-41.984z m0 78.848h94.208v41.984H390.144v-41.984zM424.96 326.656h182.272c-26.624 22.528-57.344 41.984-94.208 57.344-31.744-15.36-61.44-34.816-88.064-57.344z" data-v-2f084f89=""></path></svg>'
 
 export const copyrightSVG = '<svg t="1695543755857" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="89399" width="200" height="200"><path d="M512 16C238.066 16 16 238.066 16 512s222.066 496 496 496 496-222.066 496-496S785.934 16 512 16z m234.268 693.506c-3.184 3.734-79.552 91.462-219.702 91.462-169.384 0-288.968-126.52-288.968-291.134 0-162.606 124.008-286.802 287.524-286.802 133.914 0 203.93 74.63 206.844 77.808a24 24 0 0 1 2.476 29.246l-44.76 69.31c-8.098 12.534-25.548 14.702-36.468 4.59-0.466-0.428-53.058-47.76-123.76-47.76-92.232 0-147.832 67.15-147.832 152.164 0 79.204 51.028 159.384 148.554 159.384 77.394 0 130.56-56.676 131.088-57.25 10.264-11.13 28.118-10.066 37.016 2.106l49.094 67.144a24.002 24.002 0 0 1-1.106 29.732z" p-id="89400"></path></svg>'
+
+export const aliPaySVG = `
+<svg
+        id="mx_n_1711731519286" t="1711731519285" class="icon" viewBox="0 0 1024 1024" version="1.1"
+        xmlns="http://www.w3.org/2000/svg" p-id="9945" width="16" height="16"
+      >
+        <path
+          d="M230.404 576.536c-12.087 9.728-25.043 23.93-28.805 41.984-5.12 24.666-1.069 55.541 22.728 79.761 28.828 29.362 72.637 37.398 91.56 38.779 51.4 3.717 106.184-21.772 147.477-50.844 16.184-11.42 43.899-34.349 70.39-69.721-59.37-30.653-133.477-64.557-212.703-61.24-40.47 1.692-69.454 10.084-90.647 21.281z m752.859 135.545C1009.463 650.574 1024 582.968 1024 512 1024 229.688 794.335 0 512 0 229.665 0 0 229.688 0 512c0 282.335 229.665 512 512 512 170.385 0 321.491-83.723 414.631-212.124-87.997-43.742-233.027-115.734-322.36-159.299-42.63 48.596-105.65 97.303-176.84 118.495-44.722 13.29-85.037 18.365-127.199 9.75-41.739-8.548-72.481-28.093-90.401-47.683-9.127-9.995-19.612-22.706-27.203-37.82a71.25 71.25 0 0 0 1.202 3.049s-4.363-7.524-7.702-19.5a85.994 85.994 0 0 1-3.34-18.143 93.517 93.517 0 0 1-0.2-13.045c-0.378-7.702-0.066-15.783 1.67-24.064 4.185-20.235 12.822-43.81 35.172-65.692 49.063-48.039 114.777-50.621 148.814-50.42 50.421 0.289 138.04 22.35 211.812 48.439 20.436-43.52 33.547-90.068 42.007-121.1H305.308v-33.168h157.518v-66.337H272.139v-33.169h190.687v-66.315c0-9.105 1.803-16.584 16.584-16.584h74.619v82.899h207.293v33.169H554.029v66.337h165.82s-16.65 92.828-68.719 184.32c115.557 41.272 278.128 104.849 332.133 126.086z"
+          fill="white" p-id="9946"
+        />
+      </svg>
+`
+export const weChatPaySVG = `
+<svg
+        t="1711730357270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+        p-id="4392" width="16" height="16"
+      >
+        <path
+          d="M512 1024a512 512 0 1 1 512-512 512 512 0 0 1-512 512z m-112.523636-836.538182c-144.989091 0-262.516364 100.538182-262.516364 224.465455 0 74.007273 42.123636 139.636364 106.705455 180.363636l-19.549091 78.312727 86.807272-47.592727a301.265455 301.265455 0 0 0 88.669091 13.381818h2.210909a178.967273 178.967273 0 0 1-3.607272-34.909091c0-115.083636 109.498182-208.407273 244.363636-208.407272 6.167273 0 11.636364 0 18.152727 0.814545-10.589091-115.665455-123.461818-206.778182-261.469091-206.778182z m246.690909 226.443637c-124.741818 0-225.861818 86.109091-225.861818 192.465454s101.003636 192.349091 225.861818 192.349091a257.047273 257.047273 0 0 0 99.723636-20.014545l77.265455 40.610909L802.909091 744.727273a179.316364 179.316364 0 0 0 69.003636-138.24c0-106.24-101.12-192.465455-225.861818-192.465455z m81.454545 152.087272a31.767273 31.767273 0 1 1 32.349091-31.767272 32 32 0 0 1-32.349091 31.767272z m-164.072727 0a31.767273 31.767273 0 1 1 32.349091-31.767272 32 32 0 0 1-32.349091 31.767272zM502.341818 373.527273a34.909091 34.909091 0 1 1 34.909091-34.909091 34.909091 34.909091 0 0 1-34.909091 34.909091z m-206.196363 0a34.909091 34.909091 0 1 1 34.90909-34.909091 34.909091 34.909091 0 0 1-34.90909 34.909091z m0 0"
+          fill="white" p-id="4393"
+        />
+      </svg>
+`

package/src/node.ts

@@ -6,7 +6,7 @@ import {
   patchOptimizeDeps,
   registerMdPlugins,
 } from './utils/node/mdPlugins'
-import { checkConfig, getArticles, patchVPThemeConfig } from './utils/node/theme'
+import { checkConfig, getArticles, patchVPConfig, patchVPThemeConfig } from './utils/node/theme'
 import { getVitePlugins, registerVitePlugins } from './utils/node/vitePlugins'
 
 /**
@@ -34,6 +34,8 @@ export function getThemeConfig(cfg?: Partial<Theme.BlogConfig>) {
   // patch extraVPConfig
   patchMermaidPluginCfg(extraVPConfig)
   patchOptimizeDeps(extraVPConfig)
+
+  patchVPConfig(extraVPConfig, cfg)
   return {
     themeConfig: {
       blog: {

package/src/utils/node/theme.ts

@@ -125,7 +125,15 @@ export function getArticles(cfg?: Partial<Theme.BlogConfig>) {
 }
 
 export function patchVPConfig(vpConfig: any, cfg?: Partial<Theme.BlogConfig>) {
-  // TODO: 待确定场景
+  vpConfig.head = vpConfig.head || []
+  // Artalk 资源地址
+  if (cfg?.comment && 'type' in cfg.comment && cfg?.comment?.type === 'artalk') {
+    const server = cfg.comment?.options?.server
+    if (server) {
+      vpConfig.head.push(['link', { href: `${server}/dist/Artalk.css`, rel: 'stylesheet' }])
+      vpConfig.head.push(['script', { src: `${server}/dist/Artalk.js`, id: 'artalk-script' }])
+    }
+  }
 }
 
 export function patchVPThemeConfig(

package/types/vue-shim.d.ts

@@ -1,3 +1,13 @@
+import type Artalk, { ArtalkConfig } from 'artalk'
+
+declare global {
+  interface Window {
+    Artalk: {
+      init(options: Partial<ArtalkConfig>): Artalk
+    }
+  }
+}
+
 declare module '*.vue' {
   import type { ComponentOptions } from 'vue'