Scheiß Line Separator

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

@@ -0,0 +1,71 @@
+---
+import {getCollection} from 'astro:content'
+import {astroI18n, createGetStaticPaths} from "astro-i18n";
+import PageLayout from "../layouts/PageLayout.astro";
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    let posts = await getCollection("rules");
+
+    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();
+---
+
+
+<PageLayout title={page.data.title}>
+    <article>
+        <Content />
+    </article>
+</PageLayout>
+
+<style is:global>
+    article {
+        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>

src/pages/rules/index.astro

@@ -0,0 +1,37 @@
+---
+
+import wg from "../../images/WarGears.png"
+import mwg from "../../images/MiniWarGears.png"
+import as from "../../images/AirShips.png"
+import ws from "../../images/WarShips.png"
+import {t} from "astro-i18n";
+import {getCollection} from "astro:content";
+import PageLayout from "../../layouts/PageLayout.astro";
+import {Image} from "astro:assets";
+
+const imageMap = {
+    "wg": wg,
+    "mwg": mwg,
+    "as": as,
+    "ws": ws
+}
+
+const modes = await getCollection("modes", entry => entry.data.main)
+---
+
+<PageLayout title={t("page")}>
+    {modes.map(value => (
+            <div class="dark:bg-neutral-800 rounded-md p-4 border border-neutral-400 shadow-md my-4 flex flex-col
+                 md:flex-row">
+                <Image height="300" width="300" src={imageMap[value.data.translationKey]} alt={t(value.data.translationKey + ".title")} class="dark:invert"></Image>
+                <div class="ml-4">
+                    <h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
+                    <div>{t(value.data.translationKey + ".description")}</div>
+                    <div class="mt-2 flex flex-col">
+                        <a href="/public" class="text-yellow-300 hover:underline w-fit">{t("rules")}</a>
+                        <a href="/public" class="text-yellow-300 hover:underline w-fit">{t("council")}</a>
+                        {value.data.ranked ? <a href="/public" class="text-yellow-300 hover:underline w-fit">{t("ranking")}</a> : null}
+                    </div>
+                </div>
+            </div>))}
+</PageLayout>