feat: stick aside ads to the page bottom

To avoid layout shift on page change

src/client/theme-default/components/VPDoc.vue

@@ -59,7 +59,7 @@ const pageName = computed(() => {
 
 @media (min-width: 960px) {
   .VPDoc {
-    padding: 32px 32px 32px;
+    padding: 32px 32px 0;
   }
 
   .VPDoc:not(.has-sidebar) .container {
@@ -118,7 +118,7 @@ const pageName = computed(() => {
   top: 0;
   margin-top: calc(var(--vp-nav-height-desktop) * -1 - 32px);
   padding-top: calc(var(--vp-nav-height-desktop) + 32px);
-  max-height: 100vh;
+  height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-width: none;
@@ -133,12 +133,15 @@ const pageName = computed(() => {
   bottom: 0;
   z-index: 10;
   width: 224px;
-  height: 88px;
+  height: 32px;
   background: linear-gradient(transparent, var(--vp-c-bg) 70%);
 }
 
 .aside-content {
-  padding-bottom: 96px;
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + 32px));
+  padding-bottom: 32px;
 }
 
 .content {
@@ -149,7 +152,7 @@ const pageName = computed(() => {
 
 @media (min-width: 960px) {
   .content {
-    padding: 0 32px 96px;
+    padding: 0 32px 128px;
   }
 }
 

src/client/theme-default/components/VPDocAside.vue

@@ -14,6 +14,8 @@ const { page, theme } = useData()
     <VPDocAsideOutline v-if="page.headers.length" />
     <slot name="aside-outline-after" />
 
+    <div class="spacer" />
+
     <slot name="aside-ads-before" />
     <VPDocAsideCarbonAds v-if="theme.carbonAds" />
     <slot name="aside-ads-after" />
@@ -23,8 +25,18 @@ const { page, theme } = useData()
 </template>
 
 <style scoped>
-.VPDocAside :deep(.VPDocAsideOutline + .VPDocAsideSponsors),
-.VPDocAside :deep(.VPDocAsideOutline + .VPDocAsideCarbonAds) {
+.VPDocAside {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.spacer {
+  flex-grow: 1;
+}
+
+.VPDocAside :deep(.spacer + .VPDocAsideSponsors),
+.VPDocAside :deep(.spacer + .VPDocAsideCarbonAds) {
   margin-top: 24px;
 }
 

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -29,50 +29,55 @@ function handleClick({ target: el }: Event) {
 
 <template>
   <div class="VPDocAsideOutline" :class="{ 'has-outline': hasOutline }" ref="container">
-    <div class="outline-marker" ref="marker" />
-
-    <div class="outline-title">On this page</div>
-
-    <nav aria-labelledby="doc-outline-aria-label">
-      <span class="visually-hidden" id="doc-outline-aria-label">
-        Table of Contents for current page
-      </span>
-
-      <ul class="root">
-        <li
-          v-for="{ text, link, children, hidden } in resolvedHeaders"
-          v-show="!hidden"
-        >
-          <a class="outline-link" :href="link" @click="handleClick">
-            {{ text }}
-          </a>
-          <ul v-if="children && frontmatter.outline === 'deep'">
-            <li v-for="{ text, link, hidden } in children" v-show="!hidden">
-              <a class="outline-link nested" :href="link" @click="handleClick">
-                {{ text }}
-              </a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </nav>
+    <div class="content">
+      <div class="outline-marker" ref="marker" />
+
+      <div class="outline-title">On this page</div>
+
+      <nav aria-labelledby="doc-outline-aria-label">
+        <span class="visually-hidden" id="doc-outline-aria-label">
+          Table of Contents for current page
+        </span>
+
+        <ul class="root">
+          <li
+            v-for="{ text, link, children, hidden } in resolvedHeaders"
+            v-show="!hidden"
+          >
+            <a class="outline-link" :href="link" @click="handleClick">
+              {{ text }}
+            </a>
+            <ul v-if="children && frontmatter.outline === 'deep'">
+              <li v-for="{ text, link, hidden } in children" v-show="!hidden">
+                <a class="outline-link nested" :href="link" @click="handleClick">
+                  {{ text }}
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .VPDocAsideOutline {
-  position: relative;
   display: none;
-  border-left: 1px solid var(--vp-c-divider-light);
-  padding-left: 16px;
-  font-size: 13px;
-  font-weight: 500;
 }
 
 .VPDocAsideOutline.has-outline {
   display: block;
 }
 
+.content {
+  position: relative;
+  border-left: 1px solid var(--vp-c-divider-light);
+  padding-left: 16px;
+  font-size: 13px;
+  font-weight: 500;
+}
+
 .outline-marker {
   position: absolute;
   top: 32px;