Skip to content

Commit b598e08

Browse files
benjamincanacbenjamincanac
authored
docs(community): add page (#5119)
1 parent 861f5ef commit b598e08

Some content is hidden

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

50 files changed

+365
-203
lines changed

‎docs/app/composables/useFooter.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ export function useFooter() {
88
}, {
99
label: 'Showcase',
1010
to: '/showcase'
11+
}, {
12+
label: 'Community',
13+
to: '/community'
1114
}, {
1215
label: 'Team',
1316
to: '/team'

‎docs/app/composables/useHeader.ts‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -16,30 +16,7 @@ export function useHeader() {
1616
to: '/showcase'
1717
}, {
1818
label: 'Community',
19-
children: [{
20-
label: 'Team',
21-
description: 'Meet the team building and maintaining Nuxt UI.',
22-
icon: 'i-lucide-users',
23-
to: '/team'
24-
}, {
25-
label: 'Devtools Integration',
26-
description: 'Integrate Nuxt UI with Nuxt Devtools with Compodium.',
27-
icon: 'i-lucide-code',
28-
to: 'https://github.com/romhml/compodium',
29-
target: '_blank'
30-
}, {
31-
label: 'Raycast Extension',
32-
description: 'Access Nuxt UI components without leaving your editor.',
33-
icon: 'i-simple-icons-raycast',
34-
to: 'https://www.raycast.com/HugoRCD/nuxt',
35-
target: '_blank'
36-
}, {
37-
label: 'Figma to Code',
38-
description: 'Convert Figma designs to Nuxt UI code.',
39-
icon: 'i-simple-icons-figma',
40-
to: 'https://github.com/Justineo/tempad-dev-plugin-nuxt-ui',
41-
target: '_blank'
42-
}]
19+
to: '/community'
4320
}, {
4421
label: 'Releases',
4522
to: '/releases'
@@ -77,6 +54,10 @@ export function useHeader() {
7754
label: 'Showcase',
7855
icon: 'i-lucide-presentation',
7956
to: '/showcase'
57+
}, {
58+
label: 'Community',
59+
icon: 'i-lucide-globe',
60+
to: '/community'
8061
}, {
8162
label: 'Team',
8263
icon: 'i-lucide-users',

‎docs/app/composables/useSearch.ts‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,29 +31,34 @@ export function useSearch() {
3131
icon: 'i-simple-icons-figma',
3232
to: '/figma'
3333
}, {
34-
icon: 'i-lucide-panels-top-left',
3534
label: 'Templates',
3635
description: 'Explore official templates built with Nuxt UI.',
36+
icon: 'i-lucide-panels-top-left',
3737
to: '/templates'
3838
}, {
39-
icon: 'i-lucide-presentation',
4039
label: 'Showcase',
4140
description: 'Explore some of the amazing projects built with Nuxt UI.',
41+
icon: 'i-lucide-presentation',
4242
to: '/showcase'
4343
}, {
44-
icon: 'i-lucide-newspaper',
45-
label: 'Releases',
46-
description: 'Stay up to date with the newest features, enhancements, and fixes for Nuxt UI.',
47-
to: '/releases'
44+
label: 'Community',
45+
description: 'Explore the amazing projects built around Nuxt UI.',
46+
icon: 'i-lucide-globe',
47+
to: '/community'
4848
}, {
4949
label: 'Team',
5050
description: 'Meet the team building and maintaining Nuxt UI.',
5151
icon: 'i-lucide-users',
5252
to: '/team'
53+
}, {
54+
label: 'Releases',
55+
description: 'Stay up to date with the newest features, enhancements, and fixes for Nuxt UI.',
56+
icon: 'i-lucide-newspaper',
57+
to: '/releases'
5358
}, {
5459
label: 'GitHub',
55-
icon: 'i-simple-icons-github',
5660
description: 'Check out the Nuxt UI repository and follow development on GitHub.',
61+
icon: 'i-simple-icons-github',
5762
to: 'https://github.com/nuxt/ui/releases',
5863
target: '_blank'
5964
}])

‎docs/app/pages/community.vue‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup lang="ts">
2+
const { data: page } = await useAsyncData('community', () => queryCollection('community').first())
3+
if (!page.value) {
4+
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
5+
}
6+
7+
useSeoMeta({
8+
titleTemplate: '%s - Nuxt UI',
9+
title: page.value.title,
10+
description: page.value.description,
11+
ogTitle: `${page.value.title} - Nuxt UI`,
12+
ogDescription: page.value.description
13+
})
14+
15+
defineOgImageComponent('Docs')
16+
</script>
17+
18+
<template>
19+
<div v-if="page">
20+
<UPageHero
21+
:title="page.hero.title"
22+
:description="page.hero.description"
23+
class="md:border-b border-default"
24+
:ui="{
25+
container: 'relative lg:py-32'
26+
}"
27+
>
28+
<template #top>
29+
<div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
30+
</template>
31+
32+
<LazyStarsBg />
33+
34+
<div aria-hidden="true" class="hidden md:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
35+
</UPageHero>
36+
37+
<UPageSection :ui="{ container: '!py-0' }">
38+
<div class="pb-16 sm:pb-24 lg:pb-32 md:border-x border-default">
39+
<UPageGrid class="gap-px">
40+
<UPageCard
41+
v-for="item in page.items"
42+
:key="item.label"
43+
:title="item.label"
44+
:description="item.description"
45+
:to="item.to"
46+
target="_blank"
47+
class="rounded-none group"
48+
:ui="{ footer: 'pointer-events-auto z-[1]' }"
49+
>
50+
<template #leading>
51+
<UAvatar v-bind="item.avatar" size="3xl" class="mx-auto" loading="lazy" />
52+
</template>
53+
54+
<template v-if="item.user" #footer>
55+
<UButton
56+
:label="item.user.name"
57+
:avatar="item.user.avatar"
58+
:to="item.user.to"
59+
target="_blank"
60+
size="sm"
61+
color="neutral"
62+
variant="outline"
63+
class="ring-default group-hover:ring-accented transition bg-transparent"
64+
/>
65+
</template>
66+
</UPageCard>
67+
</UPageGrid>
68+
</div>
69+
</UPageSection>
70+
</div>
71+
</template>

‎docs/app/pages/docs/[...slug].vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const communityLinks = computed(() => [{
101101
:key="link.label"
102102
color="neutral"
103103
variant="outline"
104-
:target="link.to.startsWith('http') ? '_blank' : undefined"
104+
:target="link.to?.startsWith('http') ? '_blank' : undefined"
105105
v-bind="link"
106106
>
107107
<template v-if="link.avatar" #leading>

‎docs/app/pages/figma.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -117,11 +117,12 @@ onMounted(async () => {
117117
Sarah
118118
</UBadge>
119119
</div>
120+
120121
<UPageHero
121122
:links="page.hero.links"
122123
class="relative"
123124
:ui="{
124-
container: 'relative !pb-0'
125+
container: 'relative !pb-0 lg:py-32'
125126
}"
126127
>
127128
<template #title>
@@ -156,9 +157,8 @@ onMounted(async () => {
156157
</UButton>
157158
</div>
158159
</div>
159-
<Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
160-
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
161-
</Motion>
160+
161+
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
162162
</UPageHero>
163163
<UPageSection v-bind="page.features1" :ui="{ container: 'py-16 sm:py-16 lg:py-16', features: 'mt-0' }" class="border-y border-default" />
164164
<UPageCTA

‎docs/app/pages/index.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ if (!page.value) {
99
const { url } = useSiteConfig()
1010
1111
useSeoMeta({
12-
titleTemplate: `%s - Nuxt UI`,
12+
titleTemplate: '%s - Nuxt UI',
1313
title: page.value.title,
1414
description: page.value.description,
1515
ogTitle: `${page.value.title} - Nuxt UI`,
@@ -26,7 +26,7 @@ const { data: components } = await useAsyncData('index-components', () => {
2626
})
2727
2828
const { data: templates } = await useAsyncData('index-templates', () => queryCollection('templates').first(), {
29-
transform: data => data?.templates?.filter(template => template.framework === 'nuxt') || []
29+
transform: data => data?.items?.filter(template => template.framework === 'nuxt') || []
3030
})
3131
3232
const { data: module } = await useFetch('/api/module.json')
@@ -43,7 +43,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
4343
</script>
4444

4545
<template>
46-
<UMain v-if="page">
46+
<div v-if="page">
4747
<UPageHero
4848
orientation="horizontal"
4949
:ui="{
@@ -319,5 +319,5 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
319319
<LazyHomeContributors :contributors="module?.contributors" :paused="!isContributorsInView || isContributorsHovered" />
320320
</div>
321321
</UPageSection>
322-
</UMain>
322+
</div>
323323
</template>

‎docs/app/pages/releases.vue‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,19 @@
11
<script setup lang="ts">
2+
const { data: page } = await useAsyncData('releases', () => queryCollection('releases').first())
3+
if (!page.value) {
4+
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
5+
}
6+
7+
useSeoMeta({
8+
titleTemplate: '%s - Nuxt UI',
9+
title: page.value.title,
10+
description: page.value.description,
11+
ogTitle: `${page.value.title} - Nuxt UI`,
12+
ogDescription: page.value.description
13+
})
14+
15+
defineOgImageComponent('Docs')
16+
217
const { data: versions } = await useFetch('https://ungh.cc/repos/nuxt/ui/releases', {
318
transform: (data: {
419
releases: {
@@ -19,25 +34,26 @@ const { data: versions } = await useFetch('https://ungh.cc/repos/nuxt/ui/release
1934
</script>
2035

2136
<template>
22-
<div class="relative">
37+
<div v-if="page">
2338
<UPageHero
24-
title="Releases"
25-
description="Stay up to date with the newest features, enhancements, and fixes for Nuxt UI."
39+
:title="page.hero.title"
40+
:description="page.hero.description"
41+
:links="page.hero.links"
2642
class="md:border-b border-default"
2743
:ui="{
28-
container: 'relative'
44+
container: 'relative lg:py-32'
2945
}"
3046
>
47+
<template #top>
48+
<div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
49+
</template>
50+
3151
<LazyStarsBg />
3252

3353
<div aria-hidden="true" class="hidden md:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
3454
</UPageHero>
3555

36-
<UPageSection
37-
:ui="{
38-
container: '!py-0'
39-
}"
40-
>
56+
<UPageSection :ui="{ container: '!py-0' }">
4157
<div class="py-4 md:py-8 lg:py-16 md:border-x border-default">
4258
<UContainer class="max-w-5xl">
4359
<UChangelogVersions>

‎docs/app/pages/showcase.vue‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,24 @@ if (!page.value) {
55
}
66
77
useSeoMeta({
8-
titleTemplate: `%s - Nuxt UI`,
8+
titleTemplate: '%s - Nuxt UI',
99
title: page.value.title,
1010
description: page.value.description,
1111
ogTitle: `${page.value.title} - Nuxt UI`,
1212
ogDescription: page.value.description
1313
})
1414
15-
defineOgImageComponent('Docs', {
16-
headline: 'Community'
17-
})
15+
defineOgImageComponent('Docs')
1816
</script>
1917

2018
<template>
21-
<UMain v-if="page">
19+
<div v-if="page">
2220
<UPageHero
2321
:title="page.hero.title"
2422
:description="page.hero.description"
2523
:links="page.hero.links"
2624
:ui="{
27-
wrapper: 'lg:px-12',
28-
container: 'relative'
25+
container: 'relative lg:py-32'
2926
}"
3027
>
3128
<template #top>
@@ -35,6 +32,10 @@ defineOgImageComponent('Docs', {
3532
<LazyStarsBg />
3633

3734
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
35+
</UPageHero>
36+
37+
<UPageSection :ui="{ container: '!pt-0 relative' }">
38+
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-default inset-0 mx-4 sm:mx-6 lg:mx-8" />
3839

3940
<div class="border-l border-t border-default">
4041
<ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 items-start justify-center divide-y divide-x divide-default">
@@ -67,6 +68,6 @@ defineOgImageComponent('Docs', {
6768
</li>
6869
</ul>
6970
</div>
70-
</UPageHero>
71-
</UMain>
71+
</UPageSection>
72+
</div>
7273
</template>

‎docs/app/pages/team.vue‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<script setup lang="ts">
2-
const title = 'Meet the Team'
3-
const description = 'The development of Nuxt UI is led by a community of developers from all over the world.'
2+
const { data: page } = await useAsyncData('team', () => queryCollection('team').first())
3+
if (!page.value) {
4+
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
5+
}
46
57
useSeoMeta({
68
titleTemplate: '%s - Nuxt UI',
7-
title,
8-
description,
9-
ogTitle: `${title} - Nuxt UI`,
10-
ogDescription: description
9+
title: page.value.title,
10+
description: page.value.description,
11+
ogTitle: `${page.value.title} - Nuxt UI`,
12+
ogDescription: page.value.description
1113
})
1214
13-
defineOgImageComponent('Docs', {
14-
headline: 'Community'
15-
})
15+
defineOgImageComponent('Docs')
1616
1717
const { data: module } = await useFetch('/api/module.json')
1818
@@ -32,13 +32,15 @@ const icons = {
3232
</script>
3333

3434
<template>
35-
<UMain>
35+
<div v-if="page">
3636
<UPageHero
37-
:title="title"
38-
:description="description"
37+
:title="page.hero.title"
38+
:description="page.hero.description"
3939
class="relative"
40-
orientation="vertical"
41-
:ui="{ title: 'text-balance', container: 'relative' }"
40+
:ui="{
41+
title: 'text-balance',
42+
container: 'relative lg:py-32'
43+
}"
4244
>
4345
<template #top>
4446
<div class="absolute z-[-1] rounded-full bg-primary blur-[300px] size-60 sm:size-80 transform -translate-x-1/2 left-1/2 -translate-y-80" />
@@ -154,5 +156,5 @@ const icons = {
154156
</UPageCard>
155157
</UPageGrid>
156158
</UPageSection>
157-
</UMain>
159+
</div>
158160
</template>

0 commit comments

Comments
 (0)