mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 20:19:34 +01:00
docs: improve page descriptions and prev/next (#184)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sébastien Chopin
GitHub
@@ -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" />
|
||||
|
||||
10
docs/components/docs/DocsFooter.vue
Normal file
10
docs/components/docs/DocsFooter.vue
Normal file
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -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> </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>
|
||||
|
||||
|
||||
36
docs/components/docs/DocsPrevNextCard.vue
Normal file
36
docs/components/docs/DocsPrevNextCard.vue
Normal file
@@ -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>
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display an image that represents a resource or a group of resources.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a short text to represent a status or a category.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Create a button with icon or link capabilities.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display an icon from Iconify library.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
github: true
|
||||
title: 'Keyboard Key'
|
||||
description: Display a keyboard key in a text block.
|
||||
navigation:
|
||||
title: 'Kbd'
|
||||
---
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display an input field.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a textarea field.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a select field.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a select menu with advanced features.
|
||||
headlessui:
|
||||
label: 'Listbox'
|
||||
to: 'https://headlessui.com/vue/listbox'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a checkbox field.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a radio field.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a toggle field.
|
||||
headlessui:
|
||||
label: 'Switch'
|
||||
to: 'https://headlessui.com/vue/switch'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a vertical navigation.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Add a customizable command palette to your app.
|
||||
headlessui:
|
||||
label: 'Combobox'
|
||||
to: 'https://headlessui.com/vue/combobox'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a modal within your application.
|
||||
headlessui:
|
||||
label: 'Dialog'
|
||||
to: 'https://headlessui.com/vue/dialog'
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -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'
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display content that appears on hover next to an element.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a menu that appears on right click.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a toast notification in your app.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a card for content with a header, body and footer.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: A container lets you center and constrain the width of your content.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
---
|
||||
github: true
|
||||
description: Display a placeholder while content is loading.
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -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 }
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user