vitepress 1.0.0-alpha.1 → 1.0.0-alpha.2

package/dist/client/app/devtools.js

@@ -0,0 +1,28 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api';
+const COMPONENT_STATE_TYPE = 'VitePress';
+export const setupDevtools = (app, router, data) => {
+    setupDevtoolsPlugin({
+        // fix recursive reference
+        app: app,
+        id: 'org.vuejs.vitepress',
+        label: 'VitePress',
+        packageName: 'vitepress',
+        homepage: 'https://vitepress.vuejs.org',
+        componentStateTypes: [COMPONENT_STATE_TYPE]
+    }, (api) => {
+        api.on.inspectComponent((payload) => {
+            payload.instanceData.state.push({
+                type: COMPONENT_STATE_TYPE,
+                key: 'route',
+                value: router.route,
+                editable: false
+            });
+            payload.instanceData.state.push({
+                type: COMPONENT_STATE_TYPE,
+                key: 'data',
+                value: data,
+                editable: false
+            });
+        });
+    });
+};

package/dist/client/app/index.js

@@ -1,4 +1,4 @@
-import { createApp as createClientApp, createSSRApp, defineAsyncComponent, h, onMounted, watch } from 'vue';
+import { createApp as createClientApp, createSSRApp, h, onMounted, watch } from 'vue';
 import Theme from '/@theme/index';
 import { inBrowser, pathToFile } from './utils';
 import { RouterSymbol, createRouter } from './router';
@@ -28,7 +28,6 @@ const VitePressApp = {
 };
 export function createApp() {
     const router = newRouter();
-    handleHMR(router);
     const app = newApp();
     app.provide(RouterSymbol, router);
     const data = initData(router.route);
@@ -36,9 +35,6 @@ export function createApp() {
     // install global components
     app.component('Content', Content);
     app.component('ClientOnly', ClientOnly);
-    app.component('Debug', import.meta.env.PROD
-        ? () => null
-        : defineAsyncComponent(() => import('./components/Debug.vue')));
     // expose $frontmatter
     Object.defineProperty(app.config.globalProperties, '$frontmatter', {
         get() {
@@ -52,6 +48,10 @@ export function createApp() {
             siteData: siteDataRef
         });
     }
+    // setup devtools in dev mode
+    if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) {
+        import('./devtools').then(({ setupDevtools }) => setupDevtools(app, router, data));
+    }
     return { app, router, data };
 }
 function newApp() {
@@ -79,22 +79,6 @@ function newRouter() {
         return import(/*@vite-ignore*/ pageFilePath);
     }, NotFound);
 }
-function handleHMR(router) {
-    // update route.data on HMR updates of active page
-    if (import.meta.hot) {
-        // hot reload pageData
-        import.meta.hot.on('vitepress:pageData', (payload) => {
-            if (shouldHotReload(payload)) {
-                router.route.data = payload.pageData;
-            }
-        });
-    }
-}
-function shouldHotReload(payload) {
-    const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '');
-    const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '');
-    return payloadPath === locationPath;
-}
 if (inBrowser) {
     const { app, router, data } = createApp();
     // wait until page component is fetched before mounting

package/dist/client/app/router.js

@@ -1,18 +1,11 @@
 import { reactive, inject, markRaw, nextTick, readonly } from 'vue';
+import { notFoundPageData } from '../shared';
 import { inBrowser, withBase } from './utils';
 import { siteDataRef } from './data';
 export const RouterSymbol = Symbol();
 // we are just using URL to parse the pathname and hash - the base doesn't
 // matter and is only passed to support same-host hrefs.
 const fakeHost = `http://a.com`;
-const notFoundPageData = {
-    relativePath: '',
-    title: '404',
-    description: 'Not Found',
-    headers: [],
-    frontmatter: {},
-    lastUpdated: 0
-};
 const getDefaultRoute = () => ({
     path: '/',
     component: null,
@@ -54,8 +47,8 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = markRaw(comp);
                 route.data = import.meta.env.PROD
-                    ? markRaw(JSON.parse(__pageData))
-                    : readonly(JSON.parse(__pageData));
+                    ? markRaw(__pageData)
+                    : readonly(__pageData);
                 if (inBrowser) {
                     nextTick(() => {
                         if (targetLoc.hash && !scrollPosition) {
@@ -77,7 +70,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             }
         }
         catch (err) {
-            if (!err.message.match(/fetch/)) {
+            if (!err.message.match(/fetch/) && !href.match(/^[\\/]404\.html$/)) {
                 console.error(err);
             }
             // retry on fetch fail: the page to hash map may have been invalidated
@@ -140,6 +133,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
             e.preventDefault();
         });
     }
+    handleHMR(route);
     return {
         route,
         go
@@ -190,3 +184,19 @@ function scrollTo(el, hash, smooth = false) {
         }
     }
 }
+function handleHMR(route) {
+    // update route.data on HMR updates of active page
+    if (import.meta.hot) {
+        // hot reload pageData
+        import.meta.hot.on('vitepress:pageData', (payload) => {
+            if (shouldHotReload(payload)) {
+                route.data = payload.pageData;
+            }
+        });
+    }
+}
+function shouldHotReload(payload) {
+    const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '');
+    const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '');
+    return payloadPath === locationPath;
+}

package/dist/client/index.d.ts

@@ -118,6 +118,4 @@ declare const Content: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode,
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, vue.EmitsOptions, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}>;
 
-declare const Debug: vue.ComponentOptions<{}, any, any, any, any, any, any, any>;
-
-export { Content, Debug, EnhanceAppContext, HeadConfig, Header, LocaleConfig, PageData, Route, Router, SiteData, Theme, VitePressData, inBrowser, useData, useRoute, useRouter, withBase };
+export { Content, EnhanceAppContext, HeadConfig, Header, LocaleConfig, PageData, Route, Router, SiteData, Theme, VitePressData, inBrowser, useData, useRoute, useRouter, withBase };

package/dist/client/index.js

@@ -7,5 +7,3 @@ export { useRouter, useRoute } from './app/router';
 export { inBrowser, withBase } from './app/utils';
 // components
 export { Content } from './app/components/Content';
-import _Debug from './app/components/Debug.vue';
-export const Debug = _Debug;

package/dist/client/shared.js

@@ -2,6 +2,14 @@ export const EXTERNAL_URL_RE = /^https?:/i;
 export const APPEARANCE_KEY = 'vitepress-theme-appearance';
 // @ts-ignore
 export const inBrowser = typeof window !== 'undefined';
+export const notFoundPageData = {
+    relativePath: '',
+    title: '404',
+    description: 'Not Found',
+    headers: [],
+    frontmatter: {},
+    lastUpdated: 0
+};
 function findMatchRoot(route, roots) {
     // first match to the routes with the most deep level.
     roots.sort((a, b) => {

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

@@ -34,6 +34,9 @@ provide('close-sidebar', closeSidebar)
       <template #home-features-before><slot name="home-features-before" /></template>
       <template #home-features-after><slot name="home-features-after" /></template>
 
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+
       <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>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { withBase } from 'vitepress'
 
 const props = defineProps<{
   tag?: string
@@ -30,7 +31,7 @@ const component = computed(() => {
     :is="component"
     class="VPButton"
     :class="classes"
-    :href="href"
+    :href="href ? withBase(href) : undefined"
     :target="isExternal ? '_blank' : undefined"
     :rel="isExternal ? 'noopener noreferrer' : undefined"
   >

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

@@ -35,6 +35,9 @@ useCopyCode()
     </VPHome>
 
     <VPDoc v-else>
+      <template #doc-before><slot name="doc-before" /></template>
+      <template #doc-after><slot name="doc-after" /></template>
+
       <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>

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

@@ -1,16 +1,13 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { useData } from 'vitepress'
+import { useRoute } from 'vitepress'
 import { useSidebar } from '../composables/sidebar'
 import VPDocAside from './VPDocAside.vue'
 import VPDocFooter from './VPDocFooter.vue'
 
-const { page } = useData()
+const { path } = useRoute()
 const { hasSidebar } = useSidebar()
 
-const pageName = computed(() => {
-  return page.value.relativePath.slice(0, page.value.relativePath.indexOf('/'))
-})
+const pageName = path.replace(/[./]+/g, '_').replace(/_html$/, '')
 </script>
 
 <template>
@@ -34,11 +31,15 @@ const pageName = computed(() => {
 
       <div class="content">
         <div class="content-container">
+          <slot name="doc-before" />
+
           <main class="main">
             <Content class="vp-doc" :class="pageName" />
           </main>
 
           <VPDocFooter />
+
+          <slot name="doc-after" />
         </div>
       </div>
     </div>

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

@@ -7,7 +7,7 @@ import {
   useActiveAnchor
 } from '../composables/outline'
 
-const { page, frontmatter } = useData()
+const { page, frontmatter, theme } = useData()
 
 const { hasOutline } = useOutline()
 
@@ -32,7 +32,9 @@ function handleClick({ target: el }: Event) {
     <div class="content">
       <div class="outline-marker" ref="marker" />
 
-      <div class="outline-title">On this page</div>
+      <div class="outline-title">
+        {{ theme.outlineTitle || 'On this page' }}
+      </div>
 
       <nav aria-labelledby="doc-outline-aria-label">
         <span class="visually-hidden" id="doc-outline-aria-label">

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useData } from 'vitepress'
 import { normalizeLink } from '../support/utils'
 import { useEditLink } from '../composables/edit-link'
@@ -11,6 +12,10 @@ const { theme, page, frontmatter } = useData()
 
 const editLink = useEditLink()
 const control = usePrevNext()
+
+const hasLastUpdated = computed(() => {
+  return page.value.lastUpdated && frontmatter.value.lastUpdated !== false
+})
 </script>
 
 <template>
@@ -23,7 +28,7 @@ const control = usePrevNext()
         </VPLink>
       </div>
 
-      <div v-if="page.lastUpdated" class="last-updated">
+      <div v-if="hasLastUpdated" class="last-updated">
         <VPDocFooterLastUpdated />
       </div>
     </div>
@@ -58,21 +63,18 @@ const control = usePrevNext()
   .edit-info {
     display: flex;
     justify-content: space-between;
-    align-items: baseline;
+    align-items: center;
     padding-bottom: 14px;
   }
 }
 
-.edit-link {
-  line-height: 32px;
-  font-size: 14px;
-  font-weight: 500;
-}
-
 .edit-link-button {
   display: flex;
   align-items: center;
   border: 0;
+  line-height: 32px;
+  font-size: 14px;
+  font-weight: 500;
   color: var(--vp-c-brand);
   transition: color 0.25s;
 }

package/dist/client/theme-default/components/{VPBox.vue → VPFeature.vue}

@@ -7,16 +7,16 @@ defineProps<{
 </script>
 
 <template>
-  <article class="VPBox">
+  <article class="VPFeature">
     <div v-if="icon" class="icon">{{ icon }}</div>
-    <h1 class="title">{{ title }}</h1>
+    <h2 class="title">{{ title }}</h2>
     <p class="details">{{ details }}</p>
   </article>
 </template>
 
 <style scoped>
-.VPBox {
-  border: 1px solid var(--vp-c-divider-light);
+.VPFeature {
+  border: 1px solid var(--vp-c-bg-soft);
   border-radius: 12px;
   padding: 24px;
   height: 100%;

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

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import VPFeature from './VPFeature.vue'
+
+export interface Feature {
+  icon?: string
+  title: string
+  details: string
+}
+
+const props = defineProps<{
+  features: Feature[]
+}>()
+
+const grid = computed(() => {
+  const length = props.features.length
+
+  if (!length) {
+    return
+  } else if (length === 2) {
+    return 'grid-2'
+  } else if (length === 3) {
+    return 'grid-3'
+  } else if (length % 3 === 0) {
+    return 'grid-6'
+  } else if (length % 2 === 0) {
+    return 'grid-4'
+  }
+})
+</script>
+
+<template>
+  <div v-if="features" class="VPFeatures">
+    <div class="container">
+      <div class="items">
+        <div v-for="feature in features" :key="feature.title" class="item" :class="[grid]">
+          <VPFeature
+            :icon="feature.icon"
+            :title="feature.title"
+            :details="feature.details"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.VPFeatures {
+  position: relative;
+  padding: 0 24px;
+}
+
+@media (min-width: 640px) {
+  .VPFeatures {
+    padding: 0 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPFeatures {
+    padding: 0 64px;
+  }
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.items {
+  display: flex;
+  flex-wrap: wrap;
+  margin: -8px;
+}
+
+.item {
+  padding: 8px;
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .item.grid-2,
+  .item.grid-4,
+  .item.grid-6 {
+    width: calc(100% / 2);
+  }
+}
+
+@media (min-width: 768px) {
+  .item.grid-2,
+  .item.grid-4 {
+    width: calc(100% / 2);
+  }
+
+  .item.grid-3,
+  .item.grid-6 {
+    width: calc(100% / 3);
+  }
+}
+
+@media (min-width: 960px) {
+  .item.grid-4 {
+    width: calc(100% / 4);
+  }
+}
+</style>

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

@@ -98,7 +98,7 @@ function onBlur() {
   display: flex;
   align-items: center;
   line-height: var(--vp-nav-height-mobile);
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
   transition: color 0.25s;

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

@@ -25,8 +25,8 @@ defineProps<{
   <div class="VPHero" :class="{ 'has-image': image }">
     <div class="container">
       <div class="main">
-        <p v-if="name" class="name"><span class="clip">{{ name }}</span></p>
-        <h1 v-if="text" class="text">{{ text }}</h1>
+        <h1 v-if="name" class="name"><span class="clip">{{ name }}</span></h1>
+        <p v-if="text" class="text">{{ text }}</p>
         <p v-if="tagline" class="tagline">{{ tagline }}</p>
 
         <div v-if="actions" class="actions">
@@ -64,11 +64,17 @@ defineProps<{
   }
 }
 
+@media (min-width: 960px) {
+  .VPHero {
+    padding: calc(var(--vp-nav-height) + 80px) 64px 64px;
+  }
+}
+
 .container {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 960px;
+  max-width: 1152px;
 }
 
 @media (min-width: 960px) {
@@ -98,13 +104,11 @@ defineProps<{
 @media (min-width: 960px) {
   .main {
     order: 1;
+    width: calc((100% / 3) * 2);
   }
-}
 
-@media (min-width: 960px) {
-  .main {
-    width: 100%;
-    max-width: calc((100% / 3) * 2);
+  .VPHero.has-image .main {
+    max-width: 592px;
   }
 }
 
@@ -115,6 +119,7 @@ defineProps<{
   line-height: 40px;
   font-size: 32px;
   font-weight: 700;
+  white-space: pre-wrap;
 }
 
 .VPHero.has-image .name,
@@ -156,11 +161,12 @@ defineProps<{
 }
 
 .tagline {
-  padding-top: 16px;
+  padding-top: 8px;
   max-width: 392px;
   line-height: 28px;
   font-size: 18px;
   font-weight: 500;
+  white-space: pre-wrap;
   color: var(--vp-c-text-2);
 }
 
@@ -170,7 +176,7 @@ defineProps<{
 
 @media (min-width: 640px) {
   .tagline {
-    padding-top: 24px;
+    padding-top: 12px;
     max-width: 576px;
     line-height: 32px;
     font-size: 20px;
@@ -179,7 +185,6 @@ defineProps<{
 
 @media (min-width: 960px) {
   .tagline {
-    padding-top: 24px;
     line-height: 36px;
     font-size: 24px;
   }
@@ -230,9 +235,9 @@ defineProps<{
 
 @media (min-width: 960px) {
   .image {
+    flex-grow: 1;
     order: 2;
     margin: 0;
-    width: calc(100% / 3);
     min-height: 100%;
   }
 }

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

@@ -12,6 +12,8 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
     <slot name="home-features-before" />
     <VPHomeFeatures />
     <slot name="home-features-after" />
+
+    <Content />
   </div>
 </template>
 

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

@@ -1,97 +1,14 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { useData } from 'vitepress'
-import VPBox from './VPBox.vue'
+import VPFeatures from './VPFeatures.vue'
 
 const { frontmatter: fm } = useData()
-
-const grid = computed(() => {
-  const length = fm.value.features?.length
-
-  if (!length) {
-    return
-  }
-
-  if (length === 2) {
-    return 'grid-2'
-  } else if (length === 3) {
-    return 'grid-3'
-  } else if (length % 3 === 0) {
-    return 'grid-6'
-  } else if (length % 2 === 0) {
-    return 'grid-4'
-  }
-})
 </script>
 
 <template>
-  <div v-if="fm.features" class="VPHomeFeatures">
-    <div class="container">
-      <div class="items">
-        <div v-for="feature in fm.features" :key="feature.title" class="item" :class="[grid]">
-          <VPBox
-            :icon="feature.icon"
-            :title="feature.title"
-            :details="feature.details"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  <VPFeatures
+    v-if="fm.features"
+    class="VPHomeFeatures"
+    :features="fm.features"
+  />
 </template>
-
-<style scoped>
-.VPHomeFeatures {
-  position: relative;
-  padding: 0 24px;
-}
-
-@media (min-width: 640px) {
-  .VPHomeFeatures {
-    padding: 0 48px;
-  }
-}
-
-.container {
-  margin: 0 auto;
-  max-width: 960px;
-}
-
-.items {
-  display: flex;
-  flex-wrap: wrap;
-  margin: -8px;
-}
-
-.item {
-  padding: 8px;
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-  .item.grid-2,
-  .item.grid-4,
-  .item.grid-6 {
-    width: calc(100% / 2);
-  }
-}
-
-@media (min-width: 768px) {
-  .item.grid-2,
-  .item.grid-4 {
-    width: calc(100% / 2);
-  }
-
-  .item.grid-3,
-  .item.grid-6 {
-    width: calc(100% / 3);
-  }
-}
-
-@media (min-width: 960px) {
-  .item.grid-4 {
-    width: calc(100% / 4);
-  }
-}
-
-</style>