valaxy-theme-yun 0.11.1 → 0.11.3

package/App.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import { useHead } from '@vueuse/head'
+import { useConfig } from 'valaxy'
+
+useHead({
+  link: [
+    {
+      rel: 'stylesheet',
+      href: 'https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&display=swap',
+    },
+  ],
+})
+
+const config = useConfig()
+</script>
+
+<template>
+  <slot name="bg">
+    <YunBg v-if="config.themeConfig.bg_image.enable" />
+  </slot>
+  <YunSearch v-if="config.search.enable" />
+</template>

package/components/ValaxyMain.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
 import { useConfig, usePostTitle } from 'valaxy'
-import { computed, defineAsyncComponent } from 'vue'
+import { useAddonWaline } from 'valaxy-addon-waline'
+import { StyleValue, computed, defineAsyncComponent } from 'vue'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -15,13 +16,14 @@ const title = usePostTitle(computed(() => props.frontmatter))
 
 const aside = computed(() => props.frontmatter.aside !== false)
 
-const YunWaline = config.value.comment.waline.enable
+const YunWaline = useAddonWaline()
   ? defineAsyncComponent(() => import('./YunWaline.vue'))
   : () => null
 
-const YunTwikoo = config.value.comment.waline.enable
-  ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
-  : () => null
+// todo: refactor
+// const YunTwikoo = useAddonWaline()
+//   ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
+//   : () => null
 </script>
 
 <template>
@@ -29,7 +31,7 @@ const YunTwikoo = config.value.comment.waline.enable
     <div w="full" flex="~">
       <slot name="main">
         <div class="content" :class="!aside && 'no-aside'" flex="~ col grow" w="full" p="l-4 lt-md:0">
-          <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles">
+          <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles as StyleValue">
             <slot name="main-header">
               <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" :cover="frontmatter.cover" />
             </slot>
@@ -57,8 +59,8 @@ const YunTwikoo = config.value.comment.waline.enable
 
           <slot v-if="config.comment.enable && frontmatter.comment !== false" name="comment">
             <YunCard w="full" p="4" class="comment sm:p-6 lg:px-12 xl:px-16" :class="frontmatter.nav === false ? 'mt-4' : 0">
-              <YunWaline v-if="config.comment.waline.enable" />
-              <YunTwikoo v-if="config.comment.twikoo.enable" />
+              <YunWaline />
+              <!-- <YunTwikoo /> -->
             </YunCard>
           </slot>
 

package/components/YunBanner.vue

@@ -56,7 +56,7 @@ const lintStyle = computed(() => (
   // banner
   --banner-line-color: black;
   --banner-char-color: black;
-  --banner-char-bg-color: rgba(white, 0.5);
+  --banner-char-bg-color: rgba(255, 255, 255, 0.5);
   --banner-char-hover-color: white;
 }
 
@@ -64,7 +64,7 @@ const lintStyle = computed(() => (
   // banner
   --banner-line-color: white;
   --banner-char-color: white;
-  --banner-char-bg-color: rgba(black, 0.5);
+  --banner-char-bg-color: rgba(0, 0, 0, 0.5);
   --banner-char-hover-color: black;
 }
 </style>

package/components/YunOverview.vue

@@ -98,7 +98,7 @@ const router = useRouter()
 .site-name {
   color: var(--va-c-text);
   font-family: get-css-var('font-serif');
-  font-weight: get-css-var('font-serif-weight');
+  font-weight: 900;
 }
 
 .site-subtitle {

package/components/YunPostCard.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import type { Post } from 'valaxy'
+import { StyleValue } from 'vue'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -13,7 +14,7 @@ const { icon, styles } = usePostProperty(props.post.type)
 </script>
 
 <template>
-  <YunCard m="y-4 auto" :class="post.cover ? 'post-card-image' : 'post-card'" :style="styles">
+  <YunCard m="y-4 auto" :class="post.cover ? 'post-card-image' : 'post-card'" :style="styles as StyleValue">
     <div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
       <img
         v-if="post.cover"

package/components/YunPostCollapse.vue

@@ -19,7 +19,9 @@ watch(() => props.posts, () => {
   props.posts.forEach((post) => {
     if (post.date) {
       const year = parseInt(formatDate(post.date, 'YYYY'))
-      if (postList.value[year]) { postList.value[year].push(post) }
+      if (postList.value[year]) {
+        postList.value[year].push(post)
+      }
       else {
         years.value.push(year)
         postList.value[year] = [post]

package/components/YunTwikoo.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useConfig, useTwikoo } from 'valaxy'
+// import { useConfig, useTwikoo } from 'valaxy'
 
-const config = useConfig()
-useTwikoo(config.value.comment.twikoo)
+// const config = useConfig()
+// useTwikoo(config.value.comment.twikoo)
 </script>
 
 <template>

package/components/YunWaline.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
-const config = useConfig()
+import { useAddonWaline } from 'valaxy-addon-waline'
+const addon = useAddonWaline()
 </script>
 
 <template>
-  <WalineClient w="full" :server-u-r-l="config.comment.waline.serverURL" :cdn="config.cdn.prefix" />
+  <WalineClient w="full" :options="addon.options" />
 </template>

package/composables/post.ts

@@ -1,4 +1,4 @@
-import type { StyleValue } from 'vue'
+import type { ComputedRef, StyleValue } from 'vue'
 import { computed } from 'vue'
 import { useThemeConfig } from './config'
 
@@ -6,12 +6,16 @@ import { useThemeConfig } from './config'
  * get type card property
  * todo: test reactive
  */
-export function usePostProperty(type?: string) {
+export function usePostProperty(type?: string): {
+  color: string
+  icon: string
+  styles: StyleValue | undefined | ComputedRef<StyleValue | undefined>
+} {
   if (!type) {
     return {
       color: '',
       icon: '',
-      styles: {},
+      styles: undefined,
     }
   }
 
@@ -23,10 +27,12 @@ export function usePostProperty(type?: string) {
   const color = themeConfig.value.types[type].color
   const icon = themeConfig.value.types[type].icon
 
-  const styles = computed(() => {
-    return {
-      '--card-c-primary': type && color,
-    } as StyleValue
+  const styles = computed<StyleValue | undefined>(() => {
+    return type
+      ? ({
+          '--card-c-primary': color,
+        })
+      : undefined
   })
 
   return {

package/layouts/home.vue

@@ -1,16 +1,11 @@
 <script lang="ts" setup>
-import { useAppStore, useConfig, useLayout } from 'valaxy'
-import { useThemeConfig } from '../composables'
+import { useAppStore, useLayout } from 'valaxy'
 
 const app = useAppStore()
-const config = useConfig()
-const themeConfig = useThemeConfig()
 const isHome = useLayout('home')
 </script>
 
 <template>
-  <YunBg v-if="themeConfig.bg_image.enable" />
-
   <main class="yun-main justify-center items-center" :class="(isHome && !app.isSidebarOpen) && 'pl-0'" flex="~ col" w="full">
     <ValaxySidebar>
       <slot name="sidebar">
@@ -29,6 +24,4 @@ const isHome = useLayout('home')
 
     <YunFooter />
   </main>
-
-  <YunSearch v-if="config.search.enable" />
 </template>

package/layouts/layout.vue

@@ -1,14 +1,4 @@
-<script lang="ts" setup>
-import { useConfig } from 'valaxy'
-
-const config = useConfig()
-</script>
-
 <template>
-  <slot name="bg">
-    <YunBg v-if="config.themeConfig.bg_image.enable" />
-  </slot>
-
   <ValaxySidebar>
     <slot name="sidebar">
       <YunSidebar v-if="$slots['sidebar-child']">
@@ -48,7 +38,6 @@ const config = useConfig()
     </component>
   </router-view>
 
-  <YunSearch v-if="config.search.enable" />
   <YunBackToTop />
 </template>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.11.1",
+  "version": "0.11.3",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -17,13 +17,13 @@
   "main": "node/index.ts",
   "types": "types/index.d.ts",
   "dependencies": {
-    "@docsearch/css": "^3.2.1",
-    "@docsearch/js": "^3.2.1",
-    "@iconify-json/ant-design": "^1.1.3",
-    "@iconify-json/simple-icons": "^1.1.28",
-    "valaxy-addon-waline": "0.0.2"
+    "@docsearch/css": "^3.3.0",
+    "@docsearch/js": "^3.3.0",
+    "@iconify-json/ant-design": "^1.1.4",
+    "@iconify-json/simple-icons": "^1.1.36",
+    "valaxy-addon-waline": "0.0.4"
   },
   "devDependencies": {
-    "valaxy": "0.11.1"
+    "valaxy": "0.11.3"
   }
 }

package/styles/css-vars.scss

@@ -4,6 +4,9 @@
 :root {
   @include set-css-var-from-map($common);
   @include set-css-var-from-map($z-index, "z");
+
+  // z-index
+  --va-z-overlay: var(--yun-z-backdrop);
 }
 
 :root {

package/styles/vars.scss

@@ -36,6 +36,7 @@ $z-index: map.merge(
   (
     "cloud": 8,
     "go-down": 9,
+    "backdrop": 9,
     "sidebar": 10,
     "fireworks": 11,
     "menu-btn": 20,

package/unocss.config.ts

@@ -6,11 +6,18 @@ export default defineConfig({
     ['yun-card', 'm-auto transition yun-transition shadow hover:shadow-lg'],
   ],
   rules: [
-    ['yun-text-light', {
-      color: 'var(--va-c-text-light)',
-    }],
-    ['yun-transition', {
-      'transition-duration': 'var(--va-transition-duration)',
-    }],
+    [
+      'yun-text-light',
+      {
+        color: 'var(--va-c-text-light)',
+      },
+    ],
+    [
+      'yun-transition',
+      {
+        'transition-duration': 'var(--va-transition-duration)',
+      },
+    ],
   ],
+  // web fonts is so big, let the user decide
 })

package/valaxy.config.ts

@@ -30,7 +30,6 @@ function ThemeVitePlugin(options: ResolvedValaxyOptions<ThemeConfig>): Plugin {
 export default defineTheme<ThemeConfig>((options) => {
   return {
     themeConfig: defaultThemeConfig,
-    addons: ['valaxy-addon-waline'],
     vite: {
       plugins: [ThemeVitePlugin(options)],
     },