From a7686b7691a3e3d7d10226fd4f7971929701965a Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Wed, 25 Nov 2020 18:51:10 +0900
Subject: [PATCH 1/2] fix: hydration mismatch when home page having action link

---
 src/client/theme-default/components/Home.vue | 50 ++++++++++----------
 src/client/theme-default/styles/vars.css     |  1 +
 2 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/client/theme-default/components/Home.vue b/src/client/theme-default/components/Home.vue
index 0b79bf50..49ce8cb9 100644
--- a/src/client/theme-default/components/Home.vue
+++ b/src/client/theme-default/components/Home.vue
@@ -24,7 +24,9 @@
       v-if="data.actionText && data.actionLink"
       class="action"
     >
-      <NavBarLink :item="actionLink" />
+      <a class="action-link" :href="actionLink.link">
+        {{ actionLink.text }}
+      </a>
     </p>
     <slot name="hero" />
   </header>
@@ -55,15 +57,10 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue'
-import NavBarLink from './NavBarLink.vue'
-import { withBase } from '../utils'
 import { useRoute, useSiteData } from 'vitepress'
+import { withBase } from '../utils'
 
 export default defineComponent({
-  components: {
-    NavBarLink
-  },
-
   setup() {
     const route = useRoute()
     const siteData = useSiteData()
@@ -118,23 +115,30 @@ export default defineComponent({
   color: #6a8bad;
 }
 
-::v-deep(.nav-link) {
+.action-link {
   display: inline-block;
-  font-size: 1.2rem;
-  color: #fff;
-  background-color: var(--c-brand);
-  margin-left: 0;
-  padding: 0.8rem 1.6rem;
   border-radius: 4px;
+  padding: 0 20px;
+  line-height: 48px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #ffffff;
+  background-color: var(--c-brand);
   transition: background-color .1s ease;
-  box-sizing: border-box;
-  /* TODO: calculating darken 10% color with using style vars from `--c-brand` */
-  border-bottom: 1px solid #389d70;
 }
 
-::v-deep(.nav-link:hover) {
-  /* TODO: calculating lighten 10% color with using style vars from `--c-brand` */
-  background-color: #4abf8a;
+.action-link:hover {
+  text-decoration: none;
+  background-color: var(--c-brand-light);
+}
+
+@media (min-width: 420px) {
+  .action-link {
+    padding: 0 24px;
+    line-height: 56px;
+    font-size: 1.2rem;
+    font-weight: 500;
+  }
 }
 
 .features {
@@ -198,8 +202,7 @@ export default defineComponent({
   }
 
   .hero h1,
-  .hero .description,
-  .hero .action {
+  .hero .description {
     margin: 1.2rem auto;
   }
 
@@ -207,11 +210,6 @@ export default defineComponent({
     font-size: 1.2rem;
   }
 
-  .hero .action-button {
-    font-size: 1rem;
-    padding: 0.6rem 1.2rem;
-  }
-
   .feature h2 {
     font-size: 1.25rem;
   }
diff --git a/src/client/theme-default/styles/vars.css b/src/client/theme-default/styles/vars.css
index 01fe3e05..4ae10251 100644
--- a/src/client/theme-default/styles/vars.css
+++ b/src/client/theme-default/styles/vars.css
@@ -15,6 +15,7 @@
   --c-text-light-2: #476582;
 
   --c-brand: #3eaf7c;
+  --c-brand-light: #4abf8a;
 
   /**
    * Typography

From bb28ac0cbea84f72ecbc5399e40a278295139ca9 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Wed, 25 Nov 2020 18:57:27 +0900
Subject: [PATCH 2/2] docs: organize contents into "Introduction" and
 "Advanced"

---
 docs/.vitepress/config.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 39efd4cf..81297dc3 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -37,10 +37,15 @@ function getGuideSidebar() {
         { text: 'Getting Started', link: '/guide/getting-started' },
         { text: 'Configuration', link: '/guide/configuration' },
         { text: 'Markdown Extensions', link: '/guide/markdown' },
-        { text: 'Frontmatter', link: '/guide/frontmatter' },
-        { text: 'Customization', link: '/guide/customization' },
         { text: 'Deploying', link: '/guide/deploy' }
       ]
+    },
+    {
+      text: 'Advanced',
+      children: [
+        { text: 'Frontmatter', link: '/guide/frontmatter' },
+        { text: 'Customization', link: '/guide/customization' }
+      ]
     }
   ]
 }