valaxy 0.17.5 → 0.18.0-beta.2

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 → post/index.ts}

@@ -1,10 +1,11 @@
 import type { ComputedRef } from 'vue'
 import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import type { Post } from 'valaxy'
-import { sortByDate } from '../utils'
-import { useSiteStore } from '../stores'
+import { sortByDate } from '../../utils'
+import { useRouterStore } from '../../stores'
+
+export * from './usePrevNext'
 
 export function usePostTitle(post: ComputedRef<Post>) {
   const { locale } = useI18n()
@@ -18,12 +19,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)
@@ -63,30 +63,3 @@ export function usePostList(params: {
     return topPosts.concat(otherPosts)
   })
 }
-
-/**
- * get prev and next post
- * @param path
- */
-export function usePrevNext(path?: string) {
-  const route = useRoute()
-  const p = computed(() => path || route.path)
-  const site = useSiteStore()
-
-  const index = computed(() => {
-    let order = -1
-    site.postList.find((item, i) => {
-      if (item.path === p.value) {
-        order = i
-        return true
-      }
-      return false
-    })
-    return order
-  })
-
-  const prev = computed(() => index.value - 1 >= 0 ? site.postList[index.value - 1] : null)
-  const next = computed(() => index.value + 1 < site.postList.length ? site.postList[index.value + 1] : null)
-
-  return [prev, next]
-}

package/client/composables/post/usePrevNext.ts

@@ -0,0 +1,30 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { useSiteStore } from '../../stores'
+
+/**
+ * get prev and next post
+ * @param path
+ */
+export function usePrevNext(path?: string) {
+  const route = useRoute()
+  const p = computed(() => path || route.path)
+  const site = useSiteStore()
+
+  const index = computed(() => {
+    let order = -1
+    site.postList.find((item, i) => {
+      if (item.path === p.value) {
+        order = i
+        return true
+      }
+      return false
+    })
+    return order
+  })
+
+  const prev = computed(() => index.value - 1 >= 0 ? site.postList[index.value - 1] : null)
+  const next = computed(() => index.value + 1 < site.postList.length ? site.postList[index.value + 1] : null)
+
+  return [prev, next]
+}

package/client/main.ts

@@ -20,6 +20,7 @@ import '/@valaxyjs/styles'
 import 'uno.css'
 
 import setupMain from './setup/main'
+import { initDevToolsClientLogic } from './utils/dev'
 
 const valaxyConfig = initValaxyConfig()
 
@@ -58,6 +59,9 @@ const routesWithLayout = setupLayouts(import.meta.env.DEV
   : filterDraft(routes),
 )
 
+if (import.meta.env.DEV)
+  initDevToolsClientLogic()
+
 // https://github.com/antfu/vite-ssg
 export const createApp = ViteSSG(
   App,

package/client/modules/devtools.ts

@@ -21,7 +21,7 @@ export async function addValaxyTabAndCommand() {
     // iframe view
     view: {
       type: 'iframe',
-      src: 'https://valaxy.site',
+      src: '/__valaxy_devtools__/',
     },
     // category: 'pinned',
     category: 'app',

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/modules/valaxy.ts

@@ -63,6 +63,9 @@ function handleHMR(router: Router): void {
   if (import.meta.hot) {
     import.meta.hot.on('valaxy:pageData', (payload: PageDataPayload) => {
       if (shouldHotReload(payload)) {
+        // @ts-expect-error $pageData
+        window.$pageData = payload.pageData
+
         // console.log(payload.pageData.headers)
         Object.assign(router.currentRoute.value.meta, payload.pageData)
       }

package/client/setup/main.ts

@@ -26,12 +26,6 @@ export default function setupMain(ctx: ViteSSGContext, config: ComputedRef<Valax
 
   installValaxy(ctx, config)
 
-  if (import.meta.env.DEV && ctx.isClient) {
-    import('../modules/devtools').then(({ install: installDevtools }) => {
-      installDevtools(ctx)
-    })
-  }
-
   installSchema(ctx)
 
   installPinia(ctx)
@@ -42,5 +36,13 @@ export default function setupMain(ctx: ViteSSGContext, config: ComputedRef<Valax
   dayjs.extend(utc)
   dayjs.extend(timezone)
 
+  if (import.meta.env.DEV && ctx.isClient) {
+    import('../modules/devtools').then(({ install: installDevtools }) => {
+      setTimeout(() => {
+        installDevtools(ctx)
+      }, 0)
+    })
+  }
+
   /* __injections__ */
 }

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,8 +1,8 @@
 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'
+import { setWindowValaxyProp } from '../utils/dev'
 
 /**
  * cache site global store
@@ -11,18 +11,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
@@ -55,6 +58,9 @@ export const useSiteStore = defineStore('site', () => {
     })
   }
 
+  if (import.meta.env.DEV)
+    setWindowValaxyProp('postList', postList)
+
   return {
     postList,
   }

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/dev.ts

@@ -0,0 +1,13 @@
+export function initDevToolsClientLogic() {
+
+}
+
+export function setWindowValaxyProp(property: string, value: any) {
+  if (!(window as any).$valaxy) {
+    ;(window as any).$valaxy = {}
+  }
+  const $valaxy = ((window as any).$valaxy) as {
+    [key: string]: any
+  }
+  $valaxy[property] = value
+}

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