vitepress 1.0.0-draft.3 → 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>
@@ -77,6 +79,7 @@ export declare interface SiteData<ThemeConfig = any> {
     lang: string
 
     title: string
+    titleTemplate?: string | boolean
     description: string
     head: HeadConfig[]
     appearance: boolean

package/dist/client/shared.js

@@ -53,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/components/VPContent.vue

@@ -31,15 +31,16 @@ const { hasSidebar } = useSidebar()
       <template #home-features-after><slot name="home-features-after" /></template>
     </VPHome>
 
-    <VPDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
+    <VPDoc v-else />
   </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 +48,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 +56,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 { 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,7 +14,7 @@ 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-container">
@@ -24,11 +26,13 @@ const pageName = computed(() => {
       </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 +41,7 @@ const pageName = computed(() => {
 <style scoped>
 .VPDoc {
   padding: 32px 24px 96px;
+  width: 100%;
 }
 
 @media (min-width: 768px) {
@@ -47,60 +52,63 @@ const pageName = computed(() => {
 
 @media (min-width: 960px) {
   .VPDoc {
-    padding: 32px 64px 96px;
+    padding: 32px 32px 128px;
   }
-}
 
-@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;
-  }
+  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/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="VPDocOutline" 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>
@@ -56,12 +62,17 @@ function handleClick({ target: el }: Event) {
 <style scoped>
 .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;

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

@@ -66,7 +66,7 @@ defineEmits<{
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
-  max-width: var(--vp-layout-max-width);
+  max-width: calc(var(--vp-layout-max-width) - 64px);
 }
 
 .content {

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

@@ -91,8 +91,8 @@ watchPostEffect(async () => {
 
 @media (min-width: 1440px) {
   .VPSidebar {
-    padding-left: calc((100% - var(--vp-layout-max-width)) / 2);
-    width: calc((100% - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width) - 32px);
+    padding-left: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2);
+    width: calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px);
   }
 }
 

package/dist/client/theme-default/composables/outline.js

@@ -1,8 +1,18 @@
-import { onMounted, onUpdated, onUnmounted } from 'vue';
+import { computed, onMounted, onUpdated, onUnmounted } from 'vue';
+import { useData } from 'vitepress';
 import { useMediaQuery } from '@vueuse/core';
 import { throttleAndDebounce } from '../support/utils';
 // magic number to avoid repeated retrieval
 const PAGE_OFFSET = 56;
+export function useOutline() {
+    const { page } = useData();
+    const hasOutline = computed(() => {
+        return page.value.headers.length > 0;
+    });
+    return {
+        hasOutline
+    };
+}
 export function resolveHeaders(headers) {
     return mapHeaders(groupHeaders(headers));
 }

package/dist/client/theme-default/index.js

@@ -2,8 +2,9 @@ import './styles/fonts.css';
 import './styles/vars.css';
 import './styles/base.css';
 import './styles/utils.css';
-import './styles/vp-doc.css';
-import './styles/vp-sponsor.css';
+import './styles/components/custom-block.css';
+import './styles/components/vp-doc.css';
+import './styles/components/vp-sponsor.css';
 import Layout from './Layout.vue';
 import NotFound from './NotFound.vue';
 export { default as VPHomeHero } from './components/VPHomeHero.vue';

package/dist/client/theme-default/styles/components/custom-block.css

@@ -0,0 +1,90 @@
+.custom-block {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 16px 16px 8px;
+  line-height: 20px;
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+}
+
+.custom-block.info {
+  border-color: var(--vp-custom-block-info-border);
+  color: var(--vp-custom-block-info-text);
+  background-color: var(--vp-custom-block-info-bg);
+}
+
+.custom-block.info code {
+  background-color: var(--vp-custom-block-info-code-bg);
+}
+
+.custom-block.tip {
+  border-color: var(--vp-custom-block-tip-border);
+  color: var(--vp-custom-block-tip-text);
+  background-color: var(--vp-custom-block-tip-bg);
+}
+
+.custom-block.tip code {
+  background-color: var(--vp-custom-block-tip-code-bg);
+}
+
+.custom-block.warning {
+  border-color: var(--vp-custom-block-warning-border);
+  color: var(--vp-custom-block-warning-text);
+  background-color: var(--vp-custom-block-warning-bg);
+}
+
+.custom-block.warning code {
+  background-color: var(--vp-custom-block-warning-code-bg);
+}
+
+.custom-block.danger {
+  border-color: var(--vp-custom-block-danger-border);
+  color: var(--vp-custom-block-danger-text);
+  background-color: var(--vp-custom-block-danger-bg);
+}
+
+.custom-block.danger code {
+  background-color: var(--vp-custom-block-danger-code-bg);
+}
+
+.custom-block.details {
+  border-color: var(--vp-custom-block-details-border);
+  color: var(--vp-custom-block-details-text);
+  background-color: var(--vp-custom-block-details-bg);
+}
+
+.custom-block.details code {
+  background-color: var(--vp-custom-block-details-code-bg);
+}
+
+.custom-block-title {
+  font-weight: 700;
+}
+
+.custom-block p + p {
+  margin: 8px 0;
+}
+
+.custom-block.details summary {
+  margin: 0 0 8px;
+  font-weight: 700;
+}
+
+.custom-block.details summary + p {
+  margin: 8px 0;
+}
+
+.custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  transition: opacity .25s;
+}
+
+.custom-block a:hover {
+  opacity: 0.6;
+}
+
+.custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+}

package/dist/client/theme-default/styles/{vp-doc.css → components/vp-doc.css}

@@ -115,18 +115,27 @@
 
 .vp-doc ul,
 .vp-doc ol {
+  padding-left: 1.25rem;
   margin: 16px 0;
 }
 
 .vp-doc ul {
-  padding-left: 1.25rem;
   list-style: disc;
 }
 
+.vp-doc ol {
+  list-style: decimal;
+}
+
 .vp-doc li + li {
   margin-top: 8px;
 }
 
+.vp-doc li > ol,
+.vp-doc li > ul {
+  margin: 8px 0 0;
+}
+
 /**
  * Table
  * -------------------------------------------------------------------------- */
@@ -177,6 +186,49 @@
   border-top: 1px solid var(--vp-c-divider-light);
 }
 
+/**
+ * Custom Block
+ * -------------------------------------------------------------------------- */
+
+.vp-doc .custom-block {
+  margin: 16px 0;
+}
+
+.vp-doc .custom-block p {
+  margin: 8px 0;
+  line-height: 24px;
+}
+
+.vp-doc .custom-block p:first-child {
+  margin: 0;
+}
+
+.vp-doc .custom-block a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+  transition: opacity .25s;
+}
+
+.vp-doc .custom-block a:hover {
+  opacity: 0.6;
+}
+
+.vp-doc .custom-block code {
+  font-size: var(--vp-custom-block-code-font-size);
+  font-weight: 600;
+  color: inherit;
+}
+
+.vp-doc .custom-block div[class*='language-'] {
+  margin: 8px 0;
+}
+
+.vp-doc .custom-block div[class*='language-'] code {
+  font-weight: 400;
+  background-color: var(--vp-code-block-bg);
+}
+
 /**
  * Code
  * -------------------------------------------------------------------------- */
@@ -200,19 +252,13 @@
   font-size: 0.9em;
 }
 
-@media (min-width: 768px) {
-  .vp-doc :not(pre) > code {
-    white-space: nowrap;
-  }
-}
-
 .vp-doc a > code {
   color: var(--vp-c-brand-dark);
 }
 
 .vp-doc div[class*='language-'] {
   position: relative;
-  margin: 20px -24px;
+  margin: 16px -24px;
   background-color: var(--vp-code-block-bg);
   overflow-x: auto;
   transition: background-color 0.5s;
@@ -221,7 +267,7 @@
 @media (min-width: 640px) {
   .vp-doc div[class*='language-'] {
     border-radius: 8px;
-    margin: 24px 0;
+    margin: 16px 0;
   }
 }
 
@@ -234,7 +280,7 @@
 .vp-doc div[class*='language-'] + div[class*='language-'],
 .vp-doc div[class$='-api'] + div[class*='language-'],
 .vp-doc div[class*='language-'] + div[class$='-api'] > div[class*='language-'] {
-  margin-top: -12px;
+  margin-top: -8px;
 }
 
 .vp-doc [class*='language-'] pre,

package/dist/client/theme-default/styles/vars.css

@@ -43,12 +43,6 @@
   --vp-c-text-dark-3: rgba(235, 235, 235, 0.38);
   --vp-c-text-dark-4: rgba(235, 235, 235, 0.18);
 
-  --vp-c-green: #42b883;
-  --vp-c-green-light: #42d392;
-  --vp-c-green-lighter: #35eb9a;
-  --vp-c-green-dark: #33a06f;
-  --vp-c-green-darker: #155f3e;
-
   --vp-c-indigo: #213547;
   --vp-c-indigo-soft: #476582;
   --vp-c-indigo-light: #aac8e4;
@@ -56,29 +50,26 @@
   --vp-c-indigo-dark: #1d2f3f;
   --vp-c-indigo-darker: #14212e;
 
-  --vp-c-blue: #3b8eed;
-  --vp-c-blue-light: #549ced;
-  --vp-c-blue-lighter: #50a2ff;
-  --vp-c-blue-dark: #3468a3;
-  --vp-c-blue-darker: #255489;
+  --vp-c-green: #42b883;
+  --vp-c-green-light: #42d392;
+  --vp-c-green-lighter: #35eb9a;
+  --vp-c-green-dark: #33a06f;
+  --vp-c-green-darker: #155f3e;
+  --vp-c-green-dimm: rgba(66, 184, 131, 0.08);
 
   --vp-c-yellow: #ffc517;
   --vp-c-yellow-light: #ffe417;
   --vp-c-yellow-lighter: #ffff17;
   --vp-c-yellow-dark: #e0ad15;
-  --vp-c-yellow-darker: #bc9112;
+  --vp-c-yellow-darker: #ad850e;
+  --vp-c-yellow-dimm: rgba(255, 197, 23, 0.08);
 
   --vp-c-red: #ed3c50;
   --vp-c-red-light: #f43771;
   --vp-c-red-lighter: #fd1d7c;
   --vp-c-red-dark: #cd2d3f;
   --vp-c-red-darker: #ab2131;
-
-  --vp-c-purple: #de41e0;
-  --vp-c-purple-light: #e936eb;
-  --vp-c-purple-lighter: #f616f8;
-  --vp-c-purple-dark: #823c83;
-  --vp-c-purple-darker: #602960;
+  --vp-c-red-dimm: rgba(237, 60, 80, 0.08);
 }
 
 /**
@@ -185,31 +176,7 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-layout-max-width: 1376px;
-}
-
-/**
- * Component: Nav
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-nav-height: var(--vp-nav-height-mobile);
-  --vp-nav-height-mobile: 56px;
-  --vp-nav-height-desktop: 72px;
-}
-
-@media (min-width: 960px) {
-  :root {
-    --vp-nav-height: var(--vp-nav-height-desktop);
-  }
-}
-
-/**
- * Component: Sidebar
- * -------------------------------------------------------------------------- */
-
-:root {
-  --vp-sidebar-width: 272px;
+  --vp-layout-max-width: 1440px;
 }
 
 /**
@@ -289,6 +256,75 @@
   --vp-button-sponsor-text: var(--vp-c-text-dark-2);
 }
 
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-code-font-size: 13px;
+
+  --vp-custom-block-info-border: var(--vp-c-divider-light);
+  --vp-custom-block-info-text: var(--vp-c-text-2);
+  --vp-custom-block-info-bg: var(--vp-c-white-soft);
+  --vp-custom-block-info-code-bg: var(--vp-c-gray-light-4);
+
+  --vp-custom-block-tip-border: var(--vp-c-green);
+  --vp-custom-block-tip-text: var(--vp-c-green-darker);
+  --vp-custom-block-tip-bg: var(--vp-c-green-dimm);
+  --vp-custom-block-tip-code-bg: var(--vp-custom-block-tip-bg);
+
+  --vp-custom-block-warning-border: var(--vp-c-yellow);
+  --vp-custom-block-warning-text: var(--vp-c-yellow-darker);
+  --vp-custom-block-warning-bg: var(--vp-c-yellow-dimm);
+  --vp-custom-block-warning-code-bg: var(--vp-custom-block-warning-bg);
+
+  --vp-custom-block-danger-border: var(--vp-c-red);
+  --vp-custom-block-danger-text: var(--vp-c-red-darker);
+  --vp-custom-block-danger-bg: var(--vp-c-red-dimm);
+  --vp-custom-block-danger-code-bg: var(--vp-custom-block-danger-bg);
+
+  --vp-custom-block-details-border: var(--vp-custom-block-info-border);
+  --vp-custom-block-details-text: var(--vp-custom-block-info-text);
+  --vp-custom-block-details-bg: var(--vp-custom-block-info-bg);
+  --vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg);
+}
+
+.dark {
+  --vp-custom-block-info-border: var(--vp-c-divider-light);
+  --vp-custom-block-info-bg: var(--vp-c-black-mute);
+  --vp-custom-block-info-code-bg: var(--vp-c-gray-dark-4);
+
+  --vp-custom-block-tip-text: var(--vp-c-green);
+
+  --vp-custom-block-warning-text: var(--vp-c-yellow);
+
+  --vp-custom-block-danger-text: var(--vp-c-red);
+}
+
+/**
+ * Component: Nav
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-nav-height: var(--vp-nav-height-mobile);
+  --vp-nav-height-mobile: 56px;
+  --vp-nav-height-desktop: 72px;
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-nav-height: var(--vp-nav-height-desktop);
+  }
+}
+
+/**
+ * Component: Sidebar
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-sidebar-width: 272px;
+}
+
 /**
  * Component: Home
  * -------------------------------------------------------------------------- */

package/dist/node/cli.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var serve = require('./serve-b5dc02b2.js');
+var serve = require('./serve-b3182d88.js');
 require('fs');
 require('path');
 require('url');

package/dist/node/index.d.ts

@@ -222,6 +222,7 @@ export declare interface Header {
 export declare interface LocaleConfig {
     lang: string
     title?: string
+    titleTemplate?: string | boolean
     description?: string
     head?: HeadConfig[]
     label?: string
@@ -293,6 +294,7 @@ export declare interface SiteData<ThemeConfig = any> {
     lang: string
 
     title: string
+    titleTemplate?: string | boolean
     description: string
     head: HeadConfig[]
     appearance: boolean
@@ -327,6 +329,7 @@ export declare interface UserConfig<ThemeConfig = any> {
     base?: string;
     lang?: string;
     title?: string;
+    titleTemplate?: string | boolean;
     description?: string;
     head?: HeadConfig[];
     appearance?: boolean;

package/dist/node/index.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var serve = require('./serve-b5dc02b2.js');
+var serve = require('./serve-b3182d88.js');
 require('vite');
 require('readline');
 require('assert');

package/dist/node/{serve-b5dc02b2.js → serve-b3182d88.js}

@@ -12293,6 +12293,25 @@ function resolveSiteDataByRoute(siteData, route) {
     langs: createLangDictionary(siteData)
   });
 }
+function createTitle(siteData, pageData) {
+  var _a;
+  const title = pageData.title || siteData.title;
+  const template = (_a = pageData.titleTemplate) != null ? _a : siteData.titleTemplate;
+  const templateString = createTitleTemplate(siteData.title, template);
+  return `${title}${templateString}`;
+}
+function createTitleTemplate(siteTitle, template) {
+  if (template === false) {
+    return "";
+  }
+  if (template === true || template === void 0) {
+    return ` | ${siteTitle}`;
+  }
+  if (siteTitle === template) {
+    return "";
+  }
+  return ` | ${template}`;
+}
 function cleanRoute(siteData, route) {
   if (!inBrowser) {
     return route;
@@ -13455,6 +13474,7 @@ async function resolveSiteData(root, userConfig, command = "serve", mode = "deve
   return {
     lang: userConfig.lang || "en-US",
     title: userConfig.title || "VitePress",
+    titleTemplate: userConfig.titleTemplate,
     description: userConfig.description || "A VitePress site",
     base: userConfig.base ? userConfig.base.replace(/([^/])$/, "$1/") : "/",
     head: resolveSiteDataHead(userConfig),
@@ -34956,7 +34976,7 @@ var markdownItContainer = function container_plugin(md, name, options) {
 };
 
 const containerPlugin = (md) => {
-  md.use(...createContainer("tip", "TIP")).use(...createContainer("info", "INFO")).use(...createContainer("warning", "WARNING")).use(...createContainer("danger", "WARNING")).use(...createContainer("details", "Details")).use(markdownItContainer, "v-pre", {
+  md.use(...createContainer("tip", "TIP")).use(...createContainer("info", "INFO")).use(...createContainer("warning", "WARNING")).use(...createContainer("danger", "DANGER")).use(...createContainer("details", "Details")).use(markdownItContainer, "v-pre", {
     render: (tokens, idx) => tokens[idx].nesting === 1 ? `<div v-pre>
 ` : `</div>
 `
@@ -34972,7 +34992,7 @@ function createContainer(klass, defaultTitle) {
         const info = token.info.trim().slice(klass.length).trim();
         if (token.nesting === 1) {
           if (klass === "details") {
-            return `<details class="${klass} custom-block">${info ? `<summary>${info}</summary>` : ""}
+            return `<details class="${klass} custom-block">${info ? `<summary>${info}</summary>` : `<summary>Details</summary>`}
 `;
           }
           return `<div class="${klass} custom-block"><p class="custom-block-title">${info || defaultTitle}</p>
@@ -37203,6 +37223,7 @@ function createMarkdownToVueRenderFn(srcDir, options = {}, pages, userDefines, i
     }
     const pageData = {
       title: inferTitle(frontmatter, content),
+      titleTemplate: frontmatter.titleTemplate,
       description: inferDescription(frontmatter),
       frontmatter,
       headers: data.headers || [],
@@ -37251,9 +37272,6 @@ const inferTitle = (frontmatter, content) => {
   if (frontmatter.title) {
     return deeplyParseHeader(frontmatter.title);
   }
-  if (frontmatter.home) {
-    return "Home";
-  }
   const match = content.match(/^\s*#+\s+(.*)/m);
   if (match) {
     return deeplyParseHeader(match[1].trim());
@@ -40951,7 +40969,7 @@ async function renderPage(config, page, result, appChunk, cssChunk, pageToHashMa
     return `<link rel="prefetch" href="${siteData.base}${file}">`;
   }).join("\n    ");
   const stylesheetLink = cssChunk ? `<link rel="stylesheet" href="${siteData.base}${cssChunk.fileName}">` : "";
-  const title = pageData.title && pageData.title !== "Home" ? `${pageData.title} | ${siteData.title}` : siteData.title;
+  const title = createTitle(siteData, pageData);
   const description = pageData.description || siteData.description;
   const head = addSocialTags(title, ...siteData.head, ...filterOutHeadDescription(pageData.frontmatter.head));
   let inlinedScript = "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress",
-  "version": "1.0.0-draft.3",
+  "version": "1.0.0-draft.4",
   "packageManager": "pnpm@7.0.1",
   "description": "Vite & Vue powered static site generator",
   "main": "dist/node/index.js",
@@ -139,6 +139,5 @@
     "docs-build-only": "node ./bin/vitepress build docs",
     "docs-serve": "node ./bin/vitepress serve docs",
     "ci-docs": "run-s build docs-build"
-  },
-  "readme": "# (WIP) VitePress 📝💨\n\n[![Test](https://github.com/vuejs/vitepress/workflows/Test/badge.svg)](https://github.com/vuejs/vitepress/actions)\n[![npm](https://img.shields.io/npm/v/vitepress)](https://www.npmjs.com/package/vitepress)\n\n---\n\nVitePress is [VuePress](https://vuepress.vuejs.org)' spiritual successor, built on top of [vite](https://github.com/vitejs/vite).\n\n## Documentation\n\nTo check out docs, visit [vitepress.vuejs.org](https://vitepress.vuejs.org).\n\n## Changelog\n\nDetailed changes for each release are documented in the [CHANGELOG](https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md).\n\n## Contribution\n\nPlease make sure to read the [Contributing Guide](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md) before making a pull request.\n\n## License\n\n[MIT](https://github.com/vuejs/vitepress/blob/main/LICENSE)\n\nCopyright (c) 2019-present, Yuxi (Evan) You\n"
+  }
 }

package/types/shared.d.ts

@@ -5,6 +5,7 @@ export { DefaultTheme } from './default-theme'
 export interface PageData {
   relativePath: string
   title: string
+  titleTemplate?: string | boolean
   description: string
   headers: Header[]
   frontmatter: Record<string, any>
@@ -28,6 +29,7 @@ export interface SiteData<ThemeConfig = any> {
   lang: string
 
   title: string
+  titleTemplate?: string | boolean
   description: string
   head: HeadConfig[]
   appearance: boolean
@@ -64,6 +66,7 @@ export type HeadConfig =
 export interface LocaleConfig {
   lang: string
   title?: string
+  titleTemplate?: string | boolean
   description?: string
   head?: HeadConfig[]
   label?: string