nuxt · benjamincanac · May 19, 2023 · May 17, 2023 · May 17, 2023 · May 17, 2023
diff --git a/docs/app.vue b/docs/app.vue
@@ -11,13 +11,13 @@
 
           <NuxtPage />
 
-          <hr class="border-gray-200 dark:border-gray-800 my-12">
+          <DocsPageFooter class="mt-12" />
 
-          <DocsPrevNext />
+          <hr class="border-gray-200 dark:border-gray-800 my-6">
 
-          <hr class="border-gray-200 dark:border-gray-800 my-12">
+          <DocsPrevNext />
 
-          <DocsPageFooter />
+          <DocsFooter class="mt-16" />
         </div>
 
         <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />

diff --git a/docs/components/docs/DocsFooter.vue b/docs/components/docs/DocsFooter.vue
@@ -0,0 +1,10 @@
+<template>
+  <footer class="flex items-center justify-end gap-1.5">
+    <div class="flex items-baseline gap-1.5 text-sm text-center text-gray-500 dark:text-gray-400">
+      Made by
+      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
+        <LogoLabs class="text-white w-14 h-auto" />
+      </NuxtLink>
+    </div>
+  </footer>
+</template>
diff --git a/docs/components/docs/DocsPageFooter.vue b/docs/components/docs/DocsPageFooter.vue
@@ -1,22 +1,15 @@
 <template>
-  <footer class="flex items-center justify-between gap-1.5">
+  <div class="flex items-center justify-between gap-1.5">
     <UButton
       v-if="page"
       :to="`https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page._file}`"
-      label="Edit on GitHub"
-      color="gray"
+      label="Edit this page on GitHub"
+      color="primary"
       variant="link"
       :padded="false"
-      trailing-icon="i-heroicons-arrow-top-right-on-square-20-solid"
+      icon="i-heroicons-arrow-top-right-on-square-20-solid"
     />
-
-    <div class="flex items-baseline gap-1.5 text-sm text-center text-gray-500 dark:text-gray-400">
-      Made by
-      <NuxtLink to="https://nuxtlabs.com" aria-label="NuxtLabs">
-        <LogoLabs class="text-white w-14 h-auto" />
-      </NuxtLink>
-    </div>
-  </footer>
+  </div>
 </template>
 
 <script setup lang="ts">

diff --git a/docs/components/docs/DocsPrevNext.vue b/docs/components/docs/DocsPrevNext.vue
@@ -1,8 +1,15 @@
 <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="i-heroicons-arrow-left-20-solid" />
     <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="i-heroicons-arrow-right-20-solid"
+      class="text-right"
+    />
   </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 border not-prose rounded-lg border-gray-200 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/25 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-500/50 dark:group-hover:ring-primary-400/50">
+      <UIcon :name="icon" class="w-5 h-5 text-gray-900 dark:text-gray-100 group-hover:text-primary-500 dark: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 card 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 }
   }
 })