valaxy 0.11.0 → 0.11.2

package/client/App.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, provide, ref } from 'vue'
 import { useHead } from '@vueuse/head'
 // @ts-expect-error virtual module
 import ValaxyUserApp from '/@valaxyjs/UserAppVue'
+// @ts-expect-error virtual module
+import ValaxyThemeApp from '/@valaxyjs/ThemeAppVue'
+import ValaxyAddons from './components/ValaxyAddons.vue'
 import { isDark } from './composables'
 
 // https://github.com/vueuse/head
@@ -36,10 +39,14 @@ useHead({
     },
   ],
 })
+
+const onContentUpdated = ref()
+provide('onContentUpdated', onContentUpdated)
 </script>
 
 <template>
-  <ValaxyUserApp />
+  <ValaxyThemeApp />
   <ValaxyAddons />
+  <ValaxyUserApp />
   <router-view />
 </template>

package/client/components/AppLink.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+// https://router.vuejs.org/guide/advanced/extending-router-link.html#extending-routerlink
 import { computed } from 'vue'
 
 const props = defineProps<{
+  showExternalIcon?: boolean
   to: string
 }>()
 
@@ -13,6 +15,7 @@ const isExternalLink = computed(() => {
 <template>
   <a v-if="isExternalLink" v-bind="$attrs" :href="to" target="_blank">
     <slot />
+    <div v-if="showExternalIcon" class="icon-link inline-block" i-ri-arrow-right-up-line />
   </a>
   <router-link v-else v-bind="$props as any">
     <slot />

package/client/components/ValaxyAddons.vue

@@ -6,5 +6,3 @@ import addonComponents from '/@valaxyjs/addons'
 <template>
   <component :is="component" v-bind="props" v-for="({ component, props }, index) in addonComponents" :key="index" />
 </template>
-
-<style lang="scss" scoped></style>

package/client/components/ValaxyMd.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import type { Ref } from 'vue'
+import { inject, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAplayer, useCodePen, useCopyCode, wrapTable } from '..'
 import type { Post } from '../../types'
@@ -9,11 +10,14 @@ const props = defineProps<{
   excerpt?: string
 }>()
 
+const onContentUpdated = inject('onContentUpdated') as Ref<() => void>
+
 const { t } = useI18n()
 
 const content = ref()
 function updateDom() {
   wrapTable(content.value)
+  onContentUpdated.value?.()
 }
 
 onMounted(() => {

package/client/composables/{outline.ts → outline/anchor.ts}

@@ -1,52 +1,6 @@
 import type { Ref } from 'vue'
 import { onMounted, onUnmounted, onUpdated } from 'vue'
-import { throttleAndDebounce } from '../utils'
-import type { Header } from '../../types'
-
-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,
-  }))
-}
+import { throttleAndDebounce } from '../../utils'
 
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 56
@@ -89,7 +43,7 @@ export function useActiveAnchor(
     const scrollY = window.scrollY
     const innerHeight = window.innerHeight
     const offsetHeight = container.value.offsetHeight
-    const isBottom = (scrollY + innerHeight) === offsetHeight
+    const isBottom = scrollY + innerHeight === offsetHeight
 
     // console.log(scrollY, innerHeight, offsetHeight)
     // console.log(isBottom)

package/client/composables/outline/headers.ts

@@ -0,0 +1,124 @@
+import type { Ref } from 'vue'
+import { computed, inject, ref } from 'vue'
+import type { DefaultThemeConfig, Header } from 'valaxy/types'
+import { useFrontmatter, useThemeConfig } from '../..'
+
+export type MenuItem = Omit<Header, 'slug' | 'children'> & {
+  children?: MenuItem[]
+}
+
+export function resolveHeaders(
+  headers: MenuItem[],
+  levelsRange: Exclude<DefaultThemeConfig['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
+ * @returns
+ */
+export const useOutline = () => {
+  const frontmatter = useFrontmatter()
+  const themeConfig = useThemeConfig()
+  const headers = ref<MenuItem[]>([])
+  const pageOutline = computed<DefaultThemeConfig['outline']>(
+    () => frontmatter.value.outline ?? themeConfig.value.outline,
+  )
+
+  const onContentUpdated = inject('onContentUpdated') as Ref<() => void>
+  onContentUpdated.value = () => {
+    headers.value = getHeaders(pageOutline.value)
+  }
+
+  const handleClick = ({ target: el }: Event) => {
+    const id = `#${(el as HTMLAnchorElement).href!.split('#')[1]}`
+    const heading = document.querySelector(
+      decodeURIComponent(id),
+    ) as HTMLAnchorElement
+    heading?.focus()
+  }
+
+  return {
+    /**
+     * headers for toc
+     */
+    headers,
+    /**
+     * click hash heading
+     */
+    handleClick,
+  }
+}
+
+/**
+ * get headers from document directly
+ * @param pageOutline
+ * @returns
+ */
+export function getHeaders(pageOutline: DefaultThemeConfig['outline']) {
+  if (pageOutline === false)
+    return []
+  const updatedHeaders: MenuItem[] = []
+  document
+    .querySelectorAll<HTMLHeadingElement>('h2, h3, h4, h5, h6')
+    .forEach((el) => {
+      if (el.textContent && el.id) {
+        updatedHeaders.push({
+          level: Number(el.tagName[1]),
+          title: el.innerText.replace(/\s+#\s*$/, ''),
+          link: `#${el.id}`,
+          lang: el.lang,
+        })
+      }
+    })
+  return resolveHeaders(updatedHeaders, pageOutline)
+}

package/client/composables/outline/index.ts

@@ -0,0 +1,2 @@
+export * from './headers'
+export * from './anchor'

package/client/composables/sidebar.ts

@@ -125,7 +125,6 @@ export function useSidebar() {
     return (
       fm.value.sidebar !== false
       && layout.value !== 'home'
-      && layout.value !== 'post'
     )
   })
 

package/client/layouts/404.vue

@@ -7,23 +7,17 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <ValaxySidebar>
-    <slot name="sidebar">
-      <YunSidebar />
-    </slot>
-  </ValaxySidebar>
-
   <main class="va-main" text="center">
-    <YunCard m="4" p="10" text="yellow-600">
-      <div text-4xl>
+    <div m="4" p="10" text="yellow-600">
+      <div text-6xl>
         <div i-ri-alarm-warning-line inline-block />
       </div>
       <router-view />
       <div>
-        <button btn text-sm m="3 t8" @click="router.back()">
+        <button class="btn rounded-full" p="x-6 y-2" text="sm" m="3 t8" :title="t('button.back')" @click="router.back()">
           {{ t('button.back') }}
         </button>
       </div>
-    </YunCard>
+    </div>
   </main>
 </template>

package/client/main.ts

@@ -4,11 +4,10 @@ import { setupLayouts } from 'virtual:generated-layouts'
 import App from './App.vue'
 
 import '@unocss/reset/tailwind.css'
-
 // generate user styles
 import '/@valaxyjs/styles'
-
 import 'uno.css'
+
 import setupMain from './setup/main'
 
 const routes = setupLayouts(__DEV__ ? generatedRoutes : generatedRoutes.filter(i => !i.meta?.frontmatter.draft))

package/client/pages/[...all].vue

@@ -4,7 +4,7 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div>
+  <div m="2" text="xl">
     {{ t('not-found') }}
   </div>
 </template>

package/client/styles/common/code.scss

@@ -22,9 +22,15 @@
 }
 
 .markdown-body {
+  code {
+    // relative h1, etc
+    font-size: 0.85em;
+  }
+
   div[class*="language-"] {
     position: relative;
     background-color: var(--va-code-block-bg);
+    overflow-x: auto;
 
     code {
       padding: 0 24px;
@@ -33,6 +39,19 @@
       color: var(--va-code-block-color);
       transition: color 0.5s;
       width: fit-content;
+
+      text-align: left;
+      white-space: pre;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+      -webkit-hyphens: none;
+      -moz-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
     }
 
     pre {

package/client/styles/common/custom-blocks.scss

@@ -85,7 +85,9 @@ html.dark {
   align-items: center;
 
   > .icon {
-    width: 16px;
+    display: inline-flex;
+    width: 1rem;
+    height: 1rem;
     margin-right: 4px;
   }
 }

package/client/styles/common/scrollbar.scss

@@ -13,16 +13,17 @@
 ::-webkit-scrollbar-thumb {
   border-radius: 2px;
   background-color: rgba(122, 122, 122, 0.3);
+  // transition not work
 
   &:window-inactive {
     background-color: rgba(122, 122, 122, 0.3);
   }
 
   &:hover {
-    background-color: rgba(get-css-var("c", "primary", "rgb"), 0.7);
+    background-color: rgba(122, 122, 122, 0.7);
   }
 
   &:active {
-    background-color: rgba(get-css-var("c", "primary", "rgb"), 0.9);
+    background-color: rgba(122, 122, 122, 0.9);
   }
 }

package/client/styles/vars.scss

@@ -22,9 +22,7 @@ $font: map.merge(
     "sans":
       'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif',
     "mono": 'Menlo, Monaco, Consolas, "Courier New", monospace',
-    "serif":
-      "'Songti SC', 'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
-    "serif-weight": 900,
+    "serif": "'Noto Serif SC', STZhongsong, STKaiti, KaiTi, Roboto, serif",
   ),
   $font
 );

package/client/styles/widgets/banner.scss

@@ -19,7 +19,8 @@ $char-animation-duration: 0.4s;
 }
 
 .vertical-line {
-  &-top, &-bottom {
+  &-top,
+  &-bottom {
     display: flex;
     background-color: var(--banner-line-color);
     width: 1px;
@@ -47,9 +48,9 @@ $char-animation-duration: 0.4s;
 }
 
 .char {
-  font-family: get-css-var('font', 'serif');
+  font-family: get-css-var("font", "serif");
+  font-weight: 900;
   font-size: var(--banner-char-size, 1rem);
-  font-weight: get-css-var('font', 'serif-weight');
   background-color: var(--banner-char-bg-color);
   line-height: 1;
 
@@ -99,7 +100,10 @@ $char-animation-duration: 0.4s;
 
   to {
     opacity: 1;
-    border-right-width: var(--banner-empty-border-size, var(--banner-char-size));
+    border-right-width: var(
+      --banner-empty-border-size,
+      var(--banner-char-size)
+    );
   }
 }