Bluewaterblog/blog/src/layouts/BlogPostLayout.astro
2026-07-28 10:57:37 +02:00

56 lines
1 KiB
Text

---
import BackNav from "../components/BackNav.astro";
import { findImageByPath } from "../lib/findImage";
import type { Post } from "../types/global";
import Main from "./Main.astro";
interface Props {
frontmatter: Post;
}
const { frontmatter } = Astro.props;
const titleImg = findImageByPath(frontmatter.image.path);
---
<Main>
<article>
<img
id="titleImg"
src={titleImg.src}
alt={frontmatter.image.alt}
class="rounded"
/>
<h1 class="headline">{frontmatter.title}</h1>
<span class="subtitle">{frontmatter.subtitle}</span>
<hr />
<div class="bottom-info">
<span>Autor: {frontmatter.author}</span>
<span>{frontmatter.date}</span>
</div>
<hr />
<slot />
<BackNav />
</article>
</Main>
<style>
article {
margin: 32px auto;
max-width: 900px;
padding: 0 clamp(8px, 32px, 64px);
}
#titleImg {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
.bottom-info {
display: flex;
justify-content: space-between;
}
</style>