Applied to detail page, fixed css error

spryker-community · Oct 30, 2024 · 2480316 · 2480316
1 parent 9b2ec9d
commit 2480316
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 21 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -25,7 +25,7 @@ export default defineConfig({
   integrations: [
     icon({
       include: {
-        mdi: ["linkedin", "github"],  // Add any other icon names you need
+        mdi: ["linkedin", "github", "facebook", "twitter", "instagram"],  // Added more common social icons
       },
     }),
     tailwind(),

diff --git a/src/components/FreelancerCard.astro b/src/components/FreelancerCard.astro
@@ -3,7 +3,6 @@ import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 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';
 import SecondaryCTA from "@components/ui/buttons/SecondaryCTA.astro";
 import type { Freelancer } from '../types';
@@ -107,12 +106,16 @@ const flagImage: ImageMetadata | undefined = flagFiles[flagPath];
       <CQIcon profileUrl={freelancer.forumProfile} size="sm" />
       {freelancer.linkedIn && (
         <a href={freelancer.linkedIn} target="_blank" rel="noopener noreferrer" class="text-neutral-800 dark:text-neutral-100 inline-flex items-center">
-          <Icon name="mdi:linkedin" class="w-6 h-6 mr-2" /> 
+          <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
+          </svg>
         </a>
       )}
       {freelancer.github && (
         <a href={freelancer.github} target="_blank" rel="noopener noreferrer" class="text-neutral-800 dark:text-neutral-100 inline-flex items-center">
-          <Icon name="mdi:github" class="w-6 h-6 mr-2" /> 
+          <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
+            <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
+          </svg>
         </a>
       )}
     </div>

diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
@@ -29,7 +29,6 @@ We set the language of the page to English and add classes for scrollbar and scr
   <head>
     <!-- Adding metadata to the HTML document -->
     <Meta meta={meta} structuredData={structuredData} />
-    <link rel="stylesheet" href="node_modules/flag-icons/css/flag-icons.min.css">
     <!-- Define the title of the page -->
     <title>{title}</title>
     <script is:inline>

diff --git a/src/pages/jobs/[slug].astro b/src/pages/jobs/[slug].astro
@@ -5,13 +5,23 @@ 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';
-import { Icon } from 'astro-icon/components'; // social icons
+import { hasSprykerCertifications } from '../../utils/utils.js';
 import CQIcon from '@components/ui/icons/CQIcon.astro';
 import PrimaryCTA from "@components/ui/buttons/PrimaryCTA.astro";
+import type { Freelancer } from '../../types';
+
+interface Props {
+  freelancer: Freelancer;
+}
 
 // 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<ImageMetadata>('/src/images/freelancers/*.{jpeg,jpg,png,gif}', {
+  eager: true,
+  import: 'default'
+});
+
+// Import flag SVGs at build time
+const flagFiles: Record<string, ImageMetadata> = import.meta.glob<ImageMetadata>('/public/flags/*.svg', {
   eager: true,
   import: 'default'
 });
@@ -41,10 +51,12 @@ const imagePath = `/src/images/freelancers/${freelancer.photo}`;
 // Get the image from our glob
 const freelancerImage: ImageMetadata | undefined = imageFiles[imagePath];
 
+// Get the flag image
+const flagPath = `/public/flags/${freelancer.countryCode.toLowerCase()}.svg`;
+const flagImage: ImageMetadata | undefined = flagFiles[flagPath];
+
 //Get slug
 const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastName);
-
-
 ---
 
 <MainLayout
@@ -99,12 +111,16 @@ const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastNam
             )}
             {freelancer.linkedIn && (
               <a href={freelancer.linkedIn} target="_blank" rel="noopener noreferrer" class="text-neutral-800 dark:text-neutral-100 inline-flex items-center">
-                <Icon name="mdi:linkedin" class="w-6 h-6 mr-2" /> 
+                <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
+                  <path fill="currentColor" d="M19 3A2 2 0 0 1 21 5V19A2 2 0 0 1 19 21H5A2 2 0 0 1 3 19V5A2 2 0 0 1 5 3H19M18.5 18.5V13.2A3.26 3.26 0 0 0 15.24 9.94C14.39 9.94 13.4 10.46 12.92 11.24V10.13H10.13V18.5H12.92V13.57C12.92 12.8 13.54 12.17 14.31 12.17A1.4 1.4 0 0 1 15.71 13.57V18.5H18.5M6.88 8.56A1.68 1.68 0 0 0 8.56 6.88C8.56 5.95 7.81 5.19 6.88 5.19A1.69 1.69 0 0 0 5.19 6.88C5.19 7.81 5.95 8.56 6.88 8.56M8.27 18.5V10.13H5.5V18.5H8.27Z" />
+                </svg>
               </a>
             )}
             {freelancer.github && (
               <a href={freelancer.github} target="_blank" rel="noopener noreferrer" class="text-neutral-800 dark:text-neutral-100 inline-flex items-center">
-                <Icon name="mdi:github" class="w-6 h-6 mr-2" /> 
+                <svg class="w-6 h-6 mr-2" viewBox="0 0 24 24">
+                  <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
+                </svg>
               </a>
             )}
           </div>
@@ -115,17 +131,26 @@ const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastNam
         <div class="p-8">
           <h2 class="text-2xl font-semibold mb-2 text-blue-500 dark:text-blue-400">{`Who's ${freelancer.firstName}`}?</h2>
           <p class="text-pink-500 dark:text-pink-400 mb-2">{freelancer.headline}</p>
-          <p class="text-neutral-500 dark:text-neutral-500 mb-2">
-            📍 {freelancer.location} {getFlagEmoji(freelancer.countryCode)}
+          <p class="text-neutral-500 dark:text-neutral-500 mb-2 flex items-center gap-2">
+            📍 {freelancer.location} 
+            {flagImage && (
+              <Image 
+                src={flagImage}
+                alt={`Flag of ${freelancer.location}`}
+                width={20}
+                height={15}
+                class="inline-block"
+              />
+            )}
           </p>
           <p class="text-neutral-500 dark:text-neutral-500 mb-2">🗣️ {freelancer.language}</p>
           <div class="mb-4 text-neutral-500 dark:text-neutral-500">
             <p>Started web development in {freelancer.yearStartedWebDev}</p>
           </div>
           <div class="mb-4 text-neutral-500 dark:text-neutral-500">
-            <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Expertise / potential roles</h2>
+            <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Expertise / potential roles</h3>
             <div class="flex flex-wrap gap-2">
-              {freelancer.skills.map((skill) => (
+              {freelancer.skills.map((skill: string) => (
                 <span class="bg-gray-200 rounded-full px-3 py-1 text-sm">{skill}</span>
               ))}
             </div>
@@ -147,14 +172,14 @@ const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastNam
           )}
           {freelancer.otherCertifications && (
             <div class="mb-4 text-neutral-500 dark:text-neutral-500">
-              <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Other Certifications</h2>
+              <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Other Certifications</h3>
               <p>{freelancer.otherCertifications}</p>
             </div>
           )}
 
           {freelancer.references && (
             <div class="mb-4 text-neutral-500 dark:text-neutral-500">
-              <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Spryker References</h2>
+              <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Spryker References</h3>
               <div class="references" set:html={freelancer.references}></div>
             </div>
           )}
@@ -178,13 +203,13 @@ const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastNam
             )}
             {freelancer.idealCustomer && (
               <div class="mb-4 text-neutral-500 dark:text-neutral-500">
-                <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Ideal Customer</h2>
+                <h3 class="font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Ideal Customer</h3>
                 <div class="ideal-customer" set:html={freelancer.idealCustomer}></div>
               </div>
             )}
           {freelancer.contact && (
             <div class="mb-4 mt-8 text-neutral-500 dark:text-neutral-500">
-              <h3 class="text-lg font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Eager to get started?</h2>
+              <h3 class="text-lg font-semibold mb-2 text-neutral-800 dark:text-neutral-100">Eager to get started?</h3>
               <p>Let's reach out: <a href={`mailto:${freelancer.contact}`}>{freelancer.contact}</a></p>
             </div>
           )}
@@ -196,4 +221,4 @@ const freelancerSlug = generateNameSlug(freelancer.firstName, freelancer.lastNam
     <strong>⚠️ Note:</strong> The information above is provided by the person listed and - aside from possible Spryker Certifications - is not validated by CommerceQuest and/or Spryker. A listing on this page is NOT an endorsement from CommerceQuest and/or Spryker. Make sure to always do your own due dilligence when you hire someone.
   </div>
   </div>
-</MainLayout>
+</MainLayout>