diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 589fd35d..33b9b7da 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -26,11 +26,11 @@ jobs: - name: Install deps run: pnpm install + - name: Build + run: pnpm run build + - name: Lint run: pnpm run lint-fail - name: Test run: pnpm run test-run - - - name: Build - run: pnpm run build diff --git a/CHANGELOG.md b/CHANGELOG.md index 4702da1c..75b438e3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,62 @@ -# [1.0.0-alpha.1](https://github.com/vuejs/vitepress/compare/v0.22.4...v1.0.0-alpha.1) (2022-06-01) +## [1.0.0-alpha.4](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.3...v1.0.0-alpha.4) (2022-06-22) + +### Bug Fixes + +* **theme:** home image style is broken in big view port ([2bd960d](https://github.com/vuejs/vitepress/commit/2bd960d5f5a84df614035a4fb941331fdf9d84f2)) + +## [1.0.0-alpha.3](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.2...v1.0.0-alpha.3) (2022-06-22) + +### Bug Fixes + +* **theme:** italic fonts are missing ([#759](https://github.com/vuejs/vitepress/issues/759)) ([#777](https://github.com/vuejs/vitepress/issues/777)) ([fa00c83](https://github.com/vuejs/vitepress/commit/fa00c83af4aa5fa619cf2e3da8d5aab77984ba7c)) +* **theme:** copy code in non-secure contexts ([#792](https://github.com/vuejs/vitepress/issues/792)) ([2935ed2](https://github.com/vuejs/vitepress/commit/2935ed22954010fa0d48d0625e5f2b0136991e0b)) +* **theme:** copy code button has wrong tag closing syntax ([#816](https://github.com/vuejs/vitepress/issues/816)) ([75ca9e4](https://github.com/vuejs/vitepress/commit/75ca9e4302c65e3bcc9518f7df928318380f6cf6)) +* **theme:** edit link gets hidden when a page don't have siblings ([#751](https://github.com/vuejs/vitepress/issues/751)) ([9bc4330](https://github.com/vuejs/vitepress/commit/9bc43306a1fe7bfd54b738642fd1737917a3af41)) +* **theme:** nav close icon not working correctly ([#744](https://github.com/vuejs/vitepress/issues/744)) ([75c9d80](https://github.com/vuejs/vitepress/commit/75c9d809d21c0484c0ae8ce691d598cf229c9525)) +* **theme:** sidebar is shown on home layout ([#825](https://github.com/vuejs/vitepress/issues/825)) ([#829](https://github.com/vuejs/vitepress/issues/829)) ([42cbd31](https://github.com/vuejs/vitepress/commit/42cbd31327b789ff9525919afb39b3092f1d445b)) +* **theme:** sidebar collapsed option not working on layout change ([#809](https://github.com/vuejs/vitepress/issues/809)) ([#811](https://github.com/vuejs/vitepress/issues/811)) ([7737699](https://github.com/vuejs/vitepress/commit/773769926b74cabfbb3577d6c6e654fe976c0b76)) +* **theme:** `DefaultTheme` type causes error in some cases ([#804](https://github.com/vuejs/vitepress/issues/804)) ([107724a](https://github.com/vuejs/vitepress/commit/107724ac6f24e5272964d3bdbff54169fa4d91ae)) + +### Features + +* **build:** allow setting `base` from command line ([2952638](https://github.com/vuejs/vitepress/commit/295263807df5a0cdff3b04d5131a3cebc76ec491)) +* **theme:** add active status to nav menu group ([#820](https://github.com/vuejs/vitepress/issues/820)) ([fdb5720](https://github.com/vuejs/vitepress/commit/fdb5720acda9f8f2dd1e4f33d0810a6e9ca9e7de)) +* **theme:** add global layout slots ([#760](https://github.com/vuejs/vitepress/issues/760)) ([#812](https://github.com/vuejs/vitepress/issues/812)) ([1f1e298](https://github.com/vuejs/vitepress/commit/1f1e298864f7b8af9672b55251958ba766678e0b)) +* **theme:** support themeable images for logo and hero ([#745](https://github.com/vuejs/vitepress/issues/745)) ([42813ce](https://github.com/vuejs/vitepress/commit/42813ce936d9fb141241969651cb0e3a02345442)) +* **theme:** add team page feature ([#828](https://github.com/vuejs/vitepress/issues/828)) ([7cfe0f0](https://github.com/vuejs/vitepress/commit/7cfe0f05ab013904c66c48d8529d2ba4747869cb)) + +## [1.0.0-alpha.2](https://github.com/vuejs/vitepress/compare/v1.0.0-alpha.1...v1.0.0-alpha.2) (2022-06-14) + +### Bug Fixes + +* use h1 for title in hero instead of p ([#776](https://github.com/vuejs/vitepress/issues/776)) ([919d230](https://github.com/vuejs/vitepress/commit/919d23079b636c188ea2049039461b88e0c02fc2)) +* add background color in navbar to avoid contrast issues ([#695](https://github.com/vuejs/vitepress/issues/695)) ([305bcc0](https://github.com/vuejs/vitepress/commit/305bcc02e68f8f9aea0000e6950e78455cf572f5)) +* add default value for base in `createMarkdownRenderer` ([#555](https://github.com/vuejs/vitepress/issues/555)) ([#556](https://github.com/vuejs/vitepress/issues/556)) ([78a2e84](https://github.com/vuejs/vitepress/commit/78a2e84e7bb7acfda50e686bbd404961babb91e8)) +* allow lang='ts' on scripts in markdown ([#693](https://github.com/vuejs/vitepress/issues/693)) ([#701](https://github.com/vuejs/vitepress/issues/701)) ([59df105](https://github.com/vuejs/vitepress/commit/59df10590b958bbc39cc2e8c81a2209eda9d431b)) +* better nav item types ([#714](https://github.com/vuejs/vitepress/issues/714)) ([263607b](https://github.com/vuejs/vitepress/commit/263607b279cbfd3db80bbe0ea66000560d24993a)) +* double base in sidebar links ([#756](https://github.com/vuejs/vitepress/issues/756)) ([aa65cb5](https://github.com/vuejs/vitepress/commit/aa65cb58f508bb8e79c20b6370bdfe1b7e470abf)) +* use `pre-wrap` for text and tagline ([#746](https://github.com/vuejs/vitepress/issues/746)) ([94704c9](https://github.com/vuejs/vitepress/commit/94704c95637f1cc844d526d4743818d38d1cbae0)) +* nav nested items type error ([#710](https://github.com/vuejs/vitepress/issues/710)) ([#711](https://github.com/vuejs/vitepress/issues/711)) ([e5bf15a](https://github.com/vuejs/vitepress/commit/e5bf15a21ee777b4e56ad86ec5ebb5b0e161b721)) +* page layout breaks when page name matches the css class name ([#696](https://github.com/vuejs/vitepress/issues/696)) ([#699](https://github.com/vuejs/vitepress/issues/699)) ([9c0ed93](https://github.com/vuejs/vitepress/commit/9c0ed9397f35827a261d45c789d23ce7faa7ecee)) +* remove title bg transition to avoid flush on sidebar on/off ([1942418](https://github.com/vuejs/vitepress/commit/1942418f9570feb81d8066a2413d70b0f36fb8ce)) +* sidebar right blur notch ([#712](https://github.com/vuejs/vitepress/issues/712)) ([64c3654](https://github.com/vuejs/vitepress/commit/64c3654b4ba82c16fefdf396106f3077d066c67b)) +* typo ([#708](https://github.com/vuejs/vitepress/issues/708)) ([#716](https://github.com/vuejs/vitepress/issues/716)) ([1fe5153](https://github.com/vuejs/vitepress/commit/1fe5153f47465efed05e087119c93d50da6e92a3)) +* title in containers not working with markdown content ([#765](https://github.com/vuejs/vitepress/issues/765)) ([#768](https://github.com/vuejs/vitepress/issues/768)) ([c5c3c64](https://github.com/vuejs/vitepress/commit/c5c3c64851b240279a304198fd97e3dc8b5f2fd0)) +* use base in links ([#717](https://github.com/vuejs/vitepress/issues/717)) ([#718](https://github.com/vuejs/vitepress/issues/718)) ([8e50154](https://github.com/vuejs/vitepress/commit/8e5015462c8f42c5404525ac8de33af8862c204d)) +* use h2 for feature headers ([#774](https://github.com/vuejs/vitepress/issues/774)) ([b1ff725](https://github.com/vuejs/vitepress/commit/b1ff72561182c91b4912ebef44204a53ee3aca5e)) + +### Features + +* add `lastUpdated` option to frontmatter ([b31fbf3](https://github.com/vuejs/vitepress/commit/b31fbf3621bbd7f627a1b80c581b7a8444bc6b0d)) +* add doc before and after slot ([#762](https://github.com/vuejs/vitepress/issues/762)) ([#786](https://github.com/vuejs/vitepress/issues/786)) ([9c2a36f](https://github.com/vuejs/vitepress/commit/9c2a36f5428bd98eafb6e2e9bc63f5e532b596b7)) +* allow custom edit links ([#698](https://github.com/vuejs/vitepress/issues/698)) ([535e176](https://github.com/vuejs/vitepress/commit/535e176b9a230f692f58a79813a12d2ffbe90be3)), closes [#694](https://github.com/vuejs/vitepress/issues/694) [#697](https://github.com/vuejs/vitepress/issues/697) +* allow custom outline title ([#689](https://github.com/vuejs/vitepress/issues/689)) ([#690](https://github.com/vuejs/vitepress/issues/690)) ([a8a1623](https://github.com/vuejs/vitepress/commit/a8a16237cd8e3e4bb180fbd523a4668a4555b732)) +* allow external links in sidebar ([#205](https://github.com/vuejs/vitepress/issues/205)) ([#686](https://github.com/vuejs/vitepress/issues/686)) ([ce17f50](https://github.com/vuejs/vitepress/commit/ce17f5035cbbd1e07373ce0f44913f25269bd80b)) +* support custom content in home layout ([#702](https://github.com/vuejs/vitepress/issues/702)) ([92659a2](https://github.com/vuejs/vitepress/commit/92659a2e9dde13e35fadf2d2dca157d648bc9013)) +* emit 404.html on build ([#729](https://github.com/vuejs/vitepress/issues/729)) ([#740](https://github.com/vuejs/vitepress/issues/740)) ([23276ba](https://github.com/vuejs/vitepress/commit/23276bae050190b6c1d57347424360fe2c3a57be)) +* setup devtools and remove debug component ([#721](https://github.com/vuejs/vitepress/issues/721)) ([421f641](https://github.com/vuejs/vitepress/commit/421f641a76ddc0e8b0f23ab7ad711833fc98c245)) + +## [1.0.0-alpha.1](https://github.com/vuejs/vitepress/compare/v0.22.4...v1.0.0-alpha.1) (2022-06-01) Complete rewrite on default theme, with bunch of features added. Please refer to the docs for the new feature and changes. diff --git a/__tests__/client/theme-default/support/utils.spec.ts b/__tests__/client/theme-default/support/utils.spec.ts new file mode 100644 index 00000000..ac6a668d --- /dev/null +++ b/__tests__/client/theme-default/support/utils.spec.ts @@ -0,0 +1,13 @@ +import { describe, test, expect } from 'vitest' +import * as Utils from 'client/theme-default/support/utils' + +describe('client/theme-default/utils', () => { + describe('ensureStartingSlash', () => { + test('it adds slash to the beginning of the given path', () => { + expect(Utils.ensureStartingSlash('path')).toBe('/path') + expect(Utils.ensureStartingSlash('path/nested')).toBe('/path/nested') + expect(Utils.ensureStartingSlash('/path')).toBe('/path') + expect(Utils.ensureStartingSlash('/path/nested')).toBe('/path/nested') + }) + }) +}) diff --git a/__tests__/shims.ts b/__tests__/shims.ts new file mode 100644 index 00000000..64aacc6f --- /dev/null +++ b/__tests__/shims.ts @@ -0,0 +1 @@ +export default '{}' diff --git a/__tests__/vitest.config.ts b/__tests__/vitest.config.ts index 96d9ca01..8dc0fade 100644 --- a/__tests__/vitest.config.ts +++ b/__tests__/vitest.config.ts @@ -7,8 +7,10 @@ const dir = dirname(fileURLToPath(import.meta.url)) export default defineConfig({ resolve: { alias: { + '@siteData': resolve(dir, './shims.ts'), + client: resolve(dir, '../src/client'), node: resolve(dir, '../src/node'), - client: resolve(dir, '../src/client') + vitepress: resolve(dir, '../src/client') } }, test: { diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index f3581977..30a0fcd5 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -1,5 +1,7 @@ import { defineConfig } from '../../src/node' +import { version } from '../../package.json' + export default defineConfig({ lang: 'en-US', title: 'VitePress', @@ -16,9 +18,7 @@ export default defineConfig({ }, editLink: { - repo: 'vuejs/vitepress', - branch: 'next', - dir: 'docs', + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', text: 'Edit this page on GitHub' }, @@ -49,9 +49,18 @@ function nav() { { text: 'Guide', link: '/guide/what-is-vitepress', activeMatch: '/guide/' }, { text: 'Configs', link: '/config/introduction', activeMatch: '/config/' }, { - text: 'Changelog', - link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md' - } + text: version, + items: [ + { + text: 'Changelog', + link: 'https://github.com/vuejs/vitepress/blob/main/CHANGELOG.md' + }, + { + text: 'Contributing', + link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md' + }, + ], + }, ] } @@ -89,7 +98,8 @@ function sidebarGuide() { { text: 'Edit Link', link: '/guide/theme-edit-link' }, { text: 'Last Updated', link: '/guide/theme-last-updated' }, { text: 'Layout', link: '/guide/theme-layout' }, - { text: 'Homepage', link: '/guide/theme-homepage' }, + { text: 'Home Page', link: '/guide/theme-home-page' }, + { text: 'Team Page', link: '/guide/theme-team-page' }, { text: 'Footer', link: '/guide/theme-footer' }, { text: 'Search', link: '/guide/theme-search' }, { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' } diff --git a/docs/config/app-configs.md b/docs/config/app-configs.md index 96d3b118..54657e3f 100644 --- a/docs/config/app-configs.md +++ b/docs/config/app-configs.md @@ -12,6 +12,21 @@ export default { } ``` +## appearance + +- Type: `boolean` +- Default: `true` + +Whether to enable "Dark Mode" or not. If the option is set to `true`, it adds `.dark` class to the `` tag depending on the users preference. + +It also injects inline script that tries to read users settings from local storage by `vitepress-theme-appearance` key and restores users preferred color mode. + +```ts +export default { + appearance: true +} +``` + ## base - Type: `string` @@ -27,57 +42,55 @@ export default { } ``` -## lang +## description - Type: `string` -- Default: `en-US` +- Default: `A VitePress site` -The lang attribute for the site. This will render as a `` tag in the page HTML. +Description for the site. This will render as a `` tag in the page HTML. ```ts export default { - lang: 'en-US' + description: 'A VitePress site' } ``` -## title +## ignoreDeadLinks -- Type: `string` -- Default: `VitePress` +- Type: `boolean` +- Default: `false` -Title for the site. This will be displayed in the nav bar. Also used as the suffix for all page titles unless `titleTemplate` is defined. +When set to `true`, VitePress will not fail builds due to dead links. ```ts export default { - title: 'VitePress' + ignoreDeadLinks: true } ``` -## titleTemplate - -- Type: `string | boolean` +## lang -The suffix for the title. For example, if you set `title` as `VitePress` and set `titleTemplate` as `My Site`, the html title becomes `VitePress | My Site`. +- Type: `string` +- Default: `en-US` -Set `false` to disable the feature. If the option is `undefined`, then the value of `title` option will be used. +The lang attribute for the site. This will render as a `` tag in the page HTML. ```ts export default { - title: 'VitePress', - titleTemplate: 'Vite & Vue powered static site generator' + lang: 'en-US' } ``` -## description +## lastUpdated -- Type: `string` -- Default: `A VitePress site` +- Type: `boolean` +- Default: `false` -Description for the site. This will render as a `` tag in the page HTML. +Use git commit to get the timestamp. This option enables the default theme to display the page's last updated time. You can customize the text via [`themeConfig.lastUpdatedText`](theme-configs#lastupdatedtext) option. ```ts export default { - description: 'A VitePress site' + lastUpdated: true } ``` @@ -132,30 +145,31 @@ interface MarkdownOptions extends MarkdownIt.Options { } ``` -## appearance - -- Type: `boolean` -- Default: `true` +## title -Whether to enable "Dark Mode" or not. If the option is set to `true`, it adds `.dark` class to the `` tag depending on the users preference. +- Type: `string` +- Default: `VitePress` -It also injects inline script that tries to read users settings from local storage by `vitepress-theme-appearance` key and restores users preferred color mode. +Title for the site. This will be displayed in the nav bar. Also used as the suffix for all page titles unless `titleTemplate` is defined. ```ts export default { - appearance: true + title: 'VitePress' } ``` -## lastUpdated +## titleTemplate -- Type: `boolean` -- Default: `false` +- Type: `string | boolean` -Use git commit to get the timestamp. This option enables the default theme to display the page's last updated time. You can customize the text via [`themeConfig.lastUpdatedText`](theme-configs#lastupdatedtext) option. +The suffix for the title. For example, if you set `title` as `VitePress` and set `titleTemplate` as `My Site`, the html title becomes `VitePress | My Site`. + +Set `false` to disable the feature. If the option is `undefined`, then the value of `title` option will be used. ```ts export default { - lastUpdated: true + title: 'VitePress', + titleTemplate: 'Vite & Vue powered static site generator' } ``` + diff --git a/docs/config/frontmatter-configs.md b/docs/config/frontmatter-configs.md index d57e6cba..25dd222c 100644 --- a/docs/config/frontmatter-configs.md +++ b/docs/config/frontmatter-configs.md @@ -76,6 +76,19 @@ type Head = | [string, Record, string] ``` +## lastUpdated + +- Type: `boolean` +- Default: `true` + +Whether to display [Last Updated](../guide/theme-last-updated) text in the current page. + +```yaml +--- +lastUpdated: false +--- +``` + ## layout - Type: `doc | home | page` diff --git a/docs/config/theme-configs.md b/docs/config/theme-configs.md index 17c24708..b1b63151 100644 --- a/docs/config/theme-configs.md +++ b/docs/config/theme-configs.md @@ -83,6 +83,7 @@ type NavItemWithLink = { interface NavItemWithChildren { text?: string items: NavItemWithLink[] + activeMatch?: string } ``` @@ -129,6 +130,22 @@ interface SidebarItem { } ``` + +## outlineTitle + +- Type: `string` +- Default: `On this page` + +Can be used to customize the title of the right sidebar (on the top of outline links). This is useful when writing documentation in another language. + +```js +export default { + themeConfig: { + outlineTitle: 'In hac pagina' + } +} +``` + ## socialLinks - Type: `SocialLink` @@ -188,6 +205,30 @@ export interface Footer { } ``` +## editLink + +- Type: `EditLink` + +Edit Link lets you display a link to edit the page on Git management services such as GitHub, or GitLab. See [Theme: Edit Link](../guide/theme-edit-link) for more details. + +```js +export default { + themeConfig: { + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', + text: 'Edit this page on GitHub' + } + } +} +``` + +```ts +export interface EditLink { + pattern: string + text?: string +} +``` + ## lastUpdatedText - Type: `string` @@ -222,9 +263,33 @@ export default { ```ts export interface CarbonAds { - code: string, + code: string placement: string } ``` Learn more in [Theme: Carbon Ads](../guide/theme-carbon-ads) + +## docFooter + +- Type: `DocFooter` + +Can be used to customize text appearing above previous and next links. Helpful if not writing docs in English. + +```js +export default { + themeConfig: { + docFooter: { + prev: 'Pagina prior', + next: 'Proxima pagina' + } + } +} +``` + +```ts +export interface DocFooter { + prev?: string + next?: string +} +``` diff --git a/docs/guide/asset-handling.md b/docs/guide/asset-handling.md index 20969f9c..dd6105a4 100644 --- a/docs/guide/asset-handling.md +++ b/docs/guide/asset-handling.md @@ -16,7 +16,7 @@ All **static** path references, including absolute paths, should be based on you ## Public Files -Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components (for example, favicons and PWA icons). The `public` directory under project root can be used as an escape hatch to provide static assets that either are never referenced in source code (e.g. `robots.txt`), or must retain the exact same file name (without hashing). +Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components (for example, favicons and PWA icons). The `public` directory under project root (`docs` folder if you're running `vitepress build docs`) can be used as an escape hatch to provide static assets that either are never referenced in source code (e.g. `robots.txt`), or must retain the exact same file name (without hashing). Assets placed in `public` will be copied to the root of the dist directory as-is. diff --git a/docs/guide/configuration.md b/docs/guide/configuration.md index 852a36bf..077d31b6 100644 --- a/docs/guide/configuration.md +++ b/docs/guide/configuration.md @@ -15,13 +15,13 @@ The essential file for configuring a VitePress site is `.vitepress/config.js`, w ```js export default { - title: 'Hello VitePress', + title: 'VitePress', description: 'Just playing around.' } ``` -In the above example, the site will have the title of `VitePress`, and `Just playing around` as description meta tag. +In the above example, the site will have the title of `VitePress`, and `Just playing around.` as the description meta tag. -Learn everything about VitePress features at [Theme: Introduction](./theme-introduction) to find how to configure specific features with in this config file. +Learn everything about VitePress features at [Theme: Introduction](./theme-introduction) to find how to configure specific features within this config file. You may also find all configuration references at [Configs](../config/introduction). diff --git a/docs/guide/deploying.md b/docs/guide/deploying.md index 5e9d53f6..e2debe76 100644 --- a/docs/guide/deploying.md +++ b/docs/guide/deploying.md @@ -2,259 +2,199 @@ The following guides are based on some shared assumptions: -- You are placing your docs inside the `docs` directory of your project; -- You are using the default build output location (`.vitepress/dist`); -- VitePress is installed as a local dependency in your project, and you have setup the following npm scripts: - -```json -{ - "scripts": { - "docs:build": "vitepress build docs", - "docs:serve": "vitepress serve docs" +- You are placing your docs inside the `docs` directory of your project. +- You are using the default build output location (`.vitepress/dist`). +- VitePress is installed as a local dependency in your project, and you have set up the following scripts in your `package.json`: + + ```json + { + "scripts": { + "docs:build": "vitepress build docs", + "docs:serve": "vitepress serve docs" + } } -} -``` + ``` -## Build and test locally - -You may run `yarn docs:build` command to build the docs. - -```bash -$ yarn docs:build -``` - -By default, the build output will be placed at `.vitepress/dist`. You may deploy this `dist` folder to any of your preferred platforms. - -Once you've built the docs, you may test them locally by running `yarn docs:serve` command. - -```bash -$ yarn docs:build -$ yarn docs:serve -``` +::: tip -The `serve` command will boot up local static web server that serves the files from `.vitepress/dist` at `http://localhost:5000`. It's an easy way to check if the production build looks OK in your local environment. +If your site is to be served at a subdirectory (`https://example.com/subdir/`), then you have to set `'/subdir/'` as the [`base`](../config/app-configs#base) in your `docs/.vitepress/config.js`. -You may configure the port of the server py passing `--port` flag as an argument. +::: -```json -{ - "scripts": { - "docs:serve": "vitepress serve docs --port 8080" - } -} -``` +## Build and Test Locally -Now the `docs:serve` method will launch the server at `http://localhost:8080`. +- You may run this command to build the docs: -## GitHub Pages + ```sh + $ yarn docs:build + ``` -1. Set the correct `base` in `docs/.vitepress/config.js`. +- Once you've built the docs, you can test them locally by running: - If you are deploying to `https://.github.io/`, you can omit `base` as it defaults to `'/'`. + ```sh + $ yarn docs:serve + ``` - If you are deploying to `https://.github.io//`, for example your repository is at `https://github.com//`, then set `base` to `'//'`. + The `serve` command will boot up a local static web server that will serve the files from `.vitepress/dist` at `http://localhost:5000`. It's an easy way to check if the production build looks fine in your local environment. -2. Inside your project, create `deploy.sh` with the following content (with highlighted lines uncommented appropriately), and run it to deploy: +- You can configure the port of the server by passing `--port` as an argument. -```bash{13,20,23} -#!/usr/bin/env sh + ```json + { + "scripts": { + "docs:serve": "vitepress serve docs --port 8080" + } + } + ``` -# abort on errors -set -e + Now the `docs:serve` method will launch the server at `http://localhost:8080`. -# build -npm run docs:build +## Netlify, Vercel, AWS Amplify, Cloudflare Pages, Render -# navigate into the build output directory -cd docs/.vitepress/dist +Set up a new project and change these settings using your dashboard: -# if you are deploying to a custom domain -# echo 'www.example.com' > CNAME +- **Build Command:** `yarn docs:build` +- **Output Directory:** `docs/.vitepress/dist` +- **Node Version:** `14` (or above, by default it usually will be 14 or 16, but on Cloudflare Pages the default is still 12, so you may need to [change that](https://developers.cloudflare.com/pages/platform/build-configuration/)) -git init -git add -A -git commit -m 'deploy' +::: warning +Don't enable options like _Auto Minify_ for HTML code. It will remove comments from output which have meaning to Vue. You may see hydration mismatch errors if they get removed. +::: -# if you are deploying to https://.github.io -# git push -f git@github.com:/.github.io.git main +## GitHub Pages -# if you are deploying to https://.github.io/ -# git push -f git@github.com:/.git main:gh-pages +### Using GitHub Actions -cd - -``` +1. Create a file named `deploy.yml` inside `.github/workflows` directory of your project with the following content: -::: tip -You can also run the above script in your CI setup to enable automatic deployment on each push. -::: + ```yaml + name: Deploy -## GitHub Pages and Travis CI + on: + push: + branches: + - main -1. Set the correct `base` in `docs/.vitepress/config.js`. + jobs: + deploy: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v2 + - uses: actions/setup-node@v3 + with: + node-version: 16 + cache: yarn + - run: yarn install --frozen-lockfile - If you are deploying to `https://.github.io/`, you can omit `base` as it defaults to `'/'`. + - name: Build + run: yarn docs:build - If you are deploying to `https://.github.io//`, for example your repository is at `https://github.com//`, then set `base` to `'//'`. + - name: Deploy + uses: peaceiris/actions-gh-pages@v3 + with: + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: docs/.vitepress/dist + ``` -2. Create a file named `.travis.yml` in the root of your project. + ::: tip + Please replace the corresponding branch name. For example, if the branch you want to build is `master`, then you should replace `main` with `master` in the above file. + ::: -3. Run `yarn` or `npm install` locally and commit the generated lockfile (that is `yarn.lock` or `package-lock.json`). +2. Now commit your code and push it to the `main` branch. -4. Use the GitHub Pages deploy provider template, and follow the [Travis CI documentation](https://docs.travis-ci.com/user/deployment/pages). +3. Wait for actions to complete. Then select `gh-pages` branch as GitHub Pages source in your repository settings. Now your docs will automatically deploy each time you push. -```yaml -language: node_js -node_js: - - lts/* -install: - - yarn install # npm ci -script: - - yarn docs:build # npm run docs:build -deploy: - provider: pages - skip_cleanup: true - local_dir: docs/.vitepress/dist - # A token generated on GitHub allowing Travis to push code on you repository. - # Set in the Travis settings page of your repository, as a secure variable. - github_token: $GITHUB_TOKEN - keep_history: true - on: - branch: main -``` +## GitLab Pages -## GitLab Pages and GitLab CI +### Using GitLab CI 1. Set the correct `base` in `docs/.vitepress/config.js`. If you are deploying to `https://.gitlab.io/`, you can omit `base` as it defaults to `'/'`. - If you are deploying to `https://.gitlab.io//`, for example your repository is at `https://gitlab.com//`, then set `base` to `'//'`. + If you are deploying to `https://.gitlab.io//` (your repository is at `https://gitlab.com//`), then set `base` to `'//'`. -2. Set `outDir` in `.vitepress/config.js` to `../public`. +2. Set `outDir` in `docs/.vitepress/config.js` to `../public`. 3. Create a file called `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content: -```yaml -image: node:10.22.0 -pages: - cache: - paths: - - node_modules/ - script: - - yarn install # npm install - - yarn docs:build # npm run docs:build - artifacts: - paths: - - public - only: - - main -``` + ```yaml + image: node:16 + pages: + cache: + paths: + - node_modules/ + script: + - yarn install + - yarn docs:build + artifacts: + paths: + - public + only: + - main + ``` -## Netlify +## Azure Static Web Apps -1. On [Netlify](https://www.netlify.com/), setup up a new project from GitHub with the following settings: +1. Follow the [official documentation](https://docs.microsoft.com/en-us/azure/static-web-apps/build-configuration). -- **Build Command:** `vitepress build docs` or `yarn docs:build` or `npm run docs:build` -- **Publish directory:** `docs/.vitepress/dist` +2. Set these values in your configuration file (and remove the ones you don't require, like `api_location`): -2. Hit the deploy button. + - **`app_location`**: `/` + - **`output_location`**: `docs/.vitepress/dist` + - **`app_build_command`**: `yarn docs:build` -## Google Firebase +## Firebase -1. Make sure you have [firebase-tools](https://www.npmjs.com/package/firebase-tools) installed. +1. Create `firebase.json` and `.firebaserc` at the root of your project: -2. Create `firebase.json` and `.firebaserc` at the root of your project with the following content: + `firebase.json`: -`firebase.json`: + ```json + { + "hosting": { + "public": "docs/.vitepress/dist", + "ignore": [] + } + } + ``` -```json -{ - "hosting": { - "public": "./docs/.vitepress/dist", - "ignore": [] - } -} -``` + `.firebaserc`: -`.firebaserc`: + ```json + { + "projects": { + "default": "" + } + } + ``` -```js -{ - "projects": { - "default": "" - } -} -``` +2. After running `yarn docs:build`, run this command to deploy: -3. After running `yarn docs:build` or `npm run docs:build`, deploy using the command `firebase deploy`. + ```sh + firebase deploy + ``` ## Surge -1. First install [surge](https://www.npmjs.com/package/surge), if you haven’t already. - -2. Run `yarn docs:build` or `npm run docs:build`. +1. After running `yarn docs:build`, run this command to deploy: -3. Deploy to surge by typing `surge docs/.vitepress/dist`. - -You can also deploy to a [custom domain](https://surge.sh/help/adding-a-custom-domain) by adding `surge docs/.vitepress/dist yourdomain.com`. + ```sh + npx surge docs/.vitepress/dist + ``` ## Heroku -1. Install [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli). - -2. Create a Heroku account by [signing up](https://signup.heroku.com). - -3. Run `heroku login` and fill in your Heroku credentials: - -```bash -$ heroku login -``` - -4. Create a file called `static.json` in the root of your project with the below content: - -`static.json`: - -```json -{ - "root": "./docs/.vitepress/dist" -} -``` - -This is the configuration of your site; read more at [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static). - -5. Set up your Heroku git remote: - -```bash -# version change -$ git init -$ git add . -$ git commit -m "My site ready for deployment." - -# creates a new app with a specified name -$ heroku apps:create example - -# set buildpack for static sites -$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git -``` - -6. Deploy your site: - -```bash -# publish site -$ git push heroku main - -# opens a browser to view the Dashboard version of Heroku CI -$ heroku open -``` - -## Vercel - -To deploy your VitePress app with a [Vercel for Git](https://vercel.com/docs/concepts/git), make sure it has been pushed to a Git repository. +1. Follow documentation and guide given in [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static). -Go to https://vercel.com/new and import the project into Vercel using your Git of choice (GitHub, GitLab or BitBucket). Follow the wizard to select the project root with the project's `package.json` and override the build step using `yarn docs:build` or `npm run docs:build` and the output dir to be `./docs/.vitepress/dist` +2. Create a file called `static.json` in the root of your project with the below content: -![Override Vercel Configuration](../images/vercel-configuration.png) + ```json + { + "root": "docs/.vitepress/dist" + } + ``` -After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment. +## Layer0 -Once deployed, you will get a URL to see your app live, such as the following: https://vitepress.vercel.app +Refer [Creating and Deploying a VitePress App with Layer0](https://docs.layer0.co/guides/vitepress). diff --git a/docs/guide/getting-started.md b/docs/guide/getting-started.md index 315940c3..6bf5b20c 100644 --- a/docs/guide/getting-started.md +++ b/docs/guide/getting-started.md @@ -22,12 +22,45 @@ $ yarn init ## Step. 2: Install VitePress -Add VitePress as a dependency for the project. +Add VitePress and Vue as dev dependencies for the project. ```bash -$ yarn add --dev vitepress +$ yarn add --dev vitepress vue ``` +::: details Getting missing peer deps warnings? +`@docsearch/js` has certain issues with its peer dependencies. If you see some commands failing due to them, you can try this workaround for now: + +On Yarn v2/v3, add this inside your rc file (`.yarnrc.yml` by default): + +```yaml +packageExtensions: + '@docsearch/react@*': + peerDependenciesMeta: + '@types/react': + optional: true + 'react': + optional: true + 'react-dom': + optional: true +``` + +On PNPM, add this in your `package.json`: + +```json +"pnpm": { + "peerDependencyRules": { + "ignoreMissing": [ + "@types/react", + "react", + "react-dom" + ] + } +} +``` + +::: + Create your first document. ```bash diff --git a/docs/guide/markdown.md b/docs/guide/markdown.md index 846b867f..342904e5 100644 --- a/docs/guide/markdown.md +++ b/docs/guide/markdown.md @@ -364,12 +364,12 @@ It also supports [line highlighting](#line-highlighting-in-code-blocks): The value of `@` corresponds to the source root. By default it's the VitePress project root, unless `srcDir` is configured. ::: -You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath (`snippet` by default): +You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding) to only include the corresponding part of the code file. You can provide a custom region name after a `#` following the filepath: **Input** ```md -<<< @/snippets/snippet-with-region.js{1} +<<< @/snippets/snippet-with-region.js#snippet{1} ``` **Code file** @@ -388,6 +388,48 @@ You can also use a [VS Code region](https://code.visualstudio.com/docs/editor/co +## Markdown File Inclusion + +You can include a markdown file in another markdown file like this: + +**Input** + +```md +# Docs + +## Basics + + +``` + +**Part file** (`parts/basics.md`) + +```md +Some getting started stuff. + +### Configuration + +Can be created using `.foorc.json`. +``` + +**Equivalent code** + +```md +# Docs + +## Basics + +Some getting started stuff. + +### Configuration + +Can be created using `.foorc.json`. +``` + +::: warning +Note that this does not throw errors if your file is not present. Hence, when using this feature make sure that the contents are being rendered as expected. +::: + ## Advanced Configuration VitePress uses [markdown-it](https://github.com/markdown-it/markdown-it) as the Markdown renderer. A lot of the extensions above are implemented via custom plugins. You can further customize the `markdown-it` instance using the `markdown` option in `.vitepress/config.js`: diff --git a/docs/guide/migration-from-vitepress-0.md b/docs/guide/migration-from-vitepress-0.md index 80c5803f..f7041dc8 100644 --- a/docs/guide/migration-from-vitepress-0.md +++ b/docs/guide/migration-from-vitepress-0.md @@ -19,5 +19,5 @@ If you're coming from VitePress 0.x version, there're several breaking changes d ## Frontmatter Config -- `home: true` option has changed to `layout: home`. Also, many Homepage related settings have been modified to provide additional features. See [Homepage guide](./theme-homepage) for details. +- `home: true` option has changed to `layout: home`. Also, many Homepage related settings have been modified to provide additional features. See [Home Page guide](./theme-home-page) for details. - `footer` option is moved to [`themeConfig.footer`](../config/theme-configs#footer). diff --git a/docs/guide/migration-from-vuepress.md b/docs/guide/migration-from-vuepress.md index 75faf43a..c18c754f 100644 --- a/docs/guide/migration-from-vuepress.md +++ b/docs/guide/migration-from-vuepress.md @@ -1,3 +1,24 @@ # Migration from VuePress -Coming soon... +## Markdown + +### Images + +Unlike VuePress, VitePress handles [`base`](/guide/asset-handling.html#base-url) of your config automatically when you use static image. + +Hence, now you can render images without `img` tag. + +```diff +- foo ++ ![foo](/foo.png) +``` + +::: warning +For dynamic images you still need `withBase` as shown in [Base URL guide](/guide/asset-handling.html#base-url). +::: + +Use `` regex to find and replace it with `![$2]($1)` to replace all the images with `![](...)` syntax. + +--- + +more to follow... diff --git a/docs/guide/theme-edit-link.md b/docs/guide/theme-edit-link.md index 39eba214..64e74b31 100644 --- a/docs/guide/theme-edit-link.md +++ b/docs/guide/theme-edit-link.md @@ -1,3 +1,28 @@ # Edit Link -Documentation coming soon... +Edit Link lets you display a link to edit the page on Git management services such as GitHub, or GitLab. To enable it, add `themeConfig.editLink` options to your config. + +```js +export default { + themeConfig: { + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path' + } + } +} +``` + +The `pattern` option defines the URL structure for the link, and `:path` is going to be replaced with the page path. + +By default, this will add the link text "Edit this page" at the bottom of the doc page. You may customize this text by defining the `text` option. + +```js +export default { + themeConfig: { + editLink: { + pattern: 'https://github.com/vuejs/vitepress/edit/main/docs/:path', + text: 'Edit this page on GitHub' + } + } +} +``` diff --git a/docs/guide/theme-homepage.md b/docs/guide/theme-home-page.md similarity index 95% rename from docs/guide/theme-homepage.md rename to docs/guide/theme-home-page.md index d859e073..80a88008 100644 --- a/docs/guide/theme-homepage.md +++ b/docs/guide/theme-home-page.md @@ -1,4 +1,4 @@ -# Homepage +# Home Page VitePress default theme provides a homepage layout, which you can also see used on [the homepage of this site](../). You may use it on any of your pages by specifying `layout: home` in the [frontmatter](./frontmatter). @@ -8,7 +8,7 @@ layout: home --- ``` -However, this option alone wouldn't do much. You can add several different pre templated "sections" to the homepage by setting additional other options such as `hero` and `feaures`. +However, this option alone wouldn't do much. You can add several different pre templated "sections" to the homepage by setting additional other options such as `hero` and `features`. ## Hero Section @@ -82,7 +82,7 @@ Also you may customize it further by combining `--vp-home-hero-name-background` ## Features Section -In Features section, you can list any number of features you would like to show right after the Hero section. To cinfugure it, pass `features` option to the frontmatter. +In Features section, you can list any number of features you would like to show right after the Hero section. To configure it, pass `features` option to the frontmatter. ```yaml --- diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md index 4fddcba6..2e0b4be0 100644 --- a/docs/guide/theme-introduction.md +++ b/docs/guide/theme-introduction.md @@ -8,16 +8,17 @@ VitePress comes with its default theme providing many features out of the box. L - [Edit Link](./theme-edit-link) - [Last Updated](./theme-last-updated) - [Layout](./theme-layout) -- [Homepage](./theme-homepage) +- [Home Page](./theme-home-page) +- [Team Page](./theme-team-page) - [Footer](./theme-footer) - [Search](./theme-search) - [Carbon Ads](./theme-carbon-ads) -If you don't find the features you're looking for, or you would rather create your own theme, you may customize VitePress to fit your requirements. +If you don't find the features you're looking for, or you would rather create your own theme, you may customize VitePress to fit your requirements. In the following sections, we'll go through each way of customizing the VitePress theme. ## Using a Custom Theme -You can enable a custom theme by adding the `.vitepress/theme/index.js` file (the "theme entry file"). +You can enable a custom theme by adding the `.vitepress/theme/index.js` or `.vitepress/theme/index.ts` file (the "theme entry file"). ``` . @@ -53,6 +54,7 @@ The theme entry file should export the theme as its default export: import Layout from './Layout.vue' export default { + // root component to wrap each page Layout, // this is a Vue 3 functional component @@ -177,7 +179,7 @@ export default { ...DefaultTheme, Layout() { return h(DefaultTheme.Layout, null, { - 'sidebar-top': () => h(MyComponent) + 'aside-outline-before': () => h(MyComponent) }) } } @@ -186,6 +188,8 @@ export default { Full list of slots available in the default theme layout: - When `layout: 'doc'` (default) is enabled via frontmatter: + - `doc-before` + - `doc-after` - `aside-top` - `aside-bottom` - `aside-outline-before` @@ -197,3 +201,12 @@ Full list of slots available in the default theme layout: - `home-hero-after` - `home-features-before` - `home-features-after` +- Always: + - `layout-top` + - `layout-bottom` + - `nav-bar-title-before` + - `nav-bar-title-after` + - `nav-bar-content-before` + - `nav-bar-content-after` + - `nav-screen-content-before` + - `nav-screen-content-after` diff --git a/docs/guide/theme-layout.md b/docs/guide/theme-layout.md index 8ea0c5f6..33033102 100644 --- a/docs/guide/theme-layout.md +++ b/docs/guide/theme-layout.md @@ -35,4 +35,4 @@ Note that even in this layout, sidebar will still show up if the page has a matc ## Home Layout -Option `home` will generate templated "Homepage". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Theme: Home Page](./theme-homepage) for more details. +Option `home` will generate templated "Homepage". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Theme: Home Page](./theme-home-page) for more details. diff --git a/docs/guide/theme-nav.md b/docs/guide/theme-nav.md index 92413974..a01012f6 100644 --- a/docs/guide/theme-nav.md +++ b/docs/guide/theme-nav.md @@ -51,7 +51,7 @@ export default { } ``` -The `text` is the actual text displayed in nav, and the `link` is the link that will be navigated to when the text is clicked. For the link, set path to the actual file without `.md` prefix, and alsways start with `/`. +The `text` is the actual text displayed in nav, and the `link` is the link that will be navigated to when the text is clicked. For the link, set path to the actual file without `.md` prefix, and always start with `/`. Nav links can also be dropdown menus. To do this, set `items` key on link option. @@ -114,7 +114,7 @@ export default { ### Customize link's "active" state -Nav menu items will be highlighted when the current page is under the matching path. if you would like to customize the path to be mathced, define `activeMatch` property and regex as a string value. +Nav menu items will be highlighted when the current page is under the matching path. if you would like to customize the path to be matched, define `activeMatch` property and regex as a string value. ```js export default { diff --git a/docs/guide/theme-prev-next-link.md b/docs/guide/theme-prev-next-link.md index c248d1f3..e52f9057 100644 --- a/docs/guide/theme-prev-next-link.md +++ b/docs/guide/theme-prev-next-link.md @@ -1,3 +1,29 @@ # Prev Next Link -Documentation coming soon... +You can customize the text of previous and next links. This is helpful if you want to show different text on previous/next links than what you have on your sidebar. + +## prev + +- Type: `string` + +- Details: + + Specify the text to show on the link to the previous page. + + If you don't set this in frontmatter, the text will be inferred from the sidebar config. + +- Example: + +```yaml +--- +prev: 'Get Started | Markdown' +--- +``` + +## next + +- Type: `string` + +- Details: + + Same as `prev` but for the next page. diff --git a/docs/guide/theme-sidebar.md b/docs/guide/theme-sidebar.md index 3a2c853d..74cbb47b 100644 --- a/docs/guide/theme-sidebar.md +++ b/docs/guide/theme-sidebar.md @@ -68,7 +68,7 @@ export default { ## Multiple Sidebars -You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and `Config` page. +You may show different sidebar depending on the page path. For example, as shown on this site, you might want to create a separate sections of content in your documentation like "Guide" page and "Config" page. To do so, first organize your pages into directories for each desired section: @@ -92,27 +92,31 @@ export default { sidebar: { // This sidebar gets displayed when user is // under `guide` directory. - '/guide/': { - text: 'Guide', - items: [ - // This shows `/guide/index.md` page. - { text: 'Index', link: '/guide/' }, // /guide/index.md - { text: 'One', link: '/guide/one' }, // /guide/one.md - { text: 'Two', link: '/guide/two' } // /guide/two.md - ] - }, + '/guide/': [ + { + text: 'Guide', + items: [ + // This shows `/guide/index.md` page. + { text: 'Index', link: '/guide/' }, // /guide/index.md + { text: 'One', link: '/guide/one' }, // /guide/one.md + { text: 'Two', link: '/guide/two' } // /guide/two.md + ] + } + ], // This sidebar gets displayed when user is // under `config` directory. - '/config/': { - text: 'Config', - items: [ - // This shows `/guide/index.md` page. - { text: 'Index', link: '/config/' }, // /config/index.mdasdfasdfasdfasdfaf - { text: 'Three', link: '/config/three' }, // /config/three.md - { text: 'Four', link: '/config/four' } // /config/four.md - ] - } + '/config/': [ + { + text: 'Config', + items: [ + // This shows `/config/index.md` page. + { text: 'Index', link: '/config/' }, // /config/index.md + { text: 'Three', link: '/config/three' }, // /config/three.md + { text: 'Four', link: '/config/four' } // /config/four.md + ] + } + ] } } } diff --git a/docs/guide/theme-team-page.md b/docs/guide/theme-team-page.md new file mode 100644 index 00000000..e2510473 --- /dev/null +++ b/docs/guide/theme-team-page.md @@ -0,0 +1,255 @@ + + +# Team Page + +If you would like to introduce your team, you may use Team components to construct the Team Page. There're 2 ways of using these components. One is to embbed it in doc page, and another is to create a full Team Page. + +## Show team members in a page + +You may use `` component exposed from `vitepress/theme` to display a list of team members on any page. + +```html + + +# Our Team + +Say hello to our awesome team. + + +``` + +The above will display a team member in card looking element. It should display something similar to below. + + + +`` component comes in 2 different sizes, `small` and `medium`. While it boils down to your preference, usually `small` size should fit better when used in doc page. Also, you may add more properties to each member such as adding "description" or "sponsor" button. Learn more about it in [``](#vpteammembers). + +Embbeding team members in doc page is good for small size team where having dedicated full team page might be too much, or introducing partial members as a reference to documentation context. + +If you have large number of members, or simply would like to have more space to show team members, consider [creating a full team page](#create-a-full-team-page). + +## Create a full Team Page + +Instead of adding team members to doc page, you may also create a full Team Page, similar to how you can create a custom [Home Page](./theme-home-page). + +To create a team page, first, create a new md file. The file name doesn't matter, but here lets call it `team.md`. In this file, set frontmatter option `layout: page`, and then you may compose your page structure using `TeamPage` components. + +```html +--- +layout: page +--- + + + + + + + + + +``` + +When creating a full team page, remember to wrap all components with `` component. This component will ensure all nested team related components get the proper layout structure like spacings. + +`` component adds the page title section. The title being `

` heading. Use `#title` and `#lead` slot to document about your team. + +`` works as same as when used in a doc page. It will display list of members. + +### Add sections to divide team members + +You may add "sections" to the team page. For example, you may have different types of team members such as Core Team Members and Community Partners. You can devide these members into sections to better explain the roles of each group. + +To do so, add `` component to the `team.md` file we created previously. + +```html +--- +layout: page +--- + + + + + + + + + + + + + + +``` + +The `` component can have `#title` and `#lead` slot similar to `VPTeamPageTitle` component, and also `#members` slot for displaying team members. + +Remember to put in `` component within `#members` slot. + +## `` + +The `` component displays a given list of members. + +```html + +``` + +```ts +interface Props { + // Size of each members. Defaults to `medium`. + size?: 'small' | 'meidum' + + // List of members to display. + members: TeamMember[] +} + +interface TeamMember { + // Avatar image for the member. + avatar: string + + // Name of the member. + name: string + + // Title to be shown below member's name. + // e.g. Developer, Software Engineer, etc. + title?: string + + // Organization that the member belongs. + org?: string + + // URL for the organization. + orgLink?: string + + // Description for the member. + desc?: string + + // Social links. e.g. GitHub, Twitter, etc. You may pass in + // the Social Links object here. + // See: https://vitepress.vuejs.org/config/theme-configs.html#sociallinks + links?: SocialLink[] + + // URL for the sponsor page for the member. + sponsor?: string +} +``` + +## `` + +The root component when creating a full team page. It only accepts a single slot. It will style all passed in team related components. + +## `` + +Adds "title" section of the page. Best use at the very beginning under ``. It accepts `#title` and `#lead` slot. + +```html + + + + + + +``` + +## `` + +Creates a "section" with in team page. It accepts `#title`, `#lead`, and `#members` slot. You may add as many sections as you like inside ``. + +```html + + ... + + + + + + +``` diff --git a/docs/images/line-numbers-desktop.png b/docs/images/line-numbers-desktop.png deleted file mode 100644 index e16e6707..00000000 Binary files a/docs/images/line-numbers-desktop.png and /dev/null differ diff --git a/docs/images/line-numbers-mobile.gif b/docs/images/line-numbers-mobile.gif deleted file mode 100644 index 87af6cf0..00000000 Binary files a/docs/images/line-numbers-mobile.gif and /dev/null differ diff --git a/docs/images/vercel-configuration.png b/docs/images/vercel-configuration.png deleted file mode 100644 index 51874e15..00000000 Binary files a/docs/images/vercel-configuration.png and /dev/null differ diff --git a/package.json b/package.json index 6f918243..3c499689 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vitepress", - "version": "1.0.0-alpha.1", + "version": "1.0.0-alpha.4", "description": "Vite & Vue powered static site generator", "type": "module", "packageManager": "pnpm@7.1.7", @@ -74,6 +74,7 @@ "@docsearch/css": "^3.0.0", "@docsearch/js": "^3.0.0", "@vitejs/plugin-vue": "^2.3.2", + "@vue/devtools-api": "^6.1.4", "@vueuse/core": "^8.5.0", "body-scroll-lock": "^4.0.0-beta.0", "shiki": "^0.10.1", @@ -138,7 +139,7 @@ "sirv": "^1.0.12", "supports-color": "^9.2.2", "typescript": "^4.7.2", - "vitest": "^0.10.4" + "vitest": "^0.14.2" }, "pnpm": { "peerDependencyRules": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 322d556f..0a2e3702 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,7 @@ importers: '@types/polka': ^0.5.3 '@types/prompts': ^2.0.14 '@vitejs/plugin-vue': ^2.3.2 + '@vue/devtools-api': ^6.1.4 '@vueuse/core': ^8.5.0 body-scroll-lock: ^4.0.0-beta.0 chokidar: ^3.5.1 @@ -68,12 +69,13 @@ importers: supports-color: ^9.2.2 typescript: ^4.7.2 vite: ^2.9.7 - vitest: ^0.10.4 + vitest: ^0.14.2 vue: ^3.2.33 dependencies: '@docsearch/css': 3.1.0 '@docsearch/js': 3.1.0 '@vitejs/plugin-vue': 2.3.3_vite@2.9.9+vue@3.2.33 + '@vue/devtools-api': 6.1.4 '@vueuse/core': 8.5.0_vue@3.2.33 body-scroll-lock: 4.0.0-beta.0 shiki: 0.10.1 @@ -137,7 +139,7 @@ importers: sirv: 1.0.17 supports-color: 9.2.2 typescript: 4.7.2 - vitest: 0.10.5 + vitest: 0.14.2_supports-color@9.2.2 docs: specifiers: {} @@ -722,6 +724,10 @@ packages: '@vue/shared': 3.2.33 dev: false + /@vue/devtools-api/6.1.4: + resolution: {integrity: sha512-IiA0SvDrJEgXvVxjNkHPFfDx6SXw0b/TUkqMcDZWNg9fnCAHbTpoo59YfJ9QLFkwa3raau5vSlRVzMSLDnfdtQ==} + dev: false + /@vue/reactivity-transform/3.2.33: resolution: {integrity: sha512-4UL5KOIvSQb254aqenW4q34qMXbfZcmEsV/yVidLUgvwYQQ/D21bGX3DlgPUGI3c4C+iOnNmDCkIxkILoX/Pyw==} dependencies: @@ -1397,6 +1403,19 @@ packages: supports-color: 9.2.2 dev: true + /debug/4.3.4_supports-color@9.2.2: + resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + dependencies: + ms: 2.1.2 + supports-color: 9.2.2 + dev: true + /decamelize-keys/1.1.0: resolution: {integrity: sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=} engines: {node: '>=0.10.0'} @@ -1510,6 +1529,16 @@ packages: cpu: [x64] os: [android] requiresBuild: true + dev: false + optional: true + + /esbuild-android-64/0.14.43: + resolution: {integrity: sha512-kqFXAS72K6cNrB6RiM7YJ5lNvmWRDSlpi7ZuRZ1hu1S3w0zlwcoCxWAyM23LQUyZSs1PbjHgdbbfYAN8IGh6xg==} + engines: {node: '>=12'} + cpu: [x64] + os: [android] + requiresBuild: true + dev: true optional: true /esbuild-android-arm64/0.14.3: @@ -1526,6 +1555,16 @@ packages: cpu: [arm64] os: [android] requiresBuild: true + dev: false + optional: true + + /esbuild-android-arm64/0.14.43: + resolution: {integrity: sha512-bKS2BBFh+7XZY9rpjiHGRNA7LvWYbZWP87pLehggTG7tTaCDvj8qQGOU/OZSjCSKDYbgY7Q+oDw8RlYQ2Jt2BA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [android] + requiresBuild: true + dev: true optional: true /esbuild-darwin-64/0.14.3: @@ -1542,6 +1581,16 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true + dev: false + optional: true + + /esbuild-darwin-64/0.14.43: + resolution: {integrity: sha512-/3PSilx011ttoieRGkSZ0XV8zjBf2C9enV4ScMMbCT4dpx0mFhMOpFnCHkOK0pWGB8LklykFyHrWk2z6DENVUg==} + engines: {node: '>=12'} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: true optional: true /esbuild-darwin-arm64/0.14.3: @@ -1558,6 +1607,16 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true + dev: false + optional: true + + /esbuild-darwin-arm64/0.14.43: + resolution: {integrity: sha512-1HyFUKs8DMCBOvw1Qxpr5Vv/ThNcVIFb5xgXWK3pyT40WPvgYIiRTwJCvNs4l8i5qWF8/CK5bQxJVDjQvtv0Yw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: true optional: true /esbuild-freebsd-64/0.14.3: @@ -1574,6 +1633,16 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true + dev: false + optional: true + + /esbuild-freebsd-64/0.14.43: + resolution: {integrity: sha512-FNWc05TPHYgaXjbPZO5/rJKSBslfG6BeMSs8GhwnqAKP56eEhvmzwnIz1QcC9cRVyO+IKqWNfmHFkCa1WJTULA==} + engines: {node: '>=12'} + cpu: [x64] + os: [freebsd] + requiresBuild: true + dev: true optional: true /esbuild-freebsd-arm64/0.14.3: @@ -1590,6 +1659,16 @@ packages: cpu: [arm64] os: [freebsd] requiresBuild: true + dev: false + optional: true + + /esbuild-freebsd-arm64/0.14.43: + resolution: {integrity: sha512-amrYopclz3VohqisOPR6hA3GOWA3LZC1WDLnp21RhNmoERmJ/vLnOpnrG2P/Zao+/erKTCUqmrCIPVtj58DRoA==} + engines: {node: '>=12'} + cpu: [arm64] + os: [freebsd] + requiresBuild: true + dev: true optional: true /esbuild-linux-32/0.14.3: @@ -1606,6 +1685,16 @@ packages: cpu: [ia32] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-32/0.14.43: + resolution: {integrity: sha512-KoxoEra+9O3AKVvgDFvDkiuddCds6q71owSQEYwjtqRV7RwbPzKxJa6+uyzUulHcyGVq0g15K0oKG5CFBcvYDw==} + engines: {node: '>=12'} + cpu: [ia32] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-linux-64/0.14.3: @@ -1622,6 +1711,16 @@ packages: cpu: [x64] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-64/0.14.43: + resolution: {integrity: sha512-EwINwGMyiJMgBby5/SbMqKcUhS5AYAZ2CpEBzSowsJPNBJEdhkCTtEjk757TN/wxgbu3QklqDM6KghY660QCUw==} + engines: {node: '>=12'} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-linux-arm/0.14.3: @@ -1638,6 +1737,16 @@ packages: cpu: [arm] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-arm/0.14.43: + resolution: {integrity: sha512-e6YzQUoDxxtyamuF12eVzzRC7bbEFSZohJ6igQB9tBqnNmIQY3fI6Cns3z2wxtbZ3f2o6idkD2fQnlvs2902Dg==} + engines: {node: '>=12'} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-linux-arm64/0.14.3: @@ -1654,6 +1763,16 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-arm64/0.14.43: + resolution: {integrity: sha512-UlSpjMWllAc70zYbHxWuDS3FJytyuR/gHJYBr8BICcTNb/TSOYVBg6U7b3jZ3mILTrgzwJUHwhEwK18FZDouUQ==} + engines: {node: '>=12'} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-linux-mips64le/0.14.3: @@ -1670,6 +1789,16 @@ packages: cpu: [mips64el] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-mips64le/0.14.43: + resolution: {integrity: sha512-f+v8cInPEL1/SDP//CfSYzcDNgE4CY3xgDV81DWm3KAPWzhvxARrKxB1Pstf5mB56yAslJDxu7ryBUPX207EZA==} + engines: {node: '>=12'} + cpu: [mips64el] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-linux-ppc64le/0.14.3: @@ -1686,6 +1815,16 @@ packages: cpu: [ppc64] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-ppc64le/0.14.43: + resolution: {integrity: sha512-5wZYMDGAL/K2pqkdIsW+I4IR41kyfHr/QshJcNpUfK3RjB3VQcPWOaZmc+74rm4ZjVirYrtz+jWw0SgxtxRanA==} + engines: {node: '>=12'} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-linux-riscv64/0.14.39: @@ -1694,6 +1833,16 @@ packages: cpu: [riscv64] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-riscv64/0.14.43: + resolution: {integrity: sha512-lYcAOUxp85hC7lSjycJUVSmj4/9oEfSyXjb/ua9bNl8afonaduuqtw7hvKMoKuYnVwOCDw4RSfKpcnIRDWq+Bw==} + engines: {node: '>=12'} + cpu: [riscv64] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-linux-s390x/0.14.39: @@ -1702,6 +1851,16 @@ packages: cpu: [s390x] os: [linux] requiresBuild: true + dev: false + optional: true + + /esbuild-linux-s390x/0.14.43: + resolution: {integrity: sha512-27e43ZhHvhFE4nM7HqtUbMRu37I/4eNSUbb8FGZWszV+uLzMIsHDwLoBiJmw7G9N+hrehNPeQ4F5Ujad0DrUKQ==} + engines: {node: '>=12'} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true optional: true /esbuild-netbsd-64/0.14.3: @@ -1718,6 +1877,16 @@ packages: cpu: [x64] os: [netbsd] requiresBuild: true + dev: false + optional: true + + /esbuild-netbsd-64/0.14.43: + resolution: {integrity: sha512-2mH4QF6hHBn5zzAfxEI/2eBC0mspVsZ6UVo821LpAJKMvLJPBk3XJO5xwg7paDqSqpl7p6IRrAenW999AEfJhQ==} + engines: {node: '>=12'} + cpu: [x64] + os: [netbsd] + requiresBuild: true + dev: true optional: true /esbuild-openbsd-64/0.14.3: @@ -1734,6 +1903,16 @@ packages: cpu: [x64] os: [openbsd] requiresBuild: true + dev: false + optional: true + + /esbuild-openbsd-64/0.14.43: + resolution: {integrity: sha512-ZhQpiZjvqCqO8jKdGp9+8k9E/EHSA+zIWOg+grwZasI9RoblqJ1QiZqqi7jfd6ZrrG1UFBNGe4m0NFxCFbMVbg==} + engines: {node: '>=12'} + cpu: [x64] + os: [openbsd] + requiresBuild: true + dev: true optional: true /esbuild-sunos-64/0.14.3: @@ -1750,6 +1929,16 @@ packages: cpu: [x64] os: [sunos] requiresBuild: true + dev: false + optional: true + + /esbuild-sunos-64/0.14.43: + resolution: {integrity: sha512-DgxSi9DaHReL9gYuul2rrQCAapgnCJkh3LSHPKsY26zytYppG0HgkgVF80zjIlvEsUbGBP/GHQzBtrezj/Zq1Q==} + engines: {node: '>=12'} + cpu: [x64] + os: [sunos] + requiresBuild: true + dev: true optional: true /esbuild-windows-32/0.14.3: @@ -1766,6 +1955,16 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true + dev: false + optional: true + + /esbuild-windows-32/0.14.43: + resolution: {integrity: sha512-Ih3+2O5oExiqm0mY6YYE5dR0o8+AspccQ3vIAtRodwFvhuyGLjb0Hbmzun/F3Lw19nuhPMu3sW2fqIJ5xBxByw==} + engines: {node: '>=12'} + cpu: [ia32] + os: [win32] + requiresBuild: true + dev: true optional: true /esbuild-windows-64/0.14.3: @@ -1782,6 +1981,16 @@ packages: cpu: [x64] os: [win32] requiresBuild: true + dev: false + optional: true + + /esbuild-windows-64/0.14.43: + resolution: {integrity: sha512-8NsuNfI8xwFuJbrCuI+aBqNTYkrWErejFO5aYM+yHqyHuL8mmepLS9EPzAzk8rvfaJrhN0+RvKWAcymViHOKEw==} + engines: {node: '>=12'} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: true optional: true /esbuild-windows-arm64/0.14.3: @@ -1798,6 +2007,16 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true + dev: false + optional: true + + /esbuild-windows-arm64/0.14.43: + resolution: {integrity: sha512-7ZlD7bo++kVRblJEoG+cepljkfP8bfuTPz5fIXzptwnPaFwGS6ahvfoYzY7WCf5v/1nX2X02HDraVItTgbHnKw==} + engines: {node: '>=12'} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: true optional: true /esbuild/0.14.3: @@ -1850,6 +2069,35 @@ packages: esbuild-windows-32: 0.14.39 esbuild-windows-64: 0.14.39 esbuild-windows-arm64: 0.14.39 + dev: false + + /esbuild/0.14.43: + resolution: {integrity: sha512-Uf94+kQmy/5jsFwKWiQB4hfo/RkM9Dh7b79p8yqd1tshULdr25G2szLz631NoH3s2ujnKEKVD16RmOxvCNKRFA==} + engines: {node: '>=12'} + hasBin: true + requiresBuild: true + optionalDependencies: + esbuild-android-64: 0.14.43 + esbuild-android-arm64: 0.14.43 + esbuild-darwin-64: 0.14.43 + esbuild-darwin-arm64: 0.14.43 + esbuild-freebsd-64: 0.14.43 + esbuild-freebsd-arm64: 0.14.43 + esbuild-linux-32: 0.14.43 + esbuild-linux-64: 0.14.43 + esbuild-linux-arm: 0.14.43 + esbuild-linux-arm64: 0.14.43 + esbuild-linux-mips64le: 0.14.43 + esbuild-linux-ppc64le: 0.14.43 + esbuild-linux-riscv64: 0.14.43 + esbuild-linux-s390x: 0.14.43 + esbuild-netbsd-64: 0.14.43 + esbuild-openbsd-64: 0.14.43 + esbuild-sunos-64: 0.14.43 + esbuild-windows-32: 0.14.43 + esbuild-windows-64: 0.14.43 + esbuild-windows-arm64: 0.14.43 + dev: true /escalade/3.1.1: resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} @@ -1983,7 +2231,7 @@ packages: dev: true /get-func-name/2.0.0: - resolution: {integrity: sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=} + resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==} dev: true /get-intrinsic/1.1.1: @@ -2099,7 +2347,7 @@ packages: source-map: 0.6.1 wordwrap: 1.0.0 optionalDependencies: - uglify-js: 3.14.2 + uglify-js: 3.16.0 dev: true /hard-rejection/2.1.0: @@ -3229,6 +3477,15 @@ packages: hasBin: true optionalDependencies: fsevents: 2.3.2 + dev: false + + /rollup/2.75.6: + resolution: {integrity: sha512-OEf0TgpC9vU6WGROJIk1JA3LR5vk/yvqlzxqdrE2CzzXnqKXNzbAwlWUXis8RS3ZPe7LAq+YUxsRa0l3r27MLA==} + engines: {node: '>=10.0.0'} + hasBin: true + optionalDependencies: + fsevents: 2.3.2 + dev: true /run-parallel/1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} @@ -3579,8 +3836,8 @@ packages: engines: {node: '>=14.0.0'} dev: true - /tinyspy/0.3.2: - resolution: {integrity: sha512-2+40EP4D3sFYy42UkgkFFB+kiX2Tg3URG/lVvAZFfLxgGpnWl5qQJuBw1gaLttq8UOS+2p3C0WrhJnQigLTT2Q==} + /tinyspy/0.3.3: + resolution: {integrity: sha512-gRiUR8fuhUf0W9lzojPf1N1euJYA30ISebSfgca8z76FOvXtVXqd5ojEIaKLWbDQhAaC3ibxZIjqbyi4ybjcTw==} engines: {node: '>=14.0.0'} dev: true @@ -3652,8 +3909,8 @@ packages: resolution: {integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==} dev: true - /uglify-js/3.14.2: - resolution: {integrity: sha512-rtPMlmcO4agTUfz10CbgJ1k6UAoXM2gWb3GoMPPZB/+/Ackf8lNWk11K4rYi2D0apgoFRLtQOZhb+/iGNJq26A==} + /uglify-js/3.16.0: + resolution: {integrity: sha512-FEikl6bR30n0T3amyBh3LoiBdqHRy/f4H80+My34HOesOKyHfOsxAPAxOoqC0JUnC1amnO0IwkYC3sko51caSw==} engines: {node: '>=0.8.0'} hasBin: true requiresBuild: true @@ -3696,6 +3953,30 @@ packages: engines: {node: '>= 0.8'} dev: true + /vite/2.9.12: + resolution: {integrity: sha512-suxC36dQo9Rq1qMB2qiRorNJtJAdxguu5TMvBHOc/F370KvqAe9t48vYp+/TbPKRNrMh/J55tOUmkuIqstZaew==} + engines: {node: '>=12.2.0'} + hasBin: true + peerDependencies: + less: '*' + sass: '*' + stylus: '*' + peerDependenciesMeta: + less: + optional: true + sass: + optional: true + stylus: + optional: true + dependencies: + esbuild: 0.14.43 + postcss: 8.4.14 + resolve: 1.22.0 + rollup: 2.75.6 + optionalDependencies: + fsevents: 2.3.2 + dev: true + /vite/2.9.9: resolution: {integrity: sha512-ffaam+NgHfbEmfw/Vuh6BHKKlI/XIAhxE5QSS7gFLIngxg171mg1P3a4LSRME0z2ZU1ScxoKzphkipcYwSD5Ew==} engines: {node: '>=12.2.0'} @@ -3718,9 +3999,10 @@ packages: rollup: 2.60.1 optionalDependencies: fsevents: 2.3.2 + dev: false - /vitest/0.10.5: - resolution: {integrity: sha512-4qXdNbHwAd9YcsztJoVMWUQGcMATVlY9Xd95I3KQ2JJwDLTL97f/jgfGRotqptvNxdlmme5TBY0Gv+l6+JSYvA==} + /vitest/0.14.2_supports-color@9.2.2: + resolution: {integrity: sha512-vXQUl8OUCqHmxKWscMGL+6Xl1pBJmYHZ8N85iNpLGrirAC2vhspu7b73ShRcLonmZT44BYZW+LBAVvn0L4jyVA==} engines: {node: '>=v14.16.0'} hasBin: true peerDependencies: @@ -3741,14 +4023,16 @@ packages: '@types/chai': 4.3.1 '@types/chai-subset': 1.3.3 chai: 4.3.6 + debug: 4.3.4_supports-color@9.2.2 local-pkg: 0.4.1 tinypool: 0.1.3 - tinyspy: 0.3.2 - vite: 2.9.9 + tinyspy: 0.3.3 + vite: 2.9.12 transitivePeerDependencies: - less - sass - stylus + - supports-color dev: true /vscode-oniguruma/1.6.2: diff --git a/scripts/copyShared.js b/scripts/copyShared.js index ed5f55d9..465f2853 100644 --- a/scripts/copyShared.js +++ b/scripts/copyShared.js @@ -1,7 +1,9 @@ import { copy } from 'fs-extra' import fg from 'fast-glob' -fg.sync('src/shared/**/*.ts').map(async (file) => { - await copy(file, file.replace(/^src\/shared\//, 'src/node/')) - await copy(file, file.replace(/^src\/shared\//, 'src/client/')) +fg.sync('src/shared/**/*.ts').forEach(async (file) => { + await Promise.all([ + copy(file, file.replace(/^src\/shared\//, 'src/node/')), + copy(file, file.replace(/^src\/shared\//, 'src/client/')) + ]) }) diff --git a/scripts/release.js b/scripts/release.js index 8da3732a..3585bef7 100644 --- a/scripts/release.js +++ b/scripts/release.js @@ -33,7 +33,7 @@ async function main() { message: 'Select release type', choices: versions }) - console.log(release, release === 3) + if (release === 3) { targetVersion = ( await prompts({ diff --git a/src/client/app/components/Debug.vue b/src/client/app/components/Debug.vue deleted file mode 100644 index 41e926a0..00000000 --- a/src/client/app/components/Debug.vue +++ /dev/null @@ -1,86 +0,0 @@ - - - - - diff --git a/src/client/app/data.ts b/src/client/app/data.ts index fb68378f..cea5a8a8 100644 --- a/src/client/app/data.ts +++ b/src/client/app/data.ts @@ -1,6 +1,6 @@ import { InjectionKey, Ref, shallowRef, readonly, computed, inject } from 'vue' import { Route } from './router' -import serializedSiteData from '@siteData' +import siteData from '@siteData' import { PageData, SiteData, @@ -25,17 +25,16 @@ export interface VitePressData { // site data is a singleton export type SiteDataRef = Ref> -export const siteDataRef: Ref = shallowRef(parse(serializedSiteData)) - -function parse(data: string): SiteData { - const parsed = JSON.parse(data) - return (import.meta.env.DEV ? readonly(parsed) : parsed) as SiteData -} +export const siteDataRef: Ref = shallowRef( + import.meta.env.PROD ? siteData : readonly(siteData) +) // hmr if (import.meta.hot) { - import.meta.hot!.accept('/@siteData', (m) => { - siteDataRef.value = parse(m.default) + import.meta.hot.accept('/@siteData', (m) => { + if (m) { + siteDataRef.value = m.default + } }) } diff --git a/src/client/app/devtools.ts b/src/client/app/devtools.ts new file mode 100644 index 00000000..05935e47 --- /dev/null +++ b/src/client/app/devtools.ts @@ -0,0 +1,41 @@ +import { setupDevtoolsPlugin } from '@vue/devtools-api' +import type { App } from 'vue' +import type { Router } from './router' +import type { VitePressData } from './data' + +const COMPONENT_STATE_TYPE = 'VitePress' + +export const setupDevtools = ( + app: App, + router: Router, + data: VitePressData +): void => { + setupDevtoolsPlugin( + { + // fix recursive reference + app: app as any, + id: 'org.vuejs.vitepress', + label: 'VitePress', + packageName: 'vitepress', + homepage: 'https://vitepress.vuejs.org', + componentStateTypes: [COMPONENT_STATE_TYPE] + }, + (api) => { + api.on.inspectComponent((payload) => { + payload.instanceData.state.push({ + type: COMPONENT_STATE_TYPE, + key: 'route', + value: router.route, + editable: false + }) + + payload.instanceData.state.push({ + type: COMPONENT_STATE_TYPE, + key: 'data', + value: data, + editable: false + }) + }) + } + ) +} diff --git a/src/client/app/index.ts b/src/client/app/index.ts index 2e8e88d6..7fcfc53a 100644 --- a/src/client/app/index.ts +++ b/src/client/app/index.ts @@ -2,7 +2,6 @@ import { App, createApp as createClientApp, createSSRApp, - defineAsyncComponent, h, onMounted, watch @@ -46,8 +45,6 @@ const VitePressApp = { export function createApp() { const router = newRouter() - handleHMR(router) - const app = newApp() app.provide(RouterSymbol, router) @@ -58,12 +55,6 @@ export function createApp() { // install global components app.component('Content', Content) app.component('ClientOnly', ClientOnly) - app.component( - 'Debug', - import.meta.env.PROD - ? () => null - : defineAsyncComponent(() => import('./components/Debug.vue')) - ) // expose $frontmatter Object.defineProperty(app.config.globalProperties, '$frontmatter', { @@ -80,6 +71,13 @@ export function createApp() { }) } + // setup devtools in dev mode + if (import.meta.env.DEV || __VUE_PROD_DEVTOOLS__) { + import('./devtools').then(({ setupDevtools }) => + setupDevtools(app, router, data) + ) + } + return { app, router, data } } @@ -115,25 +113,6 @@ function newRouter(): Router { }, NotFound) } -function handleHMR(router: Router): void { - // update route.data on HMR updates of active page - if (import.meta.hot) { - // hot reload pageData - import.meta.hot!.on('vitepress:pageData', (payload) => { - if (shouldHotReload(payload)) { - router.route.data = payload.pageData - } - }) - } -} - -function shouldHotReload(payload: any): boolean { - const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '') - const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '') - - return payloadPath === locationPath -} - if (inBrowser) { const { app, router, data } = createApp() diff --git a/src/client/app/router.ts b/src/client/app/router.ts index 2eca5b7b..39418559 100644 --- a/src/client/app/router.ts +++ b/src/client/app/router.ts @@ -1,6 +1,7 @@ import { reactive, inject, markRaw, nextTick, readonly } from 'vue' import type { Component, InjectionKey } from 'vue' -import { PageData } from '../shared' +import { notFoundPageData } from '../shared' +import type { PageData, PageDataPayload } from '../shared' import { inBrowser, withBase } from './utils' import { siteDataRef } from './data' @@ -21,15 +22,6 @@ export const RouterSymbol: InjectionKey = Symbol() // matter and is only passed to support same-host hrefs. const fakeHost = `http://a.com` -const notFoundPageData: PageData = { - relativePath: '', - title: '404', - description: 'Not Found', - headers: [], - frontmatter: {}, - lastUpdated: 0 -} - const getDefaultRoute = (): Route => ({ path: '/', component: null, @@ -37,7 +29,7 @@ const getDefaultRoute = (): Route => ({ }) interface PageModule { - __pageData: string + __pageData: PageData default: Component } @@ -85,8 +77,8 @@ export function createRouter( route.path = inBrowser ? pendingPath : withBase(pendingPath) route.component = markRaw(comp) route.data = import.meta.env.PROD - ? markRaw(JSON.parse(__pageData)) - : (readonly(JSON.parse(__pageData)) as PageData) + ? markRaw(__pageData) + : (readonly(__pageData) as PageData) if (inBrowser) { nextTick(() => { @@ -109,7 +101,7 @@ export function createRouter( } } } catch (err: any) { - if (!err.message.match(/fetch/)) { + if (!err.message.match(/fetch/) && !href.match(/^[\\/]404\.html$/)) { console.error(err) } @@ -182,6 +174,8 @@ export function createRouter( }) } + handleHMR(route) + return { route, go @@ -239,3 +233,21 @@ function scrollTo(el: HTMLElement, hash: string, smooth = false) { } } } + +function handleHMR(route: Route): void { + // update route.data on HMR updates of active page + if (import.meta.hot) { + // hot reload pageData + import.meta.hot!.on('vitepress:pageData', (payload: PageDataPayload) => { + if (shouldHotReload(payload)) { + route.data = payload.pageData + } + }) + } +} + +function shouldHotReload(payload: PageDataPayload): boolean { + const payloadPath = payload.path.replace(/(\bindex)?\.md$/, '') + const locationPath = location.pathname.replace(/(\bindex)?\.html$/, '') + return payloadPath === locationPath +} diff --git a/src/client/index.ts b/src/client/index.ts index 96c628bf..a4e3fb18 100644 --- a/src/client/index.ts +++ b/src/client/index.ts @@ -24,6 +24,3 @@ export { inBrowser, withBase } from './app/utils' // components export { Content } from './app/components/Content' - -import _Debug from './app/components/Debug.vue' -export const Debug = _Debug as import('vue').ComponentOptions diff --git a/src/client/shim.d.ts b/src/client/shim.d.ts index 6a486e5d..f627e102 100644 --- a/src/client/shim.d.ts +++ b/src/client/shim.d.ts @@ -1,6 +1,7 @@ declare const __VP_HASH_MAP__: Record declare const __ALGOLIA__: boolean declare const __CARBON__: boolean +declare const __VUE_PROD_DEVTOOLS__: boolean declare module '*.vue' { import { ComponentOptions } from 'vue' @@ -9,7 +10,8 @@ declare module '*.vue' { } declare module '@siteData' { - const data: string + import type { SiteData } from './shared' + const data: SiteData export default data } @@ -18,12 +20,3 @@ declare module '@docsearch/js' { function docsearch(props: T): void export default docsearch } - -declare module '@docsearch/react/dist/esm/types' { - export type DocSearchHit = any -} - -declare module '@docsearch/css' { - const css: string - export default css -} diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue index 77fe1c5d..9008519a 100644 --- a/src/client/theme-default/Layout.vue +++ b/src/client/theme-default/Layout.vue @@ -1,5 +1,6 @@