docs: improve page descriptions and prev/next (#184)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

docs/app.vue

@@ -11,13 +11,13 @@
 
           <NuxtPage />
 
-          <hr class="border-gray-200 dark:border-gray-800 my-12">
+          <DocsPageFooter class="mt-12" />
+
+          <hr class="border-gray-200 dark:border-gray-800 my-6">
 
           <DocsPrevNext />
 
-          <hr class="border-gray-200 dark:border-gray-800 my-12">
+          <DocsFooter class="mt-16" />
-
-          <DocsPageFooter />
         </div>
 
         <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />

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>

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"
+      label="Edit this page on GitHub"
-      color="gray"
+      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>
-    <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>
 
 <script setup lang="ts">

docs/components/docs/DocsPrevNext.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="flex items-center justify-between">
+  <div class="grid gap-8 sm:grid-cols-2">
-    <UButton v-if="prev" :label="prev.navigation?.title || prev.title" :to="prev._path" icon="i-heroicons-arrow-small-left-20-solid" color="white" />
+    <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>
 

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>

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

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

docs/content/2.elements/3.button.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Create a button with icon or link capabilities.
 ---
 
 ## Usage

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'

docs/content/2.elements/5.icon.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an icon from Iconify library.
 ---
 
 ## Usage

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'
 ---

docs/content/3.forms/1.input.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display an input field.
 ---
 
 ## Usage

docs/content/3.forms/2.textarea.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a textarea field.
 ---
 
 ## Usage

docs/content/3.forms/3.select.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a select field.
 ---
 
 ## Usage

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'

docs/content/3.forms/5.checkbox.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a checkbox field.
 ---
 
 ## Usage

docs/content/3.forms/6.radio.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a radio field.
 ---
 
 ## Usage

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'

docs/content/4.navigation/1.vertical-navigation.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a vertical navigation.
 ---
 
 ## Usage

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'

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'

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'

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'

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

docs/content/5.overlays/5.context-menu.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a menu that appears on right click.
 ---
 
 ## Usage

docs/content/5.overlays/6.notification.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a toast notification in your app.
 ---
 
 ## Usage

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

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

docs/content/6.layout/3.skeleton.md

@@ -1,5 +1,6 @@
 ---
 github: true
+description: Display a placeholder while content is loading.
 ---
 
 ## Usage

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 }
   }
 })