valaxy 0.3.11 → 0.6.0

package/README.md

@@ -7,7 +7,3 @@ Read [YunYouJun/valaxy](https://github.com/YunYouJun/valaxy) for more info.
 ## FAQ
 
 - `exports`: `src/index.ts` for virtual module
-
-### Downgrade vite-plugin-md to `v0.13.1`
-
-`v0.14.0` has some problem with `wrapperComponent`.

package/client/components/PostCard.vue

@@ -0,0 +1,84 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import type { Post } from '../../types'
+import { usePostProperty } from '~/composables'
+
+const props = defineProps<{
+  post: Post
+}>()
+
+const { t } = useI18n()
+
+const { icon, styles } = usePostProperty(props.post.type)
+</script>
+
+<template>
+  <YunCard m="y-4 auto" :class="post.cover ? 'post-card-image' : 'post-card'" :style="styles">
+    <div class="flex flex-1 of-hidden justify-start items-start post-card-info" w="full">
+      <img
+        v-if="post.cover"
+        :src="post.cover"
+        :alt="t('post.cover')"
+        w="40%"
+        h="54"
+        class="object-cover object-center md:shadow"
+      >
+
+      <div class="post-card-image-info-text flex-1" w="full">
+        <div class="flex flex-col flex-1 justify-center items-center" w="full">
+          <AppLink
+            class="post-title-link"
+            :to="post.path || ''"
+            m="t-3"
+          >
+            <div class="flex justify-center items-center title text-2xl" font="serif black">
+              <div v-if="post.type" class="inline-flex" m="r-1" :class="icon" />{{ post.title }}
+            </div>
+          </AppLink>
+
+          <YunPostMeta :frontmatter="post" />
+
+          <div v-if="post.excerpt" class="markdown-body" text="left" w="full" p="x-6 lt-sm:4" v-html="post.excerpt" />
+          <div m="b-5" />
+
+          <a
+            v-if="post.url"
+            :href="post.url"
+            class="post-link-btn shadow hover:shadow-md"
+            rounded
+            target="_blank"
+            m="b-4"
+          >
+            {{ t('post.view_link') }}
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <!-- always show -->
+    <div w="full" class="yun-card-actions flex justify-between" border="t" text="sm">
+      <div class="inline-flex">
+        <router-link
+          v-if="post.categories"
+          :to="{
+            path: '/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"
+        >
+          <div m="x-1" i-ri-folder-2-line />
+          {{ Array.isArray(post.categories) ? post.categories.join(' > ') : post.categories }}
+        </router-link>
+      </div>
+
+      <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 } }" 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>
+        </template>
+      </div>
+    </div>
+  </YunCard>
+</template>

package/{src/client → client}/components/ValaxyFooter.vue

@@ -3,7 +3,7 @@ import { capitalize, computed } from 'vue'
 import { useConfig, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
-import pkg from '~/../../package.json'
+import pkg from '../../package.json'
 
 const { t } = useI18n()
 

package/{src/client → client}/components/ValaxyMd.vue

@@ -2,7 +2,7 @@
 import type { Post } from 'valaxy'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useAplayer, useCodePen, useKatex } from '~/composables'
+import { useAplayer, useCodePen } from '~/composables'
 import { wrapTable } from '~/utils'
 
 const props = defineProps<{
@@ -21,10 +21,6 @@ onMounted(() => {
   updateDom()
 })
 
-// features
-if (props.frontmatter.katex)
-  useKatex()
-
 // widgets
 if (props.frontmatter.aplayer)
   useAplayer()

package/{src/client → client}/components/ValaxyToc.vue

@@ -1,9 +1,11 @@
 <script lang="ts" setup>
+// this is a runtime toc
+// prebuild toc see composables/outline.ts
 import { onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
 
-import type { Header } from '../../node/markdown'
+import type { Header } from '../../types'
 import { useActiveSidebarLinks } from '~/composables'
 import { useConfig } from '~/config'
 
@@ -66,8 +68,6 @@ if (import.meta.hot) {
     }, 600)
   })
 }
-
-// todo mobile toc widget
 </script>
 
 <template>

package/{src/client → client}/composables/index.ts

@@ -5,7 +5,7 @@ export * from './tag'
 
 // common
 export * from './common'
-export * from './features'
+// export * from './features'
 export * from './helper'
 export * from './dark'
 export * from './layout'

package/client/composables/outline.ts

@@ -0,0 +1,181 @@
+import type { Ref } from 'vue'
+import { computed, onMounted, onUnmounted, onUpdated } from 'vue'
+import { useRoute } from 'vue-router'
+import type { Header } from '../../types'
+import { throttleAndDebounce } from '~/utils'
+
+interface HeaderWithChildren extends Header {
+  children?: Header[]
+  hidden?: boolean
+}
+
+interface MenuItemWithLinkAndChildren {
+  text: string
+  link: string
+  children?: MenuItemWithLinkAndChildren[]
+  hidden?: boolean
+  lang?: string
+}
+
+export function resolveHeaders(headers: Header[]) {
+  return mapHeaders(groupHeaders(headers))
+}
+
+function groupHeaders(headers: Header[]): HeaderWithChildren[] {
+  headers = headers.map(h => Object.assign({}, h))
+
+  let lastH2: HeaderWithChildren | undefined
+
+  for (const h of headers) {
+    if (h.level === 2)
+      lastH2 = h
+
+    else if (lastH2 && h.level <= 3)
+      (lastH2.children || (lastH2.children = [])).push(h)
+  }
+
+  return headers.filter(h => h.level === 2)
+}
+
+function mapHeaders(
+  headers: HeaderWithChildren[],
+): MenuItemWithLinkAndChildren[] {
+  return headers.map(header => ({
+    text: header.title,
+    link: `#${header.slug}`,
+    children: header.children ? mapHeaders(header.children) : undefined,
+    hidden: header.hidden,
+    lang: header.lang,
+  }))
+}
+
+// magic number to avoid repeated retrieval
+const PAGE_OFFSET = 56
+
+export function useOutline() {
+  const route = useRoute()
+
+  const hasOutline = computed(() => {
+    return route.meta?.headers?.length > 0
+  })
+
+  return {
+    hasOutline,
+  }
+}
+
+export function useActiveAnchor(
+  container: Ref<HTMLElement>,
+  marker: Ref<HTMLElement>,
+) {
+  const onScroll = throttleAndDebounce(setActiveLink, 100)
+
+  let prevActiveLink: HTMLAnchorElement | null = null
+
+  onMounted(() => {
+    requestAnimationFrame(setActiveLink)
+    window.addEventListener('scroll', onScroll)
+  })
+
+  onUpdated(() => {
+    // sidebar update means a route change
+    activateLink(location.hash)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
+
+  function setActiveLink() {
+    const links = [].slice.call(
+      container.value.querySelectorAll('.outline-link'),
+    ) as HTMLAnchorElement[]
+
+    const anchors = [].slice
+      .call(document.querySelectorAll('.content .header-anchor'))
+      .filter((anchor: HTMLAnchorElement) => {
+        return links.some((link) => {
+          return link.hash === anchor.hash && anchor.offsetParent !== null
+        })
+      }) as HTMLAnchorElement[]
+
+    const scrollY = window.scrollY
+    const innerHeight = window.innerHeight
+    const offsetHeight = (document.querySelector('.yun-main') as HTMLElement)!.offsetHeight
+    const isBottom = (scrollY + innerHeight) === offsetHeight
+
+    // console.log(scrollY, innerHeight, offsetHeight)
+    // console.log(isBottom)
+
+    // page bottom - highlight last one
+    if (anchors.length && isBottom) {
+      activateLink(null)
+      return
+    }
+
+    // isTop
+    if (anchors.length && scrollY === 0)
+      activateLink('#')
+
+    for (let i = 0; i < anchors.length; i++) {
+      const anchor = anchors[i]
+      const nextAnchor = anchors[i + 1]
+
+      const [isActive, hash] = isAnchorActive(i, anchor, nextAnchor)
+
+      if (isActive) {
+        history.replaceState(null, document.title, hash || ' ')
+        activateLink(hash)
+        return
+      }
+    }
+  }
+
+  function activateLink(hash: string | null) {
+    if (prevActiveLink)
+      prevActiveLink.classList.remove('active')
+
+    if (hash !== null) {
+      prevActiveLink = container.value.querySelector(
+        `a[href="${decodeURIComponent(hash)}"]`,
+      ) as HTMLAnchorElement
+    }
+
+    const activeLink = prevActiveLink
+
+    const topOffset = 33
+
+    if (activeLink) {
+      activeLink.classList.add('active')
+      marker.value.style.top = `${activeLink.offsetTop + topOffset}px`
+      marker.value.style.opacity = '1'
+    }
+    else {
+      marker.value.style.top = `${topOffset}px`
+      marker.value.style.opacity = '0'
+    }
+  }
+}
+
+function getAnchorTop(anchor: HTMLAnchorElement): number {
+  return anchor.parentElement!.offsetTop - PAGE_OFFSET - 15
+}
+
+function isAnchorActive(
+  index: number,
+  anchor: HTMLAnchorElement,
+  nextAnchor: HTMLAnchorElement | undefined,
+): [boolean, string | null] {
+  const scrollTop = window.scrollY
+
+  if (index === 0 && scrollTop === 0)
+    return [true, null]
+
+  if (scrollTop < getAnchorTop(anchor))
+    return [false, null]
+
+  if (!nextAnchor || scrollTop < getAnchorTop(nextAnchor))
+    return [true, anchor.hash]
+
+  return [false, null]
+}

package/{src/client → client}/composables/sidebar.ts

@@ -1,8 +1,53 @@
 import type { Ref } from 'vue'
-import { onMounted, onUnmounted } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { useThemeConfig } from '..'
+import { getSidebar } from '../utils/sidebar'
+import { useFrontmatter } from './common'
 
 // todo: refactor
 
+export function useSidebar() {
+  const route = useRoute()
+  const frontmatter = useFrontmatter()
+  const themeConfig = useThemeConfig()
+
+  const isOpen = ref(false)
+
+  const sidebar = computed(() => {
+    const sidebarConfig = themeConfig.value.sidebar
+    const relativePath = route.path
+
+    return sidebarConfig ? getSidebar(sidebarConfig, relativePath) : []
+  })
+
+  const hasSidebar = computed(() => {
+    // return frontmatter.value.sidebar !== false && sidebar.value.length > 0
+    return frontmatter.value.sidebar !== false
+  })
+
+  function open() {
+    isOpen.value = true
+  }
+
+  function close() {
+    isOpen.value = false
+  }
+
+  function toggle() {
+    isOpen.value ? close() : open()
+  }
+
+  return {
+    isOpen,
+    sidebar,
+    hasSidebar,
+    open,
+    close,
+    toggle,
+  }
+}
+
 export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<HTMLElement>) {
   const onScroll = throttleAndDebounce(setActiveLink, 200)
 
@@ -42,14 +87,16 @@ export function useActiveSidebarLinks(container: Ref<HTMLElement>, marker: Ref<H
         : 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 {
-      marker.value.style.opacity = '0'
-      marker.value.style.top = '54px'
+    if (marker.value) {
+      if (activeLink) {
+        activeLink.classList.add('active')
+        marker.value.style.opacity = '1'
+        marker.value.style.top = `${activeLink.offsetTop + 2}px`
+      }
+      else {
+        marker.value.style.opacity = '0'
+        marker.value.style.top = '54px'
+      }
     }
   }
 
@@ -111,3 +158,15 @@ function throttleAndDebounce(fn: () => void, delay: number): () => void {
     }
   }
 }
+
+export function useOutline() {
+  const route = useRoute()
+
+  const hasOutline = computed(() => {
+    return route.meta.headers.length > 0
+  })
+
+  return {
+    hasOutline,
+  }
+}

package/client/config.ts

@@ -0,0 +1,75 @@
+// @ts-expect-error virtual module @valaxyjs/config
+import valaxyConfig from '@valaxyjs/config'
+// @ts-expect-error virtual module @valaxyjs/context
+import valaxyContext from '@valaxyjs/context'
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import { computed, inject, readonly, shallowRef } from 'vue'
+import type { ThemeConfig } from 'valaxy-theme-yun'
+// import type { RouteMeta } from 'vue-router'
+import type { PageData, ValaxyConfig } from '../types'
+
+/**
+ * parse valaxy config
+ * @param data
+ * @returns
+ */
+function parse<T=any>(data: string): T {
+  const parsed = JSON.parse(data)
+  return (import.meta.env.DEV ? readonly(parsed) : parsed) as T
+}
+
+interface ValaxyContext {
+  userRoot: string
+}
+
+export const valaxyConfigSymbol: InjectionKey<ComputedRef<ValaxyConfig<ThemeConfig>>> = Symbol('valaxy:config')
+export const valaxyConfigRef = shallowRef<ValaxyConfig>(parse<ValaxyConfig>(valaxyConfig))
+
+export const valaxyContextRef = shallowRef<ValaxyContext>(parse<ValaxyContext>(valaxyContext))
+// export const valaxyDataRef = shallowRef<PageData>(parse(valaxyConfig))
+
+// hmr
+if (import.meta.hot) {
+  // /@valaxyjs/config must be static string
+  import.meta.hot.accept('/@valaxyjs/config', (m) => {
+    valaxyConfigRef.value = parse<ValaxyConfig>(m.default)
+  })
+
+  // context
+  import.meta.hot.accept('/@valaxyjs/context', (m) => {
+    valaxyContextRef.value = parse<ValaxyContext>(m.default)
+  })
+}
+
+export function initConfig() {
+  return computed(() => valaxyConfigRef.value)
+}
+
+export function initContext() {
+  return computed(() => valaxyContextRef.value)
+}
+
+/*
+ * get Config
+ * @returns
+ */
+export function useConfig() {
+  const config = inject(valaxyConfigSymbol)
+  if (!config)
+    throw new Error('[Valaxy] config not properly injected in app')
+  return config!
+}
+
+/**
+ * getThemeConfig
+ * @returns
+ */
+export function useThemeConfig() {
+  const config = useConfig()
+  return computed(() => config!.value.themeConfig)
+}
+
+export interface ValaxyData<T = any> {
+  page: Ref<PageData>
+  theme: Ref<T>
+}

package/{src/client → client}/locales/en.yml

@@ -43,6 +43,7 @@ post:
   related_posts: Related Posts
   view_link: View Link
   read_more: READ MORE
+  cover: Cover
   copyright:
     author: Post author
     link: Post link

package/{src/client → client}/locales/zh-CN.yml

@@ -43,6 +43,7 @@ post:
   related_posts: 相关文章
   view_link: 查看链接
   read_more: 阅读更多
+  cover: 封面
   copyright:
     author: 本文作者
     link: 本文链接
@@ -59,9 +60,9 @@ footer:
   total_visitors: 总访客量
 
 counter:
-  archives: 暂无日志 | 共计 {count} 篇日志
-  categories: 暂无分类 | 共计 {count} 个分类
-  tags: 暂无标签 | 共计 {count} 个标签
+  archives: 暂无日志 | 共计 1 篇日志 | 共计 {count} 篇日志
+  categories: 暂无分类 | 共计 1 个分类 | 共计 {count} 个分类
+  tags: 暂无标签 | 共计 1 个标签 | 共计 {count} 个标签
   albums:
     zero: 暂无相册
     one: 共计 1 个相册

package/{src/client → client}/main.ts

@@ -15,7 +15,14 @@ const routes = setupLayouts(__DEV__ ? generatedRoutes : generatedRoutes.filter(i
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,
-  { routes, base: import.meta.env.BASE_URL },
+  {
+    routes,
+    base: import.meta.env.BASE_URL,
+    scrollBehavior(to, from) {
+      if (to.path !== from.path)
+        return { top: 0 }
+    },
+  },
   (ctx) => {
     // install all modules under `modules/`
     Object.values(import.meta.globEager('./modules/*.ts')).forEach(i => i.install?.(ctx))