fix: show carbon ads when toc is empty

Signed-off-by: ZTL-UwU <[email protected]>

components/layout/Toc.vue

@@ -1,62 +1,60 @@
 <template>
-  <template v-if="toc?.links.length">
-    <UiScrollArea
-      v-if="!isSmall"
-      orientation="vertical"
-      class="z-30 hidden h-[calc(100vh-6.5rem)] overflow-y-auto md:block lg:block"
-      type="hover"
-    >
-      <div class="flex h-[calc(100vh-6.5rem)] flex-col">
-        <div>
-          <p class="mb-2 text-base font-semibold">
-            {{ title }}
-          </p>
-          <LayoutTocTree
-            :links="toc.links.filter((x: any) => x.id !== 'hide-toc')"
-            :level="0"
-            :class="[links.length && 'border-b pb-5']"
-          />
-          <div v-if="links" class="pt-5 text-muted-foreground">
-            <NuxtLink
-              v-for="(link, i) in links"
-              :key="i"
-              :to="link.to"
-              :target="link.target"
-              class="flex w-full gap-1 underline-offset-4 hover:underline [&:not(:first-child)]:pt-3"
-            >
-              <SmartIcon
-                v-if="link.icon"
-                :name="link.icon"
-                class="mr-1 self-center"
-              />
-              {{ link.title }}
-              <Icon name="lucide:arrow-up-right" class="ml-auto self-center text-muted-foreground" size="13" />
-            </NuxtLink>
-          </div>
+  <UiScrollArea
+    v-if="!isSmall"
+    orientation="vertical"
+    class="z-30 hidden h-[calc(100vh-6.5rem)] overflow-y-auto md:block lg:block"
+    type="hover"
+  >
+    <div class="flex h-[calc(100vh-6.5rem)] flex-col">
+      <div v-if="toc?.links.length">
+        <p class="mb-2 text-base font-semibold">
+          {{ title }}
+        </p>
+        <LayoutTocTree
+          :links="toc.links.filter((x: any) => x.id !== 'hide-toc')"
+          :level="0"
+          :class="[links.length && 'border-b pb-5']"
+        />
+        <div v-if="links" class="pt-5 text-muted-foreground">
+          <NuxtLink
+            v-for="(link, i) in links"
+            :key="i"
+            :to="link.to"
+            :target="link.target"
+            class="flex w-full gap-1 underline-offset-4 hover:underline [&:not(:first-child)]:pt-3"
+          >
+            <SmartIcon
+              v-if="link.icon"
+              :name="link.icon"
+              class="mr-1 self-center"
+            />
+            {{ link.title }}
+            <Icon name="lucide:arrow-up-right" class="ml-auto self-center text-muted-foreground" size="13" />
+          </NuxtLink>
         </div>
-        <div class="flex-grow" />
-        <LayoutCarbonAds v-if="carbonAds.enable" />
       </div>
-    </UiScrollArea>
-    <UiCollapsible
-      v-else
-      v-model:open="isOpen"
-      class="block w-full text-sm lg:hidden"
-      :class="{ 'border-b': border }"
-    >
-      <UiCollapsibleTrigger class="flex w-full px-4 py-3 text-left font-medium">
-        {{ title }}
-        <Icon
-          name="lucide:chevron-right"
-          class="ml-auto self-center transition-all"
-          :class="[isOpen && 'rotate-90']"
-        />
-      </UiCollapsibleTrigger>
-      <UiCollapsibleContent>
-        <LayoutTocTree :links="toc.links" :level="0" class="mx-4 mb-3 border-l pl-4 text-sm" />
-      </UiCollapsibleContent>
-    </UiCollapsible>
-  </template>
+      <div class="flex-grow" />
+      <LayoutCarbonAds v-if="carbonAds.enable" />
+    </div>
+  </UiScrollArea>
+  <UiCollapsible
+    v-else
+    v-model:open="isOpen"
+    class="block w-full text-sm lg:hidden"
+    :class="{ 'border-b': border }"
+  >
+    <UiCollapsibleTrigger class="flex w-full px-4 py-3 text-left font-medium">
+      {{ title }}
+      <Icon
+        name="lucide:chevron-right"
+        class="ml-auto self-center transition-all"
+        :class="[isOpen && 'rotate-90']"
+      />
+    </UiCollapsibleTrigger>
+    <UiCollapsibleContent>
+      <LayoutTocTree :links="toc.links" :level="0" class="mx-4 mb-3 border-l pl-4 text-sm" />
+    </UiCollapsibleContent>
+  </UiCollapsible>
 </template>
 
 <script setup lang="ts">

content/3.api/1.configuration/1.shadcn-docs.md

@@ -181,6 +181,21 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
   ::field{name="links" type="ILink[]" defaultValue="[]"}
   The links under the toc section.
   ::
+  ::field{name="carbonAds" type="object"}
+    ::collapsible{title="Details"}
+      ::field-group
+        ::field{name="enable" type="boolean" default-value="false"}
+        Whether to turn on Carbon Ads.
+        ::
+        ::field{name="code" type="string"}
+        Carbon Ads code.
+        ::
+        ::field{name="placement" type="string"}
+        Carbon Ads placement.
+        ::
+      ::
+    ::
+  ::
 ::
 
 ## `search`
@@ -298,6 +313,11 @@ const defaultConfig: DefaultConfig = {
     enableInMobile: false,
     title: 'On This Page',
     links: [],
+    carbonAds: {
+      enable: false,
+      code: '',
+      placement: '',
+    },
   },
   search: {
     enable: true,

content/3.api/1.configuration/4.carbon-ads.md

@@ -0,0 +1,30 @@
+---
+title: Carbon Ads
+icon: lucide:chart-line
+description: Run ads at the bottom of the TOC section.
+---
+
+**shadcn-docs-nuxt** has built-in support for [Carbon Ads](https://www.carbonads.net/). Add your Carbon Ads credentials to `app.config.ts` and ads will be displayed at the bottom of the toc section.
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  shadcnDocs: {
+    toc: {
+      enable: true,
+      carbonAds: {
+        enabled: true,
+        code: 'your-carbon-code',
+        placement: 'your-carbon-placement'
+      },
+    }
+  },
+});
+```
+
+These values are used to call carbon CDN script as shown below.
+
+```ts
+`//cdn.carbonads.com/carbon.js?serve=${code}&placement=${placement}`;
+```
+
+:read-more{title="Carbon Ads website" to="https://www.carbonads.net/"}