wrath/src/pages/[lang]/posts/[...slug].astro

59 lines
1.6 KiB
Text

---
export const prerender = true
import { render } from "astro:content"
import { langs } from "~/i18n/ui"
import { getLangFromUrl } from "~/i18n/utils"
import MainLayout from "~/layouts/main.astro"
import "~/styles/post.css"
import "~/styles/post.scss"
import { formatDate, getPostsByLocale } from "~/utils"
export async function getStaticPaths() {
const allPaths = []
for (const lang of langs) {
const posts = await getPostsByLocale(lang)
const paths = posts.map((post: any) => ({
params: { lang, slug: post.id },
props: { post },
}))
allPaths.push(...paths)
}
return allPaths
}
const lang = getLangFromUrl(Astro.url)
const { post } = Astro.props
const { Content } = await render(post)
---
<MainLayout post={{ ...post.data }}>
<article class="prose dark:prose-invert w-full max-w-3xl overflow-hidden">
<div class="flex flex-col gap-2">
<h2 class="my-0! text-3xl font-semibold">{post.data.title}</h2>
<p class="my-0! text-md text-gray-700 dark:text-white/80">
{post.data.description}
</p>
<div class="text-sm text-gray-500 dark:text-white/80">
{formatDate(post.data.pubDate, "locale", lang)}
</div>
</div>
<div class="my-6">
<Content />
</div>
<div class="space-x-3 pb-10 text-sm text-gray-500">
{
post.data.tags.map((tag: string) => (
<a href={`/${lang}/tags/${tag}`} class="no-underline">
<p class="inline-block hover:scale-105 bg-amber-500 dark:bg-amber-400 dark:text-black p-1">#{tag}</p>
</a>
))
}
</div>
</article>
</MainLayout>