feat(components): card groups

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

README.md

@@ -6,7 +6,7 @@
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![License][license-src]][license-href]
 
-Beautifully designed _Nuxt Content_ template with _shadcn-vue_. **Customizable. Compatible. Open Source.**
+Beautifully designed _Nuxt Content_ template built with _shadcn-vue_. **Customizable. Compatible. Open Source.**
 
 - [Documentation / Demo](https://shadcn-docs-nuxt.vercel.app/)
 

app.config.ts

@@ -49,8 +49,8 @@ export default defineAppConfig({
         }],
       }, {
         title: 'Use This Template',
-        to: 'https://nuxt.com/templates',
-        target: '_blank',
+        to: '/getting-started/installation',
+        target: undefined,
       }],
       links: [{
         icon: 'lucide:github',

components/content/Card.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="[&:not(:first-child)]:mt-5 relative">
+  <div class="[&:not(:first-child)]:mt-5 group-has-[div]:mt-0">
     <NuxtLink :to="to" :target="target">
-      <UiCard class="transition-all" :class="[to && 'hover:bg-muted']">
+      <UiCard class="transition-all relative" :class="[to && 'hover:bg-muted']">
         <UiCardHeader v-if="icon || title || $slots.title || description || $slots.description">
           <Icon v-if="icon" class="mb-2" :name="icon" size="24" />
           <UiCardTitle v-if="title || $slots.title">
@@ -21,9 +21,9 @@
           <ContentSlot :use="$slots.footer" unwrap="p" />
           {{ footer }}
         </UiCardFooter>
+        <Icon v-if="to" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
       </UiCard>
     </NuxtLink>
-    <Icon v-if="to" name="lucide:arrow-up-right" class="absolute right-4 top-4" />
   </div>
 </template>
 

components/content/CardGroup.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="grid grid-cols-2 gap-4 group">
+    <slot />
+  </div>
+</template>

content/1.getting-started/3.writing/2.components.md

@@ -9,7 +9,7 @@ icon: 'lucide:component'
 The :badge[Badges]{variant="outline"} under each component title marks the compatibility with other doc templates.
 
 ### Alert
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#alert"}
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#alert" target="_blank"}
 
 ::code-group
   ::preview{filename="Preview"}
@@ -75,13 +75,13 @@ The :badge[Badges]{variant="outline"} under each component title marks the compa
 
 ### Callout
 
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/callout"}
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/callout" target="_blank"}
 
 `::callout` is an alias to `::alert`.
 
 ### Read More
 
-:badge[undocs]{variant="outline" to="https://undocs.pages.dev/guide/components#read-more"}
+:badge[undocs]{variant="outline" to="https://undocs.pages.dev/guide/components#read-more" target="_blank"}
 
 ::code-group
   ::preview{filename="Preview"}
@@ -97,7 +97,7 @@ The :badge[Badges]{variant="outline"} under each component title marks the compa
 
 ### Badge
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#badge"}
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#badge" target="_blank"}
 
 ::code-group
   ::preview{filename="Preview"}
@@ -135,8 +135,8 @@ The :badge[Badges]{variant="outline"} under each component title marks the compa
 
 ### Code Group
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#codegroup"}
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/code-group"}
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#codegroup" target="_blank"}
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/code-group" target="_blank"}
 
 ::code-group
   ::preview{filename="Preview"}
@@ -202,8 +202,8 @@ The :badge[Badges]{variant="outline"} under each component title marks the compa
 
 ### Card
 
-:badge[Docus]{variant="outline" to="https://docus.dev/api/components#card"}
-:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card"}
+:badge[Docus]{variant="outline" to="https://docus.dev/api/components#card" target="_blank"}
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card" target="_blank"}
 
 ::code-group
   ::preview{filename="Preview"}
@@ -283,6 +283,93 @@ The :badge[Badges]{variant="outline"} under each component title marks the compa
   ```
 ::
 
+### Card Group
+
+:badge[Nuxt UI Pro]{variant="outline" to="https://ui.nuxt.com/pro/prose/card-group" target="_blank"}
+
+::code-group
+  ::preview{filename="Preview"}
+    ::card-group
+      ::card
+      ---
+      title: Components
+      icon: i-heroicons-cube
+      to: https://nuxt.com/docs/api/components/client-only
+      target: _blank
+      ---
+      Explore Nuxt built-in components for pages, layouts, head, and more.
+      ::
+      ::card
+      ---
+      title: Composables
+      icon: i-heroicons-arrows-right-left
+      to: https://nuxt.com/docs/api/composables/use-app-config
+      target: _blank
+      ---
+      Discover Nuxt composable functions for data-fetching, head management and more.
+      ::
+      ::card
+      ---
+      title: Utils
+      icon: i-heroicons-scissors
+      to: https://nuxt.com/docs/api/utils/dollarfetch
+      target: _blank
+      ---
+      Learn about Nuxt utility functions for navigation, error handling and more.
+      ::
+      ::card
+      ---
+      title: Commands
+      icon: i-heroicons-command-line
+      to: https://nuxt.com/docs/api/commands/add
+      target: _blank
+      ---
+      List of Nuxt CLI commands to init, analyze, build, and preview your application.
+      ::
+    ::
+  ::
+  ```md [Code]
+  ::card-group
+    ::card
+    ---
+    title: Components
+    icon: i-heroicons-cube
+    to: https://nuxt.com/docs/api/components/client-only
+    target: _blank
+    ---
+    Explore Nuxt built-in components for pages, layouts, head, and more.
+    ::
+    ::card
+    ---
+    title: Composables
+    icon: i-heroicons-arrows-right-left
+    to: https://nuxt.com/docs/api/composables/use-app-config
+    target: _blank
+    ---
+    Discover Nuxt composable functions for data-fetching, head management and more.
+    ::
+    ::card
+    ---
+    title: Utils
+    icon: i-heroicons-scissors
+    to: https://nuxt.com/docs/api/utils/dollarfetch
+    target: _blank
+    ---
+    Learn about Nuxt utility functions for navigation, error handling and more.
+    ::
+    ::card
+    ---
+    title: Commands
+    icon: i-heroicons-command-line
+    to: https://nuxt.com/docs/api/commands/add
+    target: _blank
+    ---
+    List of Nuxt CLI commands to init, analyze, build, and preview your application.
+    ::
+  ::
+  ```
+::
+
 ## Landing Page Components
 
 ### Hero