feat(theme): add home-hero-info slot (#1807)

vuejs · Feb 28, 2023 · 996a5f4 · 996a5f4
1 parent 2a1abbe
commit 996a5f4
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -55,6 +55,7 @@ provide('hero-image-slot-exists', heroImageSlotExists)
 
     <VPContent>
       <template #home-hero-before><slot name="home-hero-before" /></template>
+      <template #home-hero-info><slot name="home-hero-info" /></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>

diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
@@ -29,6 +29,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-info><slot name="home-hero-info" /></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>

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
@@ -25,11 +25,13 @@ const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
   <div class="VPHero" :class="{ 'has-image': image || heroImageSlotExists }">
     <div class="container">
       <div class="main">
-        <h1 v-if="name" class="name">
-          <span class="clip">{{ name }}</span>
-        </h1>
-        <p v-if="text" class="text">{{ text }}</p>
-        <p v-if="tagline" class="tagline">{{ tagline }}</p>
+        <slot name="home-hero-info">
+          <h1 v-if="name" class="name">
+            <span class="clip">{{ name }}</span>
+          </h1>
+          <p v-if="text" class="text">{{ text }}</p>
+          <p v-if="tagline" class="tagline">{{ tagline }}</p>
+        </slot>
 
         <div v-if="actions" class="actions">
           <div v-for="action in actions" :key="action.link" class="action">

diff --git a/src/client/theme-default/components/VPHome.vue b/src/client/theme-default/components/VPHome.vue
@@ -7,6 +7,7 @@ import VPHomeFeatures from './VPHomeFeatures.vue'
   <div class="VPHome">
     <slot name="home-hero-before" />
     <VPHomeHero>
+      <template #home-hero-info><slot name="home-hero-info" /></template>
       <template #home-hero-image><slot name="home-hero-image" /></template>
     </VPHomeHero>
     <slot name="home-hero-after" />

diff --git a/src/client/theme-default/components/VPHomeHero.vue b/src/client/theme-default/components/VPHomeHero.vue
@@ -15,6 +15,7 @@ const { frontmatter: fm } = useData()
     :image="fm.hero.image"
     :actions="fm.hero.actions"
   >
+    <template #home-hero-info><slot name="home-hero-info" /></template>
     <template #home-hero-image><slot name="home-hero-image" /></template>
   </VPHero>
 </template>