Reimplement project gallery as static content

assets/js/project_info.csv → _data/projects.csv

@@ -15,4 +15,4 @@ Open Source San José brings together local mappers to maintain OSM’s coverage
 6/29/2020 17:08:00,10,Disaster Response San Jose,Archived,"Web application that notifies people of active disaster information for San Jose and includes disaster planning resources, plus an administrative interface for disaster response managers to create/maintain active disaster updates",,,,,https://github.com/codeforsanjose/disaster-response-sj,,/img/projects/project_placeholder.jpg,,,,,
 6/29/2020 17:08:00,11,San Jose Census,Archived,"Website to help people understand why the Census matters, and view sample questions asked on the Census. Translated in Spanish and Vietnamese.",,,,,https://github.com/codeforsanjose/census2020,,/img/projects/project_placeholder.jpg,,,,,
 6/23/2020 9:49:31,12,Silicon Valley Strong - Resident Assistant Chatbot,Maintained,"Curate content and refine translations for the City of San Jose's resident assistant chatbot, which is live on SiliconValleyStrong.org.","Curate content and refine translations for the City of San Jose's resident assistant chatbot, which is live on SiliconValleyStrong.org. Users can interact with the chatbot to get answers to FAQ related to COVID-19 and local resources.","Google Forms, Google Sheets","Content Strategy, Design, Project Management, Data Analysis, Conversation Design, Translation, Accessibility",San Jose Mayor's Office of Tech and Innovation,,https://siliconvalleystrong.org,/img/projects/project_placeholder.jpg,,,,,
-6/29/2020 17:08:00,13,Open Source San Jose Website,Active,Update the old Code for San Jose website with a v2.0,"Updating the CFSJ website to include project status, links to resources and allow for new project proposals.",,,,https://github.com/codeforsanjose/codeforsanjose.github.io,https://opensourcesanjose.org/,/img/projects/project_placeholder.jpg,,,,,
+3/27/2025 17:08:00,13,Open Source San Jose Website,Active,Update the old Code for San Jose website with a v2.0,"Updating the CFSJ website to include project status, links to resources and allow for new project proposals.","HTML, CSS, JavaScript, Jekyll, Ruby",Frontend,,https://github.com/codeforsanjose/codeforsanjose.github.io,https://opensourcesanjose.org/,/img/projects/project_placeholder.jpg,,,,,

_includes/projects.html

@@ -0,0 +1,27 @@
+<div id="modal-attach" class="projects">
+  {% for project in site.data.projects limit: include.limit %}
+  {% unless include.status and include.status != project.status %}
+  <div class="project-card"
+    data-title="{{ project.title | xml_escape }}"
+    data-description="{{ project.project_description | xml_escape }}"
+    data-skills="{{ project.skills | xml_escape }}"
+    data-partner="{{ project.partner | xml_escape }}"
+    data-photo2="{{ project.photo2 | xml_escape }}"
+    data-photo2-alt="{{ project.photo2_alt | xml_escape }}"
+    data-photo3="{{ project.photo3 | xml_escape }}"
+    data-photo3-alt="{{ project.photo3_alt | xml_escape }}">
+    <p class="badge {{ project.status }}">{{ project.status }}</p>
+    <img onerror='this.style.display = "none"' class="project-img" src="../assets{{ project.photo1 }}" alt="{{ project.photo1_alt | xml_escape }}" />
+    <h4>{{ project.title | xml_escape }}</h4>
+    <p>{{ project.project_summary | xml_escape }}</p>
+    <div id="project-links">
+      <a href="{{ project.github_url }}" target="_blank" rel="noref noopener">
+        <img src="./assets/img/social_logos/GitHub-Mark-Light-120px-plus.png" alt="Github" class="project-gh-logo"></a>
+      <a href='{{ project.live_url }}' target="_blank" rel="noref noopener"><i class="fas fa-2x fa-external-link-alt"></i></a>
+    </div>
+    <p class="tech">Tech: {{ project.tech | xml_escape }}</p>
+    <button onclick="openModal(this.parentElement)" class="learn-more">Learn More</button>
+  </div>
+  {% endunless %}
+  {% endfor %}
+</div>

assets/js/project-info-projects.js

@@ -1,60 +1,22 @@
-let projects = [];
-
-function init() {
-  Papa.parse("./assets/js/project_info.csv", {
-    download: true,
-    header: true,
-    complete: showInfo,
-  });
-}
-
-window.addEventListener("DOMContentLoaded", init);
-
-function showInfo(results) {
-  projects = results.data;
-  let workDiv = document.getElementById("modal-attach");
-  workDiv.innerHTML = results.data
-    .map((project) => {
-      console.log(project);
-      return `<div class="project-card">
-            <p class="badge ${project.status}">${project.status}</p>
-            <img onerror='this.style.display = "none"' class="project-img" src="../assets${project.photo1}" alt="${project.photo1_alt}" />
-            <h4>${project.title}</h4>
-            <p>${project.project_summary}</p>
-            <div id="project-links">
-            <a href="${project.github_url}" target="_blank" rel="noref noopener">
-            <img src="./assets/img/social_logos/GitHub-Mark-Light-120px-plus.png" alt="Github" class="project-gh-logo"></a>
-            <a href='${project.live_url}' target="_blank" rel="noref noopener"><i class="fas fa-2x fa-external-link-alt"></i></a>
-            </div>
-            <p class="tech">Tech: ${project.tech}</p>
-            <button onclick="openModal('${project.title}')" class="learn-more">Learn More</button>
-          </div>`;
-    })
-    .join("");
-}
-
-function openModal(title) {
+function openModal(card) {
   document.addEventListener("keydown", accessibleModalClose);
   const pagePos = window.scrollY;
   document.body.style.position = "fixed";
   document.body.style.top = `-${pagePos}px`;
-  var modalProject = projects.filter((item) => item.title.includes(title));
-  let project = modalProject[0];
-  console.log(project);
   let projectModal = document.createElement("div");
   projectModal.setAttribute("class", "projectModalStyle");
   projectModal.setAttribute("id", "openModal");
   projectModal.innerHTML = `
       <i onclick="closeModal()" class="fas fa-2x fa-times"></i>
       <div class="modal-imgs">
-        <img onerror='this.style.display = "none"' src='../assets${project.photo2}' alt="${project.photo2_alt}">
-        <img onerror='this.style.display = "none"' src='../assets${project.photo3}' alt="${project.photo3_alt}">
+        <img onerror='this.style.display = "none"' src='../assets${card.dataset.photo2}' alt="${card.dataset.photo2Alt}">
+        <img onerror='this.style.display = "none"' src='../assets${card.dataset.photo3}' alt="${card.dataset.photo3Alt}">
       </div>
       <div class="modal-info">
-        <h2>${project.title}</h2>
-        <p>${project.project_description}</p>
-        <p>Skills needed: ${project.skills}</p>
-        <p>Partner(s): ${project.partner}<p>
+        <h2>${card.dataset.title}</h2>
+        <p>${card.dataset.description}</p>
+        <p>Skills needed: ${card.dataset.skills}</p>
+        <p>Partner(s): ${card.dataset.partner}<p>
       </div>
     `;
   document.getElementById("modal-attach").appendChild(projectModal);

index.html

@@ -14,8 +14,6 @@
     integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
     crossorigin=""></script>
   <script src="./assets/js/project-info-projects.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js">
-  </script>
 ---
 <div id="home-hero">
   <div id="home-hero-content">
@@ -71,9 +69,7 @@ <h3>What we do...</h3>
   <h2>Our Work</h2>
   <div class="small-hero" id="our-work-img"></div>
   <p class="sectn-subh">Look at what we're working on and get involved!</p>
-  <div id="modal-attach" class="projects">
-
-  </div>
+  {% include projects.html status="Active" limit=6 %}
   <a href="./projects.html" id="see-more">+ See More</a>
 </div>
 

projects.html

@@ -6,8 +6,6 @@
   <link rel="stylesheet" href="./assets/css/projects.min.css">
 scripts: |
   <script src="./assets/js/project-info-projects.js"></script>
-  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js">
-  </script>
 ---
 <div class="small-hero" id="projects-title">
     <h1>Projects</h1>
@@ -27,7 +25,5 @@ <h1>Projects</h1>
     </p>
 </div>
 <div id="our-work">
-    <div id="modal-attach" class="projects">
-
-    </div>
+    {% include projects.html %}
 </div>