Andras Schmelczer
b554e92e9f
All checks were successful
Deploy to Pages / build (push) Successful in 2m58s
Reviewed-on: https://home.schmelczer.dev/git/git/andras/schmelczer-dev/pulls/75
57 lines
1.3 KiB
Text
57 lines
1.3 KiB
Text
---
|
|
import type { ImageMetadata } from 'astro';
|
|
import { Picture } from 'astro:assets';
|
|
|
|
interface Props {
|
|
src: ImageMetadata;
|
|
alt: string;
|
|
href?: string;
|
|
class?: string;
|
|
widths: number[];
|
|
sizes: string;
|
|
loading?: 'lazy' | 'eager';
|
|
fetchpriority?: 'high' | 'low' | 'auto';
|
|
ariaLabel?: string;
|
|
// When the listing already has a focusable, screen-reader-visible title
|
|
// link, the thumbnail link is visually duplicative. We keep it clickable
|
|
// for pointer users but drop it from the tab order. The link still needs
|
|
// a name because some assistive tech exposes non-tabbable links.
|
|
decorative?: boolean;
|
|
}
|
|
|
|
const {
|
|
src,
|
|
alt,
|
|
href,
|
|
class: extraClass,
|
|
widths,
|
|
sizes,
|
|
loading = 'lazy',
|
|
fetchpriority,
|
|
ariaLabel,
|
|
decorative = true,
|
|
} = Astro.props;
|
|
|
|
const Tag = href ? 'a' : 'div';
|
|
const isDecorativeLink = Boolean(href) && decorative;
|
|
---
|
|
|
|
<Tag
|
|
class:list={['entry-thumbnail', extraClass]}
|
|
href={href}
|
|
tabindex={isDecorativeLink ? -1 : undefined}
|
|
aria-label={isDecorativeLink ? (ariaLabel ?? alt) : undefined}
|
|
>
|
|
<Picture
|
|
src={src}
|
|
alt={isDecorativeLink ? '' : alt}
|
|
formats={['avif', 'webp']}
|
|
fallbackFormat="jpg"
|
|
widths={widths}
|
|
sizes={sizes}
|
|
quality="high"
|
|
loading={loading}
|
|
decoding="async"
|
|
fetchpriority={fetchpriority}
|
|
/>
|
|
</Tag>
|