Updated the results page and the footer

_data/assetPaths.json

@@ -1,31 +1,8 @@
 {
-  "merriweathe": "/assets/fonts/merriweather",
-  "public": "/assets/fonts/public-sans",
-  "roboto": "/assets/fonts/roboto-mono",
-  "source-sans": "/assets/fonts/source-sans-pro",
-  "bm.svg": "/assets/img/bm-logo.svg",
-  "bm-small.svg": "/assets/img/bm-small-logo.svg",
-  "code.png": "/assets/img/codes.png",
-  "code.svg": "/assets/img/codes.svg",
-  "disaster.png": "/assets/img/disaster-info.png",
-  "expert.png": "/assets/img/experts.png",
-  "expert.svg": "/assets/img/experts.svg",
-  "help.svg": "/assets/img/help-icon.svg",
-  "her.png": "/assets/img/hero.png",
-  "hire.jpg": "/assets/img/hire-us.jpg",
-  "inspection.png": "/assets/img/inspections.png",
-  "inspection.svg": "/assets/img/inspections.svg",
-  "locatio.png": "/assets/img/location.png",
-  "logo.png": "/assets/img/logo-img.png",
-  "recover.png": "/assets/img/recovery.png",
-  "recover.svg": "/assets/img/recovery.svg",
-  "upload": "/assets/img/uploads",
   "admin.js": "/assets/js/admin-C7YAUYZM.js",
   "admin.map": "/assets/js/admin-C7YAUYZM.js.map",
   "app.js": "/assets/js/app-DBWFVBND.js",
   "app.map": "/assets/js/app-DBWFVBND.js.map",
-  "uswds.js": "/assets/js/uswds-init.js",
-  "index.css": "/assets/styles/index-HWVJ67QH.css",
-  "index.map": "/assets/styles/index-HWVJ67QH.css.map",
-  "im": "/assets/uswds/img"
+  "index.css": "/assets/styles/index-TY2KJRCJ.css",
+  "index.map": "/assets/styles/index-TY2KJRCJ.css.map"
 }

_includes/filterpanel.html

@@ -0,0 +1,123 @@
+<aside class="usa-layout-docs-sidenav desktop:grid-col-3 mobile:grid-col-12 padding-bottom-4">
+  <nav>
+    <ul class="usa-sidenav">
+      <li>
+        <form class="usa-form padding-3" id="stateForm">
+          <fieldset class="usa-fieldset">
+            <legend class="usa-legend margin-bottom-1">
+              <svg class="usa-icon margin-top-2px" aria-hidden="true" focusable="false" role="img">
+                <use xlink:href="{{ '/assets/uswds/img/sprite.svg#filter_alt' | url }}"></use>
+              </svg>
+              <span class="display-inline-block">Filter Results</span>
+            </legend>
+            <section class="location-section">
+              <label class="usa-label" for="state">
+                Location
+              </label>
+              <select class="usa-select" id="state" name="state">
+                <option value>- Select -</option>
+                {% for item in csvData %}
+                <option value="{{ item.Abbr | slug }}">{{ item.Abbr }} - {{ item.State }}</option>
+                {% endfor %}
+              </select>
+            </section>
+            <section class="support-type--section">
+              <h4 class="site-preview-heading">Support Type</h4>
+              <div class="usa-checkbox">
+                <input class="usa-checkbox__input filter-checkbox" id="public-personnel" type="checkbox"
+                  name="public-personnel" value="public-personnel" data-section-id="public-personnel-section" checked />
+                <label class="usa-checkbox__label" for="public-personnel">Public personnel</label>
+              </div>
+              <div class="usa-checkbox">
+                <input class="usa-checkbox__input filter-checkbox" id="private-companies" type="checkbox"
+                  name="private-companies" value="private-companies" data-section-id="private-companies-section"
+                  checked />
+                <label class="usa-checkbox__label" for="private-companies">Private Companies</label>
+              </div>
+            </section>
+            <section class="resource-level-section">
+              <h4 class="site-preview-heading">Resource Level</h4>
+              <div class="usa-checkbox">
+                <input class="usa-checkbox__input filter-checkbox" id="state-territory" type="checkbox"
+                  name="state-territory" value="state-territory" data-section-id="state-mutual-aid-section" checked />
+                <label class="usa-checkbox__label" for="state-territory">State/Territory</label>
+              </div>
+              <div class="usa-checkbox">
+                <input class="usa-checkbox__input filter-checkbox" id="national" type="checkbox" name="national"
+                  value="national" data-section-id="national-mutual-aid-section" checked />
+                <label class="usa-checkbox__label" for="national">National</label>
+              </div>
+            </section>
+          </fieldset>
+        </form>
+      </li>
+    </ul>
+  </nav>
+</aside>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    // Function to toggle visibility of sections
+    function toggleSection(sectionId, isVisible) {
+      let section = document.getElementById(sectionId);
+      if (section) {
+        section.style.display = isVisible ? 'block' : 'none';
+      }
+    }
+
+    //Build state url
+    function buildStateUrl(selectedState) {
+      var pathname = window.location.pathname;
+      // Split the pathname into segments
+      var segments = pathname.split('/');
+
+      // Extract the base path up to "/states/"
+      var stateIndex = segments.indexOf('states');
+      var basePath = segments.slice(0, stateIndex).join('/');
+
+      // Build the new URL
+      var newUrl = basePath + '/states/' + selectedState + '/';
+      return newUrl;
+    }
+
+    // Attach event listener directly to state dropdown
+    const stateSelect = document.getElementById('state');
+    if (stateSelect) {
+      stateSelect.addEventListener('change', function () {
+        var selectedState = this.value;
+        if (/^[A-Za-z]{2}$/.test(selectedState)) {
+          window.location.href = buildStateUrl(selectedState);
+        } else {
+          console.error('Invalid state selected');
+        }
+      });
+    }
+
+    // Event listener for checkboxes
+    document.querySelectorAll('.filter-checkbox').forEach(function (checkbox) {
+      checkbox.addEventListener('change', function () {
+        let isChecked = this.checked;
+        let sectionId = this.getAttribute('data-section-id');
+        toggleSection(sectionId, isChecked);
+      });
+    });
+
+    //Function to extract state code from the URL path (e.g., /states/ny/)
+    function getCurrentStateFromPath() {
+      const pathSegments = window.location.pathname.split('/');
+      // Assuming the URL pattern is /states/{stateCode}/
+      const stateIndex = pathSegments.indexOf('states');
+      if (stateIndex >= 0 && stateIndex < pathSegments.length - 1) {
+        return pathSegments[stateIndex + 1];
+      }
+      return null;
+    }
+
+    const currentState = getCurrentStateFromPath();
+
+    if (currentState) {
+      const stateSelect = document.getElementById('state');
+      stateSelect.value = currentState;
+    }
+  });
+</script>

_includes/footer.html

@@ -5,28 +5,28 @@
         <div class="tablet:grid-col">
           <h5>Mutual aid SRC</h5>
           <ul class="add-list-reset">
-            <li>Accessibility</li>
-            <li>Accountability</li>
-            <li>Careers</li>
-            <li>Contact us</li>
+            <li><a href="/accessibility" class="survey-processed">Accessibility</a></li>
+            <li><a href="/about/reports-and-data/annual-reports" class="survey-processed">Accountability</a></li>
+            <li><a href="/careers" class="survey-processed">Careers</a></li>
+            <li><a href="/about/contact" class="survey-processed">Contact Us</a></li>
           </ul>
         </div>
         <div class="tablet:grid-col">
           <h5>FEMA resources</h5>
           <ul class="add-list-reset">
-            <li>No Fear Act data</li>
-            <li>FOIA</li>
-            <li>Privay policy</li>
+            <li><a href="/about/organization/equal-rights/no-fear-act" class="survey-processed">No FEAR Act</a></li>
+            <li><a href="/foia" class="survey-processed">FOIA</a></li>
+            <li><a href="/about/privacy-policy" class="survey-processed">Privacy</a></li>
           </ul>
         </div>
         <div class="tablet:grid-col">
           <h5>Partner sites</h4>
           <ul class="add-list-reset">
-            <li>Ready.gov</li>
-            <li>Whitehouse.gov</li>
-            <li>DHS.gov</li>
-            <li>FEMA.gov</li>
-            <li>USA.gov</li>
+            <li><a href="https://www.ready.gov/" target="_blank" class="survey-processed">Ready.gov</a></li>
+            <li><a href="https://www.whitehouse.gov/" target="_blank" class="survey-processed">Whitehouse.gov</a></li>
+            <li><a href="https://dhs.gov" target="_blank" class="survey-processed">DHS.gov</a></li>
+            <li><a href="https://www.fema.gov/" target="_blank" class="survey-processed">FEMA.gov</a>
+            <li><a href="https://usa.gov" target="_blank" class="survey-processed">USA.gov</a>
           </ul>
         </div>
         <div class="tablet:grid-col">

_includes/layouts/page.html

@@ -2,17 +2,15 @@
 layout: layouts/base
 ---
 
-<div id="main-content" class="usa-layout-docs usa-section">
+<div class="usa-section {{ className }}">
   <div class="grid-container">
     <div class="grid-row grid-gap">
       {% if sidenav == true %}
       {% include "sidenav.html" %}
       {% endif %}
-      <main>
-        <div class="usa-layout-docs__main desktop:grid-col-9 usa-prose {{ className }}">
-            {{ content }}
-        </div>
+      <main class="desktop:grid-col-9 usa-prose" id="main-content">
+        {{ content }}
       </main>
     </div>
   </div>
-</div>
+</div>

_includes/layouts/results.html

@@ -1,23 +1,108 @@
 ---
-layout: layouts/default
+layout: layouts/base
 ---
 
-{% comment %}
-This is used in blog posts. The index page can be found at blog/index.html
-{% endcomment %}
-
-<div class="usa-layout-docs usa-section">
+<div class="usa-section {{ className }}">
   <div class="grid-container">
     <div class="grid-row grid-gap">
-      <div class="usa-layout-docs__main desktop:grid-col-9 usa-prose">
-        <h1 class="title">{{title}}</h1>
-        {{ content }}
+      <main class="grid-col-12 usa-prose" id="main-content">
+        <h1>Mutual Aid Assistance Results</h1>
+        <div class="usa-alert usa-alert--warning grid-container padding-x-0">
+          <div class="usa-alert__body">
+            <h4 class="usa-alert__heading">Disclaimer</h4>
+            <div class="usa-alert__text grid-row grid-gap">
+              <div class="mobile:grid-col-12 desktop:grid-col-10">
+                This website contains references to non-federal resources and organizations. The references are solely
+                for informational purposes and are not an endorsement of any non-federal entity by FEMA, Department of
+                Homeland Security, or the U.S. government.
+              </div>
+              <div class="mobile:grid-col-12 desktop:grid-col-2">
+                <button class="usa-button disclaimer-button" type="button">View full disclaimer</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="contentRow margin-top-4">
+          <div class="grid-row grid-gap">
+            {% include "./filterpanel.html" %}
+            <div class="desktop:grid-col-9 mobile:grid-col-12">
+              {% assign imagePath = "/assets/img/states/" | append: item.Abbr | append: ".png" %}
+              {% assign imacPrivate = item["IMAC Private"] %}
 
-        {% for item in csvData %}
-        <h2>{{ item.State }}</h2>
-        <p>{{ item["EMAC Description"] }}</p>
-        {% endfor %}
-      </div>
+              {% assign first_eight = imacPrivate | downcase | slice: 0, 8 %}
+              {% if first_eight == "no known" %}
+              {% assign modifiedString = "has " | append: imacPrivate | downcase %}
+              {% else %}
+              {% assign modifiedString = imacPrivate %}
+              {% endif %}
+              <section class="usa-section intro-section">
+                <div class="grid-row grid-gap">
+                  <div class="image-block desktop:grid-col-3 mobile:grid-col-12">
+                    <img src="{{ imagePath | url }}" role="img" alt="{{ item.State }}" aria-hidden="true" />
+                  </div>
+                  <div class="intro-content-block desktop:grid-col-9 mobile:grid-col-12">
+                    <h2 class="margin-y-0">
+                      Overview of Mutual Aid Resources Available in {{ item.State }}
+                    </h2>
+                    <ul class="usa-list">
+                      <li>{{ item.State }} {{ item["IMAC Description"] | downcase }}</li>
+                      <li>{{ item.State }} {{ item["EMAC Public/Private"] | downcase }}</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+              <section id="state-mutual-aid-section" class="usa-section">
+                <h2 class="margin-y-0 {{first_eight == 'No known'}}">
+                  State Mutual Aid Resources
+                </h2>
+                <div class="grid-container">
+                  <h3>
+                    Intrastate Mutual Aid Compact (IMAC)
+                  </h3>
+                  <div id="public-personnel-section">
+                    <h4>IMAC Public</h4>
+                    <ul class="usa-list">
+                      <li>{{ item.State }} {{ item["IMAC Public"] | downcase }}</li>
+                    </ul>
+                  </div>
+                  <div id="private-companies-section">
+                    <h4>IMAC Private</h4>
+                    <ul class="usa-list">
+                      <li>{{ item.State }} {{ modifiedString }}</li>
+                    </ul>
+                  </div>
+                </div>
+              </section>
+              <section id="national-mutual-aid-section" class="usa-section">
+                <h2 class="margin-y-0">
+                  National Mutual Aid Resources
+                </h2>
+                <div class="grid-container">
+                  <h3>
+                    Emergency Mutual Aid Compact (EMAC)
+                  </h3>
+                  <h4>EMAC Status</h4>
+                  <table class="usa-table usa-table--striped">
+                    <tbody>
+                      <tr>
+                        <th scope="row">Standard EMAC</th>
+                        <td>
+                          {{ item["EMAC Description"] }}
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                  <h4>EMAC Public/Private Details</h4>
+                  <ul class="usa-list">
+                    <li>{{ item.State }} {{ item["EMAC Public/Private"] | downcase }}</li>
+                  </ul>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+        {{ content }}
+      </main>
     </div>
   </div>
-</div>
+</div>

_includes/meta.html

@@ -28,8 +28,8 @@
   <link rel="icon" type="image/png" sizes="16x16" rel="noopener" target="_blank" href="{{ '/favicon/favicon-16x16.png' | url }}">
   <link rel="icon" href="{{ '/myfavicon.ico' | url }}" type="image/x-icon" />
   <link rel="shortcut icon" href="{{ '/myfavicon.ico' | url }}" type="image/x-icon" /> 
-  <link rel="manifest" href="{{ '/favicon/site.webmanifest' }}">
-  <link rel="mask-icon" href="{{ '/favicon/safari-pinned-tab.svg' }}" color="#3d4551">
+  <link rel="manifest" href="{{ '/favicon/site.webmanifest' | url }}">
+  <link rel="mask-icon" href="{{ '/favicon/safari-pinned-tab.svg' | url }}" color="#3d4551">
   <meta name="msapplication-TileColor" content="#da532c">
   <meta name="theme-color" content="#ffffff">
 

pages/states.md

@@ -1,5 +1,5 @@
 ---
-layout: layouts/page
+layout: layouts/results
 className: "state-results-page"
 pagination:
   data: csvData
@@ -8,29 +8,3 @@ pagination:
   addAllPagesToCollections: true
 permalink: "/states/{{ item.Abbr | slug }}/index.html"
 ---
-
-<h1>Mutual Aid Assistance Results</h1>
-<div class="usa-alert usa-alert--warning grid-container padding-x-0">
-  <div class="usa-alert__body">
-    <h4 class="usa-alert__heading">Disclaimer</h4>
-    <div class="usa-alert__text grid-row grid-gap">
-      <div class="mobile:grid-col-12 desktop:grid-col-10">
-        This website contains references to non-federal resources and organizations. The references are solely for informational purposes and are not an endorsement of any non-federal entity by FEMA, Department of Homeland Security, or the U.S. government.   
-      </div>
-      <div class="mobile:grid-col-12 desktop:grid-col-2">
-        <button class="usa-button" type="button">View full disclaimer</button>
-      </div>
-    </div>
-  </div>
-</div>
-<section class="usa-section">
-  <div class="grid-container">
-    <h2 class="font-heading-xl margin-y-0">
-      Overview of Mutual Aid Resources Available in {{ item.State }}
-    </h2>
-    <ul class="usa-list">
-      <li>{{ item.State }} {{ item["IMAC Description"] | downcase }}</li>
-      <li>{{ item.State }} {{ item["EMAC Public/Private"] | downcase }}</li>
-    </ul>
-  </div>
-</section>