vitepress 1.0.0-alpha.21 → 1.0.0-alpha.23

package/README.md

@@ -2,6 +2,7 @@
 
 [![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)
+[![chat](https://img.shields.io/badge/chat-discord-blue?logo=discord)](https://chat.vuejs.org)
 
 ---
 

package/dist/client/app/data.js

@@ -1,4 +1,4 @@
-import { shallowRef, readonly, computed, inject } from 'vue';
+import { computed, inject, readonly, ref, shallowRef } from 'vue';
 import siteData from '@siteData';
 import { resolveSiteDataByRoute, createTitle } from '../shared.js';
 import { withBase } from './utils.js';
@@ -32,7 +32,8 @@ export function initData(route) {
         }),
         description: computed(() => {
             return route.data.description || site.value.description;
-        })
+        }),
+        isDark: ref(false)
     };
 }
 export function useData() {

package/dist/client/index.d.ts

@@ -28,6 +28,7 @@ interface VitePressData<T = any> {
     description: Ref<string>;
     lang: Ref<string>;
     localePath: Ref<string>;
+    isDark: Ref<boolean>;
 }
 declare function useData<T = any>(): VitePressData<T>;
 

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

@@ -63,7 +63,7 @@ const NotFound = inject('NotFound')
 
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: var(--vp-nav-height);
+    padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
   }
 
   .VPContent.has-sidebar {

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

@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px));
   padding-bottom: 32px;
 }
 

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

@@ -53,19 +53,19 @@ defineProps<{
 
 <style scoped>
 .VPHero {
-  margin-top: calc(var(--vp-nav-height) * -1);
-  padding: calc(var(--vp-nav-height) + 48px) 24px 48px;
+  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
   }
 }
 

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

@@ -29,7 +29,7 @@ provide('close-screen', closeScreen)
 <style scoped>
 .VPNav {
   position: relative;
-  top: 0;
+  top: var(--vp-layout-top-height, 0px);
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;

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

@@ -43,7 +43,7 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: var(--vp-nav-height-mobile);
+  top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px));
   right: 0;
   bottom: 0;
   left: 0;

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

@@ -59,7 +59,7 @@ watchPostEffect(async () => {
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: 0;
+  top: var(--vp-layout-top-height, 0px);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);

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

@@ -41,7 +41,7 @@ function toggle() {
       :role="collapsible ? 'button' : undefined"
       @click="toggle"
     >
-      <h2 class="title-text">{{ text }}</h2>
+      <h2 v-html="text" class="title-text"></h2>
       <div class="action">
         <VPIconMinusSquare class="icon minus" />
         <VPIconPlusSquare class="icon plus" />

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

@@ -25,7 +25,7 @@ const closeSideBar = inject('close-sidebar') as () => void
     :href="item.link"
     @click="closeSideBar"
   >
-    <span class="link-text" :class="{ light: depth > 1 }">{{ item.text }}</span>
+    <span v-html="item.text" class="link-text" :class="{ light: depth > 1 }"></span>
   </VPLink>
   <template
     v-if="'items' in item && depth < maxDepth"

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

@@ -1,10 +1,12 @@
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import { useData } from 'vitepress'
 import { APPEARANCE_KEY } from '../../shared.js'
 import VPSwitch from './VPSwitch.vue'
 import VPIconSun from './icons/VPIconSun.vue'
 import VPIconMoon from './icons/VPIconMoon.vue'
 
+const { site, isDark } = useData()
 const checked = ref(false)
 const toggle = typeof localStorage !== 'undefined' ? useAppearance() : () => {}
 
@@ -16,11 +18,13 @@ function useAppearance() {
   const query = window.matchMedia('(prefers-color-scheme: dark)')
   const classList = document.documentElement.classList
 
-  let userPreference = localStorage.getItem(APPEARANCE_KEY) || 'auto'
+  let userPreference =
+    localStorage.getItem(APPEARANCE_KEY) || site.value.appearance !== true
+      ? site.value.appearance
+      : 'auto'
 
-  let isDark = userPreference === 'auto'
-    ? query.matches
-    : userPreference === 'dark'
+  let isDark =
+    userPreference === 'auto' ? query.matches : userPreference === 'dark'
 
   query.onchange = (e) => {
     if (userPreference === 'auto') {
@@ -64,6 +68,10 @@ function useAppearance() {
 
   return toggle
 }
+
+watch(checked, (newIsDark) => {
+  isDark.value = newIsDark
+})
 </script>
 
 <template>

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

@@ -26,7 +26,7 @@ body {
   color: var(--vp-c-text-1);
   background-color: var(--vp-c-bg);
   direction: ltr;
-  font-synthesis: none;
+  font-synthesis: style;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

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

@@ -329,6 +329,62 @@
   display: inline-block;
 }
 
+.vp-doc [class*='language-'] code .highlighted.error {
+  background-color: var(--vp-code-line-error-color);
+}
+
+.vp-doc [class*='language-'] code .highlighted.warning {
+  background-color: var(--vp-code-line-warning-color);
+}
+
+.vp-doc [class*='language-'] code .diff {
+  transition: background-color 0.5s;
+  margin: 0 -24px;
+  padding: 0 24px;
+  width: calc(100% + 2 * 24px);
+  display: inline-block;
+}
+
+.vp-doc [class*='language-'] code .diff::before {
+  position: absolute;
+  left: 1rem;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0.095rem);
+  opacity: 0.4;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.vp-doc [class*='language-'] .has-focused-lines .line:not(.has-focus) {
+  opacity: 0.7;
+  transition: filter 0.35s, opacity 0.35s;
+}
+
+.vp-doc [class*='language-']:hover .has-focused-lines .line:not(.has-focus) {
+  filter: blur(0);
+  opacity: 1;
+}
+
+.vp-doc [class*='language-'] code .diff.remove {
+  background-color: var(--vp-code-line-diff-remove-color);
+  opacity: 0.7;
+}
+
+.vp-doc [class*='language-'] code .diff.remove::before {
+  content: '-';
+  color: var(--vp-code-line-diff-remove-symbol-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add {
+  background-color: var(--vp-code-line-diff-add-color);
+}
+
+.vp-doc [class*='language-'] code .diff.add::before {
+  content: '+';
+  color: var(--vp-code-line-diff-add-symbol-color);
+}
+
 .vp-doc div[class*='language-'].line-numbers-mode {
   padding-left: 32px;
 }

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

@@ -1,3 +1,7 @@
+/* webfont-marker-begin */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
+/* webfont-marker-end */
+
 @font-face {
   font-family: 'Inter var';
   font-weight: 100 900;

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

@@ -145,9 +145,9 @@
  * -------------------------------------------------------------------------- */
 
 :root {
-  --vp-font-family-base: 'Inter var experimental', 'Inter var', ui-sans-serif,
-    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
+  --vp-font-family-base: 'Inter var experimental', 'Inter var', 'Inter',
+    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    Roboto, 'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --vp-font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco,
     Consolas, 'Liberation Mono', 'Courier New', monospace;
@@ -172,9 +172,10 @@
 :root {
   --vp-z-index-local-nav: 10;
   --vp-z-index-nav: 20;
-  --vp-z-index-backdrop: 30;
-  --vp-z-index-sidebar: 40;
-  --vp-z-index-footer: 50;
+  --vp-z-index-layout-top: 30;
+  --vp-z-index-backdrop: 40;
+  --vp-z-index-sidebar: 50;
+  --vp-z-index-footer: 60;
 }
 
 /**
@@ -208,6 +209,15 @@
   --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
   --vp-code-line-number-color: var(--vp-c-text-dark-3);
 
+  --vp-code-line-diff-add-color: rgba(125, 191, 123, 0.1);
+  --vp-code-line-diff-add-symbol-color: rgba(125, 191, 123, 0.5);
+
+  --vp-code-line-diff-remove-color: rgba(255, 128, 128, 0.05);
+  --vp-code-line-diff-remove-symbol-color: rgba(255, 128, 128, 0.5);
+
+  --vp-code-line-error-color: var(--vp-c-red-dimm-2);
+  --vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);
+
   --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
   --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
 }

package/dist/node/cli.js

@@ -1,5 +1,4 @@
-import { p as picocolors, g as build, s as serve, e as createServer } from './serve-ce51a050.js';
-import 'shiki';
+import { p as picocolors, g as build, s as serve, e as createServer } from './serve-afe9b056.js';
 import 'fs';
 import 'path';
 import 'url';
@@ -13,6 +12,7 @@ import 'events';
 import 'stream';
 import 'buffer';
 import 'child_process';
+import 'shiki-processor';
 import 'module';
 import 'util';
 import 'net';
@@ -271,7 +271,7 @@ function isConstructorOrProto (obj, key) {
     return key === 'constructor' && typeof obj[key] === 'function' || key === '__proto__';
 }
 
-var version = "1.0.0-alpha.21";
+var version = "1.0.0-alpha.23";
 
 const argv = minimist(process.argv.slice(2));
 console.log(picocolors.exports.cyan(`vitepress v${version}`));
@@ -296,7 +296,9 @@ if (!command || command === "dev") {
     process.exit(1);
   });
 } else if (command === "build") {
-  build(root, argv).catch((err) => {
+  build(root, argv).then(() => {
+    process.exit();
+  }).catch((err) => {
     console.error(picocolors.exports.red(`build error:
 `), err);
     process.exit(1);

package/dist/node/index.d.ts

@@ -1729,7 +1729,7 @@ interface UserConfig<ThemeConfig = any> {
     titleTemplate?: string | boolean;
     description?: string;
     head?: HeadConfig[];
-    appearance?: boolean;
+    appearance?: boolean | 'dark';
     themeConfig?: ThemeConfig;
     locales?: Record<string, LocaleConfig>;
     markdown?: MarkdownOptions;
@@ -1774,6 +1774,15 @@ interface UserConfig<ThemeConfig = any> {
      * @default 'disabled'
      */
     cleanUrls?: CleanUrlsMode;
+    /**
+     * Use web fonts instead of emitting font files to dist.
+     * The used theme should import a file named `fonts.(s)css` for this to work.
+     * If you are a theme author, to support this, place your web font import
+     * between `webfont-marker-begin` and `webfont-marker-end` comments.
+     *
+     * @default true in webcontainers, else false
+     */
+    useWebFonts?: boolean;
     /**
      * Build end hook: called when SSG finish.
      * @param siteConfig The resolved configuration.
@@ -1789,6 +1798,12 @@ interface UserConfig<ThemeConfig = any> {
      * HTML transform hook: runs before writing HTML to dist.
      */
     transformHtml?: (code: string, id: string, ctx: TransformContext) => Awaitable<string | void>;
+    /**
+     * PageData transform hook: runs when rendering markdown to vue
+     */
+    transformPageData?: (pageData: PageData) => Awaitable<Partial<PageData> | {
+        [key: string]: any;
+    } | void>;
 }
 interface TransformContext {
     siteConfig: SiteConfig;
@@ -1800,7 +1815,7 @@ interface TransformContext {
     content: string;
 }
 declare type RawConfigExports<ThemeConfig = any> = Awaitable<UserConfig<ThemeConfig>> | (() => Awaitable<UserConfig<ThemeConfig>>);
-interface SiteConfig<ThemeConfig = any> extends Pick<UserConfig, 'markdown' | 'vue' | 'vite' | 'shouldPreload' | 'mpa' | 'lastUpdated' | 'ignoreDeadLinks' | 'cleanUrls' | 'buildEnd' | 'transformHead' | 'transformHtml'> {
+interface SiteConfig<ThemeConfig = any> extends Pick<UserConfig, 'markdown' | 'vue' | 'vite' | 'shouldPreload' | 'mpa' | 'lastUpdated' | 'ignoreDeadLinks' | 'cleanUrls' | 'useWebFonts' | 'buildEnd' | 'transformHead' | 'transformHtml' | 'transformPageData'> {
     root: string;
     srcDir: string;
     site: SiteData<ThemeConfig>;

package/dist/node/index.js

@@ -1,4 +1,4 @@
-export { g as build, f as createMarkdownRenderer, e as createServer, d as defineConfig, a as defineConfigWithTheme, r as resolveConfig, b as resolveSiteData, c as resolveSiteDataByRoute, s as serve } from './serve-ce51a050.js';
+export { g as build, f as createMarkdownRenderer, e as createServer, d as defineConfig, a as defineConfigWithTheme, r as resolveConfig, b as resolveSiteData, c as resolveSiteDataByRoute, s as serve } from './serve-afe9b056.js';
 import 'dns';
 import 'vite';
 import 'path';
@@ -12,7 +12,7 @@ import 'buffer';
 import 'url';
 import 'fs';
 import 'child_process';
-import 'shiki';
+import 'shiki-processor';
 import 'module';
 import 'util';
 import 'net';

package/dist/node/{serve-ce51a050.js → serve-afe9b056.js}

@@ -12,7 +12,7 @@ import { fileURLToPath, URL, pathToFileURL } from 'url';
 import * as require$$0$4 from 'fs';
 import require$$0__default, { readdirSync, statSync as statSync$1 } from 'fs';
 import require$$0$9 from 'child_process';
-import { getHighlighter } from 'shiki';
+import { defineProcessor, createRangeProcessor, createFocusProcessor, createHighlightProcessor, createDiffProcessor, getHighlighter, addClass } from 'shiki-processor';
 import { createRequire } from 'module';
 import require$$1 from 'util';
 import require$$4 from 'net';
@@ -10774,9 +10774,11 @@ async function resolveConfig(root = process.cwd(), command = "serve", mode = "de
     mpa: !!userConfig.mpa,
     ignoreDeadLinks: userConfig.ignoreDeadLinks,
     cleanUrls: userConfig.cleanUrls || "disabled",
+    useWebFonts: userConfig.useWebFonts ?? typeof process.versions.webcontainer === "string",
     buildEnd: userConfig.buildEnd,
     transformHead: userConfig.transformHead,
-    transformHtml: userConfig.transformHtml
+    transformHtml: userConfig.transformHtml,
+    transformPageData: userConfig.transformPageData
   };
   return config;
 }
@@ -10858,14 +10860,15 @@ async function resolveSiteData(root, userConfig, command = "serve", mode = "deve
 function resolveSiteDataHead(userConfig) {
   const head = (userConfig == null ? void 0 : userConfig.head) ?? [];
   if ((userConfig == null ? void 0 : userConfig.appearance) ?? true) {
+    const fallbackPreference = (userConfig == null ? void 0 : userConfig.appearance) !== true ? (userConfig == null ? void 0 : userConfig.appearance) ?? "" : "auto";
     head.push([
       "script",
       { id: "check-dark-light" },
       `
         ;(() => {
-          const saved = localStorage.getItem('${APPEARANCE_KEY}')
-          const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-          if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+          const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
+          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+          if (!preference || preference === 'auto' ? prefersDark : preference === 'dark') {
             document.documentElement.classList.add('dark')
           }
         })()
@@ -34764,23 +34767,65 @@ const attrsToLines = (attrs) => {
     classes: ["highlighted"]
   }));
 };
+const errorLevelProcessor = defineProcessor({
+  name: "error-level",
+  handler: createRangeProcessor({
+    error: ["highlighted", "error"],
+    warning: ["highlighted", "warning"]
+  })
+});
 async function highlight(theme = "material-palenight") {
   const hasSingleTheme = typeof theme === "string" || "name" in theme;
   const getThemeName = (themeValue) => typeof themeValue === "string" ? themeValue : themeValue.name;
+  const processors = [
+    createFocusProcessor(),
+    createHighlightProcessor({ hasHighlightClass: "highlighted" }),
+    createDiffProcessor(),
+    errorLevelProcessor
+  ];
   const highlighter = await getHighlighter({
-    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light]
+    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light],
+    processors
   });
-  const preRE = /^<pre.*?>/;
+  const styleRE = /<pre .* (style=".*")><code>/;
+  const preRE = /^<pre(.*?)>/;
   const vueRE = /-vue$/;
   return (str, lang, attrs) => {
     const vPre = vueRE.test(lang) ? "" : "v-pre";
     lang = lang.replace(vueRE, "").toLowerCase();
     const lineOptions = attrsToLines(attrs);
+    const cleanup = (str2) => str2.replace(preRE, (_, attributes) => `<pre ${vPre}${attributes}>`).replace(styleRE, (_, style) => _.replace(style, ""));
     if (hasSingleTheme) {
-      return highlighter.codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme) }).replace(preRE, `<pre ${vPre}>`);
+      return cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme)
+        })
+      );
     }
-    const dark = highlighter.codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.dark) }).replace(preRE, `<pre ${vPre} class="vp-code-dark">`);
-    const light = highlighter.codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.light) }).replace(preRE, `<pre ${vPre} class="vp-code-light">`);
+    const dark = addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.dark)
+        })
+      ),
+      "vp-code-dark",
+      "pre"
+    );
+    const light = addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.light)
+        })
+      ),
+      "vp-code-light",
+      "pre"
+    );
     return dark + light;
   };
 }
@@ -35575,7 +35620,7 @@ const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
 function clearCache() {
   cache$1.clear();
 }
-async function createMarkdownToVueRenderFn(srcDir, options = {}, pages, userDefines, isBuild = false, base = "/", includeLastUpdatedData = false, cleanUrls = "disabled") {
+async function createMarkdownToVueRenderFn(srcDir, options = {}, pages, userDefines, isBuild = false, base = "/", includeLastUpdatedData = false, cleanUrls = "disabled", siteConfig = null) {
   const md = await createMarkdownRenderer(srcDir, options, base);
   pages = pages.map((p) => slash(p.replace(/\.md$/, "")));
   const replaceRegex = genReplaceRegexp(userDefines, isBuild);
@@ -35651,7 +35696,7 @@ If it is intended, you can use:
         }
       }
     }
-    const pageData = {
+    let pageData = {
       title: inferTitle(md, frontmatter, title),
       titleTemplate: frontmatter.titleTemplate,
       description: inferDescription(frontmatter),
@@ -35662,6 +35707,15 @@ If it is intended, you can use:
     if (includeLastUpdatedData) {
       pageData.lastUpdated = await getGitTimestamp(file);
     }
+    if (siteConfig == null ? void 0 : siteConfig.transformPageData) {
+      const dataToMerge = await siteConfig.transformPageData(pageData);
+      if (dataToMerge) {
+        pageData = {
+          ...pageData,
+          ...dataToMerge
+        };
+      }
+    }
     const vueSrc = [
       ...injectPageDataCode(
         (sfcBlocks == null ? void 0 : sfcBlocks.scripts.map((item) => item.content)) ?? [],
@@ -35837,6 +35891,22 @@ const staticDataPlugin = {
   }
 };
 
+const webfontMarkerRE = /\/(?:\*|\/) *webfont-marker-begin *(?:\*\/|\n|\r|\n\r|\r\n)([^]*?)\/(?:\*|\/) *webfont-marker-end *(?:\*\/|\n|\r|\n\r|\r\n|$)/;
+const webFontsPlugin = (enabled = false) => ({
+  name: "vitepress:webfonts",
+  enforce: "pre",
+  transform(code, id) {
+    var _a;
+    if (/[\\/]fonts\.s?css/.test(id)) {
+      if (enabled) {
+        return (_a = code.match(webfontMarkerRE)) == null ? void 0 : _a[1];
+      } else {
+        return code.replace(webfontMarkerRE, "");
+      }
+    }
+  }
+});
+
 const hashRE = /\.(\w+)\.js$/;
 const staticInjectMarkerRE = /\b(const _hoisted_\d+ = \/\*(?:#|@)__PURE__\*\/\s*createStaticVNode)\("(.*)", (\d+)\)/g;
 const staticStripRE = /['"`]__VP_STATIC_START__[^]*?__VP_STATIC_END__['"`]/g;
@@ -35888,7 +35958,8 @@ async function createVitePressPlugin(siteConfig, ssr = false, pageToHashMap, cli
         config.command === "build",
         config.base,
         lastUpdated,
-        cleanUrls
+        cleanUrls,
+        siteConfig
       );
     },
     config() {
@@ -36070,6 +36141,7 @@ ${path$s.relative(
   return [
     vitePressPlugin,
     vuePlugin,
+    webFontsPlugin(siteConfig.useWebFonts),
     ...(userViteConfig == null ? void 0 : userViteConfig.plugins) || [],
     staticDataPlugin
   ];

package/dist/node-cjs/cli.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
-var serve = require('./serve-a3f7cc3d.cjs');
-require('shiki');
+var serve = require('./serve-350713c3.cjs');
 require('fs');
 require('path');
 require('url');
@@ -15,6 +14,7 @@ require('events');
 require('stream');
 require('buffer');
 require('child_process');
+require('shiki-processor');
 require('module');
 require('util');
 require('net');
@@ -273,7 +273,7 @@ function isConstructorOrProto (obj, key) {
     return key === 'constructor' && typeof obj[key] === 'function' || key === '__proto__';
 }
 
-var version = "1.0.0-alpha.21";
+var version = "1.0.0-alpha.23";
 
 const argv = minimist(process.argv.slice(2));
 console.log(serve.picocolors.exports.cyan(`vitepress v${version}`));
@@ -298,7 +298,9 @@ if (!command || command === "dev") {
     process.exit(1);
   });
 } else if (command === "build") {
-  serve.build(root, argv).catch((err) => {
+  serve.build(root, argv).then(() => {
+    process.exit();
+  }).catch((err) => {
     console.error(serve.picocolors.exports.red(`build error:
 `), err);
     process.exit(1);

package/dist/node-cjs/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var serve = require('./serve-a3f7cc3d.cjs');
+var serve = require('./serve-350713c3.cjs');
 require('dns');
 require('vite');
 require('path');
@@ -16,7 +16,7 @@ require('buffer');
 require('url');
 require('fs');
 require('child_process');
-require('shiki');
+require('shiki-processor');
 require('module');
 require('util');
 require('net');

package/dist/node-cjs/{serve-a3f7cc3d.cjs → serve-350713c3.cjs}

@@ -13,7 +13,7 @@ var require$$0$a = require('buffer');
 var url = require('url');
 var require$$0$6 = require('fs');
 var require$$0$9 = require('child_process');
-var shiki = require('shiki');
+var shikiProcessor = require('shiki-processor');
 var module$1 = require('module');
 var require$$1 = require('util');
 var require$$4 = require('net');
@@ -9681,8 +9681,8 @@ function sanitizeFileName(name) {
   return driveLetter + name.slice(driveLetter.length).replace(INVALID_CHAR_REGEX, "_").replace(/(^|\/)_+(?=[^/]*$)/, "$1");
 }
 
-const require$1 = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-a3f7cc3d.cjs', document.baseURI).href)));
-const PKG_ROOT = path$s.resolve(url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-a3f7cc3d.cjs', document.baseURI).href))), "../..");
+const require$1 = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-350713c3.cjs', document.baseURI).href)));
+const PKG_ROOT = path$s.resolve(url.fileURLToPath((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-350713c3.cjs', document.baseURI).href))), "../..");
 const DIST_CLIENT_PATH = path$s.resolve(PKG_ROOT, "client");
 const APP_PATH = path$s.join(DIST_CLIENT_PATH, "app");
 path$s.join(DIST_CLIENT_PATH, "shared");
@@ -10814,9 +10814,11 @@ async function resolveConfig(root = process.cwd(), command = "serve", mode = "de
     mpa: !!userConfig.mpa,
     ignoreDeadLinks: userConfig.ignoreDeadLinks,
     cleanUrls: userConfig.cleanUrls || "disabled",
+    useWebFonts: userConfig.useWebFonts ?? typeof process.versions.webcontainer === "string",
     buildEnd: userConfig.buildEnd,
     transformHead: userConfig.transformHead,
-    transformHtml: userConfig.transformHtml
+    transformHtml: userConfig.transformHtml,
+    transformPageData: userConfig.transformPageData
   };
   return config;
 }
@@ -10898,14 +10900,15 @@ async function resolveSiteData(root, userConfig, command = "serve", mode = "deve
 function resolveSiteDataHead(userConfig) {
   const head = (userConfig == null ? void 0 : userConfig.head) ?? [];
   if ((userConfig == null ? void 0 : userConfig.appearance) ?? true) {
+    const fallbackPreference = (userConfig == null ? void 0 : userConfig.appearance) !== true ? (userConfig == null ? void 0 : userConfig.appearance) ?? "" : "auto";
     head.push([
       "script",
       { id: "check-dark-light" },
       `
         ;(() => {
-          const saved = localStorage.getItem('${APPEARANCE_KEY}')
-          const prefereDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-          if (!saved || saved === 'auto' ? prefereDark : saved === 'dark') {
+          const preference = localStorage.getItem('${APPEARANCE_KEY}') || '${fallbackPreference}'
+          const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+          if (!preference || preference === 'auto' ? prefersDark : preference === 'dark') {
             document.documentElement.classList.add('dark')
           }
         })()
@@ -34804,23 +34807,65 @@ const attrsToLines = (attrs) => {
     classes: ["highlighted"]
   }));
 };
+const errorLevelProcessor = shikiProcessor.defineProcessor({
+  name: "error-level",
+  handler: shikiProcessor.createRangeProcessor({
+    error: ["highlighted", "error"],
+    warning: ["highlighted", "warning"]
+  })
+});
 async function highlight(theme = "material-palenight") {
   const hasSingleTheme = typeof theme === "string" || "name" in theme;
   const getThemeName = (themeValue) => typeof themeValue === "string" ? themeValue : themeValue.name;
-  const highlighter = await shiki.getHighlighter({
-    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light]
+  const processors = [
+    shikiProcessor.createFocusProcessor(),
+    shikiProcessor.createHighlightProcessor({ hasHighlightClass: "highlighted" }),
+    shikiProcessor.createDiffProcessor(),
+    errorLevelProcessor
+  ];
+  const highlighter = await shikiProcessor.getHighlighter({
+    themes: hasSingleTheme ? [theme] : [theme.dark, theme.light],
+    processors
   });
-  const preRE = /^<pre.*?>/;
+  const styleRE = /<pre .* (style=".*")><code>/;
+  const preRE = /^<pre(.*?)>/;
   const vueRE = /-vue$/;
   return (str, lang, attrs) => {
     const vPre = vueRE.test(lang) ? "" : "v-pre";
     lang = lang.replace(vueRE, "").toLowerCase();
     const lineOptions = attrsToLines(attrs);
+    const cleanup = (str2) => str2.replace(preRE, (_, attributes) => `<pre ${vPre}${attributes}>`).replace(styleRE, (_, style) => _.replace(style, ""));
     if (hasSingleTheme) {
-      return highlighter.codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme) }).replace(preRE, `<pre ${vPre}>`);
+      return cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme)
+        })
+      );
     }
-    const dark = highlighter.codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.dark) }).replace(preRE, `<pre ${vPre} class="vp-code-dark">`);
-    const light = highlighter.codeToHtml(str, { lang, lineOptions, theme: getThemeName(theme.light) }).replace(preRE, `<pre ${vPre} class="vp-code-light">`);
+    const dark = shikiProcessor.addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.dark)
+        })
+      ),
+      "vp-code-dark",
+      "pre"
+    );
+    const light = shikiProcessor.addClass(
+      cleanup(
+        highlighter.codeToHtml(str, {
+          lang,
+          lineOptions,
+          theme: getThemeName(theme.light)
+        })
+      ),
+      "vp-code-light",
+      "pre"
+    );
     return dark + light;
   };
 }
@@ -35615,7 +35660,7 @@ const includesRE = /<!--\s*@include:\s*(.*?)\s*-->/g;
 function clearCache() {
   cache$1.clear();
 }
-async function createMarkdownToVueRenderFn(srcDir, options = {}, pages, userDefines, isBuild = false, base = "/", includeLastUpdatedData = false, cleanUrls = "disabled") {
+async function createMarkdownToVueRenderFn(srcDir, options = {}, pages, userDefines, isBuild = false, base = "/", includeLastUpdatedData = false, cleanUrls = "disabled", siteConfig = null) {
   const md = await createMarkdownRenderer(srcDir, options, base);
   pages = pages.map((p) => slash(p.replace(/\.md$/, "")));
   const replaceRegex = genReplaceRegexp(userDefines, isBuild);
@@ -35691,7 +35736,7 @@ If it is intended, you can use:
         }
       }
     }
-    const pageData = {
+    let pageData = {
       title: inferTitle(md, frontmatter, title),
       titleTemplate: frontmatter.titleTemplate,
       description: inferDescription(frontmatter),
@@ -35702,6 +35747,15 @@ If it is intended, you can use:
     if (includeLastUpdatedData) {
       pageData.lastUpdated = await getGitTimestamp(file);
     }
+    if (siteConfig == null ? void 0 : siteConfig.transformPageData) {
+      const dataToMerge = await siteConfig.transformPageData(pageData);
+      if (dataToMerge) {
+        pageData = {
+          ...pageData,
+          ...dataToMerge
+        };
+      }
+    }
     const vueSrc = [
       ...injectPageDataCode(
         (sfcBlocks == null ? void 0 : sfcBlocks.scripts.map((item) => item.content)) ?? [],
@@ -35877,6 +35931,22 @@ const staticDataPlugin = {
   }
 };
 
+const webfontMarkerRE = /\/(?:\*|\/) *webfont-marker-begin *(?:\*\/|\n|\r|\n\r|\r\n)([^]*?)\/(?:\*|\/) *webfont-marker-end *(?:\*\/|\n|\r|\n\r|\r\n|$)/;
+const webFontsPlugin = (enabled = false) => ({
+  name: "vitepress:webfonts",
+  enforce: "pre",
+  transform(code, id) {
+    var _a;
+    if (/[\\/]fonts\.s?css/.test(id)) {
+      if (enabled) {
+        return (_a = code.match(webfontMarkerRE)) == null ? void 0 : _a[1];
+      } else {
+        return code.replace(webfontMarkerRE, "");
+      }
+    }
+  }
+});
+
 const hashRE = /\.(\w+)\.js$/;
 const staticInjectMarkerRE = /\b(const _hoisted_\d+ = \/\*(?:#|@)__PURE__\*\/\s*createStaticVNode)\("(.*)", (\d+)\)/g;
 const staticStripRE = /['"`]__VP_STATIC_START__[^]*?__VP_STATIC_END__['"`]/g;
@@ -35928,7 +35998,8 @@ async function createVitePressPlugin(siteConfig, ssr = false, pageToHashMap, cli
         config.command === "build",
         config.base,
         lastUpdated,
-        cleanUrls
+        cleanUrls,
+        siteConfig
       );
     },
     config() {
@@ -36110,6 +36181,7 @@ ${path__default["default"].relative(
   return [
     vitePressPlugin,
     vuePlugin,
+    webFontsPlugin(siteConfig.useWebFonts),
     ...(userViteConfig == null ? void 0 : userViteConfig.plugins) || [],
     staticDataPlugin
   ];
@@ -42188,7 +42260,7 @@ function linkVue() {
   if (root) {
     const dest = path__default["default"].resolve(root, "node_modules/vue");
     if (!fs$c.existsSync(dest)) {
-      const src = path__default["default"].dirname(module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-a3f7cc3d.cjs', document.baseURI).href))).resolve("vue"));
+      const src = path__default["default"].dirname(module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('serve-350713c3.cjs', document.baseURI).href))).resolve("vue"));
       fs$c.ensureSymlinkSync(src, dest, "junction");
       return () => {
         fs$c.unlinkSync(dest);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vitepress",
-  "version": "1.0.0-alpha.21",
+  "version": "1.0.0-alpha.23",
   "description": "Vite & Vue powered static site generator",
   "type": "module",
   "packageManager": "pnpm@7.9.2",
@@ -49,15 +49,16 @@
     "url": "https://github.com/vuejs/vitepress/issues"
   },
   "dependencies": {
-    "@docsearch/css": "^3.2.1",
-    "@docsearch/js": "^3.2.1",
+    "@docsearch/css": "^3.3.0",
+    "@docsearch/js": "^3.3.0",
     "@vitejs/plugin-vue": "^3.1.2",
-    "@vue/devtools-api": "^6.4.4",
-    "@vueuse/core": "^9.3.0",
+    "@vue/devtools-api": "^6.4.5",
+    "@vueuse/core": "^9.4.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "shiki": "^0.11.1",
-    "vite": "^3.1.6",
-    "vue": "^3.2.40"
+    "shiki-processor": "^0.1.0",
+    "vite": "^3.1.8",
+    "vue": "^3.2.41"
   },
   "devDependencies": {
     "@mdit-vue/plugin-component": "^0.11.1",
@@ -67,11 +68,11 @@
     "@mdit-vue/plugin-title": "^0.11.1",
     "@mdit-vue/plugin-toc": "^0.11.1",
     "@mdit-vue/shared": "^0.11.0",
-    "@rollup/plugin-alias": "^4.0.0",
-    "@rollup/plugin-commonjs": "^22.0.2",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^14.1.0",
-    "@rollup/plugin-replace": "^4.0.0",
+    "@rollup/plugin-alias": "^4.0.2",
+    "@rollup/plugin-commonjs": "^23.0.2",
+    "@rollup/plugin-json": "^5.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-replace": "^5.0.1",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/compression": "^1.7.2",
     "@types/cross-spawn": "^6.0.2",
@@ -87,7 +88,7 @@
     "@types/markdown-it-emoji": "^2.0.2",
     "@types/micromatch": "^4.0.2",
     "@types/minimist": "^1.2.2",
-    "@types/node": "^18.8.3",
+    "@types/node": "^18.11.5",
     "@types/prompts": "^2.4.1",
     "chokidar": "^3.5.3",
     "compression": "^1.7.4",
@@ -96,7 +97,7 @@
     "debug": "^4.3.4",
     "diacritics": "^1.3.0",
     "enquirer": "^2.3.6",
-    "esbuild": "^0.15.10",
+    "esbuild": "^0.15.12",
     "escape-html": "^1.0.3",
     "execa": "^6.1.0",
     "fast-glob": "^3.2.12",
@@ -109,27 +110,27 @@
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^2.0.2",
     "micromatch": "^4.0.5",
-    "minimist": "^1.2.6",
+    "minimist": "^1.2.7",
     "npm-run-all": "^4.1.5",
     "ora": "^5.4.1",
     "picocolors": "^1.0.0",
     "pkg-dir": "^5.0.0",
-    "playwright-chromium": "^1.27.0",
+    "playwright-chromium": "^1.27.1",
     "polka": "1.0.0-next.22",
     "prettier": "^2.7.1",
     "prompts": "^2.4.2",
     "punycode": "^2.1.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.1",
-    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-esbuild": "^4.10.1",
     "semver": "^7.3.8",
-    "simple-git-hooks": "^2.8.0",
+    "simple-git-hooks": "^2.8.1",
     "sirv": "^2.0.2",
     "supports-color": "^9.2.3",
     "typescript": "~4.8.4",
-    "vitest": "^0.24.0",
-    "vue-tsc": "^1.0.0",
+    "vitest": "^0.24.3",
+    "vue-tsc": "^1.0.9",
     "wait-on": "^6.0.1"
   },
   "simple-git-hooks": {

package/theme.d.ts

@@ -1,18 +1,19 @@
 // so that users can do `import DefaultTheme from 'vitepress/theme'`
-import type { ComponentOptions } from 'vue'
+import type { DefineComponent } from 'vue'
 
-export const VPHomeHero: ComponentOptions
-export const VPHomeFeatures: ComponentOptions
-export const VPHomeSponsors: ComponentOptions
-export const VPDocAsideSponsors: ComponentOptions
-export const VPTeamPage: ComponentOptions
-export const VPTeamPageTitle: ComponentOptions
-export const VPTeamPageSection: ComponentOptions
-export const VPTeamMembers: ComponentOptions
+// TODO: add props for these
+export const VPHomeHero: DefineComponent
+export const VPHomeFeatures: DefineComponent
+export const VPHomeSponsors: DefineComponent
+export const VPDocAsideSponsors: DefineComponent
+export const VPTeamPage: DefineComponent
+export const VPTeamPageTitle: DefineComponent
+export const VPTeamPageSection: DefineComponent
+export const VPTeamMembers: DefineComponent
 
 declare const theme: {
-  Layout: ComponentOptions
-  NotFound: ComponentOptions
+  Layout: DefineComponent
+  NotFound: DefineComponent
 }
 
 export default theme

package/types/shared.d.ts

@@ -62,7 +62,7 @@ export interface SiteData<ThemeConfig = any> {
   titleTemplate?: string | boolean
   description: string
   head: HeadConfig[]
-  appearance: boolean
+  appearance: boolean | 'dark'
   themeConfig: ThemeConfig
   scrollOffset: number | string
   locales: Record<string, LocaleConfig>