From 53d0099ffa99582f552d7dff5676734c965ceb05 Mon Sep 17 00:00:00 2001
From: John Campion Jr <john@brightshore.com>
Date: Mon, 27 Mar 2023 14:31:54 -0400
Subject: [PATCH] feat(theme): add `page-top/bottom` and `doc-top/bottom` slots
 (#2139)

---
 docs/guide/extending-default-theme.md             | 5 +++++
 src/client/theme-default/Layout.vue               | 6 ++++++
 src/client/theme-default/components/VPContent.vue | 8 +++++++-
 src/client/theme-default/components/VPDoc.vue     | 4 +++-
 src/client/theme-default/components/VPPage.vue    | 2 ++
 5 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/docs/guide/extending-default-theme.md b/docs/guide/extending-default-theme.md
index c7459923..b568ca1d 100644
--- a/docs/guide/extending-default-theme.md
+++ b/docs/guide/extending-default-theme.md
@@ -160,6 +160,8 @@ export default {
 Full list of slots available in the default theme layout:
 
 - When `layout: 'doc'` (default) is enabled via frontmatter:
+  - `doc-top`
+  - `doc-bottom`
   - `doc-footer-before`
   - `doc-before`
   - `doc-after`
@@ -178,6 +180,9 @@ Full list of slots available in the default theme layout:
   - `home-hero-after`
   - `home-features-before`
   - `home-features-after`
+- When `layout: 'page'` is enabled via frontmatter:
+  - `page-top`
+  - `page-bottom`
 - On not found (404) page:
   - `not-found`
 - Always:
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index ba3572c9..2232e379 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -54,6 +54,9 @@ provide('hero-image-slot-exists', heroImageSlotExists)
     </VPSidebar>
 
     <VPContent>
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+      
       <template #not-found><slot name="not-found" /></template>
       <template #home-hero-before><slot name="home-hero-before" /></template>
       <template #home-hero-info><slot name="home-hero-info" /></template>
@@ -65,6 +68,9 @@ provide('hero-image-slot-exists', heroImageSlotExists)
       <template #doc-footer-before><slot name="doc-footer-before" /></template>
       <template #doc-before><slot name="doc-before" /></template>
       <template #doc-after><slot name="doc-after" /></template>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
 
       <template #aside-top><slot name="aside-top" /></template>
       <template #aside-bottom><slot name="aside-bottom" /></template>
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
index bafb2321..31c3d1cb 100644
--- a/src/client/theme-default/components/VPContent.vue
+++ b/src/client/theme-default/components/VPContent.vue
@@ -21,7 +21,10 @@ const { hasSidebar } = useSidebar()
   >
     <slot name="not-found" v-if="page.isNotFound"><NotFound /></slot>
 
-    <VPPage v-else-if="frontmatter.layout === 'page'" />
+    <VPPage v-else-if="frontmatter.layout === 'page'">
+      <template #page-top><slot name="page-top" /></template>
+      <template #page-bottom><slot name="page-bottom" /></template>
+    </VPPage>
 
     <VPHome v-else-if="frontmatter.layout === 'home'">
       <template #home-hero-before><slot name="home-hero-before" /></template>
@@ -33,6 +36,9 @@ const { hasSidebar } = useSidebar()
     </VPHome>
 
     <VPDoc v-else>
+      <template #doc-top><slot name="doc-top" /></template>
+      <template #doc-bottom><slot name="doc-bottom" /></template>
+
       <template #doc-footer-before><slot name="doc-footer-before" /></template>
       <template #doc-before><slot name="doc-before" /></template>
       <template #doc-after><slot name="doc-after" /></template>
diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
index a352445b..7c9109d8 100644
--- a/src/client/theme-default/components/VPDoc.vue
+++ b/src/client/theme-default/components/VPDoc.vue
@@ -19,6 +19,7 @@ const pageName = computed(() =>
     class="VPDoc"
     :class="{ 'has-sidebar': hasSidebar, 'has-aside': hasAside }"
   >
+    <slot name="doc-top" />
     <div class="container">
       <div v-if="hasAside" class="aside">
         <div class="aside-curtain" />
@@ -50,6 +51,7 @@ const pageName = computed(() =>
         </div>
       </div>
     </div>
+    <slot name="doc-bottom" />
   </div>
 </template>
 
@@ -130,7 +132,7 @@ const pageName = computed(() =>
 .aside-container {
   position: fixed;
   top: 0;
-  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px);
+  padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);
   width: 224px;
   height: 100vh;
   overflow-x: hidden;
diff --git a/src/client/theme-default/components/VPPage.vue b/src/client/theme-default/components/VPPage.vue
index 015926b7..8e735fd0 100644
--- a/src/client/theme-default/components/VPPage.vue
+++ b/src/client/theme-default/components/VPPage.vue
@@ -1,5 +1,7 @@
 <template>
   <div class="VPPage">
+    <slot name="page-top" />
     <Content />
+    <slot name="page-bottom" />
   </div>
 </template>