From 5f6496b3be9e65825a6596028972a109accade66 Mon Sep 17 00:00:00 2001
From: CarlosSanabriaM <sanabria.miranda.carlos@gmail.com>
Date: Fri, 8 Nov 2024 15:30:31 +0100
Subject: [PATCH] feat: list multiple jobs within a company in same tab

---
 exampleSite/config.yaml                   | 113 +++++++++++-----------
 layouts/partials/sections/experience.html |  91 ++++-------------
 2 files changed, 77 insertions(+), 127 deletions(-)

diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index 547c89426..9d7ddbf64 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -175,66 +175,65 @@ params:
   experience:
     enable: true
     # title: "Custom Name"
-    items:
-      - job: "Senior Software Developer"
-        company: "Facebook"
-        companyUrl: "https://example.com"
-        date: "Jan 2022 - present"
-        featuredLink:
-          enable: true
-          name: "View the project"
-          url: "https://example.com"
-        content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
-
-      - job: "Software Developer"
-        company: "Amazon"
+    companies:
+      - company: "Facebook"
         companyUrl: "https://example.com"
-        date: "Sep 2020 - Dec 2021"
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        info:
-          enable: true
-          content: I worked as a software developer for more than one year in Amazon.
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "Junior Software Developer"
-        company: "Apple"
+        jobs:     
+          - job: "Senior Software Developer"
+            date: "Jan 2022 - present"
+            featuredLink:
+              enable: true
+              name: "View the project"
+              url: "https://example.com"
+            content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
+  
+          - job: "Software Developer"
+            date: "Sep 2020 - Dec 2021"
+            featuredLink:
+              enable: true
+              url: "https://example.com"
+            info:
+              enable: true
+              content: I worked as a software developer for more than one year in Facebook.
+            content: |
+              I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+    
+              - Lead backend developer for a product.
+              - Created a frontend design for a product.
+      - company: "Apple"
         companyUrl: "https://example.com"
-        date: "Jan 2020 - Aug 2020"
-        info:
-          enable: false
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "UI/UX Designer"
-        company: "Netflix"
-        companyUrl: "https://example.com"
-        date: "June 2017 - Nov 2019"
-        featuredLink:
-          enable: true
-          url: "https://example.com"
-        content: |
-          I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
-
-          - Lead backend developer for a product.
-          - Created a frontend design for a product.
-
-      - job: "Product Designer"
-        company: "Google"
+        jobs:     
+          - job: "Junior Software Developer"
+            company: "Apple"
+            companyUrl: "https://example.com"
+            date: "Jan 2020 - Aug 2020"
+            info:
+              enable: false
+            featuredLink:
+              enable: true
+              url: "https://example.com"
+            content: |
+              I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+    
+              - Lead backend developer for a product.
+              - Created a frontend design for a product.
+      - company: "Netflix"
         companyUrl: "https://example.com"
-        date: "Feb 2016 - Mar 2017"
-        content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
+        jobs:  
+          - job: "UI/UX Designer"
+            date: "June 2017 - Nov 2019"
+            featuredLink:
+              enable: true
+              url: "https://example.com"
+            content: |
+              I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city.
+    
+              - Lead backend developer for a product.
+              - Created a frontend design for a product.
+    
+          - job: "Product Designer"
+            date: "Feb 2016 - Mar 2017"
+            content: "I am currently working as a software developer at [example org.](https://example.com) in San Francisco, CA. I am currently working on a project that will be used to help people find the best way to get around the city."
 
   # Education
   education:
diff --git a/layouts/partials/sections/experience.html b/layouts/partials/sections/experience.html
index f9c2d13dd..e11d3ee91 100644
--- a/layouts/partials/sections/experience.html
+++ b/layouts/partials/sections/experience.html
@@ -6,60 +6,49 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
             <div class="col-sm-12 col-md-8 col-lg-8 py-5">
                 <div class="experience-container px-3 pt-2">
                     <ul class="nav nav-pills mb-3 bg-transparent primary-font" id="pills-tab" role="tablist">
-                        {{ range $index, $element := .Site.Params.experience.items }}
-                        {{ if (eq $index 0) }}
+                        {{ range $indexCompany, $company := .Site.Params.experience.companies }}
+                        {{ $sanitizedCompany := replace .company " " "-" }}
                         <li class="nav-item px-1 bg-transparent" role="presentation">
                             <div 
-                                class="nav-link active bg-transparent" 
-                                aria-selected="true" 
+                                class="nav-link bg-transparent{{ if (eq $indexCompany 0) }} active{{ end }}" 
+                                aria-selected="{{ eq $indexCompany 0 }}"
                                 role="tab" 
                                 data-bs-toggle="pill"
-                                id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
-                                data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
-                                aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}' 
-                            >
-                                {{ .company }}
-                            </div>
-                        </li>
-                        {{ else }}
-                        <li class="nav-item px-1 bg-transparent" role="presentation">
-                            <div 
-                                class="nav-link bg-transparent" 
-                                aria-selected="true" 
-                                role="tab" 
-                                data-bs-toggle="pill"
-                                id='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
-                                data-bs-target='#pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}' 
-                                aria-controls='{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
+                                id='{{ $sanitizedCompany }}-tab'
+                                data-bs-target='#pills-{{ $sanitizedCompany }}'
+                                aria-controls='{{ $sanitizedCompany }}' 
                             >
                                 {{ .company }}
                             </div>
                         </li>
                         {{ end }}
-                        {{ end }}
                     </ul>
                     <div class="tab-content pb-5 pt-2 bg-transparent primary-font" id="pills-tabContent">
-                        {{ range $index, $element := .Site.Params.experience.items }}
-                        {{ if (eq $index 0) }}
+                        {{ range $indexCompany, $company := .Site.Params.experience.companies }}
+                        {{ $sanitizedCompany := replace .company " " "-" }}
                         <div 
-                            class="tab-pane fade show active bg-transparent" 
+                            class="tab-pane fade bg-transparent{{ if (eq $indexCompany 0) }} show active{{ end }}" 
                             role="tabpanel"
-                            id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
-                            aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
+                            id='pills-{{ $sanitizedCompany }}'
+                            aria-labelledby='pills-{{ $sanitizedCompany }}-tab'
                         >
+						{{ range $indexJob, $job := .jobs }}		
+						<div class="{{ if (ne $indexJob 0) }}pt-2{{ end }}">
                             <div>
                                 <span class="h4">{{ .job }}</span>
                                 <small>-</small>
-                                <a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
+                                <a href="{{ $company.companyUrl }}" target="_blank">{{ $company.company }}</a>
+
                                 <div class="pb-1">
                                     <small>{{ .date }}</small>
                                     {{ if .info.enable | default true }}
                                     <span class="p-2">
+                                        {{ $jobStatus := cond (eq $indexJob 0) "Working" "Worked" }}
                                         <span 
                                             style="cursor: pointer;" 
                                             data-bs-toggle="tooltip" 
-                                            data-bs-placement="top" 
-                                            data-bs-original-title={{ .info.content | default (print "Working as a " .job " at " .company ) }}
+                                            data-bs-placement="top"
+                                            data-bs-original-title={{ .info.content | default (print $jobStatus " as a " .job " at " $company.company ) }}
                                         >
                                             <i class="fas fa-info-circle fa-xs"></i>
                                         </span>
@@ -76,51 +65,13 @@ <h3 class="text-center">{{ .Site.Params.experience.title | default "Experience"
                                 {{ end }}
                             </div>
 
-                            {{ .content | markdownify}}
-                        </div>
-                        {{ else }}
-                        <div 
-                            class="tab-pane fade bg-transparent" 
-                            role="tabpanel"
-                            id='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}'
-                            aria-labelledby='pills-{{ replace .company " " "-" }}-{{ replace .date " " "-" }}-tab'
-                        >
-                            <div>
-                                <span class="h4">{{ .job }}</span>
-                                <small>-</small>
-                                <a href="{{ .companyUrl }}" target="_blank">{{ .company }}</a>
-                                
-                                <div class="pb-1">
-                                    <small>{{ .date }}</small>
-                                    {{ if .info.enable | default true }}
-                                    <span class="p-2">
-                                        <span 
-                                            style="cursor: pointer;" 
-                                            data-bs-toggle="tooltip" 
-                                            data-bs-placement="top" 
-                                            data-bs-original-title={{ .info.content | default (print "Worked as a " .job " at " .company ) }}
-                                        > 
-                                            <i class="fas fa-info-circle fa-xs"></i>
-                                        </span>
-                                    </span>
-                                    {{ end }}
-                                </div>
-                                
-                                {{ if .featuredLink.enable | default false }}
-                                <div class="py-2 featuredLink">
-                                    <a class="p-2 px-4 btn btn-outline-primary btn-sm" href={{ .featuredLink.url | default "#" }} target="_blank">
-                                        {{ .featuredLink.name | default "Featured Link" }} 
-                                    </a>
-                                </div>
-                                {{ end }}
-                            </div>
-
                             <div class="pt-2">
                                 {{ .content | markdownify}}
                             </div>
+						</div>
+							{{ end }}
                         </div>
                         {{ end }}
-                        {{ end }}
                     </div>
                 </div>
             </div>