mirror of
https://github.com/KazooTTT/kazoottt-blog-v2.git
synced 2025-06-23 18:51:30 +08:00
103 lines
2.7 KiB
Plaintext
103 lines
2.7 KiB
Plaintext
---
|
||
import FormattedDate from "@/components/FormattedDate.astro";
|
||
import Card from "../componentsBefore/Card.astro";
|
||
import { Icon } from "astro-icon/components";
|
||
import Label from "../componentsBefore/Label.astro";
|
||
import type { PostItem } from "@/types";
|
||
|
||
interface Props {
|
||
content: PostItem;
|
||
readingTime: string;
|
||
ogImage: string;
|
||
}
|
||
|
||
const {
|
||
content: { data, dateToCmp },
|
||
readingTime,
|
||
ogImage,
|
||
} = Astro.props;
|
||
|
||
const dateTimeOptions: Intl.DateTimeFormatOptions = {
|
||
month: "long",
|
||
};
|
||
|
||
const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url).href;
|
||
---
|
||
|
||
{
|
||
socialImageURL && (
|
||
<div class="mb-6 aspect-video">
|
||
<img alt={socialImageURL} class="rounded-lg object-cover" src={socialImageURL} />
|
||
</div>
|
||
)
|
||
}
|
||
{data.draft ? <span class="text-base text-red-500">(Draft)</span> : null}
|
||
|
||
{
|
||
data.category && (
|
||
<div class="my-2">
|
||
<Label title={data.category} as="a" href={`/categories/${data.category}/`}>
|
||
<Icon name="category" slot="icon" />
|
||
</Label>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
<h1 class="title">
|
||
{data.title}
|
||
</h1>
|
||
<div class="flex flex-wrap items-center gap-x-3 gap-y-2">
|
||
<p class="font-semibold">
|
||
<FormattedDate date={dateToCmp} dateTimeOptions={dateTimeOptions} /> /{" "}
|
||
{readingTime}
|
||
</p>
|
||
{
|
||
data.date_modified && (
|
||
<span class="bg-quote/5 text-quote rounded-lg px-2 py-1">
|
||
Updated:
|
||
<FormattedDate class="ms-1" date={data.date_modified} dateTimeOptions={dateTimeOptions} />
|
||
</span>
|
||
)
|
||
}
|
||
</div>
|
||
{
|
||
!!data.tags?.length && (
|
||
<div class="mt-2">
|
||
<svg
|
||
aria-hidden="true"
|
||
class="inline-block h-6 w-6"
|
||
fill="none"
|
||
focusable="false"
|
||
stroke="currentColor"
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="1.5"
|
||
viewBox="0 0 24 24"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<path d="M0 0h24v24H0z" fill="none" stroke="none" />
|
||
<path d="M7.859 6h-2.834a2.025 2.025 0 0 0 -2.025 2.025v2.834c0 .537 .213 1.052 .593 1.432l6.116 6.116a2.025 2.025 0 0 0 2.864 0l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-6.117 -6.116a2.025 2.025 0 0 0 -1.431 -.593z" />
|
||
<path d="M17.573 18.407l2.834 -2.834a2.025 2.025 0 0 0 0 -2.864l-7.117 -7.116" />
|
||
<path d="M6 9h-.01" />
|
||
</svg>
|
||
{data.tags.map((tag, i) => (
|
||
<>
|
||
{/* prettier-ignore */}
|
||
<span class="contents">
|
||
<a class="cactus-link inline-block before:content-['#']" data-pagefind-filter="tag" href={`/tags/${tag}/`}><span class="sr-only">View more blogs with the tag </span>{tag}
|
||
</a>{i < data.tags.length - 1 && ", "}
|
||
</span>
|
||
</>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
{
|
||
data.description && data.description.trim().length > 0 && (
|
||
<Card heading="摘要（由llm生成）" altText="摘要" class="my-4 w-full">
|
||
<div class="text-muted-foreground ml-4">{data.description}</div>
|
||
</Card>
|
||
)
|
||
}
|