mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-23 10:41:30 +08:00
82 lines
2.1 KiB
Plaintext
82 lines
2.1 KiB
Plaintext
---
|
|
import { type CollectionEntry, render } from "astro:content";
|
|
import FormattedDate from "@/components/FormattedDate.astro";
|
|
import type { HTMLTag, Polymorphic } from "astro/types";
|
|
import GiscusComment from "@/components/componentsBefore/GiscusComment";
|
|
import ArticleContainer from "../ArticleContainer.astro";
|
|
import ShareButtons from "../ShareButtons.astro";
|
|
type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
|
|
note: CollectionEntry<"note">;
|
|
isPreview?: boolean | undefined;
|
|
index?: number;
|
|
};
|
|
|
|
const { as: Tag = "div", note, isPreview = false, index } = Astro.props;
|
|
const { Content } = await render(note);
|
|
const dateTimeOptions: Intl.DateTimeFormatOptions = note.data.date_created
|
|
? {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
year: "2-digit",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
}
|
|
: {
|
|
year: "2-digit",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
};
|
|
|
|
const date = note.data.date_created ?? note.data.date;
|
|
let modifiedDate = note.data?.date_modified;
|
|
if (modifiedDate && modifiedDate.toDateString() === date.toDateString()) {
|
|
modifiedDate = undefined;
|
|
}
|
|
---
|
|
|
|
<ArticleContainer
|
|
className={isPreview &&
|
|
"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
|
|
dataPagefindBody={isPreview ? false : true}
|
|
>
|
|
<Tag class="title" class:list={{ "text-base": isPreview }}>
|
|
{
|
|
isPreview ? (
|
|
<>
|
|
{index ? `${index + 1}.` : ""}
|
|
<a class="cactus-link" href={`/notes/${note.id}/`}>
|
|
{note.data.title}
|
|
</a>
|
|
</>
|
|
) : (
|
|
<>{note.data.title}</>
|
|
)
|
|
}
|
|
</Tag>
|
|
<div>
|
|
<FormattedDate dateTimeOptions={dateTimeOptions} date={date} />
|
|
{
|
|
modifiedDate && (
|
|
<span class="bg-quote/5 text-quote rounded-lg px-2 py-1">
|
|
Updated:
|
|
<FormattedDate class="ms-1" date={modifiedDate} dateTimeOptions={dateTimeOptions} />
|
|
</span>
|
|
)
|
|
}
|
|
</div>
|
|
<div class="group w-full overflow-auto">
|
|
<div class="prose prose-base prose-cactus mt-4 max-w-none [&>p:last-of-type]:mb-0">
|
|
<Content />
|
|
</div>
|
|
</div>
|
|
|
|
{!isPreview && <GiscusComment client:load />}
|
|
{
|
|
!isPreview && (
|
|
<div class="mt-8 border-t pt-4">
|
|
<ShareButtons />
|
|
</div>
|
|
)
|
|
}
|
|
</ArticleContainer>
|