valaxy 0.9.3 → 0.10.2

package/client/App.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useHead } from '@vueuse/head'
+// @ts-expect-error virtual module
+import ValaxyUserApp from '/@valaxyjs/UserAppVue'
 import { isDark } from './composables'
 
 // https://github.com/vueuse/head
@@ -10,28 +12,34 @@ import { useConfig } from './config'
 
 // <link rel="apple-touch-icon" href="/pwa-192x192.png">
 // <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
-// <meta name="msapplication-TileColor" content = "#00aba9" >
 
 const config = useConfig()
+const themeColor = computed(() => isDark.value ? '#00aba9' : '#ffffff')
 useHead({
   title: config.value.title,
   link: [
     {
       rel: 'icon',
       href: config.value.favicon,
-      type: config.value.favicon.endsWith('svg') ? 'image/svg+xml' : 'image/png',
+      type: config.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
     },
   ],
   meta: [
     { name: 'description', content: config.value.description },
     {
       name: 'theme-color',
-      content: computed(() => isDark.value ? '#00aba9' : '#ffffff'),
+      content: themeColor,
+    },
+    {
+      name: 'msapplication-TileColor',
+      content: themeColor,
     },
   ],
 })
 </script>
 
 <template>
+  <ValaxyUserApp />
+  <ValaxyAddons />
   <router-view />
 </template>

package/client/components/ValaxyAddons.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+// @ts-expect-error virtual
+import addonComponents from '/@valaxyjs/addons'
+</script>
+
+<template>
+  <component :is="component" v-bind="props" v-for="({ component, props }, index) in addonComponents" :key="index" />
+</template>
+
+<style lang="scss" scoped></style>

package/client/components/ValaxyMd.vue

@@ -60,13 +60,3 @@ useCopyCode()
     </article>
   </Transition>
 </template>
-
-<style lang="scss">
-.markdown-body {
-  .end {
-    .line {
-      height: 1px;
-    }
-  }
-}
-</style>

package/client/components/ValaxyOverlay.vue

@@ -25,7 +25,7 @@ withDefaults(defineProps<{
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: calc(var(--yun-z-sidebar) - 1);
+  z-index: calc(var(--va-z-overlay) - 1);
   transition: opacity 0.4s;
 
   display: none;

package/client/composables/category.ts

@@ -99,6 +99,11 @@ export function useCategory(category?: string, posts: Post[] = []): ParentCatego
     }
   })
 
+  categoryMap.children.forEach((child) => {
+    if ('posts' in child)
+      child.posts.sort((a, b) => (b.top || 0) - (a.top || 0))
+  })
+
   // clear uncategorized
   if (uncategorized!.total === 0)
     categoryMap.children?.delete('Uncategorized')

package/client/composables/common.ts

@@ -7,7 +7,7 @@ import { useConfig } from '../config'
 
 export function useFrontmatter() {
   const route = useRoute()
-  const frontmatter = computed<Post>(() => route.meta.frontmatter)
+  const frontmatter = computed<Post>(() => route.meta.frontmatter || {})
 
   return frontmatter
 }

package/client/composables/outline.ts

@@ -88,7 +88,7 @@ export function useActiveAnchor(
 
     const scrollY = window.scrollY
     const innerHeight = window.innerHeight
-    const offsetHeight = (document.querySelector('.yun-main') as HTMLElement)!.offsetHeight
+    const offsetHeight = container.value.offsetHeight
     const isBottom = (scrollY + innerHeight) === offsetHeight
 
     // console.log(scrollY, innerHeight, offsetHeight)

package/client/composables/post.ts

@@ -14,7 +14,25 @@ export const usePostTitle = (post: Ref<Post>) => {
 }
 
 /**
- * get post list
+ * get all page in 'pages' folder
+ * @returns
+ */
+export function usePageList() {
+  const router = useRouter()
+  return computed<Post[]>(() => {
+    const excludePages = ['/:..all', '/:all(.*)*', '/']
+    const routes = router.getRoutes()
+      .filter(i => i.meta.frontmatter)
+      .filter(i => i.path && !excludePages.includes(i.path))
+      .map((i) => {
+        return Object.assign({ path: i.path, excerpt: i.meta.excerpt }, i.meta.frontmatter)
+      })
+    return routes
+  })
+}
+
+/**
+ * get post list in 'pages/posts' folder
  * todo: use vue provide/inject to global
  * @param params
  * @returns
@@ -22,15 +40,12 @@ export const usePostTitle = (post: Ref<Post>) => {
 export function usePostList(params: {
   type?: string
 } = {}) {
-  const router = useRouter()
   return computed(() => {
-    const routes = router.getRoutes()
-      .filter(i => i.path.startsWith('/posts') && i.meta.frontmatter && i.meta.frontmatter.date)
-      .filter(i => !i.path.endsWith('.html'))
-      .filter(i => !params.type || i.meta.frontmatter.type === params.type)
-      .map((i) => {
-        return Object.assign({ path: i.path, excerpt: i.meta.excerpt }, i.meta.frontmatter)
-      })
+    const routes = usePageList().value
+      .filter(i => i.path?.startsWith('/posts'))
+      .filter(i => !i.path?.endsWith('.html'))
+      .filter(i => i.date)
+      .filter(i => !params.type || i.type === params.type)
 
     /**
      * 置顶
@@ -42,21 +57,6 @@ export function usePostList(params: {
   })
 }
 
-/**
- * get all page
- * @returns
- */
-export function usePageList() {
-  const router = useRouter()
-  return computed<Post[]>(() => {
-    const routes = router.getRoutes()
-      .map((i) => {
-        return Object.assign({ path: i.path, excerpt: i.meta.excerpt }, i.meta.frontmatter)
-      })
-    return routes
-  })
-}
-
 /**
  * get prev and next post
  * @param path

package/client/config.ts

@@ -1,5 +1,5 @@
 // @ts-expect-error virtual module @valaxyjs/config
-import valaxyConfig from '/@valaxyjs/config'
+import valaxySiteConfig from '/@valaxyjs/site'
 // @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 { ValaxyConfig } from 'valaxy/types'
+import type { DefaultThemeConfig, SiteConfig as ValaxySiteConfig } from 'valaxy/types'
 
 /**
  * parse valaxy config
@@ -24,16 +24,16 @@ interface ValaxyContext {
   userRoot: string
 }
 
-export const valaxyConfigSymbol: InjectionKey<ComputedRef<ValaxyConfig>> = Symbol('valaxy:config')
-export const valaxyConfigRef = shallowRef<ValaxyConfig>(parse<ValaxyConfig>(valaxyConfig))
+export const valaxySiteConfigSymbol: InjectionKey<ComputedRef<ValaxySiteConfig>> = Symbol('valaxy:site')
+export const valaxySiteConfigRef = shallowRef<ValaxySiteConfig>(parse<ValaxySiteConfig>(valaxySiteConfig))
 
 export const valaxyContextRef = shallowRef<ValaxyContext>(parse<ValaxyContext>(valaxyContext))
 
 // hmr
 if (import.meta.hot) {
-  // /@valaxyjs/config must be static string
-  import.meta.hot.accept('/@valaxyjs/config', (m) => {
-    valaxyConfigRef.value = parse<ValaxyConfig>(m.default)
+  // /@valaxyjs/site must be static string
+  import.meta.hot.accept('/@valaxyjs/site', (m) => {
+    valaxySiteConfigRef.value = parse<ValaxySiteConfig>(m.default)
   })
 
   // context
@@ -42,33 +42,43 @@ if (import.meta.hot) {
   })
 }
 
-export function initConfig() {
-  return computed(() => valaxyConfigRef.value)
+export function initSite() {
+  return computed(() => valaxySiteConfigRef.value)
 }
 
 export function initContext() {
   return computed(() => valaxyContextRef.value)
 }
 
-/*
+/**
  * get valaxy config
  * @public
  * @returns
  */
-export function useConfig<ThemeConfig = any>() {
-  const config = inject<ComputedRef<ValaxyConfig<ThemeConfig>>>(valaxyConfigSymbol)
+export function useSite<ThemeConfig = DefaultThemeConfig>() {
+  const config = inject<ComputedRef<ValaxySiteConfig<ThemeConfig>>>(valaxySiteConfigSymbol)
   if (!config)
-    throw new Error('[Valaxy] config not properly injected in app')
+    throw new Error('[Valaxy] site config not properly injected in app')
   return config!
 }
 
+/**
+ * alias for useSite
+ * @public
+ * @returns
+ */
+export function useConfig<ThemeConfig = DefaultThemeConfig>() {
+  return useSite<ThemeConfig>()
+}
+
 /**
  * You can use like this: import { useThemeConfig } from 'valaxy-theme-xxx'
  * if you want to: import { useThemeConfig } from 'valaxy'
  * you need pass themeConfig by yourself
+ * @internal
  * @returns
  */
-export function useThemeConfig<T = Record<string, any>>() {
-  const config = useConfig<T>()
+export function useThemeConfig<ThemeConfig = DefaultThemeConfig>() {
+  const config = useSite<ThemeConfig>()
   return computed(() => config!.value.themeConfig)
 }

package/client/layouts/404.vue

@@ -13,7 +13,7 @@ const { t } = useI18n()
     </slot>
   </ValaxySidebar>
 
-  <main class="yun-main" text="center">
+  <main class="va-main" text="center">
     <YunCard m="4" p="10" text="yellow-600">
       <div text-4xl>
         <div i-ri-alarm-warning-line inline-block />

package/client/layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <Layout />
+</template>

package/client/layouts/layout.vue

@@ -0,0 +1,34 @@
+<template>
+  <router-view v-slot="{ Component }">
+    <component :is="Component">
+      <template #main-header>
+        <slot name="main-header" />
+      </template>
+
+      <template #main-header-after>
+        <slot name="main-header-after" />
+      </template>
+      <template #main>
+        <slot name="main" />
+      </template>
+      <template #main-content>
+        <slot name="main-content" />
+      </template>
+      <template #main-content-after>
+        <slot name="main-content-after" />
+      </template>
+      <template #main-nav-before>
+        <slot name="main-nav-before" />
+      </template>
+      <template #main-nav-after>
+        <slot name="main-nav-after" />
+      </template>
+      <template #aside-custom>
+        <slot name="aside-custom" />
+      </template>
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </component>
+  </router-view>
+</template>

package/client/layouts/post.vue

@@ -0,0 +1,3 @@
+<template>
+  <Layout />
+</template>

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 { initConfig, valaxyConfigSymbol } from '../config'
+import { initSite, valaxySiteConfigSymbol } from '../config'
 import { ensureSuffix } from '@antfu/utils'
 
 import type { UserModule } from 'valaxy/client/types'
@@ -45,8 +45,8 @@ function shouldHotReload(payload: PageDataPayload): boolean {
 
 export const install: UserModule = ({ app, router }) => {
   // inject valaxy config before modules
-  const config = initConfig()
-  app.provide(valaxyConfigSymbol, config)
+  const config = initSite()
+  app.provide(valaxySiteConfigSymbol, config)
 
   const locale = useStorage('valaxy-locale', config.value.lang || 'en')
 

package/client/setups.ts

@@ -1,7 +1,7 @@
 import type { ViteSSGContext } from 'vite-ssg'
 import type { Awaitable } from '@antfu/utils'
 
-type AppContext = ViteSSGContext
+export type AppContext = ViteSSGContext
 
 export type AppSetup = (ctx: AppContext) => Awaitable<void>
 

package/client/styles/common/markdown.scss

@@ -36,3 +36,12 @@ a.header-anchor:hover,
 a.header-anchor:focus {
   text-decoration: none;
 }
+
+// end line
+.markdown-body {
+  .end {
+    .line {
+      height: 1px;
+    }
+  }
+}

package/client/styles/common/sidebar.scss

@@ -11,7 +11,7 @@
   left: 0;
 
   width: calc(100vw - 64px);
-  max-width: var(--va-sidebar-width-mobile);
+  max-width: var(--va-sidebar-width);
 
   background-image: var(--yun-sidebar-bg-image);
   background-color: var(--yun-sidebar-bg-color);

package/client/styles/global/reset.scss

@@ -1,8 +1,6 @@
 @use "../mixins" as *;
 
 html {
-  scroll-behavior: smooth;
-
   -webkit-tap-highlight-color: transparent;
 }
 

package/client/styles/mixins/size.scss

@@ -1,49 +1,48 @@
 @use "sass:map";
 
 $breakpoints: (
-  'sm': 640px,
-  'md': 768px,
-  'lg': 1024px,
-  'xl': 1280px,
-  '2xl': 1536px,
+  "sm": 640px,
+  "md": 768px,
+  "lg": 1024px,
+  "xl": 1280px,
+  "2xl": 1536px,
 );
 
 // for mobile
 @mixin mobile {
-  @media screen and (max-width: map.get($breakpoints, 'sm')) {
+  @media screen and (max-width: map.get($breakpoints, "sm")) {
     @content;
   }
 }
 
 // for tablet
 @mixin tablet {
-  @media screen and (min-width: map.get($breakpoints, 'sm')) and (max-width: map.get($breakpoints, 'lg')) {
+  @media screen and (min-width: map.get($breakpoints, "sm")) and (max-width: map.get($breakpoints, "lg")) {
     @content;
   }
 }
 
 // for desktop
 @mixin desktop {
-  @media screen and (min-width: map.get($breakpoints, 'lg')) {
+  @media screen and (min-width: map.get($breakpoints, "lg")) {
     @content;
   }
 }
 
-
 @mixin sm-md {
-  @media screen and (min-width: map.get($breakpoints, 'sm')) and (max-width: map.get($breakpoints, 'md')) {
+  @media screen and (min-width: map.get($breakpoints, "sm")) and (max-width: map.get($breakpoints, "md")) {
     @content;
   }
 }
 
 @mixin md-lg {
-  @media screen and (min-width: map.get($breakpoints, 'md')) and (max-width: map.get($breakpoints, 'lg')) {
+  @media screen and (min-width: map.get($breakpoints, "md")) and (max-width: map.get($breakpoints, "lg")) {
     @content;
   }
 }
 
-@mixin xl {
-  @media screen and (min-width: map.get($breakpoints, 'xl')) {
+@mixin media($size) {
+  @media screen and (min-width: map.get($breakpoints, $size)) {
     @content;
   }
 }

package/client/styles/palette.scss

@@ -54,7 +54,7 @@ $light: map.merge(
     "c-bg-light": white,
     "c-bg-dark": #fafafa,
 
-    "c-bg-soft": white,
+    "c-bg-soft": #f9f9f9,
     "c-bg-alt": #f9f9f9,
     "c-bg-mute": #f1f1f1,
 

package/client/styles/vars.scss

@@ -3,7 +3,7 @@
 $common: () !default;
 $common: map.merge(
   (
-    "sidebar-width-mobile": 320px,
+    "sidebar-width": 320px,
   ),
   $common
 );

package/client/{index.html → template.html}

@@ -4,12 +4,6 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script>
-    (function () {
-      const locale = localStorage.getItem('valaxy-locale') || 'en'
-      document.documentElement.setAttribute('lang', locale)
-    })()
-  </script>
   <!-- head -->
 </head>