valaxy-theme-yun 0.11.0 → 0.11.2

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,7 @@
 <script lang="ts" setup>
 import type { PageData, Post } from 'valaxy'
 import { useConfig, usePostTitle } from 'valaxy'
-import { computed, defineAsyncComponent } from 'vue'
+import { StyleValue, computed, defineAsyncComponent } from 'vue'
 import { usePostProperty } from '../composables'
 
 const props = defineProps<{
@@ -15,11 +15,11 @@ const title = usePostTitle(computed(() => props.frontmatter))
 
 const aside = computed(() => props.frontmatter.aside !== false)
 
-const YunWaline = config.value.comment.waline.enable
+const YunWaline = config.value.runtime.addons['valaxy-addon-waline'].enable
   ? defineAsyncComponent(() => import('./YunWaline.vue'))
   : () => null
 
-const YunTwikoo = config.value.comment.waline.enable
+const YunTwikoo = config.value.runtime.addons['valaxy-addon-twikoo']?.enable
   ? defineAsyncComponent(() => import('./YunTwikoo.vue'))
   : () => null
 </script>
@@ -29,7 +29,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>
@@ -80,6 +80,14 @@ const YunTwikoo = config.value.comment.waline.enable
 <style lang="scss">
 @use 'valaxy/client/styles/mixins' as *;
 
+@include media('md') {
+  .yun-main {
+    &.has-sidebar {
+      padding-left: var(--va-sidebar-width);
+    }
+  }
+}
+
 @include media('xl') {
   .content{
     // 8px scrollbar width

package/components/YunAside.vue

@@ -1,10 +1,9 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import { useData, useFrontmatter } from 'valaxy'
+import { useFrontmatter } from 'valaxy'
 import { useAppStore } from 'valaxy/client/stores/app'
 
 const frontmatter = useFrontmatter()
-const data = useData()
 const { t } = useI18n()
 const app = useAppStore()
 </script>
@@ -27,7 +26,7 @@ const app = useAppStore()
         {{ t('sidebar.toc') }}
       </h2>
 
-      <YunToc v-if="frontmatter.toc !== false" :headers="data.headers || []" />
+      <YunOutline v-if="frontmatter.toc !== false" />
 
       <div class="flex-grow" />
 

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/{YunToc.vue → YunOutline.vue}

@@ -1,34 +1,19 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import type { Header } from 'valaxy'
+import { ref } from 'vue'
 import {
-  resolveHeaders,
   useActiveAnchor,
-  useFrontmatter,
+  useOutline,
 } from 'valaxy'
 import { useThemeConfig } from '../composables'
 
-const props = defineProps<{ headers: Header[] }>()
-
-const frontmatter = useFrontmatter()
 const themeConfig = useThemeConfig()
 
-const { locale } = useI18n()
 const container = ref()
 const marker = ref()
 
 useActiveAnchor(container, marker)
 
-const resolvedHeaders = computed(() => {
-  return resolveHeaders(props.headers || [])
-})
-
-function handleClick({ target: el }: Event) {
-  const id = `#${(el as HTMLAnchorElement).href!.split('#')[1]}`
-  const heading = document.querySelector(decodeURIComponent(id)) as HTMLAnchorElement
-  heading?.focus()
-}
+const { headers, handleClick } = useOutline()
 </script>
 
 <template>
@@ -45,26 +30,12 @@ function handleClick({ target: el }: Event) {
           Table of Contents for current page
         </span>
 
-        <ul class="va-toc relative z-1">
-          <li
-            v-for="{ text, link, children, hidden, lang } in resolvedHeaders"
-            v-show="!hidden"
-            :key="link"
-            class="va-toc-item"
-            :lang="lang || locale"
-          >
-            <a class="outline-link" :href="link" @click="handleClick">
-              {{ text }}
-            </a>
-            <ul v-if="children && frontmatter.outline === 'deep'">
-              <li v-for="item in children" v-show="!item.hidden" :key="item.link" :lang="lang || locale">
-                <a class="outline-link" p="l-3" :href="link" @click="handleClick">
-                  {{ item.text }}
-                </a>
-              </li>
-            </ul>
-          </li>
-        </ul>
+        <YunOutlineItem
+          class="va-toc relative z-1"
+          :headers="headers"
+          :on-click="handleClick"
+          root
+        />
       </nav>
     </div>
   </div>
@@ -73,10 +44,6 @@ function handleClick({ target: el }: Event) {
 <style lang="scss" scoped>
 .va-toc {
   text-align: left;
-
-  .va-toc-item {
-    color: var(--va-c-text-light);
-  }
 }
 
 .content {

package/components/YunOutlineItem.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { MenuItem } from 'valaxy'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  headers: MenuItem[]
+  onClick: (e: MouseEvent) => void
+  root?: boolean
+}>()
+
+const { locale } = useI18n()
+</script>
+
+<template>
+  <ul :class="root ? 'root' : 'nested'">
+    <li v-for="{ children, link, title, lang } in headers" :key="link" class="va-toc-item" :lang="lang || locale">
+      <a class="outline-link" :href="link" @click="onClick">{{ title }}</a>
+      <template v-if="children?.length">
+        <YunOutlineItem :headers="children" :on-click="onClick" />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  .va-toc-item {
+    .outline-link {
+      color: var(--va-c-text-light);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: color 0.5s;
+
+      &:hover,
+      &.active {
+        color: var(--va-c-brand);
+        transition: color 0.25s;
+      }
+
+    }
+
+    .nested {
+      padding-left: 0.8rem;
+    }
+  }
+}
+</style>

package/components/YunOverview.vue

@@ -9,14 +9,14 @@ const router = useRouter()
 <template>
   <div class="sidebar-panel">
     <div class="site-info" m="t-6">
-      <a class="site-author-avatar" href="/about">
+      <router-link class="site-author-avatar" to="/about">
         <img class="rounded-full" :src="config.author.avatar" alt="avatar">
         <span class="site-author-status">{{ config.author.status.emoji }}</span>
-      </a>
+      </router-link>
       <div class="site-author-name">
-        <a href="/about">
+        <router-link to="/about">
           {{ config.author.name }}
-        </a>
+        </router-link>
       </div>
       <router-link v-if="router.hasRoute('about-site')" to="/about/site" class="site-name">
         {{ config.title }}
@@ -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

@@ -62,9 +62,9 @@ const sortedYears = computed(() => {
             <time v-if="post.date" class="post-time" font="mono" opacity="80">{{ formatDate(post.date, 'MM-DD') }}</time>
           </div>
           <h2 class="post-title" font="serif black">
-            <a :href="post.path" class="post-title-link">
+            <router-link :to="post.path || ''" class="post-title-link">
               {{ post.title }}
-            </a>
+            </router-link>
           </h2>
         </header>
       </article>

package/components/YunSidebarLinks.vue

@@ -5,9 +5,9 @@ const themeConfig = useThemeConfig()
 
 <template>
   <div class="links">
-    <a v-for="item, i in themeConfig.pages" :key="i" class="link-item yun-icon-btn" :href="item.url" :title="item.name" :target="item.url.startsWith('http') ? '_blank' : ''" :style="`color:${item.color}`">
+    <AppLink v-for="item, i in themeConfig.pages" :key="i" class="link-item yun-icon-btn" :to="item.url" :title="item.name" :style="`color:${item.color}`">
       <div :class="item.icon" class="icon" />
-    </a>
+    </AppLink>
   </div>
 </template>
 
@@ -21,7 +21,7 @@ const themeConfig = useThemeConfig()
   .link-item {
     display: inline-flex;
 
-    .icon {
+  .icon {
       width: 2rem;
       height: 2rem;
     }

package/components/YunWaline.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy'
-const config = useConfig()
+import { useWalineOptions } from 'valaxy-addon-waline'
+const walineOptions = useWalineOptions()
 </script>
 
 <template>
-  <WalineClient w="full" :server-u-r-l="config.comment.waline.serverURL" :cdn="config.cdn.prefix" />
+  <WalineClient w="full" :options="walineOptions" />
 </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.0",
+  "version": "0.11.2",
   "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",
+    "@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.2"
   },
   "devDependencies": {
-    "valaxy": "0.11.0"
+    "valaxy": "0.11.2"
   }
 }

package/styles/common/markdown.scss

@@ -25,6 +25,7 @@ html.dark {
   }
 
   ul {
+    list-style: initial;
     li > p {
       margin-bottom: 0;
     }

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/index.scss

@@ -1,10 +1,11 @@
 @use "./layout" as *;
-
 @use "./common/button.scss" as *;
-@use "./common/markdown.scss" as *;
 
 @forward "star-markdown-css/src/scss/theme/yun.scss" with (
   $colors: (
     "primary": $c-primary,
   )
 );
+
+// override the default style of star-markdown-css
+@use "./common/markdown.scss" as *;

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
 })