This commit is contained in:
@ -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,37 +10,47 @@ 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
|
||||||
|
class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink"
|
||||||
|
>
|
||||||
<div class="card-body p-3 break-words">
|
<div class="card-body p-3 break-words">
|
||||||
<h2 class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2">
|
<h2
|
||||||
|
class="card-title text-base-100 justify-center text-center break-words font-bold text-lg mb-2"
|
||||||
|
>
|
||||||
{title}
|
{title}
|
||||||
</h2>
|
</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
|
||||||
|
class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm mb-2"
|
||||||
|
>
|
||||||
<Icon name="mdi:clock" class="text-xl" />
|
<Icon name="mdi:clock" class="text-xl" />
|
||||||
<span>
|
<span>
|
||||||
{new Date(pubDate).toLocaleDateString("en-us", {
|
{
|
||||||
|
new Date(pubDate).toLocaleDateString("en-us", {
|
||||||
month: "long",
|
month: "long",
|
||||||
day: "numeric",
|
day: "numeric",
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
})}
|
})
|
||||||
|
}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{post.data.tags && post.data.tags.length > 0 && (
|
{
|
||||||
|
post.data.tags && post.data.tags.length > 0 && (
|
||||||
<div class="flex gap-2 flex-wrap mb-2 justify-center">
|
<div class="flex gap-2 flex-wrap mb-2 justify-center">
|
||||||
{post.data.tags.map((tag: string) => (
|
{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">
|
<div class="badge badge-primary">
|
||||||
<Icon name="mdi:tag" class="text-lg" />
|
<Icon name="mdi:tag" class="text-lg" />
|
||||||
{tag}
|
{tag}
|
||||||
</span>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)
|
||||||
|
}
|
||||||
|
|
||||||
<div class="card-actions justify-end mt-2">
|
<div class="card-actions justify-end mt-2">
|
||||||
<a
|
<a
|
||||||
|
Reference in New Issue
Block a user