vitepress 0.22.2 → 1.0.0-alpha.1

package/README.md

@@ -1,11 +1,13 @@
-# (WIP) VitePress 📝💨
+# VitePress (alpha) 📝💨
 
 [![Test](https://github.com/vuejs/vitepress/workflows/Test/badge.svg)](https://github.com/vuejs/vitepress/actions)
 [![npm](https://img.shields.io/npm/v/vitepress)](https://www.npmjs.com/package/vitepress)
 
 ---
 
-VitePress is [VuePress](http://vuepress.vuejs.org/)' spiritual successor, built on top of [vite](https://github.com/vuejs/vite).
+VitePress is [VuePress](https://vuepress.vuejs.org)' spiritual successor, built on top of [vite](https://github.com/vitejs/vite).
+
+Currently, it's in the `alpha` stage. It is already suitable for out-of-the-box documentation use, but the config and theming API may still change between minor releases.
 
 ## Documentation
 
@@ -13,14 +15,14 @@ To check out docs, visit [vitepress.vuejs.org](https://vitepress.vuejs.org).
 
 ## Changelog
 
-Detailed changes for each release are documented in the [CHANGELOG](https://github.com/vuejs/vitepress/blob/master/CHANGELOG.md).
+Detailed changes for each release are documented in the [CHANGELOG](https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md).
 
 ## Contribution
 
-Please make sure to read the [Contributing Guide](./.github/contributing.md) before making a pull request.
+Please make sure to read the [Contributing Guide](https://github.com/vuejs/vitepress/blob/main/.github/contributing.md) before making a pull request.
 
 ## License
 
-[MIT](https://opensource.org/licenses/MIT)
+[MIT](https://github.com/vuejs/vitepress/blob/main/LICENSE)
 
 Copyright (c) 2019-present, Yuxi (Evan) You

package/bin/vitepress.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-require('../dist/node/cli')
+import('../dist/node/cli.js')

package/client.d.ts

@@ -1,4 +1,3 @@
-// re-export vite client types
-// with strict installers like pnpm, user won't be able to reference vite/client
-// in project root
+// re-export vite client types. with strict installers like pnpm, user won't
+// be able to reference vite/client in project root.
 /// <reference types="vite/client" />

package/dist/client/app/components/ClientOnly.js

@@ -1,4 +1,4 @@
-import { ref, onMounted, defineComponent } from 'vue';
+import { defineComponent, ref, onMounted } from 'vue';
 export const ClientOnly = defineComponent({
     setup(_, { slots }) {
         const show = ref(false);

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/app/index.js

@@ -1,9 +1,9 @@
 import { createApp as createClientApp, createSSRApp, defineAsyncComponent, h, onMounted, watch } from 'vue';
+import Theme from '/@theme/index';
 import { inBrowser, pathToFile } from './utils';
 import { RouterSymbol, createRouter } from './router';
 import { siteDataRef, useData } from './data';
 import { useUpdateHead } from './composables/head';
-import Theme from '/@theme/index';
 import { usePrefetch } from './composables/preFetch';
 import { dataSymbol, initData } from './data';
 import { Content } from './components/Content';
@@ -33,10 +33,6 @@ export function createApp() {
     app.provide(RouterSymbol, router);
     const data = initData(router.route);
     app.provide(dataSymbol, data);
-    if (inBrowser) {
-        // dynamically update head tags
-        useUpdateHead(router.route, data.site);
-    }
     // install global components
     app.component('Content', Content);
     app.component('ClientOnly', ClientOnly);
@@ -56,7 +52,7 @@ export function createApp() {
             siteData: siteDataRef
         });
     }
-    return { app, router };
+    return { app, router, data };
 }
 function newApp() {
     return import.meta.env.PROD
@@ -77,14 +73,10 @@ function newRouter() {
         if (isInitialPageLoad || initialPath === pageFilePath) {
             pageFilePath = pageFilePath.replace(/\.js$/, '.lean.js');
         }
-        // in browser: native dynamic import
         if (inBrowser) {
             isInitialPageLoad = false;
-            return import(/*@vite-ignore*/ pageFilePath);
         }
-        // SSR: sync require
-        // @ts-ignore
-        return require(pageFilePath);
+        return import(/*@vite-ignore*/ pageFilePath);
     }, NotFound);
 }
 function handleHMR(router) {
@@ -104,9 +96,11 @@ function shouldHotReload(payload) {
     return payloadPath === locationPath;
 }
 if (inBrowser) {
-    const { app, router } = createApp();
+    const { app, router, data } = createApp();
     // wait until page component is fetched before mounting
     router.go().then(() => {
+        // dynamically update head tags
+        useUpdateHead(router.route, data.site);
         app.mount('#app');
     });
 }

package/dist/client/app/router.js

@@ -1,17 +1,22 @@
 import { reactive, inject, markRaw, nextTick, readonly } from 'vue';
-import { inBrowser } from './utils';
+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,
-    // this will be set upon initial page load, which is before
-    // the app is mounted, so it's guaranteed to be available in
-    // components. We just need enough data for 404 pages to render.
-    data: { frontmatter: {} }
+    data: notFoundPageData
 });
 export function createRouter(loadPageModule, fallbackComponent) {
     const route = reactive(getDefaultRoute());
@@ -46,7 +51,7 @@ export function createRouter(loadPageModule, fallbackComponent) {
                 if (!comp) {
                     throw new Error(`Invalid route component: ${comp}`);
                 }
-                route.path = pendingPath;
+                route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = markRaw(comp);
                 route.data = import.meta.env.PROD
                     ? markRaw(JSON.parse(__pageData))
@@ -89,8 +94,9 @@ export function createRouter(loadPageModule, fallbackComponent) {
             }
             if (latestPendingPath === pendingPath) {
                 latestPendingPath = null;
-                route.path = pendingPath;
+                route.path = inBrowser ? pendingPath : withBase(pendingPath);
                 route.component = fallbackComponent ? markRaw(fallbackComponent) : null;
+                route.data = notFoundPageData;
             }
         }
     }
@@ -153,7 +159,7 @@ export function useRoute() {
 function scrollTo(el, hash, smooth = false) {
     let target = null;
     try {
-        target = el.classList.contains('.header-anchor')
+        target = el.classList.contains('header-anchor')
             ? el
             : document.querySelector(decodeURIComponent(hash));
     }

package/dist/client/index.d.ts

@@ -1,129 +1,123 @@
-import { AllowedComponentProps } from 'vue';
-import { App } from 'vue';
-import { Component } from 'vue';
-import { ComponentCustomProps } from 'vue';
-import { ComponentOptions } from 'vue';
-import { ComponentOptionsMixin } from 'vue';
-import { DefineComponent } from 'vue';
-import { EmitsOptions } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { Ref } from 'vue';
-import { RendererElement } from 'vue';
-import { RendererNode } from 'vue';
-import { VNode } from 'vue';
-import { VNodeProps } from 'vue';
-
-export declare const Content: DefineComponent<    {}, () => VNode<RendererNode, RendererElement, {
-[key: string]: any;
-}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {}>>, {}>;
-
-export declare const Debug: ComponentOptions<{}, any, any, any, any, any, any, any>;
-
-export declare interface EnhanceAppContext {
-    app: App;
-    router: Router;
-    siteData: Ref<SiteData>;
-}
-
-export declare type HeadConfig =
-| [string, Record<string, string>]
-| [string, Record<string, string>, string]
-
-export declare interface Header {
-    level: number
-    title: string
-    slug: string
-}
-
-export declare const inBrowser: boolean;
-
-export declare interface LocaleConfig {
-    lang: string
-    title?: string
-    description?: string
-    head?: HeadConfig[]
-    label?: string
-    selectText?: string
-}
-
-export declare interface PageData {
-    relativePath: string
-    title: string
-    description: string
-    headers: Header[]
-    frontmatter: Record<string, any>
-    lastUpdated?: number
-}
-
-export declare interface Route {
-    path: string;
-    data: PageData;
-    component: Component | null;
-}
-
-export declare interface Router {
-    route: Route;
-    go: (href?: string) => Promise<void>;
-}
-
-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[]
-    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
-     * `/zh/`.
-     */
-    langs: Record<
-    string,
-        {
-        /**
-         * Lang attribute as set on the `<html>` element.
-         * @example `en-US`, `zh-CN`
-         */
-        lang: string
-        /**
-         * Label to display in the language menu.
-         * @example `English`, `简体中文`
-         */
-        label: string
-    }
-    >
-}
-
-export declare interface Theme {
-    Layout: Component;
-    NotFound?: Component;
-    enhanceApp?: (ctx: EnhanceAppContext) => void;
-}
-
-export declare function useData<T = any>(): VitePressData<T>;
-
-export declare function useRoute(): Route;
-
-export declare function useRouter(): Router;
-
-export declare interface VitePressData<T = any> {
-    site: Ref<SiteData<T>>;
-    page: Ref<PageData>;
-    theme: Ref<T>;
-    frontmatter: Ref<PageData['frontmatter']>;
-    title: Ref<string>;
-    description: Ref<string>;
-    lang: Ref<string>;
-    localePath: Ref<string>;
-}
-
-export declare function withBase(path: string): string;
-
-export { }
+import * as vue from 'vue';
+import { Component, Ref, App } from 'vue';
+
+// types shared between server and client
+
+
+interface PageData {
+  relativePath: string
+  title: string
+  titleTemplate?: string | boolean
+  description: string
+  headers: Header[]
+  frontmatter: Record<string, any>
+  lastUpdated?: number
+}
+
+interface Header {
+  level: number
+  title: string
+  slug: string
+}
+
+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
+   * `/zh/`.
+   */
+  langs: Record<
+    string,
+    {
+      /**
+       * Lang attribute as set on the `<html>` element.
+       * @example `en-US`, `zh-CN`
+       */
+      lang: string
+      /**
+       * Label to display in the language menu.
+       * @example `English`, `简体中文`
+       */
+      label: string
+    }
+  >
+}
+
+type HeadConfig =
+  | [string, Record<string, string>]
+  | [string, Record<string, string>, string]
+
+interface LocaleConfig {
+  lang: string
+  title?: string
+  titleTemplate?: string | boolean
+  description?: string
+  head?: HeadConfig[]
+  label?: string
+  selectText?: string
+}
+
+declare const inBrowser: boolean;
+
+interface Route {
+    path: string;
+    data: PageData;
+    component: Component | null;
+}
+interface Router {
+    route: Route;
+    go: (href?: string) => Promise<void>;
+}
+declare function useRouter(): Router;
+declare function useRoute(): Route;
+
+interface VitePressData<T = any> {
+    site: Ref<SiteData<T>>;
+    page: Ref<PageData>;
+    theme: Ref<T>;
+    frontmatter: Ref<PageData['frontmatter']>;
+    title: Ref<string>;
+    description: Ref<string>;
+    lang: Ref<string>;
+    localePath: Ref<string>;
+}
+declare function useData<T = any>(): VitePressData<T>;
+
+interface EnhanceAppContext {
+    app: App;
+    router: Router;
+    siteData: Ref<SiteData>;
+}
+interface Theme {
+    Layout: Component;
+    NotFound?: Component;
+    enhanceApp?: (ctx: EnhanceAppContext) => void;
+}
+
+declare function withBase(path: string): string;
+
+declare const Content: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [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 };

package/dist/client/index.js

@@ -8,5 +8,4 @@ export { inBrowser, withBase } from './app/utils';
 // components
 export { Content } from './app/components/Content';
 import _Debug from './app/components/Debug.vue';
-const Debug = _Debug;
-export { Debug };
+export const Debug = _Debug;

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.
  */