valaxy 0.7.7 → 0.7.8

package/client/components/ValaxyRightSidebar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import type { Post } from '../../types'
+import type { Post } from 'valaxy/types'
 import { useAppStore } from '~/stores/app'
 defineProps<{ frontmatter: Post }>()
 const { t } = useI18n()

package/client/components/ValaxyToc.vue

@@ -5,7 +5,7 @@ import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
-import type { Header } from '../../types'
+import type { Header } from 'valaxy/types'
 import { useActiveSidebarLinks } from '~/composables'
 import { useConfig } from '~/config'
 

package/client/composables/category.ts

@@ -1,5 +1,5 @@
 import { unref } from 'vue'
-import type { Post } from '../../types'
+import type { Post } from 'valaxy/types'
 import { usePostList } from './post'
 
 export interface BaseCategory {

package/client/composables/comments/twikoo.ts

@@ -1,8 +1,32 @@
 import { isClient, useScriptTag } from '@vueuse/core'
+import { useConfig } from 'valaxy'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
+declare global {
+  interface Window {
+  // extend the window
+    twikoo: {
+      init: (options: {
+        envId: string
+        el: string
+      } | any) => any
+    }
+  }
+}
+
+/**
+ * A simple, safe, free comment system.
+ * @public
+ * @see https://github.com/imaegoo/twikoo
+ * @see https://twikoo.js.org/
+ * @param options
+ */
 export function useTwikoo(options: {} = {}) {
+  const config = useConfig()
+  const cdnPrefix = computed(() => config.value.cdn.prefix)
+
   const route = useRoute()
   const { locale } = useI18n()
 
@@ -25,7 +49,7 @@ export function useTwikoo(options: {} = {}) {
   }
 
   // 直接使用 CDN
-  useScriptTag('//cdn.jsdelivr.net/npm/twikoo@1.5.1/dist/twikoo.all.min.js', () => {
+  useScriptTag(`${cdnPrefix.value}twikoo@1.5.1/dist/twikoo.all.min.js`, () => {
     initTwikoo(options)
   })
 }

package/client/composables/comments/waline.ts

@@ -1,21 +1,34 @@
-import { isClient, useScriptTag } from '@vueuse/core'
-import { useHead } from '@vueuse/head'
-import { onUnmounted, watch } from 'vue'
+import { isClient } from '@vueuse/core'
+import { onMounted, onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
-export function useWaline(options: {} = {}) {
-  useHead({
-    link: [
-      { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.css' },
-    ],
-  })
+import type { WalineInitOptions, WalineInstance } from '@waline/client'
+
+import '@waline/client/dist/waline.css'
+import { cdnPrefix } from '../../utils'
+
+/**
+ * A Simple, Safe Comment System.
+ * @public
+ * @see https://github.com/walinejs/waline
+ * @see https://waline.js.org/
+ * @param options
+ * @returns
+ */
+export function useWaline(options: {} = {}, cdn = cdnPrefix) {
+  if (!isClient)
+    return
 
   const route = useRoute()
 
   const { locale } = useI18n()
 
-  let waline: any
+  let waline: WalineInstance | null | undefined
+
+  onMounted(() => {
+    initWaline(options)
+  })
 
   /**
    * init waline
@@ -23,28 +36,24 @@ export function useWaline(options: {} = {}) {
    * @returns
    */
   function initWaline(options: {} = {}) {
-    if (!isClient)
-      return
-
-    const defaultOptions = {
+    const defaultOptions: WalineInitOptions = {
       el: '.comment #waline',
+      serverURL: '',
       lang: locale.value,
       dark: 'html.dark',
       emoji: [
-        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/bilibili',
-        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/qq',
-        'https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo',
+        `${cdn}@waline/emojis/bilibili/`,
+        `${cdn}@waline/emojis/qq/`,
+        `${cdn}@waline/emojis/weibo/`,
       ],
       path: route.path,
     }
     const walineOptions = Object.assign(defaultOptions, options)
-    return window.Waline.init(walineOptions)
-  }
 
-  // 直接使用 CDN
-  useScriptTag('//cdn.jsdelivr.net/npm/@waline/client/dist/waline.js', () => {
-    waline = initWaline(options)
-  })
+    import('@waline/client').then(({ init }) => {
+      waline = init(walineOptions)
+    })
+  }
 
   watch(() => route.path, (path) => {
     if (!waline)

package/client/composables/common.ts

@@ -2,7 +2,7 @@ import { useRoute } from 'vue-router'
 import { computed } from 'vue'
 import { isClient } from '@vueuse/core'
 
-import type { Post } from '../../types'
+import type { Post } from 'valaxy/types'
 import { useConfig } from '../config'
 
 export function useFrontmatter() {

package/client/composables/outline.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 import { onMounted, onUnmounted, onUpdated } from 'vue'
-import type { Header } from '../../types'
+import type { Header } from 'valaxy/types'
 import { throttleAndDebounce } from '~/utils'
 
 interface HeaderWithChildren extends Header {

package/client/composables/post.ts

@@ -2,8 +2,8 @@ import type { Ref } from 'vue'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import type { Post } from 'valaxy/types'
 import { sortByDate } from '../utils'
-import type { Post } from '../../types'
 
 export const usePostTitle = (post: Ref<Post>) => {
   const { locale } = useI18n()

package/client/composables/tag.ts

@@ -1,5 +1,5 @@
 import { TinyColor } from '@ctrl/tinycolor'
-import type { Post } from '../../types'
+import type { Post } from 'valaxy/types'
 import { usePostList } from './post'
 
 export type Tags = Map<string, {

package/client/composables/widgets/aplayer.ts

@@ -1,23 +1,28 @@
 import { useScriptTag } from '@vueuse/core'
 import { useHead } from '@vueuse/head'
+import { useConfig } from 'valaxy'
+import { computed } from 'vue'
 
 /**
  * use MetingJS and Aplayer
- * https://github.com/MoePlayer/APlayer
- * https://github.com/metowolf/MetingJS
+ * @see https://github.com/MoePlayer/APlayer
+ * @see https://github.com/metowolf/MetingJS
  */
 export function useAplayer() {
+  const config = useConfig()
+  const cdnPrefix = computed(() => config.value.cdn.prefix)
+
   useHead({
     link: [
       {
         rel: 'stylesheet',
-        href: 'https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css',
+        href: `${cdnPrefix.value}aplayer/dist/APlayer.min.css`,
       },
     ],
   })
 
   // load meting after aplayer
-  useScriptTag('https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js', () => {
-    useScriptTag('https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js')
+  useScriptTag(`${cdnPrefix.value}aplayer/dist/APlayer.min.js`, () => {
+    useScriptTag(`${cdnPrefix.value}meting@2/dist/Meting.min.js`)
   })
 }

package/client/config.ts

@@ -5,7 +5,7 @@ import valaxyContext from '/@valaxyjs/context'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 import { computed, inject, readonly, shallowRef } from 'vue'
 // import type { RouteMeta } from 'vue-router'
-import type { PageData, ValaxyConfig } from '../types'
+import type { PageData, ValaxyConfig } from 'valaxy/types'
 
 /**
  * parse valaxy config

package/client/modules/valaxy.ts

@@ -11,7 +11,7 @@ import { createI18n } from 'vue-i18n'
 import { useStorage } from '@vueuse/core'
 
 import type { Router } from 'vue-router'
-import type { PageDataPayload } from '../../types'
+import type { PageDataPayload } from 'valaxy/types'
 import { initConfig, valaxyConfigSymbol } from '../config'
 import { ensureSuffix } from '@antfu/utils'
 

package/client/utils/cdn.ts

@@ -0,0 +1 @@
+export const cdnPrefix = 'https://npm.elemecdn.com/'

package/client/utils/index.ts

@@ -1,2 +1,3 @@
+export * from './cdn'
 export * from './helper'
 export * from './time'

package/client/utils/time.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import type { Post } from '../../types'
+import type { Post } from 'valaxy/types'
 
 /**
  * use dayjs format date

package/dist/chunk-2QVEQP3K.js

@@ -0,0 +1 @@
+"use strict";