valaxy 0.5.0 → 0.6.2

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

@@ -3,6 +3,7 @@ import type { Post } from 'valaxy'
 import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAplayer, useCodePen } from '~/composables'
+import { useCopyCode } from '~/composables/copy-code'
 import { wrapTable } from '~/utils'
 
 const props = defineProps<{
@@ -27,41 +28,47 @@ if (props.frontmatter.aplayer)
 
 if (props.frontmatter.codepen)
   useCodePen()
+
+useCopyCode()
 </script>
 
 <template>
-  <article v-if="$slots.default" :class="frontmatter.markdown !== false && 'markdown-body'">
-    <slot ref="content" @vnode-updated="updateDom" />
-
-    <div text="center">
-      <a
-        v-if="frontmatter.url"
-        :href="frontmatter.url"
-        class="post-link-btn shadow hover:shadow-md"
-        rounded
-        target="_blank"
-        m="b-4"
-      >
-        {{ t('post.view_link') }}
-      </a>
-    </div>
+  <Transition appear>
+    <article v-if="$slots.default" :class="frontmatter.markdown !== false && 'markdown-body'">
+      <slot ref="content" @vnode-updated="updateDom" />
 
-    <slot v-if="typeof frontmatter.end !== 'undefined'" name="end">
-      <div m="y-4" class="end flex justify-center items-center">
-        <hr class="line inline-flex" w="full" m="!y-2">
-        <span p="x-4" font="serif bold" class="whitespace-nowrap">
-          {{ frontmatter.end ? 'Q.E.D.' : 'To Be Continued.' }}
-        </span>
-        <hr class="line inline-flex" w="full" m="!y-2">
+      <div text="center">
+        <a
+          v-if="frontmatter.url"
+          :href="frontmatter.url"
+          class="post-link-btn shadow hover:shadow-md"
+          rounded
+          target="_blank"
+          m="b-4"
+        >
+          {{ t('post.view_link') }}
+        </a>
       </div>
-    </slot>
-  </article>
+
+      <slot v-if="frontmatter.end !== undefined" name="end">
+        <div m="y-4" class="end flex justify-center items-center">
+          <hr class="line inline-flex" w="full" m="!y-2">
+          <span p="x-4" font="serif bold" class="whitespace-nowrap">
+            {{ frontmatter.end ? 'Q.E.D.' : 'To Be Continued.' }}
+          </span>
+          <hr class="line inline-flex" w="full" m="!y-2">
+        </div>
+      </slot>
+    </article>
+  </Transition>
 </template>
 
 <style lang="scss">
-.end {
-  .line {
-    height: 1px;
+.markdown-body {
+  .end {
+    .line {
+      height: 1px;
+    }
   }
 }
 </style>

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/copy-code.ts

@@ -0,0 +1,92 @@
+import { nextTick, watch } from 'vue'
+import { isClient } from '@vueuse/core'
+import { useRoute } from 'vue-router'
+
+export function useCopyCode() {
+  const route = useRoute()
+
+  if (isClient) {
+    watch(
+      () => route.path,
+      () => {
+        nextTick(() => {
+          document
+            .querySelectorAll<HTMLSpanElement>(
+              '.markdown-body div[class*="language-"]>span.copy',
+            )
+            .forEach(handleElement)
+        })
+      },
+      { immediate: true, flush: 'post' },
+    )
+  }
+}
+
+async function copyToClipboard(text: string) {
+  try {
+    return navigator.clipboard.writeText(text)
+  }
+  catch {
+    const element = document.createElement('textarea')
+    const previouslyFocusedElement = document.activeElement
+
+    element.value = text
+
+    // Prevent keyboard from showing on mobile
+    element.setAttribute('readonly', '')
+
+    element.style.contain = 'strict'
+    element.style.position = 'absolute'
+    element.style.left = '-9999px'
+    element.style.fontSize = '12pt' // Prevent zooming on iOS
+
+    const selection = document.getSelection()
+    const originalRange = selection
+      ? selection.rangeCount > 0 && selection.getRangeAt(0)
+      : null
+
+    document.body.appendChild(element)
+    element.select()
+
+    // Explicit selection workaround for iOS
+    element.selectionStart = 0
+    element.selectionEnd = text.length
+
+    document.execCommand('copy')
+    document.body.removeChild(element)
+
+    if (originalRange) {
+      selection!.removeAllRanges() // originalRange can't be truthy when selection is falsy
+      selection!.addRange(originalRange)
+    }
+
+    // Get the focus back on the previously focused element, if any
+    if (previouslyFocusedElement)
+      (previouslyFocusedElement as HTMLElement).focus()
+  }
+}
+
+function handleElement(el: HTMLElement) {
+  el.onclick = () => {
+    const parent = el.parentElement
+
+    if (!parent)
+      return
+
+    const isShell
+      = parent.classList.contains('language-sh')
+      || parent.classList.contains('language-bash')
+
+    let { innerText: text = '' } = parent
+
+    if (isShell)
+      text = text.replace(/^ *\$ /gm, '')
+
+    copyToClipboard(text).then(() => {
+      el.classList.add('copied')
+      setTimeout(() => {
+        el.classList.remove('copied')
+      }, 3000)
+    })
+  }
+}

package/client/composables/outline.ts

@@ -0,0 +1,168 @@
+import type { Ref } from 'vue'
+import { onMounted, onUnmounted, onUpdated } from 'vue'
+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 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)
 

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 type { Router } from 'vue-router'
+import type { PageDataPayload } from '../../types'
 import { initConfig, valaxyConfigSymbol } from '../config'
+import { ensureSuffix } from '@antfu/utils'
 
 import type { UserModule } from '~/types'
 
@@ -33,10 +36,11 @@ 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 }) => {
@@ -54,11 +58,19 @@ 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 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