perf(vuepress-theme-reco): optimize the home page and subSidebar

Author: reco_luan

packages/vuepress-theme-reco/components/HomeBlog.vue

@@ -164,6 +164,7 @@ export default {
   padding: 0;
   margin: 0px auto;
   .hero {
+    margin $navbarHeight auto 0
     position relative
     box-sizing border-box
     padding 0 20px

packages/vuepress-theme-reco/components/Page.vue

@@ -72,8 +72,8 @@
       <Comments v-if="recoShowModule" :isShowComments="shouldShowComments"/>
     </ModuleTransition>
 
-    <ModuleTransition delay="0.4">
-      <SubSidebar class="side-bar" />
+    <ModuleTransition delay="0.08">
+      <SubSidebar v-if="recoShowModule" class="side-bar" />
     </ModuleTransition>
   </main>
 </template>

packages/vuepress-theme-reco/components/PageInfo.vue

@@ -102,6 +102,7 @@ export default {
 .tags
   .tag-item
     font-family Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
+    cursor pointer
     &.active
       color $accentColor
     &:hover

packages/vuepress-theme-reco/components/SidebarLinks.vue

@@ -54,8 +54,8 @@ export default {
   },
 
   mounted () {
-    this.activationLink()
-    this.isInViewPortOfOne()
+    // this.activationLink()
+    // this.isInViewPortOfOne()
   },
 
   updated: function () {

packages/vuepress-theme-reco/components/SubSidebar.vue

@@ -10,7 +10,14 @@ export default {
   },
   methods: {
     isLinkActive (header) {
-      return isActive(this.$route, this.$page.path + '#' + header.slug)
+      const active = isActive(this.$route, this.$page.path + '#' + header.slug)
+      if (active) {
+        setTimeout(() => {
+          console.log(document.querySelector(`.${header.slug}`))
+          document.querySelector(`.${header.slug}`).scrollIntoView()
+        }, 300)
+      }
+      return active
     }
   },
   render (h) {
@@ -27,7 +34,7 @@ export default {
           attr: { key: header.title }
         }, [
           h('router-link', {
-            class: { 'sidebar-link': true },
+            class: { 'sidebar-link': true, [`${header.slug}`]: true },
             props: { to: `${this.$page.path}#${header.slug}` }
           }, header.title)
         ])

packages/vuepress-theme-reco/styles/theme.styl

@@ -111,16 +111,30 @@ h1, h2, h3, h4, h5, h6
   font-weight 500
   line-height 1.25
   .content__default:not(.custom) > &
-    margin-top 1.2rem
-    margin-bottom 1rem
+    margin-top (0.5rem - $navbarHeight)
+    padding-top ($navbarHeight + 1rem)
+    margin-bottom 0
+    &:first-child
+      margin-top -3.5rem
+      margin-bottom 1rem
+      + p, + pre, + .custom-block
+        margin-top 2rem
 
 h1
   font-size 1.6rem
 
 h2
+  position relative
   padding-left 0.8rem
   font-size 1.4rem
-  border-left 5px solid $accentColor
+  &::before
+    position: absolute
+    left 0
+    bottom 0
+    display: block
+    height 1.8rem
+    content: ''
+    border-left 5px solid $accentColor
 
 h3
   font-size 1.2rem