SteamWar/Website
10
1
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

Migrate Site to German as Default Locale

Browse Source
This commit is contained in:
Chaoscaot
2024-03-09 13:53:43 +01:00
parent fd56de0451
commit 9312089e96
26 changed files with 109 additions and 486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/pages/ankuendigungen/[...slug].astro Normal file
View File

@@ -0,0 +1,189 @@
---
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(),
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>
<h5 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)} </h5>
</div>
</div>
{german && (
<LanguageWarning/>
)}
<Content/>
<script>
import FightTable from "@components/FightTable.svelte";
// @ts-expect-error Import Schenanigans
import {get} from "svelte/store";
import GroupTable from "@components/GroupTable.svelte";
import {eventRepo} from "../../components/repo/event";
import type {ExtendedEvent} from "@type/event";
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 {
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>

35
src/pages/ankuendigungen/index.astro Normal file
View File

@@ -0,0 +1,35 @@
---
import {getCollection} from "astro:content";
import PageLayout from "../../layouts/PageLayout.astro";
import {astroI18n, t} from "astro-i18n";
import PostComponent from "../../components/PostComponent.astro";
import dayjs from "dayjs";
async function getPosts() {
const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
germanPosts.forEach(value => {
if (posts.find(post => post.data.key === value.data.key)) {
return;
} else {
posts.push(value);
}
});
return posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).filter((value, index) => index < 20);
}
const posts = await getPosts();
---
<PageLayout title={t("blog.title")}>
{posts.map((post, index) => (
<div>
<PostComponent post={post}/>
{index !== posts.length - 1 &&
<hr/>}
</div>
))}
</PageLayout>

64
src/pages/ankuendigungen/tags/[tag].astro Normal file
View File

@@ -0,0 +1,64 @@
---
import {CollectionEntry} from "astro:content";
import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
import {getCollection} from "astro:content";
import PageLayout from "../../../layouts/PageLayout.astro";
import {capitalize} from "../../../components/admin/util";
import PostComponent from "../../../components/PostComponent.astro";
import dayjs from "dayjs";
export const getStaticPaths = createGetStaticPaths(async () => {
let posts = (await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale));
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === "de");
posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix());
germanPosts.forEach(value => {
if (posts.find(post => post.data.key === value.data.key)) {
return;
} else {
posts.push(value);
}
});
posts = posts.filter((value, index) => index < 20);
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>