mirror of
https://github.com/KazooTTT/kazoottt-blog.git
synced 2025-06-20 17:27:35 +08:00
90 lines
2.2 KiB
Plaintext
90 lines
2.2 KiB
Plaintext
---
|
|
import type { CollectionEntry } from 'astro:content'
|
|
import { Image } from 'astro:assets'
|
|
import FormattedDate from '../FormattedDate.astro'
|
|
|
|
interface Props {
|
|
content: CollectionEntry<'post'>
|
|
}
|
|
|
|
const {
|
|
content: { data, render }
|
|
} = Astro.props
|
|
|
|
const { remarkPluginFrontmatter } = await render()
|
|
|
|
const dateTimeOptions: Intl.DateTimeFormatOptions = {
|
|
month: 'long'
|
|
}
|
|
---
|
|
|
|
{
|
|
data.coverImage && (
|
|
<div class='aspect-h-9 aspect-w-16 mb-6'>
|
|
<Image
|
|
alt={data.coverImage.alt}
|
|
class='rounded-2xl object-cover'
|
|
fetchpriority='high'
|
|
loading='eager'
|
|
src={data.coverImage.src}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
{data.draft ? <span class='text-red-500'>(Draft)</span> : null}
|
|
<div class='flex flex-wrap items-center gap-x-3 gap-y-2'>
|
|
<p class='text-xs'>
|
|
<FormattedDate date={data.publishDate} dateTimeOptions={dateTimeOptions} /> /{' '}
|
|
{remarkPluginFrontmatter.minutesRead}
|
|
</p>
|
|
</div>
|
|
<h1 class='mt-2 text-3xl font-medium sm:mb-1'>
|
|
{data.title}
|
|
</h1>
|
|
|
|
{
|
|
!!data.tags?.length && (
|
|
<div class='mt-3 flex flex-row items-center gap-x-1'>
|
|
<svg
|
|
aria-hidden='true'
|
|
class='me-1 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) => (
|
|
<div>
|
|
<a
|
|
aria-label={`View more blogs with the tag ${tag}`}
|
|
class="inline-block before:content-['#'] hover:underline hover:underline-offset-4"
|
|
data-pagefind-filter='tag'
|
|
href={`/tags/${tag}/`}
|
|
>
|
|
{tag}
|
|
</a>
|
|
{i < data.tags.length - 1 && ', '}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
{
|
|
data.updatedDate && (
|
|
<p class='mt-6 text-base'>
|
|
Last Updated:
|
|
<FormattedDate class='ms-1' date={data.updatedDate} dateTimeOptions={dateTimeOptions} />
|
|
</p>
|
|
)
|
|
}
|