Site style and content updates

.eleventy.js

@@ -17,6 +17,11 @@ module.exports = function (config) {
 
   // Copy USWDS init JS so we can load it in HEAD to prevent banner flashing
   config.addPassthroughCopy({'./node_modules/@uswds/uswds/dist/js/uswds-init.js': 'assets/js/uswds-init.js'});
+  config.addPassthroughCopy({ './node_modules/@uswds/uswds/dist/img': 'assets/uswds/img' });
+  config.addPassthroughCopy({ './node_modules/@uswds/uswds/dist/fonts': 'assets/fonts' });
+  config.addPassthroughCopy({ './theme/img': 'assets/img' });
+  config.addPassthroughCopy({ './favicon': '/favicon' });
+  config.addPassthroughCopy({ './favicon/favicon.ico': '/myfavicon.ico' });
 
   // Add plugins
   config.addPlugin(pluginRss);

.gitignore

@@ -119,4 +119,5 @@ web_modules/
 # 11ty Related
 _site
 public
-node_modules
+/node_modules
+/.pnp

_data/assetPaths.json

@@ -1,9 +1,8 @@
 {
-  "admin.js": "/assets/js/admin-44W43542.js",
-  "admin.map": "/assets/js/admin-44W43542.js.map",
-  "app.js": "/assets/js/app-XWR645AF.js",
-  "app.map": "/assets/js/app-XWR645AF.js.map",
-  "uswds.js": "/assets/js/uswds-init.js",
-  "styles.css": "/assets/styles/styles-TAZ5TOFI.css",
-  "styles.map": "/assets/styles/styles-TAZ5TOFI.css.map"
+  "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",
+  "index.css": "/assets/styles/index-KNHDIH2P.css",
+  "index.map": "/assets/styles/index-KNHDIH2P.css.map"
 }

_data/csvData.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+const { parse } = require('csv-parse/sync');
+
+module.exports = async function() {
+  const csv = fs.readFileSync('./_data/Stantec_MABD_Export.csv', 'utf8');
+  const data = parse(csv, {
+    columns: true,
+    skip_empty_lines: true
+  });
+  return data;
+};

_data/site.yaml

@@ -1,11 +1,9 @@
-title: Agency Name
-email: [email protected]
-description: >- # this means to ignore newlines
-  Agency Name (EAC) Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  Aenean et sapien a leo auctor scelerisque quis nec magna. Sed dictum ante a risus vehicula facilisis.
+title: Bringing Mutual Aid
+description:  Bringing Mutual Aid ia a portal could increase the use of mutual aid for building depts., support congressional legislation on disaster resilience, and help communities build back better.
+url: "https://bma.gsa.gov"
 
 # Twitter handle. Only the handle, not the URL.
-twitter: 18F
+# twitter: 18F
 
 #################################################################
 #
@@ -53,45 +51,24 @@ ga:
 # Site Navigation
 primary_navigation:
   - name: Find assistance
-    children:
-      - name: Credentialed experts
-        url: /posts/experts/
-      - name: Inspections & permits
-        url: /posts/inspections/
-      - name: Building code knowledge
-        url: /posts/codes/
-      - name: Navigating disaster recovery
-        url: /posts/recovery/
+    url: /posts/find-assistance/
   - name: Training & resources
-    children:
-      - name: Credentialed experts
-        url: /posts/experts/
-      - name: Inspections & permits
-        url: /posts/inspections/
-      - name: Building code knowledge
-        url: /posts/codes/
-      - name: Navigating disaster recovery
-        url: /posts/recovery/
+    url: /posts/training/
   - name: FAQs
-    children:
-      - name: Credentialed experts
-        url: /posts/experts/
-      - name: Inspections & permits
-        url: /posts/inspections/
-      - name: Building code knowledge
-        url: /posts/codes/
-      - name: Navigating disaster recovery
-        url: /posts/recovery/
+    url: /posts/faq/
   - name: Contacts
-    children:
-      - name: Credentialed experts
-        url: /posts/experts/
-      - name: Inspections & permits
-        url: /posts/inspections/
-      - name: Building code knowledge
-        url: /posts/codes/
-      - name: Navigating disaster recovery
-        url: /posts/recovery/
+    url: /posts/contacts/
+
+    # Add  choldren if adding a sub menu
+    # children:
+    #   - name: Credentialed experts
+    #     url: /posts/experts/
+    #   - name: Inspections & permits
+    #     url: /posts/inspections/
+    #   - name: Building code knowledge
+    #     url: /posts/codes/
+    #   - name: Navigating disaster recovery
+    #     url: /posts/recovery/
 
 
 

_includes/collection-item.html

@@ -1,6 +1,6 @@
 <li class="usa-collection__item">
   {% if post.data.image %}
-    {% assign imagepath="./_img/" | append: post.data.image %}
+    {% assign imagepath="./theme/img/" | append: post.data.image %}
     {% image_with_class imagepath "usa-collection__img" post.data.image_alt_text %}
   {% endif %}
   <div class="usa-collection__body">

_includes/footer.html

@@ -32,7 +32,7 @@ <h5>Partner sites</h4>
         <div class="tablet:grid-col">
           <div class="logo-links">
             <a class="footer-logo media_link" href="https://cloud.gov">
-              {% image_with_class "./_img/logo-img.png" "Agency logo" %}
+              {% image_with_class "./theme/img/logo-img.png" "Agency logo" %}
             </a>
           </div>
           <div style="font-size: smaller;">

_includes/header.html

@@ -3,65 +3,61 @@
 official government website
 {% endcomment %}
 
-<div class="page-landing-page layout-demo ">
-  <a class="usa-skipnav" href="#main-content">Skip to main content</a>
-  <div class="usa-banner">
-    <div class="usa-accordion">
-      <section
-        id="gov-banner-header-section"
-        aria-label="USA Gov banner section header"
-        class="usa-banner__header"
-      >
-        <div class="usa-banner__inner">
-          <div class="grid-col-auto">
-            {% image_with_class "./node_modules/@uswds/uswds/dist/img/us_flag_small.png" "usa-banner__header-flag" "U.S. flag" %}
-          </div>
-          <div class="grid-col-fill tablet:grid-col-auto">
-            <p class="usa-banner__header-text">
-              DEMO website of the United States government
-            </p>
-            <p class="usa-banner__header-action" aria-hidden="true">
-              Here’s how you know
+<section class="usa-banner" aria-label="Official website of the United States government">
+  <div class="usa-accordion">
+    <header class="usa-banner__header">
+      <div class="usa-banner__inner">
+        <div class="grid-col-auto">
+          <img aria-hidden="true" class="usa-banner__header-flag" src="{{'/assets/uswds/img/us_flag_small.png' | url }}" alt="" />
+        </div>
+        <div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
+          <p class="usa-banner__header-text">
+            A demo website of the United States government
+          </p>
+          <p class="usa-banner__header-action">Here’s how you know</p>
+        </div>
+        <button type="button" class="usa-accordion__button usa-banner__button" aria-expanded="false"
+          aria-controls="gov-banner-default">
+          <span class="usa-banner__button-text">Here’s how you know</span>
+        </button>
+      </div>
+    </header>
+    <div class="usa-banner__content usa-accordion__content" id="gov-banner-default">
+      <div class="grid-row grid-gap-lg">
+        <div class="usa-banner__guidance tablet:grid-col-6">
+          <img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-dot-gov.svg' | url }}" role="img" alt=""
+            aria-hidden="true" />
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Official websites use .gov</strong><br />A
+              <strong>.gov</strong> website belongs to an official government
+              organization in the United States.
             </p>
           </div>
-          <button
-            class="usa-accordion__button usa-banner__button"
-            aria-expanded="false"
-            aria-controls="gov-banner"
-          >
-            <span class="usa-banner__button-text">Here's how you know</span>
-          </button>
         </div>
-      </section>
-      <div class="usa-banner__content usa-accordion__content" id="gov-banner">
-        <div class="grid-row grid-gap-lg">
-          <div class="usa-banner__guidance tablet:grid-col-6">
-            {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-dot-gov.svg" "usa-banner__icon usa-media-block__img" "Dot gov" %} {% endcomment %}
-            <div class="usa-media-block__body">
-              <p>
-                <strong>The .gov means it’s official.</strong>
-                <br />
-                Federal government websites often end in .gov or .mil. Before
-                sharing sensitive information, make sure you’re on a federal
-                government site.
-              </p>
-            </div>
-          </div>
-          <div class="usa-banner__guidance tablet:grid-col-6">
-            {% comment %} {% image_with_class "./node_modules/@uswds/uswds/dist/img/icon-https.svg" "usa-banner__icon usa-media-block__img" "Https" %} {% endcomment %}
-            <div class="usa-media-block__body">
-              <p>
-                <strong>The site is secure.</strong>
-                <br />
-                The <strong>https://</strong> ensures that you are connecting to
-                the official website and that any information you provide is
-                encrypted and transmitted securely.
-              </p>
-            </div>
+        <div class="usa-banner__guidance tablet:grid-col-6">
+          <img class="usa-banner__icon usa-media-block__img" src="{{'/assets/uswds/img/icon-https.svg' | url }}" role="img" alt=""
+            aria-hidden="true" />
+          <div class="usa-media-block__body">
+            <p>
+              <strong>Secure .gov websites use HTTPS</strong><br />A
+              <strong>lock</strong> (
+              <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64"
+                  class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description" focusable="false">
+                  <title id="banner-lock-title">Lock</title>
+                  <desc id="banner-lock-description">
+                    Locked padlock icon
+                  </desc>
+                  <path fill="#000000" fill-rule="evenodd"
+                    d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
+                </svg> </span>) or <strong>https://</strong> means you’ve safely connected to
+              the .gov website. Share sensitive information only on official,
+              secure websites.
+            </p>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div class="usa-overlay"></div>
-</div>
+</section>
+<div class="usa-overlay"></div>

_includes/hero.html

@@ -1,14 +1,47 @@
-{% comment %}
-This will be displayed on the homepage. Ideally, you want to highlight key goals of the website
-{% endcomment %}
+<section class="usa-hero" aria-label="Introduction">
+  <div class="grid-container">
+    <div class="usa-hero__callout">
+      <h1 class="usa-hero__heading margin-bottom-4">
+        Find mutual aid resources to help your local building department
+      </h1>
+      <div class="grid-container">
+        <form class="usa-form" id="stateForm">
+          <fieldset class="usa-fieldset">
+            <legend class="usa-legend margin-bottom-1">
+              Enter your location to discover mutual aid resources available in your area to assist post-disaster
+              rebuilding.
+            </legend>
 
-<section class="usa-hero" style="text-align: center;">
-  <div style="background-image: linear-gradient(rgb(0, 0, 0), rgba(255,0,0,0));"">
-    <h1 class="ma-h2" style="color: white; padding: 40px 0 60px 0;">Your rebuilding journey starts here</h1>
-    <div style="width: 360px; background-color: #565c65; padding: 15px; margin: auto; text-align: left;">
-      Find mutual aid partners to help supplement your community's building department functions during post-disaster recovery.
-    </div>
-    <a class="usa-button" href="{{ '/location/' | url }}" style="margin: 50px 0 50px 0;">Find help now</a>
+            <label class="usa-label" for="state">
+              State or Territory
+            </label>
+            <div class="grid-row grid-gap-2">
+              <span class="desktop:grid-col-7 mobile:grid-col-12 margin-bottom-2">
+                <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>
+              </span>
+              <span class="desktop:grid-col-5 mobile:grid-col-12">
+                <input class="usa-button" type="submit" value="View aid options" />
+              </span>
+            </div>
 
+          </fieldset>
+        </form>
+      </div>
+    </div>
   </div>
 </section>
+
+<script>
+  document.getElementById('stateForm').addEventListener('submit', function (event) {
+    event.preventDefault();
+    var selectedState = document.getElementById('state').value;
+    if (selectedState) {
+      window.location.href = '/states/' + selectedState + '/';
+    }
+  });
+</script>