Merge pull request #122 from spryker-community/jobs-slug

Updated job urls to show names instead of id #

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];
 </style>
 
 <div class="bg-neutral-100 dark:bg-white/[.075] rounded-xl shadow-md overflow-hidden mb-10">
-  <a href={`/jobs/${freelancer.id}`}>
+  <a href={`/jobs/${freelancerSlug}`}>
     {freelancerImage ? (
       <Image 
         src={freelancerImage}
@@ -70,7 +73,7 @@ const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
     )}
   </a>
   <div class="p-6">
-    <a href={`/jobs/${freelancer.id}`} class="group"> <!-- Added group for hover effect -->
+    <a href={`/jobs/${freelancerSlug}`} class="group"> <!-- Added group for hover effect -->
       <h2 class="text-2xl font-semibold mb-2 text-blue-500 dark:text-blue-400 group-hover:text-blue-600 dark:group-hover:text-blue-300 transition-colors">
         {`${freelancer.firstName} ${freelancer.lastName}`}
       </h2>
@@ -116,7 +119,7 @@ const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
       </div>
     )}
     <div class="mt-0 grid w-full gap-3 sm:inline-flex">
-      <SecondaryCTA title={`View ${freelancer.firstName}'s job profile`} url={`/jobs/${freelancer.id}`}  />
+      <SecondaryCTA title={`View ${freelancer.firstName}'s job profile`} url={`/jobs/${freelancerSlug}`}  />
     </div>
   </div>
 </div>

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";
 

src/pages/jobs/[id].astro → 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<string, ImageMetadata> = 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,15 +41,19 @@ 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);
+
+
 ---
 
 <MainLayout
   title={pageTitle}
   structuredData={{
     "@context": "https://schema.org",
     "@type": "ProfilePage",
-    "@id": `https://commercequest.space/jobs/${freelancer.id}/`,
-    "url": `https://commercequest.space/jobs/${freelancer.id}/`,
+    "@id": `https://commercequest.space/jobs/${freelancerSlug}/`,
+    "url": `https://commercequest.space/jobs/${freelancerSlug}/`,
     "name": `${`${freelancer.firstName} ${freelancer.lastName}`} - Spryker Developer Profile | CommerceQuest`,
     "description": `${freelancer.shortPitch}`,
     "isPartOf": {

src/utils/utils.ts

@@ -31,9 +31,26 @@ function hasSprykerCertifications(certifications: SprykerCertifications): boolea
   return certifications.backEndDeveloper || certifications.solutionArchitect;
 }
 
+// Generate URL-friendly slug from first and last name
+function generateNameSlug(firstName: string, lastName: string): string {
+  // Combine first and last name, convert to lowercase, replace spaces with hyphens
+  // Remove special characters and normalize to basic Latin characters
+  const normalizedName = `${firstName} ${lastName}`
+    .toLowerCase()
+    .normalize('NFD')
+    .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
+    .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
+    .trim()
+    .replace(/\s+/g, '-'); // Replace spaces with hyphens
+
+  return normalizedName;
+}
+
+// Export the new function along with existing ones
 export { 
   formatDate, 
   capitalize, 
   getFlagEmoji, 
-  hasSprykerCertifications 
+  hasSprykerCertifications,
+  generateNameSlug 
 };