valaxy 0.20.5 → 0.20.7

package/client/components/ValaxyApp.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-// TODO: add docs to override ValaxyApp
-import { computed } from 'vue'
-// import { useHead, useSeoMeta } from '@unhead/vue'
+import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org'
 import { useSeoMeta } from '@unhead/vue'
 
-// @ts-expect-error virtual module
-import ValaxyUserApp from '/@valaxyjs/UserAppVue'
-// @ts-expect-error virtual module
-import ValaxyThemeApp from '/@valaxyjs/ThemeAppVue'
-
+// TODO: add docs to override ValaxyApp
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org'
+
+import { useFrontmatter, useValaxyHead } from '../composables'
+import { useTimezone } from '../composables/global'
 
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
 import { useSiteConfig } from '../config'
-import { useFrontmatter, useValaxyHead } from '../composables'
-import { useTimezone } from '../composables/global'
 import ValaxyAddons from './ValaxyAddons.vue'
+// @ts-expect-error virtual module
+import ValaxyThemeApp from '/@valaxyjs/ThemeAppVue'
+// @ts-expect-error virtual module
+import ValaxyUserApp from '/@valaxyjs/UserAppVue'
 
 // <link rel="apple-touch-icon" href="/pwa-192x192.png">
 // <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">

package/client/components/ValaxyDecrypt.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { runContentUpdated, useDecrypt, useFrontmatter } from 'valaxy'
-import { defineComponent, h, onMounted, ref } from 'vue'
+import { computed, defineComponent, h, ref } from 'vue'
 
 const props = defineProps<{
   encryptedContent: string
+  hint?: string
 }>()
 
 const password = ref('')
@@ -26,6 +27,7 @@ async function decryptContent() {
   }
   catch (e) {
     hasError.value = true
+    console.error(e)
   }
 }
 
@@ -57,11 +59,7 @@ const ValaxyDeprecatedContent = defineComponent({
   },
 })
 
-const hasWarning = ref(false)
-onMounted(() => {
-  if (location.protocol !== 'https:')
-    hasWarning.value = true
-})
+const hasWarning = computed(() => location.protocol !== 'https:')
 </script>
 
 <template>
@@ -82,13 +80,17 @@ onMounted(() => {
           @keyup.enter="decryptContent"
         >
         <div
+          class="text-gray/70 hover:text-gray transition"
           cursor-pointer
           absolute text-2xl
           i-ri-arrow-right-circle-line right-3
-          text-gray hover:text-black
           @click="decryptContent"
         />
 
+        <div v-if="hint" class="-top-6" absolute text-xs op="50">
+          <div v-html="hint" />
+        </div>
+
         <div v-if="hasWarning" class="-bottom-6" absolute text-xs op="50">
           <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API" target="_blank">
             <span>Web Crypto API</span>

package/client/components/ValaxyGalleryDecrypt.vue

@@ -22,6 +22,7 @@ async function decryptContent() {
   }
   catch (e) {
     hasError.value = true
+    console.error(e)
   }
 }
 

package/client/components/ValaxyLogo.vue

@@ -5,7 +5,11 @@ import valaxyLogoPng from '../assets/images/valaxy-logo.png'
 <template>
   <div class="valaxy-logo-container" relative inline-flex justify="center" items="center">
     <div class="absolute bg-img" />
-    <img class="fly-animation" w="50" aspect="420/386" m="auto" :src="valaxyLogoPng" alt="Valaxy Logo" z="1">
+    <img
+      class="fly-animation h-50"
+      aspect="420/386" m="auto"
+      :src="valaxyLogoPng" alt="Valaxy Logo" z="1"
+    >
   </div>
 </template>
 

package/client/components/ValaxyMd.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
+import type { Post } from 'valaxy'
+import { onContentUpdated, runContentUpdated, useAplayer, useCodePen, useCollapseCode, useCopyCode, useMediumZoom, wrapTable } from 'valaxy'
 import { onMounted, onUpdated, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { onContentUpdated, runContentUpdated, useAplayer, useCodePen, useCollapseCode, useCopyCode, useMediumZoom, wrapTable } from 'valaxy'
-import type { Post } from 'valaxy'
-import { useVanillaLazyLoad } from '../composables/features/vanilla-lazyload'
 import { useCodeGroups } from '../composables/codeGroups'
+import { useVanillaLazyLoad } from '../composables/features/vanilla-lazyload'
 
 const props = defineProps<{
   frontmatter: Post

package/client/components/builtin/ValaxyMermaid.vue

@@ -13,10 +13,10 @@ pie
 -->
 
 <script setup lang="ts">
-import { getCurrentInstance, ref, watch, watchEffect } from 'vue'
-
 import { isClient } from '@vueuse/core'
+
 import { useAppStore } from 'valaxy'
+import { getCurrentInstance, ref, watch, watchEffect } from 'vue'
 import { renderMermaid } from '../../modules/mermaid'
 import ShadowRoot from '../internals/ShadowRoot.vue'
 
@@ -34,51 +34,50 @@ const appStore = useAppStore()
 
 if (isClient) {
   // dynamic import to reduce initial bundle size
-  import('mermaid').then(m => m.default)
-    .then((mermaid) => {
-      mermaid.startOnLoad = false
-      mermaid.initialize({ startOnLoad: false })
+  import('mermaid').then(m => m.default).then((mermaid) => {
+    mermaid.startOnLoad = false
+    mermaid.initialize({ startOnLoad: false })
 
-      watchEffect(async (onCleanup) => {
-        let disposed = false
-        onCleanup(() => {
-          disposed = true
-        })
-        const svg = await renderMermaid(
-          mermaid,
-          props.code || '',
-          {
-            theme: props.theme || (appStore.isDark ? 'dark' : undefined),
-            ...vm!.attrs,
-          },
-        )
-        if (!disposed)
-          html.value = svg
+    watchEffect(async (onCleanup) => {
+      let disposed = false
+      onCleanup(() => {
+        disposed = true
       })
+      const svg = await renderMermaid(
+        mermaid,
+        props.code || '',
+        {
+          theme: props.theme || (appStore.isDark ? 'dark' : undefined),
+          ...vm!.attrs,
+        },
+      )
+      if (!disposed)
+        html.value = svg
+    })
 
-      const actualHeight = ref<number>()
+    const actualHeight = ref<number>()
 
-      watch(html, () => {
-        actualHeight.value = undefined
-      })
+    watch(html, () => {
+      actualHeight.value = undefined
+    })
 
-      watchEffect(() => {
-        const svgEl = el.value?.children?.[0] as SVGElement | undefined
-        if (svgEl && svgEl.hasAttribute('viewBox') && actualHeight.value == null) {
-          const v = Number.parseFloat(svgEl.getAttribute('viewBox')?.split(' ')[3] || '')
-          actualHeight.value = Number.isNaN(v) ? undefined : v
-        }
-      }, { flush: 'post' })
+    watchEffect(() => {
+      const svgEl = el.value?.children?.[0] as SVGElement | undefined
+      if (svgEl && svgEl.hasAttribute('viewBox') && actualHeight.value == null) {
+        const v = Number.parseFloat(svgEl.getAttribute('viewBox')?.split(' ')[3] || '')
+        actualHeight.value = Number.isNaN(v) ? undefined : v
+      }
+    }, { flush: 'post' })
 
-      watchEffect(() => {
-        const svgEl = el.value?.children?.[0] as SVGElement | undefined
-        if (svgEl != null && props.scale != null && actualHeight.value != null) {
-          svgEl.setAttribute('height', `${actualHeight.value * props.scale}`)
-          svgEl.removeAttribute('width')
-          svgEl.removeAttribute('style')
-        }
-      }, { flush: 'post' })
-    })
+    watchEffect(() => {
+      const svgEl = el.value?.children?.[0] as SVGElement | undefined
+      if (svgEl != null && props.scale != null && actualHeight.value != null) {
+        svgEl.setAttribute('height', `${actualHeight.value * props.scale}`)
+        svgEl.removeAttribute('width')
+        svgEl.removeAttribute('style')
+      }
+    }, { flush: 'post' })
+  })
 }
 </script>
 

package/client/composables/app/useValaxyHead.ts

@@ -1,20 +1,22 @@
-import { computed } from 'vue'
-import pkg from 'valaxy/package.json'
 import { useHead } from '@unhead/vue'
+import pkg from 'valaxy/package.json'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useSiteConfig } from '../../config'
 import { useFrontmatter } from '../../composables'
+import { useSiteConfig } from '../../config'
 
 export function useValaxyHead() {
   const { locale } = useI18n()
 
   const fm = useFrontmatter()
   const siteConfig = useSiteConfig()
-  const title = computed(() => fm.value[`title_${locale.value}`] || fm.value.title)
+  const title = computed<string>(() => fm.value[`title_${locale.value}`] || fm.value.title)
   useHead({
     title,
-    titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${siteConfig.value.title}` : siteConfig.value.title)),
+    titleTemplate: (title) => {
+      return fm.value.titleTemplate || (title ? `${title} - ${siteConfig.value.title}` : siteConfig.value.title)
+    },
     link: [
       {
         rel: 'icon',
@@ -23,7 +25,12 @@ export function useValaxyHead() {
       },
     ],
     meta: [
-      { name: 'description', content: computed(() => siteConfig.value.description) },
+      computed(() => {
+        return {
+          name: 'description',
+          content: fm.value.description || siteConfig.value.description,
+        }
+      }),
       {
         name: 'generator',
         content: `Valaxy ${pkg.version}`,

package/client/composables/categories.ts

@@ -1,6 +1,6 @@
 import type { MaybeRef } from '@vueuse/core'
-import { computed, unref } from 'vue'
 import type { Post } from '../../types'
+import { computed, unref } from 'vue'
 import { useSiteStore } from '../stores'
 
 /**

package/client/composables/codeGroups.ts

@@ -1,5 +1,5 @@
-import { onContentUpdated } from 'valaxy'
 import { isClient } from '@vueuse/core'
+import { onContentUpdated } from 'valaxy'
 
 export function useCodeGroups() {
   if (import.meta.env.DEV) {

package/client/composables/collections.ts

@@ -1,5 +1,5 @@
-import { ref } from 'vue'
 import type { CollectionConfig } from '../define'
+import { ref } from 'vue'
 
 /**
  * Composable for Collections

package/client/composables/common.ts

@@ -1,8 +1,8 @@
-import { useRoute } from 'vue-router'
-import { computed, inject } from 'vue'
+import type { PageData, PostFrontMatter } from 'valaxy/types'
 import { isClient } from '@vueuse/core'
+import { computed, inject } from 'vue'
 
-import type { PageData, PostFrontMatter } from 'valaxy/types'
+import { useRoute } from 'vue-router'
 import { useSiteConfig } from '../config'
 
 /**

package/client/composables/features/collapse-code.ts

@@ -1,6 +1,6 @@
 import { isClient } from '@vueuse/core'
-import { onMounted } from 'vue'
 import { useFrontmatter, useSiteConfig } from 'valaxy'
+import { onMounted } from 'vue'
 
 export function useCollapseCode() {
   const config = useSiteConfig()

package/client/composables/features/copy-code.ts

@@ -12,6 +12,7 @@ export function useCopyCode() {
         if (!parent || !sibling)
           return
 
+        // eslint-disable-next-line regexp/no-unused-capturing-group
         const isShell = /language-(shellscript|shell|bash|sh|zsh)/.test(
           parent.className,
         )

package/client/composables/features/index.ts

@@ -1,3 +1,3 @@
+export * from './collapse-code'
 export * from './copy-code'
 export * from './medium-zoom'
-export * from './collapse-code'

package/client/composables/helper/useInvisibleElement.ts

@@ -1,5 +1,5 @@
-import { useElementBounding, useIntersectionObserver } from '@vueuse/core'
 import type { Ref } from 'vue'
+import { useElementBounding, useIntersectionObserver } from '@vueuse/core'
 import { ref } from 'vue'
 
 /**

package/client/composables/index.ts

@@ -1,25 +1,25 @@
+// app
+export * from './app'
+// utils
+export * from './back'
 // for classify
 export * from './categories'
-export * from './post'
-export * from './tags'
 export * from './collections'
 
 // common
 export * from './common'
+export * from './dark'
+export * from './decrypt'
 export * from './features'
 export * from './helper'
-export * from './dark'
 export * from './layout'
-export * from './widgets'
 export * from './locale'
 
-export * from './sidebar'
 export * from './outline'
+export * from './post'
 
-// utils
-export * from './back'
-export * from './decrypt'
 export * from './search'
+export * from './sidebar'
+export * from './tags'
 
-// app
-export * from './app'
+export * from './widgets'

package/client/composables/locale.ts

@@ -1,8 +1,9 @@
 import { isClient, useStorage } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-import { setDefaultOptions } from 'date-fns/setDefaultOptions'
-import { zhCN } from 'date-fns/locale/zh-CN'
+import { setDefaultOptions } from 'date-fns'
+// not optimize deps all locales
 import { enUS } from 'date-fns/locale/en-US'
+import { zhCN } from 'date-fns/locale/zh-CN'
+import { useI18n } from 'vue-i18n'
 
 export function useLocale() {
   const { availableLocales, locale } = useI18n()

package/client/composables/outline/anchor.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
-import { onMounted, onUnmounted, onUpdated } from 'vue'
 import { resolvedHeaders } from '@valaxyjs/utils'
+import { onMounted, onUnmounted, onUpdated } from 'vue'
 import { throttleAndDebounce } from '../../utils'
 import { useAside } from '../aside'
 
@@ -47,6 +47,10 @@ export function useActiveAnchor(
     window.removeEventListener('scroll', onScroll)
   })
 
+  /**
+   * 长目录自动滚动
+   * @TODO add e2e test
+   */
   const checkActiveLinkInViewport = () => {
     const activeLink = prevActiveLink
     if (!activeLink) {
@@ -54,15 +58,12 @@ export function useActiveAnchor(
       return
     }
 
-    const top = activeLink.getBoundingClientRect().top
-    const bottom = activeLink.getBoundingClientRect().bottom
-
     const parentEl = document.querySelector('.yun-aside') as HTMLElement
     if (parentEl) {
-      if (top < parentEl.scrollTop)
-        parentEl.scrollTo({ top: 0, behavior: 'smooth' })
-      if (bottom > parentEl.offsetHeight + parentEl.scrollTop)
-        parentEl.scrollTo({ top: bottom + 40, behavior: 'smooth' })
+      // 超出
+      const top = activeLink.offsetTop + topOffset + 60
+      if (top < parentEl.scrollTop || (top > parentEl.offsetHeight + parentEl.scrollTop))
+        parentEl.scrollTo({ top, behavior: 'smooth' })
     }
   }
 

package/client/composables/outline/headers.ts

@@ -1,9 +1,9 @@
-import { computed, shallowRef } from 'vue'
-import type { DefaultTheme } from 'valaxy/types'
 import type { MenuItem } from '@valaxyjs/utils'
+import type { DefaultTheme } from 'valaxy/types'
 import { getHeaders } from '@valaxyjs/utils'
-import { onContentUpdated } from '../../utils'
+import { computed, shallowRef } from 'vue'
 import { useFrontmatter, useThemeConfig } from '../..'
+import { onContentUpdated } from '../../utils'
 
 /**
  * export headers & handleClick to generate outline

package/client/composables/outline/index.ts

@@ -1,4 +1,4 @@
 // ref vitepress theme-default/composables/outline.ts
 
-export * from './headers'
 export * from './anchor'
+export * from './headers'

package/client/composables/post/index.ts

@@ -1,12 +1,12 @@
+import type { Post } from 'valaxy'
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { Post } from 'valaxy'
-import { sortByDate } from '../../utils'
 import { useRouterStore } from '../../stores'
+import { sortByDate } from '../../utils'
 
-export * from './usePrevNext'
 export * from './usePagination'
+export * from './usePrevNext'
 
 export function usePostTitle(post: ComputedRef<Post>) {
   const { locale } = useI18n()

package/client/composables/search/useFuseSearch.ts

@@ -1,9 +1,9 @@
-import { computed, shallowRef } from 'vue'
-import { useSiteConfig } from 'valaxy'
-import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
-import { useFuse } from '@vueuse/integrations/useFuse'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
 import type { FuseListItem } from 'valaxy/types'
+import { useFuse } from '@vueuse/integrations/useFuse'
+import { useSiteConfig } from 'valaxy'
+import { computed, shallowRef } from 'vue'
 
 export function useFuseSearch<T extends FuseListItem = FuseListItem>(
   search: MaybeRefOrGetter<string>,

package/client/composables/tags.ts

@@ -1,5 +1,5 @@
-import { computed } from 'vue'
 import type { Post } from '../../types'
+import { computed } from 'vue'
 import { useSiteStore } from '../stores'
 
 /**

package/client/composables/widgets/aplayer.ts

@@ -1,5 +1,5 @@
-import { useScriptTag } from '@vueuse/core'
 import { useHead } from '@unhead/vue'
+import { useScriptTag } from '@vueuse/core'
 import { computed } from 'vue'
 import { useSiteConfig } from '../..'
 

package/client/config.ts

@@ -1,17 +1,17 @@
-// @ts-expect-error virtual module @valaxyjs/config
-import valaxyConfig from '/@valaxyjs/config'
-
-// @ts-expect-error virtual module @valaxyjs/context
-import valaxyContext from '/@valaxyjs/context'
-import type { ComputedRef, InjectionKey } from 'vue'
-import { computed, inject, readonly, shallowRef } from 'vue'
-
 // import type { RouteMeta } from 'vue-router'
 // fix build caused by pnpm
 // This is likely not portable. A type annotation is necessary.
 // https://github.com/microsoft/TypeScript/issues/42873
 import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 
+import type { ComputedRef, InjectionKey } from 'vue'
+import { computed, inject, readonly, shallowRef } from 'vue'
+// @ts-expect-error virtual module @valaxyjs/config
+import valaxyConfig from '/@valaxyjs/config'
+
+// @ts-expect-error virtual module @valaxyjs/context
+import valaxyContext from '/@valaxyjs/context'
+
 /**
  * parse valaxy config
  * @param data

package/client/index.ts

@@ -1,17 +1,17 @@
 export * from './addons'
+export * from './composables'
+
 export * from './config'
 
 // extend define
 export * from './define'
+export * from './setups'
 
-export * from './composables'
 export * from './stores'
 
-export * from './utils'
-
-export * from './setups'
-
 export * from './types'
 
+export * from './utils'
+
 // child packages
 export * from '@valaxyjs/utils'

package/client/main.ts

@@ -1,3 +1,16 @@
+import type { ViteSSGContext } from 'vite-ssg'
+import { initValaxyConfig, valaxyConfigSymbol } from 'valaxy'
+import { setupLayouts } from 'virtual:generated-layouts'
+import { ViteSSG } from 'vite-ssg'
+import { routes } from 'vue-router/auto-routes'
+
+// import App from '/@valaxyjs/App.vue'
+import App from './App.vue'
+import AppLink from './components/AppLink.vue'
+
+import setupMain from './setup/main'
+import { setupValaxyDevTools } from './utils/dev'
+
 // reset styles, load css before app
 // import '@unocss/reset/tailwind.css'
 // https://unocss.dev/guide/style-reset#tailwind-compat
@@ -5,26 +18,13 @@
 import '@unocss/reset/tailwind-compat.css'
 // css
 import './styles/css/css-vars.css'
+
 import './styles/css/main.css'
+
 // generate user styles
 import '/@valaxyjs/styles'
 import 'uno.css'
 
-import type { ViteSSGContext } from 'vite-ssg'
-import { ViteSSG } from 'vite-ssg'
-
-import { routes } from 'vue-router/auto-routes'
-import { setupLayouts } from 'virtual:generated-layouts'
-
-import { initValaxyConfig, valaxyConfigSymbol } from 'valaxy'
-import AppLink from './components/AppLink.vue'
-
-// import App from '/@valaxyjs/App.vue'
-import App from './App.vue'
-
-import setupMain from './setup/main'
-import { setupValaxyDevTools } from './utils/dev'
-
 const valaxyConfig = initValaxyConfig()
 
 /**

package/client/modules/devtools.ts

@@ -1,7 +1,7 @@
 import type { UserModule } from '../types'
 
-import valaxyLogo from '../assets/images/valaxy-logo.png'
 import pkg from '../../package.json'
+import valaxyLogo from '../assets/images/valaxy-logo.png'
 
 // import {addCustomCommand, addCustomTab } from '@vue/devtools-api'
 

package/client/modules/floating-vue.ts

@@ -1,9 +1,9 @@
-import FloatingVue from 'floating-vue'
+import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 import type { ViteSSGContext } from 'vite-ssg'
 
-import 'floating-vue/dist/style.css'
-import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 import type { ComputedRef } from 'vue'
+import FloatingVue from 'floating-vue'
+import 'floating-vue/dist/style.css'
 
 export async function install({ app }: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
   // @see https://floating-vue.starpad.dev/guide/config#default-values

package/client/modules/mermaid.ts

@@ -1,7 +1,7 @@
-import { customAlphabet } from 'nanoid'
-import { decode } from 'js-base64'
-import { clearUndefined } from '@antfu/utils'
 import type { Mermaid } from 'mermaid'
+import { clearUndefined } from '@antfu/utils'
+import { decode } from 'js-base64'
+import { customAlphabet } from 'nanoid'
 import setupMermaid from '../setup/mermaid'
 
 const nanoid = customAlphabet('abcedfghicklmn', 10)

package/client/modules/nprogress.ts

@@ -1,5 +1,5 @@
-import NProgress from 'nprogress'
 import type { UserModule } from '../types'
+import NProgress from 'nprogress'
 
 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 { createPinia } from 'pinia'
 
 // Setup Pinia
 // https://pinia.esm.dev/