Fixes freelancer photo usage for keystatic (#205)

keystatic.config.ts

@@ -31,7 +31,13 @@ const keystaticConfig: Config = {
         }),
         slug: fields.text({
           label: "Slug",
-          validation: { length: { min: 1 } }
+          validation: {
+            length: { min: 1 },
+            pattern: {
+              regex: /^[a-z0-9-]+$/,
+              message: 'Please provide alphanumeric characters in lowercase and `-`.',
+            }
+          }
         }),
         photo: fields.image({
           label: "Photo",
@@ -233,19 +239,4 @@ const keystaticConfig: Config = {
     }),
   },
 };
-/*
-
-    "creators": [{"name": "Valantic", "url": "https://github.com/valantic-CEC-Deutschland-GmbH"}],
-    "contributors": [],
-    "links": [
-      {
-        "label": "JetBrains marketplace",
-        "url": "https://plugins.jetbrains.com/plugin/18766-sprykerkit"
-      },
-      {
-        "label": "Github",
-        "url": "https://github.com/valantic-CEC-Deutschland-GmbH/spryker-kit-intellij-plugin"
-      }
-    ]
-*/
 export default keystaticConfig;

src/components/FreelancerCard.astro

@@ -20,30 +20,16 @@ type Skill = string;
 const hasCertifications = hasSprykerCertifications(freelancer.sprykerCertifications);
 
 // Import all images at build time with proper typing
-const imageFiles: Record<string, ImageMetadata> = import.meta.glob('/src/images/freelancers/*.{jpeg,jpg,png,gif}', {
+const imageFiles: Record<string, ImageMetadata> = import.meta.glob('/src/images/freelancers/**/*.{jpeg,jpg,png,gif}', {
   eager: true,
   import: 'default'
 });
 
-// Add image import utility function
-async function getFreelancerImage(photoPath: string) {
-  try {
-    const imageModule = await import(/* @vite-ignore */ `../images/freelancers/${photoPath}`);
-    return imageModule.default;
-  } catch (error) {
-    console.error(`Error loading image for ${photoPath}:`, error);
-    return null;
-  }
-}
-
 // Generate the URL-friendly slug for the freelancer
 const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastName);
 
-// Construct the correct image path
-const imagePath = `/src/images/freelancers/${freelancer.photo}`;
-
 // Get the image from our glob with type checking
-const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
+const freelancerImage: ImageMetadata | undefined = imageFiles[freelancer.photo];
 ---
 <style>
 .short-pitch {

src/content/freelancers/Andrey Lidokhover.yaml → src/content/freelancers/andrey-lidokhover.yaml

@@ -1,6 +1,6 @@
 firstName: Andrey
 lastName: Lidokhover
-photo: andrey-lidokhover.jpg
+photo: /src/images/freelancers/andrey-lidokhover/photo.jpg
 headline: Senior Spryker Backend Developer
 availability: November 2024, fulltime
 location: Hamburg

src/content/freelancers/onofrei-andrei-codrut.yaml → src/content/freelancers/codrut-onofrei.yaml

@@ -1,6 +1,6 @@
 firstName: Codrut
-lastName: 'Andre Onofrei '
-photo: /src/images/freelancers/onofrei-andrei-codrut/photo.jpeg
+lastName: Onofrei
+photo: /src/images/freelancers/codrut-onofrei/photo.jpeg
 headline: Spryker Developer
 availability: Immediately
 location: Laşi

src/content/freelancers/Constantin Iordan.yaml → src/content/freelancers/constantin-iordan.yaml

@@ -1,6 +1,6 @@
 firstName: Constantin
 lastName: Iordan
-photo: Constantin-Iordan.jpg
+photo: /src/images/freelancers/constantin-iordan/photo.jpg
 headline: Senior PHP Developer
 availability: January 2025, 8h/day, 5 days/week
 location: Brasov

src/content/freelancers/David Greiner.yaml → src/content/freelancers/david-greiner.yaml

@@ -1,6 +1,6 @@
 firstName: David
 lastName: Greiner
-photo: david_greiner_spryker_freelancer.jpg
+photo: /src/images/freelancers/david-greiner/photo.jpg
 headline: Senior Spryker Backend Developer
 availability: Immediate
 location: Germany

src/content/freelancers/Evgeny Nekhamkin.yaml → src/content/freelancers/evgeny-nekhamkin.yaml

@@ -1,6 +1,6 @@
 firstName: Evgeny
 lastName: Nekhamkin
-photo: evgeny-nekhamkin.jpg
+photo: /src/images/freelancers/evgeny-nekhamkin/photo.jpg
 headline: Senior Webdeveloper & Architect
 availability: Mid October / 36-40 Hours
 location: Hamburg

src/content/freelancers/Filip Galic.yaml → src/content/freelancers/filip-galic.yaml

@@ -1,6 +1,6 @@
 firstName: Filip
 lastName: Galic
-photo: filip-galic.jpeg
+photo: /src/images/freelancers/filip-galic/photo.jpeg
 headline: Spryker engineer
 availability: Immediately
 location: Bosnia and Herzegovina, Siroki Brijeg

src/content/freelancers/Ivan Jurisic.yaml → src/content/freelancers/ivan-jurisic.yaml

@@ -1,6 +1,6 @@
 firstName: Ivan
 lastName: Jurisic
-photo: ivan-jurisic.jpg
+photo: /src/images/freelancers/ivan-jurisic/photo.jpg
 headline: Spryker developer
 availability: Immediately
 location: Makarska, Croatia

src/content/freelancers/Jan Kovacs.yaml → src/content/freelancers/jan-kovacs.yaml

@@ -1,6 +1,6 @@
 firstName: Jan
 lastName: Kovács
-photo: jan-kovacs.jpg
+photo: /src/images/freelancers/jan-kovacs/photo.jpg
 headline: Experienced Software Engineer & Leader
 availability: November 2024, 40 hours/week
 location: Hamburg

src/content/freelancers/Javier Benito.yaml → src/content/freelancers/javier-benito.yaml

@@ -1,6 +1,6 @@
 firstName: Javier
 lastName: Benito
-photo: javier-benito.jpg
+photo: /src/images/freelancers/javier-benito/photo.jpg
 headline: Senior Software Engineer
 availability: Immediately
 location: Madrid

src/content/freelancers/Vasily Rodin.yaml → src/content/freelancers/vasily-rodin.yaml

@@ -1,6 +1,6 @@
 firstName: Vasily
 lastName: Rodin
-photo: vasily-rodin.jpg
+photo: /src/images/freelancers/vasily-rodin/photo.jpg
 headline: Senior Spryker Developer & Tech Lead
 availability: 2025, usually 8h per day
 location: Berlin

src/content/freelancers/Volodymyr Rychenko.yaml → src/content/freelancers/volodymyr-rychenko.yaml

@@ -1,6 +1,6 @@
 firstName: Volodymyr
 lastName: Hrychenko
-photo: volodymyr-rychenko.jpg
+photo: /src/images/freelancers/volodymyr-rychenko/photo.jpg
 headline: Spryker Developer & Solution Architect
 availability: Fulltime
 location: Warsaw

src/pages/jobs/[slug].astro

@@ -13,7 +13,7 @@ import keystaticConfig from '../../../keystatic.config';
 import type { Freelancer, KeystaticFreelancer } from '../../types.ts';
 
 // Import all images at build time with proper typing
-const imageFiles: Record<string, ImageMetadata> = import.meta.glob('/src/images/freelancers/*.{jpeg,jpg,png,gif}', {
+const imageFiles: Record<string, ImageMetadata> = import.meta.glob('/src/images/freelancers/**/*.{jpeg,jpg,png,gif}', {
   eager: true,
   import: 'default'
 });
@@ -60,11 +60,8 @@ const pageTitle = `${`${freelancer.firstName} ${freelancer.lastName}`} - Spryker
 // Get certification status using the utility function
 const hasCertifications = hasSprykerCertifications(freelancer.sprykerCertifications);
 
-// Construct the correct image path
-const imagePath = `/src/images/freelancers/${freelancer.photo}`;
-
 // Get the image from our glob
-const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
+const freelancerImage: ImageMetadata | undefined = imageFiles[freelancer.photo];
 
 //Get slug
 const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastName);