valaxy-theme-press 1.0.0-beta.2 → 1.0.0-rc.10

package/components/PressAside.vue

@@ -1,34 +1,192 @@
 <script lang="ts" setup>
-import { useFrontmatter } from 'valaxy'
+import type { MenuItem } from 'valaxy'
+import { onKeyStroke, useEventListener, useMediaQuery, useThrottleFn } from '@vueuse/core'
+import { onContentUpdated, useFrontmatter, useOutline } from 'valaxy'
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { usePressAppStore } from '../stores/app'
 import PressOutline from './PressOutline.vue'
 
 const frontmatter = useFrontmatter()
 const press = usePressAppStore()
+const { headers } = useOutline()
+const { t } = useI18n()
+const isOverlayAside = useMediaQuery('(max-width: 1279px)')
+
+const aside = ref<HTMLElement>()
+const trigger = ref<HTMLButtonElement>()
+const currentSection = ref(1)
+const readingProgress = ref(0)
+
+function flattenHeaders(items: MenuItem[]): MenuItem[] {
+  return items.flatMap(item => [
+    item,
+    ...flattenHeaders(item.children || []),
+  ])
+}
+
+const flatHeaders = computed(() => flattenHeaders(headers.value))
+const totalSections = computed(() => flatHeaders.value.length)
+const readingPercent = computed(() => Math.round(readingProgress.value * 100))
+const readingProgressDasharray = computed(() => `${readingProgress.value} ${1 - readingProgress.value}`)
+const triggerLabel = computed(() => t('theme.outlineTriggerLabel', {
+  current: currentSection.value,
+  total: totalSections.value,
+  progress: readingPercent.value,
+}))
+
+function getHeaderElement(link: string) {
+  const hash = link.slice(link.indexOf('#') + 1)
+
+  try {
+    return document.getElementById(decodeURIComponent(hash))
+  }
+  catch {
+    return document.getElementById(hash)
+  }
+}
+
+function updateReadingState() {
+  if (!totalSections.value)
+    return
+
+  const pageOffset = 134
+  let activeSection = 1
+
+  for (const [index, header] of flatHeaders.value.entries()) {
+    const element = getHeaderElement(header.link)
+
+    if (element && element.getBoundingClientRect().top <= pageOffset)
+      activeSection = index + 1
+  }
+
+  const scrollContainer = document.scrollingElement || document.documentElement
+  const scrollableHeight = scrollContainer.scrollHeight - scrollContainer.clientHeight
+  const scrollTop = scrollContainer.scrollTop
+  const isAtEnd = scrollableHeight - scrollTop <= 1
+
+  currentSection.value = activeSection
+
+  if (scrollableHeight <= 0 || isAtEnd) {
+    readingProgress.value = 1
+    return
+  }
+
+  readingProgress.value = Math.min(1, Math.max(0, scrollTop / scrollableHeight))
+}
+
+const updateReadingStateThrottled = useThrottleFn(updateReadingState, 80, true)
+
+function closeAside(restoreFocus = false) {
+  if (!press.rightSidebar.isOpen)
+    return
+
+  press.rightSidebar.toggle(false)
+
+  if (restoreFocus)
+    nextTick(() => trigger.value?.focus())
+}
+
+function toggleAside() {
+  const shouldOpen = !press.rightSidebar.isOpen
+  press.rightSidebar.toggle(shouldOpen)
+
+  if (shouldOpen) {
+    nextTick(() => {
+      const links = aside.value?.querySelectorAll<HTMLElement>('.outline-link')
+      links?.item(currentSection.value - 1)?.focus()
+    })
+  }
+}
+
+function onAsideClick(event: MouseEvent) {
+  if ((event.target as HTMLElement).closest('.outline-link'))
+    closeAside()
+}
+
+onKeyStroke('Escape', () => closeAside(true))
+useEventListener('scroll', updateReadingStateThrottled, { passive: true })
+useEventListener('resize', updateReadingStateThrottled)
+onMounted(() => nextTick(updateReadingState))
+onContentUpdated(() => {
+  closeAside()
+  nextTick(updateReadingState)
+})
 </script>
 
 <template>
   <button
-    class="toc-btn shadow-lg fixed press-icon-btn z-99 lt-md:hidden! xl:hidden!"
-    right="5" bottom="24"
-    @click="press.rightSidebar.toggle()"
+    v-if="frontmatter.toc !== false && headers.length"
+    ref="trigger"
+    type="button"
+    class="toc-btn lt-md:hidden! xl:hidden!"
+    :class="{ active: press.rightSidebar.isOpen }"
+    :aria-label="triggerLabel"
+    :aria-expanded="press.rightSidebar.isOpen"
+    aria-controls="press-page-outline"
+    @click="toggleAside"
   >
-    <div i-ri-file-list-line />
+    <svg
+      class="toc-progress"
+      viewBox="0 0 100 48"
+      preserveAspectRatio="none"
+      aria-hidden="true"
+    >
+      <rect
+        class="toc-progress-track"
+        x="1"
+        y="1"
+        width="98"
+        height="46"
+        rx="23"
+        pathLength="100"
+      />
+      <rect
+        v-show="readingProgress > 0 && readingProgress < 1"
+        class="toc-progress-value"
+        x="1"
+        y="1"
+        width="98"
+        height="46"
+        rx="23"
+        pathLength="1"
+        :stroke-dasharray="readingProgressDasharray"
+      />
+    </svg>
+    <span
+      v-show="readingProgress >= 1"
+      class="toc-progress-complete"
+      aria-hidden="true"
+    />
+    <span i-ri-list-unordered aria-hidden="true" />
+    <span class="toc-label">{{ t('theme.outlineButtonLabel') }}</span>
   </button>
 
-  <ValaxyOverlay :show="press.rightSidebar.isOpen" @click="press.rightSidebar.toggle()" />
+  <ValaxyOverlay :show="press.rightSidebar.isOpen" @click="closeAside(true)" />
 
   <aside
-    class="press-aside lt-xl:fixed shadow xl:(shadow-none hover:shadow-none) hover:shadow-lg"
+    id="press-page-outline"
+    ref="aside"
+    class="press-aside lt-xl:fixed"
     flex="~ col grow"
     p="l-0 xl:l-8" text="center"
     z="$"
+    :aria-label="t('theme.outlineTitle')"
+    :aria-hidden="isOverlayAside && !press.rightSidebar.isOpen ? 'true' : undefined"
+    :aria-modal="isOverlayAside && press.rightSidebar.isOpen ? 'true' : undefined"
     :class="press.rightSidebar.isOpen && 'open'"
+    :inert="isOverlayAside && !press.rightSidebar.isOpen"
+    :role="isOverlayAside ? 'dialog' : undefined"
+    @click="onAsideClick"
   >
     <div class="aside-curtain" />
     <div class="aside-container lt-xl:fixed" flex="~ col">
       <div class="aside-content overflow-auto" flex="~ col">
-        <PressOutline v-if="frontmatter.toc !== false" />
+        <PressOutline
+          v-if="frontmatter.toc !== false"
+          :closable="isOverlayAside"
+          @close="closeAside(true)"
+        />
         <div class="flex-grow" />
         <div v-if="$slots.default" class="custom-container">
           <slot />
@@ -46,7 +204,8 @@ const press = usePressAppStore()
   bottom: 0;
   right: 0;
   z-index: var(--pr-z-aside);
-  width: var(--va-aside-width);
+  width: min(320px, calc(100vw - 24px));
+  box-shadow: -12px 0 40px rgb(0 0 0 / 0.12);
   transform: translateX(100%);
   transition: box-shadow var(--va-transition-duration), opacity var(--va-transition-duration),
   transform var(--va-transition-duration) cubic-bezier(0.19, 1, 0.22, 1);
@@ -64,6 +223,7 @@ const press = usePressAppStore()
   top: 0;
   margin-top: calc(var(--pr-nav-height) * -1 - 20px);
   padding-top: calc(var(--pr-nav-height) + 20px);
+  width: 100%;
   height: 100vh;
   background-color: var(--va-c-bg);
 }
@@ -72,7 +232,7 @@ const press = usePressAppStore()
   position: fixed;
   bottom: 0;
   z-index: 10;
-  width: 220px;
+  width: 100%;
   height: 32px;
   background: linear-gradient(transparent,var(--va-c-bg) 70%);
 }
@@ -83,12 +243,113 @@ const press = usePressAppStore()
   }
 
   .press-aside {
+    width: var(--va-aside-width);
+    box-shadow: none;
     transform: translateX(0);
   }
 }
 
 .toc-btn {
-  color: var(--va-c-bg);
-  background-color: var(--va-c-primary);
+  position: fixed;
+  right: max(20px, env(safe-area-inset-right));
+  bottom: max(24px, calc(env(safe-area-inset-bottom) + 20px));
+  z-index: calc(var(--pr-z-backdrop) - 1);
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 0;
+  border-radius: 999px;
+  padding: 0 14px 0 13px;
+  min-width: 48px;
+  height: 48px;
+  color: var(--pr-c-text-1);
+  background-color: var(--va-c-bg-elevated);
+  box-shadow: 0 4px 14px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06);
+  transition:
+    box-shadow var(--va-transition-duration),
+    color var(--va-transition-duration),
+    transform var(--va-transition-duration);
+
+  &:focus-visible {
+    outline: 2px solid var(--va-c-brand);
+    outline-offset: 3px;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  > [class*='i-ri-'] {
+    position: relative;
+    z-index: 1;
+    flex: none;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+.toc-label {
+  position: relative;
+  z-index: 1;
+  letter-spacing: 0.01em;
+  line-height: 1;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.toc-progress {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.toc-progress-track,
+.toc-progress-value {
+  fill: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.toc-progress-track {
+  stroke: color-mix(in srgb, var(--pr-c-text-2) 24%, transparent);
+  stroke-width: 1px;
+  transition: stroke var(--va-transition-duration);
+}
+
+.toc-progress-value {
+  stroke: var(--va-c-brand);
+  stroke-width: 2px;
+  stroke-linecap: round;
+  transition: stroke-dasharray 120ms linear;
+}
+
+.toc-progress-complete {
+  position: absolute;
+  inset: 0;
+  border: 2px solid var(--va-c-brand);
+  border-radius: inherit;
+  pointer-events: none;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .toc-btn:hover {
+    color: var(--va-c-brand);
+    box-shadow: 0 6px 18px rgb(0 0 0 / 0.1), 0 1px 4px rgb(0 0 0 / 0.08);
+    transform: translateY(-1px);
+  }
+
+  .toc-btn:hover .toc-progress-track {
+    stroke: color-mix(in srgb, var(--va-c-brand) 40%, var(--pr-c-text-2));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .toc-btn,
+  .toc-progress-value {
+    transition: none;
+  }
 }
 </style>

package/components/PressFooter.vue

@@ -48,6 +48,11 @@ const { hasSidebar } = useSidebar()
   color: var(--va-c-text-lighter);
 }
 
+.press-footer :deep(a) {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .message   { order: 2; }
 .copyright { order: 1; }
 </style>

package/components/PressFuseSearchModal.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { isClient, useScrollLock } from '@vueuse/core'
-import MarkdownIt from 'markdown-it'
+import { createMarkdownExit } from 'markdown-exit'
 import { useFuseSearch } from 'valaxy'
 import { nextTick, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -11,7 +11,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['close'])
 
-const md = new MarkdownIt({
+const md = createMarkdownExit({
   html: true,
   linkify: true,
 })
@@ -55,7 +55,7 @@ function getResultKey(title: string | Record<string, string>): string {
 </script>
 
 <template>
-  <Teleport to="body">
+  <Teleport to="#valaxy-teleports">
     <Transition
       name="modal"
       @enter="isLocked = true"

package/components/PressGetStarted.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useSiteConfig, withBase } from 'valaxy'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 defineProps<{
@@ -8,6 +10,10 @@ defineProps<{
 }>()
 
 const { t } = useI18n()
+const siteConfig = useSiteConfig()
+const iconStyle = computed(() => ({
+  maskImage: `url("${withBase(siteConfig.value.favicon)}")`,
+}))
 </script>
 
 <template>
@@ -19,7 +25,7 @@ const { t } = useI18n()
   >
     <div class="flex justify-center items-center">
       <div class="svg-wrapper">
-        <div class="icon" />
+        <div class="icon" :style="iconStyle" />
       </div>
       <span>
         {{ t(text) }}
@@ -48,8 +54,6 @@ const { t } = useI18n()
     transform-origin: center center;
     transition: all var(--va-transition-duration) ease-in-out;
 
-    // mask
-    mask-image: url('/favicon.svg');
     mask-size: 100% 100%;
     background-color: white;
     width: 1.2em;

package/components/PressHomeHero.vue

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
+import type { Hero } from '../types'
 import { useFrontmatter } from 'valaxy'
 import { computed } from 'vue'
 import { useLocaleConfig } from '../composables'
 import PressButton from './PressButton.vue'
 
 const fm = useFrontmatter()
+const hero = computed(() => fm.value.hero as Hero | undefined)
 
 const { currentLocale, currentLocaleKey, hasLocales } = useLocaleConfig()
 
@@ -20,7 +22,7 @@ function resolveLocaleLink(link: string): string {
 }
 
 const actions = computed(() => {
-  return (fm.value.hero?.actions || []).map((action: any) => ({
+  return (hero.value?.actions || []).map(action => ({
     ...action,
     link: resolveLocaleLink(action.link),
   }))
@@ -28,20 +30,23 @@ const actions = computed(() => {
 </script>
 
 <template>
-  <template v-if="fm.hero">
+  <template v-if="hero">
     <div text="center" m="md:t-24 t-10 md:t-20" flex="~ col" justify="center" items="center">
-      <ValaxyLogo mb="2" />
+      <div v-if="hero.image" class="press-hero-image" mb="2">
+        <div class="press-hero-image-bg" />
+        <PressImage class="fly-animation h-50" :image="hero.image" />
+      </div>
       <h1 my="10" text="4xl md:8xl" font="black" class="gradient-text from-purple-800 to-blue-500 bg-gradient-to-r">
-        {{ fm.hero.name }}
+        {{ hero.name }}
       </h1>
     </div>
 
-    <h2 v-if="fm.hero?.text" flex="~ wrap justify-center" px="2" m="b-10" text="center 6xl" font="black" leading="tight">
-      {{ fm.hero.text }}
+    <h2 v-if="hero.text" flex="~ wrap justify-center" px="2" m="b-10" text="center 6xl" font="black" leading="tight">
+      {{ hero.text }}
     </h2>
 
-    <p v-if="fm.hero?.tagline" m="b-10" text="center xl" op="80">
-      {{ fm.hero.tagline }}
+    <p v-if="hero.tagline" m="b-10" text="center xl" op="80">
+      {{ hero.tagline }}
     </p>
 
     <div v-if="actions.length" p="2" text="center" class="flex justify-center items-center">
@@ -64,3 +69,35 @@ const actions = computed(() => {
     <br>
   </template>
 </template>
+
+<style scoped>
+.press-hero-image {
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.press-hero-image-bg {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(72px);
+  width: 150%;
+  height: 150%;
+  background-image: linear-gradient(-45deg, rgb(108 34 236) 50%, rgb(59 130 246) 50%);
+  opacity: 0.3;
+  transition: opacity var(--va-transition-duration-fast);
+}
+
+.press-hero-image:hover .press-hero-image-bg {
+  opacity: 0.4;
+}
+
+.press-hero-image :deep(img) {
+  position: relative;
+  z-index: 1;
+  margin: auto;
+  width: auto;
+  object-fit: contain;
+}
+</style>

package/components/PressImage.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ThemeableImage } from '../types'
+import { withBase } from 'valaxy'
+
+defineOptions({ inheritAttrs: false })
+
+defineProps<{
+  image: ThemeableImage
+  alt?: string
+}>()
+</script>
+
+<template>
+  <template v-if="image">
+    <img
+      v-if="typeof image === 'string' || 'src' in image"
+      v-bind="typeof image === 'string' ? $attrs : { ...image, ...$attrs }"
+      :src="withBase(typeof image === 'string' ? image : image.src)"
+      :alt="alt ?? (typeof image === 'string' ? '' : image.alt || '')"
+    >
+    <template v-else>
+      <PressImage
+        class="dark"
+        :image="image.dark"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+      <PressImage
+        class="light"
+        :image="image.light"
+        :alt="image.alt"
+        v-bind="$attrs"
+      />
+    </template>
+  </template>
+</template>
+
+<style scoped>
+html:not(.dark) img.dark {
+  display: none;
+}
+
+.dark img.light {
+  display: none;
+}
+</style>

package/components/PressLocalNav.vue

@@ -31,6 +31,7 @@ const { headers } = useOutline()
 <template>
   <div v-if="hasSidebar" class="press-local-nav">
     <button
+      type="button"
       class="menu"
       :aria-expanded="open"
       aria-controls="pr-sidebar-nav"

package/components/PressLocalNavOutlineDropdown.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { MenuItem } from 'valaxy'
+import { onClickOutside } from '@vueuse/core'
 import { onContentUpdated } from 'valaxy'
 import { nextTick, ref } from 'vue'
 
@@ -12,31 +13,31 @@ const props = defineProps<{
 
 const open = ref(false)
 const vh = ref(0)
+const dropdown = ref<HTMLDivElement>()
 const items = ref<HTMLDivElement>()
 
-onContentUpdated(() => {
+function close() {
   open.value = false
-})
+}
+
+onClickOutside(dropdown, close)
+onContentUpdated(close)
 
 function toggle() {
   open.value = !open.value
   vh.value = window.innerHeight + Math.min(window.scrollY - props.navHeight, 0)
 }
 
-function onItemClick(e: Event) {
-  if ((e.target as HTMLElement).classList.contains('outline-link')) {
-    // disable animation on hash navigation when page jumps
-    if (items.value)
-      items.value.style.transition = 'none'
+function onItemClick() {
+  // disable animation on hash navigation when page jumps
+  if (items.value)
+    items.value.style.transition = 'none'
 
-    nextTick(() => {
-      open.value = false
-    })
-  }
+  nextTick(close)
 }
 
 function scrollToTop() {
-  open.value = false
+  close()
   window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
 }
 
@@ -44,20 +45,32 @@ const { t } = useI18n()
 </script>
 
 <template>
-  <div class="VPLocalNavOutlineDropdown" :style="{ '--vp-vh': `${vh}px` }">
-    <button v-if="headers.length > 0" :class="{ open }" @click="toggle">
+  <div
+    ref="dropdown"
+    class="VPLocalNavOutlineDropdown"
+    :style="{ '--vp-vh': `${vh}px` }"
+    @keydown.esc="close"
+  >
+    <button
+      v-if="headers.length > 0"
+      type="button"
+      :class="{ open }"
+      :aria-expanded="open"
+      aria-controls="press-local-outline"
+      @click="toggle"
+    >
       {{ t('theme.outlineTitle') }}
-      <div i-ri-arrow-right-s-line class="icon" />
+      <span i-ri-arrow-right-s-line class="icon" aria-hidden="true" />
     </button>
-    <button v-else @click="scrollToTop">
+    <button v-else type="button" @click="scrollToTop">
       {{ t('sidebar.return_top') }}
     </button>
     <Transition name="flyout">
       <div
         v-if="open"
+        id="press-local-outline"
         ref="items"
         class="items"
-        @click="onItemClick"
       >
         <div class="header">
           <a class="top-link" href="#" @click="scrollToTop">
@@ -65,7 +78,7 @@ const { t } = useI18n()
           </a>
         </div>
         <div class="py-2 bg-$vp-c-bg-soft">
-          <PressOutlineItem :headers="headers" />
+          <PressOutlineItem :headers="headers" :on-click="onItemClick" />
         </div>
       </div>
     </Transition>

package/components/PressLocalSearchModal.vue

@@ -30,7 +30,7 @@ watch(() => props.open, (val) => {
 </script>
 
 <template>
-  <Teleport to="body">
+  <Teleport to="#valaxy-teleports">
     <Transition
       name="modal"
       @enter="isLocked = true"