docs: refine structure and add more contents

docs/.vitepress/config.ts

@@ -64,12 +64,18 @@ function sidebarGuide() {
         { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
         { text: 'Getting Started', link: '/guide/getting-started' },
         { text: 'Configuration', link: '/guide/configuration' },
+        { text: 'Deploying', link: '/guide/deploying' }
+      ]
+    },
+    {
+      text: 'Writing',
+      collapsible: true,
+      items: [
+        { text: 'Markdown', link: '/guide/markdown' },
         { text: 'Asset Handling', link: '/guide/asset-handling' },
-        { text: 'Markdown Extensions', link: '/guide/markdown-extensions' },
         { text: 'Frontmatter', link: '/guide/frontmatter' },
         { text: 'Using Vue in Markdown', link: '/guide/using-vue' },
-        { text: 'API Reference', link: '/guide/api' },
-        { text: 'Deploying', link: '/guide/deploying' }
+        { text: 'API Reference', link: '/guide/api' }
       ]
     },
     {

docs/config/introduction.md

@@ -11,6 +11,12 @@ Place your configuration file at `.vitepress/config.js`. This is where all ViteP
 └─ package.json
 ```
 
+VitePress comes with 2 types of configs. One is the [App Configs](./app-configs) which configures the site's fundamental features such as setting title of the site, or customize how markdown parser works. Second is the [Theme Config](./theme-config) which configures the theme of the site, for example, adding a sidebar, or add features such as "Edit this page on GitHub" link.
+
+There's also another configuration you may do in [Frontmatter](./frontmatter-configs). Frontmatter configs can override global configs defined on App Configs or Theme Configs for that specific page. However, there're several options that are only available at frontmatter as well.
+
+Please refer to the corresponding configs page to learn more.
+
 ## Config Intellisense
 
 Since VitePress ships with TypeScript typings, you can leverage your IDE's intellisense with jsdoc type hints:

docs/guide/configuration.md

@@ -20,4 +20,8 @@ export default {
 }
 ```
 
-Learn everything about VitePress features at [Theme: Introduction](./theme-introduction). You may also find all configuration references [configuration page](../config/introduction).
+In the above example, the site will have the title of `VitePress`, and `Just playing around` as 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.
+
+You may also find all configuration references at [Configs](../config/introduction).

docs/guide/getting-started.md

@@ -1,12 +1,12 @@
 # Getting Started
 
-This section will help you build a basic VitePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 3.
+This section will help you build a basic VitePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 2.
 
 ::: warning
 VitePress is currently in `alpha` status. It is already suitable for out-of-the-box documentation use, but the config and theming API may still change between minor releases.
 :::
 
-## Step. 1
+## Step. 1: Create a new project
 
 Create and change into a new directory.
 
@@ -14,31 +14,27 @@ Create and change into a new directory.
 $ mkdir vitepress-starter && cd vitepress-starter
 ```
 
-## Step. 2
-
-Initialize with your preferred package manager.
+Then, initialize with your preferred package manager.
 
 ```bash
 $ yarn init
 ```
 
-## Step. 3
+## Step. 2: Install VitePress
 
-Install VitePress.
+Add VitePress as a dependency for the project.
 
 ```bash
 $ yarn add --dev vitepress
 ```
 
-## Step. 4
-
 Create your first document.
 
 ```bash
 $ mkdir docs && echo '# Hello VitePress' > docs/index.md
 ```
 
-## Step. 5
+## Step. 3: Boot up dev environment
 
 Add some scripts to `package.json`.
 
@@ -54,8 +50,6 @@ Add some scripts to `package.json`.
 }
 ```
 
-## Step. 6
-
 Serve the documentation site in the local server.
 
 ```bash
@@ -64,8 +58,30 @@ $ yarn docs:dev
 
 VitePress will start a hot-reloading development server at `http://localhost:3000`.
 
+## Step. 4: Add more pages
+
+Let's add another page to the site. Create a file name `getting-started.md` along with `index.md` you've created in Step. 2. Now your directory structure should look like this.
+
+```
+.
+├─ docs
+│  ├─ getting-started.md
+│  └─ index.md
+└─ package.json
+```
+
+Then, try to access `http://localhost:3000/getting-started` and you should see the content of `getting-started` is shown.
+
+This is how VitePress works basically. The directory structure corresponds with the URL path. You add files, and just try to access it.
+
 ## What's next?
 
-By now, you should have a basic but functional VitePress documentation site.
+By now, you should have a basic but functional VitePress documentation site. But currently, the user has no way to navigate around the site because it's missing for example sidebar menu we have on this site.
+
+To enable those navigations, we must add some configurations to the site. Head to [configuration guide](./configuration) to learn how to configure VitePress.
+
+If you would like to know more about what you can do within the page, for example, writing markdown contents, or using Vue Component, check out the "Writing" section of the docs. [Markdown guide](./markdown) would be a greate starting point.
+
+If you want to know how to customize how the site looks (Theme), and find out the features VitePress's default theme provides, visit [Theme: Introduction](./theme-introduction).
 
 When your documentation site starts to take shape, be sure to read the [deployment guide](./deploying).

docs/guide/theme-layout.md

@@ -27,7 +27,7 @@ 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](./markdown-extensions) work as same as `doc` layout, but it wouldn't get any default stylings.
+Option `page` is treated as "blank page". The Markdown will still be parsed, and all of the [Markdown Extensions](./markdown) work as same as `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.