Dev

app/.eleventy.js

@@ -71,6 +71,7 @@ module.exports = function (eleventyConfig) {
 
   eleventyConfig.addPassthroughCopy({
     "src/img": "assets/img",
+    "src/js": "src/js",
     "site/img": "assets/img",
     "site/_includes/css": "css",
     "site/_includes/js": "assets/js",
@@ -88,7 +89,7 @@ module.exports = function (eleventyConfig) {
     "stroke-width": 2,
   })
 
-  const pathPrefix = process.env.NODE_ENV === "production" ? "/metrics" : ""
+  const pathPrefix = process.env.NODE_ENV.includes("production") ? "/metrics" : ""
 
   return {
     dir: {

app/package.json

@@ -8,6 +8,11 @@
     "start:eleventy": "eleventy --serve",
     "start:rollup": "rollup --config rollup.config.mjs -w",
     "start:postcss": "postcss ./src/css -d ./site/_includes/css -w",
+    "prod": "NODE_ENV=test-production run-s -l prod:*",
+    "prod:clean": "rm -rf dist",
+    "prod:rollup": "rollup --config rollup.config.mjs --bundleConfigAsCjs",
+    "prod:postcss": "postcss ./src/css -d ./site/_includes/css",
+    "prod:eleventy": "eleventy --serve",
     "build": "NODE_ENV=production run-s -l build:*",
     "build:clean": "rm -rf dist",
     "build:rollup": "rollup --config rollup.config.mjs --bundleConfigAsCjs",

app/postcss.config.js

@@ -2,7 +2,7 @@ module.exports = {
   plugins: [
     require("postcss-import"),
     require("autoprefixer"),
-    ...(process.env.NODE_ENV === "production"
+    ...(process.env.NODE_ENV.includes("production")
       ? [
           require("cssnano"),
           require("@fullhuman/postcss-purgecss")({

app/rollup.config.mjs

@@ -14,7 +14,7 @@ export default [
       resolve(),
       babel(),
       commonjs(),
-      ...(process.env.NODE_ENV === "production" ? [terser()] : []),
+      ...(process.env.NODE_ENV.includes("production") ? [terser()] : []),
     ],
   },
 ]

app/site/_data/projects.js

@@ -3,10 +3,10 @@ const path = require("path");
 
 module.exports = function () {
   const dataDirectory = path.join(__dirname);
-  var projects = [];
+  const projects = [];
 
   // Read the list of organization directories
-  var orgDirectories = fs.readdirSync(dataDirectory);
+  const orgDirectories = fs.readdirSync(dataDirectory);
 
   // Iterate through organization directories
   orgDirectories.forEach((orgDirectory) => {
@@ -37,7 +37,8 @@ module.exports = function () {
         }
       });
     }
+
   });
-
-  return projects;
+  
+  return projects
 };

app/site/_data/site.js

@@ -1,9 +1,10 @@
-const production = process.env.NODE_ENV === "production"
+const isProduction = process.env.NODE_ENV.includes("production")
+const isTest = process.env.NODE_ENV.includes("test")
 
-const host = production ? "https://dsacms.github.io" : "http://0.0.0.0:8080"
+const host = (isProduction && !isTest) ? "https://dsacms.github.io" : "http://localhost:8080"
 
 // For modifying the <base> tag
-const baseurl = production ? "/metrics" : ""
+const baseurl = isProduction ? "/metrics" : ""
 
 module.exports = {
   name: "CMS Metrics Website",
@@ -13,8 +14,8 @@ module.exports = {
   baseurl,
   url: `${host}${baseurl}`,
   domain: (host || "").replace("https://", ""),
-  production,
-  robots: production,
+  production: isProduction,
+  robots: isProduction,
   locale: "en-US",
   // TODO: Add nav elements for deployment
   nav: [{ url: "/about/", label: "About" }],

app/site/_includes/assets.liquid

@@ -31,3 +31,5 @@
 <link rel="stylesheet" href="{{ site.url }}/css/style.css">
 
 <script type="module" src="{{ "/assets/js/index.js" | url}}"></script>
+<script type="module" src="{{ "/src/js/nav.js" | url}}"></script>
+<script type="module" src="{{ "/src/js/modal.js" | url}}"></script>

app/site/_includes/banner.liquid

@@ -12,7 +12,8 @@
     </p>
   </div>
 </div>
-{% comment %} <section
+<!-- {% comment %} -->
+<section
   class="usa-banner"
   aria-label="Official website of the United States government"
 >
@@ -100,4 +101,5 @@
       </div>
     </div>
   </div>
-</section> {% endcomment %}
+</section>
+<!-- {% endcomment %} -->

app/site/_includes/graph-section.liquid

@@ -1,17 +1,31 @@
-{% assign className = class | default: 'graph-container' %}
+{% assign className = class | default: 'graph-container-{{ title | slugify}}' %}
 {% assign devPath = 'site/_graphs' | append: path %}
 {% assign distPath = baseurl | append: '/assets/img/graphs' | append: path %}
 {% assign fileExtension = path | split: '.' | last %}
+{% assign modal_description = modal_description %}
 
 {% if devPath | fileExists %}
   <div class="{{ className }}">
-    <h3>{{ title }}</h3>
-    <figure>
-      {% if fileExtension == 'svg' %}
-        <embed type="image/svg+xml" src="{{ distPath }}">
-      {% else %}
-        <img src="{{ distPath }}">
-      {% endif %}
-    </figure>
+    <div class="graph-box">
+      <h3 class="graph-title">{{ title }}</h3>
+      <figure>
+        {% if fileExtension == 'svg' %}
+          <embed type="image/svg+xml" src="{{ distPath }}">
+        {% else %}
+          <img src="{{ distPath }}">
+        {% endif %}
+      </figure>
+      <div class="modal-button-styling">
+        <a
+          href="#{{ title | slugify }}-modal"
+          class="usa-button modal-button"
+          aria-controls="{{ title | slugify }}-modal"
+          data-open-modal
+        >
+          Learn More
+        </a>
+      </div>
+      {% render "modal-content", title: title, modal_description: modal_description %}
+    </div>
   </div>
 {% endif %}

app/site/_includes/graph-toggle.liquid

@@ -1,6 +1,7 @@
 {% assign graphName = name| append: "-graph" %}
 {% assign buttonName = name | append: "-button-" %}
 {% assign graphsCheck = true %}
+{% assign modal_description = modal_description %}
 
 {% comment %} Check for file existence of graphs {% endcomment %}
 {% for path in graphs %}
@@ -13,36 +14,49 @@
 
 {% comment %} Render components accordingly {% endcomment %}  
 {% if graphsCheck %}
-    <div class="graph-container">
-        <h3>{{ title }}</h3>
-        <ul class="usa-button-group ">
-            {% for option in options %}
-                <li class="usa-button-group__item">
+    <div class="graph-container-{{ title | slugify }}">
+        <div class="graph-box">
+            <h3 class="graph-title">{{ title }}</h3>
+            <ul class="usa-button-group">
+                {% for option in options %}
+                    <li class="usa-button-group__item">
+                    {% if forloop.first %}
+                        <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    {% else %}
+                        <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    {% endif %}
+                    </li>
+                {% endfor %}
+            </ul>
+            {% for graph in graphs %}
                 {% if forloop.first %}
-                    <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    <div class={{ graphName }} id="{{ forloop.index0 }}">
                 {% else %}
-                    <button type="button" id={{ buttonName | append: forloop.index0 }} class="usa-button usa-button--outline" onclick="showGraph({{ forloop.index0 }}, '{{ graphName }}','{{ buttonName }}')">{{ option }}</button>
+                    <div class={{ graphName }} id="{{ forloop.index0 }}" style="display: none;">
                 {% endif %}
-                </li>
+                {% assign graphPath = graph | strip %}
+                {% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
+                {% assign fileExtension = graphPath | split: '.' | last %}
+                <figure>
+                {% if fileExtension == 'svg' %}
+                    <embed type="image/svg+xml" src="{{ distPath }}" />
+                {% else %}
+                    <img src="{{ distPath }}"/>
+                {% endif %}
+                </figure>
+                <div class="modal-button-styling">
+                    <a
+                    href="#{{ title | slugify }}-modal"
+                    class="usa-button modal-button"
+                    aria-controls="{{ title | slugify }}-modal"
+                    data-open-modal
+                    >
+                    Learn More
+                    </a>
+                </div>
+                {% render "modal-content", title: title, modal_description: modal_description %}
+                </div>
             {% endfor %}
-        </ul>
-        {% for graph in graphs %}
-            {% if forloop.first %}
-                <div class={{ graphName }} id="{{ forloop.index0 }}">
-            {% else %}
-                <div class={{ graphName }} id="{{ forloop.index0 }}" style="display: none;">
-            {% endif %}
-            {% assign graphPath = graph | strip %}
-            {% assign distPath = baseurl | append: "/assets/img/graphs" | append: graphPath %}
-            {% assign fileExtension = graphPath | split: '.' | last %}
-            <figure>
-            {% if fileExtension == 'svg' %}
-                <embed type="image/svg+xml" src="{{ distPath }}" />
-            {% else %}
-                <img src="{{ distPath }}"/>
-            {% endif %}
-            </figure>
-            </div>
-        {% endfor %}
+        </div>
     </div>
 {% endif %}

app/site/_includes/modal-content.liquid

@@ -0,0 +1,37 @@
+<div class="margin-y-3">
+  <div
+    class="usa-modal"
+    id="{{ title | slugify }}-modal"
+    aria-labelledby="{{ title | slugify }}-modal-heading"
+    aria-describedby="{{ title | slugify }}-modal-description"
+    aria-hidden="true"
+  >
+    <div class="usa-modal__content">
+      <div class="usa-modal__main">
+        <h2 class="usa-modal__heading" id="{{ title | slugify }}-modal-heading">
+          {{ title }}
+        </h2>
+        <div class="usa-prose">
+          <p id="{{ title | slugify }}-modal-description">
+            {{ modal_description }}
+          </p>
+        </div>
+        <div class="usa-modal__footer">
+          <button type="button" class="usa-button modal-button" data-close-modal>
+            Close
+          </button>
+        </div>
+      </div>
+      <button
+        type="button"
+        class="usa-button-exit usa-modal__close"
+        aria-label="Close this window"
+        data-close-modal
+      >
+        <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+          <use href="/assets/img/sprite.svg#close"></use>
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>

app/site/_includes/nav.liquid

@@ -1,39 +1,63 @@
 <div class="usa-overlay"></div>
 <header class="usa-header usa-header--basic">
-  <div class="usa-nav-container">
-    <div class="usa-navbar">
+  <div class="usa-navigation-container">
+    <div class="usa-nav-bar">
+      <div class="title">
+        <img src="{{ "/assets/img/cms-logo.jpg" | url }}" class="logo" alt="CMS Logo">
+        <h1>Metrics Website</h1>
+      </div>
       <div class="usa-logo">
         <em class="usa-logo__text">
           <a href="{{ "/" | url}}" title="{{site.title}}">{{ site.title }}</a>
         </em>
       </div>
-      <button type="button" class="usa-menu-btn">Menu</button>
     </div>
-    <nav aria-label="Primary navigation" class="usa-nav">
-      <button type="button" class="usa-nav__close">
-        <img src="{{"/assets/img/usa-icons/close.svg" | url}}" role="img" alt="Close">
-      </button>
-      <ul class="usa-nav__primary usa-accordion">
-        <li class="usa-nav__primary-item">
-          <a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
-            <span>Home</span>
-          </a>
-        </li>
-        <li class="usa-nav__primary-item">
-          <a
-            href="{{ "/organizations/" | url}}"
-            class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}"
-          >
-            <span>Organizations</span>
-          </a>
-        </li>
+    <nav aria-label="Primary navigation" class="usa-nav nav-styling">
+      <ul class="usa-nav__primary usa-accordion usa-nav__primary-navigation">
         <li class="usa-nav__primary-item">
-          <a
-            href="{{ "/projects/" | url}}"
-            class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
+          <button
+            type="button"
+            class="usa-accordion__button usa-nav__link button-styling"
+            aria-expanded="false"
+            aria-controls="basic-nav-section-one"
           >
-            <span>Projects</span>
-          </a>
+            <svg
+              class="usa-icon--size-7 toggle-icon"
+              aria-hidden="true"
+              focusable="false"
+              role="img"
+            >
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#menu">
+            </svg>
+          </button>
+          <ul id="basic-nav-section-one" class="usa-nav__submenu">
+            <li class="close-icon">
+                <svg class="usa-icon--size-4 button-styling" aria-hidden="true" focusable="false" role="img">
+                  <use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
+                </svg>
+            </li>
+            <li class="usa-nav__primary-item">
+              <a href="{{ "/" | url}}" class="usa-nav-link {% if page.url == "/" %}usa-current{% endif %}">
+                <span>Home</span>
+              </a>
+            </li>
+            <li class="usa-nav__primary-item">
+              <a
+                href="{{ "/organizations/" | url}}"
+                class="usa-nav-link {% if page.url contains "/organizations/" %}usa-current{% endif %}"
+              >
+                <span>Organizations</span>
+              </a>
+            </li>
+            <li class="usa-nav__primary-item">
+              <a
+                href="{{ "/projects/" | url}}"
+                class="usa-nav-link {% if page.url contains "/projects/" %}usa-current{% endif %}"
+              >
+                <span>Projects</span>
+              </a>
+            </li>
+          </ul>
         </li>
       </ul>
     </nav>