diff --git a/src/components/BlogListItem.astro b/src/components/BlogListItem.astro index b567771..136d0e4 100644 --- a/src/components/BlogListItem.astro +++ b/src/components/BlogListItem.astro @@ -1,4 +1,5 @@ --- +import { Image } from "astro:assets"; import type { CollectionEntry } from "astro:content"; import { base, dateFromSlug, getBlogImage, formatShortMDY } from "@/utils"; import defaultThumbnail from "../assets/blog/default-thumbnail.png"; @@ -7,6 +8,10 @@ interface Props { post: CollectionEntry<"blog">; } +// the thumbnail item is set to 14rem square, and the font size is 21px, so +// double that to support a max 2X image +const ThumbnailWidth = 14 * 21 * 2; + const { post: { slug, @@ -20,16 +25,21 @@ const { } } = Astro.props; const imageData = await getBlogImage(image); -const backgroundImageURL = imageData?.src ?? defaultThumbnail.src; +const backgroundImage = imageData || defaultThumbnail; const postURL = base("/blog/" + slug); const dateString = formatShortMDY(date); ---
  • -
    + + {image_alt} +

    {title}

    @@ -46,10 +56,10 @@ const dateString = formatShortMDY(date); gap: var(--pico-block-spacing-horizontal); } - div.thumbnail { + img.thumbnail { aspect-ratio: 1; - background-size: cover; - background-position: center; + object-fit: cover; + object-position: center; width: 14rem; height: 14rem; }