Updates and more

src/pages/[...slug].astro

@@ -1,12 +1,12 @@
 ---
 import { getCollection } from 'astro:content'
-import {astroI18n} from "astro-i18n";
 import NavbarLayout from "../layouts/NavbarLayout.astro";
+import {astroI18n, createGetStaticPaths} from "astro-i18n";
 
-export async function getStaticPaths() {
+export const getStaticPaths = async () => {
     let posts = await getCollection("pages");
 
-    return posts.filter(value => value.id.split("/")[0] === astroI18n.langCode).map((page) => ({
+    return posts.filter(value => value.id.split("/")[0] === astroI18n.locale).map((page) => ({
         props: { page }, params: { slug: page.slug }
     }) )
 }
@@ -19,7 +19,6 @@ const { Content } = await page.render();
 <NavbarLayout title={page.data.title}>
     <article>
         <h1 class="text-left">{page.data.title}</h1>
-        <p class="text-left border-b-2 border-neutral-800">{page.data.description}</p>
         <Content />
     </article>
 </NavbarLayout>
@@ -30,15 +29,22 @@ const { Content } = await page.render();
         @apply mx-auto bg-gray-100 px-4 py-8 rounded-b-md shadow-md pt-40 sm:pt-28 md:pt-14
             dark:text-white dark:bg-neutral-900;
 
+        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;
         }
@@ -47,8 +53,20 @@ const { Content } = await page.render();
             @apply text-blue-500 hover:text-blue-700;
         }
 
+        ol>li, ul>li {
+            @apply ml-4;
+        }
+
+        ol {
+            @apply list-decimal;
+        }
+
+        ul {
+            @apply list-disc;
+        }
+
         pre.astro-code {
-            @apply w-fit p-4 rounded-md border-2 border-gray-600;
+            @apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
         }
     }
 </style>

src/pages/about.astro

@@ -1,8 +0,0 @@
----
-
-import NavbarLayout from "../layouts/NavbarLayout.astro";
----
-
-<NavbarLayout title="About Us">
-
-</NavbarLayout>

src/pages/index.astro

@@ -2,12 +2,39 @@
 import NavbarLayout from "../layouts/NavbarLayout.astro";
 
 import { Image } from "astro:assets";
-import localBau from "../images/bau.jpg";
-import {l, t} from "astro-i18n";
+import localBau from "../images/2023-10-08_20.43.43.png";
 import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
+import {astroI18n, l, t} from "astro-i18n";
+
+const teamMember = await fetch("http://localhost:1337/data/team").then(value => value.json())
+
+function groupByGroup(array) {
+	const groups = new Map<string, any>();
+
+	for (let user of array) {
+		if (groups.has(user.prefix)) {
+			groups.get(user.prefix).push(user)
+		} else {
+			groups.set(user.prefix, [user])
+		}
+	}
+
+	return groups
+}
+
+const groupedTeamMember = groupByGroup(teamMember)
+
+function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
+	const arr = []
+	for (let [key, value] of i) {
+		arr.push(fn(key, value))
+	}
+	return arr
+}
+
 ---
 
-<NavbarLayout title={t("home.page")}>
+<NavbarLayout title={t("home.page")} description="SteamWar.de Homepage">
 	<div class="w-screen h-screen relative mb-4">
 		<Image src={localBau} alt="Bau" width="1920" height="1080" class="w-screen object-cover rounded-b-2xl shadow-2xl dark:brightness-75" style="height: calc(100vh + 1rem)" draggable="false" />
 		<drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
@@ -80,7 +107,7 @@ import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
 			</script>
 		</drop-in>
 	</div>
-	<section class="w-screen flex flex-col items-center justify-center">
+	<section class="w-screen flex flex-col items-center justify-center shadow-2xl rounded-b-2xl pb-8">
 		<div class="py-10 flex flex-col lg:flex-row">
 			<div class="card">
 				<Archive heigth="64" width="64" />
@@ -102,8 +129,24 @@ import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
 		</div>
 		<a class="btn px-8 flex" href={l("/about")}>Read More <CaretRight width="24" heigth="24" /></a>
 	</section>
-	<section>
-
+	<section class="w-screen py-12">
+		{mapMap(groupedTeamMember, (key, value) => (
+			<div class="flex items-center flex-col">
+				<h2 class="dark:text-white text-4xl font-bold">{t("home.prefix." + key)}</h2>
+				<div class="flex my-4 md:flex-row flex-col flex-wrap justify-center">
+					{value.map(v => (
+						<div class="bg-zinc-50 border-gray-100 py-24 px-12 border-2 m-2 transition duration-300 ease-in-out rounded-xl shadow-lg
+									hover:scale-105 hover:shadow-2xl
+									dark:bg-neutral-900 dark:border-gray-800 dark:text-white">
+							<figure>
+								<figcaption class="text-center mb-4 text-2xl">{v.name}</figcaption>
+								<Image src={`https://visage.surgeplay.com/bust/150/${v.uuid}`} class="transition duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl" alt={v.name + "s bust"} width="150" height="150"  />
+							</figure>
+						</div>
+					))}
+				</div>
+			</div>
+		))}
 	</section>
 </NavbarLayout>
 
@@ -130,5 +173,8 @@ import {CaretRight, Archive, Rocket, Bell} from "@astropub/icons"
 		>p {
 			@apply mt-4;
 		}
+		>svg {
+			@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl
+		}
 	}
 </style>