From 9521c92803499d9771572f3b82d2894709146ec1 Mon Sep 17 00:00:00 2001
From: GurkiranSingh <gurkiransinghk@gmail.com>
Date: Sat, 22 Oct 2022 11:02:17 -0400
Subject: [PATCH 1/2] feat: Added slot for Hero Image

Signed-off-by: GurkiranSingh <gurkiransinghk@gmail.com>
---
 src/client/theme-default/Layout.vue                | 12 +++++++++++-
 src/client/theme-default/components/VPContent.vue  |  1 +
 src/client/theme-default/components/VPHero.vue     | 11 ++++++++---
 src/client/theme-default/components/VPHome.vue     |  4 +++-
 src/client/theme-default/components/VPHomeHero.vue |  4 +++-
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index d21997bf4dff..52c48feacb06 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 } from 'vue'
+import { provide, watch, useSlots, ref } from 'vue'
 import { useData, useRoute } from 'vitepress'
 import { useSidebar, useCloseSidebarOnEscape } from './composables/sidebar.js'
 import VPSkipLink from './components/VPSkipLink.vue'
@@ -24,6 +24,15 @@ useCloseSidebarOnEscape(isSidebarOpen, closeSidebar)
 provide('close-sidebar', closeSidebar)
 
 const { frontmatter } = useData()
+const isHeroImageSlotContentExist = ref(false);
+const slots = useSlots()
+
+if (slots['home-hero-image']) {
+  isHeroImageSlotContentExist.value = true
+}
+
+provide('isHeroImageSlotContentExist', isHeroImageSlotContentExist)
+
 </script>
 
 <template>
@@ -44,6 +53,7 @@ const { frontmatter } = useData()
 
     <VPContent>
       <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
       <template #home-hero-after><slot name="home-hero-after" /></template>
       <template #home-features-before><slot name="home-features-before" /></template>
       <template #home-features-after><slot name="home-features-after" /></template>
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index 86aca8623dec..9cbe8856ff67 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -28,6 +28,7 @@ const NotFound = inject('NotFound')
 
     <VPHome v-else-if="frontmatter.layout === 'home'">
       <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
       <template #home-hero-after><slot name="home-hero-after" /></template>
       <template #home-features-before><slot name="home-features-before" /></template>
       <template #home-features-after><slot name="home-features-after" /></template>
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index 6b283761ab8e..b3218bb7bce0 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { inject } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import VPButton from './VPButton.vue'
 import VPImage from './VPImage.vue'
@@ -16,10 +17,12 @@ defineProps<{
   image?: DefaultTheme.ThemeableImage
   actions?: HeroAction[]
 }>()
+
+const isHeroImageSlotContentExist = inject('isHeroImageSlotContentExist');
 </script>
 
 <template>
-  <div class="VPHero" :class="{ 'has-image': image }">
+  <div class="VPHero" :class="{ 'has-image': image || isHeroImageSlotContentExist }">
     <div class="container">
       <div class="main">
         <h1 v-if="name" class="name">
@@ -41,10 +44,12 @@ defineProps<{
         </div>
       </div>
 
-      <div v-if="image" class="image">
+      <div v-if="image || isHeroImageSlotContentExist" class="image">
         <div class="image-container">
           <div class="image-bg" />
-          <VPImage class="image-src" :image="image" />
+          <slot name="home-hero-image">
+            <VPImage class="image-src" :image="image || ''" />
+          </slot>
         </div>
       </div>
     </div>
diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue
index 86db9a273eee..27f8f7b74152 100644
--- a/src/client/theme-default/components/VPHome.vue
+++ b/src/client/theme-default/components/VPHome.vue
@@ -6,7 +6,9 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
 <template>
   <div class="VPHome">
     <slot name="home-hero-before" />
-    <VPHomeHero />
+    <VPHomeHero>
+      <template #home-hero-image><slot name="home-hero-image" /></template>
+    </VPHomeHero>
     <slot name="home-hero-after" />
 
     <slot name="home-features-before" />
diff --git a/src/client/theme-default/components/VPHomeHero.vue b/src/client/theme-default/components/VPHomeHero.vue
index 9aa64aa9dda0..0f8324a3e549 100644
--- a/src/client/theme-default/components/VPHomeHero.vue
+++ b/src/client/theme-default/components/VPHomeHero.vue
@@ -14,5 +14,7 @@ const { frontmatter: fm } = useData()
     :tagline="fm.hero.tagline"
     :image="fm.hero.image"
     :actions="fm.hero.actions"
-  />
+  >
+    <template #home-hero-image><slot name="home-hero-image" /></template>
+  </VPHero>
 </template>

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 2/2] 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>