From d3338acd099fcfd8e434fc023b1da667fac087e6 Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Wed, 28 Dec 2022 16:12:39 +0530
Subject: [PATCH] chore: cleanup

---
 docs/guide/theme-introduction.md               |  1 +
 src/client/theme-default/Layout.vue            | 12 ++++--------
 src/client/theme-default/components/VPHero.vue | 10 +++++-----
 3 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/docs/guide/theme-introduction.md b/docs/guide/theme-introduction.md
index 4e76c10e1871..f2fcf60c86b1 100644
--- 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
index b5ce43458f71..6a52272092d7 100644
--- 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
index b2f7c39d1a9d..ed508ef22327 100644
--- 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 v-if="image" class="image-src" :image="image" />
           </slot>
         </div>
       </div>