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

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

@@ -43,39 +43,33 @@
   --vp-c-text-dark-3: rgba(235, 235, 235, 0.38);
   --vp-c-text-dark-4: rgba(235, 235, 235, 0.18);
 
+  --vp-c-indigo: #213547;
+  --vp-c-indigo-soft: #476582;
+  --vp-c-indigo-light: #aac8e4;
+  --vp-c-indigo-lighter: #c9def1;
+  --vp-c-indigo-dark: #1d2f3f;
+  --vp-c-indigo-darker: #14212e;
+
   --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;
-
-  --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-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);
 }
 
 /**
@@ -109,7 +103,11 @@
 
   --vp-c-brand: var(--vp-c-green);
   --vp-c-brand-light: var(--vp-c-green-light);
+  --vp-c-brand-lighter: var(--vp-c-green-lighter);
   --vp-c-brand-dark: var(--vp-c-green-dark);
+  --vp-c-brand-darker: var(--vp-c-green-darker);
+
+  --vp-c-sponsor: #fd1d7c;
 }
 
 .dark {
@@ -168,8 +166,9 @@
 :root {
   --vp-z-index-local-nav: 10;
   --vp-z-index-nav: 20;
-  --vp-z-backdrop: 30;
+  --vp-z-index-backdrop: 30;
   --vp-z-index-sidebar: 40;
+  --vp-z-index-footer: 50;
 }
 
 /**
@@ -177,7 +176,129 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-layout-max-width: 1376px;
+  --vp-layout-max-width: 1440px;
+}
+
+/**
+ * Component: Code
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-code-line-height: 24px;
+  --vp-code-font-size: 14px;
+
+  --vp-code-block-color: var(--vp-c-text-dark-1);
+  --vp-code-block-bg: #292d3e;
+}
+
+.dark {
+  --vp-code-block-bg: var(--vp-c-bg-sidebar);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-text-dark-1);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+
+  --vp-button-alt-border: var(--vp-c-gray-light-3);
+  --vp-button-alt-text: var(--vp-c-text-light-1);
+  --vp-button-alt-bg: var(--vp-c-gray-light-5);
+  --vp-button-alt-hover-border: var(--vp-c-gray-light-3);
+  --vp-button-alt-hover-text: var(--vp-c-text-light-1);
+  --vp-button-alt-hover-bg: var(--vp-c-gray-light-4);
+  --vp-button-alt-active-border: var(--vp-c-gray-light-3);
+  --vp-button-alt-active-text: var(--vp-c-text-light-1);
+  --vp-button-alt-active-bg: var(--vp-c-gray-light-3);
+
+  --vp-button-sponsor-border: var(--vp-c-gray-light-3);
+  --vp-button-sponsor-text: var(--vp-c-text-light-2);
+  --vp-button-sponsor-bg: transparent;
+  --vp-button-sponsor-hover-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-hover-bg: transparent;
+  --vp-button-sponsor-active-border: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-text: var(--vp-c-sponsor);
+  --vp-button-sponsor-active-bg: transparent;
+}
+
+.dark {
+  --vp-button-brand-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-text: var(--vp-c-text-light-1);
+  --vp-button-brand-bg: var(--vp-c-brand-light);
+  --vp-button-brand-hover-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-hover-text: var(--vp-c-text-light-1);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-lighter);
+  --vp-button-brand-active-border: var(--vp-c-brand-lighter);
+  --vp-button-brand-active-text: var(--vp-c-text-light-1);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+
+  --vp-button-alt-border: var(--vp-c-gray-dark-2);
+  --vp-button-alt-text: var(--vp-c-text-dark-1);
+  --vp-button-alt-bg: var(--vp-c-bg-mute);
+  --vp-button-alt-hover-border: var(--vp-c-gray-dark-2);
+  --vp-button-alt-hover-text: var(--vp-c-text-dark-1);
+  --vp-button-alt-hover-bg: var(--vp-c-gray-dark-3);
+  --vp-button-alt-active-border: var(--vp-c-gray-dark-2);
+  --vp-button-alt-active-text: var(--vp-c-text-dark-1);
+  --vp-button-alt-active-bg: var(--vp-button-alt-bg);
+
+  --vp-button-sponsor-border: var(--vp-c-gray-dark-1);
+  --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);
 }
 
 /**
@@ -185,10 +306,17 @@
  * -------------------------------------------------------------------------- */
 
 :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
  * -------------------------------------------------------------------------- */
@@ -198,17 +326,10 @@
 }
 
 /**
- * Component: Code
+ * Component: Home
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-code-line-height: 24px;
-  --vp-code-font-size: 14px;
-
-  --vp-code-block-color: var(--vp-c-text-dark-1);
-  --vp-code-block-bg: #292d3e;
-}
-
-.dark {
-  --vp-code-block-bg: var(--vp-c-bg-sidebar);
+  --vp-home-hero-name-color: var(--vp-c-brand);
+  --vp-home-hero-name-background: transparent;
 }

package/dist/client/theme-default/support/utils.js

@@ -8,6 +8,25 @@ const hashRef = ref(inBrowser ? location.hash : '');
 export function isExternal(path) {
     return OUTBOUND_RE.test(path);
 }
+export function throttleAndDebounce(fn, delay) {
+    let timeout;
+    let called = false;
+    return () => {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+        if (!called) {
+            fn();
+            called = true;
+            setTimeout(() => {
+                called = false;
+            }, delay);
+        }
+        else {
+            timeout = setTimeout(fn, delay);
+        }
+    };
+}
 export function isActive(currentPath, matchPath, asRegex = false) {
     if (matchPath === undefined) {
         return false;

package/dist/node/cli.js

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

package/dist/node/index.d.ts

@@ -46,6 +46,11 @@ export declare namespace DefaultTheme {
          */
         socialLinks?: SocialLink[]
 
+        /**
+         * The footer configuration.
+         */
+        footer?: Footer
+
         /**
          * Adds locale menu to the nav. This option should be used when you have
          * your translated sites outside of the project.
@@ -150,6 +155,13 @@ export declare namespace DefaultTheme {
     | 'twitter'
     | 'youtube'
 
+    // footer --------------------------------------------------------------------
+
+    export interface Footer {
+        message?: string
+        copyright?: string
+    }
+
     // locales -------------------------------------------------------------------
 
     export interface LocaleLinks {
@@ -210,6 +222,7 @@ export declare interface Header {
 export declare interface LocaleConfig {
     lang: string
     title?: string
+    titleTemplate?: string | boolean
     description?: string
     head?: HeadConfig[]
     label?: string
@@ -272,17 +285,23 @@ export declare interface SiteConfig<ThemeConfig = any> extends Pick<UserConfig,
 
 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
@@ -307,11 +326,13 @@ export declare interface SiteData<ThemeConfig = any> {
 
 export declare interface UserConfig<ThemeConfig = any> {
     extends?: RawConfigExports<ThemeConfig>;
-    lang?: string;
     base?: string;
+    lang?: string;
     title?: string;
+    titleTemplate?: string | boolean;
     description?: string;
     head?: HeadConfig[];
+    appearance?: boolean;
     themeConfig?: ThemeConfig;
     locales?: Record<string, LocaleConfig>;
     markdown?: MarkdownOptions;

package/dist/node/index.js

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

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

@@ -12249,6 +12249,7 @@ globby$2.exports.gitignore = gitignore;
 var globby = globby$2.exports;
 
 const EXTERNAL_URL_RE = /^https?:/i;
+const APPEARANCE_KEY = "vitepress-theme-appearance";
 const inBrowser = typeof window !== "undefined";
 function findMatchRoot(route, roots) {
   roots.sort((a, b) => {
@@ -12292,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;
@@ -13449,19 +13469,42 @@ function isObject$3(value) {
   return Object.prototype.toString.call(value) === "[object Object]";
 }
 async function resolveSiteData(root, userConfig, command = "serve", mode = "development") {
+  var _a;
   userConfig = userConfig || (await resolveUserConfig(root, command, mode))[0];
   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: userConfig.head || [],
+    head: resolveSiteDataHead(userConfig),
+    appearance: (_a = userConfig.appearance) != null ? _a : true,
     themeConfig: userConfig.themeConfig || {},
     locales: userConfig.locales || {},
     langs: createLangDictionary(userConfig),
     scrollOffset: userConfig.scrollOffset || 90
   };
 }
+function resolveSiteDataHead(userConfig) {
+  var _a, _b;
+  const head = (_a = userConfig == null ? void 0 : userConfig.head) != null ? _a : [];
+  if ((_b = userConfig == null ? void 0 : userConfig.appearance) != null ? _b : true) {
+    head.push([
+      "script",
+      {},
+      `
+        ;(() => {
+          const saved = localStorage.getItem('${APPEARANCE_KEY}')
+          const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+          if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+            document.documentElement.classList.add('dark')
+          }
+        })()
+      `
+    ]);
+  }
+  return head;
+}
 
 var toString = Object.prototype.toString;
 
@@ -34933,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>
 `
@@ -34949,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>
@@ -37180,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 || [],
@@ -37228,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());
@@ -40928,7 +40969,8 @@ 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 = "";
   if (config.mpa && result) {
@@ -40949,7 +40991,7 @@ async function renderPage(config, page, result, appChunk, cssChunk, pageToHashMa
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>${title}</title>
-    <meta name="description" content="${pageData.description || siteData.description}">
+    <meta name="description" content="${description}">
     ${stylesheetLink}
     ${preloadLinksString}
     ${prefetchLinkString}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "vitepress",
-  "version": "1.0.0-draft.1",
+  "version": "1.0.0-draft.4",
+  "packageManager": "pnpm@7.0.1",
   "description": "Vite & Vue powered static site generator",
   "main": "dist/node/index.js",
   "typings": "types/index.d.ts",

package/types/default-theme.d.ts

@@ -29,6 +29,11 @@ export namespace DefaultTheme {
      */
     socialLinks?: SocialLink[]
 
+    /**
+     * The footer configuration.
+     */
+    footer?: Footer
+
     /**
      * Adds locale menu to the nav. This option should be used when you have
      * your translated sites outside of the project.
@@ -133,6 +138,13 @@ export namespace DefaultTheme {
     | 'twitter'
     | 'youtube'
 
+  // footer --------------------------------------------------------------------
+
+  export interface Footer {
+    message?: string
+    copyright?: string
+  }
+
   // locales -------------------------------------------------------------------
 
   export interface LocaleLinks {

package/types/shared.d.ts

@@ -5,25 +5,38 @@ export { DefaultTheme } from './default-theme'
 export interface PageData {
   relativePath: string
   title: string
+  titleTemplate?: string | boolean
   description: string
   headers: Header[]
   frontmatter: Record<string, any>
   lastUpdated?: number
 }
 
+export interface Header {
+  level: number
+  title: string
+  slug: string
+}
+
 export 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
@@ -50,15 +63,10 @@ export type HeadConfig =
   | [string, Record<string, string>]
   | [string, Record<string, string>, string]
 
-export interface Header {
-  level: number
-  title: string
-  slug: string
-}
-
 export interface LocaleConfig {
   lang: string
   title?: string
+  titleTemplate?: string | boolean
   description?: string
   head?: HeadConfig[]
   label?: string