valaxy 0.19.9 → 0.19.11

package/client/components/ValaxyApp.vue

@@ -17,6 +17,7 @@ import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhea
 // they will be rendered correctly in the html results with vite-ssg
 import { useSiteConfig } from '../config'
 import { useFrontmatter } from '../composables'
+import { useTimezone } from '../composables/global'
 import ValaxyAddons from './ValaxyAddons.vue'
 
 // <link rel="apple-touch-icon" href="/pwa-192x192.png">
@@ -96,6 +97,8 @@ useSchemaOrg([
   }),
   defineWebPage(),
 ])
+
+useTimezone()
 </script>
 
 <template>

package/client/components/ValaxyFootnoteTooltip.vue

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { PopperWrapper } from 'floating-vue'
+
+const Component = ({
+  ...PopperWrapper,
+  name: 'ValaxyFootnoteTooltip',
+  vPopperTheme: 'tooltip',
+}) as unknown as typeof PopperWrapper
+
+export default Component
+</script>
+
+<style scoped>
+@import 'floating-vue/dist/style.css';
+
+div .v-popper {
+  display: inline
+}
+</style>

package/client/composables/collections.ts

@@ -0,0 +1,28 @@
+import { ref } from 'vue'
+import type { CollectionConfig } from '../define'
+
+/**
+ * Composable for Collections
+ * /collections/:collectionId/:slug
+ * @example /collections/love-letters/1
+ */
+export function useCollections() {
+  // TODO
+
+  const collections = ref<CollectionConfig[]>([
+    {
+      id: 'i-and-she',
+      name: 'I and She',
+      description: 'Love letters from the past',
+    },
+    {
+      id: 'love-and-peace',
+      name: '爱与和平',
+      description: 'Recipes for a good life',
+    },
+  ])
+
+  return {
+    collections,
+  }
+}

package/client/composables/common.ts

@@ -2,14 +2,31 @@ import { useRoute } from 'vue-router'
 import { computed, inject } from 'vue'
 import { isClient } from '@vueuse/core'
 
-import type { PageData, Post } from 'valaxy/types'
+import type { PageData, PostFrontMatter } from 'valaxy/types'
 import { useSiteConfig } from '../config'
 
-export function useFrontmatter() {
+/**
+ * Get `route.meta.frontmatter` from your markdown file
+ * @example
+ * ```md
+ * ---
+ * title: Hello World
+ * ---
+ * ```
+ *
+ * ```ts
+ * const fm = useFrontmatter()
+ * console.log(fm.value.title)
+ *
+ * const fm = useFrontmatter<{ custom: string }>()
+ * console.log(fm.value.custom)
+ * ```
+ */
+export function useFrontmatter<T extends Record<string, any> = PostFrontMatter>() {
   // inject not in app root
   const route = useRoute()
-  const frontmatter = computed<Post>(() => {
-    return route.meta.frontmatter || {}
+  const frontmatter = computed(() => {
+    return route.meta.frontmatter as Partial<PostFrontMatter & T> || {}
   })
   return frontmatter
 }

package/client/composables/dark.ts

@@ -32,7 +32,6 @@ export function useValaxyDark(options: {
     import('valaxy/client/styles/common/view-transition.css')
 
   function toggleDarkWithTransition(event: MouseEvent, options: { duration?: number, easing?: EffectTiming['easing'] } = {}) {
-    // @ts-expect-error startViewTransition is not defined
     if (!document.startViewTransition) {
       toggleDark()
       return
@@ -45,7 +44,6 @@ export function useValaxyDark(options: {
       Math.max(y, innerHeight - y),
     )
 
-    // @ts-expect-error startViewTransition is not defined
     const transition = document.startViewTransition(() => {
       toggleDark()
     })

package/client/composables/global.ts

@@ -0,0 +1,16 @@
+import { useSiteConfig } from 'valaxy'
+import { onBeforeMount, ref } from 'vue'
+
+export const timezone = ref<string>()
+
+/**
+ * use timezone
+ * register global timezone for formatDate
+ */
+export function useTimezone() {
+  const siteConfig = useSiteConfig()
+
+  onBeforeMount(() => {
+    timezone.value = siteConfig.value.timezone
+  })
+}

package/client/composables/index.ts

@@ -2,6 +2,7 @@
 export * from './categories'
 export * from './post'
 export * from './tags'
+export * from './collections'
 
 // common
 export * from './common'

package/client/define/collection.ts

@@ -0,0 +1,27 @@
+export interface CollectionConfig {
+  /**
+   * auto-generated by your collection path
+   * @example /collections/love-letters/1 => id: 'love-letters'
+   */
+  id?: string
+  /**
+   * @en
+   * The name of the collection.
+   *
+   * @zh
+   * 合集名称
+   */
+  name?: string
+  cover?: string
+  description?: string
+  categories?: string[]
+  tags?: string[]
+}
+
+/**
+ * @experimental
+ * @description Define the collection configuration.
+ */
+export function defineCollection(config: CollectionConfig) {
+  return config
+}

package/client/define/index.ts

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

package/client/index.ts

@@ -1,6 +1,9 @@
 export * from './addons'
 export * from './config'
 
+// extend define
+export * from './define'
+
 export * from './composables'
 export * from './stores'
 

package/client/modules/floating-vue.ts

@@ -0,0 +1,10 @@
+import FloatingVue from 'floating-vue'
+import type { ViteSSGContext } from 'vite-ssg'
+
+import 'floating-vue/dist/style.css'
+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, config.value.siteConfig.floatingVue)
+}

package/client/modules/valaxy.ts

@@ -42,17 +42,18 @@ function shouldHotReload(payload: PageDataPayload): boolean {
   return ensureSuffix('/', encodeURI(payloadPath)) === ensureSuffix('/', encodeURI(locationPath))
 }
 
+// init i18n, by valaxy config
+export const i18n = createI18n({
+  legacy: false,
+  locale: '',
+  messages: valaxyMessages,
+})
+
 export async function install({ app, router }: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
   const locale = useStorage('valaxy-locale', config?.value.siteConfig.lang || 'en')
+  i18n.global.locale.value = locale.value
 
-  // init i18n, by valaxy config
-  const i18n = createI18n({
-    legacy: false,
-    locale: locale.value,
-    messages: valaxyMessages,
-  })
   app.use(i18n)
-
   router.isReady().then(() => {
     handleHMR(router)
   })

package/client/setup/main.ts

@@ -13,6 +13,7 @@ import { install as installValaxy } from '../modules/valaxy'
 import { install as installPinia } from '../modules/pinia'
 import { install as installNprogress } from '../modules/nprogress'
 import { install as installSchema } from '../modules/schemaOrg'
+import { install as installFloatingVue } from '../modules/floating-vue'
 
 export default function setupMain(ctx: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
   // @ts-expect-error inject in runtime
@@ -23,6 +24,7 @@ export default function setupMain(ctx: ViteSSGContext, config: ComputedRef<Valax
   installSchema(ctx)
   installPinia(ctx)
   installNprogress(ctx)
+  installFloatingVue(ctx, config)
 
   if (import.meta.env.DEV && ctx.isClient) {
     import('../modules/devtools').then(({ install: installDevtools }) => {

package/client/styles/css/css-vars.css

@@ -9,7 +9,7 @@
 }
 
 html.dark {
-  --va-c-bg: #1b1b1f;
+  --va-c-bg: #1a1a1d;
   --va-c-bg-light: #202127;
   --va-c-bg-dark: #1a1a1a;
   --va-c-bg-opacity: rgba(0, 0, 0, 0.8);

package/client/styles/palette.scss

@@ -54,7 +54,8 @@ $light: map.merge(
     "c-text-lighter": #666,
     "c-text-dark": #111,
 
-    "c-primary-rgb": #{color.red($c-primary), color.green($c-primary), color.blue($c-primary)},
+    // "c-primary-rgb": #{color.red($c-primary), color.green($c-primary), color.blue($c-primary)},
+    "c-primary-rgb": #{color.channel($c-primary, 'red'), color.channel($c-primary, 'green'), color.channel($c-primary, 'blue')},
 
     "c-link": get-css-var("c-primary-dark"),
   ),

package/client/utils/time.ts

@@ -1,10 +1,10 @@
 import type { ToDateOptionsWithTZ } from 'date-fns-tz'
 import { format as formatWithTZ, toZonedTime } from 'date-fns-tz'
 import { format, toDate } from 'date-fns'
-import { useSiteConfig } from 'valaxy'
-import { useI18n } from 'vue-i18n'
 import { DateTime } from 'luxon'
 import type { Post } from '../../types'
+import { i18n } from '../modules/valaxy'
+import { timezone as globalTimezone } from '../composables/global'
 
 const referenceDate = new Date(1986, 3 /* Apr */, 4, 10, 32, 0, 900)
 
@@ -16,10 +16,9 @@ const referenceDate = new Date(1986, 3 /* Apr */, 4, 10, 32, 0, 900)
  * @param options the object with options. See [Options]{@link https://date-fns.org/docs/Options}
  */
 export function formatDate(date: string | number | Date, formatStr = 'yyyy-MM-dd', timezone?: string, options?: ToDateOptionsWithTZ): string {
-  const { locale } = useI18n()
-  const siteConfig = useSiteConfig()
+  const locale = i18n.global.locale.value
 
-  const mergedOptions: ToDateOptionsWithTZ = Object.assign({ locale: { code: locale.value } }, options)
+  const mergedOptions: ToDateOptionsWithTZ = Object.assign({ locale: { code: locale } }, options)
   const clientTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone
 
   try {
@@ -27,7 +26,7 @@ export function formatDate(date: string | number | Date, formatStr = 'yyyy-MM-dd
      * Format the timezone-less date to ISO. If none is specified, use the client's timezone.
      * If the input date is already in ISO format, the timezone won't be applied.
      */
-    date = handleTimeWithZone(date, timezone || siteConfig.value.timezone || clientTimezone).toString()
+    date = handleTimeWithZone(date, timezone || globalTimezone.value || clientTimezone).toString()
     // Convert to the client's timezone unless the user specifies otherwise
     const zonedDate = toZonedTime(date, options?.timeZone || clientTimezone, mergedOptions)
     // The format function will never change the underlying date