vitepress 1.0.0-draft.2 → 1.0.0-draft.5

package/README.md

@@ -1,4 +1,4 @@
-# (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)
@@ -7,6 +7,8 @@
 
 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
 
 To check out docs, visit [vitepress.vuejs.org](https://vitepress.vuejs.org).

package/bin/vitepress.js

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

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

@@ -73,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) {

package/dist/client/index.d.ts

@@ -1,134 +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[]
-    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
-    }
-    >
-}
-
-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

@@ -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/Layout.vue

@@ -33,6 +33,13 @@ provide('close-sidebar', closeSidebar)
       <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>
+
+      <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>
+      <template #aside-outline-after><slot name="aside-outline-after" /></template>
+      <template #aside-ads-before><slot name="aside-ads-before" /></template>
+      <template #aside-ads-after><slot name="aside-ads-after" /></template>
     </VPContent>
 
     <VPFooter />

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

@@ -2,23 +2,83 @@
 import { useData } from 'vitepress'
 
 const { site } = useData()
-
-const msgs = [
-  `There's nothing here.`,
-  `How did we get here?`,
-  `That's a Four-Oh-Four.`,
-  `Looks like we've got some broken links.`
-]
-
-function getMsg() {
-  return msgs[Math.floor(Math.random() * msgs.length)]
-}
 </script>
 
 <template>
   <div class="NotFound">
-    <h1>404</h1>
-    <blockquote>{{ getMsg() }}</blockquote>
-    <a :href="site.base" aria-label="go to home">Take me home.</a>
+    <p class="code">404</p>
+    <h1 class="title">PAGE NOT FOUND</h1>
+    <div class="divider" />
+    <blockquote class="quote">
+      But if you don't change your direction, and if you keep looking, you may end up where you are heading.
+    </blockquote>
+
+    <div class="action">
+      <a class="link" :href="site.base" aria-label="go to home">
+        Take me home
+      </a>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.NotFound {
+  padding: 64px 24px 96px;
+  text-align: center;
+}
+
+@media (min-width: 768px) {
+  .NotFound {
+    padding: 96px 32px 168px;
+  }
+}
+
+.code {
+  line-height: 64px;
+  font-size: 64px;
+  font-weight: 600;
+}
+
+.title {
+  padding-top: 12px;
+  letter-spacing: 2px;
+  line-height: 20px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.divider {
+  margin: 24px auto 18px;
+  width: 64px;
+  height: 1px;
+  background-color: var(--vp-c-divider)
+}
+
+.quote {
+  margin: 0 auto;
+  max-width: 256px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+}
+
+.action {
+  padding-top: 20px;
+}
+
+.link {
+  display: inline-block;
+  border: 1px solid var(--vp-c-brand);
+  border-radius: 16px;
+  padding: 3px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-brand);
+  transition: border-color 0.25s, color .25s;
+}
+
+.link:hover {
+  border-color: var(--vp-c-brand-dark);
+  color: var(--vp-c-brand-dark);
+}
+</style>

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

@@ -23,10 +23,6 @@ defineProps<{
   background-color: var(--vp-c-bg-soft);
 }
 
-.dark .VPBox {
-  background-color: var(--vp-c-bg-mute);
-}
-
 .icon {
   display: flex;
   justify-content: center;
@@ -40,7 +36,7 @@ defineProps<{
 }
 
 .dark .icon {
-  background-color: var(--vp-c-bg-soft);
+  background-color: var(--vp-c-bg);
 }
 
 .title {

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

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { useData } from 'vitepress'
+import { useAside } from '../composables/aside'
+
+const { theme } = useData()
+const carbonOptions = theme.value.carbonAds
+const { isAsideEnabled } = useAside()
+const container = ref()
+
+let hasInitalized = false
+
+function init() {
+  if (!hasInitalized) {
+    hasInitalized = true
+    const s = document.createElement('script')
+    s.id = '_carbonads_js'
+    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}`
+    s.async = true
+    container.value.appendChild(s)
+  }
+}
+
+// no need to account for option changes during dev, we can just
+// refresh the page
+if (carbonOptions) {
+  onMounted(() => {
+    // if the page is loaded when aside is active, load carbon directly.
+    // otherwise, only load it if the page resizes to wide enough. this avoids
+    // loading carbon at all on mobile where it's never shown
+    if (isAsideEnabled.value) {
+      init()
+    } else {
+      watch(isAsideEnabled, (wide) => wide && init())
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="VPCarbonAds" ref="container" />
+</template>
+
+<style>
+.VPCarbonAds {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  border-radius: 12px;
+  min-height: 240px;
+  text-align: center;
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: var(--vp-c-bg-soft);
+  transition: color 0.5s, background-color 0.5s;
+}
+
+.VPCarbonAds img {
+  margin: 0 auto;
+  border-radius: 6px;
+}
+
+.VPCarbonAds .carbon-text {
+  display: block;
+  margin: 0 auto;
+  padding-top: 12px;
+  color: var(--vp-c-text-1);
+  transition: color 0.25s;
+}
+
+.VPCarbonAds .carbon-text:hover {
+  color: var(--vp-c-brand);
+}
+
+.VPCarbonAds .carbon-poweredby {
+  display: block;
+  padding-top: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--vp-c-text-2);
+  text-transform: uppercase;
+  transition: color 0.25s;
+}
+
+.VPCarbonAds .carbon-poweredby:hover {
+  color: var(--vp-c-text-1);
+}
+</style>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useRoute, useData } from 'vitepress'
+import { useCopyCode } from '../composables/copy-code'
 import { useSidebar } from '../composables/sidebar'
 import NotFound from '../NotFound.vue'
 import VPPage from './VPPage.vue'
@@ -9,6 +10,8 @@ import VPDoc from './VPDoc.vue'
 const route = useRoute()
 const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
+
+useCopyCode()
 </script>
 
 <template>
@@ -31,15 +34,23 @@ const { hasSidebar } = useSidebar()
       <template #home-features-after><slot name="home-features-after" /></template>
     </VPHome>
 
-    <VPDoc v-else :class="{ 'has-sidebar': hasSidebar }" />
+    <VPDoc v-else>
+      <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>
+      <template #aside-ads-before><slot name="aside-ads-before" /></template>
+      <template #aside-ads-after><slot name="aside-ads-after" /></template>
+      <template #aside-bottom><slot name="aside-bottom" /></template>
+    </VPDoc>
   </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 +58,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 +66,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>