New Code Editor and fun

src/pages/ranked/[...gamemode].astro

@@ -1,3 +1,31 @@
 ---
+import {createGetStaticPaths, t} from "astro-i18n";
+import {getCollection, CollectionEntry} from "astro:content";
+import PageLayout from "../../layouts/PageLayout.astro";
+import EloTable from "../../components/EloTable.svelte";
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    const modes = await getCollection("modes", entry => entry.data.ranked);
+
+    return modes.map(value => ({
+        props: {
+            mode: value
+        },
+        params: {
+            gamemode: value.id
+        }
+    }))
+});
+
+interface Props {
+    mode: CollectionEntry<"modes">
+}
+
+const { mode } = Astro.props;
+---
 
----
+
+<PageLayout title={t("ranked.title", {mode: t(`${mode.data.translationKey}.title`)})}>
+    <h1 class="text-2xl mb-2">{t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}</h1>
+    <EloTable gamemode={mode.id} client:only="svelte" />
+</PageLayout>