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

docs: lazy load images for performances

Browse Source
This commit is contained in:
Benjamin Canac
2023-09-14 22:55:53 +02:00
parent c44d363f62
commit 81463cd21d
4 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/components/content/examples/CommandPaletteExampleGroups.vue
View File

@@ -5,9 +5,9 @@ const toast = useToast()
const commandPaletteRef = ref() const commandPaletteRef = ref()
const users = [ const users = [
{ id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x' } }, { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x', loading: 'lazy' } },
{ id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x' } }, { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x', loading: 'lazy' } },
{ id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x' } } { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x', loading: 'lazy' } }
] ]
const actions = [ const actions = [

1
docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue
View File

@@ -38,6 +38,7 @@ const { ui } = useAppConfig()
v-if="link.avatar" v-if="link.avatar"
v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }" v-bind="{ size: ui.verticalNavigation.avatar.size, ...link.avatar }"
:class="[ui.verticalNavigation.avatar.base]" :class="[ui.verticalNavigation.avatar.base]"
loading="lazy"
/> />
<UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" /> <UIcon v-else name="i-heroicons-user-circle-20-solid" class="text-lg" />
</template> </template>

3
docs/components/home/HomeDemo.vue
View File

@@ -55,6 +55,7 @@ onMounted(() => {
alt="benjamincanac" alt="benjamincanac"
width="40" width="40"
height="40" height="40"
loading="lazy"
/> />
<UAvatar <UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux" src="https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux"
@@ -62,6 +63,7 @@ onMounted(() => {
alt="Atinux" alt="Atinux"
width="40" width="40"
height="40" height="40"
loading="lazy"
/> />
<UAvatar <UAvatar
src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin" src="https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin"
@@ -69,6 +71,7 @@ onMounted(() => {
alt="smarroufin" alt="smarroufin"
width="40" width="40"
height="40" height="40"
loading="lazy"
/> />
</UAvatarGroup> </UAvatarGroup>

2
docs/pages/index.vue
View File

@@ -1,3 +1,4 @@
<!-- eslint-disable vue/no-v-html -->
<template> <template>
<div> <div>
<ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]', container: 'max-w-3xl' }" class="mb-[calc(var(--header-height)*2)]"> <ULandingHero v-bind="page.hero" :ui="{ base: 'relative z-[1]', container: 'max-w-3xl' }" class="mb-[calc(var(--header-height)*2)]">
@@ -149,6 +150,7 @@
width="40" width="40"
height="40" height="40"
size="md" size="md"
loading="lazy"
> >
<NuxtLink :to="`https://github.com/${contributor.username}`" :aria-label="contributor.username" target="_blank" class="focus:outline-none" tabindex="-1"> <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" /> <span class="absolute inset-0" aria-hidden="true" />