Images

src/components/EloTable.svelte

@@ -40,7 +40,7 @@
                 <td>{t("elo.name")}</td>
                 <td>{t("elo.elo")}</td>
             </tr>
-            {#each data as player, i}
+            {#each data as player, i (player.id)}
                 <tr>
                     <td>{`${i + 1}.`}</td>
                     <td>{player.name}</td>

src/components/GroupTable.svelte

@@ -49,14 +49,14 @@
 <div>
     <table>
         <tr class="font-bold border-b">
-            {#each Array(rows) as _}
+            {#each Array(rows) as i (i)}
                 <td>{t("announcements.table.team")}</td>
                 <td>{t("announcements.table.points")}</td>
             {/each}
         </tr>
         {#each window(teamPoints, rows) as teams}
             <tr>
-                {#each teams as team}
+                {#each teams as team (team.team.id)}
                     <td>{team.team.name}</td>
                     <td>{team.points}</td>
                 {/each}

src/components/admin/components/TypeAheadSearch.svelte

@@ -40,7 +40,7 @@
     <div class="overflow-y-auto p-3 text-sm w-60" slot="header">
         <Search bind:value={searchValue} on:focus={() => open = true} on:keydown={() => open = true}/>
     </div>
-    {#each filteredItems as item}
+    {#each filteredItems as item (item)}
         <button on:click={() => selectItem(item)} class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600 w-full cursor-pointer border-b border-b-gray-600">
             {item.name}
         </button>

src/components/admin/pages/Perms.svelte

@@ -102,7 +102,7 @@
                 </div>
                 {#if filteredPlayers.length < 100}
                     <ul class="flex-1 overflow-scroll">
-                        {#each filteredPlayers as player}
+                        {#each filteredPlayers as player (player.id)}
                             <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer" class:text-orange-500={player.id === selectedPlayer} on:click|preventDefault={() => selectedPlayer = player.id}>
                                 {player.name}
                             </li>

src/components/admin/pages/event/FightList.svelte

@@ -216,7 +216,7 @@
             <Checkbox class="ml-2 text-center" checked={group.fights.every(gf => selectedFights.has(gf))} on:click={() => cycleGroup(group.fights)}/>
             <h1 class="ml-4 text-2xl">{group.group ?? "Ungrouped"}</h1>
         </div>
-        {#each group.fights.sort((a, b) => a.start - b.start) as fight, i}
+        {#each group.fights.sort((a, b) => a.start - b.start) as fight, i (fight.id)}
             <FightCard {fight} {i} {data} selected={selectedFights.has(fight)}
                 on:select={() => {
                     if (selectedFights.has(fight)) {

src/components/admin/pages/event/TeamList.svelte

@@ -24,7 +24,7 @@
     export let data: ExtendedEvent;
 </script>
 <div class="m-4">
-    {#each data.teams as team}
+    {#each data.teams as team (team.id)}
         <div class="flex flex-row my-2">
             <Avatar size="lg">{team.kuerzel}</Avatar>
             <div class="m-2">

src/components/admin/pages/event/modals/CreateFightModal.svelte

@@ -58,7 +58,7 @@
                 redTeam: parseInt(redTeam),
                 start: dayjs(start),
                 map,
-                kampfleiter: parseInt(kampfleiter),
+                kampfleiter: parseInt(kampfleiter!),
                 group,
             });
             reset()

src/components/admin/pages/generate/GroupGenerator.svelte

@@ -37,12 +37,12 @@
 
     function dragToNewGroup(event: CustomEvent<DragEvent>) {
         event.detail.preventDefault();
-        let teamId = parseInt(event.detail.dataTransfer.getData("team"));
+        let teamId = parseInt(event.detail.dataTransfer!.getData("team"));
         groups = [...groups.map(value => value.filter(value1 => value1 != teamId)), [teamId]].filter(value => value.length > 0);
     }
 
     function teamDragStart(ev: DragEvent, team: Team) {
-        ev.dataTransfer.setData("team", team.id.toString())
+        ev.dataTransfer!.setData("team", team.id.toString())
     }
 
     let resetDragOver = false;
@@ -54,14 +54,14 @@
 
     function dropReset(ev: DragEvent) {
         ev.preventDefault();
-        let teamId = parseInt(ev.dataTransfer.getData("team"));
+        let teamId = parseInt(ev.dataTransfer!.getData("team"));
         groups = groups.map(group => group.filter(team => team !== teamId)).filter(group => group.length > 0);
         resetDragOver = false;
     }
 
     function dropGroup(ev: CustomEvent<DragEvent>, groupIndex: number) {
         ev.preventDefault();
-        let teamId = parseInt(ev.detail.dataTransfer.getData("team"));
+        let teamId = parseInt(ev.detail.dataTransfer!.getData("team"));
         groups = groups.map((group, i) => i === groupIndex ? [...group.filter(value => value != teamId), teamId] : group.filter(value => value != teamId)).filter(group => group.length > 0);
     }
 
@@ -104,8 +104,8 @@
         groups = groups.filter(group => group.length > 0);
     }
 
-    function generateGroups(groups): number[][][][] {
-        let groupFights = [];
+    function generateGroups(groups: number[][]): number[][][][] {
+        const groupFights: number[][][][] = [];
         groups.forEach((group) => {
             let round = group.length + (group.length % 2) - 1;
             let groupFight = [];
@@ -138,8 +138,8 @@
         groupsFights.forEach((group, i) => {
             group.forEach((round, j) => {
                 round.forEach(async (fight, k) => {
-                    let blueTeam = teams.get(fight[0])
-                    let redTeam = teams.get(fight[1])
+                    const blueTeam = teams.get(fight[0])!
+                    const redTeam = teams.get(fight[1])!
 
                     await $fightRepo.createFight(data.event.id, {
                         blueTeam: blueTeam.id,
@@ -160,7 +160,7 @@
 
 <div class="flex justify-between">
     <div id="reseter" class:border-white={resetDragOver} class="flex m-2 bg-gray-800 w-fit p-2 border border-gray-700 rounded ml-4 h-20 pt-6 relative" on:dragover={resetDragOverEvent} on:dragleave={() => resetDragOver = false} on:drop={dropReset} role="group">
-        {#each teamsNotInGroup as team}
+        {#each teamsNotInGroup as team (team.id)}
             <TeamChip {team} on:dragstart={ev => teamDragStart(ev, team)}/>
         {/each}
     </div>
@@ -171,10 +171,10 @@
 </div>
 
 <div class="flex m-4 gap-4 border-b border-gray-700 pb-4">
-    {#each groups as group, i}
+    {#each groups as group, i (i)}
         <DragAcceptor on:drop={ev => dropGroup(ev, i)}>
             <h1>Group {i + 1} ({group.length})</h1>
-            {#each group as teamId}
+            {#each group as teamId (teamId)}
                 <TeamChip team={teams.get(teamId)} on:dragstart={ev => teamDragStart(ev, teams.get(teamId))}/>
             {/each}
         </DragAcceptor>

src/components/dashboard/SchematicList.svelte

@@ -81,7 +81,7 @@
             </svelte:fragment>
             <span on:click={() => dispatch("reset")} class="hover:underline hover:cursor-pointer text-2xl">{t("dashboard.schematic.home")}</span>
         </BreadcrumbItem>
-        {#each schematics.breadcrumbs as bread}
+        {#each schematics.breadcrumbs as bread (bread.id)}
             <BreadcrumbItem>
                 <svelte:fragment slot="icon">
                     <ChevronDoubleRightOutline class="w-4 h-4 mx-2 dark:text-white" />
@@ -141,7 +141,7 @@
             <th></th>
         </tr>
     {/if}
-    {#each pagedSchematics as schem}
+    {#each pagedSchematics as schem (schem.id)}
         <SchematicListTile schem={schem} players={schematics.players} on:click={schemListClick(schem.type == null, schem.id)} />
     {/each}
     </tbody>

src/components/util.ts

@@ -18,7 +18,7 @@
  */
 
 export function window<T>(arr: T[], len: number): T[][] {
-    let result: T[][] = [];
+    const result: T[][] = [];
     for (let i = 0; i < arr.length; i += len) {
         result.push(arr.slice(i, i + len));
     }

src/content/announcements/de/microneujahrsevent.md

@@ -6,6 +6,7 @@ created: 2023-12-03
 tags:
   - event
   - microwargear
+image: ../../../images/bau.jpg
 ---
 
 Liebe Community!

src/layouts/Basic.astro

@@ -20,6 +20,13 @@ const iconImage = await getImage({src: icon, height: 32, width: 32, format: "png
         <SEO
             title={title}
             description={description}
+            twitter={{
+                creator: "@chaoscaot"
+            }}
+            languageAlternates={astroI18n.locales.map((locale) => ({
+                hrefLang: locale,
+                href: `/${locale}/`
+            }))}
         />
 
         <slot name="head" />

src/layouts/NavbarLayout.astro

@@ -9,10 +9,10 @@ import {l} from "../util/util";
 
 import ServerStatus from "../components/ServerStatus.svelte";
 
-const { title } = Astro.props;
+const { title, description } = Astro.props;
 ---
 
-<Basic title={title}>
+<Basic title={title} description={description}>
     <slot name="head" slot="head" />
     <Fragment>
         <div class="min-h-screen flex flex-col">

src/layouts/PageLayout.astro

@@ -3,12 +3,13 @@ import NavbarLayout from "./NavbarLayout.astro";
 import localBau from "../images/2023-10-08_20.43.43.png";
 import { Image } from "astro:assets";
 
-const { title } = Astro.props;
+const { title, description, image } = Astro.props;
 ---
 
-<NavbarLayout title={title}>
-    <Image src={localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover"  draggable="false" />
-    <div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
+<NavbarLayout title={title} description={description}>
+    <slot name="head" slot="head" />
+    <Image src={image || localBau} alt="Bau" width="1920" height="1080" densities={[1.5, 2, 3, 4]} class="w-full h-screen dark:brightness-75 fixed -z-10 object-cover"  draggable="false" />
+    <div class="mx-auto bg-gray-100 p-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14 relative
             dark:text-white dark:bg-neutral-900" style="width: min(100vw, 75em);">
         <slot />
     </div>

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

@@ -5,6 +5,9 @@ import PageLayout from "../../layouts/PageLayout.astro";
 import {TagSolid, CalendarMonthSolid} from "flowbite-svelte-icons";
 import TagComponent from "../../components/TagComponent.astro";
 import LanguageWarning from "../../components/LanguageWarning.astro";
+import { SEO } from "astro-seo";
+import localBau from "../../images/2022-03-28_13.18.25.png";
+import {getImage, Image} from "astro:assets";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
     const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
@@ -37,18 +40,49 @@ interface Props {
 
 const {post, german} = Astro.props;
 const { Content } = await post.render();
+
+const ogImage = await getImage({
+    src: post.data.image || localBau,
+    format: "png",
+    width: 1200,
+    height: 630,
+});
+
 ---
 
-<PageLayout title={post.data.title}>
+<PageLayout title={post.data.title} description={post.data.description}>
+    <Fragment slot="head">
+        <SEO openGraph={{
+            basic: {
+                title: post.data.title,
+                description: post.data.description,
+                type: "article",
+                image: Astro.url.origin + ogImage.src,
+            },
+            article: {
+                publishedTime: post.data.created.toISOString(),
+                author: "SteamWar.de",
+                tags: post.data.tags,
+            },
+        }}
+        />
+    </Fragment>
     <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} />
-        ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
-            day: "numeric",
-            month: "short",
-            year: "numeric"
-        }).format(post.data.created)} </h5>
+        <div class={"relative w-full " + (post.data.image ? "aspect-video" : "")}>
+            {post.data.image && (
+                <Image src={post.data.image} width="1920" height="1080" alt="" class="absolute top-0 left-0 w-full rounded-2xl linear-fade" />
+            )}
+            <div class={post.data.image ? "absolute bottom-8 left-2" : "mb-4"}>
+                <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} />
+                ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
+                    day: "numeric",
+                    month: "short",
+                    year: "numeric"
+                }).format(post.data.created)} </h5>
+            </div>
+        </div>
         {german && (
             <LanguageWarning />
         )}
@@ -56,7 +90,7 @@ const { Content } = await post.render();
         <script>
             import type {ExtendedEvent} from "../../components/types/event";
             import FightTable from "../../components/FightTable.svelte";
-            // @ts-ignore
+            // @ts-expect-error Import Schenanigans
             import {get} from "svelte/store";
             import {eventRepo} from "../../components/repo/repo";
             import GroupTable from "../../components/GroupTable.svelte";
@@ -137,3 +171,9 @@ const { Content } = await post.render();
         }
     }
 </style>
+
+<style>
+    .linear-fade {
+        mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,1), rgba(0,0,0,0));
+    }
+</style>

steamwarci.yml

@@ -1,3 +1,7 @@
+setup:
+  - "echo 'PUBLIC_API_SERVER=https://steamwar.de/eventplanner-api/
+PUBLIC_SECRET=mae6eeheeT4Quain' > .env"
+
 build:
   - "pnpm run ci"