valaxy-theme-yun 0.24.5 → 0.25.1

package/components/YunCategory.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { CategoryList, Post } from 'valaxy'
-import { useInvisibleElement } from 'valaxy'
+import { useInvisibleElement, useValaxyI18n } from 'valaxy'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -25,6 +25,7 @@ const router = useRouter()
 
 const collapse = ref(props.collapsable)
 const { t } = useI18n()
+const { $t } = useValaxyI18n()
 
 const postCollapseElRef = ref<HTMLElement>()
 const { show } = useInvisibleElement(postCollapseElRef)
@@ -79,7 +80,7 @@ if (props.level === 1) {
       @click="jumpToDisplayCategory(parentKey)"
     >
       <span>
-        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : category.name }}
+        {{ category.name === 'Uncategorized' ? t('category.uncategorized') : $t(category.name) }}
       </span>
       <span class="rounded-full px-1.5 bg-black/5 shadow-sm op-60" text="xs">
         {{ category.total }}

package/components/YunCategoryChildItem.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import type { Post } from 'valaxy'
-import { isCategoryList, tObject } from 'valaxy'
+import { isCategoryList, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 defineProps<{
@@ -14,10 +12,8 @@ defineProps<{
 /**
  * i18n
  */
-const { locale } = useI18n()
-function getTitle(post: Post | any) {
-  return tObject(post.title || '', locale.value)
-}
+const { $tO } = useValaxyI18n()
+
 const route = useRoute()
 const categoryList = computed(() => {
   const c = (route.query.category as string) || ''
@@ -42,7 +38,7 @@ const categoryList = computed(() => {
       hover="bg-black/5"
     >
       <div i-ri-file-text-line />
-      <span font="serif black">{{ getTitle(categoryItem) }}</span>
+      <span class="st-text">{{ $tO(categoryItem.title) }}</span>
     </RouterLink>
   </template>
 </template>

package/components/YunFooter.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useSiteConfig, useValaxyConfig, useValaxyDark } from 'valaxy'
+import { useSiteConfig, useValaxyConfig, useValaxyDark, useValaxyI18n } from 'valaxy'
 import pkg from 'valaxy/package.json'
 import { capitalize, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -21,6 +21,7 @@ const gradientStyles = computed(() => {
 })
 
 const { t } = useI18n()
+const { $t } = useValaxyI18n()
 const config = useValaxyConfig()
 const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
@@ -72,7 +73,7 @@ const footerIcon = computed(() => themeConfig.value.footer.icon || {
       >
         <div :class="footerIcon.name" />
       </a>
-      <span>{{ siteConfig.author.name }}</span>
+      <span>{{ $t(siteConfig.author.name) }}</span>
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">

package/components/YunLayoutPostTag.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useValaxyI18n } from 'valaxy'
 import { ref } from 'vue'
 import { useYunSpringAnimation } from '../composables/animation'
 
@@ -8,6 +9,8 @@ const props = defineProps<{
   count: number
 }>()
 
+const { $t } = useValaxyI18n()
+
 const tagRef = ref<HTMLElement>()
 useYunSpringAnimation(tagRef, {
   i: props.i || 0,
@@ -21,7 +24,7 @@ useYunSpringAnimation(tagRef, {
     inline-flex my="2" p="1"
     class="post-tag cursor-pointer items-baseline leading-4"
   >
-    <span inline-flex>#{{ title }}</span>
+    <span inline-flex>#{{ $t(title) }}</span>
     <span inline-flex text="xs">[{{ count }}]</span>
   </span>
 </template>

package/components/YunPostCard.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
-import { tObject } from 'valaxy'
+import { useValaxyI18n } from 'valaxy'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { usePostProperty } from '../composables'
@@ -9,7 +9,8 @@ const props = defineProps<{
   post: Post
 }>()
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
+const { $tO } = useValaxyI18n()
 
 const { icon, styles, color } = usePostProperty(props.post.type)
 
@@ -20,10 +21,6 @@ const postTitleClass = computed(() => {
   }
   return props.post.postTitleClass || gradientClasses.value
 })
-
-const postTitle = computed(() => {
-  return tObject(props.post.title || '', locale.value)
-})
 </script>
 
 <template>
@@ -44,7 +41,7 @@ const postTitle = computed(() => {
         loading="lazy"
       >
 
-      <div class="flex flex-col items-center relative" :class="post.cover && 'h-54'" w="full">
+      <div class="flex flex-col items-center relative px-6" :class="post.cover && 'h-54'" w="full">
         <AppLink
           class="post-title-link cursor-pointer"
           :to="post.path || ''"
@@ -56,7 +53,7 @@ const postTitle = computed(() => {
             text="center" font="serif black"
           >
             <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />
-            <span>{{ postTitle }}</span>
+            <span>{{ $tO(post.title) }}</span>
           </div>
         </AppLink>
 
@@ -86,7 +83,7 @@ const postTitle = computed(() => {
 
     <!-- always show -->
     <div
-      w="full" class="yun-card-actions flex justify-between"
+      w="full" class="yun-card-actions flex justify-between px-6"
       min-h="10"
       text="sm"
     >

package/components/YunPostCategories.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { useValaxyI18n } from 'valaxy'
 
 defineProps<{
   categories: Post['categories']
 }>()
+
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -19,7 +22,7 @@ defineProps<{
   >
     <div m="x-1" inline-flex i-ri-folder-2-line />
     <span>
-      {{ Array.isArray(categories) ? categories.join(' / ') : categories }}
+      {{ Array.isArray(categories) ? categories.map($t).join(' / ') : $t(categories || '') }}
     </span>
   </RouterLink>
 </template>

package/components/YunPostCollapseItem.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import type { Post } from 'valaxy'
 import { useMotion } from '@vueuse/motion'
-import { formatDate, tObject } from 'valaxy'
-import { computed, ref } from 'vue'
-
-import { useI18n } from 'vue-i18n'
+import { formatDate, useValaxyI18n } from 'valaxy'
+import { ref } from 'vue'
 
 const props = defineProps<{
   i: number
@@ -29,10 +27,7 @@ useMotion(itemRef, {
   },
 })
 
-const { locale } = useI18n()
-const postTitle = computed(() => {
-  return tObject(props.post.title || '', locale.value)
-})
+const { $tO } = useValaxyI18n()
 </script>
 
 <template>
@@ -55,7 +50,7 @@ const postTitle = computed(() => {
       </div>
       <h2 class="post-title w-full" inline-flex items-center font="serif black">
         <RouterLink :to="post.path || ''" class="post-title-link">
-          {{ postTitle }}
+          {{ $tO(post.title) }}
         </RouterLink>
       </h2>
     </header>

package/components/YunPostTags.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
+import { useValaxyI18n } from 'valaxy'
 
 defineProps<{
   tags: Post['tags']
 }>()
+
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -19,7 +22,7 @@ defineProps<{
       border
       hover="bg-blue-500 text-white"
     >
-      <span>{{ tag }}</span>
+      <span>{{ $t(tag) }}</span>
     </RouterLink>
   </div>
 </template>

package/components/YunSearchTrigger.vue

@@ -16,7 +16,7 @@ function togglePopup() {
 
 const algoliaRef = ref()
 onMounted(() => {
-  // algolia has its own hotkey
+  // algolia has its own hotkey handling in YunAlgoliaSearch component
   if (isFuse.value)
     useHotKey('k', togglePopup)
 })

package/components/YunSidebarLinks.vue

@@ -1,7 +1,9 @@
 <script lang="ts" setup>
+import { useValaxyI18n } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
 const themeConfig = useThemeConfig()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -9,7 +11,8 @@ const themeConfig = useThemeConfig()
     <AppLink
       v-for="item, i in themeConfig.pages" :key="i"
       class="link-item yun-icon-btn" inline-flex
-      :to="item.url" :title="item.name"
+      :to="item.url"
+      :title="$t(item.name)"
       :style="`color:${item.color}`"
     >
       <div :class="item.icon" class="icon size-6" />

package/components/YunSiteInfo.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
-const { t } = useI18n()
+const { $t } = useValaxyI18n()
 const siteConfig = useSiteConfig()
 </script>
 
@@ -16,14 +15,14 @@ const siteConfig = useSiteConfig()
     <YunAuthorName />
     <YunSiteTitle />
     <h4
-      v-if="siteConfig.subtitle"
+      v-if="$t(siteConfig.subtitle)"
       class="site-subtitle block"
       text="xs"
     >
-      {{ t(siteConfig.subtitle) }}
+      {{ $t(siteConfig.subtitle) }}
     </h4>
     <div v-if="siteConfig.description" class="site-description">
-      {{ t(siteConfig.description) }}
+      {{ $t(siteConfig.description) }}
     </div>
   </div>
 </template>

package/components/YunSocialLinkItem.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import type { SocialLink } from 'valaxy/types'
-import { useAppStore } from 'valaxy'
+import { useAppStore, useValaxyI18n } from 'valaxy'
 import { computed } from 'vue'
 
 const props = defineProps<{
   social: SocialLink
 }>()
 
+const { $t } = useValaxyI18n()
+
 const appStore = useAppStore()
 const color = computed(() => {
   return (appStore.isDark && props.social.color === 'black') ? 'white' : props.social.color
@@ -16,7 +18,7 @@ const color = computed(() => {
 <template>
   <a
     class="links-of-author-item yun-icon-btn"
-    rel="noopener" :href="social.link" :title="social.name"
+    rel="noopener" :href="social.link" :title="$t(social.name)"
     target="_blank"
     :style="`color:${color}`"
   >

package/components/YunSponsor.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
-import { useSiteConfig } from 'valaxy'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
+const { $t } = useValaxyI18n()
 
 const siteConfig = useSiteConfig()
 const showQr = ref(false)
@@ -35,7 +36,7 @@ const sponsorBtnTitle = computed(() => {
           :href="method.url" target="_blank"
           :style="`color:${method.color}`"
         >
-          <img class="sponsor-method-img" border="~ rounded" p="1" loading="lazy" :src="method.url" :title="method.name">
+          <img class="sponsor-method-img" border="~ rounded" p="1" loading="lazy" :src="method.url" :title="$t(method.name)">
           <div text="xl" m="2" :class="method.icon" />
         </a>
       </div>

package/components/author/YunAuthorIntro.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
-const { t } = useI18n()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
   <div v-if="siteConfig.author.intro" class="site-author-intro" m="t-0 b-4">
-    {{ t(siteConfig.author.intro) }}
+    {{ $t(siteConfig.author.intro) }}
   </div>
 </template>

package/components/author/YunAuthorName.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
@@ -9,6 +10,6 @@ const siteConfig = useSiteConfig()
     class="site-author-name font-black font-serif text-$va-c-text op-80 hover:op-100 flex-center"
     to="/about"
   >
-    {{ siteConfig.author.name }}
+    {{ $t(siteConfig.author.name) }}
   </RouterLink>
 </template>

package/components/menu/YunNavMenuTitle.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { useFrontmatter, useSiteConfig } from 'valaxy'
+import { useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
 import { computed, ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useYunAppStore } from '../../stores'
 
-const { t } = useI18n()
+const { $t, $tO } = useValaxyI18n()
 
 const yunApp = useYunAppStore()
 const fm = useFrontmatter()
@@ -64,14 +63,14 @@ function goToLink() {
           class="size-4"
           :class="fm.icon || 'i-ri-article-line'"
         />
-        <span class="truncate"> {{ fm.title }}</span>
+        <span class="truncate"> {{ $tO(fm.title || '') }}</span>
       </div>
       <span v-if="fm.subtitle" class="font-light op-80">
-        {{ fm.subtitle }}
+        {{ $tO(fm.subtitle || '') }}
       </span>
     </div>
     <span v-if="showSiteTitle" class="font-light truncate">
-      {{ t(siteConfig.title) }}
+      {{ $t(siteConfig.title) }}
     </span>
   </div>
 </template>

package/components/prologue/PrologueSocialIcon.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useMotion } from '@vueuse/motion'
-import { ref } from 'vue'
+import { useValaxyI18n } from 'valaxy/client'
+import { computed, ref } from 'vue'
 
 const props = defineProps<{
   social: {
@@ -12,7 +13,7 @@ const props = defineProps<{
   // animation
   delay: number
 }>()
-
+const { $t } = useValaxyI18n()
 const iconRef = ref<HTMLElement>()
 useMotion(iconRef, {
   initial: {
@@ -34,18 +35,20 @@ useMotion(iconRef, {
     },
   },
 })
+
+const socialName = computed(() => $t(props.social.name))
 </script>
 
 <template>
   <div
-    v-tooltip="social.name"
+    v-tooltip="socialName"
     class="size-10 inline-flex-center"
   >
     <a
       ref="iconRef"
       class="prologue-social-icon inline-flex-center w-full h-full text-white bg-$c-brand hover:bg-white hover:text-$c-brand"
       rel="noopener"
-      :href="social.link" :title="social.name"
+      :href="social.link" :title="socialName"
       target="_blank"
       :style="`--c-brand:${social.color}`"
     >

package/components/prologue/YunPrologueSquare.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import { useThemeConfig } from '../../composables'
 
 const themeConfig = useThemeConfig()
+const { t } = useI18n()
 
 const showContent = ref(false)
 </script>
@@ -79,7 +82,7 @@ const showContent = ref(false)
         >
           <YunSiteLinkItem
             :page="{
-              name: '博客文章',
+              name: t('menu.posts'),
               icon: 'i-ri-article-line',
               url: '/posts/',
             }"

package/components/site/YunSiteDescription.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
-const { t } = useI18n()
+const { $t } = useValaxyI18n()
 </script>
 
 <template>
   <div v-if="siteConfig.description" class="site-description text-$va-c-text text-sm">
-    {{ t(siteConfig.description) }}
+    {{ $t(siteConfig.description) }}
   </div>
 </template>

package/components/site/YunSiteLinkItem.vue

@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import type { PageProps } from '../../types'
+import { useValaxyI18n } from 'valaxy'
 import { useYunAppStore } from '../../stores'
 
 defineProps<{
   page: PageProps
 }>()
 
+const { $t } = useValaxyI18n()
+
 const yunApp = useYunAppStore()
 </script>
 
@@ -14,14 +17,15 @@ const yunApp = useYunAppStore()
     class="link-item inline-flex-center gap-2 transition rounded-lg text-xl p-2 md:(text-lg p-2) lg:(text-xl p-3) text-$va-c-text"
     bg="white/5 dark:black/5"
     inline-flex
-    :to="page.url" :title="page.name"
+    :to="page.url"
+    :title="$t(page.name)"
     :style="`color:${page.color}`"
     hover="bg-white/80 dark:bg-black/80"
     @click="yunApp.fullscreenMenu.isOpen = false"
   >
     <div :class="page.icon" class="icon" />
     <span>
-      {{ page.name }}
+      {{ $t(page.name) }}
     </span>
   </AppLink>
 </template>

package/components/site/YunSiteSubtitle.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 
+const { $t } = useValaxyI18n()
 const siteConfig = useSiteConfig()
 </script>
 
@@ -9,6 +10,6 @@ const siteConfig = useSiteConfig()
     v-if="siteConfig.subtitle"
     class="site-subtitle block text-$va-c-text op-80 font-medium" text="sm"
   >
-    {{ siteConfig.subtitle }}
+    {{ $t(siteConfig.subtitle) }}
   </h4>
 </template>

package/components/site/YunSiteTitle.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useSiteConfig, useValaxyI18n } from 'valaxy'
 import { useRouter } from 'vue-router'
 import { useThemeConfig } from '../../composables'
 
@@ -8,8 +7,7 @@ const router = useRouter()
 const siteConfig = useSiteConfig()
 const themeConfig = useThemeConfig()
 
-const { t } = useI18n()
-
+const { $t } = useValaxyI18n()
 // bg-gradient-to-r gradient-text from-#1e3c72 to-dark dark:(from-#66a6ff to-blue-500)
 </script>
 
@@ -19,14 +17,14 @@ const { t } = useI18n()
     class="site-name text-lg leading-loose"
     :class="themeConfig.banner.siteNameClass"
   >
-    {{ t(siteConfig.title) }}
+    {{ $t(siteConfig.title) }}
   </RouterLink>
   <span
     v-else
     class="site-name text-lg leading-loose"
     :class="themeConfig.banner.siteNameClass"
   >
-    {{ t(siteConfig.title) }}
+    {{ $t(siteConfig.title) }}
   </span>
 </template>
 

package/components/theme/nimbo/YunNimboNavMenu.vue

@@ -1,10 +1,14 @@
 <script setup lang="ts">
-import { useAppStore, useSiteConfig } from 'valaxy'
+import { useAppStore, useSiteConfig, useValaxyI18n } from 'valaxy'
 import { onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 import { useThemeConfig } from '../../../composables'
 import { useYunAppStore } from '../../../stores'
 
+const { t } = useI18n()
+const { $t } = useValaxyI18n()
+
 // const app = useAppStore()
 const yunApp = useYunAppStore()
 const siteConfig = useSiteConfig()
@@ -60,7 +64,7 @@ const app = useAppStore()
         <template v-if="yunApp.size.isLg">
           <YunNavMenuItem
             icon="i-ri-article-line" to="/posts/"
-            title="博客文章"
+            :title="t('menu.posts')"
           />
 
           <YunNavMenuItem
@@ -68,7 +72,7 @@ const app = useAppStore()
             :key="i"
             :icon="item.icon"
             :to="item.link"
-            :title="item.text"
+            :title="$t(item.text)"
           />
         </template>
       </div>

package/components/third/YunAlgoliaSearch.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { isEmptyAddon } from 'valaxy'
 import * as addonAlgolia from 'valaxy-addon-algolia'
+import { onMounted, onUnmounted } from 'vue'
 
 defineProps<{
   open: boolean
@@ -16,6 +17,40 @@ defineExpose({
   load,
   dispatchEvent,
 })
+
+function isEditingContent(event: KeyboardEvent): boolean {
+  const element = event.target as HTMLElement
+  const tagName = element.tagName
+
+  return (
+    element.isContentEditable
+    || tagName === 'INPUT'
+    || tagName === 'SELECT'
+    || tagName === 'TEXTAREA'
+  )
+}
+
+onMounted(() => {
+  const handleSearchHotKey = (event: KeyboardEvent) => {
+    if (
+      (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey))
+      || (!isEditingContent(event) && event.key === '/')
+    ) {
+      event.preventDefault()
+      load()
+      // eslint-disable-next-line ts/no-use-before-define
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
 </script>
 
 <template>

package/layouts/post.vue

@@ -2,20 +2,19 @@
 import { defineArticle, useSchemaOrg } from '@unhead/schema-org/vue'
 
 import dayjs from 'dayjs'
-import { tObject, useFrontmatter, useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
+import { useFrontmatter, useSiteConfig, useValaxyI18n } from 'valaxy'
 
 const siteConfig = useSiteConfig()
 const frontmatter = useFrontmatter()
 
-const { locale } = useI18n()
+const { $t, $tO } = useValaxyI18n()
 const article: Parameters<typeof defineArticle>[0] = {
   '@type': 'BlogPosting',
-  'headline': tObject(frontmatter.value.title || '', locale.value),
-  'description': tObject(frontmatter.value.description || '', locale.value),
+  'headline': $tO(frontmatter.value.title),
+  'description': $tO(frontmatter.value.description),
   'author': [
     {
-      name: siteConfig.value.author.name,
+      name: $t(siteConfig.value.author.name),
       url: siteConfig.value.author.link,
     },
   ],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "valaxy-theme-yun",
   "type": "module",
-  "version": "0.24.5",
+  "version": "0.25.1",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@types/animejs": "^3.1.13",
-    "valaxy": "0.24.5",
+    "valaxy": "0.25.1",
     "valaxy-addon-waline": "0.2.1"
   },
   "scripts": {

package/styles/main.scss

@@ -8,9 +8,10 @@ $c-primary: #0078e7 !default;
 );
 
 // override the default style of star-markdown-css
+@use "./animations/index.scss" as *;
 @use "./common/button.scss" as *;
 @use "./common/markdown.scss" as *;
+// valaxy client styles
 @use 'valaxy/client/styles/components/code.scss' as *;
 @use 'valaxy/client/styles/components/code-group.scss' as *;
 @use 'valaxy/client/styles/components/custom-block.scss' as *;
-@use "./animations/index.scss" as *;