New Code Editor and fun

This commit is contained in:
2023-12-03 19:31:29 +01:00
parent 2abe554059
commit fbd52f3edb
53 changed files with 1330 additions and 489 deletions

View File

@ -25,40 +25,8 @@ const { Content } = await page.render();
<style is:global>
article {
p {
@apply my-4 leading-7;
}
h1 {
@apply text-4xl font-bold mt-4 text-center;
}
h2 {
@apply text-3xl font-bold mt-4;
}
h3 {
@apply text-2xl font-bold mt-4;
}
h4 {
@apply text-xl font-bold mt-4;
}
a {
@apply text-blue-500 hover:text-blue-700;
}
ol>li, ul>li {
@apply ml-4;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
>* {
all: revert;
}
code {

View File

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

View File

@ -0,0 +1,20 @@
---
import { getCollection } from "astro:content"
import PageLayout from "../../layouts/PageLayout.astro";
import {astroI18n, t} from "astro-i18n";
import moment from "moment";
import PostComponent from "../../components/PostComponent.astro";
const posts = (await getCollection("announcements", (entry) => entry.id.split("/")[0] === astroI18n.locale))
.sort((a, b) => moment(b.data.created).unix() - moment(a.data.created).unix());
---
<PageLayout title={t("blog.title")}>
{posts.map((post, index) => (
<div>
<PostComponent post={post} />
{index !== posts.length - 1 && <hr/>}
</div>
))}
</PageLayout>

View File

@ -0,0 +1,51 @@
---
import moment from "moment/moment";
import {CollectionEntry} from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import {getCollection} from "astro:content";
import PageLayout from "../../../layouts/PageLayout.astro";
import {l} from "../../../util/util";
import {capitalize} from "../../../components/admin/util";
import PostComponent from "../../../components/PostComponent.astro";
export const getStaticPaths = createGetStaticPaths(async () => {
const posts = (await getCollection('announcements', entry => entry.id.split("/")[0] === astroI18n.locale))
.sort((a, b) => moment(b.data.created).unix() - moment(a.data.created).unix());
let groupedByTags: Record<string, CollectionEntry<'announcements'>[]> = {}
posts.forEach(post => {
post.data.tags.forEach(tag => {
if (!groupedByTags[tag]) {
groupedByTags[tag] = []
}
groupedByTags[tag].push(post)
})
})
return Object.keys(groupedByTags).map(tag => ({
params: {
tag: tag
},
props: {
posts: groupedByTags[tag],
tag: tag
}
}))
})
interface Props {
posts: CollectionEntry<'announcements'>[]
tag: string
}
const { posts, tag } = Astro.props;
---
<PageLayout title={t("tag.title", {tag: capitalize(tag)})}>
{posts.map((post, index) => (
<div>
<PostComponent post={post} />
{index !== posts.length - 1 && <hr/>}
</div>
))}
</PageLayout>

View File

@ -1,3 +1,31 @@
---
import {createGetStaticPaths, t} from "astro-i18n";
import {getCollection, CollectionEntry} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
import EloTable from "../../components/EloTable.svelte";
export const getStaticPaths = createGetStaticPaths(async () => {
const modes = await getCollection("modes", entry => entry.data.ranked);
return modes.map(value => ({
props: {
mode: value
},
params: {
gamemode: value.id
}
}))
});
interface Props {
mode: CollectionEntry<"modes">
}
const { mode } = Astro.props;
---
---
<PageLayout title={t("ranked.title", {mode: t(`${mode.data.translationKey}.title`)})}>
<h1 class="text-2xl mb-2">{t("ranking.heading", { mode: t(`${mode.data.translationKey}.title`) })}</h1>
<EloTable gamemode={mode.id} client:only="svelte" />
</PageLayout>

View File

@ -1,22 +1,26 @@
---
import {getCollection} from 'astro:content'
import {astroI18n, createGetStaticPaths} from "astro-i18n";
import PageLayout from "../layouts/PageLayout.astro";
import {getCollection, CollectionEntry} from 'astro:content'
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import PageLayout from "../../layouts/PageLayout.astro";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = await getCollection("rules");
let posts = await getCollection("rules", value => value.id.split("/")[0] === astroI18n.locale);
return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
props: { page }, params: { slug: page.slug }
}) )
return posts.map((page) => ({
props: { page }, params: { slug: page.slug.split("/")[1] }
}))
})
interface Props {
page: CollectionEntry<"rules">
}
const { page } = Astro.props;
const { Content } = await page.render();
---
<PageLayout title={page.data.title}>
<PageLayout title={t("title", {mode: t(`${page.data.translationKey}.title`)})}>
<article>
<Content />
</article>
@ -24,40 +28,8 @@ const { Content } = await page.render();
<style is:global>
article {
p {
@apply my-4 leading-7;
}
h1 {
@apply text-4xl font-bold mt-4 text-center;
}
h2 {
@apply text-3xl font-bold mt-4;
}
h3 {
@apply text-2xl font-bold mt-4;
}
h4 {
@apply text-xl font-bold mt-4;
}
a {
@apply text-blue-500 hover:text-blue-700;
}
ol>li, ul>li {
@apply ml-4;
}
ol {
@apply list-decimal;
}
ul {
@apply list-disc;
>* {
all: revert;
}
code {

View File

@ -8,6 +8,7 @@ import {t} from "astro-i18n";
import {getCollection} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
import {Image} from "astro:assets";
import {l} from "../../util/util";
const imageMap = {
"wg": wg,
@ -28,9 +29,9 @@ const modes = await getCollection("modes", entry => entry.data.main)
<h1 class="text-2xl font-bold">{t(value.data.translationKey + ".title")}</h1>
<div>{t(value.data.translationKey + ".description")}</div>
<div class="mt-2 flex flex-col">
<a href="/public" class="text-yellow-300 hover:underline w-fit">{t("rules")}</a>
<a href={l(`/rules/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t("rules")}</a>
<a href="/public" class="text-yellow-300 hover:underline w-fit">{t("council")}</a>
{value.data.ranked ? <a href="/public" class="text-yellow-300 hover:underline w-fit">{t("ranking")}</a> : null}
{value.data.ranked ? <a href={l(`/ranked/${value.id}`)} class="text-yellow-300 hover:underline w-fit">{t(`ranking`)}</a> : null}
</div>
</div>
</div>))}

View File

@ -0,0 +1,10 @@
---
import PageLayout from "../../layouts/PageLayout.astro";
import FightStatistics from "../../components/FightStatistics.svelte";
import {t} from "astro-i18n";
---
<PageLayout title={t("stats.title")}>
<FightStatistics client:only="svelte" />
</PageLayout>