Dev

.gitignore

@@ -9,6 +9,8 @@ app/site/_includes/js
 !app/site/img/.keep
 .vscode/
 scripts/metricsLib/__pycache__
+node_modules
+
 # Files/Dirs ignored because they're secret/internal only
 id_rsa
 secrets_repo/

app/.eleventy.js

@@ -89,7 +89,7 @@ module.exports = function (eleventyConfig) {
     "stroke-width": 2,
   })
 
-  const pathPrefix = process.env.NODE_ENV.includes("production") ? "/metrics" : ""
+  const pathPrefix = process.env.ELEVENTY_ENV.includes("production") ? "/metrics" : ""
 
   return {
     dir: {

app/package.json

@@ -4,16 +4,16 @@
   "description": "",
   "main": ".eleventy.js",
   "scripts": {
-    "start": "NODE_ENV=development run-p -l start:*",
+    "start": "ELEVENTY_ENV=development run-p -l start:*",
     "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": "ELEVENTY_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": "ELEVENTY_ENV=production run-s -l build:*",
     "build:clean": "rm -rf dist",
     "build:rollup": "rollup --config rollup.config.mjs --bundleConfigAsCjs",
     "build:postcss": "postcss ./src/css -d ./site/_includes/css",

app/postcss.config.js

@@ -2,7 +2,7 @@ module.exports = {
   plugins: [
     require("postcss-import"),
     require("autoprefixer"),
-    ...(process.env.NODE_ENV.includes("production")
+    ...(process.env.ELEVENTY_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.includes("production") ? [terser()] : []),
+      ...(process.env.ELEVENTY_ENV.includes("production") ? [terser()] : []),
     ],
   },
 ]

app/site/_data/site.js

@@ -1,10 +1,10 @@
-const isProduction = process.env.NODE_ENV.includes("production")
-const isTest = process.env.NODE_ENV.includes("test")
+const isProduction = process.env.ELEVENTY_ENV.includes("production")
+const isTest = process.env.ELEVENTY_ENV.includes("test")
 
 const host = (isProduction && !isTest) ? "https://dsacms.github.io" : "http://localhost:8080"
 
 // For modifying the <base> tag
-const baseurl = isProduction ? "/metrics" : ""
+const baseurl = isProduction ? "/metrics" : "" 
 
 module.exports = {
   name: "CMS Metrics Website",

app/site/_includes/banner.liquid

@@ -6,7 +6,7 @@
         class="usa-link usa-link--external"
         rel="noreferrer"
         target="_blank"
-        href="https://github.com/DSACMS/metrics/issues/new"
+        href="https://{{ site.baseurl }}/{{ org }}/metrics/issues/new"
         >give us feedback.</a
       >
     </p>

app/site/_includes/modal-content.liquid

@@ -29,7 +29,7 @@
         data-close-modal
       >
         <svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
-          <use href="/assets/img/sprite.svg#close"></use>
+          <use href="{{ site.baseurl }}/assets/img/sprite.svg#close"></use>
         </svg>
       </button>
     </div>

app/site/_layouts/org-report.liquid

@@ -8,52 +8,53 @@ layout: base
   <div class="report_heading report_heading-reports">
     <h1 class=report_heading-reports-title>
       Report for
-      <a target="_blank" href="https://github.com/{{ org }}" class="report-link">{{ org }}</a>
+      <a target="_blank" href="{{ site.baseurl }}/{{ org }}" class="report-link">{{ org }}</a>
       <img
         src="{{organization.avatar_url}}"
         alt="Organization Avatar"
         width="25"
       >
     </h1>
   </div>
-
   <div class="report_container">
     {% if organization %}
       <h2>Organization Stats</h2>
-      <div class="github-information">
-        <div class="stat-container" id="projects">
-          <div class="projects-heading">
-            <h4 class=repo-stats>
-              <span>
-                <svg
-                  class="usa-icon"
-                  aria-labelledby="projects-count"
-                  role="img"
-                >
-                  {% lucide "folder-git-2" %}
-                </svg>
-              </span>
-              Repositories
-            </h4>
+      <div class="org-github-info">
+        <div class="github-information org-info">
+          <div class="stat-container" id="projects">
+            <div class="projects-heading">
+              <h4 class="repo-stats">
+                <span>
+                  <svg
+                    class="usa-icon"
+                    aria-labelledby="projects-count"
+                    role="img"
+                  >
+                    {% lucide "folder-git-2" %}
+                  </svg>
+                </span>
+                Repositories
+              </h4>
+            </div>
+            <p>{{ organization.repo_count }}</p>
           </div>
-          <p>{{ organization.repo_count }}</p>
-        </div>
-        <div class="stat-container" id="followers">
-          <div class="followers-heading">
-            <h4 class=repo-stats>
-              <span>
-                <svg
-                  class="usa-icon"
-                  aria-labelledby="followers-count"
-                  role="img"
-                >
-                  {% lucide "users-2" %}
-                </svg>
-              </span>
-              Followers
-            </h4>
+          <div class="stat-container" id="followers">
+            <div class="followers-heading">
+              <h4 class="repo-stats">
+                <span>
+                  <svg
+                    class="usa-icon"
+                    aria-labelledby="followers-count"
+                    role="img"
+                  >
+                    {% lucide "users-2" %}
+                  </svg>
+                </span>
+                Followers
+              </h4>
+            </div>
+            <p>{{ organization.followers_count }}</p>
           </div>
-          <p>{{ organization.followers_count }}</p>
         </div>
       </div>
     {% else %}

app/site/_layouts/repo-report.liquid

@@ -23,7 +23,7 @@ layout: base
   <div class="report_heading report_heading-reports">
     <h1 class=report_heading-reports-title>
       Report for
-      <a target="_blank" href="https://github.com/{{ org }}/{{ repo }}" class="report-link">{{ repo }}</a>
+      <a target="_blank" href="{{ site.baseurl }}/{{ org }}/{{ repo }}" class="report-link">{{ repo }}</a>
     </h1>
   </div>
 
@@ -170,7 +170,24 @@ layout: base
           </div>
           <p>{{ project.pull_requests_count }}</p>
         </div>
-        <div class="stat-container" id="project-age" onclick="toggleDateAge(this)" style="cursor: pointer;">
+        <div class="stat-container" id="project-created">
+          <div class="project-age-heading">
+            <h4>
+              <span>
+                <svg
+                  class="usa-icon"
+                  aria-labelledby="project-created"
+                  role="img"
+                >
+                  {% lucide "calendar" %}
+                </svg>
+              </span>
+              Project Creation Date
+            </h4>
+          </div>
+          <p>{{ project.created_at | date: '%B %d, %Y' }}</p>
+        </div>
+        <div class="stat-container" id="project-age">
           <div class="project-age-heading">
             <h4>
               <span>
@@ -182,26 +199,20 @@ layout: base
                   {% lucide "calendar" %}
                 </svg>
               </span>
-              <span class="date">Project Creation Date</span>
-              <span class="age" style="display: none;">Age of Project</span>
+              Age of Project
             </h4>
           </div>
-          <p style="text-decoration: underline;">
-            <span class="date">
-              {{ project.created_at | date: '%B %d, %Y' }}
-            </span>
-            <span class="age" style="display: none;">
-              {% comment %} takes project created + todays date and turns it into seconds {% endcomment %}
-              {% assign created_date = project.created_at | date: '%s' | plus: 0 %}
-              {% assign current_date = 'now' | date: '%s' | plus: 0 %}
+          <p>
+            {% comment %} takes project created + todays date and turns it into seconds {% endcomment %}
+            {% assign created_date = project.created_at | date: '%s' | plus: 0 %}
+            {% assign current_date = 'now' | date: '%s' | plus: 0 %}
 
-              {% assign age_seconds = current_date | minus: created_date %}
+            {% assign age_seconds = current_date | minus: created_date %}
 
-              {% comment %} divide by how many seconds are in a day to convert back into days {% endcomment %}
-              {% assign age_days = age_seconds | divided_by: 86400.0 | round %}
+            {% comment %} divide by how many seconds are in a day to convert back into days {% endcomment %}
+            {% assign age_days = age_seconds | divided_by: 86400.0 | round %}
 
-              {{ age_days }} day{% if age_days != 1 %}s{% endif %}
-            </span>
+            {{ age_days }} day{% if age_days != 1 %}s{% endif %}
           </p>
         </div>
       </div>

app/site/organizations.liquid

@@ -8,8 +8,7 @@ layout: base
   <p>The Centers for Medicare and Medicaid Services is comprised of many GitHub Organizations.</p>
   <ul class="usa-card-group-orgs">
     {% for org in organizations %}
-      <!-- <li class="usa-card usa-card--flag desktop:grid-col-6"> -->
-      <li class="usa-card grid-col-5">
+      <li class="usa-card grid-col-5 usa-card-orgs">
         <div class="usa-card-outer">
           <div class="usa-card-middle">
             <a href="{{ site.baseurl }}/{{ org.name }}/" class="href-home">
@@ -30,15 +29,15 @@ layout: base
                   <div class="usa-card__footer">
                     <span class="star-count" style="margin-right: 15px;">
                       <svg class="usa-icon" aria-labelledby="star-count-{{org.name}}-title" role="img">
-                        <title id="github-{{org.name}}-title"> Repo Count</title>
-                        {% lucide "folder-git-2" %}
+                        <title id="github-{{org.name}}-title">Repo Count</title>
+                        {% lucide "folder-git" %}
                       </svg>
                       <span> {{ org.repo_count }} </span>
                     </span>
                     <span class="fork-count" style="margin-right: 15px;">
                       <svg class="usa-icon" aria-labelledby="fork-count-{{org.name}}-title" role="img">
                         <title id="github-{{org.name}}-title"> Follower Count</title>
-                        {% lucide "users-2" %}
+                        {% lucide "git-fork" %}
                       </svg>
                       <span> {{ org.followers_count }} </span>
                     </span>

app/site/projects.liquid

@@ -25,7 +25,12 @@ layout: base
       {% comment %} filter by organization {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="organization-content" id="organization">Organization</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="organization-content" id="organization">
+            Organization 
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="organization-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
@@ -46,7 +51,12 @@ layout: base
       {% comment %} filter by maturity model tier {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="tier-content" id="mauturity-model-tier">Maturity Model Tier</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="tier-content" id="mauturity-model-tier">
+            Maturity Model Tier
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="tier-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
@@ -67,7 +77,12 @@ layout: base
       {% comment %} filter by fisma compliance level {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="fisma-level-content" id="fisma-level">FISMA Compliance Level</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="fisma-level-content" id="fisma-level">
+            FISMA Compliance Level
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="fisma-level-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
@@ -88,7 +103,12 @@ layout: base
       {% comment %} filter by project type {% endcomment %}
       <div class="usa-accordion">
         <div class="usa-accordion__heading filter-heading">
-          <button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="project-type-content" id="project-type">Project Type</button>
+          <button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="project-type-content" id="project-type">
+            Project Type
+            <svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
+              <use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
+            </svg>
+          </button>
         </div>
         <div id="project-type-content" class="usa-accordion__content filter-content usa-prose" hidden>
           <form class="usa-form">
@@ -157,7 +177,7 @@ layout: base
                   <option value="ascending">Ascending</option>
                   <option value="descending">Descending</option>
                 </select>
-                <svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
+                <svg class="usa-icon filter-icon sort-icon" aria-hidden="true" focusable="false" role="img">
                   <use href="{{ site.baseurl }}/assets/img/sprite.svg#sort_arrow"></use>
                 </svg>
               </div>
@@ -206,10 +226,10 @@ layout: base
           {% if currentPage < totalPages | minus: 1 %}
             <li class="usa-pagination__item usa-pagination__arrow">
               <a href="/projects/page/{{ currentPage | plus: 1 }}/" class="usa-pagination__link usa-pagination__next-page" aria-label="Next page">
-                <span class="usa-pagination__link-text">Next </span>
                 <svg class="usa-icon" aria-hidden="true" role="img">
                   <use xlink:href="/assets/img/sprite.svg#navigate_next"></use>
                 </svg>
+                <span class="usa-pagination__link-text">Next</span>
               </a>
             </li>
           {% endif %}