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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
import { type CollectionEntry, render } from "astro:content";
import type { HTMLTag, Polymorphic } from "astro/types";
import FormattedDate from "@/components/FormattedDate.astro";
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
note: CollectionEntry<"micro">;
isPreview?: boolean | undefined;
};
const { as: Tag = "div", note, isPreview = false } = Astro.props;
const { Content } = await render(note);
---
<article
class:list={[
isPreview && "inline-grid rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]",
]}
data-pagefind-body={isPreview ? false : true}
>
<Tag class="title" class:list={{ "text-base": isPreview }}>
{
isPreview ? (
<a class="cactus-link" href={`/micro/${note.id}/`}>
{note.data.title}
</a>
) : (
<>{note.data.title}</>
)
}
</Tag>
<FormattedDate
dateTimeOptions={{
hour: "2-digit",
minute: "2-digit",
year: "2-digit",
month: "2-digit",
day: "2-digit",
}}
date={note.data.publishDate}
/>
<div
class="prose prose-sm prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0"
class:list={{ "line-clamp-6": isPreview }}
>
<Content />
{
!isPreview && note.data.attachments && note.data.attachments.length > 0 && (
<div class="mt-6 grid grid-cols-1 gap-4 sm:grid-cols-2">
{note.data.attachments.map((attachment: { type: string; url: string; alt?: string }) => (
<a
href={attachment.url}
target="_blank"
rel="noopener noreferrer"
class="block overflow-hidden rounded-lg border border-gray-200 transition-colors hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600"
>
<img
src={attachment.url}
alt={attachment.alt || "Image"}
class="h-48 w-full object-cover"
loading="lazy"
/>
</a>
))}
</div>
)
}
{
!isPreview && note.data.sourceUrl && (
<>
<hr class="mt-6 mb-4 border-t border-gray-300 dark:border-gray-600" />
<p class="text-sm text-gray-600 dark:text-gray-400">
<a
href={note.data.sourceUrl}
class="cactus-link"
target="_blank"
rel="noopener noreferrer"
>
View original post →
</a>
</p>
</>
)
}
</div>
</article>
|
