fix: SSR and anchor points are invalid

Author: reco_luan

components/Common.vue

@@ -5,35 +5,37 @@
     @touchstart="onTouchStart"
     @touchend="onTouchEnd">
     <transition name="fade">
-      <LoadingPage v-if="firstLoad" />
-      <Password v-else-if="!isHasKey" />
-      <div v-else>
-        <Navbar
-        v-if="shouldShowNavbar"
-        @toggle-sidebar="toggleSidebar"/>
-
-        <div
-          class="sidebar-mask"
-          @click="toggleSidebar(false)"></div>
-
-        <Sidebar
-          :items="sidebarItems"
-          @toggle-sidebar="toggleSidebar">
-          <slot
-            name="sidebar-top"
-            slot="top"/>
-          <slot
-            name="sidebar-bottom"
-            slot="bottom"/>
-        </Sidebar>
-
-        <Password v-if="!isHasPageKey" :isPage="true"></Password>
-        <div v-else>
-          <slot></slot>
-          <Comments :isShowComments="shouldShowComments"/>
-        </div>
-      </div>
+      <LoadingPage v-show="firstLoad" class="loading-wrapper" />
     </transition>
+    <transition name="fade">  
+      <Password v-show="!isHasKey" class="password-wrapper-out" key="out" />
+    </transition>  
+    <div :class="{ 'hide': firstLoad || !isHasKey }">
+      <Navbar
+      v-if="shouldShowNavbar"
+      @toggle-sidebar="toggleSidebar"/>
+
+      <div
+        class="sidebar-mask"
+        @click="toggleSidebar(false)"></div>
+
+      <Sidebar
+        :items="sidebarItems"
+        @toggle-sidebar="toggleSidebar">
+        <slot
+          name="sidebar-top"
+          slot="top"/>
+        <slot
+          name="sidebar-bottom"
+          slot="bottom"/>
+      </Sidebar>
+
+      <Password v-show="!isHasPageKey" :isPage="true" class="password-wrapper-in" key="in"></Password>
+      <div :class="{ 'hide': !isHasPageKey }">
+        <slot></slot>
+        <Comments :isShowComments="shouldShowComments"/>
+      </div>
+    </div>
     <GA></GA>
   </div>
 </template>
@@ -202,6 +204,37 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+.theme-container
+  .loading-wrapper
+    position absolute
+    z-index 22
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+    background #fff
+  .password-wrapper-out  
+    position absolute
+    z-index 21
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+    background #fff
+  .password-wrapper-in  
+    position absolute
+    z-index 8
+    top 0
+    bottom 0
+    left 0
+    right 0
+    margin auto
+    background #fff
+  .hide
+    height 100vh
+    overflow hidden
 .theme-container.no-sidebar
   .comments-wrapper
     padding-left 2rem

components/Password.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="password-shadow" :class="{'is-home': !isPage}">
-    <Background />
+    <!-- <Background /> -->
     <h3 class="title">{{isPage ? $frontmatter.title : $site.title}}</h3>
     <p class="description" v-if="!isPage">{{$site.description}}</p>
     <label class="inputBox" id="box">
@@ -73,7 +73,7 @@ export default {
         return
       }
 
-      const width = document.getElementById('box').getClientRects()[0].width
+      const width = document.getElementById('box').style.width
 
       passwordBtn.style.width = `${width - 2}px`
       passwordBtn.style.opacity = 1
@@ -245,7 +245,7 @@ export default {
       right 0
       top 43%
       margin auto
-      padding-left 20px
+      padding-left 16.4rem
       box-sizing border-box
       opacity 0.9
       input{
@@ -310,6 +310,11 @@ export default {
       }
     }
   }
+  @media (max-width: $MQNarrow) {
+    .inputBox{
+      padding-left $mobileSidebarWidth
+    }  
+  }
 }
 
 // narrow desktop / iPad

components/SidebarLink.vue

@@ -109,5 +109,4 @@ a.sidebar-link
       font-weight 500
       background transparent
       color $accentColor
-      margin-left .2rem
 </style>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepress-theme-reco",
-  "version": "1.1.1",
+  "version": "1.1.2-alpha.2",
   "description": "A simple and beautiful vuepress Blog & Doc theme.",
   "main": "index.js",
   "scripts": {