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];
- + {freelancerImage ? (
- +

{`${freelancer.firstName} ${freelancer.lastName}`}

@@ -116,7 +119,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); + + ---