valaxy-theme-yun 0.10.4 → 0.11.1

package/components/ValaxyMain.vue

@@ -62,9 +62,9 @@ const YunTwikoo = config.value.comment.waline.enable
             </YunCard>
           </slot>
 
-          <YunFooter>
-            <slot name="footer" />
-          </YunFooter>
+          <slot name="main-footer-before" />
+          <YunFooter />
+          <slot name="main-footer-after" />
         </div>
       </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/YunFooter.vue

@@ -2,15 +2,12 @@
 import { capitalize, computed } from 'vue'
 import { useConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-
 import pkg from 'valaxy/package.json'
 import { useThemeConfig } from '../composables'
 
 const { t } = useI18n()
-
 const config = useConfig()
 const themeConfig = useThemeConfig()
-
 const year = new Date().getFullYear()
 
 const isThisYear = computed(() => {
@@ -18,11 +15,15 @@ const isThisYear = computed(() => {
 })
 
 const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.repository}" target="_blank" rel="noopener">Valaxy</a> v${pkg.version}`]))
-const footerIcon = computed(() => themeConfig.value.footer.icon!)
+const footerIcon = computed(() => themeConfig.value.footer.icon || {
+  url: pkg.repository,
+  name: 'i-ri-cloud-line',
+  title: pkg.name,
+})
 </script>
 
 <template>
-  <footer class="va-footer p-4" text="center sm" style="color:var(--va-c-text-light)">
+  <footer class="va-footer p-4 text-$va-c-text-light" text="center sm">
     <div v-if="themeConfig.footer.beian?.enable && themeConfig.footer.beian.icp" class="beian" m="y-2">
       <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">
         {{ themeConfig.footer.beian.icp }}
@@ -38,15 +39,14 @@ const footerIcon = computed(() => themeConfig.value.footer.icon!)
         {{ year }}
       </span>
 
-      <a m="x-2" class="inline-flex animate-pulse" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
+      <a v-if="themeConfig.footer.icon" m="x-2" class="inline-flex animate-pulse" :href="footerIcon.url" target="_blank" :title="footerIcon.title">
         <div :class="footerIcon.name" />
       </a>
-
       <span>{{ config.author.name }}</span>
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">
-      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.homepage" :title="`valaxy-theme-${config.theme}`" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
+      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themeConfig.pkg.homepage" :title="themeConfig.pkg.name" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themeConfig.pkg.version }}</span>
     </div>
 
     <slot />

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/components/YunWaline.vue

@@ -1,25 +1,8 @@
 <script lang="ts" setup>
 import { useConfig } from 'valaxy'
-import { useWaline } from 'valaxy-addon-waline'
-
 const config = useConfig()
-useWaline(config.value.comment.waline, config.value.cdn.prefix)
 </script>
 
 <template>
-  <div id="waline" w="full" />
+  <WalineClient w="full" :server-u-r-l="config.comment.waline.serverURL" :cdn="config.cdn.prefix" />
 </template>
-
-<style lang="scss">
-#waline {
-  --waline-theme-color: var(--va-c-primary);
-  --waline-active-color: var(--va-c-primary-light);
-
-  .v[data-class=v] {
-    .veditor {
-      width: calc(100% - 2em);
-      padding: 0.5rem;
-    }
-  }
-}
-</style>

package/layouts/home.vue

@@ -27,9 +27,7 @@ const isHome = useLayout('home')
       <router-view />
     </slot>
 
-    <YunFooter>
-      <slot name="footer" />
-    </YunFooter>
+    <YunFooter />
   </main>
 
   <YunSearch v-if="config.search.enable" />

package/layouts/layout.vue

@@ -45,9 +45,6 @@ const config = useConfig()
       <template #aside-custom>
         <slot name="aside-custom" />
       </template>
-      <template #footer>
-        <slot name="footer" />
-      </template>
     </component>
   </router-view>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.10.4",
+  "version": "0.11.1",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -20,10 +20,10 @@
     "@docsearch/css": "^3.2.1",
     "@docsearch/js": "^3.2.1",
     "@iconify-json/ant-design": "^1.1.3",
-    "@iconify-json/simple-icons": "^1.1.26",
-    "valaxy-addon-waline": "0.0.1"
+    "@iconify-json/simple-icons": "^1.1.28",
+    "valaxy-addon-waline": "0.0.2"
   },
   "devDependencies": {
-    "valaxy": "0.10.4"
+    "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 *;