From 780fe711393093ac0c708da46933fd762dc6482c Mon Sep 17 00:00:00 2001
From: Benjamin Frost <bfrost.schule@gmail.com>
Date: Tue, 29 Oct 2024 15:36:19 +0100
Subject: [PATCH] fix: team images not working in prod

---
 src/assets/data/team.json                     |  24 +++++++++---------
 ...enjamin Frost.webp => benjamin-frost.webp} | Bin
 ...oreen Kappler.webp => doreen-kappler.webp} | Bin
 .../{Elisa Boose.webp => elisa-boose.webp}    | Bin
 ... Skrzypczak.webp => glenn-skrzypczak.webp} | Bin
 ...im Schiller.webp => joachim-schiller.webp} | Bin
 .../{Jonas Wanke.webp => jonas-wanke.webp}    | Bin
 ...ustin Konratt.webp => justin-konratt.webp} | Bin
 .../{Kai Redmann.webp => kai-redmann.webp}    | Bin
 ...{Lukas Fischer.webp => lukas-fischer.webp} | Bin
 ...{Michael Boose.webp => michael-boose.webp} | Bin
 ...r. Olaf Kappler.webp => olaf-kappler.webp} | Bin
 ...s Steinfeld.webp => thomas-steinfeld.webp} | Bin
 src/components/team/Person.astro              |  16 ++++++++----
 src/components/team/PersonImage.astro         |  23 +++++++++++++++++
 src/components/team/PersonImage.tsx           |  18 -------------
 src/components/team/Team.astro                |   4 +--
 src/pages/[lang]/our-team.astro               |   6 ++---
 18 files changed, 51 insertions(+), 40 deletions(-)
 rename src/assets/img/team/{Benjamin Frost.webp => benjamin-frost.webp} (100%)
 rename src/assets/img/team/{Doreen Kappler.webp => doreen-kappler.webp} (100%)
 rename src/assets/img/team/{Elisa Boose.webp => elisa-boose.webp} (100%)
 rename src/assets/img/team/{Glenn Skrzypczak.webp => glenn-skrzypczak.webp} (100%)
 rename src/assets/img/team/{Joachim Schiller.webp => joachim-schiller.webp} (100%)
 rename src/assets/img/team/{Jonas Wanke.webp => jonas-wanke.webp} (100%)
 rename src/assets/img/team/{Justin Konratt.webp => justin-konratt.webp} (100%)
 rename src/assets/img/team/{Kai Redmann.webp => kai-redmann.webp} (100%)
 rename src/assets/img/team/{Lukas Fischer.webp => lukas-fischer.webp} (100%)
 rename src/assets/img/team/{Michael Boose.webp => michael-boose.webp} (100%)
 rename src/assets/img/team/{Dr. Olaf Kappler.webp => olaf-kappler.webp} (100%)
 rename src/assets/img/team/{Thomas Steinfeld.webp => thomas-steinfeld.webp} (100%)
 create mode 100644 src/components/team/PersonImage.astro
 delete mode 100644 src/components/team/PersonImage.tsx

diff --git a/src/assets/data/team.json b/src/assets/data/team.json
index cff7068..e00e476 100644
--- a/src/assets/data/team.json
+++ b/src/assets/data/team.json
@@ -1,12 +1,12 @@
 [
   {
-    "img": "/src/assets/img/team/Benjamin Frost.webp",
+    "img": "/src/assets/img/team/benjamin-frost.webp",
     "name": "Benjamin Frost",
     "lastRole": { "de": "Jury", "en": "Jury" },
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Jonas Wanke.webp",
+    "img": "/src/assets/img/team/jonas-wanke.webp",
     "name": "Jonas Wanke",
     "lastRole": { "en": "Expert", "de": "Bundestrainer" },
     "skill": {
@@ -16,7 +16,7 @@
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Dr. Olaf Kappler.webp",
+    "img": "/src/assets/img/team/olaf-kappler.webp",
     "name": "Dr. Olaf Kappler",
     "lastRole": { "en": "Expert", "de": "Bundestrainer" },
     "skill": {
@@ -25,12 +25,12 @@
     }
   },
   {
-    "img": "/src/assets/img/team/Doreen Kappler.webp",
+    "img": "/src/assets/img/team/doreen-kappler.webp",
     "name": "Doreen Kappler",
     "lastRole": { "de": "Good Fairy", "en": "Good Fairy" }
   },
   {
-    "img": "/src/assets/img/team/Glenn Skrzypczak.webp",
+    "img": "/src/assets/img/team/glenn-skrzypczak.webp",
     "name": "Glenn Skrzypczak",
     "lastRole": { "en": "Expert", "de": "Bundestrainer" },
     "skill": {
@@ -40,39 +40,39 @@
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Elisa Boose.webp",
+    "img": "/src/assets/img/team/elisa-boose.webp",
     "name": "Elisa Boose",
     "lastRole": { "en": "Trainer", "de": "Trainer" }
   },
   {
-    "img": "/src/assets/img/team/Michael Boose.webp",
+    "img": "/src/assets/img/team/michael-boose.webp",
     "name": "Michael Boose",
     "lastRole": { "en": "Trainer", "de": "Trainer" }
   },
   {
-    "img": "/src/assets/img/team/Joachim Schiller.webp",
+    "img": "/src/assets/img/team/joachim-schiller.webp",
     "name": "Joachim Schiller",
     "lastRole": { "de": "Jury", "en": "Jury" },
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Justin Konratt.webp",
+    "img": "/src/assets/img/team/justin-konratt.webp",
     "name": "Justin Konratt",
     "lastRole": { "de": "Jury", "en": "Jury" },
     "hasMultipleRoles": true
   },
   {
-    "img": "/src/assets/img/team/Kai Redmann.webp",
+    "img": "/src/assets/img/team/kai-redmann.webp",
     "name": "Kai Redmann",
     "lastRole": { "en": "Workshop-Manager", "de": "Workshop Manager" }
   },
   {
-    "img": "/src/assets/img/team/Lukas Fischer.webp",
+    "img": "/src/assets/img/team/lukas-fischer.webp",
     "name": "Lukas Fischer",
     "lastRole": { "en": "Workshop-Manager", "de": "Workshop Manager" }
   },
   {
-    "img": "/src/assets/img/team/Thomas Steinfeld.webp",
+    "img": "/src/assets/img/team/thomas-steinfeld.webp",
     "name": "Thomas Steinfeld",
     "lastRole": { "en": "Mr. Speed Programming", "de": "Mr. Speed Programming" }
   }
diff --git a/src/assets/img/team/Benjamin Frost.webp b/src/assets/img/team/benjamin-frost.webp
similarity index 100%
rename from src/assets/img/team/Benjamin Frost.webp
rename to src/assets/img/team/benjamin-frost.webp
diff --git a/src/assets/img/team/Doreen Kappler.webp b/src/assets/img/team/doreen-kappler.webp
similarity index 100%
rename from src/assets/img/team/Doreen Kappler.webp
rename to src/assets/img/team/doreen-kappler.webp
diff --git a/src/assets/img/team/Elisa Boose.webp b/src/assets/img/team/elisa-boose.webp
similarity index 100%
rename from src/assets/img/team/Elisa Boose.webp
rename to src/assets/img/team/elisa-boose.webp
diff --git a/src/assets/img/team/Glenn Skrzypczak.webp b/src/assets/img/team/glenn-skrzypczak.webp
similarity index 100%
rename from src/assets/img/team/Glenn Skrzypczak.webp
rename to src/assets/img/team/glenn-skrzypczak.webp
diff --git a/src/assets/img/team/Joachim Schiller.webp b/src/assets/img/team/joachim-schiller.webp
similarity index 100%
rename from src/assets/img/team/Joachim Schiller.webp
rename to src/assets/img/team/joachim-schiller.webp
diff --git a/src/assets/img/team/Jonas Wanke.webp b/src/assets/img/team/jonas-wanke.webp
similarity index 100%
rename from src/assets/img/team/Jonas Wanke.webp
rename to src/assets/img/team/jonas-wanke.webp
diff --git a/src/assets/img/team/Justin Konratt.webp b/src/assets/img/team/justin-konratt.webp
similarity index 100%
rename from src/assets/img/team/Justin Konratt.webp
rename to src/assets/img/team/justin-konratt.webp
diff --git a/src/assets/img/team/Kai Redmann.webp b/src/assets/img/team/kai-redmann.webp
similarity index 100%
rename from src/assets/img/team/Kai Redmann.webp
rename to src/assets/img/team/kai-redmann.webp
diff --git a/src/assets/img/team/Lukas Fischer.webp b/src/assets/img/team/lukas-fischer.webp
similarity index 100%
rename from src/assets/img/team/Lukas Fischer.webp
rename to src/assets/img/team/lukas-fischer.webp
diff --git a/src/assets/img/team/Michael Boose.webp b/src/assets/img/team/michael-boose.webp
similarity index 100%
rename from src/assets/img/team/Michael Boose.webp
rename to src/assets/img/team/michael-boose.webp
diff --git a/src/assets/img/team/Dr. Olaf Kappler.webp b/src/assets/img/team/olaf-kappler.webp
similarity index 100%
rename from src/assets/img/team/Dr. Olaf Kappler.webp
rename to src/assets/img/team/olaf-kappler.webp
diff --git a/src/assets/img/team/Thomas Steinfeld.webp b/src/assets/img/team/thomas-steinfeld.webp
similarity index 100%
rename from src/assets/img/team/Thomas Steinfeld.webp
rename to src/assets/img/team/thomas-steinfeld.webp
diff --git a/src/components/team/Person.astro b/src/components/team/Person.astro
index 00da198..cc3a3c1 100644
--- a/src/components/team/Person.astro
+++ b/src/components/team/Person.astro
@@ -1,24 +1,30 @@
 ---
-import { getLangFromUrl, useTranslations } from "~/i18n/utils";
-import { PersonImage } from "./PersonImage";
 import type { Language } from "~/i18n";
+import { getLangFromUrl, useTranslations } from "~/i18n/utils";
+import PersonImage from "./PersonImage.astro";
 
 interface Props {
   name: string;
   lastRole: Record<Language, string>;
-  img?: string;
+  imagePath?: string;
   skill?: Record<Language, string>;
   hasMultipleRoles?: boolean;
 }
 
-const { name, img, lastRole, skill, hasMultipleRoles = false } = Astro.props;
+const {
+  name,
+  imagePath,
+  lastRole,
+  skill,
+  hasMultipleRoles = false,
+} = Astro.props;
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---
 
 <div class="space-y-6">
-  <PersonImage img={img} />
+  <PersonImage imagePath={imagePath} />
   <div class="text-md text-center font-light">
     <h3 class="mb-1 text-lg font-medium">{name}</h3>
     <div>
diff --git a/src/components/team/PersonImage.astro b/src/components/team/PersonImage.astro
new file mode 100644
index 0000000..c73d804
--- /dev/null
+++ b/src/components/team/PersonImage.astro
@@ -0,0 +1,23 @@
+---
+import { Image } from "astro:assets";
+import { clsx } from "clsx";
+import WsgHandsImage from "~/assets/img/wsg-hands.svg";
+
+interface Props {
+  imagePath?: string;
+}
+
+const { imagePath } = Astro.props;
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  "/src/assets/**/*.{jpeg,jpg,png,gif,webp}",
+);
+---
+
+<Image
+  class={clsx(
+    "mx-auto h-40 w-40 rounded-full object-cover shadow-lg xl:h-56 xl:w-56",
+    imagePath && "p-5",
+  )}
+  src={imagePath ? images[imagePath]() : WsgHandsImage}
+  alt=""
+/>
diff --git a/src/components/team/PersonImage.tsx b/src/components/team/PersonImage.tsx
deleted file mode 100644
index 1919fb5..0000000
--- a/src/components/team/PersonImage.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import clsx from "clsx";
-
-export type PersonImageProps = {
-  img?: string;
-};
-
-export const PersonImage = ({ img }: PersonImageProps) => {
-  return (
-    <img
-      className={clsx(
-        `mx-auto h-40 w-40 rounded-full object-cover shadow-lg xl:h-56 xl:w-56`,
-        img || "p-5",
-      )}
-      src={img ?? "/imgs/wsg/wsg_hands.svg"}
-      alt=""
-    />
-  );
-};
diff --git a/src/components/team/Team.astro b/src/components/team/Team.astro
index 1a29970..e653b5a 100644
--- a/src/components/team/Team.astro
+++ b/src/components/team/Team.astro
@@ -1,6 +1,6 @@
 ---
-import Person from "./Person.astro";
 import team from "~/assets/data/team.json";
+import Person from "./Person.astro";
 ---
 
 <div class="bg-white py-16">
@@ -13,7 +13,7 @@ import team from "~/assets/data/team.json";
         .map((member) => (
           <Person
             name={member["name"]}
-            img={member["img"]}
+            imagePath={member["img"]}
             lastRole={member["lastRole"]}
             skill={member["skill"]}
             hasMultipleRoles={member["hasMultipleRoles"]}
diff --git a/src/pages/[lang]/our-team.astro b/src/pages/[lang]/our-team.astro
index 1cccc77..d710bbc 100644
--- a/src/pages/[lang]/our-team.astro
+++ b/src/pages/[lang]/our-team.astro
@@ -1,9 +1,9 @@
 ---
+import TeamImage from "~/assets/img/team.webp";
 import { getLangFromUrl, localeParams, useTranslations } from "~/i18n/utils";
 import Hero from "../../components/Hero.astro";
-import TeamPage from "../../components/team/Team.astro";
+import TeamList from "../../components/team/Team.astro";
 import Layout from "../../layouts/Layout.astro";
-import TeamImage from "~/assets/img/team.webp";
 
 export const getStaticPaths = localeParams;
 
@@ -13,5 +13,5 @@ const t = useTranslations(lang);
 
 <Layout title={t({ de: "Unser Team", en: "Our Team" })}>
   <Hero title={t({ de: "Unser Team", en: "Our Team" })} img={TeamImage} />
-  <TeamPage />
+  <TeamList />
 </Layout>