Files
Website/src/pages/[...slug].astro
2023-11-03 20:31:27 +01:00

82 lines
1.9 KiB
Plaintext

---
import { getCollection } from 'astro:content'
import NavbarLayout from "../layouts/NavbarLayout.astro";
import {astroI18n, createGetStaticPaths} from "astro-i18n";
import localBau from "../images/2023-10-08_20.43.43.png";
import {Image} from "astro:assets";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("pages");
return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
props: { page }, params: { slug: page.slug }
}) )
})
const { page } = Astro.props;
const { Content } = await page.render();
---
<NavbarLayout title={page.data.title}>
<div>
<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen h-screen dark:brightness-75 fixed -z-10 object-cover" draggable="false" />
<article>
<h1 class="text-left">{page.data.title}</h1>
<Content />
</article>
</div>
</NavbarLayout>
<style is:global>
article {
width: min(100vw, 75em);
@apply mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
dark:text-white dark:bg-neutral-900;
p {
@apply my-4 leading-7;
}
h1 {
@apply text-4xl font-bold mt-4 text-center;
}
h2 {
@apply text-3xl font-bold mt-4;
}
h3 {
@apply text-2xl font-bold mt-4;
}
h4 {
@apply text-xl font-bold mt-4;
}
a {
@apply text-blue-500 hover:text-blue-700;
}
ol>li, ul>li {
@apply ml-4;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
}
code {
@apply dark:text-neutral-400 text-neutral-800;
}
pre.astro-code {
@apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
}
}
</style>