Website/src/pages/[...slug].astro

---
import {getCollection} from 'astro:content'
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import PageLayout from "../layouts/PageLayout.astro";

export const getStaticPaths = createGetStaticPaths(async () => {
    let posts = await getCollection("pages", value => value.id.split("/")[0] === astroI18n.locale);

    function fixLink(slug: string): string {
        if (astroI18n.locales.includes(slug.split("/")[0])) {
            return slug.split("/").slice(1).join("/");
        } else {
            return slug;
        }
    }

    return posts.map((page) => ({
        props: {
            page
        },
        params: {
            slug: fixLink(page.slug)
        }
    }) )
})

const { page } = Astro.props;
const { Content } = await page.render();
---


<PageLayout title={page.data.title}>
    <article>
        {page.data.german && (
                <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
                    <div class="font-bold">{t("warning.title", {}, {route: "/rules"})}</div>
                    <div>{t("warning.text", {}, {route: "/rules"})}</div>
                </div>
        )}
        <h1 class="text-left">{page.data.title}</h1>
        <Content />
    </article>
</PageLayout>

<style is:global>
    article {
        >* {
            all: revert;
        }

        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>