valaxy-theme-yun 0.3.11 → 0.6.0

package/components/YunAlgoliaSearchBox.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import '@docsearch/css'
+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'
+import { useRoute, useRouter } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+const config = useConfig()
+
+onMounted(() => {
+  initialize(config.value.search.algolia)
+  setTimeout(poll, 16)
+})
+
+/**
+ * poll until open
+ */
+function poll() {
+  // programmatically open the search box after initialize
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+
+  window.dispatchEvent(e)
+
+  setTimeout(() => {
+    if (!document.querySelector('.DocSearch-Modal'))
+      poll()
+  }, 16)
+}
+
+function initialize(userOptions: AlgoliaSearchOptions) {
+  // note: multi-lang search support is removed since the theme
+  // doesn't support multiple locales as of now.
+  const options = Object.assign({}, userOptions, {
+    container: '#docsearch',
+    navigator: {
+      navigate({ itemUrl }: { itemUrl: string }) {
+        const { pathname: hitPathname } = new URL(
+          window.location.origin + itemUrl,
+        )
+        // router doesn't handle same-page navigation so we use the native
+        // browser location API for anchor navigation
+        if (route.path === hitPathname)
+          window.location.assign(window.location.origin + itemUrl)
+
+        else
+          router.push(itemUrl)
+      },
+    },
+    transformItems(items: DocSearchHit[]) {
+      return items.map((item) => {
+        return Object.assign({}, item, {
+          url: getRelativePath(item.url),
+        })
+      })
+    },
+    hitComponent({ hit, children }: { hit: DocSearchHit; children: any }) {
+      const relativeHit = hit.url.startsWith('http')
+        ? getRelativePath(hit.url as string)
+        : hit.url
+      return {
+        __v: null,
+        type: 'a',
+        ref: undefined,
+        constructor: undefined,
+        key: undefined,
+        props: {
+          href: hit.url,
+          onClick(event: MouseEvent) {
+            if (isSpecialClick(event))
+              return
+
+            // we rely on the native link scrolling when user is already on
+            // the right anchor because Router doesn't support duplicated
+            // history entries.
+            if (route.path === relativeHit)
+              return
+
+            // if the hits goes to another page, we prevent the native link
+            // behavior to leverage the Router loading feature.
+            if (route.path !== relativeHit)
+              event.preventDefault()
+
+            router.push(relativeHit)
+          },
+          children,
+        },
+      }
+    },
+  })
+  docsearch(options)
+}
+
+function isSpecialClick(event: MouseEvent) {
+  return (
+    event.button === 1
+    || event.altKey
+    || event.ctrlKey
+    || event.metaKey
+    || event.shiftKey
+  )
+}
+
+function getRelativePath(absoluteUrl: string) {
+  const { pathname, hash } = new URL(absoluteUrl)
+  return pathname + hash
+}
+</script>
+
+<template>
+  <div id="docsearch" class="hidden" />
+</template>
+
+<style lang="scss">
+.DocSearch {
+  --docsearch-primary-color: var(--va-c-primary);
+  --docsearch-highlight-color: var(--docsearch-primary-color);
+  --docsearch-text-color: var(--va-c-text-primary);
+  --docsearch-muted-color: var(--va-c-text-light);
+  --docsearch-searchbox-focus-background: transparent;
+  --docsearch-searchbox-shadow: none;
+
+  --docsearch-key-gradient: transparent;
+  --docsearch-key-shadow: none;
+
+  --docsearch-modal-background: var(--va-c-bg-light);
+  --docsearch-footer-background: var(--va-c-bg);
+
+  input {
+    &::placeholder {
+      color: var(--va-c-text-dark);
+    }
+  }
+}
+
+.dark .DocSearch {
+  --docsearch-modal-shadow: none;
+  --docsearch-footer-shadow: none;
+  --docsearch-hit-shadow: none;
+}
+
+.DocSearch-Form {
+  border: 1px solid var(--va-c-primary);
+}
+</style>

package/components/YunAside.vue

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import type { Post } from 'valaxy'
+import { useAppStore } from 'valaxy/client/stores/app'
+defineProps<{ frontmatter: Post }>()
+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="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>
+
+    <div class="right-sidebar-container">
+      <!-- <ValaxyToc v-if="frontmatter.toc !== false" /> -->
+      <YunToc v-if="frontmatter.toc !== false" />
+
+      <div v-if="$slots.custom" class="custom-container">
+        <slot name="custom" />
+      </div>
+    </div>
+  </aside>
+</template>
+
+<style lang="scss">
+@use '~/styles/mixins' as *;
+
+@include xl {
+  .right-sidebar {
+    transform: translateX(0) !important;
+  }
+}
+
+.right-sidebar {
+  width: var(--va-sidebar-width-mobile);
+
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+
+  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 {
+    z-index: 10;
+    transform: translateX(0);
+  }
+}
+.right-sidebar-container {
+  top: 1rem;
+}
+
+.toc-btn {
+  color: var(--va-c-primary);
+  background-color: white;
+}
+</style>

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" h="64 md:sm" w="full" :src="cover">
+
     <div v-if="$slots.header" class="yun-card-header">
       <header>
         <slot name="header" />

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/YunSearch.vue

@@ -0,0 +1,130 @@
+<script lang="ts" setup>
+import { defineAsyncComponent, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const YunAlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./YunAlgoliaSearchBox.vue'))
+  : () => null
+
+const { t } = useI18n()
+
+// to avoid loading the docsearch js upfront (which is more than 1/3 of the
+// payload), we delay initializing it until the user has actually clicked or
+// hit the hotkey to invoke it.
+const loaded = ref(false)
+
+function load() {
+  if (!loaded.value)
+    loaded.value = true
+}
+
+onMounted(() => {
+  if (!__ALGOLIA__)
+    return
+
+  const handleSearchHotKey = (e: KeyboardEvent) => {
+    if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
+      e.preventDefault()
+      load()
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      remove()
+    }
+  }
+
+  const remove = () => {
+    window.removeEventListener('keydown', handleSearchHotKey)
+  }
+
+  window.addEventListener('keydown', handleSearchHotKey)
+
+  onUnmounted(remove)
+})
+
+const trigger = () => {
+  const e = new Event('keydown') as any
+
+  e.key = 'k'
+  e.metaKey = true
+
+  window.dispatchEvent(e)
+}
+</script>
+
+<template>
+  <div>
+    <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="trigger">
+      <div i-ri-search-line />
+      <!-- <div v-else text="!2xl" i-ri-close-line /> -->
+    </button>
+
+    <YunAlgoliaSearchBox v-if="loaded" />
+  </div>
+</template>
+
+<style lang="scss">
+@use 'sass:map';
+@use '~/styles/vars' as *;
+
+.search-btn {
+  position: fixed;
+  top: 0.6rem;
+  right: 0.8rem;
+
+  color: var(--va-c-primary);
+  z-index: var(--yun-z-search-btn);
+}
+
+.search-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  backdrop-filter: blur(30px);
+  -webkit-backdrop-filter: blur(30px);
+
+  text-align: center;
+  padding-top: 3.5rem;
+  margin: 0;
+  z-index: var(--yun-z-search-popup);
+  transition: 0.6s;
+}
+
+.search-header {
+  .close-icon {
+    position: fixed;
+    top: 0.6rem;
+    right: 0.8rem;
+  }
+}
+
+.search-input {
+  background: transparent;
+  color: var(--va-c-text);
+  font-size: 1.5rem;
+  border-radius: 3rem;
+  padding: 1rem 1.5rem;
+  border: 1px solid var(--va-c-gray);
+  box-sizing: border-box;
+  width: 90%;
+  max-width: 800px;
+  font-family: var(--va-font-serif);
+  font-weight: 900;
+  text-align: center;
+}
+
+.popup {
+  .search-icon, .close-icon {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+    padding: 0.5rem;
+
+    .icon {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+</style>

package/components/YunToc.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useFrontmatter } from '~/composables'
+import {
+  resolveHeaders,
+  useActiveAnchor,
+  useOutline,
+} from '~/composables/outline'
+import { useThemeConfig } from '~/config'
+
+const route = useRoute()
+const frontmatter = useFrontmatter()
+const themeConfig = useThemeConfig()
+
+const { hasOutline } = useOutline()
+
+const { locale } = useI18n()
+const container = ref()
+const marker = ref()
+
+useActiveAnchor(container, marker)
+
+const resolvedHeaders = computed(() => {
+  return resolveHeaders(route.meta.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 ref="container" class="VPDocAsideOutline" :class="{ 'has-outline': hasOutline }">
+    <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="root va-toc">
+          <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="{ text, link, hidden } in children" v-show="!hidden" :key="link" :lang="lang || locale">
+                <a class="outline-link nested" :href="link" @click="handleClick">
+                  {{ 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);
+  }
+}
+
+.VPDocAsideOutline {
+  display: none;
+}
+
+.VPDocAsideOutline.has-outline {
+  display: block;
+}
+
+.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(--vp-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;
+}
+
+.outline-link.nested {
+  padding-left: 13px;
+}
+
+.root {
+  position: relative;
+  z-index: 1;
+}
+
+.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/config/index.ts

@@ -1,9 +1,20 @@
 export const anonymousImage = 'https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg'
 
+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: {
@@ -52,6 +63,8 @@ export interface ThemeConfig {
     color: string
   }[]
 
+  sidebar: YunTheme.Sidebar
+
   /**
    * footer
    */
@@ -121,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',
@@ -147,6 +161,7 @@ export const defaultThemeConfig: ThemeConfig = {
 
   pages: [],
 
+  sidebar: null,
   footer: {
     since: 2022,
     icon: {

package/dist/index.d.ts

@@ -1,10 +1,19 @@
 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: {
         /**
@@ -47,6 +56,7 @@ interface ThemeConfig {
         icon: string;
         color: string;
     }[];
+    sidebar: YunTheme.Sidebar;
     /**
      * footer
      */
@@ -124,4 +134,4 @@ interface UserOptions {
 }
 declare function yunPlugin(userOptions?: Partial<ThemeConfig>): Plugin;
 
-export { ThemeConfig, ThemeUserConfig, UserOptions, anonymousImage, yunPlugin as default, defaultThemeConfig, generateSafelist, yunPlugin };
+export { ThemeConfig, ThemeUserConfig, UserOptions, YunTheme, anonymousImage, yunPlugin as default, defaultThemeConfig, generateSafelist, yunPlugin };

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/base.vue

@@ -20,14 +20,17 @@ const title = usePostTitle(frontmatter)
 
   <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">
+      <YunCard :cover="frontmatter.cover" m="0" class="relative" :style="styles">
         <slot name="header">
-          <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" />
+          <YunPageHeader :title="title" :icon="frontmatter.icon || icon" :color="frontmatter.color || color" :cover="frontmatter.cover" />
         </slot>
+
         <template #content>
-          <slot name="content">
-            <router-view />
-          </slot>
+          <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>
 
@@ -50,15 +53,17 @@ const title = usePostTitle(frontmatter)
     </div>
 
     <slot name="right-sidebar">
-      <ValaxyRightSidebar :frontmatter="frontmatter">
+      <!-- <ValaxyRightSidebar > -->
+      <YunAside :frontmatter="frontmatter">
         <template #custom>
           <slot name="right-custom" />
         </template>
-      </ValaxyRightSidebar>
+      <!-- </ValaxyRightSidebar> -->
+      </YunAside>
     </slot>
   </main>
 
-  <YunAlgoliaSearch v-if="config.search.algolia.enable" />
+  <YunSearch v-if="config.search.enable" />
   <YunBackToTop />
 </template>
 

package/layouts/categories.vue

@@ -15,12 +15,14 @@ const curCategory = computed(() => (route.query.category as string || ''))
 const postList = usePostList()
 const posts = computed(() => {
   const list = postList.value.filter((post) => {
-    if (post.categories) {
+    if (post.categories && curCategory.value !== 'Uncategorized') {
       if (typeof post.categories === 'string')
         return post.categories === curCategory.value
       else
         return post.categories.includes(curCategory.value)
     }
+    if (!post.categories && curCategory.value === 'Uncategorized')
+      return post.categories === undefined
     return false
   })
   return list
@@ -61,7 +63,7 @@ const title = usePostTitle(frontmatter)
     </template>
 
     <YunCard v-if="curCategory" ref="collapse" m="t-4" w="full">
-      <YunPageHeader m="t-4" :title="curCategory" icon="i-ri-folder-open-line" />
+      <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>

package/layouts/home.vue

@@ -34,5 +34,5 @@ const isHome = useLayout('home')
     </ValaxyFooter>
   </main>
 
-  <YunAlgoliaSearch v-if="config.search.algolia.enable" />
+  <YunSearch v-if="config.search.enable" />
 </template>

package/layouts/tags.vue

@@ -71,7 +71,7 @@ const title = usePostTitle(frontmatter)
     </template>
 
     <YunCard v-if="curTag" ref="collapse" m="t-4" w="full">
-      <YunPageHeader m="t-4" :title="curTag" icon="i-ri-hashtag" />
+      <YunPageHeader :title="curTag" icon="i-ri-hashtag" />
       <YunPostCollapse w="full" m="b-4" p="x-20 lt-sm:x-5" :posts="posts" />
     </YunCard>
   </YunBase>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy-theme-yun",
-  "version": "0.3.11",
+  "version": "0.6.0",
   "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.14"
+    "@iconify-json/simple-icons": "^1.1.16"
   },
   "devDependencies": {
-    "valaxy": "0.3.11"
+    "valaxy": "0.6.0"
   },
   "scripts": {
     "build": "tsup",

package/styles/layout/post.scss

@@ -5,6 +5,24 @@
   max-width: var(--yun-post-card-max-width);
 }
 
+.post-card-image {
+  @extend .post-card;
+
+  .post-card-image-info-text {
+    height: 0;
+  }
+
+  @include mobile {
+    .post-card-info {
+      flex-direction: column;
+    }
+
+    img {
+      width: 100%;
+    }
+  }
+}
+
 .post-title {
   display: flex;
   justify-content: center;
@@ -75,4 +93,4 @@
   &:before {
     content: none;
   }
-}
+}

package/components/YunAlgoliaSearch.vue

@@ -1,227 +0,0 @@
-<script lang="ts" setup>
-import { ref, watch } from 'vue'
-import { useMagicKeys } from '@vueuse/core'
-import { useI18n } from 'vue-i18n'
-import { useConfig } from 'valaxy'
-import { useAlgoliaSearch } from '~/composables/search/algolia'
-
-const { t } = useI18n()
-
-const config = useConfig()
-const showPopup = ref(false)
-
-const { Escape } = useMagicKeys()
-
-useAlgoliaSearch({
-  ...config.value.search.algolia,
-  hits: {
-    per_page: 8,
-  },
-})
-
-watch(Escape, () => {
-  showPopup.value = false
-})
-
-watch(showPopup, () => {
-  if (showPopup.value)
-    document.documentElement.classList.add('no-scroll')
-  else
-    document.documentElement.classList.remove('no-scroll')
-})
-</script>
-
-<template>
-  <button class="search-btn popup-trigger yun-icon-btn" :title="t('menu.search')" @click="showPopup = !showPopup">
-    <div v-if="!showPopup" i-ri-search-line />
-    <div v-else text="!2xl" i-ri-close-line />
-  </button>
-
-  <transition>
-    <div v-show="showPopup" class="search-popup">
-      <div class="search-header" />
-      <div class="search-input-container" />
-      <div class="algolia-results">
-        <div id="algolia-stats" />
-        <div id="algolia-hits" />
-        <div id="algolia-pagination" class="algolia-pagination" />
-      </div>
-    </div>
-  </transition>
-</template>
-
-<style lang="scss">
-@use 'sass:map';
-@use '~/styles/vars' as *;
-
-.search-btn {
-  position: fixed;
-  top: 0.6rem;
-  right: 0.8rem;
-
-  color: var(--va-c-primary);
-  z-index: var(--yun-z-search-btn);
-}
-
-.search-popup {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-
-  backdrop-filter: blur(30px);
-  -webkit-backdrop-filter: blur(30px);
-
-  text-align: center;
-  padding-top: 3.5rem;
-  margin: 0;
-  z-index: var(--yun-z-search-popup);
-  transition: 0.6s;
-}
-
-.search-header {
-  .close-icon {
-    position: fixed;
-    top: 0.6rem;
-    right: 0.8rem;
-  }
-}
-
-.search-input {
-  background: transparent;
-  color: var(--va-c-text);
-  font-size: 1.5rem;
-  border-radius: 3rem;
-  padding: 1rem 1.5rem;
-  border: 1px solid var(--va-c-gray);
-  box-sizing: border-box;
-  width: 90%;
-  max-width: 800px;
-  font-family: var(--va-font-serif);
-  font-weight: 900;
-  text-align: center;
-}
-
-.popup {
-  .search-icon, .close-icon {
-    display: inline-block;
-    width: 2rem;
-    height: 2rem;
-    padding: 0.5rem;
-
-    .icon {
-      width: 2rem;
-      height: 2rem;
-    }
-  }
-}
-
-.ais-Stats {
-  .ais-Stats-text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    position: relative;
-
-    padding-bottom: 8px;
-    margin-bottom: 8px;
-    font-size: small;
-  }
-}
-
-.algolia-powered {
-  position: absolute;
-  top: 0;
-  right: 1rem;
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-
-  img {
-    width: 1rem;
-    height: 1rem;
-    display: inline-flex;
-  }
-}
-
-.algolia-results {
-  position: relative;
-  overflow: auto;
-  padding: 10px 30px 0 30px;
-
-  hr {
-    margin-top: 10px;
-    margin-bottom: 0;
-  }
-}
-
-.algolia-hit-item {
-  display: flex;
-  justify-content: center;
-}
-
-.algolia-hit-item-link {
-  display: block;
-  width: 100%;
-  padding: 0.5rem;
-  border-bottom: 1px dashed #ccc;
-  font-family: var(--va-font-serif);
-  font-weight: 900;
-  font-size: 1.2rem;
-  max-width: 800px;
-
-  mark {
-    color: var(--va-c-danger);
-    font-family: 900;
-    background-color: transparent;
-    text-decoration: underline;
-  }
-
-  small {
-    display: flex;
-    font-size: 12px;
-    justify-content: center;
-    font-family: var(--va-font-sans);
-    font-weight: normal;
-    line-height: 1;
-    margin-top: -0.2rem;
-  }
-}
-
-.algolia-pagination {
-  margin-top: 1rem;
-  .ais-Pagination-list {
-    display: flex;
-    padding-inline-start: 0;
-  }
-
-  .pagination-item {
-    display: inline-flex;
-    list-style-type: none;
-  }
-
-  .page-number {
-    border-top: none;
-  }
-
-  .disabled-item {
-    display: none;
-  }
-
-  .active {
-    .page-number {
-      background: var(--page-btn-active-bg-color);
-      color: var(--va-c-bg);
-    }
-  }
-}
-
-.ais-Hits-list {
-  margin: 0;
-  list-style-type: none;
-  padding-inline-start: 0;
-}
-</style>