feat(theme): support encryption for all page layouts (#770)

theme/src/client/components/Home/VPHome.vue

@@ -8,6 +8,7 @@ import VPHomeHero from '@theme/Home/VPHomeHero.vue'
 import VPHomeProfile from '@theme/Home/VPHomeProfile.vue'
 import VPHomeTextImage from '@theme/Home/VPHomeTextImage.vue'
 import VPPosts from '@theme/Posts/VPPosts.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import { computed, h, nextTick, onUnmounted, resolveComponent, watch } from 'vue'
 import { useData } from '../../composables/index.js'
 
@@ -96,6 +97,7 @@ onUnmounted(() => {
 
 <template>
   <div class="vp-home">
+    <VPEncrypt>
       <template
         v-for="(item, index) in config"
         :key="item.type + index"
@@ -109,6 +111,7 @@ onUnmounted(() => {
           />
         </div>
       </template>
+    </VPEncrypt>
   </div>
 </template>
 

theme/src/client/components/Posts/VPPosts.vue

@@ -6,6 +6,7 @@ import VPPostsCategories from '@theme/Posts/VPPostsCategories.vue'
 import VPPostsExtract from '@theme/Posts/VPPostsExtract.vue'
 import VPPostsNav from '@theme/Posts/VPPostsNav.vue'
 import VPPostsTags from '@theme/Posts/VPPostsTags.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { onBeforeUnmount, watch } from 'vue'
 import { forceUpdateCollection, useData } from '../../composables/index.js'
@@ -30,6 +31,7 @@ onBeforeUnmount(() => forceUpdateCollection(undefined))
 
 <template>
   <div class="vp-posts" :class="{ 'home-posts': homePosts }" vp-posts>
+    <VPEncrypt>
       <slot name="posts-top" />
 
       <div
@@ -104,6 +106,7 @@ onBeforeUnmount(() => forceUpdateCollection(undefined))
       </div>
 
       <slot name="posts-bottom" />
+    </VPEncrypt>
   </div>
 </template>
 

theme/src/client/components/VPDoc.vue

@@ -5,7 +5,7 @@ import VPDocBreadcrumbs from '@theme/VPDocBreadcrumbs.vue'
 import VPDocCopyright from '@theme/VPDocCopyright.vue'
 import VPDocFooter from '@theme/VPDocFooter.vue'
 import VPDocMeta from '@theme/VPDocMeta.vue'
-import VPEncryptPage from '@theme/VPEncryptPage.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import VPTransitionFadeSlideY from '@theme/VPTransitionFadeSlideY.vue'
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRoute } from 'vuepress/client'
@@ -137,9 +137,9 @@ watch(
               </VPDocMeta>
               <slot name="doc-meta-bottom" />
 
-              <VPEncryptPage v-if="!isPageDecrypted" />
+              <VPEncrypt>
                 <div
-                v-else class="vp-doc plume-content"
+                  class="vp-doc plume-content"
                   :class="[pageName, enabledExternalLinkIcon && 'external-link-icon-enabled']" vp-content
                 >
                   <slot name="doc-content-before" />
@@ -149,13 +149,15 @@ watch(
                   <DocGitContributors v-if="contributorsMode === 'block'" />
                   <DocGitChangelog />
                   <VPDocCopyright />
-              </div>
+
-            </main>
+                  <VPDocFooter>
-            <VPDocFooter v-if="isPageDecrypted">
                     <template #doc-footer-before>
                       <slot name="doc-footer-before" />
                     </template>
                   </VPDocFooter>
+                </div>
+              </VPEncrypt>
+            </main>
 
             <VPComment />
 

theme/src/client/components/VPEncrypt.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import VPEncryptForm from '@theme/VPEncryptForm.vue'
 import { useTemplateRef } from 'vue'
-import { useData } from '../composables/index.js'
+import { useData, useEncrypt } from '../composables/index.js'
 
 defineOptions({
   inheritAttrs: false,
 })
 
+const { isPageDecrypted } = useEncrypt()
+
 const { theme, frontmatter } = useData<'post'>()
 
 const el = useTemplateRef<HTMLElement>('el')
@@ -21,7 +23,7 @@ function onValidate(isValidate: boolean) {
 </script>
 
 <template>
-  <ClientOnly>
+  <ClientOnly v-if="!isPageDecrypted">
     <div ref="el" class="vp-page-encrypt" v-bind="$attrs">
       <div class="logo">
         <span class="vpi-lock icon-lock-head" />
@@ -29,6 +31,7 @@ function onValidate(isValidate: boolean) {
       <VPEncryptForm :info="frontmatter.passwordHint || theme.encryptPageText" @validate="onValidate" />
     </div>
   </ClientOnly>
+  <slot v-else />
 </template>
 
 <style scoped>

theme/src/client/components/VPFriends.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import VPComment from '@theme/VPComment.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
 import VPFriendsGroup from '@theme/VPFriendsGroup.vue'
 import VPFriendsItem from '@theme/VPFriendsItem.vue'
 import VPLink from '@theme/VPLink.vue'
@@ -15,6 +16,7 @@ const groups = computed(() => matter.value.groups || [])
 
 <template>
   <div class="vp-friends">
+    <VPEncrypt>
       <Content v-if="matter.contentPosition === 'before'" class="vp-doc plume-content before" vp-content />
 
       <h2 class="title">
@@ -45,6 +47,7 @@ const groups = computed(() => matter.value.groups || [])
           {{ editLink.text }}
         </VPLink>
       </div>
+    </VPEncrypt>
 
     <VPComment />
   </div>

theme/src/client/components/VPPage.vue

@@ -1,17 +1,13 @@
 <script setup lang="ts">
-import VPEncryptPage from '@theme/VPEncryptPage.vue'
+import VPEncrypt from '@theme/VPEncrypt.vue'
-import { useEncrypt } from '../composables/index.js'
-
-const { isPageDecrypted } = useEncrypt()
 </script>
 
 <template>
   <div class="vp-page">
-    <VPEncryptPage v-if="!isPageDecrypted" />
+    <VPEncrypt>
-    <template v-else>
       <slot name="page-top" />
       <Content class="vp-doc plume-content" vp-content />
       <slot name="page-bottom" />
-    </template>
+    </VPEncrypt>
   </div>
 </template>