Files
Website/src/pages/regeln/[mode].astro
2024-08-15 17:04:19 +02:00

103 lines
3.3 KiB
Plaintext

---
import {getCollection, type CollectionEntry} from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import PageLayout from "@layouts/PageLayout.astro";
import LanguageWarning from "@components/LanguageWarning.astro";
import EloTable from "@components/EloTable.svelte";
import {l} from "../../util/util";
import { Image } from "astro:assets";
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] === astroI18n.fallbackLocale);
germanPosts.forEach(value => {
if (posts.find(post => post.id.split("/")[1] === value.id.split("/")[1])) {
return;
} else {
posts.push(value);
}
});
const modes = await getCollection("modes");
const publics = await getCollection("publics");
return posts.map((page) => ({
props: {
page,
german: page.id.split("/")[0] != astroI18n.locale,
mode: modes.find(value => value.id === page.id.split("/")[1].split(".")[0]),
publics: publics.filter(value => value.data.gamemode.id === page.id.split("/")[1].split(".")[0]),
},
params: {
mode: page.slug.split("/")[1],
},
}),
);
});
interface Props {
page: CollectionEntry<"rules">,
mode: CollectionEntry<"modes">,
publics: CollectionEntry<"publics">[],
german: boolean
}
const {page, german, mode, publics} = Astro.props;
const {Content} = await page.render();
---
<PageLayout title={t("rules.title", {mode: t(`${page.data.translationKey}.title`)})}>
<h1 class="text-3xl font-bold">{t(`${page.data.translationKey}.title`)}</h1>
{mode && mode.data.ranked && (
<Fragment>
<EloTable gamemode={page.id.split("/")[1].split(".")[0]} client:load topFive={true}/>
<a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/rangliste/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.ranking")}</a>
</Fragment>
)}
{publics && publics.length != 0 && (
<Fragment>
<div class="flex overflow-x-scroll">
{publics.map(value => (
<a href={l(`/publics/${value.id}`)} style="display: contents">
<Image src={value.data.image} alt={value.data.name} height={300} width={300} class="drop-shadow"></Image>
</a>
))}
</div>
<a class="text-neutral-800 dark:text-neutral-400 hover:underline" href={l(`/publics/${page.id.split("/")[1].split(".")[0]}`)}>{t("rules.publics")}</a>
</Fragment>
)}
<article>
{german && (
<LanguageWarning/>
)}
<Content/>
</article>
</PageLayout>
<style is:global>
article {
> * {
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;
}
a {
@apply text-neutral-800 dark:text-neutral-400 hover:underline;
}
}
link-to {
display: contents;
}
</style>