valaxy 0.2.4 → 0.3.0

package/dist/node/index.d.ts

@@ -0,0 +1,46 @@
+import * as vite from 'vite';
+import { InlineConfig } from 'vite';
+import { V as ValaxyConfig } from '../config-408070e9.js';
+import 'type-fest';
+import 'unocss/vite';
+import 'markdown-it';
+import 'markdown-it-anchor';
+import 'katex';
+import 'vite-plugin-md';
+
+interface ResolvedValaxyOptions {
+    mode: 'dev' | 'build';
+    /**
+     * Client root path
+     * @default 'valaxy/src/client'
+     */
+    clientRoot: string;
+    /**
+     * User root path
+     * @default process.cwd()
+     */
+    userRoot: string;
+    /**
+     * Theme root path
+     */
+    themeRoot: string;
+    /**
+     * Theme name
+     */
+    theme: string;
+    /**
+     * Valaxy Config
+     */
+    config: ValaxyConfig;
+    /**
+     * config file path
+     */
+    configFile: string;
+}
+interface ValaxyServerOptions {
+    onConfigReload?: (newConfig: ValaxyConfig, config: ValaxyConfig) => void;
+}
+
+declare function createServer(options: ResolvedValaxyOptions, viteConfig?: InlineConfig, serverOptions?: ValaxyServerOptions): Promise<vite.ViteDevServer>;
+
+export { createServer };

package/dist/node/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkXMNH5QY2js = require('../chunk-XMNH5QY2.js');var _chunkRUZ4KMBMjs = require('../chunk-RUZ4KMBM.js');_chunkRUZ4KMBMjs.f.call(void 0, );exports.createServer = _chunkXMNH5QY2js.i;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkPQWGL22Ejs = require('../chunk-PQWGL22E.js');var _chunkWNLPZSARjs = require('../chunk-WNLPZSAR.js');_chunkWNLPZSARjs.f.call(void 0, );exports.createServer = _chunkPQWGL22Ejs.i;

package/dist/node/index.mjs

@@ -1 +1 @@
-import{i as r}from"../chunk-HSIBOGUA.mjs";import{f as o}from"../chunk-JARRR63D.mjs";o();export{r as createServer};
+import{i as r}from"../chunk-F4NM2FOU.mjs";import{f as o}from"../chunk-R2IXLA5A.mjs";o();export{r as createServer};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valaxy",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "description": "📄 Vite & Vue powered static blog generator.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -37,26 +37,26 @@
     "https-localhost": "^4.7.1",
     "markdown-it-attrs": "^4.1.3",
     "type-fest": "^2.12.2",
-    "vue-tsc": "^0.34.2"
+    "vue-tsc": "^0.34.11"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^3.4.0",
-    "@iconify-json/carbon": "^1.1.3",
+    "@ctrl/tinycolor": "^3.4.1",
+    "@iconify-json/carbon": "^1.1.4",
     "@iconify-json/ri": "^1.1.1",
     "@intlify/vite-plugin-vue-i18n": "^3.4.0",
     "@vitejs/plugin-vue": "^2.3.1",
-    "@vueuse/core": "^8.2.5",
-    "@vueuse/head": "^0.7.5",
+    "@vueuse/core": "^8.3.1",
+    "@vueuse/head": "^0.7.6",
     "consola": "^2.15.3",
     "critters": "^0.0.16",
-    "dayjs": "^1.11.0",
+    "dayjs": "^1.11.1",
     "escape-html": "^1.0.3",
     "fast-deep-equal": "^3.1.3",
     "feed": "^4.2.2",
     "katex": "^0.15.3",
     "markdown-it-anchor": "^8.6.2",
     "markdown-it-container": "^3.0.0",
-    "markdown-it-emoji": "^2.0.0",
+    "markdown-it-emoji": "^2.0.2",
     "markdown-it-link-attributes": "^4.0.0",
     "markdown-it-table-of-contents": "^0.6.0",
     "markdown-it-task-lists": "^2.1.1",
@@ -64,23 +64,23 @@
     "open": "^8.4.0",
     "pinia": "^2.0.13",
     "prism-theme-vars": "^0.2.2",
-    "prismjs": "^1.27.0",
-    "sass": "^1.50.0",
+    "prismjs": "^1.28.0",
+    "sass": "^1.51.0",
     "star-markdown-css": "^0.3.3",
-    "unconfig": "^0.3.2",
-    "unocss": "^0.31.0",
-    "unplugin-vue-components": "^0.19.1",
-    "vite": "^2.9.1",
-    "vite-plugin-inspect": "^0.4.3",
-    "vite-plugin-md": "^0.12.4",
-    "vite-plugin-pages": "^0.22.0",
-    "vite-plugin-pwa": "^0.11.13",
+    "unconfig": "^0.3.3",
+    "unocss": "^0.32.9",
+    "unplugin-vue-components": "^0.19.3",
+    "vite": "^2.9.7",
+    "vite-plugin-inspect": "^0.5.0",
+    "vite-plugin-md": "^0.13.0",
+    "vite-plugin-pages": "^0.23.0",
+    "vite-plugin-pwa": "^0.12.0",
     "vite-plugin-vue-layouts": "^0.6.0",
     "vite-ssg": "^0.19.2",
-    "vite-ssg-sitemap": "0.2.2",
-    "vue": "^3.2.31",
+    "vite-ssg-sitemap": "0.2.6",
+    "vue": "^3.2.33",
     "vue-demi": "^0.12.5",
-    "vue-i18n": "^9.1.9",
+    "vue-i18n": "^9.1.10",
     "vue-router": "^4.0.14",
     "yargs": "^17.4.1"
   },
@@ -91,6 +91,5 @@
     "preview": "vite preview",
     "preview-https": "serve dist",
     "typecheck": "vue-tsc --noEmit"
-  },
-  "readme": "# Valaxy\n\n🌌 Next Generation Static Blog Framework, powered by Vite & Vue.\n\nRead [YunYouJun/valaxy](https://github.com/YunYouJun/valaxy) for more info.\n"
+  }
 }

package/src/client/components/AppLink.vue

@@ -14,7 +14,7 @@ const isExternalLink = computed(() => {
   <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
     <slot />
   </a>
-  <router-link v-else v-bind="$props">
+  <router-link v-else v-bind="$props as any">
     <slot />
   </router-link>
 </template>

package/src/client/components/PostCard.vue

@@ -46,7 +46,7 @@ const { icon, styles } = usePostProperty(props.post.type)
           v-if="post.categories"
           :to="{
             path: '/categories/',
-            query: {category: Array.isArray(post.categories) ? post.categories[post.categories.length - 1] : post.categories}
+            query: { category: Array.isArray(post.categories) ? post.categories[post.categories.length - 1] : post.categories },
           }"
           class="post-categories inline-flex justify-center items-center" m="l-2"
         >
@@ -57,7 +57,7 @@ const { icon, styles } = usePostProperty(props.post.type)
 
       <div class="post-tags inline-flex" m="r-2">
         <template v-if="post.tags">
-          <router-link v-for="tag,i in post.tags" :key="i" :to="{path: '/tags/', query: {tag: tag}}" m="x-1" class="post-tag inline-flex justify-center items-center">
+          <router-link v-for="tag, i in post.tags" :key="i" :to="{ path: '/tags/', query: { tag } }" m="x-1" class="post-tag inline-flex justify-center items-center">
             <div m="r-1" i-ri-price-tag-3-line />
             {{ tag }}
           </router-link>

package/src/client/components/ValaxyCopyright.vue

@@ -3,14 +3,14 @@ import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useConfig } from '../config'
 
-const { t, locale } = useI18n()
-
 withDefaults(defineProps<{
   url?: string
 }>(), {
   url: '',
 })
 
+const { t, locale } = useI18n()
+
 const config = useConfig()
 
 const ccVersion = (config.value.license.type === 'zero') ? '1.0' : '4.0'

package/src/client/components/ValaxyFooter.vue

@@ -3,7 +3,6 @@ import { capitalize, computed } from 'vue'
 import { useConfig, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
-import themePkg from 'valaxy-theme-yun/package.json'
 import pkg from '~/../../package.json'
 
 const { t } = useI18n()
@@ -45,7 +44,7 @@ const poweredHtml = computed(() => t('footer.powered', [`<a href="${pkg.reposito
     </div>
 
     <div v-if="themeConfig.footer.powered" class="powered" m="2">
-      <span v-html="poweredHtml" /> | <span>{{ t('footer.theme') }} - <a :href="themePkg.homepage" :title="'valaxy-theme-' + config.theme" target="_blank">{{ capitalize(config.theme) }}</a> v{{ themePkg.version }}</span>
+      <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>
     </div>
 
     <slot />

package/src/client/components/ValaxyMd.vue

@@ -34,7 +34,7 @@ if (props.frontmatter.codepen)
 </script>
 
 <template>
-  <article v-if="$slots.default" class="markdown-body">
+  <article v-if="$slots.default" :class="frontmatter.markdown !== false && 'markdown-body'">
     <slot ref="content" @vnode-updated="updateDom" />
 
     <div text="center">

package/src/client/components/ValaxyOverlay.vue

@@ -8,7 +8,7 @@ withDefaults(defineProps<{
 
 <template>
   <transition name="fade">
-    <div v-if="show" class="va-overlay backdrop-filter backdrop-blur" />
+    <div v-if="show" class="va-overlay" />
   </transition>
 </template>
 

package/src/client/components/ValaxyPagination.vue

@@ -15,7 +15,7 @@ const props = defineProps<{
   pageSize: number
 }>()
 
-const emit = defineEmits(['page-change'])
+const emit = defineEmits(['pageChange'])
 
 const totalPages = computed(() => Math.ceil(props.total / props.pageSize))
 
@@ -38,7 +38,7 @@ const showPage = (i: number) => {
 }
 
 const jumpTo = (page: number) => {
-  emit('page-change', page)
+  emit('pageChange', page)
   if (page === 1)
     return '/'
   else return `/page/${page}`

package/src/client/components/ValaxyRightSidebar.vue

@@ -1,18 +1,30 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n'
 import type { Post } from '../../types'
+import { useAppStore } from '~/stores/app'
+defineProps<{ frontmatter: Post }>()
 const { t } = useI18n()
 
-defineProps<{ frontmatter: Post }>()
+const app = useAppStore()
 </script>
 
 <template>
-  <aside class="right-sidebar va-card relative" m="l-4" text="center">
+  <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 sticky">
+    <div class="right-sidebar-container">
       <ValaxyToc v-if="frontmatter.toc !== false" />
 
       <div v-if="$slots.custom" class="custom-container">
@@ -23,10 +35,39 @@ defineProps<{ frontmatter: Post }>()
 </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/src/client/components/ValaxySidebar.vue

@@ -11,7 +11,7 @@ const isHome = useLayout('home')
 
   <ValaxyHamburger :active="app.isSidebarOpen" class="menu-btn sidebar-toggle yun-icon-btn" :class="isHome ? '' : 'md:hidden'" @click="app.toggleSidebar()" />
 
-  <aside class="va-card" :class="['sidebar', app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']">
+  <aside class="va-card transition sidebar" :class="[app.isSidebarOpen && 'open', !isHome && 'md:translate-x-0']">
     <slot />
   </aside>
 </template>

package/src/client/components/ValaxyToc.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 import { useActiveSidebarLinks } from '~/composables'
@@ -7,27 +8,48 @@ import { useActiveSidebarLinks } from '~/composables'
 const route = useRoute()
 const headers = computed(() => route.meta.headers)
 
-useActiveSidebarLinks()
+const container = ref()
+const marker = ref()
+useActiveSidebarLinks(container, marker)
 
 function getStylesByLevel(level: number) {
   return {
-    fontSize: `${(6 - level) * 0.2 + 0.4}rem`,
+    // fontSize: `${(6 - level) * 0.1 + 0.7}rem`,
     paddingLeft: `${level * 1 - 1}rem`,
   }
 }
 
+const { locale } = useI18n()
+
 // todo mobile toc widget
 </script>
 
 <template>
-  <ul class="va-toc" p="l-4">
-    <li v-for="header, i in headers" :key="i" class="va-toc-item" :style="getStylesByLevel(header.level)">
-      <a class="toc-link-item" :href="`#${header.slug}`">{{ header.title }}</a>
-    </li>
-  </ul>
+  <div v-if="headers" ref="container">
+    <div ref="marker" class="outline-marker" />
+    <ul class="va-toc" p="l-4">
+      <li v-for="header, i in headers" :key="i" :lang="header.lang || locale" class="va-toc-item" :style="getStylesByLevel(header.level)">
+        <a class="toc-link-item" :href="`#${header.slug}`">{{ header.title }}</a>
+      </li>
+    </ul>
+  </div>
 </template>
 
 <style lang="scss">
+.outline-marker {
+  opacity: 0;
+  position: absolute;
+  background-color: var(--va-c-primary);
+  border-radius: 4px;
+  width: 4px;
+  height: 20px;
+  top: 32px;
+  left: 20px;
+  z-index: 0;
+  transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
+    background-color 0.5s;
+}
+
 .va-toc {
   top: 10px;
   width: var(--yun-sidebar-width-mobile);

package/src/client/composables/category.ts

@@ -2,13 +2,15 @@ import { unref } from 'vue'
 import type { Post } from '../../types'
 import { usePostList } from './post'
 
-export interface ParentCategory {
+export interface BaseCategory {
   total: number
+}
+
+export interface ParentCategory extends BaseCategory {
   children: Categories
 }
 
-export interface PostCategory {
-  total: number
+export interface PostCategory extends BaseCategory {
   posts: Post[]
 }
 
@@ -17,6 +19,8 @@ export type Category = ParentCategory | PostCategory
 // export type Categories = Map<string, Post[] | Category>
 export type Categories = Map<string, Category>
 
+export const isParentCategory = (category: any): category is ParentCategory => category.children
+
 /**
  * get categories from posts
  * @returns

package/src/client/composables/comments/twikoo.ts

@@ -4,11 +4,8 @@ import { useRoute } from 'vue-router'
 
 export function useTwikoo(options: {} = {}) {
   const route = useRoute()
-
   const { locale } = useI18n()
 
-  let twikoo: any
-
   /**
    * init twikoo
    * @param options twikoo options
@@ -30,6 +27,6 @@ export function useTwikoo(options: {} = {}) {
   // 直接使用 CDN
   useScriptTag('//cdn.jsdelivr.net/npm/twikoo@1.5.1/dist/twikoo.all.min.js', () => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    twikoo = initTwikoo(options)
+    initTwikoo(options)
   })
 }

package/src/client/composables/comments/waline.ts

@@ -1,9 +1,16 @@
 import { isClient, useScriptTag } from '@vueuse/core'
+import { useHead } from '@vueuse/head'
 import { onUnmounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
 export function useWaline(options: {} = {}) {
+  useHead({
+    link: [
+      { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.css' },
+    ],
+  })
+
   const route = useRoute()
 
   const { locale } = useI18n()
@@ -31,11 +38,11 @@ export function useWaline(options: {} = {}) {
       path: route.path,
     }
     const walineOptions = Object.assign(defaultOptions, options)
-    return window.Waline(walineOptions)
+    return window.Waline.init(walineOptions)
   }
 
   // 直接使用 CDN
-  useScriptTag('//cdn.jsdelivr.net/npm/@waline/client', () => {
+  useScriptTag('//cdn.jsdelivr.net/npm/@waline/client/dist/waline.js', () => {
     waline = initWaline(options)
   })
 
@@ -60,4 +67,6 @@ export function useWaline(options: {} = {}) {
       return
     waline.destroy()
   })
+
+  return waline
 }

package/src/client/composables/sidebar.ts

@@ -1,16 +1,21 @@
-import { onMounted, onUnmounted, onUpdated } from 'vue'
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted } from 'vue'
 
 // todo: refactor
 
-export function useActiveSidebarLinks() {
-  let rootActiveLink: HTMLAnchorElement | null = null
-  let activeLink: HTMLAnchorElement | null = null
-
+export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<HTMLElement>) {
   const onScroll = throttleAndDebounce(setActiveLink, 200)
 
   function setActiveLink(): void {
-    const sidebarLinks = getSidebarLinks()
-    const anchors = getAnchors(sidebarLinks)
+    const sidebarLinks = [].slice.call(
+      document.querySelectorAll('.va-toc a.toc-link-item'),
+    ) as HTMLAnchorElement[]
+
+    const anchors = [].slice
+      .call(document.querySelectorAll('main .header-anchor'))
+      .filter((anchor: HTMLAnchorElement) =>
+        sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash),
+      ) as HTMLAnchorElement[]
 
     for (let i = 0; i < anchors.length; i++) {
       const anchor = anchors[i]
@@ -26,26 +31,25 @@ export function useActiveSidebarLinks() {
     }
   }
 
-  function activateLink(hash: string | null): void {
-    deactiveLink(activeLink)
-    deactiveLink(rootActiveLink)
-
-    activeLink = document.querySelector(`.va-toc a[href="${hash}"]`)
-
-    if (!activeLink)
-      return
-
-    activeLink.classList.add('active')
-
-    // also add active class to parent h2 anchors
-    const rootLi = activeLink.closest('.right-sidebar-container > ul > li')
+  let prevActiveLink: HTMLAnchorElement | null = null
 
-    if (rootLi && rootLi !== activeLink.parentElement) {
-      rootActiveLink = rootLi.querySelector('a')
-      rootActiveLink && rootActiveLink.classList.add('active')
+  function activateLink(hash: string | null): void {
+    deactiveLink(prevActiveLink)
+
+    const activeLink = (prevActiveLink
+      = hash == null
+        ? null
+        : container.value.querySelector(`.va-toc a[href="${hash}"]`) as HTMLAnchorElement)
+
+    // marker animation
+    if (activeLink) {
+      activeLink.classList.add('active')
+      marker.value.style.opacity = '1'
+      marker.value.style.top = `${activeLink.offsetTop + 2}px`
     }
     else {
-      rootActiveLink = null
+      marker.value.style.opacity = '0'
+      marker.value.style.top = '54px'
     }
   }
 
@@ -54,34 +58,15 @@ export function useActiveSidebarLinks() {
   }
 
   onMounted(() => {
-    setActiveLink()
+    requestAnimationFrame(setActiveLink)
     window.addEventListener('scroll', onScroll)
   })
 
-  onUpdated(() => {
-    // sidebar update means a route change
-    activateLink(decodeURIComponent(location.hash))
-  })
-
   onUnmounted(() => {
     window.removeEventListener('scroll', onScroll)
   })
 }
 
-function getSidebarLinks(): HTMLAnchorElement[] {
-  return [].slice.call(
-    document.querySelectorAll('.va-toc a.toc-link-item'),
-  )
-}
-
-function getAnchors(sidebarLinks: HTMLAnchorElement[]): HTMLAnchorElement[] {
-  return [].slice
-    .call(document.querySelectorAll('.header-anchor'))
-    .filter((anchor: HTMLAnchorElement) =>
-      sidebarLinks.some(sidebarLink => sidebarLink.hash === anchor.hash),
-    ) as HTMLAnchorElement[]
-}
-
 function getAnchorTop(anchor: HTMLAnchorElement): number {
   return anchor.parentElement!.offsetTop - 50
 }

package/src/client/locales/zh-CN.yml

@@ -59,7 +59,7 @@ footer:
   total_visitors: 总访客量
 
 counter:
-  archives: 暂无日志 | 共计 1 篇日志 | 共计 {count} 篇日志
+  archives: 暂无日志 | 共计 {count} 篇日志
   categories: 暂无分类 | 共计 {count} 个分类
   tags: 暂无标签 | 共计 {count} 个标签
   albums:

package/src/client/modules/pwa.ts

@@ -5,7 +5,7 @@ export const install: UserModule = ({ isClient, router }) => {
   if (!isClient)
     return
 
-  router.isReady().then(async() => {
+  router.isReady().then(async () => {
     const { registerSW } = await import('virtual:pwa-register')
     registerSW({ immediate: true })
   })

package/src/client/stores/app.ts

@@ -3,10 +3,15 @@ import { useToggle } from '@vueuse/core'
 
 export const useAppStore = defineStore('app', () => {
   const [isSidebarOpen, toggleSidebar] = useToggle(false)
+  // right sidebar with toc
+  const [isRightSidebarOpen, toggleRightSidebar] = useToggle(false)
 
   return {
     isSidebarOpen,
     toggleSidebar,
+
+    isRightSidebarOpen,
+    toggleRightSidebar,
   }
 })
 

package/src/client/styles/common/sidebar.scss

@@ -22,7 +22,9 @@
   z-index: var(--yun-z-sidebar);
 
   transform: translateX(-100%);
-  transition: transform var(--va-transition-duration);
+  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) !important;
 
   &.open {
     transform: translateX(0);