juyung/devscard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Apply Lighthouse suggestions (#162)

Browse source
This commit is contained in:
Konrad Szwarc 2023-01-19 00:01:55 +01:00 committed by GitHub
parent cf2c83c0f1
commit 5afdfe9e16
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 32 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/photo.astro
View file

@ -8,9 +8,12 @@ export interface Props {
alt: string;
class?: string;
loading?: 'eager' | 'lazy';
width?: number;
height?: number;
}
const { src, alt, loading } = Astro.props;
const { src, loading, ...props } = Astro.props;
const className = Astro.props.class ?? '';
const isRemoteImage = typeof src === 'string';
@ -18,8 +21,8 @@ const isRemoteImage = typeof src === 'string';
{
isRemoteImage ? (
<img class={className} src={src} alt={alt} />
<img class={className} src={src} {...props} />
) : (
<Image class={className} format="webp" fit={'cover'} src={src} alt={alt} loading={loading} />
<Image format="webp" fit="cover" class={className} src={src} loading={loading} {...props} />
)
}

1
src/components/theme-toggle.astro
View file

@ -4,6 +4,7 @@ import Icon from './icon.astro';
<button
id="theme-toggle"
aria-label="Theme toggle"
class="fixed bottom-3 left-3 z-10 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100 text-gray-400 shadow-xl transition focus:ring-primary-500 dark:bg-gray-600 dark:text-gray-200"
>
<Icon class="block dark:hidden" name="ri:moon-fill" size={20} />

2
src/sections/favorites/book-tile.astro
View file

@ -13,7 +13,7 @@ const {
---
<a href={url} class="flex w-full max-w-[200px] flex-col gap-3 transition duration-300 hover:translate-y-2">
<Photo src={cover} alt={title} class="aspect-[3/4] rounded-lg object-cover shadow-md'" />
<Photo src={cover} alt={title} class="aspect-[3/4] rounded-lg object-cover shadow-md" width={300} height={400} />
<div class="w-full gap-1">
<Typography variant="tile-title">
{title}

2
src/sections/favorites/media-tile.astro
View file

@ -13,7 +13,7 @@ const {
---
<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
<Photo class="rounded-lg shadow-md aspect-square object-cover" src={image} alt={title} />
<Photo class="rounded-lg shadow-md aspect-square object-cover" src={image} alt={title} width={200} height={200} />
<div class="gap-1">
<Typography variant="tile-title">
{title}

8
src/sections/favorites/person-tile.astro
View file

@ -13,7 +13,13 @@ const {
---
<a href={url} class="flex w-full max-w-[120px] flex-col gap-3 transition duration-300 hover:translate-y-2">
<Photo class="rounded-lg shadow-md transition duration-300 aspect-square object-cover" src={image} alt={name} />
<Photo
class="rounded-lg shadow-md transition duration-300 aspect-square object-cover"
src={image}
alt={name}
width={200}
height={200}
/>
<Typography variant="tile-title">
{name}
</Typography>

2
src/sections/favorites/video-tile.astro
View file

@ -16,7 +16,7 @@ const thumbnail = `https://img.youtube.com/vi/${id}/0.jpg`;
---
<a href={url} class="flex w-full max-w-[240px] flex-col gap-3 transition duration-300 hover:translate-y-2">
<Photo class="rounded-lg shadow-md aspect-video object-cover" src={thumbnail} alt={title} />
<Photo class="rounded-lg shadow-md aspect-video object-cover" src={thumbnail} alt={title} width={480} height={270} />
<Typography variant="tile-title">
{title}
</Typography>

8
src/sections/main/main-section.astro
View file

@ -27,7 +27,13 @@ const section: SectionKey = 'main';
<SectionCard section={section}>
<div class="flex flex-col items-start gap-6 sm:flex-row">
<div class="flex items-center gap-4 sm:flex-col">
<Photo src={image} alt={fullName} class="w-24 h-24 sm:w-36 sm:h-36 md:w-52 md:h-52 rounded-lg max-w-none" />
<Photo
src={image}
alt={fullName}
width={320}
height={320}
class="w-24 h-24 sm:w-36 sm:h-36 md:w-52 md:h-52 rounded-lg max-w-none"
/>
<Button href={url} download={downloadedFileName}>{label}</Button>
</div>
<div class="flex w-full flex-col gap-5">

8
src/sections/portfolio/project-timeline-item.astro
View file

@ -21,7 +21,13 @@ const alt = `Thumbnail for ${name} project`;
<div class="flex flex-col gap-6">
<div class="flex flex-col gap-4">
<div class="flex gap-6">
<Photo class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden" src={image} alt={alt} />
<Photo
src={image}
alt={alt}
width={200}
height={200}
class="rounded-lg object-cover max-w-[120px] overflow-hidden sm:block hidden"
/>
<div class="flex w-full flex-col gap-4">
<div class="flex justify-between">
<div>

2
src/sections/testimonials/testimonial.astro
View file

@ -16,7 +16,7 @@ const {
<div class="flex w-full flex-col gap-4">
<div class="flex justify-between">
<div class="flex flex-col gap-4 sm:flex-row">
<Photo src={image} alt={author} class="w-14 h-14 rounded-lg" />
<Photo src={image} alt={author} class="w-14 h-14 rounded-lg" width={108} height={108} />
<div>
<Typography variant="item-title">{author}</Typography>
<Typography variant="item-subtitle">{relation}</Typography>