mirror of
https://github.com/nuxt/ui.git
synced 2026-09-14 19:51:10 +08:00
Benjamin Canac
311 lines
12 KiB
Vue
311 lines
12 KiB
Vue
<script setup lang="ts">
|
|
import { joinURL } from 'ufo'
|
|
|
|
const { data: page } = await useAsyncData('index', () => queryCollection('index').first())
|
|
if (!page.value) {
|
|
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
|
|
}
|
|
|
|
const { url } = useSiteConfig()
|
|
|
|
useSeoMeta({
|
|
titleTemplate: `%s - Nuxt UI`,
|
|
title: page.value.title,
|
|
description: page.value.description,
|
|
ogTitle: `${page.value.title} - Nuxt UI`,
|
|
ogDescription: page.value.description,
|
|
ogImage: joinURL(url, '/og-image.png')
|
|
})
|
|
|
|
const { data: components } = await useAsyncData('index-components', () => {
|
|
return queryCollection('docs')
|
|
.where('path', 'LIKE', '/docs/components/%')
|
|
.where('extension', '=', 'md')
|
|
.select('path', 'title', 'description', 'category')
|
|
.all()
|
|
})
|
|
|
|
const { data: templates } = await useAsyncData('index-templates', () => queryCollection('templates').first(), {
|
|
transform: data => data?.templates?.filter(template => template.framework === 'nuxt') || []
|
|
})
|
|
|
|
const { data: module } = await useFetch('/api/module.json')
|
|
|
|
const { format } = Intl.NumberFormat('en', { notation: 'compact' })
|
|
|
|
const contributorsRef = ref(null)
|
|
const isContributorsInView = ref(false)
|
|
const isContributorsHovered = useElementHover(contributorsRef)
|
|
|
|
useIntersectionObserver(contributorsRef, ([entry]) => {
|
|
isContributorsInView.value = entry?.isIntersecting || false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<UMain v-if="page">
|
|
<UPageHero
|
|
orientation="horizontal"
|
|
:ui="{
|
|
container: 'pb-0 sm:pb-0 lg:py-0',
|
|
title: 'lg:mt-16',
|
|
links: 'lg:mb-16',
|
|
description: 'text-balance'
|
|
}"
|
|
>
|
|
<template #title>
|
|
The Intuitive <br> <span class="text-primary">Vue UI Library</span>
|
|
</template>
|
|
<template #description>
|
|
{{ page.hero.description }}
|
|
</template>
|
|
|
|
<template #links>
|
|
<UButton v-for="link of page.hero.links" :key="link.label" v-bind="link" size="xl" />
|
|
<div class="w-full my-6">
|
|
<USeparator class="w-1/2" type="dashed" />
|
|
</div>
|
|
<div class="flex flex-col gap-4">
|
|
<Motion
|
|
v-for="(feature, index) in page.hero.features"
|
|
:key="feature.title"
|
|
as-child
|
|
:initial="{ opacity: 0, transform: 'translateX(-10px)' }"
|
|
:while-in-view="{ opacity: 1, transform: 'translateX(0)' }"
|
|
:transition="{ delay: 0.2 + 0.4 * index }"
|
|
:in-view-options="{ once: true }"
|
|
>
|
|
<UPageFeature v-bind="feature" class="opacity-0" />
|
|
</Motion>
|
|
</div>
|
|
</template>
|
|
|
|
<LazySkyBg is-index />
|
|
|
|
<div class="h-[344px] lg:h-full lg:relative w-full lg:min-h-[calc(100vh-var(--ui-header-height)-1px)] overflow-hidden">
|
|
<UMarquee
|
|
pause-on-hover
|
|
:overlay="false"
|
|
:ui="{
|
|
root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full left-0 border-y lg:border-x lg:border-y-0 lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:flex-col',
|
|
content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content]'
|
|
}"
|
|
>
|
|
<ULink
|
|
v-for="component of components?.slice(0, 10)"
|
|
:key="component.path"
|
|
class="relative group/link aspect-video border-default w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
|
|
:to="component.path"
|
|
>
|
|
<UColorModeImage
|
|
:light="`${component.path.replace('/docs/components/', '/components/light/')}.png`"
|
|
:dark="`${component.path.replace('/docs/components/', '/components/dark/')}.png`"
|
|
:alt="`${component.title} preview`"
|
|
width="290"
|
|
height="163"
|
|
format="webp"
|
|
class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-default 2xl:border-y-0"
|
|
loading="lazy"
|
|
/>
|
|
<UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
|
|
</ULink>
|
|
</UMarquee>
|
|
|
|
<UMarquee
|
|
pause-on-hover
|
|
reverse
|
|
:overlay="false"
|
|
:ui="{
|
|
root: '[--gap:--spacing(4)] [--duration:40s] border-default absolute w-full mt-[180px] left-0 border-y lg:mt-auto lg:left-auto lg:border-y-0 lg:border-x lg:w-[calc(50%-6px)] 2xl:w-[320px] lg:right-0 lg:flex-col',
|
|
content: 'lg:w-auto lg:flex-col lg:animate-[marquee-vertical_var(--duration)_linear_infinite] lg:rtl:animate-[marquee-vertical-rtl_var(--duration)_linear_infinite] lg:h-[fit-content] lg:[animation-direction:reverse]'
|
|
}"
|
|
>
|
|
<ULink
|
|
v-for="component of components?.slice(10, 20)"
|
|
:key="component.path"
|
|
class="relative group/link aspect-video border-default w-[290px] xl:w-[330px] 2xl:w-[320px] 2xl:p-2 2xl:border-y"
|
|
:to="component.path"
|
|
>
|
|
<UColorModeImage
|
|
:light="`${component.path.replace('/docs/components/', '/components/light/')}.png`"
|
|
:dark="`${component.path.replace('/docs/components/', '/components/dark/')}.png`"
|
|
:alt="`${component.title} preview`"
|
|
width="290"
|
|
height="163"
|
|
format="webp"
|
|
class="hover:scale-105 lg:hover:scale-110 transition-transform aspect-video w-full border-x lg:border-x-0 lg:border-y border-default 2xl:border-y-0"
|
|
loading="lazy"
|
|
/>
|
|
<UBadge color="neutral" variant="outline" size="md" :label="component.title" class="hidden lg:block absolute mx-auto top-4 left-6 xl:left-4 group-hover/link:opacity-100 opacity-0 transition-all duration-300 pointer-events-none -translate-y-2 group-hover/link:translate-y-0" />
|
|
</ULink>
|
|
</UMarquee>
|
|
</div>
|
|
</UPageHero>
|
|
|
|
<USeparator />
|
|
|
|
<UPageSection :ui="{ container: 'lg:py-16' }">
|
|
<ul class="grid grid-cols-1 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 gap-y-6 lg:gap-x-8 lg:gap-y-8 xl:gap-y-10">
|
|
<Motion
|
|
v-for="(feature, index) in page?.features"
|
|
:key="feature.title"
|
|
as="li"
|
|
:initial="{ opacity: 0, transform: 'translateY(10px)' }"
|
|
:while-in-view="{ opacity: 1, transform: 'translateY(0)' }"
|
|
:transition="{ delay: 0.1 * index }"
|
|
:in-view-options="{ once: true }"
|
|
class="flex items-start gap-x-3 relative group"
|
|
>
|
|
<NuxtLink v-if="feature.to" :to="feature.to" class="absolute inset-0 z-10">
|
|
<span class="sr-only">Go to {{ feature.title }}</span>
|
|
</NuxtLink>
|
|
|
|
<div class="relative p-3">
|
|
<svg class="absolute inset-0" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<line x1="6.5" x2="6.5" y2="44" stroke="var(--ui-border)" />
|
|
<line x1="38.5" x2="38.5" y2="44" stroke="var(--ui-border)" />
|
|
<line y1="5.5" x2="44" y2="5.5" stroke="var(--ui-border)" />
|
|
<line y1="37.5" x2="44" y2="37.5" stroke="var(--ui-border)" />
|
|
<circle cx="6.53613" cy="5.45508" r="1.5" fill="var(--ui-border-accented)" />
|
|
<circle cx="38.5957" cy="5.45508" r="1.5" fill="var(--ui-border-accented)" />
|
|
<circle cx="6.53711" cy="37.4551" r="1.5" fill="var(--ui-border-accented)" />
|
|
<circle cx="38.5957" cy="37.4551" r="1.5" fill="var(--ui-border-accented)" />
|
|
</svg>
|
|
<UIcon :name="feature.icon" class="size-5 shrink-0" />
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h2 class="font-medium text-highlighted inline-flex items-center gap-x-1">
|
|
{{ feature.title }}
|
|
<UIcon v-if="feature.to" name="i-lucide-arrow-right" class="size-4 shrink-0 opacity-0 group-hover:opacity-100 transition-all duration-200 -translate-x-1 group-hover:translate-x-0" />
|
|
</h2>
|
|
<p class="text-sm text-muted">
|
|
{{ feature.description }}
|
|
</p>
|
|
</div>
|
|
</Motion>
|
|
</ul>
|
|
</UPageSection>
|
|
|
|
<USeparator />
|
|
|
|
<UPageSection
|
|
:title="page.design_system.title"
|
|
:description="page.design_system.description"
|
|
:features="page.design_system.features"
|
|
:links="page.design_system.links"
|
|
orientation="horizontal"
|
|
>
|
|
<MDC :value="page.design_system.code" cache-key="index-design-system-code" />
|
|
</UPageSection>
|
|
|
|
<USeparator />
|
|
|
|
<UPageSection
|
|
:title="page.component_customization.title"
|
|
:features="page.component_customization.features"
|
|
:links="page.component_customization.links"
|
|
orientation="horizontal"
|
|
>
|
|
<template #description>
|
|
<MDC :value="page.component_customization.description" cache-key="index-component-customization-description" />
|
|
</template>
|
|
|
|
<MDC :value="page.component_customization.code" cache-key="index-component-customization-code" />
|
|
</UPageSection>
|
|
|
|
<USeparator />
|
|
|
|
<UPageSection
|
|
:title="page.templates.title"
|
|
:description="page.templates.description"
|
|
:links="page.templates.links"
|
|
:features="page.templates.features"
|
|
orientation="horizontal"
|
|
>
|
|
<UCarousel
|
|
v-slot="{ item }"
|
|
loop
|
|
dots
|
|
fade
|
|
wheel-gestures
|
|
:contain-scroll="false"
|
|
:autoplay="{ delay: 3000 }"
|
|
:items="templates"
|
|
:ui="{
|
|
container: 'py-px',
|
|
viewport: 'px-px'
|
|
}"
|
|
>
|
|
<UPageCard
|
|
:to="item.links?.[0]?.to"
|
|
:icon="item.icon"
|
|
:title="item.title"
|
|
target="_blank"
|
|
variant="subtle"
|
|
class="group rounded-md"
|
|
:ui="{
|
|
container: 'p-4 sm:p-4',
|
|
wrapper: 'flex-row items-center gap-1.5',
|
|
leading: 'mb-0',
|
|
leadingIcon: 'text-highlighted'
|
|
}"
|
|
>
|
|
<UColorModeImage
|
|
:light="`/assets/templates/${item.framework}/${item.title.toLowerCase()}-light.png`"
|
|
:dark="`/assets/templates/${item.framework}/${item.title.toLowerCase()}-dark.png`"
|
|
:alt="`Template ${item.title} screenshot`"
|
|
width="620"
|
|
height="348"
|
|
loading="lazy"
|
|
class="rounded-lg w-full border border-default aspect-video"
|
|
/>
|
|
</UPageCard>
|
|
</UCarousel>
|
|
</UPageSection>
|
|
|
|
<USeparator />
|
|
|
|
<UPageSection
|
|
:title="page.community.title"
|
|
:description="page.community.description"
|
|
:links="page.community.links"
|
|
orientation="horizontal"
|
|
:ui="{ features: 'flex items-center gap-4 lg:gap-8' }"
|
|
class="border-b border-default"
|
|
>
|
|
<template #features>
|
|
<li>
|
|
<NuxtLink to="https://npm.chart.dev/@nuxt/ui" target="_blank" class="min-w-0 group">
|
|
<p class="text-4xl font-semibold truncate text-highlighted group-hover:text-primary transition-colors">
|
|
{{ format(module?.stats?.downloads ?? 0) }}+
|
|
</p>
|
|
<p class="text-muted text-sm truncate">monthly downloads</p>
|
|
</NuxtLink>
|
|
</li>
|
|
|
|
<li>
|
|
<NuxtLink to="https://github.com/nuxt/ui" target="_blank" class="min-w-0 group">
|
|
<p class="text-4xl font-semibold text-highlighted truncate group-hover:text-primary transition-colors">
|
|
{{ format(module?.stats?.stars ?? 0) }}+
|
|
</p>
|
|
<p class="text-muted text-sm truncate">GitHub stars</p>
|
|
</NuxtLink>
|
|
</li>
|
|
|
|
<li>
|
|
<NuxtLink to="https://github.com/nuxt/ui/graphs/contributors" target="_blank" class="min-w-0 group">
|
|
<p class="text-4xl font-semibold text-highlighted truncate group-hover:text-primary transition-colors">
|
|
250+
|
|
</p>
|
|
<p class="text-muted text-sm truncate">Contributors</p>
|
|
</NuxtLink>
|
|
</li>
|
|
</template>
|
|
|
|
<div ref="contributorsRef" class="p-4 sm:px-6 md:px-8 lg:px-12 xl:px-14 overflow-hidden flex relative">
|
|
<LazyHomeContributors :contributors="module?.contributors" :paused="!isContributorsInView || isContributorsHovered" />
|
|
</div>
|
|
</UPageSection>
|
|
</UMain>
|
|
</template>
|