From e59fe42cc9e4d852fb3b22335ef0998e930934cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Fri, 19 May 2023 10:33:09 +0200
Subject: [PATCH] docs: improve page descriptions and prev/next (#184)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/app.vue                                  |  8 ++---
 docs/components/docs/DocsFooter.vue           | 10 ++++++
 docs/components/docs/DocsPageFooter.vue       | 17 +++------
 docs/components/docs/DocsPrevNext.vue         | 13 +++++--
 docs/components/docs/DocsPrevNextCard.vue     | 36 +++++++++++++++++++
 docs/content/2.elements/1.avatar.md           |  1 +
 docs/content/2.elements/2.badge.md            |  1 +
 docs/content/2.elements/3.button.md           |  1 +
 docs/content/2.elements/4.dropdown.md         |  1 +
 docs/content/2.elements/5.icon.md             |  1 +
 docs/content/2.elements/6.kbd.md              |  1 +
 docs/content/3.forms/1.input.md               |  1 +
 docs/content/3.forms/2.textarea.md            |  1 +
 docs/content/3.forms/3.select.md              |  1 +
 docs/content/3.forms/4.select-menu.md         |  1 +
 docs/content/3.forms/5.checkbox.md            |  1 +
 docs/content/3.forms/6.radio.md               |  1 +
 docs/content/3.forms/7.toggle.md              |  1 +
 .../4.navigation/1.vertical-navigation.md     |  1 +
 .../content/4.navigation/2.command-palette.md |  1 +
 docs/content/5.overlays/1.modal.md            |  1 +
 docs/content/5.overlays/2.slideover.md        |  1 +
 docs/content/5.overlays/3.popover.md          |  1 +
 docs/content/5.overlays/4.tooltip.md          |  1 +
 docs/content/5.overlays/5.context-menu.md     |  1 +
 docs/content/5.overlays/6.notification.md     |  1 +
 docs/content/6.layout/1.card.md               |  1 +
 docs/content/6.layout/2.container.md          |  1 +
 docs/content/6.layout/3.skeleton.md           |  1 +
 docs/nuxt.config.ts                           |  3 ++
 30 files changed, 92 insertions(+), 19 deletions(-)
 create mode 100644 docs/components/docs/DocsFooter.vue
 create mode 100644 docs/components/docs/DocsPrevNextCard.vue

diff --git a/docs/app.vue b/docs/app.vue
index f72d0f71..1009301c 100644
--- 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" />
+
+          <hr class="border-gray-200 dark:border-gray-800 my-6">
 
           <DocsPrevNext />
 
-          <hr class="border-gray-200 dark:border-gray-800 my-12">
-
-          <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
new file mode 100644
index 00000000..80d2aa07
--- /dev/null
+++ 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
index 6744a18a..a7d61d68 100644
--- 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
index 94b427a7..fb9c2336 100644
--- 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
new file mode 100644
index 00000000..1e163f7f
--- /dev/null
+++ 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
index 7a936a72..820cd720 100644
--- 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
index 8cff72e6..e98f2f6b 100644
--- 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
index a037b3e9..51a378d7 100644
--- 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
index eecda917..5281d0aa 100644
--- 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
index dfaa6fa2..4ce3b34f 100644
--- 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
index 45db0e42..c75935f8 100644
--- 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
index a2a4c991..d3eb02ff 100644
--- 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
index 96d380a5..eda1e3c4 100644
--- 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
index f183b88b..a166e563 100644
--- 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
index 31248377..73ea4541 100644
--- 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
index 81a5dc68..55870530 100644
--- 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
index 13ec7927..8e94532b 100644
--- 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
index 4ad2f334..b8222611 100644
--- 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
index 5b7a0f1e..8a3e35e0 100644
--- 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
index 470f5cfd..81ac7a60 100644
--- 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
index 30b56a6e..f56a73bf 100644
--- 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
index 9df28339..99c970cf 100644
--- 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
index e0d32585..34ee5099 100644
--- 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
index 141af9f7..07b9b07c 100644
--- 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
index a3a8f996..48771ccd 100644
--- 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
index f1230a97..c4a89c53 100644
--- 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
index cbb4bd2a..4ddc6bfc 100644
--- 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
index 9adb60f4..cacb31d5 100644
--- 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
index 01ab6f50..4202f9c6 100644
--- 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
index a38007ed..9dbbf319 100644
--- 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 }
   }
 })