atridad/atridotdad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixxxx
All checks were successful
Docker Deploy / build-and-push (push) Successful in 3m34s
Details

Browse Source
This commit is contained in:
Atridad Lahiji
2025-06-15 00:34:01 -06:00
parent 9babbd0368
commit 57238c9805
1 changed files with 53 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/PostCard.astro
View File

@ -1,8 +1,8 @@
--- ---
import type { CollectionEntry } from 'astro:content'; import type { CollectionEntry } from "astro:content";
import { Icon } from 'astro-icon/components'; import { Icon } from "astro-icon/components";
export interface Props { export interface Props {
post: CollectionEntry<'posts'>; post: CollectionEntry<"posts">;
} }
const { post } = Astro.props; const { post } = Astro.props;
@ -10,46 +10,56 @@ const { title, description: blurb, pubDate } = post.data;
const { slug } = post; const { slug } = post;
--- ---
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"> <div
<div class="card-body p-3 break-words"> class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
<h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2"> >
{title} <div class="card-body p-3 break-words">
</h2> <h2
class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2"
>
{title}
</h2>
<p class="text-center text-base-100 break-words mb-3 text-base"> <p class="text-center text-base-100 break-words mb-3 text-base">
{blurb || 'No description available.'} {blurb || "No description available."}
</p> </p>
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2"> <div
<Icon name="mdi:clock" class="text-xl" /> class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2"
<span> >
{new Date(pubDate).toLocaleDateString("en-us", { <Icon name="mdi:clock" class="text-xl" />
month: "long", <span>
day: "numeric", {
year: "numeric", new Date(pubDate).toLocaleDateString("en-us", {
})} month: "long",
</span> day: "numeric",
year: "numeric",
})
}
</span>
</div>
{
post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-2 flex-wrap mb-2 justify-center">
{post.data.tags.map((tag: string) => (
<div class="badge badge-primary">
<Icon name="mdi:tag" class="text-lg" />
{tag}
</div>
))}
</div>
)
}
<div class="card-actions justify-end mt-2">
<a
href={`/post/${slug}`}
class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
aria-label={`Read more about ${title}`}
>
<Icon name="mdi:arrow-right" class="text-lg" />
</a>
</div>
</div> </div>
{post.data.tags && post.data.tags.length > 0 && (
<div class="flex gap-2 flex-wrap mb-2 justify-center">
{post.data.tags.map((tag: string) => (
<span class="flex items-center flex-row gap-2 bg-gray-100 dark:bg-gray-700 px-2 py-1 rounded text-sm">
<Icon name="mdi:tag" class="text-lg" />
{tag}
</span>
))}
</div>
)}
<div class="card-actions justify-end mt-2">
<a
href={`/post/${slug}`}
class="btn btn-circle btn-sm bg-base-100 hover:bg-base-200 text-accent"
aria-label={`Read more about ${title}`}
>
<Icon name="mdi:arrow-right" class="text-lg" />
</a>
</div>
</div>
</div> </div>