diff --git a/docs/en/guide/what-is-vitepress.md b/docs/en/guide/what-is-vitepress.md index a498d17ecda6..58453ece3c83 100644 --- a/docs/en/guide/what-is-vitepress.md +++ b/docs/en/guide/what-is-vitepress.md @@ -18,7 +18,7 @@ Just want to try it out? Skip to the [Quickstart](./getting-started). - **Blogs, Portfolios, and Marketing Sites** - VitePress supports [fully customized themes](./custom-theme), with the developer experience of a standard Vite + Vue application. Being built on Vite also means you can directly leverage Vite plugins from its rich ecosystem. In addition, VitePress provides flexible APIs to [load data](./data-loading) (local or remote) and [dynamically generate routes](./routing#dynamic-routes). You can use it to build almost anything as long as the data can be determined at build time. + VitePress supports [fully customized themes](./custom-theme), with the developer experience of a standard Vite + Vue application. Being built on Vite also means you can directly leverage Vite plugins from its rich ecosystem. Additionally, VitePress provides flexible APIs to [load data](./data-loading) (local or remote) and [dynamically generate routes](./routing#dynamic-routes). You can use it to build almost anything as long as the data can be determined at build time. The official [Vue.js blog](https://blog.vuejs.org/) is a simple blog that generates its index page based on local content. diff --git a/docs/en/reference/cli.md b/docs/en/reference/cli.md index 85517620bfaa..a820d03c6978 100644 --- a/docs/en/reference/cli.md +++ b/docs/en/reference/cli.md @@ -2,7 +2,7 @@ ## `vitepress dev` -Start VitePress dev server using designated directory as root. Defaults to current directory. The `dev` command can also be omitted when running in current directory. +Start a VitePress dev server using designated directory as root. Defaults to the current directory. The `dev` command can also be omitted when running in current directory. ### Usage @@ -65,7 +65,7 @@ vitepress preview [root] ## `vitepress init` -Start the [Setup Wizard](../guide/getting-started#setup-wizard) in current directory. +Start the [Setup Wizard](../guide/getting-started#setup-wizard) in the current directory. ### Usage diff --git a/docs/en/reference/default-theme-badge.md b/docs/en/reference/default-theme-badge.md index e23fde008c36..1cb2c07aba4a 100644 --- a/docs/en/reference/default-theme-badge.md +++ b/docs/en/reference/default-theme-badge.md @@ -1,6 +1,6 @@ # Badge -The badge lets you add status to your headers. For example, it could be useful to specify the section's type, or supported version. +The badge lets you add status to your headers. For example, it could be useful to specify the section's type or supported version. ## Usage @@ -13,7 +13,7 @@ You may use the `Badge` component which is globally available. ### Title ``` -Code above renders like: +The code above renders like: ### Title ### Title @@ -22,7 +22,7 @@ Code above renders like: ## Custom Children -`` accept `children`, which will be displayed in the badge. +`` accepts `children`, which will be displayed in the badge. ```html ### Title custom element @@ -56,7 +56,7 @@ You can customize the style of badges by overriding css variables. The following ## `` -`` component accepts following props: +`` component accepts the following props: ```ts interface Props { diff --git a/docs/en/reference/default-theme-config.md b/docs/en/reference/default-theme-config.md index c8afc5544a4d..6af00f94f74c 100644 --- a/docs/en/reference/default-theme-config.md +++ b/docs/en/reference/default-theme-config.md @@ -50,7 +50,7 @@ type ThemeableImage = - Type: `string | false` -You can customize this item to replace the default site title (`title` in app config) in nav. When set to `false`, title in nav will be disabled. Useful when you have `logo` that already contains the site title text. +You can customize this item to replace the default site title (`title` in app config) in nav. When set to `false`, title in nav will be disabled. Useful when you have a `logo` that already contains the site title text. ```ts export default { @@ -184,7 +184,7 @@ export type SidebarItem = { - Default: `true` - Can be overridden per page via [frontmatter](./frontmatter-config#aside) -Setting this value to `false` prevents rendering of aside container.\ +Setting this value to `false` prevents rendering of the aside container.\ Setting this value to `true` renders the aside to the right.\ Setting this value to `left` renders the aside to the left. @@ -195,7 +195,7 @@ If you want to disable it for all viewports, you should use `outline: false` ins - Type: `Outline | Outline['level'] | false` - Level can be overridden per page via [frontmatter](./frontmatter-config#outline) -Setting this value to `false` prevents rendering of outline container. Refer this interface for more details: +Setting this value to `false` prevents rendering of the outline container. Refer this interface for more details: ```ts interface Outline { @@ -283,7 +283,7 @@ export interface Footer { - Type: `EditLink` - Can be overridden per page via [frontmatter](./frontmatter-config#editlink) -Edit Link lets you display a link to edit the page on Git management services such as GitHub, or GitLab. See [Default Theme: Edit Link](./default-theme-edit-link) for more details. +Edit Link lets you display a link to edit the page on Git management services such as GitHub or GitLab. See [Default Theme: Edit Link](./default-theme-edit-link) for more details. ```ts export default { diff --git a/docs/en/reference/default-theme-edit-link.md b/docs/en/reference/default-theme-edit-link.md index ff049d59e3a9..63ba5403a26b 100644 --- a/docs/en/reference/default-theme-edit-link.md +++ b/docs/en/reference/default-theme-edit-link.md @@ -2,7 +2,7 @@ ## Site-Level Config -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. +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 { @@ -36,7 +36,7 @@ export default { It should not have side-effects nor access anything outside of its scope since it will be serialized and executed in the browser. -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. +By default, this will add the hyperlinked text "Edit this page" at the bottom of the doc page. You may customize this text by defining the `text` option. ```js export default { diff --git a/docs/en/reference/default-theme-footer.md b/docs/en/reference/default-theme-footer.md index a58e8ac6b198..18ceab5f67c8 100644 --- a/docs/en/reference/default-theme-footer.md +++ b/docs/en/reference/default-theme-footer.md @@ -1,6 +1,6 @@ # Footer -VitePress will display global footer at the bottom of the page when `themeConfig.footer` is present. +VitePress will display the global footer at the bottom of the page when `themeConfig.footer` is present. ```ts export default { @@ -23,7 +23,7 @@ export interface Footer { } ``` -The above configuration also supports HTML strings. So, for example, if you want to configure footer text to have some links, you can adjust the configuration as follows: +The above configuration also supports HTML strings. For example, if you want to configure the footer text to have some links, you can adjust the configuration as follows: ```ts export default { @@ -37,7 +37,7 @@ export default { ``` ::: warning -Only inline elements can be used in `message` and `copyright` as they are rendered inside a `

` element. If you want to add block elements, consider using [`layout-bottom`](../guide/extending-default-theme#layout-slots) slot instead. +Only inline elements can be used in `message` and `copyright` as they are rendered inside a `

` element. If you want to add block elements, consider using the [`layout-bottom`](../guide/extending-default-theme#layout-slots) slot instead. ::: Note that footer will not be displayed when the [SideBar](./default-theme-sidebar) is visible. diff --git a/docs/en/reference/default-theme-home-page.md b/docs/en/reference/default-theme-home-page.md index f7baecca0138..ff1ad553de4f 100644 --- a/docs/en/reference/default-theme-home-page.md +++ b/docs/en/reference/default-theme-home-page.md @@ -80,7 +80,7 @@ interface HeroAction { ### Customizing the name color -VitePress uses the brand color (`--vp-c-brand-1`) for the `name`. However, you may customize this color by overriding `--vp-home-hero-name-color` variable. +VitePress uses the brand color (`--vp-c-brand-1`) for the `name`. However, you may customize this color by overriding the `--vp-home-hero-name-color` variable. ```css :root { @@ -88,7 +88,7 @@ VitePress uses the brand color (`--vp-c-brand-1`) for the `name`. However, you m } ``` -Also you may customize it further by combining `--vp-home-hero-name-background` to give the `name` gradient color. +You may also customize it further by combining it with `--vp-home-hero-name-background` to give the `name` a gradient color. ```css :root { @@ -99,9 +99,9 @@ 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 configure it, pass `features` option to the frontmatter. +In the 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. -You can provide an icon for each feature, which can be an emoji or any type of image. When the configured icon is an image (svg, png, jpeg...), you must provide the icon with the proper width and height; you can also provide the description, its intrinsic size as well as its variants for dark and light theme when required. +You can provide an icon for each feature, which can be an emoji or any type of image. When the configured icon is an image (svg, png, jpeg...), you must provide the icon with the proper width and height; you can also provide the description, its intrinsic size, as well as its variants for dark and light theme when required. ```yaml --- diff --git a/docs/en/reference/default-theme-last-updated.md b/docs/en/reference/default-theme-last-updated.md index 00fed72a08e8..6a3c2240a5c9 100644 --- a/docs/en/reference/default-theme-last-updated.md +++ b/docs/en/reference/default-theme-last-updated.md @@ -1,6 +1,6 @@ # Last Updated -The update time of the last content will be displayed in the lower right corner of the page. To enable it, add `lastUpdated` options to your config. +The last updated time of the content will be displayed in the lower right corner of the page. To enable it, add the `lastUpdated` option to your config. ::: tip You need to commit the markdown file to see the updated time. @@ -24,4 +24,4 @@ lastUpdated: false --- ``` -Also refer [Default Theme: Last Updated](./default-theme-config#lastupdated) for more details. Any truthy value at theme-level will also enable the feature unless explicitly disabled at site or page level. +Also refer to [Default Theme: Last Updated](./default-theme-config#lastupdated) for more details. Any truthy value at theme-level will also enable the feature unless explicitly disabled at site or page level. diff --git a/docs/en/reference/default-theme-layout.md b/docs/en/reference/default-theme-layout.md index 246e20fa9f04..108cde6af63e 100644 --- a/docs/en/reference/default-theme-layout.md +++ b/docs/en/reference/default-theme-layout.md @@ -1,6 +1,6 @@ # Layout -You may choose the page layout by setting `layout` option to the page [frontmatter](./frontmatter-config). There are 3 layout options, `doc`, `page`, and `home`. If nothing is specified, then the page is treated as `doc` page. +You may choose the page layout by setting the `layout` option to the page [frontmatter](./frontmatter-config). There are 3 layout options, `doc`, `page`, and `home`. If nothing is specified, then the page is treated as a `doc` page. ```yaml --- @@ -10,9 +10,9 @@ layout: doc ## Doc Layout -Option `doc` is the default layout and it styles the whole Markdown content into "documentation" look. It works by wrapping whole content within `vp-doc` css class, and applying styles to elements underneath it. +Option `doc` is the default layout and it styles all the Markdown content into a "documentation" look. It works by wrapping all the content within the `vp-doc` css class, and applying styles to elements underneath it. -Almost all generic elements such as `p`, or `h2` get special styling. Therefore, keep in mind that if you add any custom HTML inside a Markdown content, those will get affected by those styles as well. +Almost all generic elements such as `p`, or `h2` get special styling. Therefore, keep in mind that if you add any custom HTML inside Markdown content, those will get affected by those styles as well. It also provides documentation specific features listed below. These features are only enabled in this layout. @@ -23,15 +23,15 @@ It also provides documentation specific features listed below. These features ar ## Page Layout -Option `page` is treated as "blank page". The Markdown will still be parsed, and all of the [Markdown Extensions](../guide/markdown) work as same as `doc` layout, but it wouldn't get any default stylings. +Option `page` is treated as a "blank page". The Markdown will still be parsed, and all of the [Markdown Extensions](../guide/markdown) work the same as in a `doc` layout, but it wouldn't get any default stylings. -The page layout will let you style everything by you without VitePress theme affecting the markup. This is useful when you want to create your own custom page. +The page layout will let you style everything by yourself without the VitePress theme affecting the markup. This is useful when you want to create your own custom page. -Note that even in this layout, sidebar will still show up if the page has a matching sidebar config. +Note that even in this layout, a sidebar will still show up if the page has a matching sidebar config. ## 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 [Default Theme: Home Page](./default-theme-home-page) for more details. +Option `home` will generate a templated "Homepage". In this layout, you can set extra options such as `hero` and `features` to customize the content further. Please visit [Default Theme: Home Page](./default-theme-home-page) for more details. ## No Layout diff --git a/docs/en/reference/default-theme-nav.md b/docs/en/reference/default-theme-nav.md index b55a63cb1b5e..47c021851643 100644 --- a/docs/en/reference/default-theme-nav.md +++ b/docs/en/reference/default-theme-nav.md @@ -4,7 +4,7 @@ The Nav is the navigation bar displayed on top of the page. It contains the site ## Site Title and Logo -By default, nav shows the title of the site referencing [`config.title`](./site-config#title) value. If you would like to change what's displayed on nav, you may define custom text in `themeConfig.siteTitle` option. +By default, nav shows the title of the site referencing the [`config.title`](./site-config#title) value. If you would like to change what's displayed on nav, you may define custom text in `themeConfig.siteTitle` option. ```js export default { @@ -35,11 +35,11 @@ export default { } ``` -You can also pass an object as logo if you want to add `alt` attribute or customize it based on dark/light mode. Refer [`themeConfig.logo`](./default-theme-config#logo) for details. +You can also pass an object as logo if you want to add `alt` attribute or customize it based on dark/light mode. Refer to [`themeConfig.logo`](./default-theme-config#logo) for details. ## Navigation Links -You may define `themeConfig.nav` option to add links to your nav. +You may define the `themeConfig.nav` option to add links to your nav. ```js export default { @@ -53,9 +53,9 @@ 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 always 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 the `.md` suffix, and always start with `/`. -Nav links can also be dropdown menus. To do this, set `items` key on link option. +Nav links can also be dropdown menus. To do this, set the `items` key on the link option. ```js export default { @@ -75,9 +75,9 @@ export default { } ``` -Note that dropdown menu title (`Dropdown Menu` in the above example) can not have `link` property since it becomes a button to open dropdown dialog. +Note that the dropdown menu title (`Dropdown Menu` in the above example) can not have a `link` property since it becomes a button to open dropdown dialog. -You may further add "sections" to the dropdown menu items as well by passing in more nested items. +You may add further "sections" to the dropdown menu items as well by passing in more nested items. ```js export default { @@ -116,7 +116,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 matched, 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 the `activeMatch` property and regex as a string value. ```js export default { @@ -135,7 +135,7 @@ export default { ``` ::: warning -`activeMatch` is expected to be a regex string, but you must define it as a string. We can't use actual RegExp object here because it isn't serializable during the build time. +`activeMatch` is expected to be a regex string, but you must define it as a string. We can't use an actual RegExp object here because it isn't serializable during the build time. ::: ### Customize link's "target" and "rel" attributes @@ -159,7 +159,7 @@ export default { ## Social Links -Refer [`socialLinks`](./default-theme-config#sociallinks). +Refer to [`socialLinks`](./default-theme-config#sociallinks). ## Custom Components @@ -209,6 +209,6 @@ export default { Your component will be rendered in the navigation bar. VitePress will provide the following additional props to the component: -- `screenMenu`: an optional boolean indicating whether the component is inside mobile navigation menu +- `screenMenu`: an optional boolean indicating whether the component is inside the mobile navigation menu You can check an example in the e2e tests [here](https://github.com/vuejs/vitepress/tree/main/__tests__/e2e/.vitepress). diff --git a/docs/en/reference/default-theme-prev-next-links.md b/docs/en/reference/default-theme-prev-next-links.md index 7befe179b5bc..d67fcd3649ea 100644 --- a/docs/en/reference/default-theme-prev-next-links.md +++ b/docs/en/reference/default-theme-prev-next-links.md @@ -1,6 +1,6 @@ # Prev Next Links -You can customize the text and link for the previous and next pages (shown at doc footer). This is helpful if you want a different text there than what you have on your sidebar. Additionally, you may find it useful to disable the footer or link to a page that is not included in your sidebar. +You can customize the text and link for the previous and next pages (shown at the doc footer). This is helpful if you want a different text there than what you have on your sidebar. Additionally, you may find it useful to disable the footer or link to a page that is not included in your sidebar. ## prev @@ -20,7 +20,7 @@ You can customize the text and link for the previous and next pages (shown at do --- ``` - - To customize both text and link: + - To customize both the text and link: ```yaml --- @@ -30,7 +30,7 @@ You can customize the text and link for the previous and next pages (shown at do --- ``` - - To hide previous page: + - To hide the previous page: ```yaml --- diff --git a/docs/en/reference/default-theme-search.md b/docs/en/reference/default-theme-search.md index d647e32ed252..f00c18e0bdde 100644 --- a/docs/en/reference/default-theme-search.md +++ b/docs/en/reference/default-theme-search.md @@ -6,7 +6,7 @@ outline: deep ## Local Search -VitePress supports fuzzy full-text search using a in-browser index thanks to [minisearch](https://github.com/lucaong/minisearch/). To enable this feature, simply set the `themeConfig.search.provider` option to `'local'` in your `.vitepress/config.ts` file: +VitePress supports fuzzy full-text search using an in-browser index thanks to [minisearch](https://github.com/lucaong/minisearch/). To enable this feature, simply set the `themeConfig.search.provider` option to `'local'` in your `.vitepress/config.ts` file: ```ts import { defineConfig } from 'vitepress' @@ -272,7 +272,7 @@ export default defineConfig({ }) ``` -[These options](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts) can be overridden. Refer official Algolia docs to learn more about them. +[These options](https://github.com/vuejs/vitepress/blob/main/types/docsearch.d.ts) can be overridden. Refer to the official Algolia docs to learn more about them. ### Crawler Config diff --git a/docs/en/reference/default-theme-sidebar.md b/docs/en/reference/default-theme-sidebar.md index 9a64a0744473..76659b7b3741 100644 --- a/docs/en/reference/default-theme-sidebar.md +++ b/docs/en/reference/default-theme-sidebar.md @@ -48,7 +48,7 @@ export default { } ``` -Each `link` should specify the path to the actual file starting with `/`. If you add trailing slash to the end of link, it will show `index.md` of the corresponding directory. +Each `link` should specify the path to the actual file starting with `/`. If you add a trailing slash to the end of link, it will show the `index.md` of the corresponding directory. ```js export default { @@ -66,7 +66,7 @@ export default { } ``` -You may further nest the sidebar items up to 6 level deep counting up from the root level. Note that deeper than 6 level of nested items gets ignored and will not be displayed on the sidebar. +You may further nest the sidebar items up to 6 level deep counting up from the root level. Note that nested items deeper than 6 levels gets ignored and will not be displayed on the sidebar. ```js export default { @@ -95,7 +95,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 sidebars depending on the page path. For example, as shown on this site, you might want to create a separate section of content in your documentation like a "Guide" page and a "Config" page. To do so, first organize your pages into directories for each desired section: @@ -149,7 +149,7 @@ export default { ## Collapsible Sidebar Groups -By adding `collapsed` option to the sidebar group, it shows a toggle button to hide/show each section. +By adding the `collapsed` option to the sidebar group, it shows a toggle button to hide/show each section. ```js export default { @@ -165,7 +165,7 @@ export default { } ``` -All sections are "open" by default. If you would like them to be "closed" on initial page load, set `collapsed` option to `true`. +All sections are "open" by default. If you would like them to be "closed" on initial page load, set the `collapsed` option to `true`. ```js export default { diff --git a/docs/en/reference/default-theme-team-page.md b/docs/en/reference/default-theme-team-page.md index 29b071ff82b9..4a48512da47c 100644 --- a/docs/en/reference/default-theme-team-page.md +++ b/docs/en/reference/default-theme-team-page.md @@ -25,11 +25,11 @@ const members = [ # Team Page -If you would like to introduce your team, you may use Team components to construct the Team Page. There are two ways of using these components. One is to embed it in doc page, and another is to create a full Team Page. +If you would like to introduce your team, you may use Team components to construct the Team Page. There are two ways of using these components. One is to embed it in a 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. +You may use the `` component exposed from `vitepress/theme` to display a list of team members on any page. ```html