feat: Add more snippets #1 (#5)

app/app.config.ts

@@ -12,6 +12,11 @@ export default defineAppConfig({
           root: 'my-0 size-full',
           base: 'size-full text-xs'
         }
+      },
+      p: {
+        slots: {
+          root: 'my-0'
+        }
       }
     }
   },

app/components/Snippet.vue

@@ -18,15 +18,13 @@ const keyword = computed(() => {
     class="cursor-pointer flex flex-col justify-between gap-1 border-2 hover:border-green-400 rounded-md p-4 transition-colors duration-200 hover:bg-green-50/40 dark:hover:bg-green-950/40"
     :class="[active ? 'border-green-400 bg-green-50/40 dark:bg-green-950/40' : 'border-neutral-100 dark:border-neutral-800 bg-neutral-50 dark:bg-neutral-900']"
   >
-    <MDC :value="snippet.code" class="size-full" />
+    <MDC :value="snippet.code" class="size-full max-h-[300px]" />
     <div class="flex flex-col gap-4 mt-2">
       <div class="flex flex-col">
         <span class="font-semibold">
           {{ snippet.name }}
         </span>
-        <p class="text-xs text-neutral-500">
-          {{ snippet.description }}
-        </p>
+        <MDC :value="snippet.description" class="text-xs text-neutral-500" />
       </div>
       <div>
         <UBadge variant="soft" size="lg" class="px-3 py-0.5">

app/pages/index.vue

@@ -6,7 +6,7 @@ const { data: page } = await useAsyncData('index', () => {
 })
 
 const { data: snippets } = await useAsyncData('snippets', () =>
-  queryCollection('snippets').all()
+  queryCollection('snippets').order('name', 'ASC').all()
 )
 
 const active = ref('all')
@@ -98,7 +98,7 @@ const groups = ref([
         :key="index"
         :snippet
         :active="!!selectedSnippets.find(s => s.id === snippet.id)"
-        @click.prevent="toggleSelectSnippet(snippet)"
+        @click="toggleSelectSnippet(snippet)"
       />
     </UContainer>
   </div>

content/index.yml

@@ -28,5 +28,3 @@ about:
     <source src="/demo.mp4" type="video/mp4">
     Your browser does not support the video tag.
     </video>
-
-    Start saving time today with Nuppets! 🚀

content/snippets/componentCode.yml

@@ -0,0 +1,19 @@
+name: Component Code
+description: Extremely specific snippet to generate the code of a component in the Nuxt UI documentation (cc [@BenjaminCanac](https://x.com/benjamincanac))
+keyword: cc
+code: |
+  ```mdc
+  ::component-code{pro}
+  ---
+  hide:
+    - class
+  props:
+    class: ''
+  ---
+  ::
+  ```
+tags:
+  - documentation
+  - nuxt
+  - nuxt-ui
+  - vue

content/snippets/customIconCollection.yml

@@ -0,0 +1,22 @@
+name: Custom Icon Collection
+description: Create a @nuxt/icon custom collection
+keyword: cic
+code: |
+  ```ts
+  icon: {
+    customCollections: [
+      {
+        prefix: 'custom',
+        dir: './app/assets/icons',
+      },
+    ],
+    clientBundle: {
+      scan: true,
+      includeCustomCollections: true,
+    }
+  },
+  ```
+tags:
+  - icon
+  - nuxt-ui
+  - nuxt

content/snippets/seoSetup.yml

@@ -0,0 +1,40 @@
+name: Complete SEO Setup
+description: Configure SEO meta tags and technical metadata with useHead and useSeoMeta
+keyword: seo
+code: |
+  ```ts
+  const title = 'Your Page Title'
+  const description = 'Your page description'
+  const image = 'https://yoursite.com/og.png'
+  const url = 'https://yoursite.com'
+
+  useHead({
+    titleTemplate: '%s | Your Site Name',
+    meta: [
+      { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+      { name: 'charset', content: 'utf-8' },
+      { name: 'color-scheme', content: 'light dark' },
+    ],
+    link: [
+      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
+      { rel: 'canonical', href: url },
+    ],
+  })
+
+  useSeoMeta({
+    title,
+    description,
+    ogTitle: title,
+    ogDescription: description,
+    ogImage: image,
+    ogUrl: url,
+    ogType: 'website',
+    twitterCard: 'summary_large_image',
+    twitterTitle: title,
+    twitterDescription: description,
+    twitterImage: image,
+  })
+  ```
+tags:
+  - seo
+  - nuxt

content/snippets/uiAppConfig.yml

@@ -0,0 +1,17 @@
+name: UI App Config
+description: Generate the UI App Config for Nuxt UI Pro
+keyword: ac
+code: |
+  ```ts
+  export default defineAppConfig({
+    ui: {
+      colors: {
+        primary: 'green',
+        neutral: 'neutral'
+      }
+    }
+  })
+  ```
+tags:
+  - nuxt-ui
+  - nuxt