valaxy 0.20.0 → 0.20.2

package/client/components/ValaxyApp.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 // TODO: add docs to override ValaxyApp
 import { computed } from 'vue'
-import { useHead, useSeoMeta } from '@unhead/vue'
+// import { useHead, useSeoMeta } from '@unhead/vue'
+import { useSeoMeta } from '@unhead/vue'
 
 // @ts-expect-error virtual module
 import ValaxyUserApp from '/@valaxyjs/UserAppVue'
 // @ts-expect-error virtual module
 import ValaxyThemeApp from '/@valaxyjs/ThemeAppVue'
 
-import pkg from 'valaxy/package.json'
 import { useI18n } from 'vue-i18n'
 import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org'
 
@@ -16,7 +16,7 @@ import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhea
 // you can use this to manipulate the document head in any components,
 // they will be rendered correctly in the html results with vite-ssg
 import { useSiteConfig } from '../config'
-import { useFrontmatter } from '../composables'
+import { useFrontmatter, useValaxyHead } from '../composables'
 import { useTimezone } from '../composables/global'
 import ValaxyAddons from './ValaxyAddons.vue'
 
@@ -30,38 +30,6 @@ const fm = useFrontmatter()
 const { locale } = useI18n()
 
 const title = computed(() => fm.value[`title_${locale.value}`] || fm.value.title)
-useHead({
-  title,
-  titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${siteConfig.value.title}` : siteConfig.value.title)),
-  link: [
-    {
-      rel: 'icon',
-      href: siteConfig.value.favicon,
-      type: siteConfig.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
-    },
-  ],
-  meta: [
-    { name: 'description', content: computed(() => siteConfig.value.description) },
-    {
-      name: 'generator',
-      content: `Valaxy ${pkg.version}`,
-    },
-  ],
-
-  templateParams: {
-    schemaOrg: {
-      host: siteConfig.value.url,
-    },
-  },
-
-  script: [
-    {
-      id: 'check-mac-os',
-      innerHTML: `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`,
-      async: true,
-    },
-  ],
-})
 
 // seo
 // todo: get first image url from markdown
@@ -99,6 +67,8 @@ useSchemaOrg([
 ])
 
 useTimezone()
+
+useValaxyHead()
 </script>
 
 <template>

package/client/components/ValaxyFootnoteTooltip.vue

@@ -1,17 +1,14 @@
-<script lang="ts">
-import { PopperWrapper } from 'floating-vue'
-
-const Component = ({
-  ...PopperWrapper,
-  name: 'ValaxyFootnoteTooltip',
-  vPopperTheme: 'tooltip',
-}) as unknown as typeof PopperWrapper
-
-export default Component
+<script setup lang="ts">
+import { Tooltip } from 'floating-vue'
+// distance offset for sup
 </script>
 
-<style scoped>
-div .v-popper {
-  display: inline
-}
-</style>
+<template>
+  <Tooltip class="inline-block" :distance="8">
+    <slot />
+
+    <template #popper>
+      <slot name="popper" />
+    </template>
+  </Tooltip>
+</template>

package/client/composables/app/index.ts

@@ -0,0 +1 @@
+export * from './useValaxyHead'

package/client/composables/app/useValaxyHead.ts

@@ -0,0 +1,47 @@
+import { computed } from 'vue'
+import pkg from 'valaxy/package.json'
+import { useHead } from '@unhead/vue'
+import { useI18n } from 'vue-i18n'
+
+import { useSiteConfig } from '../../config'
+import { useFrontmatter } from '../../composables'
+
+export function useValaxyHead() {
+  const { locale } = useI18n()
+
+  const fm = useFrontmatter()
+  const siteConfig = useSiteConfig()
+  const title = computed(() => fm.value[`title_${locale.value}`] || fm.value.title)
+  useHead({
+    title,
+    titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${siteConfig.value.title}` : siteConfig.value.title)),
+    link: [
+      {
+        rel: 'icon',
+        href: siteConfig.value.favicon,
+        type: siteConfig.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
+      },
+    ],
+    meta: [
+      { name: 'description', content: computed(() => siteConfig.value.description) },
+      {
+        name: 'generator',
+        content: `Valaxy ${pkg.version}`,
+      },
+    ],
+
+    templateParams: {
+      schemaOrg: {
+        host: siteConfig.value.url,
+      },
+    },
+
+    script: [
+      {
+        id: 'check-mac-os',
+        innerHTML: `document.documentElement.classList.toggle('mac', /Mac|iPhone|iPod|iPad/i.test(navigator.platform))`,
+        async: true,
+      },
+    ],
+  })
+}

package/client/composables/index.ts

@@ -19,3 +19,6 @@ export * from './outline'
 // utils
 export * from './back'
 export * from './decrypt'
+
+// app
+export * from './app'

package/client/modules/floating-vue.ts

@@ -6,13 +6,7 @@ import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 import type { ComputedRef } from 'vue'
 
 export async function install({ app }: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
-  app.use(FloatingVue, Object.assign({
-    themes: {
-      tooltip: {
-        delay: {
-          show: 0,
-        },
-      },
-    },
-  }, config.value.siteConfig.floatingVue || {}))
+  // @see https://floating-vue.starpad.dev/guide/config#default-values
+  const defaultFloatingVueConfig = {}
+  app.use(FloatingVue, Object.assign(defaultFloatingVueConfig, config.value.siteConfig.floatingVue || {}))
 }

package/client/stores/app.ts

@@ -1,6 +1,6 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { ref } from 'vue'
-import { useMobile, useThemeConfig, useValaxyDark } from 'valaxy'
+import { computed, ref } from 'vue'
+import { useMobile, useSiteConfig, useThemeConfig, useValaxyDark } from 'valaxy'
 
 /**
  * Global store for users
@@ -11,16 +11,25 @@ import { useMobile, useThemeConfig, useValaxyDark } from 'valaxy'
  * ```
  */
 export const useAppStore = defineStore('app', () => {
+  const siteConfig = useSiteConfig()
+
   const themeConfig = useThemeConfig()
   const { isDark, toggleDark, toggleDarkWithTransition, themeColor } = useValaxyDark(themeConfig.value.valaxyDarkOptions)
 
   const isMobile = useMobile()
   const showLoading = ref(true)
 
+  const showToggleLocale = computed(() => siteConfig.value.languages.length > 1)
+
   return {
     isMobile,
     // for dark
     isDark,
+    /**
+     * show toggle locale btn
+     * only show toggle when `siteConfig.languages.length > 1`
+     */
+    showToggleLocale,
     themeColor,
     toggleDark,
     toggleDarkWithTransition,