docs: fix typos (#1408)

docs/guide/markdown.md

@@ -35,7 +35,7 @@ And providing you are in `foo/one.md`:
 [Home](/) <!-- sends the user to the root index.md -->
 [foo](/foo/) <!-- sends the user to index.html of directory foo -->
 [foo heading](./#heading) <!-- anchors user to a heading in the foo index file -->
-[bar - three](../bar/three) <!-- you can omit extention -->
+[bar - three](../bar/three) <!-- you can omit extension -->
 [bar - three](../bar/three.md) <!-- you can append .md -->
 [bar - four](../bar/four.html) <!-- or you can append .html -->
 ```

docs/guide/theme-footer.md

@@ -15,7 +15,7 @@ export default {
 
 ```ts
 export interface Footer {
-  // The message shown rigth before copyright.
+  // The message shown right before copyright.
   message?: string
 
   // The actual copyright text.

docs/guide/theme-team-page.md

@@ -25,7 +25,7 @@ const members = [
 
 # 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.
+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.
 
 ## Show team members in a page
 
@@ -62,7 +62,7 @@ The above will display a team member in card looking element. It should display
 
 `<VPTeamMembers>` 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>`](#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.
+Embedding 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).
 
@@ -121,7 +121,7 @@ When creating a full team page, remember to wrap all components with `<VPTeamPag
 
 ### 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.
+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 divide these members into sections to better explain the roles of each group.
 
 To do so, add `<VPTeamPageSection>` component to the `team.md` file we created previously.
 

docs/guide/what-is-vitepress.md

@@ -50,4 +50,4 @@ We already have [vuepress-next](https://github.com/vuepress/vuepress-next), whic
 
 VitePress is not compatible with the current VuePress ecosystem (mostly themes and plugins). The overall idea is that VitePress will have a drastically more minimal theming API (preferring JavaScript APIs instead of file layout conventions) and likely no plugins (all customization is done in themes).
 
-There is an [ongoing disccussion](https://github.com/vuejs/vitepress/discussions/548) about this topic. If you're curious, please leave your thoughts!
+There is an [ongoing discussion](https://github.com/vuejs/vitepress/discussions/548) about this topic. If you're curious, please leave your thoughts!

examples/vitestSetup.ts

@@ -159,7 +159,7 @@ export async function startDefaultServe(): Promise<void> {
       devBase === '/' ? '' : devBase
     }`
     await page.goto(vitePressTestUrl)
-    // TODO: A manual reload is needed bacause the first load of page will crash
+    // TODO: A manual reload is needed because the first load of page will crash
     // because of multiple vue instances. (see https://github.com/vuejs/vitepress/issues/1016)
     // Try to remove this after migrating to Vite3.
     if (isServe) {

src/client/theme-default/composables/sponsor-grid.ts

@@ -7,15 +7,15 @@ export interface GridSetting {
 
 export type GridSize = 'xmini' | 'mini' | 'small' | 'medium' | 'big'
 
-export interface UseSponsorsGridOprions {
+export interface UseSponsorsGridOptions {
   el: Ref<HTMLElement | null>
   size?: GridSize
 }
 
 /**
- * Defines grid configuration for each sponsor size in touple.
+ * Defines grid configuration for each sponsor size in tuple.
  *
- * [Screen widh, Column size]
+ * [Screen width, Column size]
  *
  * It sets grid size on matching screen size. For example, `[768, 5]` will
  * set 5 columns when screen size is bigger or equal to 768px.
@@ -49,7 +49,7 @@ const GridSettings: GridSetting = {
 export function useSponsorsGrid({
   el,
   size = 'medium'
-}: UseSponsorsGridOprions) {
+}: UseSponsorsGridOptions) {
   const onResize = throttleAndDebounce(manage, 100)
 
   onMounted(() => {