50 lines
1.5 KiB
Plaintext
50 lines
1.5 KiB
Plaintext
---
|
|
import Container from "@components/container.astro";
|
|
import { getFormattedDate } from "@utils/all";
|
|
import Layout from "./Layout.astro";
|
|
|
|
const { frontmatter } = Astro.props;
|
|
---
|
|
|
|
<Layout title={frontmatter.title}>
|
|
<Container>
|
|
<div class="mx-auto max-w-[735px] mt-14">
|
|
<span class="text-blue-400 uppercase tracking-wider text-sm font-medium">
|
|
{frontmatter.category}
|
|
</span>
|
|
<h1
|
|
class="text-4xl lg:text-5xl font-bold lg:tracking-tight mt-1 lg:leading-tight">
|
|
{frontmatter.title}
|
|
</h1>
|
|
<div class="flex gap-2 mt-3 items-center flex-wrap md:flex-nowrap">
|
|
<span class="text-gray-400">
|
|
{frontmatter.author}
|
|
</span>
|
|
<span class="text-gray-400">•</span>
|
|
<time class="text-gray-400" datetime={frontmatter.publishDate}>
|
|
{getFormattedDate(frontmatter.publishDate)}
|
|
</time>
|
|
<span class="text-gray-400 hidden md:block">•</span>
|
|
<div class="w-full md:w-auto flex flex-wrap gap-3">
|
|
{
|
|
frontmatter.tags.map((tag) => (
|
|
<span class="text-sm text-gray-500">#{tag}</span>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mx-auto prose prose-lg mt-6">
|
|
<slot />
|
|
</div>
|
|
<div class="text-center mt-8">
|
|
<a
|
|
href="/blog"
|
|
class="bg-gray-100 px-5 py-3 rounded-md hover:bg-gray-200 transition"
|
|
>← Back to Blog</a
|
|
>
|
|
</div>
|
|
</Container>
|
|
</Layout>
|