diff --git a/src/components/FreelancerCard.astro b/src/components/FreelancerCard.astro
index 9fb21b9..b05d10e 100644
--- a/src/components/FreelancerCard.astro
+++ b/src/components/FreelancerCard.astro
@@ -1,7 +1,7 @@
---
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
-import { getFlagEmoji, hasSprykerCertifications } from '../utils/utils.js';
+import { getFlagEmoji, hasSprykerCertifications, generateNameSlug } from '../utils/utils.js';
const { freelancer } = Astro.props;
import { Icon } from 'astro-icon/components'; // social icons
import CQIcon from '@components/ui/icons/CQIcon.astro';
@@ -35,6 +35,9 @@ async function getFreelancerImage(photoPath: string) {
}
}
+// 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}`;
@@ -54,7 +57,7 @@ const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
\ No newline at end of file
diff --git a/src/pages/jobs.astro b/src/pages/jobs.astro
index cf190f4..991f9dc 100644
--- a/src/pages/jobs.astro
+++ b/src/pages/jobs.astro
@@ -6,6 +6,7 @@ import FreelancerCard from '../components/FreelancerCard.astro';
import freelancers from '../data_files/freelancers.json';
import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
import type { Freelancer } from '../types.ts';
+import { generateNameSlug } from '../utils/utils.js';
const pageTitle = "Available Spryker Developers";
diff --git a/src/pages/jobs/[id].astro b/src/pages/jobs/[slug].astro
similarity index 93%
rename from src/pages/jobs/[id].astro
rename to src/pages/jobs/[slug].astro
index a48622d..a6ad82c 100644
--- a/src/pages/jobs/[id].astro
+++ b/src/pages/jobs/[slug].astro
@@ -2,6 +2,7 @@
import MainLayout from '../../layouts/MainLayout.astro';
import MainSection from "../../components/ui/blocks/MainSection.astro";
import freelancers from '../../data_files/freelancers.json';
+import { generateNameSlug } from '../../utils/utils.js';
import { Image } from 'astro:assets';
import type { ImageMetadata } from 'astro';
import { getFlagEmoji, hasSprykerCertifications } from '../../utils/utils.js';
@@ -16,10 +17,16 @@ const imageFiles: Record = import.meta.glob('/src/images/
});
export function getStaticPaths() {
- return freelancers.filter(freelancer => freelancer.isVisible).map((freelancer) => ({
- params: { id: freelancer.id.toString() },
- props: { freelancer }
- }));
+ return freelancers
+ .filter(freelancer => freelancer.isVisible)
+ .map((freelancer) => {
+ // Generate slug from name
+ const slug = generateNameSlug(freelancer.firstName, freelancer.lastName);
+ return {
+ params: { slug }, // Use slug instead of id
+ props: { freelancer }
+ };
+ });
}
const { freelancer } = Astro.props;
@@ -34,6 +41,10 @@ const imagePath = `/src/images/freelancers/${freelancer.photo}`;
// Get the image from our glob
const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
+//Get slug
+const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastName);
+
+
---