valaxy 0.7.7 → 0.8.1

package/README.md

@@ -4,6 +4,10 @@
 
 Read [YunYouJun/valaxy](https://github.com/YunYouJun/valaxy) for more info.
 
+## Creating customized templates
+
+Learn how to creating customized templates in [here](./docs/en/creating-templates.md)
+
 ## FAQ
 
 - `exports`: `src/index.ts` for virtual module

package/client/README.md

@@ -0,0 +1,3 @@
+# FAQ
+
+- use relative path in `valaxy/client` to avoid client/node problem

package/client/components/ValaxyCopyright.vue

@@ -51,7 +51,7 @@ const licenseHtml = computed(() => {
 </template>
 
 <style lang="scss">
-@use "~/styles/mixins" as *;
+@use "valaxy/client/styles/mixins/index.scss" as *;
 
 .post-copyright {
   font-size: 0.9rem;

package/client/components/ValaxyMd.vue

@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import type { Post } from 'valaxy'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useAplayer, useCodePen } from '~/composables'
-import { useCopyCode } from '~/composables/copy-code'
-import { wrapTable } from '~/utils'
+import { useAplayer, useCodePen, useCopyCode, wrapTable } from '..'
+import type { Post } from '../../types'
 
 const props = defineProps<{
   frontmatter: Post

package/client/components/ValaxyOverlay.vue

@@ -15,8 +15,8 @@ withDefaults(defineProps<{
 <style lang="scss">
 @use "sass:map";
 
-@use "~/styles/vars" as *;
-@use "~/styles/mixins" as *;
+@use "valaxy/client/styles/vars" as *;
+@use "valaxy/client/styles/mixins" as *;
 
 .va-overlay {
   background-color: rgba(0, 0, 0, 0.3);

package/client/components/ValaxySidebar.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { useLayout } from '~/composables'
-import { useAppStore } from '~/stores/app'
+import { useAppStore, useLayout } from '..'
 
 const app = useAppStore()
 const isHome = useLayout('home')

package/client/composables/comments/twikoo.ts

@@ -1,8 +1,32 @@
 import { isClient, useScriptTag } from '@vueuse/core'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
+import { useConfig } from '../..'
 
+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,35 @@
-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 { 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
+
+  // import css
+  import('@waline/client/dist/waline.css')
 
   const route = useRoute()
 
   const { locale } = useI18n()
 
-  let waline: any
+  let waline: WalineInstance | null | undefined
+
+  onMounted(() => {
+    initWaline(options)
+  })
 
   /**
    * init waline
@@ -23,28 +37,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/features/index.ts

@@ -0,0 +1 @@
+export * from './copy-code'

package/client/composables/index.ts

@@ -5,7 +5,7 @@ export * from './tag'
 
 // common
 export * from './common'
-// export * from './features'
+export * from './features'
 export * from './helper'
 export * from './dark'
 export * from './layout'
@@ -13,6 +13,7 @@ export * from './widgets'
 export * from './locale'
 
 export * from './sidebar'
+export * from './outline'
 
 // comment
 export * from './comments'

package/client/composables/outline.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'vue'
 import { onMounted, onUnmounted, onUpdated } from 'vue'
+import { throttleAndDebounce } from '../utils'
 import type { Header } from '../../types'
-import { throttleAndDebounce } from '~/utils'
 
 interface HeaderWithChildren extends Header {
   children?: 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 { sortByDate } from '../utils'
 import type { Post } from '../../types'
+import { sortByDate } from '../utils'
 
 export const usePostTitle = (post: Ref<Post>) => {
   const { locale } = useI18n()

package/client/composables/widgets/aplayer.ts

@@ -1,23 +1,28 @@
 import { useScriptTag } from '@vueuse/core'
 import { useHead } from '@vueuse/head'
+import { computed } from 'vue'
+import { useConfig } from '../..'
 
 /**
  * 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,10 @@ 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'
+// fix build caused by pnpm
+// This is likely not portable. A type annotation is necessary.
+// https://github.com/microsoft/TypeScript/issues/42873
+import type { PageData, ValaxyConfig } from 'valaxy/types'
 
 /**
  * parse valaxy config

package/client/index.ts

@@ -6,3 +6,5 @@ export * from './stores/app'
 export * from './utils'
 
 export * from './setups'
+
+export * from './types'

package/client/modules/nprogress.ts

@@ -1,5 +1,5 @@
 import NProgress from 'nprogress'
-import type { UserModule } from '~/types'
+import type { UserModule } from '../types'
 
 export const install: UserModule = ({ isClient, router }) => {
   if (isClient) {

package/client/modules/pinia.ts

@@ -1,5 +1,5 @@
 import { createPinia } from 'pinia'
-import type { UserModule } from '~/types'
+import type { UserModule } from '../types'
 
 // Setup Pinia
 // https://pinia.esm.dev/

package/client/modules/valaxy.ts

@@ -15,7 +15,7 @@ import type { PageDataPayload } from '../../types'
 import { initConfig, valaxyConfigSymbol } from '../config'
 import { ensureSuffix } from '@antfu/utils'
 
-import type { UserModule } from '~/types'
+import type { UserModule } from 'valaxy/client/types'
 
 // @ts-expect-error virtual
 import messages from '/@valaxyjs/locales'

package/client/scaffolds/post.md

@@ -0,0 +1,6 @@
+---
+layout: <%=layout%>
+title: <%=title%>
+date: <%=date%>
+---
+

package/client/styles/common/code.scss

@@ -1,4 +1,4 @@
-@use "~/styles/mixins" as *;
+@use "valaxy/client/styles/mixins" as *;
 
 @include mobile {
   .markdown-body {

package/client/styles/common/scrollbar.scss

@@ -1,4 +1,4 @@
-@use "~/styles/mixins" as *;
+@use "valaxy/client/styles/mixins" as *;
 
 ::-webkit-scrollbar {
   width: 8px;

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'