docs: bump @nuxt-themes/ui-kit

This commit is contained in:
Benjamin Canac
2023-08-07 22:32:14 +02:00
parent 451e72a583
commit 16ac4a0533
7 changed files with 120 additions and 63 deletions

View File

@@ -1,39 +1,15 @@
<!-- eslint-disable vue/no-v-html -->
<template>
<div>
<UHeader>
<template #left>
<NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
<Logo class="w-8 h-8 text-primary" />
<span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
</NuxtLink>
</template>
<template #center>
<UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
</template>
<template #right>
<ColorPicker />
<UColorModeButton />
<USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
<USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
</template>
<template #links>
<UAsideAnchors :links="anchors" />
<UAsideLinks :links="links" />
</template>
</UHeader>
<Header />
<UMain>
<UContainer>
<UPage>
<template #left>
<UAside :links="links" :anchors="anchors" />
<UAside :links="anchors">
<UNavigationTree :links="mapContentNavigation(navigation)" />
</UAside>
</template>
<NuxtPage />
@@ -42,7 +18,7 @@
</UMain>
<ClientOnly>
<UDocsSearch :files="files" :links="links" />
<UDocsSearch :files="files" :navigation="navigation" />
</ClientOnly>
<UNotifications>
@@ -59,14 +35,14 @@
<script setup lang="ts">
const colorMode = useColorMode()
const { mapContentNavigation } = useElementsHelpers()
const { data: links } = await useAsyncData('navigation', () => fetchContentNavigation(), {
transform: (navigation) => mapContentLinks(navigation)
const { data: navigation } = await useLazyAsyncData('navigation', () => fetchContentNavigation(), {
default: () => []
})
const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
default: () => []
})
const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), { default: () => [] })
provide('links', links)
const anchors = [{
label: 'Documentation',
@@ -109,4 +85,8 @@ useSeoMeta({
twitterImage: '/social-preview.jpg',
twitterCard: 'summary_large_image'
})
// Provide
provide('navigation', navigation)
</script>

View File

@@ -0,0 +1,36 @@
<template>
<UHeader>
<template #left>
<NuxtLink to="/getting-started" class="flex items-end gap-1.5 font-bold text-xl text-gray-900 dark:text-white">
<Logo class="w-8 h-8 text-primary" />
<span class="hidden sm:block">NuxtLabs</span><span class="sm:text-primary">UI</span>
</NuxtLink>
</template>
<template #center>
<UDocsSearchButton class="ml-1.5 flg:w-64 xl:w-96" />
</template>
<template #right>
<ColorPicker />
<UColorModeButton />
<USocialButton to="https://twitter.com/nuxtlabs" target="_blank" icon="i-simple-icons-twitter" class="hidden lg:inline-flex" />
<USocialButton to="https://github.com/nuxtlabs/ui" target="_blank" icon="i-simple-icons-github" class="hidden lg:inline-flex" />
</template>
<template #panel>
<UNavigationTree :links="mapContentNavigation(navigation)" />
</template>
</UHeader>
</template>
<script setup lang="ts">
import type { NavItem } from '@nuxt/content/dist/runtime/types'
const { mapContentNavigation } = useElementsHelpers()
const navigation = inject<Ref<NavItem[]>>('navigation')
</script>

View File

@@ -1,11 +1,11 @@
<script setup>
const commandPaletteRef = ref()
const links = inject('links')
const navigation = inject('navigation')
const { data: files } = await useLazyAsyncData('search', () => queryContent().where({ _type: 'markdown' }).find(), { default: () => [] })
const groups = computed(() => links.value.map(item => ({
const groups = computed(() => navigation.value.map(item => ({
key: item.to,
label: item.label,
commands: files.value.filter(file => file._path.startsWith(item.to)).map(file => ({

43
docs/error.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<div>
<Header />
<UContainer>
<UMain>
<UPage>
<UPageError :error="error" />
</UPage>
</UMain>
</UContainer>
<ClientOnly>
<UDocsSearch :files="files" :navigation="navigation" />
</ClientOnly>
<UNotifications />
</div>
</template>
<script setup lang="ts">
import type { NuxtError } from '#app'
useSeoMeta({
title: 'Page not found',
description: 'We are sorry but this page could not be found.'
})
defineProps<{
error: NuxtError
}>()
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation(), {
default: () => []
})
const { data: files } = await useLazyAsyncData('files', () => queryContent().where({ _type: 'markdown', navigation: { $ne: false } }).find(), {
default: () => []
})
// Provide
provide('navigation', navigation)
</script>

View File

@@ -7,7 +7,7 @@
"devDependencies": {
"@iconify-json/heroicons": "latest",
"@iconify-json/simple-icons": "latest",
"@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a",
"@nuxt-themes/ui-kit": "npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91",
"@nuxt/content": "^2.7.2",
"@nuxt/devtools": "^0.6.7",
"@nuxt/eslint-config": "^0.1.1",

View File

@@ -1,21 +1,15 @@
<template>
<UPage v-if="page">
<UPageHeader v-bind="page" :headline="headline" />
<UPage>
<UPageHeader :title="page.title" :description="page.description" :links="page.links" :headline="headline" />
<UPageBody prose>
<ContentRenderer v-if="page && page.body" :value="page" />
<ContentRenderer v-if="page.body" :value="page" />
<div class="mt-12 not-prose">
<UButton
:to="githubLink"
variant="link"
icon="i-heroicons-pencil-square"
label="Edit this page on GitHub"
:padded="false"
/>
<UButton :to="githubLink" variant="link" icon="i-heroicons-pencil-square" label="Edit this page on GitHub" :padded="false" />
</div>
<hr v-if="surround?.length" class="border-gray-200 dark:border-gray-800 my-8">
<hr v-if="surround?.length" class="my-8">
<UDocsSurround :surround="surround" />
@@ -26,25 +20,24 @@
<UDocsToc :links="page.body.toc.links" />
</template>
</UPage>
<UPageError v-else />
</template>
<script setup lang="ts">
const route = useRoute()
const { findPageHeadline } = useElementsHelpers()
const { data: page } = await useAsyncData(`docs-${route.path}`, () => queryContent(route.path).findOne())
if (!page.value) {
throw createError({ statusCode: 404, statusMessage: 'Page not found' })
}
const { data: surround } = await useAsyncData(`docs-${route.path}-surround`, () => queryContent()
.where({ _extension: 'md', navigation: { $ne: false } })
.findSurround(route.path.endsWith('/') ? route.path.slice(0, -1) : route.path)
)
if (process.server && !page.value) {
const event = useRequestEvent()
setResponseStatus(event, 404)
}
useContentHead(page)
const githubLink = computed(() => `https://github.com/nuxtlabs/ui/edit/dev/docs/content/${page?.value?._file}`)
const headline = computed(() => page.value._dir?.title ? page.value._dir.title : useLowerCase(page.value._dir))
const headline = computed(() => findPageHeadline(page.value))
</script>

19
pnpm-lock.yaml generated
View File

@@ -107,10 +107,10 @@ importers:
version: 1.1.11
'@iconify-json/simple-icons':
specifier: latest
version: 1.1.62
version: 1.1.63
'@nuxt-themes/ui-kit':
specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a
version: /@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
specifier: npm:@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91
version: /@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4)
'@nuxt/content':
specifier: ^2.7.2
version: 2.7.2(rollup@3.26.2)
@@ -1258,8 +1258,8 @@ packages:
dependencies:
'@iconify/types': 2.0.0
/@iconify-json/simple-icons@1.1.62:
resolution: {integrity: sha512-idHWbDrd9HKtZq9XBJyVN5+QCxJ+oO4BJeJtNNi9GfFSgoA2ig0LZt7adj9uZ/zzEX0i5OY37OpuotkeFRCWfg==}
/@iconify-json/simple-icons@1.1.63:
resolution: {integrity: sha512-aIbo99YLjwZ53XxU9HC+CO9Br9H0vRuGmq8b0TOaGA1g7HX2ZlpmzPvWAte5xbmbohfRzAMX/OVsFhOT+CL+Aw==}
dependencies:
'@iconify/types': 2.0.0
dev: true
@@ -1447,8 +1447,8 @@ packages:
- supports-color
dev: true
/@nuxt-themes/ui-kit-edge@0.0.1-28178970.ce8b67a(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
resolution: {integrity: sha512-DgrTgcNV4rKVKe+esFjgsGb7janfEESJ6QdNnQh+G1sY8jXJoNdBXSLH8/yZvSBPBPi39THntZEudL2DubXXnA==}
/@nuxt-themes/ui-kit-edge@0.0.1-28190664.e085e91(@nuxt/content@2.7.2)(@nuxthq/ui@)(vue@3.3.4):
resolution: {integrity: sha512-O3csaribtIrr38DQadB5z79z2OOSPVHDoIlekWfs5oNqvWAf3dshFvayUG3WPOQVdR1Uitt8DwU7ZoZIjTRo2A==}
peerDependencies:
'@nuxt/content': ^2.7.2
'@nuxthq/ui': npm:@nuxthq/ui-edge@latest
@@ -1457,6 +1457,7 @@ packages:
'@nuxthq/ui': 'link:'
'@vueuse/core': 10.3.0(vue@3.3.4)
lodash-es: 4.17.21
tailwind-merge: 1.14.0
transitivePeerDependencies:
- '@vue/composition-api'
- vue
@@ -10871,6 +10872,10 @@ packages:
- supports-color
dev: false
/tailwind-merge@1.14.0:
resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
dev: true
/tailwindcss@3.3.3:
resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
engines: {node: '>=14.0.0'}