valaxy 0.15.10 → 0.15.11-alpha.0

package/client/App.vue

@@ -108,5 +108,5 @@ onBeforeMount(() => {
   <ValaxyThemeApp />
   <ValaxyAddons />
   <ValaxyUserApp />
-  <router-view />
+  <RouterView />
 </template>

package/client/components/AppLink.vue

@@ -20,7 +20,7 @@ const isExternalLink = computed(() => {
     <slot />
     <div v-if="showExternalIcon" class="icon-link inline-block" i-ri-arrow-right-up-line />
   </a>
-  <router-link v-else v-bind="$attrs" :to="link">
+  <RouterLink v-else v-bind="$attrs" :to="link">
     <slot />
-  </router-link>
+  </RouterLink>
 </template>

package/client/components/ValaxyMd.vue

@@ -65,7 +65,7 @@ useVanillaLazyLoad()
     <slot v-if="frontmatter.end !== undefined" name="end">
       <div m="y-4" class="end flex justify-center items-center">
         <hr class="line inline-flex" w="full" m="!y-2">
-        <span p="x-4" font="serif bold" class="whitespace-nowrap">
+        <span p="x-4" font="bold" class="whitespace-nowrap">
           {{ frontmatter.end ? 'Q.E.D.' : 'To Be Continued.' }}
         </span>
         <hr class="line inline-flex" w="full" m="!y-2">

package/client/components/ValaxyOverlay.vue

@@ -7,9 +7,9 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <transition name="fade">
+  <Transition name="fade">
     <div v-if="show" class="va-overlay" />
-  </transition>
+  </Transition>
 </template>
 
 <style lang="scss">

package/client/components/ValaxyPagination.vue

@@ -48,14 +48,14 @@ function jumpTo(page: number) {
 
 <template>
   <nav class="pagination">
-    <router-link v-if="curPage !== 1" class="page-number" :to="jumpTo(curPage - 1)" aria-label="prev">
+    <RouterLink v-if="curPage !== 1" class="page-number" :to="jumpTo(curPage - 1)" aria-label="prev">
       <div i-ri-arrow-left-s-line />
-    </router-link>
+    </RouterLink>
 
     <template v-for="i in totalPages">
-      <router-link v-if="showPage(i)" :key="i" class="page-number" :class="curPage === i && 'active'" :to="jumpTo(i)">
+      <RouterLink v-if="showPage(i)" :key="i" class="page-number" :class="curPage === i && 'active'" :to="jumpTo(i)">
         {{ i }}
-      </router-link>
+      </RouterLink>
       <span v-else-if="i === curPage - surLen" :key="`prev-space-${i}`" class="space" disabled>
         ...
       </span>
@@ -64,9 +64,9 @@ function jumpTo(page: number) {
       </span>
     </template>
 
-    <router-link v-if="curPage !== totalPages" class="page-number" :to="jumpTo(curPage + 1)" aria-label="next">
+    <RouterLink v-if="curPage !== totalPages" class="page-number" :to="jumpTo(curPage + 1)" aria-label="next">
       <div i-ri-arrow-right-s-line />
-    </router-link>
+    </RouterLink>
   </nav>
 </template>
 

package/client/components/debug/ValaxyDevtools.vue

@@ -0,0 +1,6 @@
+<template>
+  <div>
+    <h1>DevTools</h1>
+    <p>DevTools</p>
+  </div>
+</template>

package/client/composables/dark.ts

@@ -1,4 +1,43 @@
 import { useDark, useToggle } from '@vueuse/core'
 
+import 'valaxy/client/styles/common/view-transition.css'
+
 export const isDark = useDark()
 export const toggleDark = useToggle(isDark)
+
+export function toggleDarkWithTransition(event: MouseEvent, options: { duration?: number; easing?: EffectTiming['easing'] } = {}) {
+  // @ts-expect-error startViewTransition is not defined
+  if (!document.startViewTransition) {
+    toggleDark()
+    return
+  }
+
+  const x = event.clientX
+  const y = event.clientY
+  const endRadius = Math.hypot(
+    Math.max(x, innerWidth - x),
+    Math.max(y, innerHeight - y),
+  )
+
+  // @ts-expect-error startViewTransition is not defined
+  const transition = document.startViewTransition(() => {
+    toggleDark()
+  })
+
+  transition.ready.then(() => {
+    const clipPath = [
+      `circle(0px at ${x}px ${y}px)`,
+      `circle(${endRadius}px at ${x}px ${y}px)`,
+    ]
+    document.documentElement.animate(
+      {
+        clipPath: isDark.value ? clipPath.reverse() : clipPath,
+      },
+      {
+        duration: options.duration || 300,
+        easing: options.easing || 'ease-in',
+        pseudoElement: isDark.value ? '::view-transition-old(root)' : '::view-transition-new(root)',
+      },
+    )
+  })
+}

package/client/layouts/404.vue

@@ -12,7 +12,7 @@ const { back } = useBack()
       404
     </div>
 
-    <router-view />
+    <RouterView />
 
     <div>
       <button class="btn rounded-full" p="x-6 y-2" text="sm" m="3 t8" :title="t('button.back')" @click="back">

package/client/layouts/layout.vue

@@ -4,7 +4,7 @@ import { asAny } from 'valaxy'
 </script>
 
 <template>
-  <router-view v-slot="{ Component }">
+  <RouterView v-slot="{ Component }">
     <Component :is="asAny(Component)">
       <template #main-header>
         <slot name="main-header" />
@@ -35,5 +35,5 @@ import { asAny } from 'valaxy'
         <slot name="footer" />
       </template>
     </Component>
-  </router-view>
+  </RouterView>
 </template>

package/client/locales/zh-CN.yml

@@ -49,7 +49,7 @@ post:
   view_link: 查看链接
   read_more: 阅读更多
   cover: 封面
-  time_warning: 本文最后更新于 {ago}，文中所描述的信息可能已发生改变。
+  time_warning: 本文最后更新于{ago}，文中所描述的信息可能已发生改变。
   copyright:
     author: 本文作者
     link: 本文链接

package/client/pages/[...all].vue

@@ -6,6 +6,8 @@ const router = useRouter()
 const route = useRoute()
 
 onBeforeMount(() => {
+  router.push('/')
+
   // compatible for post url ends with slash
   if (route.path !== '/' && route.path.endsWith('/'))
     router.replace(route.path.slice(0, -1))

package/client/styles/common/transition.scss

@@ -21,3 +21,4 @@
     opacity: 0;
   }
 }
+

package/client/styles/common/view-transition.css

@@ -0,0 +1,21 @@
+/* dark */
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* 进入dark模式和退出dark模式时，两个图像的位置顺序正好相反 */
+.dark::view-transition-old(root) {
+  z-index: 9999;
+}
+.dark::view-transition-new(root) {
+  z-index: 1;
+}
+
+::view-transition-old(root) {
+  z-index: 1;
+}
+::view-transition-new(root) {
+  z-index: 9999;
+}