Add EsLint

.eslintrc.json

@@ -0,0 +1,53 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:astro/recommended",
+        "plugin:svelte/recommended"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "overrides": [
+        {
+            "files": ["*.astro"],
+            "parser": "astro-eslint-parser",
+            "parserOptions": {
+                "sourceType": "module"
+            },
+            "rules": {
+                "astro/no-conflict-set-directives": "error",
+                "astro/no-unused-define-vars-in-style": "error"
+            }
+        }
+    ],
+    "rules": {
+        "comma-spacing": ["error", { "before": false, "after": true }],
+        "no-multiple-empty-lines": ["error", { "max": 1, "maxEOF": 1 }],
+        "indent": [
+            "error",
+            4
+        ],
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "double"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

package.json

@@ -18,28 +18,34 @@
 		"ci": "pnpm run clean:dist && pnpm install && pnpm run i18n:sync && pnpm run build && pnpm run package"
 	},
 	"devDependencies": {
-		"@astrojs/svelte": "^5.0.1",
+		"@astrojs/svelte": "^5.0.2",
-		"@astrojs/tailwind": "^5.0.3",
+		"@astrojs/tailwind": "^5.0.4",
 		"@astropub/icons": "^0.2.0",
 		"@types/color": "^3.0.6",
 		"@types/crypto-js": "^4.2.1",
-		"@types/node": "^20.10.4",
+		"@types/node": "^20.10.5",
+		"@typescript-eslint/eslint-plugin": "^6.15.0",
+		"@typescript-eslint/parser": "^6.15.0",
 		"autoprefixer": "^10.4.16",
 		"cssnano": "^6.0.2",
-		"esbuild": "^0.19.9",
+		"esbuild": "^0.19.10",
+		"eslint": "^8.56.0",
+		"eslint-plugin-astro": "^0.31.0",
+		"eslint-plugin-jsx-a11y": "^6.8.0",
+		"eslint-plugin-svelte": "^2.35.1",
 		"postcss-nesting": "^12.0.2",
 		"sass": "^1.69.5",
 		"svelte": "^4.2.8",
-		"tailwind-merge": "^2.1.0",
+		"tailwind-merge": "^2.2.0",
-		"tailwindcss": "^3.3.6",
+		"tailwindcss": "^3.4.0",
 		"typescript": "^5.3.3"
 	},
 	"dependencies": {
 		"@astrojs/sitemap": "^3.0.3",
 		"@codemirror/lang-json": "^6.0.1",
 		"@ddietr/codemirror-themes": "^1.4.2",
-		"astro": "^4.0.6",
+		"astro": "^4.0.7",
-		"astro-i18n": "^2.1.18",
+		"astro-i18n": "^2.2.0",
 		"astro-robots-txt": "^1.0.0",
 		"astro-seo": "^0.8.0",
 		"chart.js": "^4.4.1",
@@ -50,7 +56,7 @@
 		"dayjs": "^1.11.10",
 		"easymde": "^2.18.0",
 		"flowbite": "^1.8.1",
-		"flowbite-svelte": "^0.44.20",
+		"flowbite-svelte": "^0.44.21",
 		"flowbite-svelte-icons": "^0.4.5",
 		"sharp": "^0.32.6",
 		"svelte-awesome": "^3.3.0",

src/components/admin/pages/Edit.svelte

@@ -38,8 +38,6 @@ $: availableBranches = $branches.map((branch) => ({
     value: branch
 }))
 
-$: console.log(availableBranches)
-
 async function createBranch() {
     const name = prompt("Branch name:")
     if (name) {

src/components/admin/pages/edit/MDEMarkdownEditor.svelte

@@ -26,11 +26,11 @@
     let editor: HTMLTextAreaElement;
     let mde: EasyMDE;
 
-    onMount(() => {
+    onMount(async () => {
         mde = new EasyMDE({
             element: editor,
             initialValue: value,
-            spellChecker: false,
+            spellChecker: false
         })
         mde.codemirror.on("change", () => {
             value = mde.value();

src/layouts/Basic.astro

@@ -1,30 +1,30 @@
 ---
-import icon from '../images/logo.png';
+import icon from "../images/logo.png";
 import {getImage} from "astro:assets";
 import {astroI18n} from "astro-i18n";
 const { title, description } = Astro.props.frontmatter || Astro.props;
 import { SEO } from "astro-seo";
 
-const iconImage = await getImage({src: icon, height: 32, width: 32, format: 'png', quality: 100});
+const iconImage = await getImage({src: icon, height: 32, width: 32, format: "png", quality: 100});
 ---
 
 <html lang={astroI18n.locale} class="dark">
-<head>
+    <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8">
-    <meta name="viewport"
+        <meta name="viewport"
-          content="width=device-width, user-scalable=5, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
+            content="width=device-width, user-scalable=5, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <meta name="icbm" content="52.370216;4.895168"/>
+        <meta name="icbm" content="52.370216;4.895168"/>
-    <link rel="icon" type="imgage/png" href={iconImage.src} />
+        <link rel="icon" type="imgage/png" href={iconImage.src} />
 
-    <SEO
+        <SEO
-        title={title}
+            title={title}
-        description={description}
+            description={description}
-    />
+        />
 
-    <slot name="head" />
+        <slot name="head" />
-</head>
+    </head>
-<body class="dark:bg-zinc-800">
+    <body class="dark:bg-zinc-800">
-    <slot />
+        <slot />
-</body>
+    </body>
 </html>

src/layouts/NavbarLayout.astro

@@ -1,11 +1,11 @@
 ---
 import { Image } from "astro:assets";
 import Basic from "./Basic.astro";
-import '../styles/button.css';
+import "../styles/button.css";
-import localLogo from "../images/logo.png"
+import localLogo from "../images/logo.png";
-import {YoutubeSolid, DiscordSolid, CaretDownOutline} from "flowbite-svelte-icons"
+import {YoutubeSolid, DiscordSolid, CaretDownOutline} from "flowbite-svelte-icons";
 import {t} from "astro-i18n";
-import {l} from "../util/util"
+import {l} from "../util/util";
 
 import ServerStatus from "../components/ServerStatus.svelte";
 
@@ -83,26 +83,26 @@ const { title } = Astro.props;
                 </div>
             </nav-bar>
             <script>
-                class Navbar extends HTMLElement {
+class Navbar extends HTMLElement {
-                    constructor() {
+    constructor() {
-                        super();
+        super();
-                        if (window.scrollY != 0) {
+        if (window.scrollY != 0) {
-                            this.classList.add("scrolled");
+            this.classList.add("scrolled");
-                        } else {
+        } else {
-                            this.classList.remove("scrolled");
+            this.classList.remove("scrolled");
-                        }
+        }
 
-                        window.onscroll = e => {
+        window.onscroll = e => {
-                            if (window.scrollY != 0) {
+            if (window.scrollY != 0) {
-                                this.classList.add("scrolled");
+                this.classList.add("scrolled");
-                            } else {
+            } else {
-                                this.classList.remove("scrolled");
+                this.classList.remove("scrolled");
-                            }
+            }
-                        }
+        };
-                    }
+    }
-                }
+}
-;
+
-                customElements.define('nav-bar', Navbar);
+customElements.define("nav-bar", Navbar);
             </script>
             <main class="flex-1">
                 <slot />

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

@@ -1,6 +1,6 @@
 ---
-import {getCollection} from 'astro:content'
+import {getCollection} from "astro:content";
-import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
+import {astroI18n, createGetStaticPaths} from "astro-i18n";
 import PageLayout from "../layouts/PageLayout.astro";
 import LanguageWarning from "../components/LanguageWarning.astro";
 
@@ -22,14 +22,13 @@ export const getStaticPaths = createGetStaticPaths(async () => {
         params: {
             slug: fixLink(page.slug)
         }
-    }) )
+    }));
-})
+});
 
 const { page } = Astro.props;
 const { Content } = await page.render();
 ---
 
-
 <PageLayout title={page.data.title}>
     <article>
         {page.data.german && (

src/pages/admin/index.astro

@@ -1,5 +1,5 @@
 ---
-import App from '../../components/admin/App.svelte'
+import App from "../../components/admin/App.svelte";
 import Basic from "../../layouts/Basic.astro";
 ---
 

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

@@ -1,23 +1,23 @@
 ---
-import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
+import {astroI18n, createGetStaticPaths} from "astro-i18n";
 import {getCollection, CollectionEntry} from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
-import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons"
+import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons";
 import TagComponent from "../../components/TagComponent.astro";
 import LanguageWarning from "../../components/LanguageWarning.astro";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
-    const posts = await getCollection('announcements', entry => entry.id.split('/')[0] === astroI18n.locale);
+    const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
 
-    const germanPosts = await getCollection('announcements', entry => entry.id.split('/')[0] === 'de');
+    const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
 
     germanPosts.forEach(value => {
         if (posts.find(post => post.data.key === value.data.key)) {
-            return
+            return;
         } else {
-            posts.push(value)
+            posts.push(value);
         }
-    })
+    });
 
     return posts.map(value => ({
         params: {
@@ -25,13 +25,13 @@ export const getStaticPaths = createGetStaticPaths(async () => {
         },
         props: {
             post: value,
-            german: value.id.split('/')[0] != astroI18n.locale
+            german: value.id.split("/")[0] != astroI18n.locale
         }
-    }))
+    }));
-})
+});
 
 interface Props {
-    post: CollectionEntry<'announcements'>,
+    post: CollectionEntry<"announcements">,
     german: boolean
 }
 
@@ -43,14 +43,14 @@ const { Content } = await post.render();
     <article>
         <h1 class="text-4xl mb-0">{post.data.title}</h1>
         <h5 class="flex items-center mt-2 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
-                <TagComponent tag={tag} />
+            <TagComponent tag={tag} />
         ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
-            day: 'numeric',
+            day: "numeric",
-            month: 'short',
+            month: "short",
-            year: 'numeric'
+            year: "numeric"
         }).format(post.data.created)} </h5>
         {german && (
-                <LanguageWarning />
+            <LanguageWarning />
         )}
         <Content />
         <script>
@@ -64,56 +64,56 @@ const { Content } = await post.render();
 
             class FightTableElement extends HTMLElement {
                 connectedCallback(): void {
-                    if (!eventMounts.has(this.dataset['event'])) {
+                    if (!eventMounts.has(this.dataset["event"])) {
-                        eventMounts.set(this.dataset['event'], [])
+                        eventMounts.set(this.dataset["event"], []);
                     }
-                    const rows = Number.parseInt(this.dataset['rows']);
+                    const rows = Number.parseInt(this.dataset["rows"]);
-                    eventMounts.get(this.dataset['event']).push(ev => {
+                    eventMounts.get(this.dataset["event"]).push(ev => {
                         new FightTable({
                             target: this,
                             props: {
                                 event: ev,
-                                group: this.dataset['group'],
+                                group: this.dataset["group"],
                                 rows: !isNaN(rows) ? rows : 1,
                             }
-                        })
+                        });
-                    })
+                    });
                 }
             }
 
             class GroupTableElement extends HTMLElement {
                 connectedCallback(): void {
-                    if (!eventMounts.has(this.dataset['event'])) {
+                    if (!eventMounts.has(this.dataset["event"])) {
-                        eventMounts.set(this.dataset['event'], [])
+                        eventMounts.set(this.dataset["event"], []);
                     }
-                    const rows = Number.parseInt(this.dataset['rows']);
+                    const rows = Number.parseInt(this.dataset["rows"]);
-                    eventMounts.get(this.dataset['event']).push(ev => {
+                    eventMounts.get(this.dataset["event"]).push(ev => {
                         new GroupTable({
                             target: this,
                             props: {
                                 event: ev,
-                                group: this.dataset['group'],
+                                group: this.dataset["group"],
                                 rows: !isNaN(rows) ? rows : 1,
                             }
-                        })
+                        });
-                    })
+                    });
                 }
             }
 
-            customElements.define('fight-table', FightTableElement);
+            customElements.define("fight-table", FightTableElement);
-            customElements.define('group-table', GroupTableElement);
+            customElements.define("group-table", GroupTableElement);
 
             function mountEvent() {
                 for (const key of eventMounts.keys()) {
                     get(eventRepo).getEvent(key).then(ev => {
                         for (const mount of eventMounts.get(key)) {
-                            mount(ev)
+                            mount(ev);
                         }
-                    })
+                    });
                 }
             }
 
-            mountEvent()
+            mountEvent();
         </script>
     </article>
 </PageLayout>

src/pages/announcements/index.astro

@@ -1,22 +1,22 @@
 ---
-import { getCollection } from "astro:content"
+import { getCollection } from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
 import {astroI18n, t} from "astro-i18n";
 import PostComponent from "../../components/PostComponent.astro";
 import dayjs from "dayjs";
 
 async function getPosts() {
-    const posts = await getCollection('announcements', entry => entry.id.split('/')[0] === astroI18n.locale);
+    const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
 
-    const germanPosts = await getCollection('announcements', entry => entry.id.split('/')[0] === 'de');
+    const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
 
     germanPosts.forEach(value => {
         if (posts.find(post => post.data.key === value.data.key)) {
-            return
+            return;
         } else {
-            posts.push(value)
+            posts.push(value);
         }
-    })
+    });
 
     return posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).filter((value, index) => index < 20);
 }

src/pages/announcements/tags/[tag].astro

@@ -8,31 +8,31 @@ import PostComponent from "../../../components/PostComponent.astro";
 import dayjs from "dayjs";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
-    let posts = (await getCollection('announcements', entry => entry.id.split("/")[0] === astroI18n.locale));
+    let posts = (await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale));
 
-    const germanPosts = await getCollection('announcements', entry => entry.id.split('/')[0] === 'de');
+    const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
 
     posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix());
 
     germanPosts.forEach(value => {
         if (posts.find(post => post.data.key === value.data.key)) {
-            return
+            return;
         } else {
-            posts.push(value)
+            posts.push(value);
         }
-    })
+    });
 
-    posts = posts.filter((value, index) => index < 20)
+    posts = posts.filter((value, index) => index < 20);
 
-    let groupedByTags: Record<string, CollectionEntry<'announcements'>[]> = {}
+    let groupedByTags: Record<string, CollectionEntry<"announcements">[]> = {};
     posts.forEach(post => {
         post.data.tags.forEach(tag => {
             if (!groupedByTags[tag]) {
-                groupedByTags[tag] = []
+                groupedByTags[tag] = [];
             }
-            groupedByTags[tag].push(post)
+            groupedByTags[tag].push(post);
-        })
+        });
-    })
+    });
 
     return Object.keys(groupedByTags).map(tag => ({
         params: {
@@ -42,11 +42,11 @@ export const getStaticPaths = createGetStaticPaths(async () => {
             posts: groupedByTags[tag],
             tag: tag
         }
-    }))
+    }));
-})
+});
 
 interface Props {
-    posts: CollectionEntry<'announcements'>[]
+    posts: CollectionEntry<"announcements">[]
     tag: string
 }
 

src/pages/dashboard.astro

@@ -1,7 +1,5 @@
 ---
 import Dashboard from "../components/Dashboard.svelte";
-import {AES} from "crypto-js";
-import {l} from "../util/util";
 import PageLayout from "../layouts/PageLayout.astro";
 import {t} from "astro-i18n";
 ---

src/pages/downloads.astro

@@ -14,11 +14,11 @@ const downloads = await getCollection("downloads");
             <div class="py-4">{t(e.data.description)}</div>
 
             <div class="flex flex-col">
-                {typeof e.data.url === 'object' ?
+                {typeof e.data.url === "object" ?
                     Object.entries(e.data.url).map(value => (
-                            <a href={value[1].startsWith("/") ? l(value[1]) : value[1]} class="text-blue-500 hover:underline w-fit">{t(value[0])}</a>
+                        <a href={value[1].startsWith("/") ? l(value[1]) : value[1]} class="text-blue-500 hover:underline w-fit">{t(value[0])}</a>
                     ))
-                 :
+                    :
                     <a href={e.data.url} class="text-blue-500 hover:underline w-fit">{t("Download")}</a>
                 }
                 {e.data.sourceUrl ? <a class="text-blue-500 hover:underline w-fit" href={e.data.sourceUrl}>Quelle</a> : null}

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

@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content'
+import { getCollection } from "astro:content";
 import NavbarLayout from "../../layouts/NavbarLayout.astro";
 import {astroI18n, createGetStaticPaths} from "astro-i18n";
 
@@ -8,14 +8,13 @@ export const getStaticPaths = createGetStaticPaths(async () => {
 
     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}>
     <article>
         <h1 class="text-left">{page.data.title}</h1>

src/pages/help/index.astro

@@ -2,7 +2,6 @@
 import {getCollection} from "astro:content";
 import {astroI18n} from "astro-i18n";
 
-import NavbarLayout from "../../layouts/NavbarLayout.astro";
 import {l} from "../../util/util";
 import PageLayout from "../../layouts/PageLayout.astro";
 let posts = await getCollection("help", entry => entry.id.split("/")[0] === astroI18n.locale);
@@ -13,9 +12,9 @@ let posts = await getCollection("help", entry => entry.id.split("/")[0] === astr
         <h1>Helpcenter</h1>
         <h1 class="text-red-700 text-4xl">WIP!</h1>
         {posts.map(value => (
-                <a href={l("/help/" + value.slug)}>
+            <a href={l("/help/" + value.slug)}>
-                    <h2>{value.data.title}</h2>
+                <h2>{value.data.title}</h2>
-                </a>
+            </a>
         ))}
     </div>
 </PageLayout>

src/pages/index.astro

@@ -3,146 +3,147 @@ import NavbarLayout from "../layouts/NavbarLayout.astro";
 
 import { Image } from "astro:assets";
 import localBau from "../images/2023-10-08_20.43.43.png";
-import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
+import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons";
 import {t} from "astro-i18n";
-import {l} from "../util/util"
+import {l} from "../util/util";
 import PlayerCount from "../components/PlayerCount.svelte";
-import "../../public/fonts/barlow-condensed/barlow-condensed.css"
+import "../../public/fonts/barlow-condensed/barlow-condensed.css";
+import type {Player} from "../components/types/data";
 
-const teamMember = await fetch("http://localhost:1337/data/team").then(value => value.json())
+const teamMember = await fetch("http://localhost:1337/data/team").then(value => value.json());
 
 function groupByGroup(array) {
-	const groups = new Map<string, any>();
+    const groups = new Map<string, Player[]>();
 
-	for (let user of array) {
+    for (let user of array) {
-		if (groups.has(user.prefix)) {
+        if (groups.has(user.prefix)) {
-			groups.get(user.prefix).push(user)
+            groups.get(user.prefix).push(user);
-		} else {
+        } else {
-			groups.set(user.prefix, [user])
+            groups.set(user.prefix, [user]);
-		}
+        }
-	}
+    }
 
-	return groups
+    return groups;
 }
 
-const groupedTeamMember = groupByGroup(teamMember)
+const groupedTeamMember = groupByGroup(teamMember);
 
 function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
-	const arr = []
+    const arr = [];
-	for (let [key, value] of i) {
+    for (let [key, value] of i) {
-		arr.push(fn(key, value))
+        arr.push(fn(key, value));
-	}
+    }
-	return arr
+    return arr;
 }
 
 ---
 
 <NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
-	<div class="w-full h-screen relative mb-4">
+    <div class="w-full h-screen relative mb-4">
-		<Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
+        <Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
-		<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
+        <drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
-			<h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
+            <h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow" style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
-				<span class="text-yellow-400">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
+                <span class="text-yellow-400">{t("home.title.first")}</span><span class="text-neutral-600">{t("home.title.second")}</span>
-			</h1>
+            </h1>
-			<text-carousel class="h-20 w-full relative select-none">
+            <text-carousel class="h-20 w-full relative select-none">
-				<h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
+                <h2 class="-translate-y-16">{t("home.subtitle.1")}</h2>
-				<h2>{t("home.subtitle.2")}<PlayerCount client:only="svelte" /></h2>
+                <h2>{t("home.subtitle.2")}<PlayerCount client:only="svelte" /></h2>
-				<h2>{t("home.subtitle.3")}</h2>
+                <h2>{t("home.subtitle.3")}</h2>
-			</text-carousel>
+            </text-carousel>
-			<a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16" style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")} <CaretRight width="24" heigth="24" /></a>
+            <a href={l("join")} class="btn mt-32 px-8 flex opacity-0 -translate-y-16" style="transition: transform .3s ease-out, opacity .3s linear">{t("home.join")} <CaretRight width="24" heigth="24" /></a>
-			<script>
+            <script>
 				class TextCarousel extends HTMLElement {
-					current = 0;
+        current = 0;
 
-					connectedCallback() {
+        connectedCallback() {
-						this._current.classList.add("!opacity-100")
+            this._current.classList.add("!opacity-100");
 
-						for (let i = 0; i < this.children.length; i++) {
+            for (let i = 0; i < this.children.length; i++) {
-							if (i !== this.current) {
+                if (i !== this.current) {
-								this.children[i].classList.add("translate-y-8")
+                    this.children[i].classList.add("translate-y-8");
-							}
+                }
-						}
+            }
 
-						setInterval(() => {
+            setInterval(() => {
-							this.next()
+                this.next();
-						}, 5000)
+            }, 5000);
-					}
+        }
 
-					get _current() {
+        get _current() {
-						return this.children[this.current]
+            return this.children[this.current];
-					}
+        }
 
-					next() {
+        next() {
-						this._current.classList.remove("!opacity-100")
+            this._current.classList.remove("!opacity-100");
-						this._current.classList.add("translate-y-8")
+            this._current.classList.add("translate-y-8");
-						this._current.classList.remove("!delay-500")
+            this._current.classList.remove("!delay-500");
-						this.current = (this.current + 1) % this.children.length
+            this.current = (this.current + 1) % this.children.length;
-						this._current.classList.add("!opacity-100")
+            this._current.classList.add("!opacity-100");
-						this._current.classList.remove("translate-y-8")
+            this._current.classList.remove("translate-y-8");
-						this._current.classList.add("!delay-500")
+            this._current.classList.add("!delay-500");
-					}
+        }
 				}
 
 				class DropIn extends HTMLElement {
-					connectedCallback() {
+        connectedCallback() {
-						for (let child of this.children) {
+            for (let child of this.children) {
-							if(child.classList.contains("opacity-0")) {
+                if(child.classList.contains("opacity-0")) {
-								child.classList.remove("opacity-0")
+                    child.classList.remove("opacity-0");
-								child.classList.remove("-translate-y-16")
+                    child.classList.remove("-translate-y-16");
-							} else {
+                } else {
-								child.children[0].classList.remove("opacity-0")
+                    child.children[0].classList.remove("opacity-0");
-								child.children[0].classList.remove("-translate-y-16")
+                    child.children[0].classList.remove("-translate-y-16");
-							}
+                }
-						}
+            }
-					}
+        }
-				}
+    }
 
 				customElements.define("text-carousel", TextCarousel);
 				customElements.define("drop-in", DropIn);
-			</script>
+            </script>
-		</drop-in>
+        </drop-in>
-	</div>
+    </div>
-	<section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
+    <section class="w-full flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
-		<div class="py-10 flex flex-col lg:flex-row">
+        <div class="py-10 flex flex-col lg:flex-row">
-			<div class="card">
+            <div class="card">
-				<Archive heigth="64" width="64" />
+                <Archive heigth="64" width="64" />
-				<h1>{t("home.benefits.historic.title")}</h1>
+                <h1>{t("home.benefits.historic.title")}</h1>
-				<p>{t("home.benefits.historic.description.1")}</p>
+                <p>{t("home.benefits.historic.description.1")}</p>
-				<p>{t("home.benefits.historic.description.2")}</p>
+                <p>{t("home.benefits.historic.description.2")}</p>
-			</div>
+            </div>
-			<div class="card">
+            <div class="card">
-				<Rocket heigth="64" width="64" />
+                <Rocket heigth="64" width="64" />
-				<h1>{t("home.benefits.server.title")}</h1>
+                <h1>{t("home.benefits.server.title")}</h1>
-				<p>{t("home.benefits.server.description")}</p>
+                <p>{t("home.benefits.server.description")}</p>
-			</div>
+            </div>
-			<div class="card">
+            <div class="card">
-				<Bell heigth="64" width="64" />
+                <Bell heigth="64" width="64" />
-				<h1>{t("home.benefits.events.title")}</h1>
+                <h1>{t("home.benefits.events.title")}</h1>
-				<p>{t("home.benefits.events.description.1")}</p>
+                <p>{t("home.benefits.events.description.1")}</p>
-				<p>{t("home.benefits.events.description.2")}</p>
+                <p>{t("home.benefits.events.description.2")}</p>
-			</div>
+            </div>
-		</div>
+        </div>
-		<a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}<CaretRight width="24" heigth="24" /></a>
+        <a class="btn px-8 flex" href={l("/about")}>{t("home.benefits.read")}<CaretRight width="24" heigth="24" /></a>
-	</section>
+    </section>
-	<section class="w-full py-12">
+    <section class="w-full py-12">
-		{mapMap(groupedTeamMember, (key, value) => (
+        {mapMap(groupedTeamMember, (key, value) => (
-			<div class="flex items-center flex-col">
+            <div class="flex items-center flex-col">
-				<h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
+                <h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
-				<div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
+                <div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
-					{value.map(v => (
+                    {value.map(v => (
-						<div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg
+                        <div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg
 									hover:scale-105 hover:shadow-2xl
 									dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
-							<figure class="flex flex-col items-center">
+                            <figure class="flex flex-col items-center">
-								<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
+                                <figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
-								<Image src={`https://visage.surgeplay.com/bust/150/${v.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={v.name + "s bust"} width="150" height="150"  />
+                                <Image src={`https://visage.surgeplay.com/bust/150/${v.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={v.name + "s bust"} width="150" height="150"  />
-							</figure>
+                            </figure>
-						</div>
+                        </div>
-					))}
+                    ))}
-				</div>
+                </div>
-			</div>
+            </div>
-		))}
+        ))}
-	</section>
+    </section>
 </NavbarLayout>
 
 <style>

src/pages/login.astro

@@ -1,5 +1,4 @@
 ---
-import {l} from "../util/util";
 import Login from "../components/Login.svelte";
 import NavbarLayout from "../layouts/NavbarLayout.astro";
 import {t} from "astro-i18n";

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

@@ -14,7 +14,7 @@ export const getStaticPaths = createGetStaticPaths(async () => {
         params: {
             gamemode: value.id
         }
-    }))
+    }));
 });
 
 interface Props {
@@ -24,7 +24,6 @@ interface Props {
 const { mode } = Astro.props;
 ---
 
-
 <PageLayout title={t("elo.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" />

src/pages/rules/[mode].astro

@@ -1,5 +1,5 @@
 ---
-import {getCollection, CollectionEntry} from 'astro:content'
+import {getCollection, CollectionEntry} from "astro:content";
 import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
 import PageLayout from "../../layouts/PageLayout.astro";
 import LanguageWarning from "../../components/LanguageWarning.astro";
@@ -7,20 +7,20 @@ import LanguageWarning from "../../components/LanguageWarning.astro";
 export const getStaticPaths = createGetStaticPaths(async () => {
     let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
 
-    const germanPosts = await getCollection('rules', entry => entry.id.split('/')[0] === 'de');
+    const germanPosts = await getCollection("rules", entry => entry.id.split("/")[0] === "de");
 
     germanPosts.forEach(value => {
         if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) {
-            return
+            return;
         } else {
-            posts.push(value)
+            posts.push(value);
         }
-    })
+    });
 
     return posts.map((page) => ({
         props: { page, german: page.id.split("/")[0] != astroI18n.locale }, params: { mode: page.slug.split("/")[1] }
-    }))
+    }));
-})
+});
 
 interface Props {
     page: CollectionEntry<"rules">,
@@ -31,7 +31,6 @@ const { page, german } = Astro.props;
 const { Content } = await page.render();
 ---
 
-
 <PageLayout title={t("title", {mode: t(`${page.data.translationKey}.title`, {}, {route: "/rules"})}, {route: "/rules"})}>
     <article>
         {german && (

src/pages/rules/index.astro

@@ -1,9 +1,8 @@
 ---
-
+import wg from "../../images/WarGears.png";
-import wg from "../../images/WarGears.png"
+import mwg from "../../images/MiniWarGears.png";
-import mwg from "../../images/MiniWarGears.png"
+import as from "../../images/AirShips.png";
-import as from "../../images/AirShips.png"
+import ws from "../../images/WarShips.png";
-import ws from "../../images/WarShips.png"
 import {t} from "astro-i18n";
 import {getCollection} from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
@@ -16,24 +15,24 @@ const imageMap = {
     "as": as,
     "ws": ws,
     "qg": mwg
-}
+};
 
-const modes = await getCollection("modes", entry => entry.data.main)
+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
+        <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>
+            <Image height="300" width="300" src={imageMap[value.data.translationKey]} alt={t(value.data.translationKey + ".title")} class="dark:invert"></Image>
-                <div class="ml-4">
+            <div class="ml-4">
-                    <h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
+                <h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
-                    <div>{t(value.data.translationKey + ".description")}</div>
+                <div>{t(value.data.translationKey + ".description")}</div>
-                    <div class="mt-2 flex flex-col">
+                <div class="mt-2 flex flex-col">
-                        <a href={l(`/rules/${value.id}`)} 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={l(`/announcements/tags/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("announcements")}</a>
+                    <a href={l(`/announcements/tags/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("announcements")}</a>
-                        {value.data.ranked ? <a href={l(`/ranked/${value.id}`)} 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>))}
+            </div>
+        </div>))}
 </PageLayout>

src/util/util.ts

@@ -17,21 +17,22 @@
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import { l as proxyL, t as proxyT } from 'astro-i18n'
+import { l as proxyL } from "astro-i18n";
 
 const locales = ["de"];
 
 export const l =  (route: string) => {
-    const transPath = proxyL(route)
+    const transPath = proxyL(route);
 
     if(import.meta.env.DEV) {
         return transPath;
     }
 
-    let [empty, locale, ...rest] = transPath.split("/");
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const [_, locale, ...rest] = transPath.split("/");
     if (locales.includes(locale)) {
         return "/" + rest.join("/");
     }
 
     return transPath;
-}
+};