From 5c2eb1b3b0988ae98639543e60a740d6b40a17a5 Mon Sep 17 00:00:00 2001
From: Kia King Ishii <kia.king.08@gmail.com>
Date: Tue, 17 Jan 2023 23:14:55 +0900
Subject: [PATCH] fix(theme): spacing between aside sponsors and ads section is
 missing

---
 .../theme-default/components/VPDocAside.vue    |  8 ++------
 .../components/VPDocAsideCarbonAds.vue         | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 src/client/theme-default/components/VPDocAsideCarbonAds.vue

diff --git a/src/client/theme-default/components/VPDocAside.vue b/src/client/theme-default/components/VPDocAside.vue
index f886107f..2c6325c3 100644
--- a/src/client/theme-default/components/VPDocAside.vue
+++ b/src/client/theme-default/components/VPDocAside.vue
@@ -1,13 +1,9 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
 import { useData } from '../composables/data.js'
 import VPDocAsideOutline from './VPDocAsideOutline.vue'
+import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
 
 const { theme } = useData()
-
-const VPCarbonAds = __CARBON__
-  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
-  : () => null
 </script>
 
 <template>
@@ -21,7 +17,7 @@ const VPCarbonAds = __CARBON__
     <div class="spacer" />
 
     <slot name="aside-ads-before" />
-    <VPCarbonAds v-if="theme.carbonAds" :carbonAds="theme.carbonAds" />
+    <VPDocAsideCarbonAds v-if="theme.carbonAds" :carbon-ads="theme.carbonAds" />
     <slot name="aside-ads-after" />
 
     <slot name="aside-bottom" />
diff --git a/src/client/theme-default/components/VPDocAsideCarbonAds.vue b/src/client/theme-default/components/VPDocAsideCarbonAds.vue
new file mode 100644
index 00000000..d10598dd
--- /dev/null
+++ b/src/client/theme-default/components/VPDocAsideCarbonAds.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+import type { DefaultTheme } from 'vitepress/theme'
+
+defineProps<{
+  carbonAds: DefaultTheme.CarbonAdsOptions
+}>()
+
+const VPCarbonAds = __CARBON__
+  ? defineAsyncComponent(() => import('./VPCarbonAds.vue'))
+  : () => null
+</script>
+
+<template>
+  <div class="VPDocAsideCarbonAds">
+    <VPCarbonAds :carbon-ads="carbonAds" />
+  </div>
+</template>