Dynamically Created Pages for each Program Area Using a Layout

_config.yml

@@ -32,7 +32,7 @@ collections:
   design-system:
     output: true
   program-areas:
-    output: false
+    output: true
 
 # Please refer to the documentation here[https://jekyllrb.com/docs/configuration/front-matter-defaults/] before modifying defaults
 # The settings below reads as so
@@ -56,6 +56,11 @@ defaults: # The `defaults` key holds an array of scope/values pairs that define
       type: "guide-pages"
     values:
       layout: "guide-pages"
+  - scope:
+      path: "_program-areas"
+      type: "program-areas"
+    values:
+      layout: "program-area-pages"
 
 plugins:
   - jekyll-sitemap

_includes/program-area-pages-cards.html

@@ -1,6 +1,6 @@
 <!-- These are the cards found on a program area page, such as the cards on https://www.hackforla.org/citizen-engagement webpage. -->
 
-{% assign visible_projects = site.projects | where: "program-area", "Citizen Engagement" | where: "visible", "true" %}
+{% assign visible_projects = site.projects | where: "program-area", page["program-area"] | where: "visible", "true" %}
              {% for item in visible_projects %}
              {%- if
                 item.problem.size > 0 and

pages/citizen-engagement.html → _layouts/program-area-pages.html

@@ -1,12 +1,10 @@
 ---
 layout: default
-title: Citizen Engagement
-permalink: /citizen-engagement
 ---
 <!-- Header banner -->
 <div class="header-container flex-container program-header-container">
     <div class="header-text">
-        <h1 class="title1">Citizen Engagement</h1>
+        <h1 class="title1">{{page.name}}</h1>
         <p>
             We at Hack for LA are volunteers that believe in building technology
             and analyzing data to make it easier to participate effectively in your community.
@@ -48,7 +46,7 @@ <h3>Organizations We Work With</h3>
                 <div class="organizations-images">
                     {% assign partners = site.data.internal.partners %}
                     {% for partner in partners %}
-                      {% if partner.program-area contains "Citizen Engagement" %}
+                      {% if partner["program-area"] contains page["program-area"] %}
                         <img class="org-img org-img-large" src="{{ partner.image }}" alt="{{ partner.name }}">
                       {% endif %}
                     {% endfor %}

_sass/main.scss

@@ -67,7 +67,7 @@
 @import 'components/donate.scss';
 @import 'components/donate-components.scss';
 @import 'components/design-system.scss';
-@import 'components/citizen_engagement.scss';
+@import 'components/program-area-pages.scss';
 @import 'components/privacy-policy.scss';
 @import 'components/guides.scss';