chore: cleanup

vuejs · Dec 28, 2022 · 3663c14 · 3663c14
1 parent 1507423
commit 3663c14
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
@@ -212,6 +212,7 @@ Full list of slots available in the default theme layout:
   - `aside-ads-after`
 - When `layout: 'home'` is enabled via frontmatter:
   - `home-hero-before`
+  - `home-hero-image`
   - `home-hero-after`
   - `home-features-before`
   - `home-features-after`

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, watch, useSlots, ref } from 'vue'
+import { computed, provide, useSlots, watch } from 'vue'
 import { useData, useRoute } from 'vitepress'
 import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar.js'
 import VPSkipLink from './components/VPSkipLink.vue'
@@ -25,15 +25,11 @@ provide('close-sidebar', closeSidebar)
 provide('is-sidebar-open', isSidebarOpen)
 
 const { frontmatter } = useData()
-const isHeroImageSlotContentExist = ref(false);
-const slots = useSlots()
-
-if (slots['home-hero-image']) {
-  isHeroImageSlotContentExist.value = true
-}
 
-provide('isHeroImageSlotContentExist', isHeroImageSlotContentExist)
+const slots = useSlots()
+const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
 
+provide('hero-image-slot-exists', heroImageSlotExists)
 </script>
 
 <template>

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { Ref, inject } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import VPButton from './VPButton.vue'
 import VPImage from './VPImage.vue'
@@ -18,11 +18,11 @@ defineProps<{
   actions?: HeroAction[]
 }>()
 
-const isHeroImageSlotContentExist = inject('isHeroImageSlotContentExist');
+const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
 </script>
 
 <template>
-  <div class="VPHero" :class="{ 'has-image': image || isHeroImageSlotContentExist }">
+  <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
     <div class="container">
       <div class="main">
         <h1 v-if="name" class="name">
@@ -44,11 +44,11 @@ const isHeroImageSlotContentExist = inject('isHeroImageSlotContentExist');
         </div>
       </div>
 
-      <div v-if="image || isHeroImageSlotContentExist" class="image">
+      <div v-if="image || heroImageSlotExists" class="image">
         <div class="image-container">
           <div class="image-bg" />
           <slot name="home-hero-image">
-            <VPImage class="image-src" :image="image || ''" />
+            <VPImage class="image-src" :image="image" />
           </slot>
         </div>
       </div>