valaxy 0.17.4 → 0.18.0-beta.0

package/client/components/ValaxyMd.vue

@@ -45,10 +45,7 @@ useVanillaLazyLoad()
 
 <template>
   <article v-if="$slots.default" :class="frontmatter.markdown !== false && 'markdown-body'">
-    <template v-if="frontmatter.encryptedContent">
-      <ValaxyDecrypt :encrypted-content="frontmatter.encryptedContent" />
-    </template>
-    <slot v-else ref="contentRef" @vue:updated="runContentUpdated" />
+    <slot ref="contentRef" @vue:updated="runContentUpdated" />
 
     <div v-if="frontmatter.url" text="center">
       <a

package/client/components/builtin/ValaxyMermaid.vue

@@ -0,0 +1,86 @@
+<!--
+Mermaid
+(auto transformed, you don't need to use this component directly)
+
+Usage:
+
+```mermaid
+pie
+"Dogs" : 386
+"Cats" : 85
+"Rats" : 15
+```
+-->
+
+<script setup lang="ts">
+import { getCurrentInstance, ref, watch, watchEffect } from 'vue'
+
+import { isClient } from '@vueuse/core'
+import { renderMermaid } from '../../modules/mermaid'
+import ShadowRoot from '../internals/ShadowRoot.vue'
+
+import { isDark } from '../../composables'
+
+const props = defineProps<{
+  code: string
+  scale?: number
+  theme?: string
+}>()
+
+const vm = getCurrentInstance()
+const el = ref<ShadowRoot>()
+const html = ref('')
+
+if (isClient) {
+  // dynamic import to reduce initial bundle size
+  import('mermaid').then(m => m.default)
+    .then((mermaid) => {
+      mermaid.startOnLoad = false
+      mermaid.initialize({ startOnLoad: false })
+
+      watchEffect(async (onCleanup) => {
+        let disposed = false
+        onCleanup(() => {
+          disposed = true
+        })
+        const svg = await renderMermaid(
+          mermaid,
+          props.code || '',
+          {
+            theme: props.theme || (isDark.value ? 'dark' : undefined),
+            ...vm!.attrs,
+          },
+        )
+        if (!disposed)
+          html.value = svg
+      })
+
+      const actualHeight = ref<number>()
+
+      watch(html, () => {
+        actualHeight.value = undefined
+      })
+
+      watchEffect(() => {
+        const svgEl = el.value?.children?.[0] as SVGElement | undefined
+        if (svgEl && svgEl.hasAttribute('viewBox') && actualHeight.value == null) {
+          const v = Number.parseFloat(svgEl.getAttribute('viewBox')?.split(' ')[3] || '')
+          actualHeight.value = Number.isNaN(v) ? undefined : v
+        }
+      }, { flush: 'post' })
+
+      watchEffect(() => {
+        const svgEl = el.value?.children?.[0] as SVGElement | undefined
+        if (svgEl != null && props.scale != null && actualHeight.value != null) {
+          svgEl.setAttribute('height', `${actualHeight.value * props.scale}`)
+          svgEl.removeAttribute('width')
+          svgEl.removeAttribute('style')
+        }
+      }, { flush: 'post' })
+    })
+}
+</script>
+
+<template>
+  <ShadowRoot class="mermaid" :inner-html="html" @shadow="el = $event" />
+</template>

package/client/components/internals/ShadowRoot.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed, ref, watchEffect } from 'vue'
+
+const props = defineProps<{
+  innerHtml: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'shadow', div: ShadowRoot): void
+}>()
+
+const el = ref<HTMLDivElement>()
+const shadow = computed(() => el.value ? (el.value.shadowRoot || el.value.attachShadow({ mode: 'open' })) : null)
+watchEffect(() => {
+  if (shadow.value && props.innerHtml) {
+    emit('shadow', shadow.value)
+    shadow.value.innerHTML = props.innerHtml
+  }
+})
+</script>
+
+<template>
+  <div ref="el" />
+</template>

package/client/composables/common.ts

@@ -6,9 +6,11 @@ import type { PageData, Post } from 'valaxy/types'
 import { useSiteConfig } from '../config'
 
 export function useFrontmatter() {
+  // inject not in app root
   const route = useRoute()
-  const frontmatter = computed<Post>(() => route.meta.frontmatter || {})
-
+  const frontmatter = computed<Post>(() => {
+    return route.meta.frontmatter || {}
+  })
   return frontmatter
 }
 

package/client/composables/dark.ts

@@ -1,6 +1,7 @@
-import { useDark, useToggle } from '@vueuse/core'
+import { isClient, useDark, useToggle } from '@vueuse/core'
 
-import 'valaxy/client/styles/common/view-transition.css'
+if (isClient)
+  import('valaxy/client/styles/common/view-transition.css')
 
 export const isDark = useDark()
 export const toggleDark = useToggle(isDark)

package/client/composables/post.ts

@@ -1,10 +1,10 @@
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import type { Post } from 'valaxy'
 import { sortByDate } from '../utils'
-import { useSiteStore } from '../stores'
+import { useRouterStore, useSiteStore } from '../stores'
 
 export function usePostTitle(post: ComputedRef<Post>) {
   const { locale } = useI18n()
@@ -18,12 +18,11 @@ export function usePostTitle(post: ComputedRef<Post>) {
  * get all page in 'pages' folder
  */
 export function usePageList() {
-  const router = useRouter()
+  const routerStore = useRouterStore()
+  const router = routerStore.router
+
   return computed<Post[]>(() => {
     const excludePages = ['/:..all', '/:all(.*)*', '/', '/:path(.*)']
-    if (!router)
-      return []
-
     const routes = router.getRoutes()
       .filter(i => i.name)
       .filter(i => i.meta)

package/client/modules/mermaid.ts

@@ -0,0 +1,26 @@
+import { customAlphabet } from 'nanoid'
+import { decode } from 'js-base64'
+import { clearUndefined } from '@antfu/utils'
+import type { Mermaid } from 'mermaid'
+import setupMermaid from '../setup/mermaid'
+
+const nanoid = customAlphabet('abcedfghicklmn', 10)
+const cache = new Map<string, string>()
+
+export async function renderMermaid(mermaid: Mermaid, encoded: string, options: any) {
+  const key = encoded + JSON.stringify(options)
+  const _cache = cache.get(key)
+  if (_cache)
+    return _cache
+
+  mermaid.initialize({
+    startOnLoad: false,
+    ...clearUndefined(setupMermaid() || {}),
+    ...clearUndefined(options),
+  })
+  const code = decode(encoded)
+  const id = nanoid()
+  const { svg } = await mermaid.render(id, code)
+  cache.set(key, svg)
+  return svg
+}

package/client/setup/mermaid.ts

@@ -0,0 +1,15 @@
+/* __imports__ */
+
+import { defineMermaidSetup } from 'valaxy'
+import type { MermaidOptions } from '../types'
+
+export default defineMermaidSetup(() => {
+  // eslint-disable-next-line prefer-const
+  let injection_return: MermaidOptions = {
+    theme: 'default',
+  }
+
+  /* __injections__ */
+
+  return injection_return
+})

package/client/setups.ts

@@ -1,10 +1,18 @@
 import type { ViteSSGContext } from 'vite-ssg'
 import type { Awaitable } from '@antfu/utils'
+import type { MermaidOptions } from './types'
 
 export type AppContext = ViteSSGContext
 
 export type AppSetup = (ctx: AppContext) => Awaitable<void>
 
+// client
+export type MermaidSetup = () => Partial<MermaidOptions> | void
+
 export function defineAppSetup(fn: AppSetup) {
   return fn
 }
+
+export function defineMermaidSetup(fn: MermaidSetup) {
+  return fn
+}

package/client/stores/index.ts

@@ -1,2 +1,3 @@
 export * from './app'
+export * from './router'
 export * from './site'

package/client/stores/router.ts

@@ -0,0 +1,10 @@
+import { defineStore } from 'pinia'
+import { useRouter } from 'vue-router'
+
+export const useRouterStore = defineStore('routerStore', () => {
+  const router = useRouter()
+
+  return {
+    router,
+  }
+})

package/client/stores/site.ts

@@ -1,7 +1,6 @@
 import { computed, ref } from 'vue'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { useRouter } from 'vue-router'
-import { usePostList } from '..'
+import { usePostList, useRouterStore } from '..'
 import type { PageDataPayload } from '../../types'
 
 /**
@@ -11,18 +10,21 @@ import type { PageDataPayload } from '../../types'
  * - category
  */
 export const useSiteStore = defineStore('site', () => {
+  const routerStore = useRouterStore()
+  const router = routerStore.router
+
   const reload = ref(1)
   // for dev hot reload
   const postList = computed(() => {
-    if (reload.value)
-      return usePostList().value
+    const val = usePostList().value
+    if (reload.value && val)
+      return val
     else
-      return usePostList().value
+      return val
   })
 
   // const postList = usePostList()
 
-  const router = useRouter()
   if (router) {
     router.isReady().then(() => {
       // hot reload when save md

package/client/types/index.ts

@@ -1,3 +1,6 @@
 import type { ViteSSGContext } from 'vite-ssg'
+import type mermaid from 'mermaid'
 
 export type UserModule = (ctx: ViteSSGContext) => void
+
+export type MermaidOptions = (typeof mermaid.initialize) extends (a: infer A) => any ? A : never

package/client/utils/code.ts

@@ -0,0 +1,24 @@
+import { range, uniq } from '@antfu/utils'
+
+/**
+ * 1,3-5,8 => [1, 3, 4, 5, 8]
+ */
+export function parseRangeString(total: number, rangeStr?: string) {
+  if (!rangeStr || rangeStr === 'all' || rangeStr === '*')
+    return range(1, total + 1)
+
+  const pages: number[] = []
+  for (const part of rangeStr.split(/[,;]/g)) {
+    if (!part.includes('-')) {
+      pages.push(+part)
+    }
+    else {
+      const [start, end] = part.split('-', 2)
+      pages.push(
+        ...range(+start, !end ? (total + 1) : (+end + 1)),
+      )
+    }
+  }
+
+  return uniq(pages).filter(i => i <= total).sort((a, b) => a - b)
+}

package/client/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './cdn'
+export * from './code'
 export * from './helper'
 export * from './time'
 export * from './wrap'

package/client/utils/time.ts

@@ -1,12 +1,6 @@
 import dayjs from 'dayjs'
-import utc from 'dayjs/plugin/utc'
-import timezone from 'dayjs/plugin/timezone'
-
 import type { Post } from '../../types'
 
-dayjs.extend(utc)
-dayjs.extend(timezone)
-
 /**
  * use dayjs format date
  * @param date