vitepress 0.22.4 → 1.0.0-draft.3

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "vitepress",
-  "version": "0.22.4",
+  "version": "1.0.0-draft.3",
+  "packageManager": "pnpm@7.0.1",
   "description": "Vite & Vue powered static site generator",
   "main": "dist/node/index.js",
   "typings": "types/index.d.ts",
@@ -14,20 +15,6 @@
     "client.d.ts",
     "theme.d.ts"
   ],
-  "engines": {
-    "node": ">=14.0.0"
-  },
-  "gitHooks": {
-    "pre-commit": "lint-staged"
-  },
-  "lint-staged": {
-    "*.js": [
-      "prettier --write"
-    ],
-    "*.ts": [
-      "prettier --parser=typescript --write"
-    ]
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vuejs/vitepress.git"
@@ -39,17 +26,33 @@
   ],
   "author": "Evan You",
   "license": "MIT",
-  "homepage": "https://github.com/vuejs/vitepress/tree/master/#readme",
+  "homepage": "https://github.com/vuejs/vitepress/tree/main/#readme",
   "bugs": {
     "url": "https://github.com/vuejs/vitepress/issues"
   },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write"
+    ],
+    "*.ts": [
+      "prettier --parser=typescript --write"
+    ]
+  },
   "dependencies": {
     "@docsearch/css": "^3.0.0",
     "@docsearch/js": "^3.0.0",
     "@vitejs/plugin-vue": "^2.3.2",
+    "@vueuse/core": "^8.5.0",
+    "body-scroll-lock": "^4.0.0-beta.0",
     "prismjs": "^1.25.0",
     "vite": "^2.9.7",
-    "vue": "^3.2.33"
+    "vue": "3.2.33"
   },
   "devDependencies": {
     "@microsoft/api-extractor": "^7.23.1",
@@ -57,6 +60,7 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/compression": "^1.7.0",
     "@types/cross-spawn": "^6.0.2",
     "@types/debug": "^4.1.7",
@@ -66,6 +70,7 @@
     "@types/lru-cache": "^5.1.0",
     "@types/markdown-it": "^12.0.1",
     "@types/micromatch": "^4.0.2",
+    "@types/minimist": "^1.2.2",
     "@types/node": "^15.6.1",
     "@types/polka": "^0.5.3",
     "chalk": "^4.1.1",
@@ -123,7 +128,8 @@
     "lint": "run-s lint:js lint:ts",
     "lint:js": "prettier --check --write \"{bin,docs,scripts,src}/**/*.js\"",
     "lint:ts": "prettier --check --write --parser typescript \"{__tests__,src,docs,types}/**/*.ts\"",
-    "test": "vitest run __tests__ -c __tests__/vitest.config.js --globals",
+    "test": "vitest run __tests__ -c __tests__/vitest.config.js --global",
+    "test:all": "run-s lint test",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "release": "node scripts/release.js",
     "docs": "run-p dev docs-dev",

package/types/default-theme.d.ts

@@ -1,125 +1,168 @@
 export namespace DefaultTheme {
   export interface Config {
-    logo?: string
-    nav?: NavItem[] | false
-    sidebar?: SideBarConfig | MultiSideBarConfig
-
     /**
-     * GitHub repository following the format <user>/<project>.
+     * The logo file of the site.
      *
-     * @example `"vuejs/vue-next"`
+     * @example '/logo.svg'
      */
-    repo?: string
+    logo?: string
 
     /**
-     * Customize the header label. Defaults to GitHub/Gitlab/Bitbucket
-     * depending on the provided repo.
-     *
-     * @example `"Contribute!"`
+     * The nav items.
      */
-    repoLabel?: string
+    nav?: NavItem[]
 
     /**
-     * If your docs are in a different repository from your main project.
-     *
-     * @example `"vuejs/docs-next"`
+     * The sidebar items.
      */
-    docsRepo?: string
+    sidebar?: Sidebar
 
     /**
-     * If your docs are not at the root of the repo.
-     *
-     * @example `"docs"`
+     * Info for the edit link. If it's undefined, the edit link feature will
+     * be disabled.
      */
-    docsDir?: string
+    editLink?: EditLink
 
     /**
-     * If your docs are in a different branch. Defaults to `master`.
-     *
-     * @example `"next"`
+     * The social links to be displayed at the end of the nav bar. Perfect for
+     * placing links to social services such as GitHub, Twitter, Facebook, etc.
      */
-    docsBranch?: string
+    socialLinks?: SocialLink[]
 
     /**
-     * Enable links to edit pages at the bottom of the page.
+     * The footer configuration.
      */
-    editLinks?: boolean
+    footer?: Footer
 
     /**
-     * Custom text for edit link. Defaults to "Edit this page".
+     * Adds locale menu to the nav. This option should be used when you have
+     * your translated sites outside of the project.
      */
-    editLinkText?: string
+    localeLinks?: LocaleLinks
 
     /**
-     * Show last updated time at the bottom of the page. Defaults to `false`.
-     * If given a string, it will be displayed as a prefix (default value:
-     * "Last Updated").
+     * The algolia options. Leave it undefined to disable the search feature.
      */
-    lastUpdated?: string | boolean
-
-    prevLinks?: boolean
-    nextLinks?: boolean
-
-    locales?: Record<string, LocaleConfig & Omit<Config, 'locales'>>
-
     algolia?: AlgoliaSearchOptions
 
-    carbonAds?: {
-      carbon: string
-      custom?: string
-      placement: string
-    }
+    /**
+     * The carbon ads options. Leave it undefined to disable the ads feature.
+     */
+    carbonAds?: CarbonAdsOptions
   }
 
-  // navbar --------------------------------------------------------------------
+  // nav -----------------------------------------------------------------------
 
   export type NavItem = NavItemWithLink | NavItemWithChildren
 
-  export interface NavItemBase {
+  export type NavItemWithLink = {
     text: string
-    target?: string
-    rel?: string
-    ariaLabel?: string
-    activeMatch?: string
-  }
-
-  export interface NavItemWithLink extends NavItemBase {
     link: string
+
+    /**
+     * `activeMatch` is expected to be a regex string. We can't use actual
+     * RegExp object here because it isn't serializable
+     */
+    activeMatch?: string
   }
 
-  export interface NavItemWithChildren extends NavItemBase {
+  export interface NavItemWithChildren {
+    text?: string
     items: NavItemWithLink[]
   }
 
   // sidebar -------------------------------------------------------------------
 
-  export type SideBarConfig = SideBarItem[] | 'auto' | false
+  export type Sidebar = SidebarGroup[] | SidebarMulti
 
-  export interface MultiSideBarConfig {
-    [path: string]: SideBarConfig
+  export interface SidebarMulti {
+    [path: string]: SidebarGroup[]
   }
 
-  export type SideBarItem = SideBarLink | SideBarGroup
+  export interface SidebarGroup {
+    text: string
+    items: SidebarItem[]
+  }
 
-  export interface SideBarLink {
+  export interface SidebarItem {
     text: string
     link: string
   }
 
-  export interface SideBarGroup {
-    text: string
-    link?: string
+  // edit link -----------------------------------------------------------------
+
+  export interface EditLink {
+    /**
+     * Repo of the site.
+     *
+     * @example 'vuejs/docs'
+     */
+    repo: string
+
+    /**
+     * Branch of the repo.
+     *
+     * @default 'main'
+     */
+    branch?: string
 
     /**
-     * @default false
+     * If your docs are not at the root of the repo.
+     *
+     * @example 'docs'
      */
-    collapsable?: boolean
+    dir?: string
 
-    children: SideBarItem[]
+    /**
+     * Custom text for edit link.
+     *
+     * @default 'Edit this page'
+     */
+    text?: string
   }
 
-  // algolia  ------------------------------------------------------------------
-  // partially copied from @docsearch/react/dist/esm/DocSearch.d.ts
+  // social link ---------------------------------------------------------------
+
+  export interface SocialLink {
+    icon: SocialLinkIcon
+    link: string
+  }
+
+  export type SocialLinkIcon =
+    | 'discord'
+    | 'facebook'
+    | 'github'
+    | 'instagram'
+    | 'linkedin'
+    | 'slack'
+    | 'twitter'
+    | 'youtube'
+
+  // footer --------------------------------------------------------------------
+
+  export interface Footer {
+    message?: string
+    copyright?: string
+  }
+
+  // locales -------------------------------------------------------------------
+
+  export interface LocaleLinks {
+    text: string
+    items: LocaleLink[]
+  }
+
+  export interface LocaleLink {
+    text: string
+    link: string
+  }
+
+  // algolia ------------------------------------------------------------------
+
+  /**
+   * The Algolia search options. Partially copied from
+   * `@docsearch/react/dist/esm/DocSearch.d.ts`
+   */
   export interface AlgoliaSearchOptions {
     appId: string
     apiKey: string
@@ -130,17 +173,11 @@ export namespace DefaultTheme {
     initialQuery?: string
   }
 
-  // locales -------------------------------------------------------------------
+  // carbon ads ----------------------------------------------------------------
 
-  export interface LocaleConfig {
-    /**
-     * Text for the language dropdown.
-     */
-    selectText?: string
-
-    /**
-     * Label for this locale in the language dropdown.
-     */
-    label?: string
+  export interface CarbonAdsOptions {
+    carbon: string
+    custom?: string
+    placement: string
   }
 }

package/types/shared.d.ts

@@ -11,19 +11,30 @@ export interface PageData {
   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
   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,12 +61,6 @@ 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

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

@@ -1,188 +0,0 @@
-<script setup lang="ts">
-import '@docsearch/css'
-import docsearch from '@docsearch/js'
-import { useRoute, useRouter, useData } from 'vitepress'
-import { getCurrentInstance, onMounted, watch } from 'vue'
-import type { DefaultTheme } from '../config'
-import type { DocSearchHit } from '@docsearch/react/dist/esm/types'
-
-const props = defineProps<{
-  options: DefaultTheme.AlgoliaSearchOptions
-  multilang?: boolean
-}>()
-
-const vm = getCurrentInstance()
-const route = useRoute()
-const router = useRouter()
-
-watch(
-  () => props.options,
-  (value) => {
-    update(value)
-  }
-)
-
-onMounted(() => {
-  initialize(props.options)
-})
-
-function isSpecialClick(event: MouseEvent) {
-  return (
-    event.button === 1 ||
-    event.altKey ||
-    event.ctrlKey ||
-    event.metaKey ||
-    event.shiftKey
-  )
-}
-
-function getRelativePath(absoluteUrl: string) {
-  const { pathname, hash } = new URL(absoluteUrl)
-
-  return pathname + hash
-}
-
-function update(options: any) {
-  if (vm && vm.vnode.el) {
-    vm.vnode.el.innerHTML =
-      '<div class="algolia-search-box" id="docsearch"></div>'
-    initialize(options)
-  }
-}
-
-const { lang } = useData()
-
-// if the user has multiple locales, the search results should be filtered
-// based on the language
-const facetFilters: string[] = props.multilang ? ['lang:' + lang.value] : []
-
-if (props.options.searchParameters?.facetFilters) {
-  facetFilters.push(...props.options.searchParameters.facetFilters)
-}
-
-watch(lang, (newLang, oldLang) => {
-  const index = facetFilters.findIndex((filter) => filter === 'lang:' + oldLang)
-  if (index > -1) {
-    facetFilters.splice(index, 1, 'lang:' + newLang)
-  }
-})
-
-function initialize(userOptions: any) {
-  docsearch(
-    Object.assign({}, userOptions, {
-      container: '#docsearch',
-
-      searchParameters: Object.assign({}, userOptions.searchParameters, {
-        // pass a custom lang facetFilter to allow multiple language search
-        // https://github.com/algolia/docsearch-configs/pull/3942
-        facetFilters
-      }),
-
-      navigator: {
-        navigate: ({ itemUrl }: { itemUrl: string }) => {
-          const { pathname: hitPathname } = new URL(
-            window.location.origin + itemUrl
-          )
-
-          // Router doesn't handle same-page navigation so we use the native
-          // browser location API for anchor navigation
-          if (route.path === hitPathname) {
-            window.location.assign(window.location.origin + itemUrl)
-          } else {
-            router.go(itemUrl)
-          }
-        }
-      },
-
-      transformItems: (items: DocSearchHit[]) => {
-        return items.map((item) => {
-          return Object.assign({}, item, {
-            url: getRelativePath(item.url)
-          })
-        })
-      },
-
-      hitComponent: ({
-        hit,
-        children
-      }: {
-        hit: DocSearchHit
-        children: any
-      }) => {
-        const relativeHit = hit.url.startsWith('http')
-          ? getRelativePath(hit.url as string)
-          : hit.url
-
-        return {
-          type: 'a',
-          ref: undefined,
-          constructor: undefined,
-          key: undefined,
-          props: {
-            href: hit.url,
-            onClick: (event: MouseEvent) => {
-              if (isSpecialClick(event)) {
-                return
-              }
-
-              // we rely on the native link scrolling when user is already on
-              // the right anchor because Router doesn't support duplicated
-              // history entries
-              if (route.path === relativeHit) {
-                return
-              }
-
-              // if the hits goes to another page, we prevent the native link
-              // behavior to leverage the Router loading feature
-              if (route.path !== relativeHit) {
-                event.preventDefault()
-              }
-
-              router.go(relativeHit)
-            },
-            children
-          },
-          __v: null
-        }
-      }
-    })
-  )
-}
-</script>
-
-<template>
-  <div class="algolia-search-box" id="docsearch" />
-</template>
-
-<style>
-.algolia-search-box {
-  padding-top: 1px;
-}
-
-@media (min-width: 720px) {
-  .algolia-search-box {
-    padding-left: 8px;
-  }
-}
-
-@media (min-width: 751px) {
-  .algolia-search-box {
-    min-width: 176.3px; /* avoid layout shift */
-  }
-
-  .algolia-search-box .DocSearch-Button-Placeholder {
-    padding-left: 8px;
-    font-size: 0.9rem;
-    font-weight: 500;
-  }
-}
-
-.DocSearch {
-  --docsearch-primary-color: var(--c-brand);
-  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
-  --docsearch-text-color: var(--c-text-light);
-  --docsearch-muted-color: var(--c-text-lighter);
-  --docsearch-searchbox-background: #f2f2f2;
-}
-</style>