-
-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathBlogPostCard.astro
More file actions
60 lines (56 loc) · 2.54 KB
/
Copy pathBlogPostCard.astro
File metadata and controls
60 lines (56 loc) · 2.54 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
---
import { formatDate, postUrl, slugify, withBase, renderDescriptionLinks } from "../lib/utils";
interface Props {
slug: string;
title: string;
publishDate: string;
author: string;
description?: string | null;
tags?: readonly string[];
showEditLink?: boolean;
}
const isDev = import.meta.env.DEV;
const { slug, title, publishDate, author, description, tags, showEditLink = true } = Astro.props;
---
<article class="post-card group relative px-5 py-4">
<div class="flex items-start justify-between gap-4">
<div class="min-w-0 flex-1">
<a href={withBase(postUrl(slug, publishDate))} class="block">
<h3 class="text-base font-semibold leading-snug text-zinc-900 transition-colors group-hover:text-[#306998] dark:text-zinc-100 dark:group-hover:text-[#ffd43b]" style="font-family: var(--font-display);">
{title}
</h3>
</a>
<div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-zinc-500 dark:text-zinc-400">
<a href={withBase(`/authors/${slugify(author)}`)} class="font-medium text-zinc-600 hover:text-[#306998] dark:text-zinc-300 dark:hover:text-[#ffd43b] transition-colors">{author}</a>
<span class="text-zinc-300 dark:text-zinc-600">·</span>
<time datetime={publishDate}>{formatDate(publishDate)}</time>
</div>
{description && (
<p class="mt-1.5 line-clamp-2 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400" set:html={renderDescriptionLinks(description)} />
)}
{tags && tags.length > 0 && (
<div class="mt-2.5 flex flex-wrap gap-1.5">
{tags.slice(0, 4).map((tag) => (
<a
href={withBase(`/tags/${tag}`)}
class="tag-pill rounded-md bg-zinc-100 px-2 py-0.5 text-xs font-medium text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
>
{tag}
</a>
))}
</div>
)}
</div>
{isDev && showEditLink && (
<a
href={withBase(`/keystatic/collection/posts/item/${slug}`)}
class="edit-btn mt-1 flex-shrink-0 rounded-md p-1.5 text-zinc-300 hover:bg-zinc-100 hover:text-zinc-500 dark:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-400"
title="Edit in Keystatic"
>
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
</a>
)}
</div>
</article>