fix(carbon): add format argument

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

app.config.ts

@@ -149,9 +149,10 @@ export default defineAppConfig({
         target: '_blank',
       }],
       carbonAds: {
-        enable: false,
+        enable: true,
         code: '',
         placement: '',
+        format: 'cover',
       },
     },
     search: {

components/layout/CarbonAds.vue

@@ -1,9 +1,6 @@
 <!-- Ported from Vitepress -->
 <template>
-  <div
-    ref="container"
-    class="carbon-ads my-6 flex min-h-[260px] items-center justify-center rounded-lg border p-4 text-center"
-  />
+  <div ref="container" class="mt-6" />
 </template>
 
 <script setup lang="ts">
@@ -18,7 +15,7 @@ function init() {
     const s = document.createElement('script');
     s.type = 'text/javascript';
     s.id = '_carbonads_js';
-    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonAds.code}&placement=${carbonAds.placement}`;
+    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonAds.code}&placement=${carbonAds.placement}&format=${carbonAds.format}`;
     s.async = true;
     container.value.appendChild(s);
   }
@@ -37,32 +34,20 @@ if (carbonAds.enable) {
 }
 </script>
 
-<style scoped>
-.carbon-ads {
-  @apply leading-4 text-xs font-medium;
+<style>
+.carbon-responsive-wrap {
+	@apply bg-background border-border px-4 py-6 rounded-lg flex flex-col items-center !important;
 }
 
-.carbon-ads :deep(img) {
-  @apply mx-auto my-0 rounded-md;
+.carbon-responsive-wrap .carbon-img {
+	@apply flex-none rounded overflow-hidden !important;
 }
 
-.carbon-ads :deep(.carbon-text) {
-  @apply block mx-auto my-0 text-sm font-medium pt-4 hover:text-primary transition-colors;
+.carbon-responsive-wrap .carbon-text {
+  @apply text-muted-foreground text-sm flex-none text-center !important;
 }
 
-.carbon-ads :deep(.carbon-poweredby) {
-  @apply block pt-3 text-[11px] uppercase text-muted-foreground;
-}
-
-.carbon-ads :deep(.carbon-poweredby:hover) {
-  @apply text-muted-foreground;
-}
-
-.carbon-ads :deep(> div) {
-  @apply hidden;
-}
-
-.carbon-ads :deep(> div:first-of-type) {
-  @apply block;
+#carbonads .carbon-poweredby {
+	@apply bg-background text-muted-foreground block text-right text-[10px] uppercase no-underline !important;
 }
 </style>

composables/useConfig.ts

@@ -96,6 +96,7 @@ const defaultConfig: DefaultConfig = {
       enable: false,
       code: '',
       placement: '',
+      format: 'cover',
     },
   },
   search: {

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

@@ -193,6 +193,9 @@ All configurable icons can be set to iconify icons, emojis and urls, using [smar
         ::field{name="placement" type="string"}
         Carbon Ads placement.
         ::
+        ::field{name="format" type="'cover' | 'responsive'" default-value="cover"}
+        Carbon Ads format.
+        ::
       ::
     ::
   ::
@@ -317,6 +320,7 @@ const defaultConfig: DefaultConfig = {
       enable: false,
       code: '',
       placement: '',
+      format: 'cover',
     },
   },
   search: {

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

@@ -14,7 +14,8 @@ export default defineAppConfig({
       carbonAds: {
         enabled: true,
         code: 'your-carbon-code',
-        placement: 'your-carbon-placement'
+        placement: 'your-carbon-placement',
+        format: 'your-carbon-format', // defaults to 'cover'
       },
     }
   },

content/index.md

@@ -6,7 +6,7 @@ navigation: false
 ::hero
 ---
 announcement:
-  title: 'Release v0.7.3'
+  title: 'Release v0.7.4'
   icon: '🎉'
   to: https://github.com/ZTL-UwU/shadcn-docs-nuxt/releases
   target: _blank

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-docs-nuxt",
   "type": "module",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "description": "Effortless and beautiful docs template built with Nuxt Content & shadcn-vue.",
   "author": "Tony Zhang <[email protected]>",
   "license": "MIT",

types/index.d.ts

@@ -78,6 +78,7 @@ interface DefaultConfig {
       enable: boolean;
       code: string;
       placement: string;
+      format: 'cover' | 'responsive';
     };
   };
   search: {