79 lines
2.3 KiB
Text
79 lines
2.3 KiB
Text
---
|
|
import type { CollectionEntry } from "astro:content";
|
|
import FormattedDate from "../components/FormattedDate.astro";
|
|
import BaseLayout from "./BaseLayout.astro";
|
|
import { Picture } from "astro:assets";
|
|
|
|
type Props = CollectionEntry<"blog">["data"] & {
|
|
readingTime: number;
|
|
};
|
|
|
|
const { title, description, pubDate, updatedDate, heroImage, readingTime } =
|
|
Astro.props;
|
|
---
|
|
|
|
<BaseLayout title={title} description={description}>
|
|
<article class="max-w-3xl mx-auto">
|
|
{
|
|
heroImage && (
|
|
<div class="mb-12">
|
|
<Picture
|
|
src={heroImage}
|
|
alt=""
|
|
width={752}
|
|
class="rounded-lg shadow-lg w-full object-cover aspect-[16/9] dark:shadow-gray-800/30 transition-transform hover:scale-[1.02]"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
<div class="prose dark:prose-invert max-w-none">
|
|
<div class="space-y-2 text-center mb-12">
|
|
<div class="space-y-2">
|
|
<time class="text-sm text-gray-600 dark:text-gray-400">
|
|
<FormattedDate date={pubDate} />
|
|
</time>
|
|
|
|
{
|
|
updatedDate && (
|
|
<div class="text-sm text-gray-500 dark:text-gray-400 italic">
|
|
Last updated on <FormattedDate date={updatedDate} />
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
|
|
<h1 class="font-bold tracking-tight text-gray-900 dark:text-white">
|
|
{title}
|
|
</h1>
|
|
|
|
<div
|
|
class="flex items-center justify-center space-x-4 text-sm text-gray-600 dark:text-gray-400"
|
|
>
|
|
<span class="flex items-center">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke-width="1.5"
|
|
stroke="currentColor"
|
|
class="w-4 h-4 mr-1"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
{readingTime} min read
|
|
</span>
|
|
</div>
|
|
|
|
<hr class="w-32 mx-auto border-gray-200 dark:border-gray-800" />
|
|
</div>
|
|
|
|
<div class="mt-8 text-gray-800 dark:text-gray-200">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</BaseLayout>
|