docs: add more docs

docs/.vitepress/config.ts

@@ -73,6 +73,8 @@ function sidebarGuide() {
       text: 'Theme',
       items: [
         { text: 'Introduction', link: '/guide/theme-introduction' },
+        { text: 'Layout', link: '/guide/theme-layout' },
+        { text: 'Home Page', link: '/guide/theme-home-page' },
         { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }
       ]
     },

docs/config/frontmatter-configs.md

@@ -89,7 +89,7 @@ Determines the layout of the page.
 
 ```yaml
 ---
-type: doc
+layout: doc
 ---
 ```
 

docs/guide/theme-home-page.md

@@ -0,0 +1,3 @@
+# Home Page
+
+Coming soon...

docs/guide/theme-layout.md

@@ -0,0 +1,38 @@
+---
+layout: doc
+---
+
+# Layout
+
+You may switch the of each page by setting `layout` option to the page [frontmatter](./frontmatter). There are 3 layout options, `doc`, `page`, and `home`. If don't specify the `layout` otpion, then the page is treated as option set to `doc`.
+
+```yaml
+---
+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.
+
+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.
+
+It also provides documentation specific features listed below. These features are only enabled in this layout.
+
+- Edit Link
+- Prev Next Link
+- Outline
+- Carbon Ads
+
+## 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 apply default styling.
+
+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.
+
+Note that even in this layout, sidebar will still show up if the page has a matching sidebar config.
+
+## Home Layout
+
+Option `home` will generate templated "Home Page". 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.

src/client/theme-default/components/VPDoc.vue

@@ -149,6 +149,7 @@ const pageName = computed(() => {
 .content {
   position: relative;
   margin: 0 auto;
+  width: 100%;
 }
 
 @media (min-width: 960px) {

src/client/theme-default/styles/vars.css

@@ -112,7 +112,7 @@
 .dark {
   --vp-c-bg: var(--vp-c-black-soft);
   --vp-c-bg-soft: var(--vp-c-black-mute);
-  --vp-c-bg-mute: var(--vp-c-gray-dark-4);
+  --vp-c-bg-mute: var(--vp-c-gray-dark-3);
   --vp-c-bg-alt: var(--vp-c-black);
 
   --vp-c-divider: var(--vp-c-divider-dark-1);
@@ -190,7 +190,7 @@
 }
 
 .dark {
-  --vp-code-block-bg: var(--vp-c-bg-sidebar);
+  --vp-code-block-bg: var(--vp-c-bg-alt);
 }
 
 /**