vitepress 1.0.0-draft.4 → 1.0.0-draft.5

package/dist/client/theme-default/components/VPDoc.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useData } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'
-import VPDocOutline from './VPDocOutline.vue'
+import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const { page } = useData()
@@ -17,10 +17,17 @@ const pageName = computed(() => {
   <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar }">
     <div class="container">
       <div class="aside">
+        <div class="aside-curtain" />
         <div class="aside-container">
-          <div class="aside-curtain" />
           <div class="aside-content">
-            <VPDocOutline v-if="page.headers" />
+            <VPDocAside>
+              <template #aside-top><slot name="aside-top" /></template>
+              <template #aside-bottom><slot name="aside-bottom" /></template>
+              <template #aside-outline-before><slot name="aside-outline-before" /></template>
+              <template #aside-outline-after><slot name="aside-outline-after" /></template>
+              <template #aside-ads-before><slot name="aside-ads-before" /></template>
+              <template #aside-ads-after><slot name="aside-ads-after" /></template>
+            </VPDocAside>
           </div>
         </div>
       </div>
@@ -52,7 +59,7 @@ const pageName = computed(() => {
 
 @media (min-width: 960px) {
   .VPDoc {
-    padding: 32px 32px 128px;
+    padding: 32px 32px 32px;
   }
 
   .VPDoc:not(.has-sidebar) .container {
@@ -101,44 +108,33 @@ const pageName = computed(() => {
   display: none;
   order: 2;
   flex-grow: 1;
-  flex-shrink: 0;
   padding-left: 32px;
-  min-width: 240px;
-}
-
-@media (min-width: 1440px) {
-  .aside {
-    padding-left: 64px;
-  }
+  width: 100%;
+  max-width: 256px;
 }
 
 .aside-container {
-  position: fixed;
-  top: var(--vp-nav-height-desktop);
-  bottom: 0;
-  padding-top: 32px;
-  width: 208px;
+  position: sticky;
+  top: 0;
+  margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + 32px);
+  max-height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
+  scrollbar-width: none;
 }
 
 .aside-container::-webkit-scrollbar {
   display: none;
 }
 
-@media (min-width: 1440px) {
-  .aside-container {
-    width: 256px;
-  }
-}
-
 .aside-curtain {
   position: fixed;
-  top: var(--vp-nav-height-desktop);
+  bottom: 0;
   z-index: 10;
-  width: 100%;
-  height: 40px;
-  background: linear-gradient(var(--vp-c-bg-content), transparent);
+  width: 224px;
+  height: 88px;
+  background: linear-gradient(transparent, var(--vp-c-bg) 70%);
 }
 
 .aside-content {
@@ -148,11 +144,12 @@ const pageName = computed(() => {
 .content {
   position: relative;
   margin: 0 auto;
+  width: 100%;
 }
 
 @media (min-width: 960px) {
   .content {
-    padding: 0 32px;
+    padding: 0 32px 96px;
   }
 }
 
@@ -164,12 +161,6 @@ const pageName = computed(() => {
   }
 }
 
-@media (min-width: 1440px) {
-  .content {
-    padding-left: 64px;
-  }
-}
-
 .content-container {
   margin: 0 auto;
   max-width: 688px;

package/dist/client/theme-default/components/VPDocAside.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import VPDocAsideOutline from './VPDocAsideOutline.vue'
+import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
+
+const { page, theme } = useData()
+</script>
+
+<template>
+  <div class="VPDocAside">
+    <slot name="aside-top" />
+
+    <slot name="aside-outline-before" />
+    <VPDocAsideOutline v-if="page.headers.length" />
+    <slot name="aside-outline-after" />
+
+    <slot name="aside-ads-before" />
+    <VPDocAsideCarbonAds v-if="theme.carbonAds" />
+    <slot name="aside-ads-after" />
+
+    <slot name="aside-bottom" />
+  </div>
+</template>
+
+<style scoped>
+.VPDocAside :deep(.VPDocAsideOutline + .VPDocAsideSponsors),
+.VPDocAside :deep(.VPDocAsideOutline + .VPDocAsideCarbonAds) {
+  margin-top: 24px;
+}
+
+.VPDocAside :deep(.VPDocAsideSponsors + .VPDocAsideCarbonAds) {
+  margin-top: 16px;
+}
+</style>

package/dist/client/theme-default/components/VPDocAsideCarbonAds.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+
+const VPCarbonAds = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
+  : () => null
+</script>
+
+<template>
+  <div class="VPDocAsideCarbonAds">
+    <VPCarbonAds />
+  </div>
+</template>

package/dist/client/theme-default/components/{VPDocOutline.vue → VPDocAsideOutline.vue}

@@ -28,7 +28,7 @@ function handleClick({ target: el }: Event) {
 </script>
 
 <template>
-  <div class="VPDocOutline" :class="{ 'has-outline': hasOutline }" ref="container">
+  <div class="VPDocAsideOutline" :class="{ 'has-outline': hasOutline }" ref="container">
     <div class="outline-marker" ref="marker" />
 
     <div class="outline-title">On this page</div>
@@ -60,7 +60,7 @@ function handleClick({ target: el }: Event) {
 </template>
 
 <style scoped>
-.VPDocOutline {
+.VPDocAsideOutline {
   position: relative;
   display: none;
   border-left: 1px solid var(--vp-c-divider-light);
@@ -69,7 +69,7 @@ function handleClick({ target: el }: Event) {
   font-weight: 500;
 }
 
-.VPDocOutline.has-outline {
+.VPDocAsideOutline.has-outline {
   display: block;
 }
 

package/dist/client/theme-default/components/VPDocAsideSponsors.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import VPSponsors from './VPSponsors.vue'
+
+export interface Sponsors {
+  tier?: string
+  size?: 'xmini' | 'mini' | 'small'
+  items: Sponsor[]
+}
+
+export interface Sponsor {
+  name: string
+  img: string
+  url: string
+}
+
+defineProps<{
+  tier?: string
+  size?: 'xmini' | 'mini' | 'small'
+  data: Sponsors[] | Sponsor[]
+}>()
+</script>
+
+<template>
+  <div class="VPDocAsideSponsors">
+    <VPSponsors
+      mode="aside"
+      :tier="tier"
+      :size="size"
+      :data="data"
+    />
+  </div>
+</template>

package/dist/client/theme-default/components/VPDocFooter.vue

@@ -44,7 +44,7 @@ const control = usePrevNext()
 }
 
 .edit-link {
-  padding-bottom: 8px;
+  padding-bottom: 14px;
 }
 
 .edit-link-button {

package/dist/client/theme-default/components/VPFlyout.vue

@@ -1,12 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { DefaultTheme } from 'vitepress'
 import { useFlyout } from '../composables/flyout'
 import VPIconChevronDown from './icons/VPIconChevronDown.vue'
 import VPIconMoreHorizontal from './icons/VPIconMoreHorizontal.vue'
 import VPMenu from './VPMenu.vue'
 
-const props = defineProps<{
+defineProps<{
   icon?: any
   button?: string
   label?: string
@@ -141,7 +140,7 @@ function onBlur() {
   transition: opacity 0.25s, visibility 0.25s, transform 0.25s;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 960px) {
   .menu {
     top: calc(var(--vp-nav-height-desktop) / 2 + 20px);
   }

package/dist/client/theme-default/components/VPFooter.vue

@@ -21,7 +21,7 @@ const { hasSidebar } = useSidebar()
   z-index: var(--vp-z-index-footer);
   border-top: 1px solid var(--vp-c-divider-light);
   padding: 32px 24px;
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
 }
 
 .VPFooter.has-sidebar {

package/dist/client/theme-default/components/VPHero.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import VPButton from './VPButton.vue'
 
-interface HeroAction {
+export interface HeroAction {
   theme?: 'brand' | 'alt'
   text: string
   link: string
@@ -56,8 +56,8 @@ defineProps<{
 
 .name,
 .text {
-  line-height: 40px;
-  font-size: 32px;
+  line-height: 48px;
+  font-size: 40px;
   font-weight: 700;
 }
 

package/dist/client/theme-default/components/VPHomeSponsors.vue

@@ -3,13 +3,13 @@ import VPIconHeart from './icons/VPIconHeart.vue'
 import VPButton from './VPButton.vue'
 import VPSponsors from './VPSponsors.vue'
 
-interface Sponsors {
+export interface Sponsors {
   tier: string
   size?: 'medium' | 'big'
   items: Sponsor[]
 }
 
-interface Sponsor {
+export interface Sponsor {
   name: string
   img: string
   url: string
@@ -50,7 +50,7 @@ defineProps<{
 .VPHomeSponsors {
   border-top: 1px solid var(--vp-c-divider-light);
   padding: 88px 24px 96px;
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
 }
 
 .container {

package/dist/client/theme-default/components/VPLink.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { normalizeLink } from '../support/utils'
 import VPIconExternalLink from './icons/VPIconExternalLink.vue'
 
 const props = defineProps<{
@@ -15,7 +16,7 @@ const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
     :is="href ? 'a' : 'span'"
     class="VPLink"
     :class="{ link: href }"
-    :href="href"
+    :href="href ? normalizeLink(href) : undefined"
     :target="isExternal ? '_blank' : undefined"
     :rel="isExternal ? 'noopener noreferrer' : undefined"
   >

package/dist/client/theme-default/components/VPLocalNav.vue

@@ -45,7 +45,7 @@ function scrollToTop() {
   justify-content: space-between;
   border-bottom: 1px solid var(--vp-c-divider-light);
   width: 100%;
-  background-color: var(--vp-c-bg-content);
+  background-color: var(--vp-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
 }
 

package/dist/client/theme-default/components/VPMenu.vue

@@ -22,27 +22,22 @@ defineProps<{
 
 <style scoped>
 .VPMenu {
-  border-radius: 8px;
-  padding: 12px 0;
-  min-width: 192px;
-  border: 1px solid transparent;
-  background: var(--vp-c-bg);
+  border-radius: 12px;
+  padding: 12px;
+  min-width: 128px;
+  border: 1px solid var(--vp-c-divider-light);
+  background-color: var(--vp-c-bg);
   box-shadow: var(--vp-shadow-3);
   transition: background-color 0.5s;
 }
 
 .dark .VPMenu {
-  background: var(--vp-c-bg);
-  box-shadow: var(--vp-shadow-1);
-  border: 1px solid var(--vp-c-divider-light);
-}
-
-.VPMenu :deep(.items) {
-  transition: border-color .5s;
+  box-shadow: var(--vp-shadow-2);
 }
 
 .VPMenu :deep(.group) {
-  padding: 0 0 12px;
+  margin: 0 -12px;
+  padding: 0 12px 12px;
 }
 
 .VPMenu :deep(.group + .group) {

package/dist/client/theme-default/components/VPMenuLink.vue

@@ -15,16 +15,22 @@ defineProps<{
 <style scoped>
 .VPMenuLink {
   display: block;
-  padding: 0 16px;
-  line-height: 28px;
-  font-size: 13px;
+  border-radius: 6px;
+  padding: 0 12px;
+  line-height: 32px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
   white-space: nowrap;
-  transition: color 0.25s;
+  transition: background-color 0.25s, color 0.25s;
 }
 
 .VPMenuLink:hover {
   color: var(--vp-c-brand);
+  background-color: var(--vp-c-bg-mute);
+}
+
+.dark .VPMenuLink:hover {
+  background-color: var(--vp-c-bg-soft);
 }
 </style>

package/dist/client/theme-default/components/VPNav.vue

@@ -1,16 +1,18 @@
 <script setup lang="ts">
 import { provide } from 'vue'
 import { useNav } from '../composables/nav'
+import { useSidebar } from '../composables/sidebar'
 import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
+const { hasSidebar } = useSidebar()
 
 provide('close-screen', closeScreen)
 </script>
 
 <template>
-  <header class="VPNav">
+  <header class="VPNav" :class="{ 'no-sidebar' : !hasSidebar }">
     <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen" />
     <VPNavScreen :open="isScreenOpen" />
   </header>
@@ -29,5 +31,20 @@ provide('close-screen', closeScreen)
   .VPNav {
     position: fixed;
   }
+
+  .VPNav.no-sidebar {
+    backdrop-filter: saturate(50%) blur(8px);
+    -webkit-backdrop-filter: saturate(50%) blur(8px);
+  }
+
+  @supports not (backdrop-filter: saturate(50%) blur(8px)) {
+    .VPNav.no-sidebar {
+      background: rgba(255, 255, 255, 0.95);
+    }
+
+    .dark .VPNav.no-sidebar {
+      background: rgba(36, 36, 36, 0.95);
+    }
+  }
 }
 </style>

package/dist/client/theme-default/components/VPNavBar.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { useSidebar } from '../composables/sidebar'
 import VPNavBarTitle from './VPNavBarTitle.vue'
 import VPNavBarSearch from './VPNavBarSearch.vue'
 import VPNavBarMenu from './VPNavBarMenu.vue'
@@ -15,10 +16,12 @@ defineProps<{
 defineEmits<{
   (e: 'toggle-screen'): void
 }>()
+
+const { hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <div class="VPNavBar">
+  <div class="VPNavBar" :class="{ 'has-sidebar' : hasSidebar }">
     <div class="container">
       <VPNavBarTitle />
 
@@ -60,6 +63,21 @@ defineEmits<{
     height: var(--vp-nav-height-desktop);
     border-bottom: 0;
   }
+
+  .VPNavBar.has-sidebar .content {
+    backdrop-filter: saturate(50%) blur(8px);
+    -webkit-backdrop-filter: saturate(50%) blur(8px);
+  }
+
+  @supports not (backdrop-filter: saturate(50%) blur(8px)) {
+    .VPNavBar.has-sidebar.content {
+      background: rgba(255, 255, 255, 0.95);
+    }
+
+    .dark .VPNavBar.has-sidebar .content {
+      background: rgba(36, 36, 36, 0.95);
+    }
+  }
 }
 
 .container {
@@ -76,12 +94,6 @@ defineEmits<{
   flex-grow: 1;
 }
 
-@media (min-width: 960px) {
-  .content {
-    backdrop-filter: saturate(50%) blur(8px);
-  }
-}
-
 .menu + .translations::before,
 .menu + .appearance::before,
 .menu + .social-links::before,

package/dist/client/theme-default/components/VPNavBarExtra.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { useData } from 'vitepress'
 import VPFlyout from './VPFlyout.vue'
+import VPMenuLink from './VPMenuLink.vue'
 import VPSwitchAppearance from './VPSwitchAppearance.vue'
 import VPSocialLinks from './VPSocialLinks.vue'
 
@@ -10,21 +11,15 @@ const { site, theme } = useData()
 <template>
   <VPFlyout class="VPNavBarExtra" label="extra navigation">
     <div v-if="theme.localeLinks" class="group">
-      <div class="trans">
-        <p class="trans-title">
-          {{ theme.localeLinks.text }}
-        </p>
+      <p class="trans-title">{{ theme.localeLinks.text }}</p>
 
-        <ul class="trans-list">
-          <li v-for="locale in theme.localeLinks.items" :key="locale.link" class="trans-item">
-            <a class="trans-link" :href="locale.link">{{ locale.text }}</a>
-          </li>
-        </ul>
-      </div>
+      <template v-for="locale in theme.localeLinks.items" :key="locale.link">
+        <VPMenuLink :item="locale" />
+      </template>
     </div>
 
     <div v-if="site.appearance" class="group">
-      <div class="item">
+      <div class="item appearance">
         <p class="label">Appearance</p>
         <div class="appearance-action">
           <VPSwitchAppearance />
@@ -33,8 +28,8 @@ const { site, theme } = useData()
     </div>
 
     <div v-if="theme.socialLinks" class="group">
-      <div class="item">
-        <VPSocialLinks class="social-links" :links="theme.socialLinks" />
+      <div class="item social-links">
+        <VPSocialLinks class="social-links-list" :links="theme.socialLinks" />
       </div>
     </div>
   </VPFlyout>
@@ -63,45 +58,29 @@ const { site, theme } = useData()
 }
 
 .trans-title {
-  display: flex;
-  align-items: center;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--vp-c-text-1);
-}
-
-.trans-icon {
-  margin-right: 12px;
-  width: 16px;
-  height: 16px;
-  fill: currentColor;
-}
-
-.trans-list {
-  padding: 2px 0 0 0;
-}
-
-.trans-link {
-  line-height: 28px;
-  font-size: 13px;
+  padding: 0 24px 0 12px;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 700;
   color: var(--vp-c-text-1);
-  transition: color 0.25s;
 }
 
-.trans-link:hover {
-  color: var(--vp-c-brand);
-}
-
-.item {
+.item.appearance,
+.item.social-links {
   display: flex;
   align-items: center;
+  padding: 0 24px;
+}
+
+.item.appearance {
+  min-width: 176px;
 }
 
 .appearance-action {
   margin-right: -2px;
 }
 
-.social-links {
+.social-links-list {
   margin: -4px -8px;
 }
 </style>

package/dist/client/theme-default/components/VPNavBarMenuGroup.vue

@@ -1,18 +1,12 @@
 <script lang="ts" setup>
-import { DefaultTheme, useData } from 'vitepress'
-import { isActive } from '../support/utils'
+import { DefaultTheme } from '../config'
 import VPFlyout from './VPFlyout.vue'
 
 defineProps<{
   item: DefaultTheme.NavItemWithChildren
 }>()
-
-const { page } = useData()
 </script>
 
 <template>
-  <VPFlyout
-    :button="item.text"
-    :items="item.items"
-  />
+  <VPFlyout :button="item.text" :items="item.items" />
 </template>

package/dist/client/theme-default/components/VPNavBarMenuLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { DefaultTheme, useData } from 'vitepress'
+import { useData } from 'vitepress'
 import { isActive } from '../support/utils'
-import { NavItemWithLink } from '../config'
+import { DefaultTheme } from '../config'
 import VPLink from './VPLink.vue'
 
 defineProps<{
@@ -34,7 +34,7 @@ const { page } = useData()
   align-items: center;
   padding: 0 12px;
   line-height: var(--vp-nav-height-mobile);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;

package/dist/client/theme-default/components/VPNavBarSearch.vue

@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import '@docsearch/css'
-import { useData } from 'vitepress'
 import { defineAsyncComponent, ref, onMounted, onUnmounted } from 'vue'
+import { useData } from 'vitepress'
 
-const VPAlgoliaSearchBox = defineAsyncComponent(() => {
-  return import('./VPAlgoliaSearchBox.vue')
-})
+const VPAlgoliaSearchBox = __ALGOLIA__
+  ? defineAsyncComponent(() => import('./VPAlgoliaSearchBox.vue'))
+  : () => null
 
 const { theme } = useData()
 
@@ -161,12 +161,12 @@ function load() {
     padding: 0 10px 0 12px;
     width: 100%;
     height: 40px;
-    background-color: var(--vp-c-bg-sidebar);
+    background-color: var(--vp-c-bg-alt);
   }
 
   .DocSearch-Button:hover {
     border-color: var(--vp-c-brand);
-    background: var(--vp-c-bg-sidebar);
+    background: var(--vp-c-bg-alt);
   }
 }