Files
Website/src/pages/announcements/[...slug].astro
2023-12-05 17:36:31 +01:00

127 lines
4.6 KiB
Plaintext

---
import {astroI18n, createGetStaticPaths, t} 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 {l} from "../../util/util";
import {capitalize} from "../../components/admin/util";
export const getStaticPaths = createGetStaticPaths(async () => {
const posts = await getCollection('announcements', entry => entry.id.split('/')[0] === astroI18n.locale)
return posts.map(value => ({
params: {
slug: value.slug.split("/").slice(1).join("/")
},
props: {
post: value
}
}))
})
interface Props {
post: CollectionEntry<'announcements'>
}
const {post} = Astro.props;
const { Content } = await post.render();
---
<PageLayout title={post.data.title}>
<article>
<h1 class="text-4xl mb-0">{post.data.title}</h1>
<h5 class="flex items-center mt-0 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>
{post.data.german && (
<div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role="alert">
<div class="font-bold">{t("warning.title", {}, {route: "/rules"})}</div>
<div>{t("warning.text", {}, {route: "/rules"})}</div>
</div>
)}
<Content />
<script>
import type {ExtendedEvent} from "../../components/types/event";
import FightTable from "../../components/FightTable.svelte";
// @ts-ignore
import {get} from "svelte/store";
import {eventRepo} from "../../components/repo/repo";
import GroupTable from "../../components/GroupTable.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 => {
new 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 => {
new 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 {
>* {
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>