valaxy 0.12.9 → 0.13.0

package/client/App.vue

@@ -13,12 +13,12 @@ import { isDark, useFrontmatter } from './composables'
 // https://github.com/vueuse/head
 // 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 { useConfig } from './config'
+import { useSiteConfig } from './config'
 
 // <link rel="apple-touch-icon" href="/pwa-192x192.png">
 // <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
 // todo, allow user config
 const themeColor = computed(() => isDark.value ? '#000' : '#ffffff')
 const fm = useFrontmatter()
@@ -27,16 +27,16 @@ const { locale } = useI18n()
 
 useHead({
   title: computed(() => fm.value[`title_${locale.value}`] || fm.value.title),
-  titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${config.value.title}` : config.value.title)),
+  titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${siteConfig.value.title}` : siteConfig.value.title)),
   link: [
     {
       rel: 'icon',
-      href: config.value.favicon,
-      type: config.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
+      href: siteConfig.value.favicon,
+      type: siteConfig.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
     },
   ],
   meta: [
-    { name: 'description', content: computed(() => config.value.description) },
+    { name: 'description', content: computed(() => siteConfig.value.description) },
     {
       name: 'theme-color',
       content: themeColor,
@@ -55,13 +55,13 @@ useHead({
 // seo
 // todo: get first image url from markdown
 useSeoMeta({
-  description: computed(() => fm.value.excerpt || config.value.description),
-  ogDescription: computed(() => fm.value.excerpt || config.value.description),
-  ogLocale: computed(() => fm.value.lang || config.value.lang),
-  ogSiteName: computed(() => config.value.title),
-  ogTitle: computed(() => fm.value.title || config.value.title),
-  ogImage: computed(() => config.value.favicon),
-  ogUrl: computed(() => fm.value.url || config.value.url),
+  description: computed(() => fm.value.excerpt || siteConfig.value.description),
+  ogDescription: computed(() => fm.value.excerpt || siteConfig.value.description),
+  ogLocale: computed(() => fm.value.lang || siteConfig.value.lang),
+  ogSiteName: computed(() => siteConfig.value.title),
+  ogTitle: computed(() => fm.value.title || siteConfig.value.title),
+  ogImage: computed(() => siteConfig.value.favicon),
+  ogUrl: computed(() => fm.value.url || siteConfig.value.url),
 })
 
 const onContentUpdated = ref()

package/client/components/AppLink.vue

@@ -14,11 +14,11 @@ const isExternalLink = computed(() => {
 </script>
 
 <template>
-  <a v-if="isExternalLink || href" v-bind="$attrs" :href="href || to" target="_blank">
+  <a v-if="isExternalLink" v-bind="$attrs" :href="href || to" target="_blank">
     <slot />
     <div v-if="showExternalIcon" class="icon-link inline-block" i-ri-arrow-right-up-line />
   </a>
-  <router-link v-else v-bind="$props as any">
+  <router-link v-else v-bind="$props" :to="href || to || '#'">
     <slot />
   </router-link>
 </template>

package/client/components/ValaxyCopyright.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useConfig } from '../config'
+import { useSiteConfig } from '../config'
 
 withDefaults(defineProps<{
   url?: string
@@ -11,17 +11,17 @@ withDefaults(defineProps<{
 
 const { t, locale } = useI18n()
 
-const config = useConfig()
+const siteConfig = useSiteConfig()
 
-const ccVersion = (config.value.license.type === 'zero') ? '1.0' : '4.0'
-const ccPrefix = (config.value.license.type === 'zero') ? 'publicdomain' : 'licenses'
+const ccVersion = (siteConfig.value.license.type === 'zero') ? '1.0' : '4.0'
+const ccPrefix = (siteConfig.value.license.type === 'zero') ? 'publicdomain' : 'licenses'
 const ccURL = computed(() => {
-  const ccLang = config.value.license.language ? config.value.license.language : (locale.value === 'zh-CN') ? 'zh' : 'en'
-  return `https://creativecommons.org/${ccPrefix}/${config.value.license.type}/${ccVersion}/deed.${ccLang}`
+  const ccLang = siteConfig.value.license.language ? siteConfig.value.license.language : (locale.value === 'zh-CN') ? 'zh' : 'en'
+  return `https://creativecommons.org/${ccPrefix}/${siteConfig.value.license.type}/${ccVersion}/deed.${ccLang}`
 })
 
 const licenseHtml = computed(() => {
-  return t('post.copyright.license_content', [`<a href="${ccURL.value}" target="_blank" rel="noopener" title="CC ${`${config.value.license.type.toUpperCase()} ${ccVersion}`} ">CC ${config.value.license.type.toUpperCase()}</a>`])
+  return t('post.copyright.license_content', [`<a href="${ccURL.value}" target="_blank" rel="noopener" title="CC ${`${siteConfig.value.license.type.toUpperCase()} ${ccVersion}`} ">CC ${siteConfig.value.license.type.toUpperCase()}</a>`])
 })
 </script>
 
@@ -31,7 +31,7 @@ const licenseHtml = computed(() => {
       <strong>
         {{ t('post.copyright.author') + t('symbol.colon') }}
       </strong>
-      <span>{{ config.author.name }}</span>
+      <span>{{ siteConfig.author.name }}</span>
     </li>
     <li v-if="url" class="post-copyright-link">
       <strong>

package/client/components/ValaxyMd.vue

@@ -3,7 +3,7 @@ import type { Ref } from 'vue'
 import { inject, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAplayer, useCodePen, useCopyCode, wrapTable } from '..'
-import type { Post } from '../../types'
+import type { Post } from '../..'
 
 const props = defineProps<{
   frontmatter: Post

package/client/composables/body-scroll-lock.ts

@@ -0,0 +1,17 @@
+import { clearAllBodyScrollLocks, disableBodyScroll } from 'body-scroll-lock'
+import type { Ref } from 'vue'
+
+export function useBodyScrollLock(screenRef: Ref<HTMLElement | undefined>) {
+  function lockBodyScroll() {
+    disableBodyScroll(screenRef.value! || document.body, { reserveScrollBarGap: true })
+  }
+
+  function unlockBodyScroll() {
+    clearAllBodyScrollLocks()
+  }
+
+  return {
+    lockBodyScroll,
+    unlockBodyScroll,
+  }
+}

package/client/composables/category.ts

@@ -1,5 +1,5 @@
 import { unref } from 'vue'
-import type { Post } from '../../types'
+import type { Post } from '../..'
 import { usePostList } from './post'
 
 export interface BaseCategory {

package/client/composables/common.ts

@@ -3,7 +3,7 @@ import { computed, inject } from 'vue'
 import { isClient } from '@vueuse/core'
 
 import type { PageData, Post } from '../../types'
-import { useConfig } from '../config'
+import { useSiteConfig } from '../config'
 
 export function useFrontmatter() {
   const route = useRoute()
@@ -25,10 +25,10 @@ export function useData(): PageData {
  * get full url
  */
 export function useFullUrl() {
-  const config = useConfig()
+  const siteConfig = useSiteConfig()
   const route = useRoute()
   const url = computed(() => {
-    const siteUrl = config.value.url.endsWith('/') ? config.value.url.slice(0, -1) : config.value.url
+    const siteUrl = siteConfig.value.url.endsWith('/') ? siteConfig.value.url.slice(0, -1) : siteConfig.value.url
     const origin = siteUrl || (isClient && window.location.origin)
     return origin + route.path
   })

package/client/composables/index.ts

@@ -14,6 +14,4 @@ export * from './locale'
 
 export * from './sidebar'
 export * from './outline'
-
-// comment
-export * from './comments'
+export * from './body-scroll-lock'

package/client/composables/outline/anchor.ts

@@ -68,7 +68,7 @@ export function useActiveAnchor(
       const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
 
       if (isActive) {
-        history.replaceState(null, document.title, hash || ' ')
+        history.replaceState(history.state, document.title, hash || ' ')
         activateLink(hash)
         return
       }

package/client/composables/post.ts

@@ -2,7 +2,7 @@ import type { Ref } from 'vue'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import type { Post } from '../../types'
+import type { Post } from '../..'
 import { sortByDate } from '../utils'
 
 export const usePostTitle = (post: Ref<Post>) => {

package/client/composables/sidebar.ts

@@ -24,7 +24,7 @@ export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<H
       const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
 
       if (isActive) {
-        history.replaceState(null, document.title, hash || ' ')
+        history.replaceState(history.state, document.title, hash || ' ')
         activateLink(hash)
         return
       }

package/client/composables/tag.ts

@@ -1,5 +1,5 @@
 import { TinyColor } from '@ctrl/tinycolor'
-import type { Post } from '../../types'
+import type { Post } from '../..'
 import { usePostList } from './post'
 
 export type Tags = Map<string, {

package/client/composables/widgets/aplayer.ts

@@ -1,7 +1,7 @@
 import { useScriptTag } from '@vueuse/core'
 import { useHead } from '@vueuse/head'
 import { computed } from 'vue'
-import { useConfig } from '../..'
+import { useSiteConfig } from '../..'
 
 /**
  * use MetingJS and Aplayer
@@ -9,8 +9,8 @@ import { useConfig } from '../..'
  * @see https://github.com/metowolf/MetingJS
  */
 export function useAplayer() {
-  const config = useConfig()
-  const cdnPrefix = computed(() => config.value.cdn.prefix)
+  const siteConfig = useSiteConfig()
+  const cdnPrefix = computed(() => siteConfig.value.cdn.prefix)
 
   useHead({
     link: [

package/client/config.ts

@@ -1,5 +1,5 @@
 // @ts-expect-error virtual module @valaxyjs/config
-import valaxySiteConfig from '/@valaxyjs/site'
+import valaxyConfig from '/@valaxyjs/config'
 // @ts-expect-error virtual module @valaxyjs/context
 import valaxyContext from '/@valaxyjs/context'
 import type { ComputedRef, InjectionKey } from 'vue'
@@ -8,7 +8,7 @@ import { computed, inject, readonly, shallowRef } from 'vue'
 // fix build caused by pnpm
 // This is likely not portable. A type annotation is necessary.
 // https://github.com/microsoft/TypeScript/issues/42873
-import type { DefaultThemeConfig, SiteConfig as ValaxySiteConfig } from 'valaxy/types'
+import type { DefaultThemeConfig, ValaxyConfig } from 'valaxy/types'
 
 /**
  * parse valaxy config
@@ -24,16 +24,16 @@ interface ValaxyContext {
   userRoot: string
 }
 
-export const valaxySiteConfigSymbol: InjectionKey<ComputedRef<ValaxySiteConfig>> = Symbol('valaxy:site')
-export const valaxySiteConfigRef = shallowRef<ValaxySiteConfig>(parse<ValaxySiteConfig>(valaxySiteConfig))
+export const valaxyConfigSymbol: InjectionKey<ComputedRef<ValaxyConfig>> = Symbol('valaxy:config')
+export const valaxyConfigRef = shallowRef<ValaxyConfig>(parse<ValaxyConfig>(valaxyConfig))
 
 export const valaxyContextRef = shallowRef<ValaxyContext>(parse<ValaxyContext>(valaxyContext))
 
 // hmr
 if (import.meta.hot) {
-  // /@valaxyjs/site must be static string
-  import.meta.hot.accept('/@valaxyjs/site', (m) => {
-    valaxySiteConfigRef.value = parse<ValaxySiteConfig>(m?.default)
+  // /@valaxyjs/config must be static string
+  import.meta.hot.accept('/@valaxyjs/config', (m) => {
+    valaxyConfigRef.value = parse<ValaxyConfig>(m?.default)
   })
 
   // context
@@ -42,8 +42,8 @@ if (import.meta.hot) {
   })
 }
 
-export function initSite() {
-  return computed(() => valaxySiteConfigRef.value)
+export function initValaxyConfig() {
+  return computed(() => valaxyConfigRef.value)
 }
 
 export function initContext() {
@@ -55,8 +55,8 @@ export function initContext() {
  * @public
  * @returns
  */
-export function useSite<ThemeConfig = DefaultThemeConfig>() {
-  const config = inject<ComputedRef<ValaxySiteConfig<ThemeConfig>>>(valaxySiteConfigSymbol)
+export function useValaxyConfig<ThemeConfig = DefaultThemeConfig>() {
+  const config = inject<ComputedRef<ValaxyConfig<ThemeConfig>>>(valaxyConfigSymbol)
   if (!config)
     throw new Error('[Valaxy] site config not properly injected in app')
   return config!
@@ -68,7 +68,17 @@ export function useSite<ThemeConfig = DefaultThemeConfig>() {
  * @returns
  */
 export function useConfig<ThemeConfig = DefaultThemeConfig>() {
-  return useSite<ThemeConfig>()
+  return useValaxyConfig<ThemeConfig>()
+}
+
+/**
+ * get valaxy config
+ * @public
+ * @returns
+ */
+export function useSiteConfig<ThemeConfig = DefaultThemeConfig>() {
+  const config = useValaxyConfig<ThemeConfig>()
+  return computed(() => config!.value.siteConfig)
 }
 
 /**
@@ -79,6 +89,11 @@ export function useConfig<ThemeConfig = DefaultThemeConfig>() {
  * @returns
  */
 export function useThemeConfig<ThemeConfig = DefaultThemeConfig>() {
-  const config = useSite<ThemeConfig>()
+  const config = useValaxyConfig<ThemeConfig>()
   return computed(() => config!.value.themeConfig)
 }
+
+export function useRuntimeConfig() {
+  const config = useValaxyConfig()
+  return computed(() => config!.value.runtimeConfig)
+}

package/client/locales/en.yml

@@ -81,6 +81,7 @@ search:
   placeholder: Searching...
   empty: 'We could not find any results for the search: {query}.'
   hits_time: '{hits} results found in {time} ms'
+  hits: '{count} results found'
 
 symbol:
   comma: ', '
@@ -103,7 +104,7 @@ wordcount:
   time_total: Total reading time
 
 time:
-  day: 1 Day | %d Days
-  hour: 1 Hour | %d Hours
-  minute: 1 Minute | %d Minutes
-  second: 1 Second | %d Seconds
+  day: 1 Day | {count} Days
+  hour: 1 Hour | {count} Hours
+  minute: 1 Minute | {count} Minutes
+  second: 1 Second | {count} Seconds

package/client/locales/zh-CN.yml

@@ -80,6 +80,7 @@ search:
   placeholder: 搜索...
   empty: '找不到您查询的内容: {query}'
   hits_time: '找到 {hits} 条结果（用时 {time} 毫秒）'
+  hits: '找到 {count} 条结果'
 
 symbol:
   comma: ，
@@ -102,7 +103,7 @@ wordcount:
   time_total: 站点阅读时长
 
 time:
-  day: 1 天 | %d 天
-  hour: 1 小时 | %d 小时
-  minute: 1 分 | %d 分
-  second: 1 秒 | %d 秒
+  day: 1 天 | {count} 天
+  hour: 1 小时 | {count} 小时
+  minute: 1 分 | {count} 分
+  second: 1 秒 | {count} 秒

package/client/modules/valaxy.ts

@@ -12,7 +12,7 @@ import { useStorage } from '@vueuse/core'
 
 import type { Router } from 'vue-router'
 import type { PageDataPayload } from '../../types'
-import { initSite, valaxySiteConfigSymbol } from '../config'
+import { initValaxyConfig, valaxyConfigSymbol } from '../config'
 import { ensureSuffix } from '@antfu/utils'
 
 import type { UserModule } from 'valaxy/client/types'
@@ -45,10 +45,10 @@ function shouldHotReload(payload: PageDataPayload): boolean {
 
 export const install: UserModule = ({ app, router }) => {
   // inject valaxy config before modules
-  const config = initSite()
-  app.provide(valaxySiteConfigSymbol, config)
+  const config = initValaxyConfig()
+  app.provide(valaxyConfigSymbol, config)
 
-  const locale = useStorage('valaxy-locale', config.value.lang || 'en')
+  const locale = useStorage('valaxy-locale', config.value.siteConfig.lang || 'en')
 
   // init i18n, by valaxy config
   const i18n = createI18n({

package/client/styles/palette.scss

@@ -53,6 +53,7 @@ $light: map.merge(
     "c-bg": white,
     "c-bg-light": white,
     "c-bg-dark": #fafafa,
+    "c-bg-opacity": rgba(255, 255, 255, 0.8),
 
     "c-bg-soft": #f9f9f9,
     "c-bg-alt": #f9f9f9,
@@ -83,6 +84,7 @@ $dark: map.merge(
     "c-bg": #1a1a1a,
     "c-bg-light": #1d1e1f,
     "c-bg-dark": #1a1a1a,
+    "c-bg-opacity": rgba(0, 0, 0, 0.8),
 
     "c-bg-soft": #1d1e1f,
     "c-bg-mute": #2f2f2f,

package/client/utils/helper.ts

@@ -1,5 +1,3 @@
-export const EXTERNAL_URL_RE = /^https?:/i
-
 /**
  * 生成介于 min 与 max 之间的随机数
  * @returns

package/client/utils/time.ts

@@ -1,5 +1,5 @@
 import dayjs from 'dayjs'
-import type { Post } from '../../types'
+import type { Post } from '../..'
 
 /**
  * use dayjs format date