Skip to content

Commit 36355e6

Browse files
BobbieGoedeBobbieGoede
committed
feat: update @nuxt/ui and @nuxt/content to v3
1 parent a037972 commit 36355e6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+13308
-15528
lines changed

‎docs/.env.example

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Production license for @nuxt/ui-pro, get one at https://ui.nuxt.com/pro/purchase
2+
NUXT_UI_PRO_LICENSE=
3+
4+
# Public URL, used for OG Image when running nuxt generate
5+
NUXT_PUBLIC_SITE_URL=

‎docs/.gitignore

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Nuxt dev/build outputs
2+
.output
3+
.data
4+
.nuxt
5+
.nitro
6+
.cache
7+
dist
8+
9+
# Node dependencies
10+
node_modules
11+
12+
# Logs
13+
logs
14+
*.log
15+
16+
# Misc
17+
.DS_Store
18+
.fleet
19+
.idea
20+
21+
# Local env files
22+
.env
23+
.env.*
24+
!.env.example
25+
26+
# VSC
27+
.history

‎docs/app.config.ts

+42-12
Original file line numberDiff line numberDiff line change
@@ -136,46 +136,76 @@ for (const val of Object.values(motions)) {
136136
// @ts-expect-error not specific
137137
val[k][nestedK] = {}
138138
}
139-
}
140-
else {
139+
} else {
141140
// @ts-expect-error not specific
142141
val[k] = {}
143142
}
144143
}
145144
}
146145

147146
export default defineAppConfig({
147+
legacy: {
148+
ui: {
149+
primary: 'cyan',
150+
neutral: 'slate',
151+
},
152+
},
153+
default: {
154+
ui: {
155+
primary: 'cyan',
156+
neutral: 'zinc',
157+
},
158+
},
159+
theme: {
160+
radius: 0.25,
161+
},
148162
ui: {
149-
primary: 'cyan',
150-
gray: 'neutral',
163+
colors: {
164+
primary: 'cyan',
165+
neutral: 'zinc',
166+
},
151167
},
168+
uiPro: {
169+
footer: {
170+
bottom: {
171+
left: 'text-sm text-gray-500 dark:text-gray-400',
172+
wrapper: 'border-t border-gray-200 dark:border-gray-800',
173+
},
174+
},
175+
},
176+
seo: { siteName: '@vueuse/motion' },
152177
header: {
153178
search: true,
154179
colorMode: true,
155180
links: [
156181
{
157-
'icon': 'i-simple-icons-github',
158-
'to': 'https://github.com/vueuse/motion',
159-
'target': '_blank',
182+
icon: 'i-simple-icons-github',
183+
to: 'https://github.com/vueuse/motion',
184+
target: '_blank',
160185
'aria-label': 'VueUse Motion',
161186
},
162187
],
163188
},
164-
seo: { siteName: '@vueuse/motion' },
165189
footer: {
166190
credits: `Copyright © ${new Date().getFullYear()}`,
167191
colorMode: false,
168192
links: [
169193
{
170-
'icon': 'i-simple-icons-github',
171-
'to': 'https://github.com/vueuse/motion',
172-
'target': '_blank',
194+
icon: 'i-simple-icons-nuxtdotjs',
195+
to: 'https://nuxt.com',
196+
target: '_blank',
197+
'aria-label': 'Nuxt Website',
198+
},
199+
{
200+
icon: 'i-simple-icons-github',
201+
to: 'https://github.com/vueuse/motion',
202+
target: '_blank',
173203
'aria-label': 'VueUse Motion',
174204
},
175205
],
176206
},
177207
toc: {
178-
title: 'Table of Contents',
208+
title: 'On this page',
179209
bottom: {
180210
edit: 'https://github.com/vueuse/motion/edit/main/content',
181211
},

‎docs/app.vue

+39-35
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,82 @@
11
<script setup lang="ts">
2-
import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
3-
import type { PageLink } from '#ui-pro/types'
2+
import { mapContentNavigation } from '@nuxt/ui-pro/runtime/utils/content.js'
3+
import type { ContentNavigationItem } from '@nuxt/content'
4+
5+
const appConfig = useAppConfig()
6+
const radius = computed(
7+
() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`,
8+
)
49
5-
// Seo
6-
const { seo } = useAppConfig()
710
useHead({
811
htmlAttrs: { lang: 'en' },
12+
meta: [{ name: 'viewport', content: 'width=device-width, initial-scale=1' }],
913
link: [{ rel: 'icon', href: '/favicon.ico' }],
14+
style: [{ innerHTML: radius, id: 'nuxt-ui-radius', tagPriority: -2 }],
1015
})
16+
1117
useSeoMeta({
12-
titleTemplate: `%s - ${seo.siteName}`,
13-
ogSiteName: seo.siteName,
18+
titleTemplate: `%s - ${appConfig.seo.siteName}`,
19+
ogSiteName: appConfig.seo.siteName,
1420
twitterCard: 'summary_large_image',
1521
})
1622
1723
// Navigation Data
1824
const { data: navigation } = await useAsyncData('navigation', () =>
19-
fetchContentNavigation())
20-
provide('navigation', navigation)
25+
queryCollectionNavigation('docs'))
26+
27+
const nav = computed<ContentNavigationItem[]>(() =>
28+
mapContentNavigation(navigation.value),
29+
)
30+
provide('navigation', nav)
2131
2232
// Search
23-
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', {
24-
default: () => [],
25-
server: false,
26-
})
33+
const { data: files } = useAsyncData(
34+
'/api/search.json',
35+
() => queryCollectionSearchSections('docs'),
36+
{ server: false },
37+
)
2738
28-
// Header
39+
// // Header
2940
const route = useRoute()
30-
const links: PageLink[] = computed(() => [
41+
const links = computed<unknown[]>(() => [
3142
{
3243
label: 'Getting started',
3344
to: `/getting-started`,
3445
icon: 'i-heroicons-rocket-launch',
35-
active: route.path.startsWith('/getting-started'),
3646
},
3747
{
3848
label: 'Features',
39-
to: `/features/presets`,
40-
icon: 'i-heroicons-rocket-launch',
41-
active: route.path.startsWith('/features'),
49+
to: '/features',
50+
icon: 'i-heroicons-book-open',
4251
},
4352
{
44-
label: 'Api',
45-
to: `/api/use-motion`,
46-
icon: 'i-heroicons-rocket-launch',
47-
active: route.path.startsWith('/api'),
53+
label: 'API',
54+
to: '/api',
55+
icon: 'i-heroicons-code-bracket',
4856
},
4957
])
5058
</script>
5159

5260
<template>
53-
<div>
54-
<TheHeader :links="links" />
61+
<UApp>
62+
<NuxtLoadingIndicator />
63+
<Header :links="links" />
5564

5665
<NuxtLayout>
5766
<NuxtPage />
5867
</NuxtLayout>
5968

60-
<TheFooter />
69+
<Footer />
6170

6271
<ClientOnly>
6372
<LazyUContentSearch
6473
:files="files"
65-
:navigation="navigation ?? undefined"
66-
:links="links"
74+
:navigation="navigation"
75+
:multiple="true"
76+
:kbds="['meta', 'K']"
6777
/>
6878
</ClientOnly>
69-
70-
<UNotifications />
71-
</div>
79+
</UApp>
7280
</template>
7381

74-
<style>
75-
body {
76-
font-family: 'Inter var experimental', 'Inter var', 'Inter', sans-serif;
77-
}
78-
</style>
82+
<style></style>

‎docs/assets/css/main.css

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import 'tailwindcss';
2+
@import '@nuxt/ui-pro';
3+
4+
@theme {
5+
--container-8xl: 90rem;
6+
--font-sans: 'Public Sans', sans-serif;
7+
/* --font-sans: 'DM Sans', sans-serif; */
8+
9+
--color-green-50: #effdf5;
10+
--color-green-100: #d9fbe8;
11+
--color-green-200: #b3f5d1;
12+
--color-green-300: #75edae;
13+
--color-green-400: #00dc82;
14+
--color-green-500: #00c16a;
15+
--color-green-600: #00a155;
16+
--color-green-700: #007f45;
17+
--color-green-800: #016538;
18+
--color-green-900: #0a5331;
19+
--color-green-950: #052e16;
20+
}
21+
22+
:root {
23+
--ui-container: var(--container-8xl);
24+
}

‎docs/components/TheFooter.vue ‎docs/components/Footer.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const { footer } = useAppConfig()
1515
<UButton
1616
v-for="(link, index) of footer?.links"
1717
:key="index"
18-
v-bind="{ color: 'gray', variant: 'ghost', ...link }"
18+
v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
1919
/>
2020
</template>
2121
</template>

‎docs/components/Header.vue

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script setup lang="ts">
2+
import type { NavigationMenuItem } from '#ui/types'
3+
4+
const props = defineProps<{ links?: NavigationMenuItem[] }>()
5+
6+
const appConfig = useAppConfig()
7+
const { $currentDocsVersionNavigation } = useNuxtApp()
8+
</script>
9+
10+
<template>
11+
<UHeader :menu="{ shouldScaleBackground: true }">
12+
<template #left>
13+
<NuxtLink
14+
to="/"
15+
class="flex items-end gap-2 font-bold text-xl text-(--ui-text-highlighted) min-w-0 focus-visible:outline-(--ui-primary) shrink-0"
16+
>
17+
<Logo class="w-auto h-8 shrink-0" />
18+
</NuxtLink>
19+
</template>
20+
21+
<UNavigationMenu class="z-10" :items="links" variant="link" />
22+
23+
<template #right>
24+
<!-- <UTooltip text="Search" :kbds="['meta', 'K']"> -->
25+
<UContentSearchButton :label="null" />
26+
<!-- </UTooltip> -->
27+
28+
<UColorModeButton />
29+
30+
<template v-if="appConfig.header?.links">
31+
<UButton
32+
v-for="(link, index) of appConfig.header.links"
33+
:key="index"
34+
v-bind="{ color: 'neutral', variant: 'ghost', ...link }"
35+
/>
36+
</template>
37+
</template>
38+
39+
<template #body>
40+
<UNavigationMenu orientation="vertical" :items="links" class="-mx-2.5" />
41+
42+
<USeparator type="dashed" class="mt-4 mb-6" />
43+
44+
<UContentNavigation
45+
:navigation="$currentDocsVersionNavigation"
46+
highlight
47+
:ui="{ linkTrailingBadge: 'font-semibold uppercase' }"
48+
>
49+
<template #link-title="{ link }">
50+
<span class="inline-flex items-center gap-0.5">
51+
{{ link.title }}
52+
</span>
53+
</template>
54+
</UContentNavigation>
55+
</template>
56+
</UHeader>
57+
</template>

‎docs/components/Logo.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div style="display: flex; align-items: center">
3+
<img src="/logo.svg" class="w-auto h-8" style="margin-right: 0.5em" />
4+
<span class="text-primary" style="margin-right: 0.25em">VueUse</span>
5+
Motion
6+
</div>
7+
</template>
8+
9+
<style>
10+
:root {
11+
--logo-color: #003c3c;
12+
}
13+
14+
.dark {
15+
--logo-color: #ffffff;
16+
}
17+
</style>

‎docs/components/OgImage/OgImageDocs.vue

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts" setup>
22
defineOptions({
33
inheritAttrs: false,
4-
})
4+
});
55
66
defineProps({
77
title: {
@@ -14,9 +14,9 @@ defineProps({
1414
},
1515
headline: {
1616
type: String,
17-
default: '',
17+
default: "",
1818
},
19-
})
19+
});
2020
</script>
2121

2222
<template>
@@ -78,7 +78,7 @@ defineProps({
7878
</div>
7979

8080
<div class="absolute top-[192px] right-[128px]">
81-
<img src="/logo.svg" style="width: 256px; height: 256px">
81+
<img src="/logo.svg" style="width: 256px; height: 256px" />
8282
</div>
8383
<svg
8484
class="absolute top-[160px] right-[90px]"

0 commit comments

Comments
 (0)