docs: grammar/Readability Improvements for English Documentation

docs/en/guide/asset-handling.md

@@ -8,9 +8,9 @@ All Markdown files are compiled into Vue components and processed by [Vite](http
 ![An image](./image.png)
 ```
 
-You can reference static assets in your markdown files, your `*.vue` components in the theme, styles and plain `.css` files either using absolute public paths (based on project root) or relative paths (based on your file system). The latter is similar to the behavior you are used to if you have used Vite, Vue CLI, or webpack's `file-loader`.
+You can reference static assets in your markdown files, your `*.vue` components in the theme, styles, and plain `.css` files either using absolute public paths (based on project root) or relative paths (based on your file system). The latter is similar to the behavior you are used to if you have used Vite, Vue CLI, or webpack's `file-loader`.
 
-Common image, media, and font filetypes are detected and included as assets automatically.
+Common image, media, and font file types are detected and included as assets automatically.
 
 ::: tip Linked files are not treated as assets
 PDFs or other documents referenced by links within markdown files are not automatically treated as assets. To make linked files accessible, you must manually place them within the [`public`](#the-public-directory) directory of your project.
@@ -24,11 +24,11 @@ All **static** path references, including absolute paths, should be based on you
 
 Sometimes you may need to provide static assets that are not directly referenced in any of your Markdown or theme components, or you may want to serve certain files with the original filename. Examples of such files include `robots.txt`, favicons, and PWA icons.
 
-You can place these files in the `public` directory under the [source directory](./routing#source-directory). For example, if your project root is `./docs` and using default source directory location, then your public directory will be `./docs/public`.
+You can place these files in the `public` directory under the [source directory](./routing#source-directory). For example, if your project root is `./docs` and using the default source directory location, then your public directory will be `./docs/public`.
 
 Assets placed in `public` will be copied to the root of the output directory as-is.
 
-Note that you should reference files placed in `public` using root absolute path - for example, `public/icon.png` should always be referenced in source code as `/icon.png`.
+Note that you should reference files placed in `public` using the root absolute path - for example, `public/icon.png` should always be referenced in source code as `/icon.png`.
 
 ## Base URL
 
@@ -48,7 +48,7 @@ However, if you are authoring a theme component that links to assets dynamically
 <img :src="theme.logoPath" />
 ```
 
-In this case it is recommended to wrap the path with the [`withBase` helper](../reference/runtime-api#withbase) provided by VitePress:
+In this case, it is recommended to wrap the path with the [`withBase` helper](../reference/runtime-api#withbase) provided by VitePress:
 
 ```vue
 <script setup>

docs/en/guide/cms.md

@@ -10,7 +10,7 @@ Connecting VitePress to a CMS will largely revolve around [Dynamic Routes](./rou
 
 Since each CMS will work differently, here we can only provide a generic workflow that you will need to adapt to your specific scenario.
 
-1. If your CMS requires authentication, create an `.env` file to store your API tokens and load it so:
+1. If your CMS requires authentication, create a `.env` file to store your API tokens and load it so:
 
     ```js
     // posts/[id].paths.js
@@ -41,7 +41,7 @@ Since each CMS will work differently, here we can only provide a generic workflo
     }
     ```
 
-3. Render the content in the page:
+3. Render the content on the page:
 
     ```md
     # {{ $params.title }}

docs/en/guide/custom-theme.md

@@ -15,7 +15,7 @@ You can enable a custom theme by creating a `.vitepress/theme/index.js` or `.vit
 └─ package.json
 ```
 
-VitePress will always use the custom theme instead of the default theme when it detects presence of a theme entry file. You can, however, [extend the default theme](./extending-default-theme) to perform advanced customizations on top of it.
+VitePress will always use the custom theme instead of the default theme when it detects the presence of a theme entry file. You can, however, [extend the default theme](./extending-default-theme) to perform advanced customizations on top of it.
 
 ## Theme Interface
 
@@ -100,7 +100,7 @@ const { page } = useData()
 </template>
 ```
 
-The [`useData()`](../reference/runtime-api#usedata) helper provides us with all the runtime data we need to conditionally render different layouts. One of the other data we can access is the current page's frontmatter. We can leverage this to allow the end user to control the layout in each page. For example, the user can indicate the page should use a special home page layout with:
+The [`useData()`](../reference/runtime-api#usedata) helper provides us with all the runtime data we need to conditionally render different layouts. One of the other data we can access is the current page's frontmatter. We can leverage this to allow the end user to control the layout of each page. For example, the user can indicate the page should use a special home page layout with:
 
 ```md
 ---
@@ -150,7 +150,7 @@ const { page, frontmatter } = useData()
 </template>
 ```
 
-Consult the [Runtime API Reference](../reference/runtime-api) for everything available in theme components. In addition, you can leverage [Build-Time Data Loading](./data-loading) to generate data-driven layout - for example, a page that lists all blog posts in the current project.
+Consult the [Runtime API Reference](../reference/runtime-api) for everything available in theme components. In addition, you can leverage [Build-Time Data Loading](./data-loading) to generate a data-driven layout - for example, a page that lists all blog posts in the current project.
 
 ## Distributing a Custom Theme
 
@@ -193,7 +193,7 @@ export default {
 }
 ```
 
-If the theme requires special VitePress config, you will need to also extend it in your own config:
+If the theme requires a special VitePress config, you will need to also extend it in your own config:
 
 ```ts
 // .vitepress/config.ts

docs/en/guide/data-loading.md

@@ -2,7 +2,7 @@
 
 VitePress provides a feature called **data loaders** that allows you to load arbitrary data and import it from pages or components. The data loading is executed **only at build time**: the resulting data will be serialized as JSON in the final JavaScript bundle.
 
-Data loaders can be used to fetch remote data, or generate metadata based on local files. For example, you can use data loaders to parse all your local API pages and automatically generate an index of all API entries.
+Data loaders can be used to fetch remote data to or generate metadata based on local files. For example, you can use data loaders to parse all your local API pages and automatically generate an index of all API entries.
 
 ## Basic Usage
 
@@ -82,7 +82,7 @@ export default {
 
 ## `createContentLoader`
 
-When building a content focused site, we often need to create an "archive" or "index" page: a page where we list all available entries in our content collection, for example blog posts or API pages. We **can** implement this directly with the data loader API, but since this is such a common use case, VitePress also provides a `createContentLoader` helper to simplify this:
+When building a content-focused site, we often need to create an "archive" or "index" page: a page where we list all available entries in our content collection, for example, blog posts or API pages. We **can** implement this directly with the data loader API, but since this is such a common use case, VitePress also provides a `createContentLoader` helper to simplify this:
 
 ```js
 // posts.data.js
@@ -91,7 +91,7 @@ import { createContentLoader } from 'vitepress'
 export default createContentLoader('posts/*.md', /* options */)
 ```
 
-The helper takes a glob pattern relative to the [source directory](./routing#source-directory), and returns a `{ watch, load }` data loader object that can be used as the default export in a data loader file. It also implements caching based on file modified timestamps to improve dev performance.
+The helper takes a glob pattern relative to the [source directory](./routing#source-directory), and returns a `{ watch, load }` data loader object that can be used as the default export in a data loader file. It also implements caching based on file modification timestamps to improve dev performance.
 
 Note the loader only works with Markdown files - matched non-Markdown files will be skipped.
 
@@ -113,7 +113,7 @@ interface ContentData {
 }
 ```
 
-By default, only `url` and `frontmatter` are provided. This is because the loaded data will be inlined as JSON in the client bundle, so we need to be cautious about its size. Here's an example using the data to build a minimal blog index page:
+By default, only `url` and `frontmatter` are provided. This is because the loaded data will be inlined as JSON in the client bundle, so we need to be cautious about its size. Here's an example which uses the data to build a minimal blog index page:
 
 ```vue
 <script setup>

docs/en/guide/deploy.md

@@ -57,7 +57,7 @@ By default, we assume the site is going to be deployed at the root path of a dom
 
 If you have control over the HTTP headers on your production server, you can configure `cache-control` headers to achieve better performance on repeated visits.
 
-The production build uses hashed file names for static assets (JavaScript, CSS and other imported assets not in `public`). If you inspect the production preview using your browser devtools' network tab, you will see files like `app.4f283b18.js`.
+The production build uses hashed file names for static assets (JavaScript, CSS, and other imported assets not in `public`). If you inspect the production preview using your browser developer tools' network tab, you will see files like `app.4f283b18.js`.
 
 This `4f283b18` hash is generated from the content of this file. The same hashed URL is guaranteed to serve the same file content - if the contents change, the URLs change too. This means you can safely use the strongest cache headers for these files. All such files will be placed under `assets/` in the output directory, so you can configure the following header for them:
 
@@ -114,7 +114,7 @@ Set up a new project and change these settings using your dashboard:
 - **Node Version:** `18` (or above)
 
 ::: 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.
+Don't enable options like _Auto Minify_ for HTML code. It will remove comments, which have meaning to Vue, from output. You may see hydration mismatch errors if they get removed.
 :::
 
 ### GitHub Pages
@@ -198,7 +198,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
 
 ### GitLab Pages
 
-1. Set `outDir` in VitePress config to `../public`. Configure `base` option to `'/<repository>/'` if you want to deploy to `https://<username>.gitlab.io/<repository>/`. You don't need `base` if you're deploying to custom domain, user or group pages, or have "Use unique domain" setting enabled in GitLab.
+1. Set `outDir` in VitePress config to `../public`. Configure `base` option to `'/<repository>/'` if you want to deploy to `https://<username>.gitlab.io/<repository>/`. You don't need `base` if you're deploying to a custom domain, user/group pages, or have the "Use unique domain" setting enabled in GitLab.
 
 2. Create a file named `.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:
 
@@ -270,7 +270,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
 
 ### Heroku
 
-1. Follow documentation and guide given in [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static).
+1. Follow the documentation and guide avaliable at [`heroku-buildpack-static`](https://elements.heroku.com/buildpacks/heroku/heroku-buildpack-static).
 
 2. Create a file called `static.json` in the root of your project with the below content:
 
@@ -282,7 +282,7 @@ Don't enable options like _Auto Minify_ for HTML code. It will remove comments f
 
 ### Edgio
 
-Refer [Creating and Deploying a VitePress App To Edgio](https://docs.edg.io/guides/vitepress).
+Refer to [Creating and Deploying a VitePress App To Edgio](https://docs.edg.io/guides/vitepress).
 
 ### Kinsta Static Site Hosting
 
@@ -294,7 +294,7 @@ You can deploy your VitePress project to [Stormkit](https://www.stormkit.io) by
 
 ### Nginx
 
-Here is a example of an Nginx server block configuration. This setup includes gzip compression for common text-based assets, rules for serving your VitePress site's static files with proper caching headers as well as handling `cleanUrls: true`.
+Here is an example of an Nginx server block configuration. This setup includes gzip compression for common text-based assets, rules for serving your VitePress site's static files with proper caching headers, as well as handling `cleanUrls: true`.
 
 ```nginx
 server {

docs/en/guide/extending-default-theme.md

@@ -4,12 +4,12 @@ outline: deep
 
 # Extending the Default Theme
 
-VitePress' default theme is optimized for documentation, and can be customized. Consult the [Default Theme Config Overview](../reference/default-theme-config) for a comprehensive list of options.
+VitePress' default theme is optimized for documentation and can be customized. Consult the [Default Theme Config Overview](../reference/default-theme-config) for a comprehensive list of options.
 
 However, there are a number of cases where configuration alone won't be enough. For example:
 
 1. You need to tweak the CSS styling;
-2. You need to modify the Vue app instance, for example to register global components;
+2. You need to modify the Vue app instance, for example, to register global components;
 3. You need to inject custom content into the theme via layout slots.
 
 These advanced customizations will require using a custom theme that "extends" the default theme.
@@ -20,7 +20,7 @@ Before proceeding, make sure to first read [Using a Custom Theme](./custom-theme
 
 ## Customizing CSS
 
-The default theme CSS is customizable by overriding root level CSS variables:
+The default theme CSS is customizable by overriding root-level CSS variables:
 
 ```js
 // .vitepress/theme/index.js
@@ -42,7 +42,7 @@ See [default theme CSS variables](https://github.com/vuejs/vitepress/blob/main/s
 
 ## Using Different Fonts
 
-VitePress uses [Inter](https://rsms.me/inter/) as the default font, and will include the fonts in the build output. The font is also auto preloaded in production. However, this may not be desirable if you want to use a different main font.
+VitePress uses [Inter](https://rsms.me/inter/) as the default font, and will include the fonts in the build output. The font is also automatically preloaded in production. However, this may not be desirable if you want to use a different main font.
 
 To avoid including Inter in the build output, import the theme from `vitepress/theme-without-fonts` instead:
 
@@ -66,7 +66,7 @@ export default DefaultTheme
 If you are using optional components like the [Team Page](../reference/default-theme-team-page) components, make sure to also import them from `vitepress/theme-without-fonts`!
 :::
 
-If your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` with hashed filename. To preload this file, use the [transformHead](../reference/site-config#transformhead) build hook:
+If your font is a local file referenced via `@font-face`, it will be processed as an asset and included under `.vitepress/dist/assets` with a hashed filename. To preload this file, use the [transformHead](../reference/site-config#transformhead) build hook:
 
 ```js
 // .vitepress/config.js
@@ -123,7 +123,7 @@ export default {
 } satisfies Theme
 ```
 
-Since we are using Vite, you can also leverage Vite's [glob import feature](https://vitejs.dev/guide/features.html#glob-import) to auto register a directory of components.
+Since we are using Vite, you can also leverage Vite's [glob import feature](https://vitejs.dev/guide/features.html#glob-import) to auto-register a directory of components.
 
 ## Layout Slots
 
@@ -159,7 +159,7 @@ const { Layout } = DefaultTheme
 </template>
 ```
 
-Or you could use render function as well.
+Or you could use a render function as well.
 
 ```js
 // .vitepress/theme/index.js
@@ -308,7 +308,7 @@ Result (**warning!**: flashing colors, sudden movements, bright lights):
 
 </details>
 
-Refer [Chrome Docs](https://developer.chrome.com/docs/web-platform/view-transitions/) from more details on view transitions.
+Refer [Chrome Docs](https://developer.chrome.com/docs/web-platform/view-transitions/) for more details on view transitions.
 
 ### On Route Change
 
@@ -338,4 +338,4 @@ export default defineConfig({
 })
 ```
 
-To know the exact name of the component refer [our source code](https://github.com/vuejs/vitepress/tree/main/src/client/theme-default/components). Since the components are internal, there is a slight chance their name is updated between minor releases.
+To know the exact name of the component, please refer to [our source code](https://github.com/vuejs/vitepress/tree/main/src/client/theme-default/components). Since these components are internal, there is a slight chance their names may be updated between minor releases.

docs/en/guide/frontmatter.md

@@ -2,7 +2,7 @@
 
 ## Usage
 
-VitePress supports YAML frontmatter in all Markdown files, parsing them with [gray-matter](https://github.com/jonschlinkert/gray-matter). The frontmatter must be at the top of the Markdown file (before any elements including `<script>` tags), and must take the form of valid YAML set between triple-dashed lines. Example:
+VitePress supports YAML frontmatter in all Markdown files, parsing them with [gray-matter](https://github.com/jonschlinkert/gray-matter). The frontmatter must be at the top of the Markdown file (before any elements including `<script>` tags) and must take the form of valid YAML set between triple-dashed lines. Example:
 
 ```md
 ---
@@ -32,7 +32,7 @@ editLink: true
 Guide content
 ```
 
-You can also access current page's frontmatter data in `<script setup>` with the [`useData()`](../reference/runtime-api#usedata) helper.
+You can also access the current page's frontmatter data in `<script setup>` with the [`useData()`](../reference/runtime-api#usedata) helper.
 
 ## Alternative Frontmatter Formats
 

docs/en/guide/i18n.md

@@ -51,7 +51,7 @@ interface LocaleSpecificConfig<ThemeConfig = any> {
 
 Refer [`DefaultTheme.Config`](https://github.com/vuejs/vitepress/blob/main/types/default-theme.d.ts) interface for details on customizing the placeholder texts of the default theme. Don't override `themeConfig.algolia` or `themeConfig.carbonAds` at locale-level. Refer [Algolia docs](../reference/default-theme-search#i18n) for using multilingual search.
 
-**Pro tip:** Config file can be stored at `docs/.vitepress/config/index.ts` too. It might help you organize stuff by creating a configuration file per locale and then merge and export them from `index.ts`.
+**Pro tip:** Config file can be stored at `docs/.vitepress/config/index.ts` too. It might help you organize stuff by creating a configuration file per locale and then to merge and export them from `index.ts`.
 
 ## Separate directory for each locale
 
@@ -75,7 +75,7 @@ However, VitePress won't redirect `/` to `/en/` by default. You'll need to confi
 /*  /en/:splat  302
 ```
 
-**Pro tip:** If using the above approach, you can use `nf_lang` cookie to persist user's language choice:
+**Pro tip:** If using the above approach, you can use `nf_lang` cookie to make the user's language choice persistent:
 
 ```ts
 // docs/.vitepress/theme/index.ts