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

---
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 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";
import "@styles/table.css";

export const getStaticPaths = createGetStaticPaths(async () => {
    const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);

    const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);

    germanPosts.forEach(value => {
        if (posts.find(post => post.data.key === value.data.key)) {
            return;
        } else {
            posts.push(value);
        }
    });

    return posts.map(value => ({
        params: {
            slug: value.slug.split("/").slice(1).join("/"),
        },
        props: {
            post: value,
            german: value.id.split("/")[0] != astroI18n.locale,
        },
    }));
});

interface Props {
    post: CollectionEntry<"announcements">,
    german: boolean
}

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} 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(),
                authors: [post.data.author ?? "SteamWar.de"],
                tags: post.data.tags,
            },
        }}
        />
    </Fragment>
    <article>
        <div class={"relative w-full " + (post.data.image ? "aspect-video" : "")}>
            {post.data.image && (
                <div class="absolute top-0 left-0 w-full aspect-video flex justify-center">
                    <Image src={post.data.image} height="1080" alt="" transition:name={post.data.title + "-image"}
                        class="rounded-2xl linear-fade object-contain h-full"/>
                </div>
            )}
            <div class={post.data.image ? "absolute bottom-8 left-2" : "mb-4"}>
                <h1 class="text-4xl mb-0" transition:name={post.data.title + "-title"}>{post.data.title}</h1>
                <div class="flex items-center mt-2 text-neutral-300">
                    <TagSolid class="w-4 h-4 mr-2"/>
                    <div transition:name={post.data.title + "-tags"}>
                        {post.data.tags.map(tag => (
                            <TagComponent tag={tag} />
                        ))}
                    </div>
                    <CalendarMonthSolid class="w-4 h-4 mr-2"/>
                    {Intl.DateTimeFormat(astroI18n.locale, {
                        day: "numeric",
                        month: "short",
                        year: "numeric",
                    }).format(post.data.created)}
                    {post.data.author && (
                        <Fragment>
                            <Image src={`https://vzge.me/face/64/${post.data.author}`} alt={post.data.author} width={16} height={16} class="mx-1" />
                            {post.data.author}
                        </Fragment>
                    )}
                </div>
            </div>
        </div>
        {german && (
            <LanguageWarning/>
        )}
        <Content/>
        <script>
            import FightTable from "@components/FightTable.svelte";
            import {get} from "svelte/store";
            import GroupTable from "@components/GroupTable.svelte";
            import {eventRepo} from "../../components/repo/event";
            import type {ExtendedEvent} from "@type/event";
            import {mount} from "svelte";

            const eventMounts: Map<string, ((ev: ExtendedEvent) => void)[]> = new Map();

            class FightTableElement extends HTMLElement {
                connectedCallback(): void {
                    if (!eventMounts.has(this.dataset["event"]!)) {
                        eventMounts.set(this.dataset["event"]!, []);
                    }
                    const rows = Number.parseInt(this.dataset["rows"]!);
                    eventMounts.get(this.dataset["event"]!)!.push(ev => {
                        mount(FightTable, {
                            target: this,
                            props: {
                                event: ev,
                                group: this.dataset["group"],
                                rows: !isNaN(rows) ? rows : 1,
                            },
                        });
                    });
                }
            }

            class GroupTableElement extends HTMLElement {
                connectedCallback(): void {
                    if (!eventMounts.has(this.dataset["event"]!)) {
                        eventMounts.set(this.dataset["event"]!, []);
                    }
                    const rows = Number.parseInt(this.dataset["rows"]!);
                    eventMounts.get(this.dataset["event"]!)!.push(ev => {
                        mount(GroupTable, {
                            target: this,
                            props: {
                                event: ev,
                                group: this.dataset["group"],
                                rows: !isNaN(rows) ? rows : 1,
                            },
                        });
                    });
                }
            }

            customElements.define("fight-table", FightTableElement);
            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);
                        }
                    });
                }
            }

            mountEvent();
        </script>
    </article>
</PageLayout>

<style is:global>
    article {
        fight-table, group-table {
            display: contents;
        }

        >:not(table) {
            all: revert;
        }

        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>

<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>