vitepress 1.0.0-draft.1 → 1.0.0-draft.4

package/dist/client/app/composables/head.js

@@ -1,4 +1,5 @@
 import { watchEffect } from 'vue';
+import { createTitle } from '../../shared';
 export function useUpdateHead(route, siteDataByRouteRef) {
     let managedHeadTags = [];
     let isFirstUpdate = true;
@@ -50,11 +51,10 @@ export function useUpdateHead(route, siteDataByRouteRef) {
     watchEffect(() => {
         const pageData = route.data;
         const siteData = siteDataByRouteRef.value;
-        const pageTitle = pageData && pageData.title;
         const pageDescription = pageData && pageData.description;
         const frontmatterHead = pageData && pageData.frontmatter.head;
         // update title and description
-        document.title = (pageTitle ? pageTitle + ` | ` : ``) + siteData.title;
+        document.title = createTitle(siteData, pageData);
         document
             .querySelector(`meta[name=description]`)
             .setAttribute('content', pageDescription || siteData.description);

package/dist/client/app/data.js

@@ -1,6 +1,6 @@
 import { shallowRef, readonly, computed, inject } from 'vue';
 import serializedSiteData from '@siteData';
-import { resolveSiteDataByRoute } from '../shared';
+import { resolveSiteDataByRoute, createTitle } from '../shared';
 import { withBase } from './utils';
 export const dataSymbol = Symbol();
 export const siteDataRef = shallowRef(parse(serializedSiteData));
@@ -29,9 +29,7 @@ export function initData(route) {
             return withBase(path || '/');
         }),
         title: computed(() => {
-            return route.data.title
-                ? route.data.title + ' | ' + site.value.title
-                : site.value.title;
+            return createTitle(site.value, route.data);
         }),
         description: computed(() => {
             return route.data.description || site.value.description;

package/dist/client/index.d.ts

@@ -40,6 +40,7 @@ export declare const inBrowser: boolean;
 export declare interface LocaleConfig {
     lang: string
     title?: string
+    titleTemplate?: string | boolean
     description?: string
     head?: HeadConfig[]
     label?: string
@@ -49,6 +50,7 @@ export declare interface LocaleConfig {
 export declare interface PageData {
     relativePath: string
     title: string
+    titleTemplate?: string | boolean
     description: string
     headers: Header[]
     frontmatter: Record<string, any>
@@ -68,17 +70,23 @@ 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
+    titleTemplate?: string | boolean
     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) {
@@ -52,6 +53,27 @@ export function resolveSiteDataByRoute(siteData, route) {
         langs: createLangDictionary(siteData)
     });
 }
+/**
+ * Create the page title string based on configs.
+ */
+export function createTitle(siteData, pageData) {
+    const title = pageData.title || siteData.title;
+    const template = pageData.titleTemplate ?? siteData.titleTemplate;
+    const templateString = createTitleTemplate(siteData.title, template);
+    return `${title}${templateString}`;
+}
+function createTitleTemplate(siteTitle, template) {
+    if (template === false) {
+        return '';
+    }
+    if (template === true || template === undefined) {
+        return ` | ${siteTitle}`;
+    }
+    if (siteTitle === template) {
+        return '';
+    }
+    return ` | ${template}`;
+}
 /**
  * Clean up the route by removing the `base` path if it's set in config.
  */

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,33 +15,54 @@ 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 />
   </div>
 </template>
 
 <style scoped>
-@media (max-width: 768px) {
-  .VPContent {
-    overflow-x: hidden;
-  }
+.VPContent {
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.VPContent.is-home {
+  width: 100%;
+  max-width: 100%;
 }
 
 @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);
   }
 }
 
 @media (min-width: 1440px) {
   .VPContent.has-sidebar {
-    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-right: calc((100vw - var(--vp-layout-max-width)) / 2);
+    padding-left: calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width));
   }
 }
 </style>

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

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useData } from 'vitepress'
-import VPContentDocOutline from './VPContentDocOutline.vue'
-import VPContentDocFooter from './VPContentDocFooter.vue'
+import { useSidebar } from '../composables/sidebar'
+import VPDocOutline from './VPDocOutline.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,95 +14,101 @@ const pageName = computed(() => {
 </script>
 
 <template>
-  <div class="VPContentDoc has-aside">
+  <div class="VPDoc" :class="{ 'has-sidebar': hasSidebar }">
     <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>
 
       <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>
 
-        <VPContentDocFooter />
+          <VPDocFooter />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.VPContentDoc {
+.VPDoc {
   padding: 32px 24px 96px;
+  width: 100%;
 }
 
 @media (min-width: 768px) {
-  .VPContentDoc {
+  .VPDoc {
     padding: 48px 32px 128px;
   }
 }
 
 @media (min-width: 960px) {
-  .VPContentDoc {
-    padding: 32px 64px 96px;
+  .VPDoc {
+    padding: 32px 32px 128px;
   }
-}
 
-@media (min-width: 1280px) {
-  .VPContentDoc {
-    padding: 32px 0 128px 64px;
+  .VPDoc:not(.has-sidebar) .container {
+    display: flex;
+    justify-content: center;
+    max-width: 992px;
   }
 
-  .VPContentDoc:not(.has-sidebar.has-aside) {
-    padding-left: calc((100vw - 688px) / 2);
+  .VPDoc:not(.has-sidebar) .aside {
+    display: block;
   }
 
-  .VPContentDoc.has-aside:not(.has-sidebar) {
-    padding-left: calc((100vw - 688px - 320px) / 2);
+  .VPDoc:not(.has-sidebar) .content {
+    max-width: 752px;
   }
+}
 
-  .VPContentDoc:not(.has-aside) .content {
-    min-width: 688px;
+@media (min-width: 1280px) {
+  .VPDoc .container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .VPDoc .aside {
+    display: block;
   }
 }
 
 @media (min-width: 1440px) {
-  .VPContentDoc {
-    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;
-  }
+  flex-shrink: 0;
+  padding-left: 32px;
+  min-width: 240px;
 }
 
 @media (min-width: 1440px) {
   .aside {
-    padding-left: 96px;
+    padding-left: 64px;
   }
 }
 
@@ -109,7 +117,7 @@ const pageName = computed(() => {
   top: var(--vp-nav-height-desktop);
   bottom: 0;
   padding-top: 32px;
-  width: 224px;
+  width: 208px;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -140,17 +148,33 @@ const pageName = computed(() => {
 .content {
   position: relative;
   margin: 0 auto;
-  max-width: 688px;
+}
+
+@media (min-width: 960px) {
+  .content {
+    padding: 0 32px;
+  }
 }
 
 @media (min-width: 1280px) {
   .content {
     order: 1;
     margin: 0;
-    min-width: 632px;
+    min-width: 640px;
+  }
+}
+
+@media (min-width: 1440px) {
+  .content {
+    padding-left: 64px;
   }
 }
 
+.content-container {
+  margin: 0 auto;
+  max-width: 688px;
+}
+
 .edit-link {
   margin: 0 0 32px;
 }

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}

@@ -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="VPContentDocOutline" ref="container">
+  <div class="VPDocOutline" :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>
-.VPContentDocOutline {
+.VPDocOutline {
   position: relative;
+  display: none;
   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;