f7f2f38d32
This commit introduces adjustments to several UI elements, including title alignment, font sizes, and avatars loading. The updates aim to improve the overall visual appeal and user experience on the website. In addition, better error handling has been added to form inputs, including adding unique error IDs for each form's email input to enhance user feedback and accessibility.
41 lines
1.4 KiB
Text
41 lines
1.4 KiB
Text
---
|
|
// Import necessary modules and utilities
|
|
import { Image } from "astro:assets";
|
|
import { formatDate } from "../../../utils";
|
|
import type { CollectionEntry } from "astro:content";
|
|
// Define data source from Astro.js incoming props
|
|
const { blogEntry } = Astro.props;
|
|
// Define TypeScript props interface
|
|
interface Props {
|
|
blogEntry: CollectionEntry<"blog">;
|
|
}
|
|
---
|
|
|
|
<!-- The anchor tag is the main container for the blog preview card. Currently, it links to "#".
|
|
You might want to change it to the corresponding blog post's URL. -->
|
|
<a
|
|
class="group block rounded-xl outline-none ring-zinc-500 transition duration-300 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
|
|
href={`/blog/${blogEntry.slug}/`}
|
|
data-astro-prefetch
|
|
>
|
|
<!-- The blog post's cover image. It uses astro:assets' Image for loading the image optimally -->
|
|
<div>
|
|
<Image
|
|
class="aspect-video rounded-xl"
|
|
src={blogEntry.data.cardImage}
|
|
alt={blogEntry.data.cardImageAlt}
|
|
draggable={"false"}
|
|
format={"avif"}
|
|
/>
|
|
<!-- The title of the blog post -->
|
|
<h3
|
|
class="mt-2 text-balance text-lg font-medium text-neutral-800 group-hover:text-[#fa5a15] dark:text-neutral-300 dark:group-hover:text-neutral-50"
|
|
>
|
|
{blogEntry.data.title}
|
|
</h3>
|
|
<!-- The formatted publication date of the blog post -->
|
|
<p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
|
|
{formatDate(blogEntry.data.pubDate)}
|
|
</p>
|
|
</div></a
|
|
>
|