mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-20 06:51:46 +01:00
docs(home): improve community section (#1891)
This commit is contained in:
Benjamin Canac
GitHub
34
docs/components/Gradient.vue
Normal file
34
docs/components/Gradient.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<svg viewBox="0 0 1440 181" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<mask id="path-1-inside-1_1086_7239" fill="white">
|
||||
<path d="M0 0H1440V181H0V0Z" />
|
||||
</mask>
|
||||
<path d="M0 0H1440V181H0V0Z" fill="url(#paint0_linear_1086_7239)" fill-opacity="0.22" />
|
||||
<path d="M0 2H1440V-2H0V2Z" fill="url(#paint1_linear_1086_7239)" mask="url(#path-1-inside-1_1086_7239)" />
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_1086_7239"
|
||||
x1="720"
|
||||
y1="0"
|
||||
x2="720"
|
||||
y2="181"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="rgb(var(--color-primary-DEFAULT))" />
|
||||
<stop offset="1" stop-color="rgb(var(--color-primary-DEFAULT))" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="paint1_linear_1086_7239"
|
||||
x1="0"
|
||||
y1="90.5"
|
||||
x2="1440"
|
||||
y2="90.5"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="rgb(var(--color-primary-DEFAULT))" stop-opacity="0" />
|
||||
<stop offset="0.395" stop-color="rgb(var(--color-primary-DEFAULT))" />
|
||||
<stop offset="1" stop-color="rgb(var(--color-primary-DEFAULT))" stop-opacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</template>
|
||||
131
docs/components/home/HomeContributors.vue
Normal file
131
docs/components/home/HomeContributors.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<script setup lang="ts">
|
||||
import { breakpointsTailwind } from '@vueuse/core'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
contributors: {
|
||||
username: string
|
||||
}[]
|
||||
level?: number
|
||||
max?: number
|
||||
}>(), {
|
||||
level: 0,
|
||||
max: 4
|
||||
})
|
||||
|
||||
const contributors = computed(() => props.contributors.slice(0, 5))
|
||||
|
||||
const el = ref(null)
|
||||
const { width } = useElementSize(el)
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
|
||||
const smallerThanSm = breakpoints.smaller('sm')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="isolate rounded-full relative circle w-full aspect-[1/1] p-8 sm:p-12 md:p-14 lg:p-10 xl:p-16 before:absolute before:inset-px before:bg-white dark:before:bg-gradient-to-b dark:before:from-gray-950 dark:before:to-gray-900 before:rounded-full z-[--level]"
|
||||
:style="{
|
||||
'--duration': `${((level + 1) * 5)}s`,
|
||||
'--level': level + 1
|
||||
}"
|
||||
>
|
||||
<HomeContributors
|
||||
v-if="(level + 1) < max"
|
||||
:max="max"
|
||||
:level="level + 1"
|
||||
:contributors="props.contributors.slice(5)"
|
||||
/>
|
||||
|
||||
<div
|
||||
ref="el"
|
||||
class="avatars absolute inset-0 grid place-items-center"
|
||||
:style="{
|
||||
'--total': contributors.length,
|
||||
'--offset': `${width / 2}px`
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-for="(contributor, index) in contributors"
|
||||
:key="contributor.username"
|
||||
:style="{
|
||||
'--index': index + 1
|
||||
}"
|
||||
class="avatar flex absolute"
|
||||
>
|
||||
<UTooltip :text="contributor.username">
|
||||
<UAvatar
|
||||
:alt="contributor.username"
|
||||
:src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
|
||||
:srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
|
||||
class="ring-2 ring-gray-200 dark:ring-gray-700 lg:hover:ring-gray-900 dark:lg:hover:ring-white transition"
|
||||
width="40"
|
||||
height="40"
|
||||
:size="smallerThanSm ? 'xs' : 'sm'"
|
||||
loading="lazy"
|
||||
>
|
||||
<NuxtLink :to="`https://github.com/${contributor.username}`" :aria-label="contributor.username" target="_blank" class="focus:outline-none" tabindex="-1">
|
||||
<span class="absolute inset-0" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</UAvatar>
|
||||
</UTooltip>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.circle:after {
|
||||
--angle: 0deg;
|
||||
--border-color: rgb(var(--color-gray-200));
|
||||
--highlight-color: rgb(var(--color-gray-700));
|
||||
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: -1px;
|
||||
opacity: 1;
|
||||
border-radius: 9999px;
|
||||
z-index: -1;
|
||||
background: var(--border-color);
|
||||
|
||||
@supports (background: paint(houdini)) {
|
||||
background: linear-gradient(var(--angle), var(--border-color), var(--border-color), var(--border-color), var(--border-color), var(--highlight-color));
|
||||
animation: var(--duration) rotate linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.dark .circle:after {
|
||||
--border-color: rgb(var(--color-gray-700));
|
||||
--highlight-color: white;
|
||||
}
|
||||
|
||||
.avatars {
|
||||
--angle: calc(var(--level) * 36deg);
|
||||
|
||||
transform: rotate(var(--angle));
|
||||
animation: calc(var(--duration) + 60s) rotate linear infinite;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
--degrees: calc(var(--index) * (360deg / var(--total)));
|
||||
--transformX: calc(cos(var(--degrees)) * var(--offset));
|
||||
--transformY: calc(sin(var(--degrees)) * var(--offset));
|
||||
|
||||
transform: translate(var(--transformX), var(--transformY)) rotate(calc(360deg - var(--angle)));
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
to {
|
||||
--angle: 360deg;
|
||||
}
|
||||
}
|
||||
|
||||
@property --angle {
|
||||
syntax: '<angle>';
|
||||
initial-value: 0deg;
|
||||
inherits: true;
|
||||
}
|
||||
</style>
|
||||
@@ -31,7 +31,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8">
|
||||
<ULandingGrid ref="section" class="lg:grid-cols-10 lg:gap-8 overflow-hidden p-px">
|
||||
<div :ref="(el) => (refs[1] = el)" class="col-span-8 flex items-center animate-top">
|
||||
<RangeExample />
|
||||
</div>
|
||||
|
||||
@@ -67,14 +67,19 @@ sections:
|
||||
color: black
|
||||
size: lg
|
||||
icon: i-heroicons-cube
|
||||
- label: Star on GitHub
|
||||
to: https://github.com/nuxt/ui
|
||||
target: _blank
|
||||
color: white
|
||||
size: lg
|
||||
icon: i-simple-icons-github
|
||||
cta:
|
||||
title: Trusted and supported by our<br class="hidden lg:block"> amazing community
|
||||
title: Built and driven by an <span class="text-primary">amazing community</span>
|
||||
align: center
|
||||
users:
|
||||
- name: Benjamin Canac
|
||||
username: benjamincanac
|
||||
to: https://twitter.com/benjamincanac
|
||||
- name: Romain Hamel
|
||||
username: romhml
|
||||
to: https://github.com/romhml
|
||||
- name: Neil Richter
|
||||
username: noook
|
||||
to: https://nook.sh/
|
||||
pro:
|
||||
title: Upgrade to <span class="text-primary">Nuxt UI Pro</span>
|
||||
description: 'Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.<br>It includes all primitives to build landing pages, documentations, blogs, dashboards or entire SaaS products.'
|
||||
|
||||
@@ -102,77 +102,79 @@
|
||||
<ULandingSection class="!pt-0 dark:bg-gradient-to-b from-gray-950/50 to-gray-900">
|
||||
<ULandingCTA
|
||||
align="left"
|
||||
card
|
||||
:card="false"
|
||||
:ui="{
|
||||
background: 'dark:bg-gradient-to-b from-gray-800 to-gray-900',
|
||||
shadow: 'dark:shadow-2xl',
|
||||
body: {
|
||||
background: 'bg-gray-50/50 dark:bg-gray-900/50'
|
||||
padding: '!p-0'
|
||||
},
|
||||
title: 'text-center lg:text-left',
|
||||
links: 'justify-center lg:justify-start'
|
||||
title: 'text-center lg:text-left lg:text-5xl',
|
||||
description: 'mt-10 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-8 lg:gap-16',
|
||||
links: '-ml-3 justify-center lg:justify-start flex-wrap gap-y-3'
|
||||
}"
|
||||
>
|
||||
<template #title>
|
||||
<span v-html="page.cta.title" />
|
||||
</template>
|
||||
|
||||
<template #links>
|
||||
<ClientOnly>
|
||||
<UAvatarGroup :max="xlAndLarger ? 13 : lgAndLarger ? 10 : mdAndLarger ? 16 : 8" size="md" class="flex-wrap-reverse [&_span:first-child]:text-xs justify-center">
|
||||
<UTooltip
|
||||
v-for="(contributor, index) of module.contributors"
|
||||
:key="index"
|
||||
:text="contributor.username"
|
||||
class="rounded-full"
|
||||
:ui="{ background: 'bg-gray-50 dark:bg-gray-800/50' }"
|
||||
:popper="{ offsetDistance: 16 }"
|
||||
>
|
||||
<UAvatar
|
||||
:alt="contributor.username"
|
||||
:src="`https://ipx.nuxt.com/s_40x40/gh_avatar/${contributor.username}`"
|
||||
:srcset="`https://ipx.nuxt.com/s_80x80/gh_avatar/${contributor.username} 2x`"
|
||||
class="lg:hover:scale-125 lg:hover:ring-2 lg:hover:ring-primary-500 dark:lg:hover:ring-primary-400 transition-transform"
|
||||
width="40"
|
||||
height="40"
|
||||
size="md"
|
||||
loading="lazy"
|
||||
>
|
||||
<NuxtLink :to="`https://github.com/${contributor.username}`" :aria-label="contributor.username" target="_blank" class="focus:outline-none" tabindex="-1">
|
||||
<span class="absolute inset-0" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</UAvatar>
|
||||
</UTooltip>
|
||||
</UAvatarGroup>
|
||||
</ClientOnly>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col sm:flex-row items-center justify-center gap-8 lg:gap-16">
|
||||
<NuxtLink class="text-center group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
|
||||
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
||||
<template #description>
|
||||
<NuxtLink class="text-center lg:text-left group" to="https://npmjs.org/package/@nuxt/ui" target="_blank">
|
||||
<p class="text-5xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
||||
{{ format(module.stats.downloads) }}+
|
||||
</p>
|
||||
<p>monthly downloads</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink class="text-center group" to="https://github.com/nuxt/ui" target="_blank">
|
||||
<p class="text-6xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
||||
<NuxtLink class="text-center lg:text-left group" to="https://github.com/nuxt/ui" target="_blank">
|
||||
<p class="text-5xl font-semibold text-gray-900 dark:text-white group-hover:text-primary-500 dark:group-hover:text-primary-400">
|
||||
{{ format(module.stats.stars) }}+
|
||||
</p>
|
||||
<p>stars</p>
|
||||
<p>GitHub stars</p>
|
||||
</NuxtLink>
|
||||
</template>
|
||||
|
||||
<template #links>
|
||||
<UButton
|
||||
v-for="user in page.cta.users"
|
||||
:key="user.username"
|
||||
:to="user.to"
|
||||
size="md"
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
target="_blank"
|
||||
>
|
||||
<UAvatar
|
||||
:alt="user.username"
|
||||
:src="`https://ipx.nuxt.com/s_80x80/gh_avatar/${user.username}`"
|
||||
:srcset="`https://ipx.nuxt.com/s_160x160/gh_avatar/${user.username} 2x`"
|
||||
width="80"
|
||||
height="80"
|
||||
size="md"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<div class="text-left">
|
||||
<p class="font-medium">
|
||||
{{ user.name }}
|
||||
</p>
|
||||
<p class="text-gray-500 dark:text-gray-400 leading-4">
|
||||
{{ `@${user.username}` }}
|
||||
</p>
|
||||
</div>
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
<div class="p-5 overflow-hidden flex">
|
||||
<HomeContributors :contributors="module.contributors" />
|
||||
</div>
|
||||
</ULandingCTA>
|
||||
</ULandingSection>
|
||||
|
||||
<template v-if="navigation.find(item => item._path === '/pro')">
|
||||
<div class="relative">
|
||||
<UDivider class="absolute inset-x-0" />
|
||||
|
||||
<div class="w-full relative overflow-hidden h-px bg-gradient-to-r from-gray-800 via-primary-400 to-gray-800 max-w-5xl mx-auto" />
|
||||
</div>
|
||||
|
||||
<ULandingHero id="pro" :links="page.pro.links" :ui="{ title: 'sm:text-6xl' }" class="bg-gradient-to-b from-gray-50 dark:from-gray-950/50 to-white dark:to-gray-900 relative">
|
||||
<template #top>
|
||||
<Gradient class="absolute inset-x-0 top-0 w-full block" />
|
||||
</template>
|
||||
|
||||
<template #title>
|
||||
<span v-html="page.pro.title" />
|
||||
</template>
|
||||
@@ -438,7 +440,7 @@ useSeoMeta({
|
||||
|
||||
const source = ref('npx nuxi@latest module add ui')
|
||||
const sectionRef = ref()
|
||||
const demoRef = ref()
|
||||
const demoRef = ref(null)
|
||||
const start = ref(0)
|
||||
|
||||
const { height } = useElementSize(demoRef)
|
||||
@@ -448,9 +450,7 @@ const config = useRuntimeConfig().public
|
||||
const { copy, copied } = useClipboard({ source })
|
||||
const breakpoints = useBreakpoints(breakpointsTailwind)
|
||||
|
||||
const mdAndLarger = breakpoints.greaterOrEqual('md')
|
||||
const lgAndLarger = breakpoints.greaterOrEqual('lg')
|
||||
const xlAndLarger = breakpoints.greaterOrEqual('xl')
|
||||
|
||||
const { format } = Intl.NumberFormat('en', { notation: 'compact' })
|
||||
|
||||
|
||||
Reference in New Issue
Block a user