vitepress 1.0.0-draft.1 → 1.0.0-draft.2

package/dist/client/index.d.ts

@@ -68,17 +68,22 @@ export declare interface Router {
 
 export declare interface SiteData<ThemeConfig = any> {
     base: string
+
     /**
      * Language of the site as it should be set on the `html` element.
+     *
      * @example `en-US`, `zh-CN`
      */
     lang: string
+
     title: string
     description: string
     head: HeadConfig[]
+    appearance: boolean
     themeConfig: ThemeConfig
     scrollOffset: number | string
     locales: Record<string, LocaleConfig>
+
     /**
      * Available locales for the site when it has defined `locales` in its
      * `themeConfig`. This object is otherwise empty. Keys are paths like `/` or

package/dist/client/shared.js

@@ -1,4 +1,5 @@
 export const EXTERNAL_URL_RE = /^https?:/i;
+export const APPEARANCE_KEY = 'vitepress-theme-appearance';
 // @ts-ignore
 export const inBrowser = typeof window !== 'undefined';
 function findMatchRoot(route, roots) {

package/dist/client/theme-default/Layout.vue

@@ -7,6 +7,7 @@ import VPNav from './components/VPNav.vue'
 import VPLocalNav from './components/VPLocalNav.vue'
 import VPSidebar from './components/VPSidebar.vue'
 import VPContent from './components/VPContent.vue'
+import VPFooter from './components/VPFooter.vue'
 
 const {
   isOpen: isSidebarOpen,
@@ -26,6 +27,22 @@ provide('close-sidebar', closeSidebar)
     <VPNav />
     <VPLocalNav :open="isSidebarOpen" @open-menu="openSidebar" />
     <VPSidebar :open="isSidebarOpen" />
-    <VPContent />
+
+    <VPContent>
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+    </VPContent>
+
+    <VPFooter />
   </div>
 </template>
+
+<style scoped>
+.Layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+</style>

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

@@ -17,7 +17,7 @@ defineProps<{
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: var(--vp-z-backdrop);
+  z-index: var(--vp-z-index-backdrop);
   background: rgba(0, 0, 0, .6);
   transition: opacity 0.5s;
 }

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+defineProps<{
+  icon?: string
+  title: string
+  details: string
+}>()
+</script>
+
+<template>
+  <article class="VPBox">
+    <div v-if="icon" class="icon">{{ icon }}</div>
+    <h1 class="title">{{ title }}</h1>
+    <p class="details">{{ details }}</p>
+  </article>
+</template>
+
+<style scoped>
+.VPBox {
+  border: 1px solid var(--vp-c-divider-light);
+  border-radius: 8px;
+  padding: 24px;
+  height: 100%;
+  background-color: var(--vp-c-bg-soft);
+}
+
+.dark .VPBox {
+  background-color: var(--vp-c-bg-mute);
+}
+
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+  border-radius: 6px;
+  background-color: var(--vp-c-gray-light-4);
+  width: 48px;
+  height: 48px;
+  font-size: 24px;
+}
+
+.dark .icon {
+  background-color: var(--vp-c-bg-soft);
+}
+
+.title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.details {
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+</style>

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  tag?: string
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor'
+  text: string
+  href?: string
+}>()
+
+const classes = computed(() => [
+  props.size ?? 'medium',
+  props.theme ?? 'brand'
+])
+
+const isExternal = computed(() => props.href && /^[a-z]+:/i.test(props.href))
+
+const component = computed(() => {
+  if (props.tag) {
+    return props.tag
+  }
+
+  return props.href ? 'a' : 'button'
+})
+</script>
+
+<template>
+  <component
+    :is="component"
+    class="VPButton"
+    :class="classes"
+    :href="href"
+    :target="isExternal ? '_blank' : undefined"
+    :rel="isExternal ? 'noopener noreferrer' : undefined"
+  >
+    {{ text }}
+  </component>
+</template>
+
+<style scoped>
+.VPButton {
+  display: inline-block;
+  border: 1px solid transparent;
+
+  text-align: center;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
+}
+
+.VPButton:active {
+  transition: color 0.1s, border-color 0.1s, background-color 0.1s;
+}
+
+.VPButton.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.VPButton.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.VPButton.brand {
+  border-color: var(--vp-button-brand-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-button-brand-bg);
+}
+
+.VPButton.brand:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  color: var(--vp-button-brand-hover-text);
+  background-color: var(--vp-button-brand-hover-bg);
+}
+
+.VPButton.brand:active {
+  border-color: var(--vp-button-brand-active-border);
+  color: var(--vp-button-brand-active-text);
+  background-color: var(--vp-button-brand-active-bg);
+}
+
+.VPButton.alt {
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+
+.VPButton.alt:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.VPButton.alt:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
+}
+
+.VPButton.sponsor {
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.VPButton.sponsor:hover {
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+
+.VPButton.sponsor:active {
+  border-color: var(--vp-button-sponsor-active-border);
+  color: var(--vp-button-sponsor-active-text);
+  background-color: var(--vp-button-sponsor-active-bg);
+}
+</style>

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

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
+import { useRoute, useData } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'
 import NotFound from '../NotFound.vue'
-import VPContentDoc from './VPContentDoc.vue'
+import VPPage from './VPPage.vue'
+import VPHome from './VPHome.vue'
+import VPDoc from './VPDoc.vue'
 
 const route = useRoute()
+const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
 </script>
 
@@ -12,14 +15,38 @@ const { hasSidebar } = useSidebar()
   <div
     class="VPContent"
     id="VPContent"
-    :class="{ 'has-sidebar': hasSidebar }"
+    :class="{
+      'has-sidebar': hasSidebar,
+      'is-home': frontmatter.layout === 'home'
+    }"
   >
     <NotFound v-if="route.component === NotFound" />
-    <VPContentDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
+
+    <VPPage v-else-if="frontmatter.layout === 'page'" />
+
+    <VPHome v-else-if="frontmatter.layout === 'home'">
+      <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-after><slot name="home-hero-after" /></template>
+      <template #home-features-before><slot name="home-features-before" /></template>
+      <template #home-features-after><slot name="home-features-after" /></template>
+    </VPHome>
+
+    <VPDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
   </div>
 </template>
 
 <style scoped>
+.VPContent {
+  flex-grow: 1;
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+}
+
+.VPContent.is-home {
+  width: 100%;
+  max-width: 100%;
+}
+
 @media (max-width: 768px) {
   .VPContent {
     overflow-x: hidden;
@@ -28,16 +55,19 @@ const { hasSidebar } = useSidebar()
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: var(--vp-nav-height-desktop);
+    padding-top: var(--vp-nav-height);
   }
 
   .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);
   }
 }

package/dist/client/theme-default/components/{VPContentDoc.vue → VPDoc.vue}

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useData } from 'vitepress'
-import VPContentDocOutline from './VPContentDocOutline.vue'
-import VPContentDocFooter from './VPContentDocFooter.vue'
+import VPDocOutline from './VPDocOutline.vue'
+import VPDocFooter from './VPDocFooter.vue'
 
 const { page } = useData()
 
@@ -12,13 +12,13 @@ const pageName = computed(() => {
 </script>
 
 <template>
-  <div class="VPContentDoc has-aside">
+  <div class="VPDoc has-aside">
     <div class="container">
       <div class="aside">
         <div class="aside-container">
           <div class="aside-curtain" />
           <div class="aside-content">
-            <VPContentDocOutline v-if="page.headers" />
+            <VPDocOutline v-if="page.headers" />
           </div>
         </div>
       </div>
@@ -28,49 +28,49 @@ const pageName = computed(() => {
           <Content class="vp-doc" :class="pageName" />
         </main>
 
-        <VPContentDocFooter />
+        <VPDocFooter />
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.VPContentDoc {
+.VPDoc {
   padding: 32px 24px 96px;
 }
 
 @media (min-width: 768px) {
-  .VPContentDoc {
+  .VPDoc {
     padding: 48px 32px 128px;
   }
 }
 
 @media (min-width: 960px) {
-  .VPContentDoc {
+  .VPDoc {
     padding: 32px 64px 96px;
   }
 }
 
 @media (min-width: 1280px) {
-  .VPContentDoc {
+  .VPDoc {
     padding: 32px 0 128px 64px;
   }
 
-  .VPContentDoc:not(.has-sidebar.has-aside) {
+  .VPDoc:not(.has-sidebar.has-aside) {
     padding-left: calc((100vw - 688px) / 2);
   }
 
-  .VPContentDoc.has-aside:not(.has-sidebar) {
+  .VPDoc.has-aside:not(.has-sidebar) {
     padding-left: calc((100vw - 688px - 320px) / 2);
   }
 
-  .VPContentDoc:not(.has-aside) .content {
+  .VPDoc:not(.has-aside) .content {
     min-width: 688px;
   }
 }
 
 @media (min-width: 1440px) {
-  .VPContentDoc {
+  .VPDoc {
     padding: 32px 0 128px 96px;
   }
 }

package/dist/client/theme-default/components/{VPContentDocFooter.vue → VPDocFooter.vue}

@@ -13,7 +13,7 @@ const control = usePrevNext()
 </script>
 
 <template>
-  <footer v-if="control.prev || control.next" class="VPContentDocFooter">
+  <footer v-if="control.prev || control.next" class="VPDocFooter">
     <div v-if="theme.editLink && frontmatter.editLink !== false" class="edit-link">
       <VPLink class="edit-link-button" :href="editLink.url" :no-icon="true">
         <VPIconEdit class="edit-link-icon" />
@@ -39,7 +39,7 @@ const control = usePrevNext()
 </template>
 
 <style scoped>
-.VPContentDocFooter {
+.VPDocFooter {
   margin-top: 64px;
 }
 
@@ -94,6 +94,7 @@ const control = usePrevNext()
   }
 
   .pager.has-prev {
+    padding-top: 0;
     padding-left: 16px;
   }
 }

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

@@ -22,7 +22,7 @@ function handleClick({ target: el }: Event) {
 </script>
 
 <template>
-  <div class="VPContentDocOutline" ref="container">
+  <div class="VPDocOutline" ref="container">
     <div class="outline-marker" ref="marker" />
 
     <div class="outline-title">On this page</div>
@@ -54,7 +54,7 @@ function handleClick({ target: el }: Event) {
 </template>
 
 <style scoped>
-.VPContentDocOutline {
+.VPDocOutline {
   position: relative;
   border-left: 1px solid var(--vp-c-divider-light);
   padding-left: 16px;

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useSidebar } from '../composables/sidebar'
+
+const { theme } = useData()
+const { hasSidebar } = useSidebar()
+</script>
+
+<template>
+  <footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
+    <div class="container">
+      <p class="message">{{ theme.footer.message }}</p>
+      <p class="copyright">{{ theme.footer.copyright }}</p>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.VPFooter {
+  position: relative;
+  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);
+}
+
+.VPFooter.has-sidebar {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .VPFooter {
+    padding: 32px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: var(--vp-layout-max-width);
+  text-align: center;
+}
+
+.message,
+.copyright {
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.message   { order: 2; }
+.copyright { order: 1; }
+</style>

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

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import VPButton from './VPButton.vue'
+
+interface HeroAction {
+  theme?: 'brand' | 'alt'
+  text: string
+  link: string
+}
+
+defineProps<{
+  name?: string
+  text: string
+  tagline?: string
+  actions?: HeroAction[]
+}>()
+</script>
+
+<template>
+  <div class="VPHero">
+    <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPHero {
+  margin-top: calc(var(--vp-nav-height) * -1);
+  padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+}
+
+@media (min-width: 640px) {
+  .VPHero {
+    padding: calc(var(--vp-nav-height) + 80px) 48px 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 960px;
+}
+
+.name,
+.text {
+  line-height: 40px;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.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;
+}
+
+@media (min-width: 640px) {
+  .name,
+  .text {
+    max-width: 640px;
+    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;
+  }
+}
+
+.tagline {
+  padding-top: 16px;
+  line-height: 28px;
+  font-size: 18px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+@media (min-width: 640px) {
+  .tagline {
+    padding-top: 24px;
+    max-width: 540px;
+    line-height: 32px;
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 960px) {
+  .tagline {
+    padding-top: 24px;
+    max-width: 640px;
+    line-height: 36px;
+    font-size: 24px;
+  }
+}
+
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+  padding-top: 24px;
+}
+
+@media (min-width: 640px) {
+  .actions {
+    padding-top: 32px;
+  }
+}
+
+.action {
+  flex-shrink: 0;
+  padding: 8px;
+}
+</style>

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import VPHomeHero from './VPHomeHero.vue'
+import VPHomeFeatures from './VPHomeFeatures.vue'
+</script>
+
+<template>
+  <div class="VPHome">
+    <slot name="home-hero-before" />
+    <VPHomeHero />
+    <slot name="home-hero-after" />
+
+    <slot name="home-features-before" />
+    <VPHomeFeatures />
+    <slot name="home-features-after" />
+  </div>
+</template>
+
+<style scoped>
+.VPHome {
+  padding-bottom: 96px;
+}
+
+.VPHome :deep(.VPHomeSponsors) {
+  margin-top: 112px;
+  margin-bottom: -128px;
+}
+
+@media (min-width: 768px) {
+  .VPHome {
+    padding-bottom: 128px;
+  }
+}
+</style>