summaryrefslogtreecommitdiff
path: root/src/components/note/Note.astro
blob: b6a11c86f43b5fb9e97aa843e7db1babaaaf56bf (plain)
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
---
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<"note">;
	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 />
	</div>
</article>