aria.coffee/src/layouts/MarkdownPostLayout.astro
2025-04-25 04:23:45 +10:00

72 lines
1.7 KiB
Text

---
import Partition from "../components/Partition.astro";
import BaseLayout from "./BaseLayout.astro";
const { frontmatter } = Astro.props;
const { lastModified } = Astro.props;
---
<BaseLayout pageTitle={frontmatter.title} description={frontmatter.description}>
<Partition>
<div>
<h1 class="text-3xl font-bold underline">{frontmatter.title}</h1>
<em>{frontmatter.description}</em><br />
<sub>Date: {frontmatter.pubDate.toLocaleDateString()}</sub><br />
<sub>Last Modified: {lastModified}</sub>
</div>
</Partition>
<Partition>
<main>
<div
class="prose prose-invert
prose-h1:font-bold prose-h1:text-xl prose-p:text-justify prose-img:rounded-xl
prose-headings:underline max-w-full"
>
<slot />
</div>
</main>
</Partition>
<Partition>
<h3>tags:</h3>
<div class="tags">
{
frontmatter.tags.map((tag: string) => (
<a href={`/tags/${tag}`}>
<p class="tag">{tag}</p>
</a>
))
}
</div>
</Partition>
<footer>
<sub>Written by: {frontmatter.author}</sub>
</footer>
</BaseLayout>
<style>
a {
color: #b800a8;
}
.tags {
display: flex;
flex-wrap: wrap;
}
.tag {
margin: 0.25em;
border: dotted 1px #a1a1a1;
border-radius: 0.5em;
padding: 0.5em 1em;
font-size: 1.15em;
background-color: #f8fcfd;
}
.tag:hover {
background-color: #f8fcfd83;
}
.tag:active {
background-color: #d4f6ff;
}
</style>