61 lines
1.3 KiB
Plaintext
61 lines
1.3 KiB
Plaintext
---
|
|
import type { CollectionEntry } from "astro:content";
|
|
import Layout from "./Layout.astro";
|
|
import { useTranslatedPath } from "@i18n/utils";
|
|
|
|
type CustomProps = {
|
|
layout?: "normal" | "transparent";
|
|
backlink?: string;
|
|
};
|
|
type Props = CollectionEntry<"blog">["data"] & CustomProps;
|
|
|
|
const { title, date, _layout, backlink = "/blog" } = Astro.props;
|
|
const path = useTranslatedPath(Astro.url);
|
|
---
|
|
|
|
<Layout title={title}>
|
|
<div
|
|
class="top-info flex items-center place-content-between opacity-50 m-y-4"
|
|
>
|
|
<a class="flex items-center gap-1" href={path(backlink)}
|
|
><span class="i-tabler-arrow-left"></span> overview</a
|
|
>
|
|
<div class="date">
|
|
{
|
|
date.toLocaleString("en-US", {
|
|
month: "long",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
})
|
|
}
|
|
</div>
|
|
</div>
|
|
<article class={`layout-${_layout} flex flex-col gap-2`}>
|
|
<h1 class="text-4xl my-4">{title}</h1>
|
|
<slot />
|
|
</article>
|
|
</Layout>
|
|
|
|
<style>
|
|
article :global(h2) {
|
|
@apply text-3xl;
|
|
}
|
|
|
|
article :global(h3) {
|
|
@apply text-2xl;
|
|
}
|
|
|
|
article :global(h4) {
|
|
@apply text-xl;
|
|
}
|
|
|
|
article :global(img) {
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
article.layout-transparent {
|
|
padding: 20px;
|
|
background: var(--background);
|
|
}
|
|
</style>
|