Move program-areas directory and refactor program-areas.html (hackfor…

…la#6388)

* moved and renamed program-areas directory

* added program-areas to collections variable

* refactor code so that it works to pull information from files in the _program-areas directory

* indenting and removing blank lines for clarity

_config.yml

@@ -31,6 +31,8 @@ collections:
     output: true
   design-system:
     output: true
+  program-areas:
+    output: false
 
 # Please refer to the documentation here[https://jekyllrb.com/docs/configuration/front-matter-defaults/] before modifying defaults
 # The settings below reads as so

pages/program-areas.html

@@ -16,54 +16,49 @@ <h1 class="title1">Program Areas</h1>
 </div>
 
 <section class="content-section content--program-areas">
-  {% assign sorted_program_areas = site.data.internal.program-areas | sort %}
+  {% assign sorted_program_areas = site.program-areas | sort %}
   {% for program_areas in sorted_program_areas %}
-  {% if program_areas[1].size > 0 %}
   <div class="page-card card-primary page-card-lg page-card-container">
       <div class="page-card-image-container">
-        <img class="page-card-image" src="{{ program_areas[1].image }}" alt="">
+        <img class="page-card-image" src="{{ program_areas.image }}" alt="">
       </div>
       <div class="page-card-content">
-          <h2 class="title4">{{program_areas[1].name}}</h2>
-          <p>{{program_areas[1].description}}</p>
+          <h2 class="title4">{{program_areas.name}}</h2>
+          <p>{{program_areas.description}}</p>
           <p>
               <strong>SDGs: </strong>
-              {% if program_areas[1].SDG %}
-              {% for sdg in program_areas[1].SDG %}
-              {% if forloop.last == true %}
-              and {{sdg}}
-              {% else %}
-              {{sdg}},
-              {% endif %}
-              {% endfor %}
+              {% if program_areas.SDG %}
+                {% for sdg in program_areas.SDG %}
+                  {% if forloop.last == true %}
+                    and {{sdg}}
+                  {% else %}
+                    {{sdg}},
+                  {% endif %}
+                {% endfor %}
               {% endif %}<br>
           </p>
           <ul class="project-card-mini-list-alignment">
               {% for project in site.projects %}
-              {% for project_program in project.program-area %}
-              {% if program_areas[1].program-area == project_program and project.visible %}
-              {% assign project_relative_path = project.slug | prepend: "../projects/" %}
-              <li class="project-card-mini inline-list" id="{{project.identification}}">
-                  <img class="project-card-mini-image" src="{{project.image}}" alt="">
-                  <a class="project-card-mini-title" href="{{ project_relative_path }}">{{project.title}}</a>
-              </li>
-              {% endif %}
-              {% endfor %}
+                {% for project_program in project.program-area %}
+                  {% if program_areas.program-area == project_program and project.visible %}
+                    {% assign project_relative_path = project.slug | prepend: "../projects/" %}
+                    <li class="project-card-mini inline-list" id="{{project.identification}}">
+                        <img class="project-card-mini-image" src="{{project.image}}" alt="">
+                        <a class="project-card-mini-title" href="{{ project_relative_path }}">{{project.title}}</a>
+                    </li>
+                  {% endif %}
+                {% endfor %}
               {% endfor %}
               <!--Spacer li are used to center the project card mini on mobile-->
               <li class="project-card-mini-spacer"></li>
               <li class="project-card-mini-spacer"></li>
               <li class="project-card-mini-spacer"></li>
           </ul>
-
-
       </div>
   </div>
-
-  {% endif %}
   {% endfor %}
-
 </section>
+
 <section class="join-us-footer">
   <div class="join-us-footer-body">
       <img