valaxy-theme-yun 0.5.0 → 0.6.2

package/components/ValaxyMain.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import type { PageData, Post } from 'valaxy'
+import { useConfig, usePostProperty, usePostTitle } from 'valaxy'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  frontmatter: Post
+  data?: PageData
+}>()
+const config = useConfig()
+
+const { styles, icon, color } = usePostProperty(props.frontmatter.type)
+const title = usePostTitle(computed(() => props.frontmatter))
+</script>
+
+<template>
+  <main class="yun-main lt-md:ml-0" flex="~">
+    <div w="full" flex="~">
+      <slot name="main">
+        <div class="content" flex="~ col grow" w="full" p="l-4 lt-md:0">
+          <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles">
+            <slot name="main-header">
+              <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" :cover="frontmatter.cover" />
+            </slot>
+            <slot name="main-header-after" />
+
+            <div p="x-4 b-8" class="sm:px-6 lg:px-12 xl:px-16" w="full">
+              <slot name="main-content" />
+              <ValaxyMd :frontmatter="frontmatter">
+                <slot name="main-content-md" />
+                <slot />
+              </ValaxyMd>
+            </div>
+          </YunCard>
+
+          <slot name="main-content-after" />
+
+          <slot name="main-nav">
+            <YunPostNav v-if="frontmatter.nav !== false" />
+          </slot>
+
+          <slot v-if="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" />
+            </YunCard>
+          </slot>
+
+          <ValaxyFooter>
+            <slot name="footer" />
+          </ValaxyFooter>
+        </div>
+      </slot>
+
+      <slot name="aside">
+        <YunAside :frontmatter="frontmatter" :data="data">
+          <slot name="aside-custom" />
+        </YunAside>
+      </slot>
+    </div>
+  </main>
+</template>
+
+<style lang="scss">
+@use '~/styles/mixins' as *;
+@include xl {
+  .content{
+    // 8px scrollbar width
+    max-width: calc(100vw - 2 * var(--va-sidebar-width-mobile) - 1rem - 8px);
+  }
+}
+</style>

package/components/YunAlgoliaSearchBox.vue

@@ -4,7 +4,7 @@ import docsearch from '@docsearch/js'
 import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
 import { onMounted } from 'vue'
 import type { AlgoliaSearchOptions } from 'valaxy'
-import { useConfig } from 'valaxy/client'
+import { useConfig } from 'valaxy'
 import { useRoute, useRouter } from 'vue-router'
 
 const router = useRouter()
@@ -87,7 +87,7 @@ function initialize(userOptions: AlgoliaSearchOptions) {
             if (route.path !== relativeHit)
               event.preventDefault()
 
-            router.go(relativeHit)
+            router.push(relativeHit)
           },
           children,
         },
@@ -142,6 +142,9 @@ function getRelativePath(absoluteUrl: string) {
 .dark .DocSearch {
   --docsearch-modal-shadow: none;
   --docsearch-footer-shadow: none;
+  --docsearch-logo-color: var(--va-c-text-2);
+  --docsearch-hit-background: var(--va-c-bg-mute);
+  --docsearch-hit-color: var(--va-c-text-2);
   --docsearch-hit-shadow: none;
 }
 

package/components/YunAside.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import type { PageData, Post } from 'valaxy'
+import { useAppStore } from 'valaxy/client/stores/app'
+
+defineProps<{ frontmatter: Post; data: PageData }>()
+const { t } = useI18n()
+const app = useAppStore()
+</script>
+
+<template>
+  <button
+    class="xl:hidden toc-btn shadow fixed yun-icon-btn z-350"
+    opacity="75" right="2" bottom="19"
+    @click="app.toggleRightSidebar()"
+  >
+    <div i-ri-file-list-line />
+  </button>
+
+  <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
+
+  <!--  -->
+  <aside class="va-card aside" :class="app.isRightSidebarOpen && 'open'" m="l-4" text="center">
+    <div class="aside-container" flex="~ col">
+      <h2 v-if="frontmatter.toc !== false" m="t-6 b-2" font="serif black">
+        {{ t('sidebar.toc') }}
+      </h2>
+
+      <YunToc v-if="frontmatter.toc !== false" :headers="data.headers || []" />
+
+      <div class="flex-grow" />
+
+      <div v-if="$slots.default" class="custom-container">
+        <slot />
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss">
+@use '~/styles/mixins' as *;
+
+.aside {
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+
+  min-width: var(--va-sidebar-width-mobile);
+
+  transform: translateX(100%);
+
+  transition: box-shadow var(--va-transition-duration),
+  background-color var(--va-transition-duration), opacity 0.25s,
+  transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
+
+  &.open {
+    right: 0;
+    display: block;
+    z-index: 10;
+    transform: translateX(0);
+  }
+
+  &-container {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+  }
+}
+
+@include xl {
+  .aside {
+    transform: translateX(0);
+  }
+}
+
+.toc-btn {
+  color: var(--va-c-primary);
+  background-color: white;
+}
+</style>

package/components/YunBanner.vue

@@ -6,7 +6,7 @@
  */
 
 import { CSSProperties, computed } from 'vue'
-import { useThemeConfig } from 'valaxy/client'
+import { useThemeConfig } from 'valaxy'
 import { random } from '~/utils'
 const themeConfig = useThemeConfig()
 

package/components/YunCard.vue

@@ -1,5 +1,11 @@
+<script lang="ts" setup>
+defineProps<{ cover?: string }>()
+</script>
+
 <template>
   <div class="yun-card">
+    <img v-if="cover" class="object-cover select-none" h="64 md:sm" w="full" :src="cover">
+
     <div v-if="$slots.header" class="yun-card-header">
       <header>
         <slot name="header" />

package/components/YunCategories.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Categories } from 'valaxy/client'
+import type { Categories } from 'valaxy'
 import { ref } from 'vue'
 
 const props = withDefaults(defineProps<{

package/components/YunCategory.vue

@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import type { Post } from 'valaxy'
-import type { Category } from 'valaxy/client'
-import { isParentCategory } from 'valaxy/client'
+import type { Category, Post } from 'valaxy'
+import { isParentCategory } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{

package/components/YunOverview.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy/client'
+import { useConfig } from 'valaxy'
 import { useRouter } from 'vue-router'
 
 const config = useConfig()

package/components/YunPageHeader.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <header class="post-header">
+  <header class="post-header" m="t-4">
     <h1 class="post-title" p="2" text="2xl center" font="serif black" :style="`color:${color}`">
       <div v-if="icon" class="icon" m="r-1" inline-flex :class="icon" />
       <span>{{ title }}</span>

package/components/YunPostCollapse.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import type { Post } from 'valaxy'
-import { formatDate, sortByDate } from 'valaxy/client'
+import { formatDate, sortByDate } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const props = defineProps<{

package/components/YunPostMeta.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
 import { useI18n } from 'vue-i18n'
-import { formatDate } from 'valaxy/client'
+import { formatDate } from 'valaxy'
 
 defineProps<{
   frontmatter: Post

package/components/YunSay.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue'
-import { useThemeConfig } from 'valaxy/client'
+import { useThemeConfig } from 'valaxy'
 
 const themeConfig = useThemeConfig()
 

package/components/YunSidebarLinks.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useThemeConfig } from 'valaxy/client'
+import { useThemeConfig } from 'valaxy'
 const themeConfig = useThemeConfig()
 </script>
 

package/components/YunSidebarNav.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCategory, usePostList, useTag, useThemeConfig } from 'valaxy/client'
+import { useCategory, usePostList, useTag, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()

package/components/YunSocialLinks.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy/client'
+import { useConfig } from 'valaxy'
 
 const config = useConfig()
 </script>

package/components/YunSponsor.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy/client'
+import { useConfig } from 'valaxy'
 import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()

package/components/YunToc.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { Header } from 'valaxy'
+import { useThemeConfig } from 'valaxy'
+import { useFrontmatter } from '~/composables'
+import {
+  resolveHeaders,
+  useActiveAnchor,
+} from '~/composables/outline'
+
+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()
+}
+</script>
+
+<template>
+  <div v-show="headers.length" ref="container">
+    <div class="content">
+      <div class="outline-title">
+        {{ themeConfig.outlineTitle || 'On this page' }}
+      </div>
+
+      <div ref="marker" class="outline-marker" />
+
+      <nav aria-labelledby="doc-outline-aria-label">
+        <span id="doc-outline-aria-label" class="visually-hidden">
+          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>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.va-toc {
+  text-align: left;
+
+  .va-toc-item {
+    color: var(--va-c-text-light);
+  }
+}
+
+.content {
+  position: relative;
+  padding-left: 16px;
+  font-size: 14px;
+  text-align: left;
+}
+
+.outline-marker {
+  position: absolute;
+  top: 32px;
+  left: -2px;
+  z-index: 0;
+  opacity: 0;
+  width: 4px;
+  height: 18px;
+  background-color: var(--va-c-brand);
+  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), background-color 0.5s, opacity 0.25s;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
+.outline-title {
+  letter-spacing: 0.4px;
+  line-height: 28px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.outline-link {
+  display: block;
+  line-height: 28px;
+  color: var(--va-c-text-2);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: color 0.5s;
+}
+
+.outline-link:hover,
+.outline-link.active {
+  color: var(--va-c-brand);
+  transition: color 0.25s;
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  white-space: nowrap;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  overflow: hidden;
+}
+</style>

package/components/YunTwikoo.vue

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

package/components/YunWaline.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig, useWaline } from 'valaxy/client'
+import { useConfig, useWaline } from 'valaxy'
 
 const config = useConfig()
 useWaline(config.value.comment.waline)

package/config/index.ts

@@ -2,12 +2,19 @@ export const anonymousImage = 'https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/ava
 
 export namespace YunTheme {
   export type Config = ThemeConfig
+  export type Sidebar = any
 }
 
 /**
  * Theme Config
  */
 export interface ThemeConfig {
+  /**
+   * toc title
+   * @default 'On this page'
+   */
+  outlineTitle: string
+
   // for unocss
   safelist: string[]
   colors: {
@@ -56,6 +63,8 @@ export interface ThemeConfig {
     color: string
   }[]
 
+  sidebar: YunTheme.Sidebar
+
   /**
    * footer
    */
@@ -125,6 +134,7 @@ export type ThemeUserConfig = Partial<ThemeConfig>
  * Default Config
  */
 export const defaultThemeConfig: ThemeConfig = {
+  outlineTitle: 'On this page',
   safelist: ['i-ri-clipboard-line'],
   colors: {
     primary: '#0078E7',
@@ -151,6 +161,7 @@ export const defaultThemeConfig: ThemeConfig = {
 
   pages: [],
 
+  sidebar: null,
   footer: {
     since: 2022,
     icon: {

package/dist/index.d.ts

@@ -3,11 +3,17 @@ import { Plugin } from 'vite';
 declare const anonymousImage = "https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg";
 declare namespace YunTheme {
     type Config = ThemeConfig;
+    type Sidebar = any;
 }
 /**
  * Theme Config
  */
 interface ThemeConfig {
+    /**
+     * toc title
+     * @default 'On this page'
+     */
+    outlineTitle: string;
     safelist: string[];
     colors: {
         /**
@@ -50,6 +56,7 @@ interface ThemeConfig {
         icon: string;
         color: string;
     }[];
+    sidebar: YunTheme.Sidebar;
     /**
      * footer
      */

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var f="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",n= exports.defaultThemeConfig ={safelist:["i-ri-clipboard-line"],colors:{primary:"#0078E7"},banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg"},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--va-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--va-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--va-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--va-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}},menu:{custom:{title:"button.about",icon:"i-ri-clipboard-line",url:"/about"}}};n.safelist=n.safelist.concat(m(n));function m(i){var t,r,a,l,s,c,u,p;let e=[],o=i.types;if(o)for(let g in o)e.push(o[g].icon);return(r=(t=i.footer)==null?void 0:t.icon)!=null&&r.name&&e.push((l=(a=i.footer)==null?void 0:a.icon)==null?void 0:l.name),(c=(s=i.menu)==null?void 0:s.custom)!=null&&c.icon&&e.push((p=(u=i.menu)==null?void 0:u.custom)==null?void 0:p.icon),e}function b(i=n){return{name:"valaxy-theme-yun",enforce:"pre",config(){var e;return{css:{preprocessorOptions:{scss:{additionalData:`$c-primary: ${((e=i.colors)==null?void 0:e.primary)||"#0078E7"} !default;`}}}}}}}var y=b;exports.anonymousImage = f; exports.default = y; exports.defaultThemeConfig = n; exports.generateSafelist = m; exports.yunPlugin = b;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var f="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",n= exports.defaultThemeConfig ={outlineTitle:"On this page",safelist:["i-ri-clipboard-line"],colors:{primary:"#0078E7"},banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg"},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],sidebar:null,footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--va-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--va-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--va-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--va-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}},menu:{custom:{title:"button.about",icon:"i-ri-clipboard-line",url:"/about"}}};n.safelist=n.safelist.concat(m(n));function m(e){var t,r,a,l,s,c,u,p;let i=[],o=e.types;if(o)for(let g in o)i.push(o[g].icon);return(r=(t=e.footer)==null?void 0:t.icon)!=null&&r.name&&i.push((l=(a=e.footer)==null?void 0:a.icon)==null?void 0:l.name),(c=(s=e.menu)==null?void 0:s.custom)!=null&&c.icon&&i.push((p=(u=e.menu)==null?void 0:u.custom)==null?void 0:p.icon),i}function b(e=n){return{name:"valaxy-theme-yun",enforce:"pre",config(){var i;return{css:{preprocessorOptions:{scss:{additionalData:`$c-primary: ${((i=e.colors)==null?void 0:i.primary)||"#0078E7"} !default;`}}}}}}}var y=b;exports.anonymousImage = f; exports.default = y; exports.defaultThemeConfig = n; exports.generateSafelist = m; exports.yunPlugin = b;

package/dist/index.mjs

@@ -1 +1 @@
-var f="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",n={safelist:["i-ri-clipboard-line"],colors:{primary:"#0078E7"},banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg"},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--va-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--va-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--va-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--va-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}},menu:{custom:{title:"button.about",icon:"i-ri-clipboard-line",url:"/about"}}};n.safelist=n.safelist.concat(m(n));function m(i){var t,r,a,l,s,c,u,p;let e=[],o=i.types;if(o)for(let g in o)e.push(o[g].icon);return(r=(t=i.footer)==null?void 0:t.icon)!=null&&r.name&&e.push((l=(a=i.footer)==null?void 0:a.icon)==null?void 0:l.name),(c=(s=i.menu)==null?void 0:s.custom)!=null&&c.icon&&e.push((p=(u=i.menu)==null?void 0:u.custom)==null?void 0:p.icon),e}function b(i=n){return{name:"valaxy-theme-yun",enforce:"pre",config(){var e;return{css:{preprocessorOptions:{scss:{additionalData:`$c-primary: ${((e=i.colors)==null?void 0:e.primary)||"#0078E7"} !default;`}}}}}}}var y=b;export{f as anonymousImage,y as default,n as defaultThemeConfig,m as generateSafelist,b as yunPlugin};
+var f="https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg",n={outlineTitle:"On this page",safelist:["i-ri-clipboard-line"],colors:{primary:"#0078E7"},banner:{enable:!0,title:"\u4E91\u6E38\u541B\u7684\u5C0F\u7AD9"},bg_image:{enable:!0,url:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/stars-timing-0-blur-30px.jpg",dark:"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/bg/galaxy.jpg"},say:{enable:!0,api:"https://el-bot-api.vercel.app/api/words/young",hitokoto:{enable:!1,api:"https://v1.hitokoto.cn"}},pages:[],sidebar:null,footer:{since:2022,icon:{name:"i-ri-cloud-line",animated:!0,color:"var(--va-c-primary)",url:"https://sponsors.yunyoujun.cn",title:"Sponsor YunYouJun"},powered:!0,beian:{enable:!1,icp:""}},types:{link:{color:"var(--va-c-primary)",icon:"i-ri-external-link-line"},bilibili:{color:"#FF8EB3",icon:"i-ri-bilibili-line"},douban:{color:"#007722",icon:"i-ri-douban-line"},github:{color:"var(--va-c-text)",icon:"i-ri-github-line"},"netease-cloud-music":{color:"#C10D0C",icon:"i-ri-netease-cloud-music-line"},notion:{color:"var(--va-c-text)",icon:"i-simple-icons-notion"},twitter:{color:"#1da1f2",icon:"i-ri-twitter-line"},wechat:{color:"#1AAD19",icon:"i-ri-wechat-2-line"},weibo:{color:"#E6162D",icon:"i-ri-weibo-line"},yuque:{color:"#25b864",icon:"i-ant-design-yuque-outlined"},zhihu:{color:"#0084FF",icon:"i-ri-zhihu-line"}},menu:{custom:{title:"button.about",icon:"i-ri-clipboard-line",url:"/about"}}};n.safelist=n.safelist.concat(m(n));function m(e){var t,r,a,l,s,c,u,p;let i=[],o=e.types;if(o)for(let g in o)i.push(o[g].icon);return(r=(t=e.footer)==null?void 0:t.icon)!=null&&r.name&&i.push((l=(a=e.footer)==null?void 0:a.icon)==null?void 0:l.name),(c=(s=e.menu)==null?void 0:s.custom)!=null&&c.icon&&i.push((p=(u=e.menu)==null?void 0:u.custom)==null?void 0:p.icon),i}function b(e=n){return{name:"valaxy-theme-yun",enforce:"pre",config(){var i;return{css:{preprocessorOptions:{scss:{additionalData:`$c-primary: ${((i=e.colors)==null?void 0:i.primary)||"#0078E7"} !default;`}}}}}}}var y=b;export{f as anonymousImage,y as default,n as defaultThemeConfig,m as generateSafelist,b as yunPlugin};

package/layouts/404.vue

@@ -7,7 +7,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <YunBase>
+  <Base>
     <template #content>
       <div text="center">
         <div text-4xl>
@@ -21,5 +21,5 @@ const { t } = useI18n()
         </div>
       </div>
     </template>
-  </YunBase>
+  </Base>
 </template>

package/layouts/archives.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useFrontmatter, usePostList, usePostTitle } from 'valaxy/client'
+import { useFrontmatter, usePostList, usePostTitle } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 const { t } = useI18n()
@@ -11,13 +11,13 @@ const title = usePostTitle(frontmatter)
 </script>
 
 <template>
-  <YunBase>
-    <template #header>
+  <Base>
+    <template #main-header>
       <YunPageHeader :title="title || t('menu.archives')" :icon="frontmatter.icon || 'i-ri-archive-line'" :color="frontmatter.color" />
     </template>
-    <template #content>
+    <template #main-content>
       <router-view />
       <YunPostCollapse :posts="postList" />
     </template>
-  </YunBase>
+  </Base>
 </template>

package/layouts/base.vue

@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { useConfig, useFrontmatter, usePostProperty, usePostTitle } from 'valaxy/client'
-const frontmatter = useFrontmatter()
+import { useConfig } from 'valaxy'
 
 const config = useConfig()
-
-const { styles, icon, color } = usePostProperty(frontmatter.value.type)
-const title = usePostTitle(frontmatter)
 </script>
 
 <template>
+  <slot name="bg">
+    <ValaxyBg v-if="config.themeConfig.bg_image.enable" />
+  </slot>
+
   <ValaxySidebar>
     <slot name="sidebar">
       <YunSidebar v-if="$slots['sidebar-child']">
@@ -18,56 +18,34 @@ const title = usePostTitle(frontmatter)
     </slot>
   </ValaxySidebar>
 
-  <main class="yun-main flex lt-md:ml-0">
-    <div flex="~ 1 col" w="full" p="l-4 lt-md:0" class="content">
-      <YunCard m="0" p="4" class="relative sm:p-6 lg:px-12 xl:px-16" :style="styles">
-        <slot name="header">
-          <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" :cover="frontmatter.cover" />
-        </slot>
-        <template #content>
-          <slot name="content">
-            <router-view />
-          </slot>
-        </template>
-      </YunCard>
-
-      <slot :frontmatter="frontmatter" />
-
-      <slot name="nav">
-        <YunPostNav v-if="frontmatter.nav !== false" />
-      </slot>
-
-      <slot v-if="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" />
-        </YunCard>
-      </slot>
-
-      <ValaxyFooter>
+  <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 #aside-custom>
+        <slot name="aside-custom" />
+      </template>
+      <template #footer>
         <slot name="footer" />
-      </ValaxyFooter>
-    </div>
-
-    <slot name="right-sidebar">
-      <ValaxyRightSidebar :frontmatter="frontmatter">
-        <template #custom>
-          <slot name="right-custom" />
-        </template>
-      </ValaxyRightSidebar>
-    </slot>
-  </main>
+      </template>
+    </component>
+  </router-view>
 
   <YunSearch v-if="config.search.enable" />
   <YunBackToTop />
 </template>
 
-<style lang="scss">
-@use '~/styles/mixins' as *;
-@include xl {
-  .content{
-    // 8px scrollbar width
-    max-width: calc(100vw - 2 * var(--va-sidebar-width-mobile) - 1rem - 8px);
-  }
-}
-</style>

package/layouts/categories.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { useCategory, useFrontmatter, useInvisibleElement, usePostList, usePostTitle } from 'valaxy/client'
+import { useCategory, useFrontmatter, useInvisibleElement, usePostList, usePostTitle } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 
@@ -46,15 +46,15 @@ const title = usePostTitle(frontmatter)
 </script>
 
 <template>
-  <YunBase>
-    <template #header>
+  <Base>
+    <template #main-header>
       <YunPageHeader
         :title="title || t('menu.categories')"
         :icon="frontmatter.icon || 'i-ri-folder-2-line'"
         :color="frontmatter.color"
       />
     </template>
-    <template #content>
+    <template #main-content>
       <div text="center" class="yun-text-light" p="2">
         {{ t('counter.categories', categories.children!.size) }}
       </div>
@@ -62,9 +62,11 @@ const title = usePostTitle(frontmatter)
       <router-view />
     </template>
 
-    <YunCard v-if="curCategory" ref="collapse" m="t-4" w="full">
-      <YunPageHeader m="t-4" :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory" icon="i-ri-folder-open-line" />
-      <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
-    </YunCard>
-  </YunBase>
+    <template #main-content-after>
+      <YunCard v-if="curCategory" ref="collapse" m="t-4" w="full">
+        <YunPageHeader :title="curCategory === 'Uncategorized' ? t('category.uncategorized') : curCategory" icon="i-ri-folder-open-line" />
+        <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
+      </YunCard>
+    </template>
+  </Base>
 </template>

package/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
-  <YunBase>
+  <Base>
     <template #content>
       <router-view />
     </template>
-  </YunBase>
+  </Base>
 </template>

package/layouts/home.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useConfig } from 'valaxy/client'
+import { useConfig } from 'valaxy'
 import { useLayout } from '~/composables'
 
 import { useAppStore } from '~/stores/app'

package/layouts/post.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useConfig, useFrontmatter, useFullUrl } from 'valaxy/client'
+import { useConfig, useFrontmatter, useFullUrl } from 'valaxy'
 
 const config = useConfig()
 const frontmatter = useFrontmatter()
@@ -15,20 +15,18 @@ const showSponsor = computed(() => {
 </script>
 
 <template>
-  <YunBase>
-    <template #content>
-      <main text="left" m="auto" p="t-0 b-2">
-        <slot name="header">
-          <YunPostMeta :frontmatter="frontmatter" />
-        </slot>
-        <router-view v-slot="{ Component }">
-          <Transition appear>
-            <component :is="Component" />
-          </Transition>
-        </router-view>
-        <YunSponsor v-if="showSponsor" />
-        <ValaxyCopyright v-if="frontmatter.copyright || config.license.enabled" :url="url" m="y-4" />
-      </main>
+  <Base>
+    <template #main-header-after>
+      <YunPostMeta :frontmatter="frontmatter" />
     </template>
-  </YunBase>
+
+    <template #main>
+      <YunSponsor v-if="showSponsor" />
+      <ValaxyCopyright v-if="frontmatter.copyright || config.license.enabled" :url="url" m="y-4" />
+    </template>
+
+    <template #aside-custom>
+      <slot name="aside-custom" />
+    </template>
+  </Base>
 </template>

package/layouts/tags.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useFrontmatter, useInvisibleElement, usePostList, usePostTitle, useTags, useThemeConfig } from 'valaxy/client'
+import { useFrontmatter, useInvisibleElement, usePostList, usePostTitle, useTags, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 import { computed, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -48,15 +48,15 @@ const title = usePostTitle(frontmatter)
 </script>
 
 <template>
-  <YunBase>
-    <template #header>
+  <Base>
+    <template #main-header>
       <YunPageHeader
         :title="title || t('menu.tags')"
         :icon="frontmatter.icon || 'i-ri-tag-line'"
         :color="frontmatter.color"
       />
     </template>
-    <template #content>
+    <template #main-content>
       <div class="yun-text-light" text="center" p="2">
         {{ t('counter.tags', Array.from(tags).length) }}
       </div>
@@ -70,11 +70,13 @@ const title = usePostTitle(frontmatter)
       <router-view />
     </template>
 
-    <YunCard v-if="curTag" ref="collapse" m="t-4" w="full">
-      <YunPageHeader m="t-4" :title="curTag" icon="i-ri-hashtag" />
-      <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
-    </YunCard>
-  </YunBase>
+    <template #main-content-after>
+      <YunCard v-if="curTag" ref="collapse" m="t-4" w="full">
+        <YunPageHeader :title="curTag" icon="i-ri-hashtag" />
+        <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
+      </YunCard>
+    </template>
+  </Base>
 </template>
 
 <style lang="scss">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.5.0",
+  "version": "0.6.2",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -15,10 +15,10 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@iconify-json/ant-design": "^1.1.2",
-    "@iconify-json/simple-icons": "^1.1.15"
+    "@iconify-json/simple-icons": "^1.1.16"
   },
   "devDependencies": {
-    "valaxy": "0.5.0"
+    "valaxy": "0.6.2"
   },
   "scripts": {
     "build": "tsup",

package/styles/layout/index.scss

@@ -4,4 +4,5 @@
 .yun-main {
   padding-left: var(--va-sidebar-width-mobile);
   transition: padding-left var(--va-transition-duration);
+  box-sizing: border-box;
 }

package/styles/markdown.scss

@@ -11,6 +11,9 @@ html.dark {
 }
 
 .markdown-body {
+  word-wrap: break-word;
+  word-break: break-all;
+
   h1,
   h2,
   h3,

package/components/YunBase.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-// export layouts/base.vue as components
-import { useThemeConfig } from 'valaxy/client'
-import Base from '../layouts/base.vue'
-
-const themeConfig = useThemeConfig()
-</script>
-
-<template>
-  <ValaxyBg v-if="themeConfig.bg_image.enable" />
-
-  <Base>
-    <template #sidebar>
-      <slot name="sidebar" />
-    </template>
-    <template #content>
-      <slot name="content" />
-    </template>
-    <template #nav>
-      <slot name="nav" />
-    </template>
-    <template #comment>
-      <slot name="comment" />
-    </template>
-    <template #footer>
-      <slot name="footer" />
-    </template>
-    <template #right-sidebar>
-      <slot name="right-sidebar" />
-    </template>
-  </Base>
-</template>