arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-29 03:10:42 +01:00
Code Issues Packages Projects Releases Wiki Activity

docs(app): improve stars lazy loading

Browse Source
This commit is contained in:
Benjamin Canac
2025-03-19 14:54:14 +01:00
parent fd160339a6
commit edb0f0afc6
8 changed files with 88 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/app/pages/components.vue
View File

@@ -119,7 +119,8 @@ onMounted(() => {
/>
</template>
<StarsBg />
<LazyStarsBg hydrate-never />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
</UPageHero>

10
docs/app/pages/index.vue
View File

@@ -85,7 +85,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
</div>
</template>
<SkyBg />
<LazySkyBg hydrate-never />
<div class="h-[344px] lg:h-full lg:relative w-full lg:min-h-[calc(100vh-var(--ui-header-height)-1px)] overflow-hidden">
<UPageMarquee
@@ -93,7 +93,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
:overlay="false"
:ui="{
root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) 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:h-full 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]'
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
@@ -118,7 +118,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
:overlay="false"
:ui="{
root: '[--gap:--spacing(4)] [--duration:40s] border-(--ui-border) 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:h-full 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]'
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
@@ -241,7 +241,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
</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" />
<LazyHomeContributors :contributors="module?.contributors" :paused="!isContributorsInView || isContributorsHovered" hydrate-never />
</div>
</UPageSection>
@@ -261,7 +261,7 @@ useIntersectionObserver(contributorsRef, ([entry]) => {
</UButton>
</template>
<StarsBg />
<LazyStarsBg hydrate-never />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="relative h-[400px] border border-(--ui-border) bg-(--ui-bg-muted) overflow-hidden border-x-0 -mx-4 sm:-mx-6 lg:mx-0 lg:border-x w-screen lg:w-full">

3
docs/app/pages/pro/activate.vue
View File

@@ -71,7 +71,8 @@ onMounted(() => {
<template>
<UMain>
<UPageHero headline="License Activation" :title="title" :description="description" :ui="{ container: 'relative overflow-hidden', wrapper: 'lg:px-12', description: 'text-pretty' }">
<StarsBg />
<LazyStarsBg hydrate-never />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="px-4 py-10 lg:border border-(--ui-border) bg-(--ui-bg)">

4
docs/app/pages/pro/index.vue
View File

@@ -32,7 +32,7 @@ useSeoMeta({
<MDC :value="page.hero.description" tag="span" unwrap="p" cache-key="pro-hero-description" />
</template>
<StarsBg />
<LazyStarsBg hydrate-never />
<Motion as-child :initial="{ height: 0 }" :animate="{ height: 'auto' }" :transition="{ delay: 0.2, duration: 1 }">
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
@@ -196,7 +196,7 @@ useSeoMeta({
class="overflow-hidden"
orientation="horizontal"
>
<StarsBg />
<LazyStarsBg hydrate-never />
<video
class="rounded-[var(--ui-radius)] z-10"

4
docs/app/pages/pro/pricing.vue
View File

@@ -27,8 +27,10 @@ useSeoMeta({
<MDC :value="page.pricing.title" unwrap="p" cache-key="pro-pricing-title" />
</template>
<StarsBg />
<LazyStarsBg hydrate-never />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<div class="flex flex-col bg-(--ui-bg) gap-8 lg:gap-0">
<UPricingPlan
v-bind="page.pricing.freePlan"

3
docs/app/pages/pro/templates.vue
View File

@@ -18,7 +18,8 @@ useSeoMeta({
<template>
<div class="relative">
<UPageHero :links="page.links" :ui="{ container: 'relative' }">
<StarsBg />
<LazyStarsBg hydrate-never />
<div aria-hidden="true" class="hidden lg:block absolute z-[-1] border-x border-(--ui-border) inset-0 mx-4 sm:mx-6 lg:mx-8" />
<template #title>