core/src/pages/blog/[slug].astro

60 lines
1.3 KiB
Plaintext

---
import { getAllPosts } from '../../libs/posts.ts'
import Root from '../../layouts/Root.astro';
import Main from '../../layouts/Bundle.astro';
// @ts-ignore
import { Markdown } from '@astropub/md'
import { Image } from 'astro:assets';
export const getStaticPaths = async () => {
const posts = getAllPosts();
return posts.map((post) => ({
params: { slug: post.slug },
props: { post },
}));
};
const { post } = Astro.props;
---
<Root
title={post.title}
description={post.description}
path={`/blog/${post.slug}/`}>
<Main className="container content-space-t-3">
<div class="w-lg-65 mx-lg-auto">
<article class="border-bottom py-5 mb-5">
<h1 class="h2 text-white text-center">{post.title}</h1><br>
<Image
class="card-img"
src={`${import.meta.env.ASTRO_DIRECTUS_API}/assets/${post.cover_image}`}
alt="Image placeholder"
inferSize={true}
/>
<div class="container content-space-1">
<Markdown of={post.content}/>
</div>
</article>
</div>
</Main>
</Root>
<style is:global>
img {
width: 100%;
height: fit-content;
border-radius: 0.5rem;
&:nth-child(1) {
margin-block: 2rem;
}
}
* {
color: white;
}
h1,h2,h3,h4,h5,h6 {
color: white !important;
}
</style>