feat: allow toggle locale by ?lang=

packages/valaxy/client/composables/app/useValaxyApp.ts

@@ -5,8 +5,9 @@ import { useSeoMeta } from '@unhead/vue'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { useFrontmatter, useValaxyHead, useValaxyI18n } from '../../composables'
+import { useRoute } from 'vue-router'
 
+import { useFrontmatter, useLocale, useValaxyHead, useValaxyI18n } from '../../composables'
 import { useTimezone } from '../../composables/global'
 // https://github.com/vueuse/head
 // you can use this to manipulate the document head in any components,
@@ -23,6 +24,13 @@ export function useValaxyApp() {
 
   const title = computed(() => $tO(fm.value.title))
 
+  const route = useRoute()
+  const { toggleLocale } = useLocale()
+  // if lang exist, toggle the locale
+  if (route.query.lang) {
+    toggleLocale(route.query.lang as string)
+  }
+
   // seo
   // todo: get first image url from markdown
   const siteUrl = computed(() => fm.value.url || siteConfig.value.url)
@@ -59,6 +67,5 @@ export function useValaxyApp() {
   ])
 
   useTimezone()
-
   useValaxyHead()
 }

packages/valaxy/client/composables/locale.ts

@@ -17,24 +17,32 @@ export function useLocale() {
   // setDefaultOptions({ locale: locale.value === 'zh-CN' ? zhCN : enUS })
   dayjs.locale(locale.value === 'zh-CN' ? 'zh-cn' : 'en')
 
+  /**
+   * toggle to new locale
+   * @param newLocale
+   */
+  function toggleLocale(newLocale: string) {
+    locale.value = newLocale
+    // for localStorage
+    lang.value = newLocale
+    // set date locale
+    // setDefaultOptions({ locale: locale.value === 'zh-CN' ? zhCN : enUS })
+    dayjs.locale(newLocale === 'zh-CN' ? 'zh-cn' : 'en')
+    if (isClient)
+      document.documentElement.setAttribute('lang', newLocale)
+  }
+
   const toggleLocales = () => {
     // change to some real logic
     const locales = availableLocales
-
     locale.value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
-    // for localStorage
-    lang.value = locale.value
-
-    // set date locale
-    // setDefaultOptions({ locale: locale.value === 'zh-CN' ? zhCN : enUS })
-    dayjs.locale(locale.value === 'zh-CN' ? 'zh-cn' : 'en')
-
-    if (isClient)
-      document.documentElement.setAttribute('lang', locale.value)
+    const newLocale = locale.value
+    toggleLocale(newLocale)
   }
 
   return {
     lang,
+    toggleLocale,
     toggleLocales,
   }
 }