New Code Editor and fun

2023-12-03 19:31:29 +01:00
parent 2abe554059
commit fbd52f3edb
53 changed files with 1330 additions and 489 deletions
--- a/src/pages/announcements/[...slug].astro
+++ b/src/pages/announcements/[...slug].astro
@@ -0,0 +1,101 @@
+---
+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 {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>
+        <h3 class="flex items-center mt-0 text-neutral-300"><TagSolid class="w-4 h-4 mr-2" /> {post.data.tags.map(tag => (
+                <a href={l(`/announcements/tags/${tag}`)}>
+                    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 shadow-2xl">{capitalize(tag)}</span>
+                </a>
+        ))} <CalendarMonthSolid class="w-4 h-4 mr-2" /> {Intl.DateTimeFormat(astroI18n.locale, {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric'
+        }).format(post.data.created)} </h3>
+        <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";
+            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,
+                            }
+                        })
+                    })
+                }
+            }
+
+            customElements.define('fight-table', FightTableElement);
+
+            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>