valaxy 0.19.2 → 0.19.3

package/client/App.vue

@@ -1,101 +1,3 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useHead, useSeoMeta } from '@unhead/vue'
-
-// @ts-expect-error virtual module
-import ValaxyUserApp from '/@valaxyjs/UserAppVue'
-
-// @ts-expect-error virtual module
-import ValaxyThemeApp from '/@valaxyjs/ThemeAppVue'
-import pkg from 'valaxy/package.json'
-import { useI18n } from 'vue-i18n'
-import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org'
-
-// https://github.com/vueuse/head
-// you can use this to manipulate the document head in any components,
-// they will be rendered correctly in the html results with vite-ssg
-import { useSiteConfig } from './config'
-import ValaxyAddons from './components/ValaxyAddons.vue'
-import { useFrontmatter } from './composables'
-
-// <link rel="apple-touch-icon" href="/pwa-192x192.png">
-// <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
-
-const siteConfig = useSiteConfig()
-// todo, allow user config
-const fm = useFrontmatter()
-
-const { locale } = useI18n()
-
-const title = computed(() => fm.value[`title_${locale.value}`] || fm.value.title)
-useHead({
-  title,
-  titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${siteConfig.value.title}` : siteConfig.value.title)),
-  link: [
-    {
-      rel: 'icon',
-      href: siteConfig.value.favicon,
-      type: siteConfig.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
-    },
-  ],
-  meta: [
-    { name: 'description', content: computed(() => siteConfig.value.description) },
-    {
-      name: 'generator',
-      content: `Valaxy ${pkg.version}`,
-    },
-  ],
-
-  templateParams: {
-    schemaOrg: {
-      host: siteConfig.value.url,
-    },
-  },
-})
-
-// seo
-// todo: get first image url from markdown
-const siteUrl = computed(() => fm.value.url || siteConfig.value.url)
-const description = computed(() => fm.value.excerpt || fm.value.description || siteConfig.value.description)
-
-useSeoMeta({
-  description,
-  ogDescription: description,
-  ogLocale: computed(() => locale.value || fm.value.lang || siteConfig.value.lang || 'en'),
-  ogLocaleAlternate: computed(() => siteConfig.value.languages.filter(l => l !== locale.value)),
-  ogSiteName: computed(() => siteConfig.value.title),
-  ogTitle: computed(() => fm.value.title || siteConfig.value.title),
-  ogImage: computed(() => fm.value.ogImage || fm.value.cover || siteConfig.value.favicon),
-  ogType: 'website',
-  ogUrl: siteUrl,
-})
-
-// for SEO
-useSchemaOrg([
-  // https://unhead.unjs.io/guide/guides/identity.html
-  // Personal Website or Blog
-  definePerson({
-    name: siteConfig.value.author.name,
-    url: siteUrl.value,
-    image: siteConfig.value.author.avatar,
-    sameAs: siteConfig.value.social.map(s => s.link),
-  }),
-  defineWebSite({
-    name: title.value,
-    datePublished: computed(() => fm.value.date),
-    dateModified: computed(() => fm.value.updated),
-  }),
-  defineWebPage(),
-])
-</script>
-
 <template>
-  <ValaxyThemeApp />
-  <ValaxyAddons />
-  <ValaxyUserApp />
-  <router-view v-slot="{ Component, route }">
-    <transition name="app-transition">
-      <component :is="Component" :key="route" />
-    </transition>
-  </router-view>
+  <ValaxyApp />
 </template>

package/client/components/ValaxyApp.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+// TODO: add docs to override ValaxyApp
+import { computed } from 'vue'
+import { useHead, useSeoMeta } from '@unhead/vue'
+
+// @ts-expect-error virtual module
+import ValaxyUserApp from '/@valaxyjs/UserAppVue'
+// @ts-expect-error virtual module
+import ValaxyThemeApp from '/@valaxyjs/ThemeAppVue'
+
+import pkg from 'valaxy/package.json'
+import { useI18n } from 'vue-i18n'
+import { definePerson, defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org'
+
+// https://github.com/vueuse/head
+// you can use this to manipulate the document head in any components,
+// they will be rendered correctly in the html results with vite-ssg
+import { useSiteConfig } from '../config'
+import { useFrontmatter } from '../composables'
+import ValaxyAddons from './ValaxyAddons.vue'
+
+// <link rel="apple-touch-icon" href="/pwa-192x192.png">
+// <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
+
+const siteConfig = useSiteConfig()
+// todo, allow user config
+const fm = useFrontmatter()
+
+const { locale } = useI18n()
+
+const title = computed(() => fm.value[`title_${locale.value}`] || fm.value.title)
+useHead({
+  title,
+  titleTemplate: computed(() => fm.value.titleTemplate || ((title: string) => title ? `${title} - ${siteConfig.value.title}` : siteConfig.value.title)),
+  link: [
+    {
+      rel: 'icon',
+      href: siteConfig.value.favicon,
+      type: siteConfig.value.favicon?.endsWith('svg') ? 'image/svg+xml' : 'image/png',
+    },
+  ],
+  meta: [
+    { name: 'description', content: computed(() => siteConfig.value.description) },
+    {
+      name: 'generator',
+      content: `Valaxy ${pkg.version}`,
+    },
+  ],
+
+  templateParams: {
+    schemaOrg: {
+      host: siteConfig.value.url,
+    },
+  },
+})
+
+// seo
+// todo: get first image url from markdown
+const siteUrl = computed(() => fm.value.url || siteConfig.value.url)
+const description = computed(() => fm.value.excerpt || fm.value.description || siteConfig.value.description)
+
+useSeoMeta({
+  description,
+  ogDescription: description,
+  ogLocale: computed(() => locale.value || fm.value.lang || siteConfig.value.lang || 'en'),
+  ogLocaleAlternate: computed(() => siteConfig.value.languages.filter(l => l !== locale.value)),
+  ogSiteName: computed(() => siteConfig.value.title),
+  ogTitle: computed(() => fm.value.title || siteConfig.value.title),
+  ogImage: computed(() => fm.value.ogImage || fm.value.cover || siteConfig.value.favicon),
+  ogType: 'website',
+  ogUrl: siteUrl,
+})
+
+// for SEO
+useSchemaOrg([
+  // https://unhead.unjs.io/guide/guides/identity.html
+  // Personal Website or Blog
+  definePerson({
+    name: siteConfig.value.author.name,
+    url: siteUrl.value,
+    image: siteConfig.value.author.avatar,
+    sameAs: siteConfig.value.social.map(s => s.link),
+  }),
+  defineWebSite({
+    name: title.value,
+    datePublished: computed(() => fm.value.date),
+    dateModified: computed(() => fm.value.updated),
+  }),
+  defineWebPage(),
+])
+</script>
+
+<template>
+  <ValaxyThemeApp />
+  <ValaxyAddons />
+  <ValaxyUserApp />
+  <router-view />
+</template>

package/client/composables/outline/headers.ts

@@ -1,74 +1,10 @@
 import { computed, shallowRef } from 'vue'
-import type { DefaultTheme, Header } from 'valaxy/types'
+import type { DefaultTheme } from 'valaxy/types'
+import type { MenuItem } from '@valaxyjs/utils'
+import { getHeaders } from '@valaxyjs/utils'
 import { onContentUpdated } from '../../utils'
 import { useFrontmatter, useThemeConfig } from '../..'
 
-/**
- * @en
- * Menu item, the title menu parsed from the article.
- *
- * @zh
- * 菜单项，从文章中解析出的标题菜单。
- */
-export type MenuItem = Omit<Header, 'slug' | 'children'> & {
-  children?: MenuItem[]
-}
-
-export function resolveHeaders(
-  headers: MenuItem[],
-  levelsRange: Exclude<DefaultTheme.Config['outline'], false> = [2, 4],
-) {
-  const levels: [number, number]
-    = typeof levelsRange === 'number'
-      ? [levelsRange, levelsRange]
-      : levelsRange === 'deep'
-        ? [2, 6]
-        : levelsRange
-
-  return groupHeaders(headers, levels)
-}
-
-function groupHeaders(headers: MenuItem[], levelsRange: [number, number]) {
-  const result: MenuItem[] = []
-
-  headers = headers.map(h => ({ ...h }))
-  headers.forEach((h, index) => {
-    if (h.level >= levelsRange[0] && h.level <= levelsRange[1]) {
-      if (addToParent(index, headers, levelsRange))
-        result.push(h)
-    }
-  })
-
-  return result
-}
-
-function addToParent(
-  currIndex: number,
-  headers: MenuItem[],
-  levelsRange: [number, number],
-) {
-  if (currIndex === 0)
-    return true
-
-  const currentHeader = headers[currIndex]
-  for (let index = currIndex - 1; index >= 0; index--) {
-    const header = headers[index]
-
-    if (
-      header.level < currentHeader.level
-      && header.level >= levelsRange[0]
-      && header.level <= levelsRange[1]
-    ) {
-      if (header.children == null)
-        header.children = []
-      header.children.push(currentHeader)
-      return false
-    }
-  }
-
-  return true
-}
-
 /**
  * export headers & handleClick to generate outline
  */
@@ -83,7 +19,11 @@ export function useOutline() {
   onContentUpdated(() => {
     if (pageOutline.value === false)
       return
-    headers.value = getHeaders(pageOutline.value)
+    headers.value = getHeaders({
+      range: pageOutline.value,
+      selector: '.markdown-body',
+      filter: el => !!el.id && el.hasChildNodes(),
+    })
   })
 
   const handleClick = ({ target: el }: Event) => {
@@ -107,46 +47,3 @@ export function useOutline() {
     handleClick,
   }
 }
-
-/**
- * get headers from document directly
- */
-export function getHeaders(range: Exclude<DefaultTheme.Config['outline'], false>) {
-  // when transition, the markdown-body will be two
-  // the first is the old one, the last is the new one
-  const markdownBodyElements = document.querySelectorAll('.markdown-body') as NodeListOf<HTMLElement>
-  const markdownBody = markdownBodyElements[markdownBodyElements.length - 1]
-  const headers = Array.from(markdownBody.querySelectorAll('.markdown-body :where(h1,h2,h3,h4,h5,h6)'))
-    .filter(el => el.id && el.hasChildNodes())
-    .map((el) => {
-      const level = Number(el.tagName[1])
-      return {
-        title: serializeHeader(el),
-        link: `#${el.id}`,
-        level,
-        // @ts-expect-error lang
-        lang: el.lang,
-      }
-    })
-
-  return resolveHeaders(headers, range)
-}
-
-function serializeHeader(h: Element): string {
-  let ret = ''
-  for (const node of Array.from(h.childNodes)) {
-    if (node.nodeType === 1) {
-      if (
-        (node as Element).classList.contains('VABadge')
-        || (node as Element).classList.contains('header-anchor')
-      )
-        continue
-
-      ret += node.textContent
-    }
-    else if (node.nodeType === 3) {
-      ret += node.textContent
-    }
-  }
-  return ret.trim()
-}

package/client/index.ts

@@ -9,3 +9,6 @@ export * from './utils'
 export * from './setups'
 
 export * from './types'
+
+// child packages
+export * from '@valaxyjs/utils'

package/client/main.ts

@@ -19,6 +19,7 @@ import { setupLayouts } from 'virtual:generated-layouts'
 import { initValaxyConfig, valaxyConfigSymbol } from 'valaxy'
 import AppLink from './components/AppLink.vue'
 
+// import App from '/@valaxyjs/App.vue'
 import App from './App.vue'
 
 import setupMain from './setup/main'

package/dist/{chunk-I6UPHJXQ.cjs → chunk-AFNVTV2C.cjs}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var m=Object.create;var o=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var l=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var p=(e,t)=>()=>(e&&(t=e(e=0)),t);var R=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var a=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of u(t))!f.call(e,r)&&r!==n&&o(e,r,{get:()=>t[r],enumerable:!(c=i(t,r))||c.enumerable});return e};var h=(e,t,n)=>(n=e!=null?m(d(e)):{},a(t||!e||!e.__esModule?o(n,"default",{value:e,enumerable:!0}):n,e));var s,I,U= exports.e =p(()=>{"use strict";s=()=>typeof document>"u"?new URL("file:"+__filename).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href,I= exports.d =s()});exports.a = l; exports.b = R; exports.c = h; exports.d = I; exports.e = U;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var m=Object.create;var o=Object.defineProperty;var i=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var d=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var l=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(t,n)=>(typeof require<"u"?require:t)[n]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});var p=(e,t)=>()=>(e&&(t=e(e=0)),t);var R=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports);var a=(e,t,n,c)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of u(t))!f.call(e,r)&&r!==n&&o(e,r,{get:()=>t[r],enumerable:!(c=i(t,r))||c.enumerable});return e};var h=(e,t,n)=>(n=e!=null?m(d(e)):{},a(t||!e||!e.__esModule?o(n,"default",{value:e,enumerable:!0}):n,e));var s,I,U= exports.e =p(()=>{"use strict";s=()=>typeof document>"u"?new URL(`file:${__filename}`).href:document.currentScript&&document.currentScript.src||new URL("main.js",document.baseURI).href,I= exports.d =s()});exports.a = l; exports.b = R; exports.c = h; exports.d = I; exports.e = U;