valaxy-theme-yun 0.11.0 → 0.11.1

package/components/ValaxyMain.vue

@@ -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/{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 }}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.11.0",
+  "version": "0.11.1",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -24,6 +24,6 @@
     "valaxy-addon-waline": "0.0.2"
   },
   "devDependencies": {
-    "valaxy": "0.11.0"
+    "valaxy": "0.11.1"
   }
 }

package/styles/common/markdown.scss

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

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 *;