valaxy-theme-yun 0.18.5 → 0.18.7

package/components/YunComment.vue

@@ -3,7 +3,7 @@ import { useRuntimeConfig } from 'valaxy'
 import { computed, ref } from 'vue'
 
 const runtimeConfig = useRuntimeConfig()
-const supportCommentAddons = ['valaxy-addon-waline', 'valaxy-addon-twikoo']
+const supportCommentAddons = ['valaxy-addon-waline', 'valaxy-addon-twikoo', 'valaxy-addon-artalk']
 
 const commentSystems = computed(() => {
   return supportCommentAddons.filter(addonName => runtimeConfig.value.addons[addonName]).map(addonName => addonName.split('-')[2])
@@ -20,6 +20,7 @@ const activeComment = ref(commentSystems.value[0])
       </div>
       <YunWaline v-if="activeComment === 'waline'" />
       <YunTwikoo v-if="activeComment === 'twikoo'" />
+      <YunArtalk v-if="activeComment === 'artalk'" />
       <slot />
     </ClientOnly>
   </YunCard>

package/components/YunFuseSearch.vue

@@ -3,11 +3,10 @@ import type { UseFuseOptions } from '@vueuse/integrations/useFuse'
 import { useFuse } from '@vueuse/integrations/useFuse'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useBodyScrollLock, useSiteConfig } from 'valaxy'
-import { useRouter } from 'vue-router'
+import { useSiteConfig } from 'valaxy'
 import type { FuseListItem } from 'valaxy/types'
 
-import { onClickOutside } from '@vueuse/core'
+import { isClient, onClickOutside, useScrollLock } from '@vueuse/core'
 
 const props = defineProps<{
   open: boolean
@@ -16,7 +15,7 @@ const emit = defineEmits(['close'])
 
 const searchContainer = ref<HTMLElement>()
 
-const { lockBodyScroll, unlockBodyScroll } = useBodyScrollLock(searchContainer)
+const isLocked = useScrollLock(isClient ? document.body : null)
 
 const { t } = useI18n()
 
@@ -32,20 +31,21 @@ const keys = computed(() => {
 
 const input = ref('')
 // todo export options
-const fuseOptions = computed<UseFuseOptions<FuseListItem>>(() => ({
+const useFuseOptions = computed<UseFuseOptions<FuseListItem>>(() => ({
   fuseOptions: {
+    includeMatches: true,
+    findAllMatches: true,
+
     ...siteConfig.value.fuse.options,
     keys: keys.value,
 
     // threshold: 0.99,
     // ignoreLocation: true,
   },
-  includeMatches: true,
-  findAllMatches: true,
   // resultLimit: resultLimit.value,
   // matchAllWhenSearchEmpty: matchAllWhenSearchEmpty.value,
 }))
-const { results } = useFuse(input, fuseListData, fuseOptions)
+const { results } = useFuse(input, fuseListData, useFuseOptions)
 
 const searchInputRef = ref<HTMLInputElement>()
 
@@ -66,12 +66,6 @@ watch(() => props.open, async () => {
     })
 })
 
-const router = useRouter()
-function jumpToLink(link: string) {
-  router.push(link)
-  emit('close')
-}
-
 onClickOutside(searchInputRef, () => {
   // emit('close')
 })
@@ -80,8 +74,8 @@ onClickOutside(searchInputRef, () => {
 <template>
   <Transition
     name="fade"
-    @enter="lockBodyScroll"
-    @after-leave="unlockBodyScroll"
+    @enter="isLocked = true"
+    @after-leave="isLocked = false"
   >
     <div
       v-if="open" ref="searchContainer"
@@ -97,12 +91,12 @@ onClickOutside(searchInputRef, () => {
       </div>
       <div v-if="results.length > 0" overflow="auto" flex="~" w="full">
         <div class="yun-fuse-result-container" flex="~ col" w="full">
-          <div
+          <AppLink
             v-for="result in results" :key="result.item.title"
             :to="result.item.link"
             class="yun-fuse-result-item text-$va-c-text hover:(text-$va-c-bg bg-$va-c-text-dark bg-opacity-100)"
             flex="~ col" pb-2
-            @click="jumpToLink(result.item.link)"
+            @click="emit('close')"
           >
             <h3 font="serif black">
               {{ result.item.title }}
@@ -113,7 +107,7 @@ onClickOutside(searchInputRef, () => {
             <span text-xs opacity-50 mt="1">
               Score Index: {{ result.refIndex }}
             </span>
-          </div>
+          </AppLink>
         </div>
       </div>
     </div>

package/components/YunMdTimeWarning.vue

@@ -1,24 +1,32 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useFrontmatter } from 'valaxy'
-
-import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-
 import { useI18n } from 'vue-i18n'
 
-const fm = useFrontmatter()
-
-dayjs.extend(relativeTime)
+import { differenceInMilliseconds, formatDistanceToNow } from 'date-fns'
 
+const fm = useFrontmatter()
 const { t } = useI18n()
 
+const updated = computed(() => fm.value.updated || fm.value.date || new Date())
+const ago = computed(() => {
+  const fromNow = formatDistanceToNow(updated.value, { addSuffix: true })
+  if (/^\d/.test(fromNow))
+    return ` ${fromNow}`
+  else
+    return fromNow
+})
+
 /**
  * when the post is updated more than 180 days ago, show a warning
  * default 180 days, you can set `time_warning` in frontmatter to change it
  */
 const time_warning = computed(() => {
-  const diff = dayjs().valueOf() - dayjs(fm.value.updated || fm.value.date).valueOf()
+  const diff = differenceInMilliseconds(new Date(), updated.value)
+  /**
+   * if `time_warning` is a number, compare the time difference
+   * if `time_warning` is a boolean, show warning by flag
+   */
   if (typeof fm.value.time_warning === 'number')
     return diff > fm.value.time_warning
   else
@@ -28,6 +36,6 @@ const time_warning = computed(() => {
 
 <template>
   <blockquote v-if="time_warning" class="yun-time-warning" op="80">
-    {{ t('post.time_warning', { ago: dayjs(fm.updated).fromNow() }) }}
+    {{ t('post.time_warning', { ago }) }}
   </blockquote>
 </template>

package/components/YunPostCollapse.vue

@@ -20,7 +20,7 @@ watch(() => props.posts, () => {
     if (post.hide && post.hide !== 'index')
       return
     if (post.date) {
-      const year = Number.parseInt(formatDate(post.date, 'YYYY'))
+      const year = Number.parseInt(formatDate(post.date, 'yyyy'))
       if (postListByYear.value[year]) {
         postListByYear.value[year].push(post)
       }
@@ -68,7 +68,7 @@ const sortedYears = computed(() => {
         <header class="post-header" flex items-center relative>
           <div class="post-meta">
             <time v-if="post.date" class="post-time" font="mono" opacity="80">{{
-              formatDate(post.date, 'MM-DD') }}
+              formatDate(post.date, 'MM-dd') }}
             </time>
           </div>
           <h2 class="post-title" inline-flex items-center font="serif black">

package/components/YunSearchTrigger.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import { useSiteConfig } from 'valaxy'
-import { computed, defineAsyncComponent, ref, watch } from 'vue'
-import { useMagicKeys } from '@vueuse/core'
+import { computed, defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
 
 const siteConfig = useSiteConfig()
 
@@ -14,11 +13,23 @@ function togglePopup() {
   open.value = !open.value
 }
 
-const { Meta_K } = useMagicKeys()
+onMounted(() => {
+  const handleSearchHotKey = (event: KeyboardEvent) => {
+    if (
+      (event.key.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey))
+    ) {
+      event.preventDefault()
+      togglePopup()
+    }
+  }
 
-watch(Meta_K, (val) => {
-  if (val)
-    togglePopup()
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
 })
 
 function openSearch() {

package/components/YunSelect.vue

@@ -12,16 +12,23 @@ const optionVisible = ref(false)
 useEventListener('click', () => {
   optionVisible.value = false
 })
+
+function toggleOptionVisible(e: MouseEvent) {
+  e.preventDefault()
+  e.stopImmediatePropagation()
+  e.stopPropagation()
+  optionVisible.value = !optionVisible.value
+}
 </script>
 
 <template>
-  <div class="relative h-8 w-30 text-[var(--va-c-text-2)] z-100">
+  <div class="relative h-8 w-30 text-[var(--va-c-text-2)] z-20" @mousedown.stop>
     <button
-      class="flex h-full w-full px-2 items-center justify-between border rounded-2 transition"
+      class="flex h-full w-full px-2 items-center justify-between border rounded transition"
       :class="optionVisible ? 'border-[var(--va-c-primary)] shadow-lg' : ''"
-      @click.stop="optionVisible = true"
+      @click="toggleOptionVisible"
     >
-      <span>{{ activeValue }}</span>
+      <span case-capital op-90>{{ activeValue }}</span>
       <div inline-flex i-ri-arrow-down-s-line />
     </button>
     <Transition>
@@ -32,7 +39,8 @@ useEventListener('click', () => {
         <li
           v-for="option in options"
           :key="option"
-          class="cursor-pointer list-none px-2 hover:bg-[var(--va-c-primary-lighter)] hover:text-white"
+          class="cursor-pointer list-none px-2 hover:bg-[var(--va-c-primary-light)] hover:text-white case-capital"
+          :class="{ 'bg-[var(--va-c-primary)] text-white': activeValue === option }"
           @click="activeValue = option"
         >
           {{ option }}
@@ -49,7 +57,7 @@ useEventListener('click', () => {
 
 .v-enter-active,
 .v-leave-active {
-  transition: opacity .3s ease;
+  transition: opacity .2s ease;
 }
 
 .v-enter-from,

package/components/third/YunArtalk.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import * as addonArtalk from 'valaxy-addon-artalk'
+import 'valaxy-addon-artalk/client/styles/index.scss'
+import { isEmptyAddon } from 'valaxy'
+
+if (!isEmptyAddon(addonArtalk))
+  addonArtalk.useArtalkWithOptions()
+</script>
+
+<template>
+  <ArtalkClient />
+</template>

package/layouts/post.vue

@@ -4,7 +4,7 @@ import { useFrontmatter, useFullUrl, useSiteConfig } from 'valaxy'
 
 import type { Article } from '@unhead/schema-org'
 import { defineArticle, useSchemaOrg } from '@unhead/schema-org'
-import dayjs from 'dayjs'
+import { toDate } from 'date-fns'
 
 const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()
@@ -27,8 +27,8 @@ const article: Article = {
       url: siteConfig.value.author.link,
     },
   ],
-  'datePublished': dayjs(frontmatter.value.date).toDate(),
-  'dateModified': dayjs(frontmatter.value.updated).toDate(),
+  'datePublished': toDate(frontmatter.value.date || ''),
+  'dateModified': toDate(frontmatter.value.updated || ''),
 }
 
 const image = frontmatter.value.image || frontmatter.value.cover

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.18.5",
+  "version": "0.18.7",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -19,13 +19,13 @@
   "module": "index.ts",
   "dependencies": {
     "@explosions/fireworks": "^0.0.2",
-    "@iconify-json/ant-design": "^1.1.15",
-    "@iconify-json/simple-icons": "^1.1.92",
+    "@iconify-json/ant-design": "^1.1.16",
+    "@iconify-json/simple-icons": "^1.1.101",
     "animejs": "^3.2.2"
   },
   "devDependencies": {
     "@types/animejs": "^3.1.12",
-    "valaxy": "0.18.5",
-    "valaxy-addon-waline": "0.1.2"
+    "valaxy": "0.18.7",
+    "valaxy-addon-waline": "0.1.4"
   }
 }

package/setup/main.ts

@@ -1,11 +1,5 @@
 import { defineAppSetup } from 'valaxy'
 
-import dayjs from 'dayjs'
-import timezone from 'dayjs/plugin/timezone'
-
 export default defineAppSetup((_ctx) => {
   // can do for setup
-
-  // for types in time warning
-  dayjs.extend(timezone)
 })