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
|
---
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.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>
|
