vitepress 1.0.0-alpha.21 → 1.0.0-alpha.22

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/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/node/cli.js

@@ -1,4 +1,4 @@
-import { p as picocolors, g as build, s as serve, e as createServer } from './serve-ce51a050.js';
+import { p as picocolors, g as build, s as serve, e as createServer } from './serve-ed2c66fa.js';
 import 'shiki';
 import 'fs';
 import 'path';
@@ -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.22";
 
 const argv = minimist(process.argv.slice(2));
 console.log(picocolors.exports.cyan(`vitepress v${version}`));

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;
@@ -1789,6 +1789,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 +1806,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' | '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-ed2c66fa.js';
 import 'dns';
 import 'vite';
 import 'path';

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

@@ -10776,7 +10776,8 @@ async function resolveConfig(root = process.cwd(), command = "serve", mode = "de
     cleanUrls: userConfig.cleanUrls || "disabled",
     buildEnd: userConfig.buildEnd,
     transformHead: userConfig.transformHead,
-    transformHtml: userConfig.transformHtml
+    transformHtml: userConfig.transformHtml,
+    transformPageData: userConfig.transformPageData
   };
   return config;
 }
@@ -10858,14 +10859,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')
           }
         })()
@@ -35575,7 +35577,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 +35653,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 +35664,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)) ?? [],
@@ -35888,7 +35899,8 @@ async function createVitePressPlugin(siteConfig, ssr = false, pageToHashMap, cli
         config.command === "build",
         config.base,
         lastUpdated,
-        cleanUrls
+        cleanUrls,
+        siteConfig
       );
     },
     config() {

package/dist/node-cjs/cli.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var serve = require('./serve-a3f7cc3d.cjs');
+var serve = require('./serve-01943a5f.cjs');
 require('shiki');
 require('fs');
 require('path');
@@ -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.22";
 
 const argv = minimist(process.argv.slice(2));
 console.log(serve.picocolors.exports.cyan(`vitepress v${version}`));

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-01943a5f.cjs');
 require('dns');
 require('vite');
 require('path');

package/dist/node-cjs/{serve-a3f7cc3d.cjs → serve-01943a5f.cjs}

@@ -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-01943a5f.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-01943a5f.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");
@@ -10816,7 +10816,8 @@ async function resolveConfig(root = process.cwd(), command = "serve", mode = "de
     cleanUrls: userConfig.cleanUrls || "disabled",
     buildEnd: userConfig.buildEnd,
     transformHead: userConfig.transformHead,
-    transformHtml: userConfig.transformHtml
+    transformHtml: userConfig.transformHtml,
+    transformPageData: userConfig.transformPageData
   };
   return config;
 }
@@ -10898,14 +10899,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')
           }
         })()
@@ -35615,7 +35617,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 +35693,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 +35704,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)) ?? [],
@@ -35928,7 +35939,8 @@ async function createVitePressPlugin(siteConfig, ssr = false, pageToHashMap, cli
         config.command === "build",
         config.base,
         lastUpdated,
-        cleanUrls
+        cleanUrls,
+        siteConfig
       );
     },
     config() {
@@ -42188,7 +42200,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-01943a5f.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.22",
   "description": "Vite & Vue powered static site generator",
   "type": "module",
   "packageManager": "pnpm@7.9.2",

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>