vitepress 1.0.0-draft.3 → 1.0.0-draft.6

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useRoute, useData } from 'vitepress'
+import { useCopyCode } from '../composables/copy-code'
 import { useSidebar } from '../composables/sidebar'
 import NotFound from '../NotFound.vue'
 import VPPage from './VPPage.vue'
@@ -9,6 +10,8 @@ import VPDoc from './VPDoc.vue'
 const route = useRoute()
 const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
+
+useCopyCode()
 </script>
 
 <template>
@@ -31,15 +34,23 @@ const { hasSidebar } = useSidebar()
       <template #home-features-after><slot name="home-features-after" /></template>
     </VPHome>
 
-    <VPDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
+    <VPDoc v-else>
+      <template #aside-top><slot name="aside-top" /></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>
+      <template #aside-bottom><slot name="aside-bottom" /></template>
+    </VPDoc>
   </div>
 </template>
 
 <style scoped>
 .VPContent {
   flex-grow: 1;
+  flex-shrink: 0;
   margin: 0 auto;
-  max-width: var(--vp-layout-max-width);
+  width: 100%;
 }
 
 .VPContent.is-home {
@@ -47,12 +58,6 @@ const { hasSidebar } = useSidebar()
   max-width: 100%;
 }
 
-@media (max-width: 768px) {
-  .VPContent {
-    overflow-x: hidden;
-  }
-}
-
 @media (min-width: 960px) {
   .VPContent {
     padding-top: var(--vp-nav-height);
@@ -61,14 +66,13 @@ const { hasSidebar } = useSidebar()
   .VPContent.has-sidebar {
     margin: 0;
     padding-left: var(--vp-sidebar-width);
-    max-width: 100%;
   }
 }
 
 @media (min-width: 1440px) {
   .VPContent.has-sidebar {
     padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useData } from 'vitepress'
-import VPDocOutline from './VPDocOutline.vue'
+import { useSidebar } from '../composables/sidebar'
+import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
 const { page } = useData()
+const { hasSidebar } = useSidebar()
 
 const pageName = computed(() => {
   return page.value.relativePath.slice(0, page.value.relativePath.indexOf('/'))
@@ -12,23 +14,32 @@ const pageName = computed(() => {
 </script>
 
 <template>
-  <div class="VPDoc has-aside">
+  <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>
 
       <div class="content">
-        <main class="main">
-          <Content class="vp-doc" :class="pageName" />
-        </main>
+        <div class="content-container">
+          <main class="main">
+            <Content class="vp-doc" :class="pageName" />
+          </main>
 
-        <VPDocFooter />
+          <VPDocFooter />
+        </div>
       </div>
     </div>
   </div>
@@ -37,6 +48,7 @@ const pageName = computed(() => {
 <style scoped>
 .VPDoc {
   padding: 32px 24px 96px;
+  width: 100%;
 }
 
 @media (min-width: 768px) {
@@ -47,90 +59,82 @@ const pageName = computed(() => {
 
 @media (min-width: 960px) {
   .VPDoc {
-    padding: 32px 64px 96px;
+    padding: 32px 32px 32px;
   }
-}
 
-@media (min-width: 1280px) {
-  .VPDoc {
-    padding: 32px 0 128px 64px;
+  .VPDoc:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
   }
 
-  .VPDoc:not(.has-sidebar.has-aside) {
-    padding-left: calc((100vw - 688px) / 2);
+  .VPDoc:not(.has-sidebar) .aside {
+    display: block;
   }
 
-  .VPDoc.has-aside:not(.has-sidebar) {
-    padding-left: calc((100vw - 688px - 320px) / 2);
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 752px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .VPDoc .container {
+    display: flex;
+    justify-content: center;
   }
 
-  .VPDoc:not(.has-aside) .content {
-    min-width: 688px;
+  .VPDoc .aside {
+    display: block;
   }
 }
 
 @media (min-width: 1440px) {
-  .VPDoc {
-    padding: 32px 0 128px 96px;
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 784px;
   }
-}
 
-@media (min-width: 1280px) {
-  .container {
-    display: flex;
+  .VPDoc:not(.has-sidebar) .container {
+    max-width: 1104px;
   }
 }
 
+.container {
+  margin: 0 auto;
+  width: 100%;
+}
+
 .aside {
   position: relative;
   display: none;
   order: 2;
-  flex-shrink: 0;
   flex-grow: 1;
-  padding-left: 64px;
-  padding-right: 32px;
-  min-width: 320px;
-}
-
-@media (min-width: 1280px) {
-  .aside {
-    display: block;
-  }
-}
-
-@media (min-width: 1440px) {
-  .aside {
-    padding-left: 96px;
-  }
+  padding-left: 32px;
+  width: 100%;
+  max-width: 256px;
 }
 
 .aside-container {
-  position: fixed;
-  top: var(--vp-nav-height-desktop);
-  bottom: 0;
-  padding-top: 32px;
-  width: 224px;
+  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 {
@@ -140,17 +144,28 @@ const pageName = computed(() => {
 .content {
   position: relative;
   margin: 0 auto;
-  max-width: 688px;
+  width: 100%;
+}
+
+@media (min-width: 960px) {
+  .content {
+    padding: 0 32px 96px;
+  }
 }
 
 @media (min-width: 1280px) {
   .content {
     order: 1;
     margin: 0;
-    min-width: 632px;
+    min-width: 640px;
   }
 }
 
+.content-container {
+  margin: 0 auto;
+  max-width: 688px;
+}
+
 .edit-link {
   margin: 0 0 32px;
 }

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}

@@ -1,10 +1,16 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { useData } from 'vitepress'
-import { resolveHeaders, useActiveAnchor } from '../composables/outline'
+import {
+  resolveHeaders,
+  useOutline,
+  useActiveAnchor
+} from '../composables/outline'
 
 const { page, frontmatter } = useData()
 
+const { hasOutline } = useOutline()
+
 const container = ref()
 const marker = ref()
 
@@ -22,7 +28,7 @@ function handleClick({ target: el }: Event) {
 </script>
 
 <template>
-  <div class="VPDocOutline" 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>
@@ -54,14 +60,19 @@ function handleClick({ target: el }: Event) {
 </template>
 
 <style scoped>
-.VPDocOutline {
+.VPDocAsideOutline {
   position: relative;
+  display: none;
   border-left: 1px solid var(--vp-c-divider-light);
   padding-left: 16px;
   font-size: 13px;
   font-weight: 500;
 }
 
+.VPDocAsideOutline.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 {