valaxy 0.4.0 → 0.6.1

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

@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+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<{
+  frontmatter: Post
+  excerpt?: string
+}>()
+
+const { t } = useI18n()
+
+const content = ref()
+function updateDom() {
+  wrapTable(content.value)
+}
+
+onMounted(() => {
+  updateDom()
+})
+
+// widgets
+if (props.frontmatter.aplayer)
+  useAplayer()
+
+if (props.frontmatter.codepen)
+  useCodePen()
+
+useCopyCode()
+</script>
+
+<template>
+  <Transition appear>
+    <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>
+
+      <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">
+.markdown-body {
+  .end {
+    .line {
+      height: 1px;
+    }
+  }
+}
+</style>

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/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/{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,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/{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)
 

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>
+}