valaxy 0.19.13 → 0.20.0-beta.5

package/client/components/ValaxyFootnoteTooltip.vue

@@ -11,8 +11,6 @@ export default Component
 </script>
 
 <style scoped>
-@import 'floating-vue/dist/style.css';
-
 div .v-popper {
   display: inline
 }

package/client/components/ValaxyOverlay.vue

@@ -17,7 +17,7 @@ withDefaults(defineProps<{
 @use "valaxy/client/styles/mixins/index.scss" as *;
 
 .va-overlay {
-  background-color: rgba(0, 0, 0, 0.3);
+  background-color: rgb(0 0 0 / 0.3);
   position: fixed;
   inset: 0;
   z-index: calc(var(--va-z-overlay) - 1);

package/client/composables/helper/index.ts

@@ -0,0 +1,2 @@
+export * from './useInvisibleElement'
+export * from './useScreenSize'

package/client/composables/helper/useScreenSize.ts

@@ -0,0 +1,22 @@
+import { useMediaQuery } from '@vueuse/core'
+
+/**
+ * breakpoints ref https://tailwindcss.com/docs/screens
+ */
+export function useScreenSize() {
+  const isXs = useMediaQuery('(max-width: 639px)')
+  const isSm = useMediaQuery('(min-width: 640px)')
+  const isMd = useMediaQuery('(min-width: 768px)')
+  const isLg = useMediaQuery('(min-width: 1024px)')
+  const isXl = useMediaQuery('(min-width: 1280px)')
+  const is2xl = useMediaQuery('(min-width: 1536px)')
+
+  return {
+    isXs,
+    isSm,
+    isMd,
+    isLg,
+    isXl,
+    is2xl,
+  }
+}

package/client/composables/outline/anchor.ts

@@ -1,12 +1,29 @@
 import type { Ref } from 'vue'
 import { onMounted, onUnmounted, onUpdated } from 'vue'
+import { resolvedHeaders } from '@valaxyjs/utils'
 import { throttleAndDebounce } from '../../utils'
 import { useAside } from '../aside'
 
 // magic number to avoid repeated retrieval
-const PAGE_OFFSET = 56
+const PAGE_OFFSET = 130
 const topOffset = 33
 
+function getAbsoluteTop(element: HTMLElement): number {
+  let offsetTop = 0
+  while (element !== document.body) {
+    if (element === null) {
+      // child element is:
+      // - not attached to the DOM (display: none)
+      // - set to fixed position (not scrollable)
+      // - body or html element (null offsetParent)
+      return Number.NaN
+    }
+    offsetTop += element.offsetTop
+    element = element.offsetParent as HTMLElement
+  }
+  return offsetTop
+}
+
 export function useActiveAnchor(
   container: Ref<HTMLElement>,
   marker: Ref<HTMLElement>,
@@ -30,63 +47,70 @@ export function useActiveAnchor(
     window.removeEventListener('scroll', onScroll)
   })
 
-  function setActiveLink() {
-    if (!isAsideEnabled.value)
+  const checkActiveLinkInViewport = () => {
+    const activeLink = prevActiveLink
+    if (!activeLink) {
+      // container.value.scrollIntoView({ behavior: 'smooth', block: 'start' })
       return
+    }
 
-    const links = [].slice.call(
-      container.value.querySelectorAll('.outline-link'),
-    ) as HTMLAnchorElement[]
+    const top = activeLink.getBoundingClientRect().top
+    const bottom = activeLink.getBoundingClientRect().bottom
+
+    const parentEl = document.querySelector('.yun-aside') as HTMLElement
+    if (parentEl) {
+      if (top < parentEl.scrollTop)
+        parentEl.scrollTo({ top: 0, behavior: 'smooth' })
+      if (bottom > parentEl.offsetHeight + parentEl.scrollTop)
+        parentEl.scrollTo({ top: bottom + 40, behavior: 'smooth' })
+    }
+  }
 
-    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[]
+  function setActiveLink() {
+    if (!isAsideEnabled.value)
+      return
 
     const scrollY = window.scrollY
     const innerHeight = window.innerHeight
     const offsetHeight = document.body.offsetHeight
     const isBottom = Math.abs(scrollY + innerHeight - offsetHeight) < 1
 
-    // page bottom - highlight last one
-    if (anchors.length && isBottom) {
-      activateLink(anchors[anchors.length - 1].hash)
-      // activateLink(null)
+    // resolvedHeaders may be repositioned, hidden or fix positioned
+    const headers = resolvedHeaders
+      .map(({ element, link }) => ({
+        link,
+        top: getAbsoluteTop(element),
+      }))
+      .filter(({ top }) => !Number.isNaN(top))
+      .sort((a, b) => a.top - b.top)
+
+    // no headers available for active link
+    if (!headers.length) {
+      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) {
-        activateLink(hash)
-        return
-      }
+    // page top
+    if (scrollY < 1) {
+      activateLink(null)
+      return
     }
-  }
 
-  const checkActiveLinkInViewport = () => {
-    const activeLink = prevActiveLink
-    if (!activeLink) {
-      // container.value.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    // page bottom - highlight last link
+    if (isBottom) {
+      activateLink(headers[headers.length - 1].link)
       return
     }
 
-    const top = activeLink.getBoundingClientRect().top
-    const bottom = activeLink.getBoundingClientRect().bottom
+    // find the last header above the top of viewport
+    let activeLink: string | null = null
+    for (const { link, top } of headers) {
+      if (top > scrollY + 4 + PAGE_OFFSET)
+        break
 
-    if (top < topOffset || bottom > window.innerHeight - topOffset)
-      activeLink.scrollIntoView()
+      activeLink = link
+    }
+    activateLink(activeLink)
   }
 
   function activateLink(hash: string | null) {
@@ -116,26 +140,3 @@ export function useActiveAnchor(
     }
   }
 }
-
-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/client/composables/post/index.ts

@@ -6,6 +6,7 @@ import { sortByDate } from '../../utils'
 import { useRouterStore } from '../../stores'
 
 export * from './usePrevNext'
+export * from './usePagination'
 
 export function usePostTitle(post: ComputedRef<Post>) {
   const { locale } = useI18n()

package/client/composables/post/usePagination.ts

@@ -0,0 +1,65 @@
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function usePagination(options: {
+  /**
+   * Post 总数
+   */
+  total: number
+  /**
+   * 每页数量
+   */
+  pageSize: number
+}) {
+  const route = useRoute()
+  const curPage = computed<number>(() => Number.parseInt((route.params as { page: string }).page || '1'))
+
+  const totalPages = computed(() => Math.ceil(options.total / options.pageSize))
+
+  /**
+   * 围绕的长度
+   */
+  const surLen = computed(() => {
+    if (curPage.value === 1 || curPage.value === totalPages.value)
+      return 3
+    else
+      return 2
+  })
+
+  function showPage(i: number) {
+    if (i === 1)
+      return true
+    else if (i === totalPages.value)
+      return true
+    return i > curPage.value - surLen.value && i < curPage.value + surLen.value
+  }
+
+  function getTo(i: number) {
+    if (i === 1)
+      return '/'
+    else return `/page/${i}`
+  }
+
+  const prevTo = computed(() => {
+    return getTo(curPage.value - 1)
+  })
+  const nextTo = computed(() => {
+    return getTo(curPage.value + 1)
+  })
+
+  const showPrev = computed(() => curPage.value > 1)
+  const showNext = computed(() => curPage.value < totalPages.value)
+
+  return {
+    curPage,
+    totalPages,
+    showPage,
+    surLen,
+
+    getTo,
+    prevTo,
+    nextTo,
+    showPrev,
+    showNext,
+  }
+}

package/client/composables/sidebar.ts

@@ -1,9 +1,10 @@
-import { computed, ref, watchEffect } from 'vue'
+import { computed, ref } from 'vue'
 import { useFrontmatter } from './common'
-import { useLayout, useMobile } from './layout'
+import { useLayout } from './layout'
 
 /**
  * helper for sidebar
+ * @inner
  */
 export function useSidebar() {
   const isOpen = ref(false)
@@ -37,41 +38,3 @@ export function useSidebar() {
     toggle,
   }
 }
-
-/**
- * dynamic left sidebar logic
- * - sidebar is hidden by default when home or mobile
- * - sidebar is shown by default when not home and not mobile
- * - sidebar can be toggled by user
- */
-export function useDynamicLeftSidebar() {
-  const layout = useLayout()
-  const isMobile = useMobile()
-  const isOpen = ref(isMobile.value ? false : layout.value !== 'home')
-
-  watchEffect(() => {
-    if (isMobile.value)
-      close()
-    else if (layout.value !== 'home')
-      open()
-  })
-
-  function open() {
-    isOpen.value = true
-  }
-
-  function close() {
-    isOpen.value = false
-  }
-
-  function toggle() {
-    isOpen.value ? close() : open()
-  }
-
-  return {
-    isOpen,
-    open,
-    close,
-    toggle,
-  }
-}

package/client/modules/floating-vue.ts

@@ -6,5 +6,13 @@ import type { DefaultTheme, ValaxyConfig } from 'valaxy/types'
 import type { ComputedRef } from 'vue'
 
 export async function install({ app }: ViteSSGContext, config: ComputedRef<ValaxyConfig<DefaultTheme.Config>>) {
-  app.use(FloatingVue, config.value.siteConfig.floatingVue)
+  app.use(FloatingVue, Object.assign({
+    themes: {
+      tooltip: {
+        delay: {
+          show: 0,
+        },
+      },
+    },
+  }, config.value.siteConfig.floatingVue || {}))
 }

package/client/stores/app.ts

@@ -1,5 +1,4 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { useToggle } from '@vueuse/core'
 import { ref } from 'vue'
 import { useMobile, useThemeConfig, useValaxyDark } from 'valaxy'
 
@@ -18,9 +17,6 @@ export const useAppStore = defineStore('app', () => {
   const isMobile = useMobile()
   const showLoading = ref(true)
 
-  // right sidebar with toc
-  const [isRightSidebarOpen, toggleRightSidebar] = useToggle(false)
-
   return {
     isMobile,
     // for dark
@@ -30,9 +26,6 @@ export const useAppStore = defineStore('app', () => {
     toggleDarkWithTransition,
 
     showLoading,
-
-    isRightSidebarOpen,
-    toggleRightSidebar,
   }
 })
 

package/client/styles/common/code.scss

@@ -25,7 +25,7 @@ html:not(.dark) .vp-code-dark {
   }
 }
 
-@media (width <= 639px) {
+@media (width <= 639.9px) {
   .markdown-body li div[class*="language-"] {
     border-radius: 6px 0 0 6px;
   }
@@ -232,7 +232,7 @@ html:not(.dark) .vp-code-dark {
     height: 24px;
     opacity: 1;
     cursor: pointer;
-    background-image: linear-gradient(-180deg,rgba(0,0,0,0) 0%,var(--va-c-bg-dark) 100%);
+    background-image: linear-gradient(-180deg,rgb(0 0 0 / 0) 0%,var(--va-c-bg-dark) 100%);
 
     &::before {
       display: block;

package/client/styles/components/code-group.scss

@@ -5,12 +5,11 @@
 .vp-code-group .tabs {
   position: relative;
   display: flex;
-  margin-right: -24px;
-  margin-left: -24px;
+  margin-right: -1rem;
+  margin-left: -1rem;
   padding: 0 12px;
   background-color: var(--va-code-tab-bg);
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
   box-shadow: inset 0 -1px var(--va-code-tab-divider);
 }
 

package/client/styles/palette.scss

@@ -13,13 +13,13 @@ $palette: map.merge(
     "warning": #f2711c,
 
     "text-light-1": #213547,
-    "text-light-2": rgba(60, 60, 60, 0.7),
-    "text-light-3": rgba(60, 60, 60, 0.33),
-    "text-light-4": rgba(60, 60, 60, 0.18),
-    "text-dark-1": rgba(255 ,255 ,255, 0.87),
-    "text-dark-2": rgba(235 ,235 ,235, 0.6),
-    "text-dark-3": rgba(235 ,235 ,235, 0.38),
-    "text-dark-4": rgba(235 ,235 ,235, 0.18),
+    "text-light-2": rgb(60 60 60 / 0.7),
+    "text-light-3": rgb(60 60 60 / 0.33),
+    "text-light-4": rgb(60 60 60 / 0.18),
+    "text-dark-1": rgb(255 255 255 / 0.87),
+    "text-dark-2": rgb(235 235 235 / 0.6),
+    "text-dark-3": rgb(235 235 235 / 0.38),
+    "text-dark-4": rgb(235 235 235 / 0.18),
   ),
   $palette
 );
@@ -38,7 +38,7 @@ $colors: map.merge(
   (
     "primary-light": color.scale($c-primary, $lightness: 10%),
     "primary-lighter": color.scale($c-primary, $lightness: 20%),
-    "primary-dark": color.scale($c-primary, $lightness: -5%),
+    "primary-dark": color.scale($c-primary, $lightness: -10%),
   ),
   $colors
 );
@@ -70,7 +70,7 @@ $dark: map.merge(
     "c-text-light": #ddd,
     "c-text-lighter": #eee,
     "c-text-dark": rgba(#ebebeb, 0.8),
-    "c-link": map.get($colors, "primary-light"),
+    "c-link": map.get($colors, "primary-lighter"),
   ),
   $dark
 );

package/client/utils/helper.ts

@@ -25,3 +25,10 @@ export function throttleAndDebounce(fn: () => void, delay: number): () => void {
     }
   }
 }
+
+/**
+ * 等待指定时间 (ms)
+ */
+export function sleep(ms: number) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}