nuxt · benjamincanac · May 19, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023
diff --git a/docs/components/docs/DocsPrevNext.vue b/docs/components/docs/DocsPrevNext.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="flex items-center justify-between">
-    <UButton v-if="prev" :label="prev.navigation?.title || prev.title" :to="prev._path" icon="i-heroicons-arrow-small-left-20-solid" color="white" />
+  <div class="grid gap-8 sm:grid-cols-2">
+    <DocsPrevNextCard v-if="prev" :title="prev.navigation?.title || prev.title" :description="prev.navigation?.description || prev.description" :to="prev._path" :icon="prev.navigation?.icon" />
     <span v-else>&nbsp;</span>
-    <UButton v-if="next" :label="next.navigation?.title || next.title" :to="next._path" trailing-icon="i-heroicons-arrow-small-right-20-solid" color="white" />
+    <DocsPrevNextCard v-if="next" :title="next.navigation?.title || next.title" :description="next.navigation?.description || next.description" :to="next._path" :icon="next.navigation?.icon" />
   </div>
 </template>
 

diff --git a/docs/components/docs/DocsPrevNextCard.vue b/docs/components/docs/DocsPrevNextCard.vue
@@ -0,0 +1,36 @@
+<template>
+  <NuxtLink :to="to" class="block px-5 py-8 text-gray-700 transition-shadow bg-white border shadow not-prose rounded-xl border-gray-200 dark:border-gray-800 dark:bg-gray-800/25 hover:shadow-md dark:text-gray-300 dark:shadow-black/50 group">
+    <div v-if="icon" class="inline-flex items-center rounded-full p-1.5 bg-gray-50 dark:bg-gray-800 group-hover:bg-primary-50 dark:group-hover:bg-primary-400/10 ring-1 ring-gray-300 dark:ring-gray-700 mb-4 group-hover:ring-primary-400/50 transition-colors">
+      <UIcon :name="icon" class="w-5 h-5 transition-colors text-gray-900 dark:text-gray-100 group-hover:text-primary-400" />
+    </div>
+
+    <p class="text-gray-900 dark:text-gray-50 font-medium text-[15px] mb-1">
+      {{ title }}
+    </p>
+
+    <p class="text-sm font-normal text-gray-500 dark:text-gray-400">
+      {{ description }}
+    </p>
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  icon: {
+    type: String,
+    default: null
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  description: {
+    type: String,
+    default: ''
+  },
+  to: {
+    type: String,
+    required: true
+  }
+})
+</script>
diff --git a/docs/content/2.elements/1.avatar.md b/docs/content/2.elements/1.avatar.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an image that represents a resource or a group of resources.
 ---
 
 ## Usage

diff --git a/docs/content/2.elements/2.badge.md b/docs/content/2.elements/2.badge.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a short text to represent a status or a category.
 ---
 
 ## Usage

diff --git a/docs/content/2.elements/3.button.md b/docs/content/2.elements/3.button.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Create a button with icon or link capabilities.
 ---
 
 ## Usage

diff --git a/docs/content/2.elements/4.dropdown.md b/docs/content/2.elements/4.dropdown.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a list of actions in a dropdown menu.
 headlessui:
   label: 'Menu'
   to: 'https://headlessui.com/vue/menu'

diff --git a/docs/content/2.elements/5.icon.md b/docs/content/2.elements/5.icon.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an icon from Iconify library.
 ---
 
 ## Usage

diff --git a/docs/content/2.elements/6.kbd.md b/docs/content/2.elements/6.kbd.md
@@ -1,6 +1,7 @@
 ---
 github: true
 title: 'Keyboard Key'
+description: Display a keyboard key in a text block.
 navigation:
   title: 'Kbd'
 ---

diff --git a/docs/content/3.forms/1.input.md b/docs/content/3.forms/1.input.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an input field.
 ---
 
 ## Usage

diff --git a/docs/content/3.forms/2.textarea.md b/docs/content/3.forms/2.textarea.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a textarea field.
 ---
 
 ## Usage

diff --git a/docs/content/3.forms/3.select.md b/docs/content/3.forms/3.select.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a select field.
 ---
 
 ## Usage

diff --git a/docs/content/3.forms/4.select-menu.md b/docs/content/3.forms/4.select-menu.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a select menu with advanced features.
 headlessui:
   label: 'Listbox'
   to: 'https://headlessui.com/vue/listbox'

diff --git a/docs/content/3.forms/5.checkbox.md b/docs/content/3.forms/5.checkbox.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a checkbox field.
 ---
 
 ## Usage

diff --git a/docs/content/3.forms/6.radio.md b/docs/content/3.forms/6.radio.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a radio field.
 ---
 
 ## Usage

diff --git a/docs/content/3.forms/7.toggle.md b/docs/content/3.forms/7.toggle.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a toggle field.
 headlessui:
   label: 'Switch'
   to: 'https://headlessui.com/vue/switch'

diff --git a/docs/content/4.navigation/1.vertical-navigation.md b/docs/content/4.navigation/1.vertical-navigation.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a vertical navigation.
 ---
 
 ## Usage

diff --git a/docs/content/4.navigation/2.command-palette.md b/docs/content/4.navigation/2.command-palette.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Add a customizable command palette to your app.
 headlessui:
   label: 'Combobox'
   to: 'https://headlessui.com/vue/combobox'

diff --git a/docs/content/5.overlays/1.modal.md b/docs/content/5.overlays/1.modal.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a modal within your application.
 headlessui:
   label: 'Dialog'
   to: 'https://headlessui.com/vue/dialog'

diff --git a/docs/content/5.overlays/2.slideover.md b/docs/content/5.overlays/2.slideover.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a dialog that slides in from the edge of the screen.
 headlessui:
   label: 'Dialog'
   to: 'https://headlessui.com/vue/dialog'

diff --git a/docs/content/5.overlays/3.popover.md b/docs/content/5.overlays/3.popover.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a non-modal dialog that floats around a trigger element.
 headlessui:
   label: 'Popover'
   to: 'https://headlessui.com/vue/popover'

diff --git a/docs/content/5.overlays/4.tooltip.md b/docs/content/5.overlays/4.tooltip.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display content that appears on hover next to an element.
 ---
 
 ## Usage

diff --git a/docs/content/5.overlays/5.context-menu.md b/docs/content/5.overlays/5.context-menu.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a menu that appears on right click.
 ---
 
 ## Usage

diff --git a/docs/content/5.overlays/6.notification.md b/docs/content/5.overlays/6.notification.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a toast notification in your app.
 ---
 
 ## Usage

diff --git a/docs/content/6.layout/1.card.md b/docs/content/6.layout/1.card.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a container for content with a header, body and footer.
 ---
 
 ## Usage

diff --git a/docs/content/6.layout/2.container.md b/docs/content/6.layout/2.container.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: A container lets you center and constrain the width of your content.
 ---
 
 ## Usage

diff --git a/docs/content/6.layout/3.skeleton.md b/docs/content/6.layout/3.skeleton.md
@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a placeholder while content is loading.
 ---
 
 ## Usage

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -36,5 +36,8 @@ export default defineNuxtConfig({
       '/api/_content/**': { isr: true, static: true },
       '/api/component-meta/**': { isr: true, static: true }
     }
+  },
+  routeRules: {
+    // '/getting-started': { swr: 100000 }
   }
 })