fix: i18n title for themes + algolia hot key for theme-yun (#569)

* fix: i18n title for themes

* fix(theme-yun): cmd + k to search when first mounted, completes #567

* fix: code group-icons, completes  #557

demo/custom/valaxy-theme-custom/components/StarterArticle.vue

@@ -34,7 +34,7 @@ const prevPost = computed(() => posts.value[findCurrentIndex() + 1])
           md:text-5xl md:leading-14
         "
       >
-        {{ frontmatter.title }}
+        {{ tObject(frontmatter.title || '', locale) }}
       </h1>
     </header>
 

packages/valaxy-theme-yun/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)
 })

packages/valaxy-theme-yun/components/menu/YunNavMenuTitle.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { useFrontmatter, useSiteConfig } from 'valaxy'
+import { tObject, useFrontmatter, useSiteConfig } 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, locale } = useI18n()
 
 const yunApp = useYunAppStore()
 const fm = useFrontmatter()
@@ -64,10 +64,10 @@ function goToLink() {
           class="size-4"
           :class="fm.icon || 'i-ri-article-line'"
         />
-        <span class="truncate"> {{ fm.title }}</span>
+        <span class="truncate"> {{ tObject(fm.title || '', locale) }}</span>
       </div>
       <span v-if="fm.subtitle" class="font-light op-80">
-        {{ fm.subtitle }}
+        {{ tObject(fm.subtitle || '', locale) }}
       </span>
     </div>
     <span v-if="showSiteTitle" class="font-light truncate">

packages/valaxy-theme-yun/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>

packages/valaxy/node/plugins/preset.ts

@@ -153,7 +153,7 @@ export async function ViteValaxyPlugins(
     }
   }
 
-  const customIcon = {
+  const builtinCustomIcon = {
     nodejs: 'vscode-icons:file-type-node',
     playwright: 'vscode-icons:file-type-playwright',
     typedoc: 'vscode-icons:file-type-typedoc',
@@ -161,10 +161,13 @@ export async function ViteValaxyPlugins(
   }
   plugins.push(
     groupIconVitePlugin({
-      customIcon,
-      ...valaxyConfig.groupIcons,
+      customIcon: {
+        ...builtinCustomIcon,
+        ...valaxyConfig.groupIcons?.customIcon,
+      },
       defaultLabels: [
         ...valaxyConfig.groupIcons?.defaultLabels || [],
+        ...Object.keys(builtinCustomIcon),
         ...Object.keys(valaxyConfig.groupIcons?.customIcon || {}),
       ],
     }),