valaxy-theme-yun 0.6.0 → 0.6.3

package/components/ValaxyMain.vue

@@ -0,0 +1,77 @@
+<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>
+              </slot>
+
+              <slot name="main-content-after" />
+            </div>
+          </YunCard>
+
+          <slot name="main-nav-before" />
+
+          <slot name="main-nav">
+            <YunPostNav v-if="frontmatter.nav !== false" />
+          </slot>
+
+          <slot name="main-nav-after" />
+
+          <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

@@ -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

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
-import type { Post } from 'valaxy'
+import type { PageData, Post } from 'valaxy'
 import { useAppStore } from 'valaxy/client/stores/app'
-defineProps<{ frontmatter: Post }>()
-const { t } = useI18n()
 
+defineProps<{ frontmatter: Post; data: PageData }>()
+const { t } = useI18n()
 const app = useAppStore()
 </script>
 
@@ -19,17 +19,19 @@ const app = useAppStore()
 
   <ValaxyOverlay :show="app.isRightSidebarOpen" @click="app.toggleRightSidebar()" />
 
-  <aside class="right-sidebar fixed va-card" :class="app.isRightSidebarOpen && 'open'" m="l-4" text="center">
-    <h2 v-if="frontmatter.toc !== false" m="t-6 b-2" font="serif black">
-      {{ t('sidebar.toc') }}
-    </h2>
+  <!--  -->
+  <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="right-sidebar-container">
-      <!-- <ValaxyToc v-if="frontmatter.toc !== false" /> -->
-      <YunToc v-if="frontmatter.toc !== false" />
+      <div class="flex-grow" />
 
-      <div v-if="$slots.custom" class="custom-container">
-        <slot name="custom" />
+      <div v-if="$slots.default" class="custom-container">
+        <slot />
       </div>
     </div>
   </aside>
@@ -38,19 +40,13 @@ const app = useAppStore()
 <style lang="scss">
 @use '~/styles/mixins' as *;
 
-@include xl {
-  .right-sidebar {
-    transform: translateX(0) !important;
-  }
-}
-
-.right-sidebar {
-  width: var(--va-sidebar-width-mobile);
-
+.aside {
   position: fixed;
+  right: 0;
   top: 0;
   bottom: 0;
-  right: 0;
+
+  min-width: var(--va-sidebar-width-mobile);
 
   transform: translateX(100%);
 
@@ -59,12 +55,23 @@ const app = useAppStore()
   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;
+  }
 }
-.right-sidebar-container {
-  top: 1rem;
+
+@include xl {
+  .aside {
+    transform: translateX(0);
+  }
 }
 
 .toc-btn {

package/components/YunCard.vue

@@ -4,7 +4,7 @@ defineProps<{ cover?: string }>()
 
 <template>
   <div class="yun-card">
-    <img v-if="cover" class="object-cover" h="64 md:sm" w="full" :src="cover">
+    <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>

package/components/YunConfig.vue

@@ -1,13 +1,18 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
+import { computed } from 'vue'
 import { isDark, toggleDark } from '~/composables'
 
 const { t } = useI18n()
+
+const themeTitle = computed(() => {
+  return isDark.value ? t('button.toggle_light') : t('button.toggle_dark')
+})
 </script>
 
 <template>
   <div>
-    <button class="yun-icon-btn" :title="t('button.toggle_dark')" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDark()">
+    <button class="yun-icon-btn" :title="themeTitle" :style="{ color: isDark ? '' : '#f1cb64' }" @click="toggleDark()">
       <div i="ri-sun-line dark:ri-moon-line" />
     </button>
 

package/components/YunToc.vue

@@ -1,21 +1,19 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import type { Header } from 'valaxy'
+import { useThemeConfig } from 'valaxy'
 import { useFrontmatter } from '~/composables'
 import {
   resolveHeaders,
   useActiveAnchor,
-  useOutline,
 } from '~/composables/outline'
-import { useThemeConfig } from '~/config'
 
-const route = useRoute()
+const props = defineProps<{ headers: Header[] }>()
+
 const frontmatter = useFrontmatter()
 const themeConfig = useThemeConfig()
 
-const { hasOutline } = useOutline()
-
 const { locale } = useI18n()
 const container = ref()
 const marker = ref()
@@ -23,7 +21,7 @@ const marker = ref()
 useActiveAnchor(container, marker)
 
 const resolvedHeaders = computed(() => {
-  return resolveHeaders(route.meta.headers || [])
+  return resolveHeaders(props.headers || [])
 })
 
 function handleClick({ target: el }: Event) {
@@ -34,7 +32,7 @@ function handleClick({ target: el }: Event) {
 </script>
 
 <template>
-  <div ref="container" class="VPDocAsideOutline" :class="{ 'has-outline': hasOutline }">
+  <div v-show="headers.length" ref="container">
     <div class="content">
       <div class="outline-title">
         {{ themeConfig.outlineTitle || 'On this page' }}
@@ -47,7 +45,7 @@ function handleClick({ target: el }: Event) {
           Table of Contents for current page
         </span>
 
-        <ul class="root va-toc">
+        <ul class="va-toc relative z-1">
           <li
             v-for="{ text, link, children, hidden, lang } in resolvedHeaders"
             v-show="!hidden"
@@ -59,9 +57,9 @@ function handleClick({ target: el }: Event) {
               {{ text }}
             </a>
             <ul v-if="children && frontmatter.outline === 'deep'">
-              <li v-for="{ text, link, hidden } in children" v-show="!hidden" :key="link" :lang="lang || locale">
-                <a class="outline-link nested" :href="link" @click="handleClick">
-                  {{ text }}
+              <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>
@@ -81,14 +79,6 @@ function handleClick({ target: el }: Event) {
   }
 }
 
-.VPDocAsideOutline {
-  display: none;
-}
-
-.VPDocAsideOutline.has-outline {
-  display: block;
-}
-
 .content {
   position: relative;
   padding-left: 16px;
@@ -120,7 +110,7 @@ function handleClick({ target: el }: Event) {
 .outline-link {
   display: block;
   line-height: 28px;
-  color: var(--vp-c-text-2);
+  color: var(--va-c-text-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -133,15 +123,6 @@ function handleClick({ target: el }: Event) {
   transition: color 0.25s;
 }
 
-.outline-link.nested {
-  padding-left: 13px;
-}
-
-.root {
-  position: relative;
-  z-index: 1;
-}
-
 .visually-hidden {
   position: absolute;
   width: 1px;

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

@@ -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'
-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,61 +18,40 @@ 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 :cover="frontmatter.cover" m="0" class="relative" :style="styles">
-        <slot name="header">
-          <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" :cover="frontmatter.cover" />
-        </slot>
-
-        <template #content>
-          <div p="x-4 b-8" class="sm:px-6 lg:px-12 xl:px-16">
-            <slot name="content">
-              <router-view />
-            </slot>
-          </div>
-        </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 #main-nav-before>
+        <slot name="main-nav-before" />
+      </template>
+      <template #main-nav-after>
+        <slot name="main-nav-after" />
+      </template>
+      <template #aside-custom>
+        <slot name="aside-custom" />
+      </template>
+      <template #footer>
         <slot name="footer" />
-      </ValaxyFooter>
-    </div>
-
-    <slot name="right-sidebar">
-      <!-- <ValaxyRightSidebar > -->
-      <YunAside :frontmatter="frontmatter">
-        <template #custom>
-          <slot name="right-custom" />
-        </template>
-      <!-- </ValaxyRightSidebar> -->
-      </YunAside>
-    </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

@@ -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 :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-nav-before>
+      <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/post.vue

@@ -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-content-after>
+      <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

@@ -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 :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-nav-before>
+      <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.6.0",
+  "version": "0.6.3",
   "author": {
     "email": "me@yunyoujun.cn",
     "name": "YunYouJun",
@@ -18,7 +18,7 @@
     "@iconify-json/simple-icons": "^1.1.16"
   },
   "devDependencies": {
-    "valaxy": "0.6.0"
+    "valaxy": "0.6.3"
   },
   "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'
-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>