Add dynamic jobs page

layouts/shortcodes/jobs.html

@@ -1,6 +1,6 @@
 <!-- Get Data maybe from strapi -->
-<div class="flex flex-col">
-  <!-- Check if open jobs are available -->
+<div id="jobsContainer" class="flex flex-col">
+  <!-- Check if open jobs are available
   {{ if le (index (.Site.Data.jobs) 0) 0 }}
     <div class="flex-auto">
       <h2>There are currently no open jobs to apply for</h2>
@@ -8,7 +8,7 @@
     </div>
   {{ end }}
 
-  <!-- Range through all available job offerings -->
+  Range through all available job offerings
   {{ range .Site.Data.jobs }}
     <div class="flex-auto">
       <h2>{{.title}}</h2>
@@ -31,8 +31,9 @@
       type="button" 
       class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 max-w-2xs"
       onclick="openApplyForm('{{.title}}')">Apply</button>
-  {{ end }}
+  {{ end }} -->
 </div>
+<script src="/js/jobs.js"></script>
 
 <form action="/" id="apply-form" class="invisible">
   <div class="color-background"></div>

static/js/jobs.js

@@ -0,0 +1,54 @@
+let jobsContainer = document.getElementById("jobsContainer")
+
+fetch('/json/jobs.json')
+  .then((response) => response.json())
+  .then((json) => {
+    json.forEach((job) => {
+      const jobContainer = document.createElement("div");
+      jobContainer.classList.add("flex-auto");
+
+      const jobTitle = document.createElement("h2");
+      jobTitle.innerHTML = job.title;
+      jobContainer.appendChild(jobTitle)
+      if(job.sub.length > 0) {
+        const jobIcons = document.createElement("div");
+        jobIcons.classList.add("flex", "flex-row", "text-2xl");
+        job.sub.forEach((icon) => {
+          let iconObject
+          switch(icon.source) {
+            case "mdi":
+              iconObject = document.createElement("span");
+              iconObject.classList.add("iconify");
+              iconObject.setAttribute("data-icon", "mdi-"+icon.icon+"");
+              break;
+              case "simpleicons":
+                iconObject = document.createElement("span");
+                iconObject.classList.add("icon");
+                const iconImg = document.createElement("img");
+                iconImg.height = 20;
+                iconImg.width = 20;
+                iconImg.src = "https://cdn.jsdelivr.net/npm/simple-icons@v10/icons/"+icon.icon+".svg"
+                iconObject.appendChild(iconImg);
+                break;
+          }
+          jobIcons.appendChild(iconObject);
+        });
+        jobContainer.appendChild(jobIcons);
+      }
+
+      const jobDescription = document.createElement("p");
+      jobDescription.innerHTML = job.description;
+      jobContainer.appendChild(jobDescription);
+
+      const applyButton = document.createElement("button");
+      applyButton.type = "button"
+      applyButton.classList.add("text-white", "bg-blue-700", "hover:bg-blue-800", "focus:outline-none", "focus:ring-4", "focus:ring-blue-300", "font-medium", "rounded-full", "text-sm", "px-5", "py-2.5", "text-center", "me-2", "mb-2", "dark:bg-blue-600", "dark:hover:bg-blue-700", "dark:focus:ring-blue-800", "max-w-2xs");
+      applyButton.addEventListener("click", () => {
+        openApplyForm(job.title)
+      })
+      applyButton.innerHTML = "Apply"
+      
+      jobsContainer.appendChild(jobContainer)
+      jobContainer.appendChild(applyButton)
+    });
+  });

static/js/team.js

@@ -1,4 +1,4 @@
-teamContainer = document.getElementById("teamContainer");
+let teamContainer = document.getElementById("teamContainer");
 
 function ucFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);