0d6284cfea
The commit modifies several components to streamline their code by minimizing extra comments and embedded interfaces. This alteration enhances overall code readability. Furthermore, the 'loading=eager' attribute has been added to image components in CardBlogRecent and CardBlog templates to optimize loading performance by instructing the browser to load these images as soon as possible.
67 lines
2.4 KiB
Text
67 lines
2.4 KiB
Text
---
|
|
// Import necessary components and utilities
|
|
import AvatarBlog from "../avatars/AvatarBlog.astro";
|
|
import { Image } from "astro:assets";
|
|
import { formatDate } from "../../../utils/utils";
|
|
import type { CollectionEntry } from "astro:content";
|
|
|
|
const { blogEntry } = Astro.props;
|
|
|
|
interface Props {
|
|
blogEntry: CollectionEntry<"blog">;
|
|
}
|
|
---
|
|
|
|
<!-- The following anchor tag is the main container for the card.
|
|
It's a link to the blog post detailed page.
|
|
The data-astro-prefetch is an Astro specific Dynamic HTML feature,
|
|
which automatically prefetches the linked page to speed up navigation. -->
|
|
<a
|
|
class="group relative block rounded-xl outline-none ring-zinc-500 transition duration-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
|
href={`/blog/${blogEntry.slug}/`}
|
|
data-astro-prefetch
|
|
>
|
|
<!-- The container for the blog post's cover image. Uses astro:assets' Image for image source -->
|
|
<div
|
|
class="relative h-[350px] w-full flex-shrink-0 overflow-hidden rounded-xl before:absolute before:inset-x-0 before:z-[1] before:size-full before:bg-gradient-to-t before:from-neutral-900/[.7]"
|
|
>
|
|
<Image
|
|
class="absolute start-0 top-0 size-full object-cover transition duration-500 group-hover:scale-110"
|
|
src={blogEntry.data.cardImage}
|
|
alt={blogEntry.data.cardImageAlt}
|
|
draggable={"false"}
|
|
loading={"eager"}
|
|
format={"avif"}
|
|
/>
|
|
</div>
|
|
<!-- The container for the blog author's avatar and associated metadata (author name and publication date) -->
|
|
<div class="absolute inset-x-0 top-0 z-10">
|
|
<div class="flex h-full flex-col p-4 sm:p-6">
|
|
<div class="flex items-center">
|
|
<AvatarBlog blogEntry={blogEntry} />
|
|
|
|
<div class="ms-2.5 sm:ms-4">
|
|
<h4 class="font-bold text-neutral-50">
|
|
{blogEntry.data.author}
|
|
</h4>
|
|
<p class="text-xs text-neutral-50/[.8]">
|
|
{formatDate(blogEntry.data.pubDate)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- The container for the blog post's title and description -->
|
|
<div class="absolute inset-x-0 bottom-0 z-10">
|
|
<div class="flex h-full flex-col p-4 sm:p-6">
|
|
<h3
|
|
class="text-balance text-lg font-bold text-neutral-50 group-hover:text-neutral-50/[.8] sm:text-3xl"
|
|
>
|
|
{blogEntry.data.title}
|
|
</h3>
|
|
<p class="mt-2 text-pretty text-neutral-50/[.8]">
|
|
{blogEntry.data.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|