vitepress 1.0.0-draft.4 → 1.0.0-draft.7

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 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
@@ -101,58 +108,51 @@ 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);
+  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: 32px;
+  background: linear-gradient(transparent, var(--vp-c-bg) 70%);
 }
 
 .aside-content {
-  padding-bottom: 96px;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
+  padding-bottom: 32px;
 }
 
 .content {
   position: relative;
   margin: 0 auto;
+  width: 100%;
 }
 
 @media (min-width: 960px) {
   .content {
-    padding: 0 32px;
+    padding: 0 32px 128px;
   }
 }
 
@@ -164,12 +164,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,46 @@
+<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" />
+
+    <div class="spacer" />
+
+    <slot name="aside-ads-before" />
+    <VPDocAsideCarbonAds v-if="theme.carbonAds" />
+    <slot name="aside-ads-after" />
+
+    <slot name="aside-bottom" />
+  </div>
+</template>
+
+<style scoped>
+.VPDocAside {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.VPDocAside :deep(.spacer + .VPDocAsideSponsors),
+.VPDocAside :deep(.spacer + .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,51 +28,56 @@ function handleClick({ target: el }: Event) {
 </script>
 
 <template>
-  <div class="VPDocOutline" :class="{ 'has-outline': hasOutline }" ref="container">
-    <div class="outline-marker" ref="marker" />
-
-    <div class="outline-title">On this page</div>
-
-    <nav aria-labelledby="doc-outline-aria-label">
-      <span class="visually-hidden" id="doc-outline-aria-label">
-        Table of Contents for current page
-      </span>
-
-      <ul class="root">
-        <li
-          v-for="{ text, link, children, hidden } in resolvedHeaders"
-          v-show="!hidden"
-        >
-          <a class="outline-link" :href="link" @click="handleClick">
-            {{ text }}
-          </a>
-          <ul v-if="children && frontmatter.outline === 'deep'">
-            <li v-for="{ text, link, hidden } in children" v-show="!hidden">
-              <a class="outline-link nested" :href="link" @click="handleClick">
-                {{ text }}
-              </a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
+  <div class="VPDocAsideOutline" :class="{ 'has-outline': hasOutline }" ref="container">
+    <div class="content">
+      <div class="outline-marker" ref="marker" />
+
+      <div class="outline-title">On this page</div>
+
+      <nav aria-labelledby="doc-outline-aria-label">
+        <span class="visually-hidden" id="doc-outline-aria-label">
+          Table of Contents for current page
+        </span>
+
+        <ul class="root">
+          <li
+            v-for="{ text, link, children, hidden } in resolvedHeaders"
+            v-show="!hidden"
+          >
+            <a class="outline-link" :href="link" @click="handleClick">
+              {{ text }}
+            </a>
+            <ul v-if="children && frontmatter.outline === 'deep'">
+              <li v-for="{ text, link, hidden } in children" v-show="!hidden">
+                <a class="outline-link nested" :href="link" @click="handleClick">
+                  {{ text }}
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.VPDocOutline {
-  position: relative;
+.VPDocAsideOutline {
   display: none;
+}
+
+.VPDocAsideOutline.has-outline {
+  display: block;
+}
+
+.content {
+  position: relative;
   border-left: 1px solid var(--vp-c-divider-light);
   padding-left: 16px;
   font-size: 13px;
   font-weight: 500;
 }
 
-.VPDocOutline.has-outline {
-  display: block;
-}
-
 .outline-marker {
   position: absolute;
   top: 32px;

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,36 +1,51 @@
 <script setup lang="ts">
 import VPButton from './VPButton.vue'
 
-interface HeroAction {
+export interface HeroAction {
   theme?: 'brand' | 'alt'
   text: string
   link: string
 }
 
+export interface Image {
+  light: string
+  dark: string
+}
+
 defineProps<{
   name?: string
   text: string
   tagline?: string
+  image?: Image
   actions?: HeroAction[]
 }>()
 </script>
 
 <template>
-  <div class="VPHero">
+  <div class="VPHero" :class="{ 'has-image': image }">
     <div class="container">
-      <p v-if="name" class="name"><span class="clip">{{ name }}</span></p>
-      <h1 v-if="text" class="text">{{ text }}</h1>
-      <p v-if="tagline" class="tagline">{{ tagline }}</p>
-
-      <div v-if="actions" class="actions">
-        <div v-for="action in actions" :key="action.link" class="action">
-          <VPButton
-            tag="a"
-            size="big"
-            :theme="action.theme"
-            :text="action.text"
-            :href="action.link"
-          />
+      <div class="main">
+        <p v-if="name" class="name"><span class="clip">{{ name }}</span></p>
+        <h1 v-if="text" class="text">{{ text }}</h1>
+        <p v-if="tagline" class="tagline">{{ tagline }}</p>
+
+        <div v-if="actions" class="actions">
+          <div v-for="action in actions" :key="action.link" class="action">
+            <VPButton
+              tag="a"
+              size="medium"
+              :theme="action.theme"
+              :text="action.text"
+              :href="action.link"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div v-if="image" class="image">
+        <div class="image-container">
+          <img class="image-src light" :src="image.light">
+          <img class="image-src dark" :src="image.dark">
         </div>
       </div>
     </div>
@@ -41,6 +56,7 @@ defineProps<{
 .VPHero {
   margin-top: calc(var(--vp-nav-height) * -1);
   padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+  overflow: hidden;
 }
 
 @media (min-width: 640px) {
@@ -50,66 +66,113 @@ defineProps<{
 }
 
 .container {
+  display: flex;
+  flex-direction: column;
   margin: 0 auto;
   max-width: 960px;
 }
 
+@media (min-width: 960px) {
+  .container {
+    flex-direction: row;
+  }
+}
+
+.main {
+  position: relative;
+  z-index: 10;
+  order: 2;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.VPHero.has-image .container {
+  text-align: center;
+}
+
+@media (min-width: 960px) {
+  .VPHero.has-image .container {
+    text-align: left;
+  }
+}
+
+@media (min-width: 960px) {
+  .main {
+    order: 1;
+  }
+}
+
+@media (min-width: 960px) {
+  .main {
+    width: 100%;
+    max-width: calc((100% / 3) * 2);
+  }
+}
+
 .name,
 .text {
+  max-width: 392px;
+  letter-spacing: -0.4px;
   line-height: 40px;
   font-size: 32px;
   font-weight: 700;
 }
 
+.VPHero.has-image .name,
+.VPHero.has-image .text {
+  margin: 0 auto;
+}
+
 .name {
-  padding-bottom: 4px;
   color: var(--vp-home-hero-name-color);
 }
 
 .clip {
   background: var(--vp-home-hero-name-background);
-  -webkit-text-fill-color: var(--vp-home-hero-name-color);
   -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: var(--vp-home-hero-name-color);
 }
 
 @media (min-width: 640px) {
   .name,
   .text {
-    max-width: 640px;
+    max-width: 576px;
     line-height: 56px;
     font-size: 48px;
   }
-
-  .name {
-    padding-bottom: 6px;
-  }
 }
 
 @media (min-width: 960px) {
   .name,
   .text {
-    max-width: 720px;
     line-height: 64px;
     font-size: 56px;
   }
 
-  .name {
-    padding-bottom: 6px;
+  .VPHero.has-image .name,
+  .VPHero.has-image .text {
+    margin: 0;
   }
 }
 
 .tagline {
   padding-top: 16px;
+  max-width: 392px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
+.VPHero.has-image .tagline {
+  margin: 0 auto;
+}
+
 @media (min-width: 640px) {
   .tagline {
     padding-top: 24px;
-    max-width: 540px;
+    max-width: 576px;
     line-height: 32px;
     font-size: 20px;
   }
@@ -118,27 +181,105 @@ defineProps<{
 @media (min-width: 960px) {
   .tagline {
     padding-top: 24px;
-    max-width: 640px;
     line-height: 36px;
     font-size: 24px;
   }
+
+  .VPHero.has-image .tagline {
+    margin: 0;
+  }
 }
 
 .actions {
   display: flex;
   flex-wrap: wrap;
-  margin: -8px;
+  margin: -6px;
   padding-top: 24px;
 }
 
+.VPHero.has-image .actions {
+  justify-content: center;
+}
+
 @media (min-width: 640px) {
   .actions {
     padding-top: 32px;
   }
 }
 
+@media (min-width: 960px) {
+  .VPHero.has-image .actions {
+    justify-content: flex-start;
+  }
+}
+
 .action {
   flex-shrink: 0;
-  padding: 8px;
+  padding: 6px;
+}
+
+.image {
+  order: 1;
+  margin: -76px -24px -48px;
+}
+
+@media (min-width: 640px) {
+  .image {
+    margin: -108px -24px -48px;
+  }
+}
+
+.image-container {
+  position: relative;
+  margin: 0 auto;
+  width: 320px;
+  height: 320px;
+}
+
+@media (min-width: 640px) {
+  .image-container {
+    width: 392px;
+    height: 392px;
+  }
+}
+
+.image-src {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 392px;
+  transform: translate(-50%, -50%);
+}
+
+.image-src.light { opacity: 1; }
+.image-src.dark  { opacity: 0; }
+
+.dark .image-src.light { opacity: 0; }
+.dark .image-src.dark  { opacity: 1; }
+
+@media (min-width: 640px) {
+  .image-src {
+    max-width: 512px;
+    transform: translate(-50%, -50%);
+  }
+}
+
+@media (min-width: 960px) {
+  .image {
+    order: 2;
+    margin: -8px 0;
+    width: calc(100% / 3);
+    min-height: 100%;
+  }
+
+  .image-container {
+    width: 100%;
+    height: 100%;
+  }
+
+  .image-src {
+    max-width: 640px;
+    transform: translate(calc(-50% - 32px), calc(-50% - 32px));
+  }
 }
 </style>

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

@@ -42,6 +42,7 @@ const grid = computed(() => {
 
 <style scoped>
 .VPHomeFeatures {
+  position: relative;
   padding: 0 24px;
 }
 

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

@@ -11,6 +11,7 @@ const { frontmatter: fm } = useData()
       :name="fm.hero.name"
       :text="fm.hero.text"
       :tagline="fm.hero.tagline"
+      :image="fm.hero.image"
       :actions="fm.hero.actions"
     />
   </div>