New Code Editor and fun

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

@@ -1,22 +1,26 @@
 ---
-import {getCollection} from 'astro:content'
-import {astroI18n, createGetStaticPaths} from "astro-i18n";
-import PageLayout from "../layouts/PageLayout.astro";
+import {getCollection, CollectionEntry} 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("rules");
+    let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
 
-    return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
-        props: { page }, params: { slug: page.slug }
-    }) )
+    return posts.map((page) => ({
+        props: { page }, params: { slug: page.slug.split("/")[1] }
+    }))
 })
 
+interface Props {
+    page: CollectionEntry<"rules">
+}
+
 const { page } = Astro.props;
 const { Content } = await page.render();
 ---
 
 
-<PageLayout title={page.data.title}>
+<PageLayout title={t("title", {mode: t(`${page.data.translationKey}.title`)})}>
     <article>
         <Content />
     </article>
@@ -24,40 +28,8 @@ const { Content } = await page.render();
 
 <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;
+        >* {
+            all: revert;
         }
 
         code {

src/pages/rules/index.astro

@@ -8,6 +8,7 @@ import {t} from "astro-i18n";
 import {getCollection} from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
 import {Image} from "astro:assets";
+import {l} from "../../util/util";
 
 const imageMap = {
     "wg": wg,
@@ -28,9 +29,9 @@ const modes = await getCollection("modes", entry => entry.data.main)
                     <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={l(`/rules/${value.id}`)} 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}
+                        {value.data.ranked ? <a href={l(`/ranked/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t(`ranking`)}</a> : null}
                     </div>
                 </div>
             </div>))}