valaxy 0.5.0 → 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

@@ -20,7 +20,8 @@ const { icon, styles } = usePostProperty(props.post.type)
         :src="post.cover"
         :alt="t('post.cover')"
         w="40%"
-        class="object-contain self-center"
+        h="54"
+        class="object-cover object-center md:shadow"
       >
 
       <div class="post-card-image-info-text flex-1" w="full">
@@ -54,7 +55,8 @@ const { icon, styles } = usePostProperty(props.post.type)
       </div>
     </div>
 
-    <div v-if="post.categories || post.tags" w="full" class="yun-card-actions flex justify-between" border="t" text="sm">
+    <!-- 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"

package/client/components/ValaxyBg.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useThemeConfig } from 'valaxy/client'
+import { useThemeConfig } from 'valaxy'
 import { useCssVar } from '@vueuse/core'
 import { isDark } from '~/composables'
 

package/client/components/ValaxyFooter.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { capitalize, computed } from 'vue'
-import { useConfig, useThemeConfig } from 'valaxy/client'
+import { useConfig, useThemeConfig } from 'valaxy'
 import { useI18n } from 'vue-i18n'
 
 import pkg from '../../package.json'

package/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/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/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)
 
@@ -113,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

@@ -1,28 +1,43 @@
 // @ts-expect-error virtual module @valaxyjs/config
 import valaxyConfig from '@valaxyjs/config'
-import type { ComputedRef, InjectionKey } from 'vue'
+// @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 { ValaxyConfig } from '../types'
+// import type { RouteMeta } from 'vue-router'
+import type { PageData, ValaxyConfig } from '../types'
 
 /**
  * parse valaxy config
  * @param data
  * @returns
  */
-function parse(data: string): ValaxyConfig {
+function parse<T=any>(data: string): T {
   const parsed = JSON.parse(data)
-  return (import.meta.env.DEV ? readonly(parsed) : parsed) as ValaxyConfig
+  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))
+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(m.default)
+    valaxyConfigRef.value = parse<ValaxyConfig>(m.default)
+  })
+
+  // context
+  import.meta.hot.accept('/@valaxyjs/context', (m) => {
+    valaxyContextRef.value = parse<ValaxyContext>(m.default)
   })
 }
 
@@ -30,6 +45,10 @@ export function initConfig() {
   return computed(() => valaxyConfigRef.value)
 }
 
+export function initContext() {
+  return computed(() => valaxyContextRef.value)
+}
+
 /*
  * get Config
  * @returns
@@ -37,7 +56,7 @@ export function initConfig() {
 export function useConfig() {
   const config = inject(valaxyConfigSymbol)
   if (!config)
-    throw new Error('[Valaxy] config not properly injected in qpp')
+    throw new Error('[Valaxy] config not properly injected in app')
   return config!
 }
 
@@ -50,3 +69,7 @@ export function useThemeConfig() {
   return computed(() => config!.value.themeConfig)
 }
 
+export interface ValaxyData<T = any> {
+  page: Ref<PageData>
+  theme: Ref<T>
+}

package/client/main.ts

@@ -18,7 +18,10 @@ export const createApp = ViteSSG(
   {
     routes,
     base: import.meta.env.BASE_URL,
-    scrollBehavior() { return { top: 0 } },
+    scrollBehavior(to, from) {
+      if (to.path !== from.path)
+        return { top: 0 }
+    },
   },
   (ctx) => {
     // install all modules under `modules/`

package/client/modules/valaxy.ts

@@ -10,7 +10,10 @@ import { createI18n } from 'vue-i18n'
 
 import { useStorage } from '@vueuse/core'
 
-import { initConfig, valaxyConfigSymbol } from '../config'
+import type { Router } from 'vue-router'
+import type { PageDataPayload } from '../../types'
+import { initConfig, initContext, valaxyConfigSymbol } from '../config'
+import { ensureSuffix } from '@antfu/utils'
 
 import type { UserModule } from '~/types'
 
@@ -33,14 +36,16 @@ import messages from '/@valaxyjs/locales'
 // import zh from '../../../../../demo/yun/locales/zh-CN.yml'
 // import en from '../../../../../demo/yun/locales/en.yml'
 
-function shouldHotReload(payload: any): boolean {
+function shouldHotReload(payload: PageDataPayload): boolean {
   const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '')
   const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '')
-  return payloadPath === locationPath
+  // console.log(payloadPath, locationPath)
+  return ensureSuffix('/', payloadPath) === ensureSuffix('/', locationPath)
 }
 
 export const install: UserModule = ({ app, router }) => {
   // inject valaxy config before modules
+  const ctx = initContext()
   const config = initConfig()
   app.provide(valaxyConfigSymbol, config)
 
@@ -54,11 +59,31 @@ export const install: UserModule = ({ app, router }) => {
   })
   app.use(i18n)
 
-  // for dev
-  if (__DEV__) {
-    import.meta.hot!.on('valaxy:pageHeaders', (payload) => {
-      if (shouldHotReload(payload))
-        router.currentRoute.value.meta.headers = payload.pageHeaders
+  router.isReady().then(() => {
+    handleHMR(router)
+  })
+
+  function pathToUrl(path: string): string {
+    return `${location.origin}/@fs${ctx.value.userRoot}/pages${path}.md?import`
+  }
+
+  router.beforeEach(async (to) => {
+    try {
+      const { __pageData } = await import(/* @vite-ignore */pathToUrl(to.path))
+      to.meta = Object.assign(to.meta, __pageData)
+    }
+    catch {}
+  })
+}
+
+function handleHMR(router: Router): void {
+  // update route.data on HMR updates of active page
+  if (import.meta.hot) {
+    import.meta.hot!.on('valaxy:pageData', (payload: PageDataPayload) => {
+      if (shouldHotReload(payload)) {
+        // console.log(payload.pageData.headers)
+        Object.assign(router.currentRoute.value.meta, payload.pageData)
+      }
     })
   }
 }

package/client/shims.d.ts

@@ -3,7 +3,7 @@ import 'vue-router'
 import type { Post } from 'valaxy'
 import type { Header } from '../node/markdown'
 
-// with vite-plugin-md, markdowns can be treat as Vue components
+// markdowns can be treat as Vue components
 declare module '*.md' {
   import type { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
@@ -23,6 +23,11 @@ declare module '@valaxyjs/config' {
   export default config
 }
 
+declare module '@valaxyjs/context' {
+  const ctx: string
+  export default ctx
+}
+
 declare module '/@valaxyjs/locales' {
   const messages: {}
   export default messages

package/client/styles/palette.scss

@@ -37,6 +37,8 @@ $colors: map.merge(
 $light: () !default;
 $light: map.merge(
   (
+    "c-brand": $c-primary,
+
     "border-color": #222,
 
     "c-bg": white,
@@ -44,6 +46,7 @@ $light: map.merge(
     "c-bg-dark": #fafafa,
     "c-text": #333,
     "c-text-light": #555,
+    "c-text-lighter": #666,
     "c-text-dark": #111,
 
     "c-primary-rgb": #{red($c-primary),
@@ -53,6 +56,7 @@ $light: map.merge(
     blue($c-primary)},
 
     "c-link": get-css-var("c-primary-dark"),
+    "c-divider": rgba(60, 60, 60, 0.2),
   ),
   $light
 );
@@ -67,8 +71,8 @@ $dark: map.merge(
     "c-bg-dark": #1a1a1a,
 
     "c-text": #f2f2f2,
-    "c-text-light": #eee,
-    "c-text-lighter": #ddd,
+    "c-text-light": #ddd,
+    "c-text-lighter": #eee,
     "c-text-dark": rgba(#ebebeb, 0.8),
     "c-link": map.get($colors, "primary-light"),
   ),

package/client/utils/helper.ts

@@ -28,3 +28,25 @@ export const wrapTable = (container: HTMLElement | Document = document) => {
     wrap(el, 'table-container')
   })
 }
+
+export function throttleAndDebounce(fn: () => void, delay: number): () => void {
+  let timeout: number
+  let called = false
+
+  return () => {
+    if (timeout)
+      clearTimeout(timeout)
+
+    if (!called) {
+      fn()
+      called = true
+      setTimeout(() => {
+        called = false
+      }, delay)
+    }
+    else {
+      // @ts-expect-error browser setTimeout
+      timeout = setTimeout(fn, delay)
+    }
+  }
+}

package/client/utils/sidebar.ts

@@ -0,0 +1,26 @@
+import type { YunTheme } from 'valaxy-theme-yun'
+import { ensurePrefix } from '@antfu/utils'
+
+/**
+ * Get the `Sidebar` from sidebar option. This method will ensure to get correct
+ * sidebar config from `MultiSideBarConfig` with various path combinations such
+ * as matching `guide/` and `/guide/`. If no matching config was found, it will
+ * return empty array.
+ */
+export function getSidebar(
+  sidebar: YunTheme.Sidebar,
+  path: string,
+) {
+  if (Array.isArray(sidebar))
+    return sidebar
+
+  path = ensurePrefix('/', path)
+
+  for (const dir in sidebar) {
+    // make sure the multi sidebar key starts with slash too
+    if (path.startsWith(ensurePrefix('/', dir)))
+      return sidebar[dir]
+  }
+
+  return []
+}

package/config/index.ts

@@ -0,0 +1,18 @@
+import type { YunTheme } from 'valaxy-theme-yun'
+import type { UserConfig } from '../types'
+
+/**
+ * Type config helper
+ */
+export function defineConfig(config: UserConfig<YunTheme.Config>) {
+  return config
+}
+
+/**
+ * Type config helper for custom theme config
+ */
+export function defineConfigWithTheme<ThemeConfig>(
+  config: UserConfig<ThemeConfig>,
+) {
+  return config
+}