Resolve tech debt

README.md

@@ -84,4 +84,19 @@ Below is the cloud.gov link to the build for the `main` branch:
 
 To view the build for any `10x Website` branch that has been committed to Github,  copy the link above and append it with your branch name. Example:
 
-`https://federalist-37831b52-7633-429a-9a79-14298034dd54.sites.pages.cloud.gov/preview/gsa-tts/10x-website/post-launch-bug-fixes/`
+`https://federalist-37831b52-7633-429a-9a79-14298034dd54.sites.pages.cloud.gov/preview/gsa-tts/10x-website/post-launch-bug-fixes/`
+
+### Testing
+
+There is a need for testing of new front end components. Until we have a complete solution, there is a workaround that checks every page in the sitemap and ensures that a certain element exists. The code was originally provided by @jonathanbobel and I converted to [a gist that can be downloaded here](https://gist.github.com/natashapl/cacee9f540e83f89d0792e08dac01812). 
+
+**To use this code, do the following:**
+
+1. Download the code snippet mentioned above. The file is called "sitemap-element-checker.js".
+2. Add that file to the root of the 10x project.
+3. Open the file site.json and temporarily change the value of "url" to "http://localhost:8080". Save the file.
+4. Open a new terminal and run the following:
+
+`node sitemap-element-checker.js`
+
+ It will list all the pages in the site and state whether or not the element exists in the page.

_data/assetPaths.json

@@ -81,6 +81,6 @@
   "warning.svg": "/assets/assets/warning-5OR6W6GJ.svg",
   "app.js": "/assets/js/app-EDZES2YK.js",
   "app.map": "/assets/js/app-EDZES2YK.js.map",
-  "index.css": "/assets/styles/index-GVPBJ6VO.css",
-  "index.map": "/assets/styles/index-GVPBJ6VO.css.map"
+  "index.css": "/assets/styles/index-HJETW2KE.css",
+  "index.map": "/assets/styles/index-HJETW2KE.css.map"
 }

_includes/components/about-side-nav.html

@@ -13,7 +13,7 @@
         <a href="{{ aboutPage.url | url }}"
           class="usa-sidenav__item {% if aboutPage.url == page.url %}usa-current{% endif %}" 
           {% if aboutPage.url == page.url %}aria-current="page"{% endif %}>
-          {{ aboutPage.data.pageTitle }}
+          {{ aboutPage.data.hero_banner.title }}
         </a>
       </li>
       {%- endfor -%}

_includes/components/gradient-hero-banner.html

@@ -0,0 +1,27 @@
+{% assign formatted_category = hero_banner.category | replace: ' ', '-' | downcase %}
+
+<div class="banner-bg-gradient header-banner-component padding-y-2">
+  <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
+    style="display: none !important;" />
+  <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
+    style="display: none !important;" />
+  <section class="grid-container header-section usa-section" aria-labelledby="{{ formatted_category }}">
+    {% if section == 'post' %}
+    <span class="page-brow" id="{{ formatted_category}}">
+      <span class="news-text-wrapper">{{ hero_banner.category }}</span>
+      <span class="divider padding-x-1">|</span>
+      <time datetime="{{ page.date | machineDate }}">{{ page.date | readableDate }}</time>
+    </span> 
+    {%- else -%}
+    <span class="page-brow" id="{{ formatted_category }}">{{ hero_banner.category }}</span>  
+    {% endif %} 
+    {% if section == 'tags' %}
+    <h1>{{ hero_banner.title }} <span>{{ tag | replace: "-", " " }}</span></h1>
+    {%- else -%}
+    <h1>{{ hero_banner.title }}</h1>
+    {% endif %}
+    {%- if hero_banner.subtitle != null -%}
+    <p class="intro">{{ hero_banner.subtitle }}</p>
+    {%- endif -%}
+  </section>
+</div>

_includes/components/header.html

@@ -60,8 +60,7 @@
     <div class="usa-navbar">
       <div class="usa-logo">
         <a href="{{ '/' | url }}">
-          <span class="usa-sr-only">10 x home</span>
-          <div class="usa-logo" id="basic-logo"><img alt="10x" width="72" height="34" src="{{ '/assets/images/logo.svg' | url }}"></div>
+          <div class="usa-logo" id="basic-logo"><img alt="10 x home" width="72" height="34" src="{{ '/assets/images/logo.svg' | url }}"></div>
         </a>
       </div>
       <button type="button" class="usa-menu-btn">Menu</button>

_includes/components/posts-list.html

@@ -12,7 +12,7 @@ <h2 class="usa-card__heading">
 						<div class="usa-card__body">
 							<h3 class="usa-card__subhead">
 								<a class="usa-link" href="{{ post.url  | url }}">
-									{{ post.data.title }}
+									{{ post.data.hero_banner.title }}
 								</a>				
 							</h3>
 							{% if post.data.excerpt %}

_includes/components/side-nav.html

@@ -1,12 +1,12 @@
 <div id="left-nav" class="side-nav-wrapper mobile:grid-col-12 desktop:grid-col-4 margin-bottom-4">
   <nav aria-label="Side navigation,,">
-    <ul class="usa-sidenav margin-top-1">
+    <ul class="usa-sidenav margin-05">
       {%- for investment in collections.investments -%}
       <li class="usa-sidenav__item {% if investment.url == page.url %}usa-current-list-item{% endif %}">
         <a href="{{ investment.url | url }}"
           class="usa-sidenav__item {% if investment.url == page.url %}usa-current{% endif %}" 
           {% if investment.url == page.url %}aria-current="page"{% endif %}>
-          {{ investment.data.title }}
+          {{ investment.data.hero_banner.title }}
         </a>
       </li>
       {%- endfor -%}

_includes/layouts/about-page.html

@@ -1,23 +1,13 @@
 ---
 layout: layouts/base.html
 section: about
+hero_banner:
+  category: "About"
 ---
 <div class="portfolio-blog-pages">
   <div class="TxContent portfolio-blog-single-page about-page-section about-page static-content-page">
     <div class="banner-bg desktop:margin-bottom-2">
-      <div class="banner-bg-gradient padding-y-2">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <section class="grid-container header-section blog-post-header-section usa-section" aria-label="Introduction">
-          <h1>{{ pageTitle }}</h1>
-          {%- if subtitle != null -%}
-          <h2>{{ subtitle }}</h2>
-          {%- endif -%}
-          <h3>{{ pageBrow }}</h3>
-        </section>
-      </div>
+      {% include "components/gradient-hero-banner.html" %}
     </div>
     <section class="usa-section grid-container">
       <div class="grid-row content-column grid-gap-6">

_includes/layouts/investment-page.html

@@ -1,28 +1,17 @@
 ---
 layout: layouts/base.html
 section: investments
-category: "Investment Portfolios"
 return-to-top_text: "Return to top"
 all-investments: "Investments"
 list-url: /investments/
 home-link-text: "Home"
+hero_banner:
+  category: "Investment Portfolios"
 ---
 <div class="portfolio-blog-pages">
   <div class="TxContent portfolio-blog-single-page static-content-page">
     <div class="banner-bg desktop:margin-bottom-2">
-      <div class="banner-bg-gradient padding-y-2">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <section class="grid-container header-section usa-section" aria-label="Introduction">
-          <h1>{{ title }}</h1>
-          {%- if subtitle != null -%}
-          <h2>{{ subtitle }}</h2>
-          {%- endif -%}
-          <h3>{{ category }}</h3>
-        </section>
-      </div>
+      {% include "components/gradient-hero-banner.html" %}
     </div>
     <section class="usa-section grid-container">
       {% include "components/detail-page-breadcrumb.html" %}

_includes/layouts/investments-list.html

@@ -9,19 +9,7 @@
 ---
 <div class="portfolio-bloglist-wrapper portfolio-blog-pages">
   <div class="list-page banner-bg">
-    <div class="banner-bg-gradient padding-y-2">
-      <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <section class="grid-container header-section usa-section" aria-label="Introduction">
-        <h1>{{ hero_banner.title }}</h1>
-        {%- if hero_banner.subtitle != null -%}
-        <h2>{{ hero_banner.subtitle }}</h2>
-        {%- endif -%}
-        <h3>{{ hero_banner.category }}</h3>
-      </section>
-    </div>
+    {% include "components/gradient-hero-banner.html" %}
     <div class="TxContent Tx__projects">
       <div class="usa-app__bg">
         <div class="Tx__projects-content">

_includes/layouts/news-landing.html

@@ -4,21 +4,8 @@
 ---
 <div class="portfolio-bloglist-wrapper portfolio-blog-pages">
   <div class="newspage-wrapper banner-bg">
-    <div class="banner-bg-gradient padding-y-2">
-      <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <section class="grid-container header-section usa-section">
-        <h1>{{ pageTitle }}</h1>
-        {%- if subtitle != null -%}
-        <h2>{{ subtitle }}</h2>
-        {%- endif -%}
-        <h3>{{ pageBrow }}</h3>
-      </section>
-    </div>
+    {% include "components/gradient-hero-banner.html" %}
     <section class="usa-section grid-container">
-
       <div class="grid-row content-column grid-gap-6 margin-top-5">
         <div class="desktop:grid-col-8 usa-prose usa-layout-docs" id="main-content">
           {% assign postslist = posts %}

_includes/layouts/post.html

@@ -1,7 +1,8 @@
 ---
 layout: layouts/base.html
 section: post
-news-text: News
+hero_banner:
+  category: "News"
 return-to-top_text: Return to top
 home-link-text: Home
 news-update-text: News and Updates
@@ -14,23 +15,7 @@
 <div class="portfolio-blog-pages">
   <div class="TxContent portfolio-blog-single-page blog-page static-content-page">
     <div class="banner-bg desktop:margin-bottom-2">
-      <div class="banner-bg-gradient padding-y-2">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <section class="grid-container header-section blog-post-header-section usa-section" aria-label="Introduction">
-          <h1>{{ title }}</h1>
-          {%- if subtitle != null -%}
-          <h2>{{ subtitle }}</h2>
-          {%- endif -%}
-          <h3>
-            <span class="news-text-wrapper">{{ news-text }}</span>
-            <span class="divider padding-x-1">|</span>
-            <time datetime="{{ page.date | machineDate }}">{{ page.date | readableDate }}</time>
-          </h3>
-        </section>
-      </div>
+      {% include "components/gradient-hero-banner.html" %}
     </div>
     <section class="usa-section grid-container">
       {% include "components/news-blog-post-breadcrumb.html" %}

_includes/layouts/submit-an-idea-page.html

@@ -1,23 +1,13 @@
 ---
 layout: layouts/base.html
 section: ideas
+hero_banner:
+  category: "Ideas"
 ---
 <div class="portfolio-blog-pages">
   <div class="TxContent portfolio-blog-single-page submit-an-idea-page static-content-page">
     <div class="banner-bg desktop:margin-bottom-2">
-      <div class="banner-bg-gradient padding-y-2">
-        <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-          style="display: none !important;" />
-        <section class="grid-container header-section blog-post-header-section usa-section" aria-label="Introduction">
-          <h1>{{ pageTitle }}</h1>
-          {%- if subtitle != null -%}
-          <h2>{{ subtitle }}</h2>
-          {%- endif -%}
-          <h3>{{ pageBrow }}</h3>
-        </section>
-      </div>
+      {% include "components/gradient-hero-banner.html" %}
     </div>
     <section class="usa-section grid-container">
       <div class="grid-row">

_includes/layouts/tags-list.html

@@ -1,22 +1,10 @@
 ---
 layout: layouts/base.html
-section: blog
+section: tags
 ---
 <div class="portfolio-bloglist-wrapper portfolio-blog-pages">
   <div class="newspage-wrapper banner-bg">
-    <div class="banner-bg-gradient padding-y-2">
-      <img src="{{ '/assets/images/homepage-gradient-bg.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <img src="{{ '/assets/images/homepage-gradient-bg-mobile.jpg' | url }}" alt="" width="0" height="0"
-        style="display: none !important;" />
-      <section class="grid-container header-section usa-section">
-        <h1>{{ pageTitle }} <span>{{ tag | replace: "-", " " }}</span></h1>
-        {%- if subtitle != null -%}
-        <h2>{{ subtitle }}</h2>
-        {%- endif -%}
-        <h3>{{ pageBrow }}</h3>
-      </section>  
-    </div>  
+    {% include "components/gradient-hero-banner.html" %}
     <section class="usa-section grid-container">
       {% include "components/news-blog-post-breadcrumb.html" %}
       <div class="grid-row content-column grid-gap-6 margin-top-5">

_includes/theme/styles/_templates.scss

@@ -115,11 +115,9 @@ h2,
     position: relative;
 
     .banner-bg-gradient {   
-        background-color: $homepage-deep-blue;
-        background: url('../images/homepage-gradient-bg-mobile.jpg') top left repeat-x;  
-        background-repeat: repeat-x;
+        background: $homepage-deep-blue url('../images/homepage-gradient-bg-mobile.jpg') top left repeat-x;  
         @include at-media("tablet") {
-           background: url('../images/homepage-gradient-bg.jpg') top left repeat-x;
+            background: $homepage-deep-blue url('../images/homepage-gradient-bg.jpg') top left repeat-x;
         }
     }
 
@@ -719,7 +717,6 @@ linear-gradient(0deg, #6F32DD, #6F32DD);
                 font-size: size('body', 11);
                 font-weight: 700;
                 line-height: lh('heading', 3);
-                order: 2; 
 
                 @include at-media("tablet-lg") {
                     font-size: size('body', 14);
@@ -737,11 +734,11 @@ linear-gradient(0deg, #6F32DD, #6F32DD);
                 }
             }
 
-            h2 {
+            h2,
+            .intro {
                 font-size: size('body', 9);
                 font-weight: 400; 
                 line-height: lh('heading', 4);
-                order: 3; 
 
                 @include at-media("tablet-lg") {
                     font-size: size('body', 10);
@@ -752,7 +749,7 @@ linear-gradient(0deg, #6F32DD, #6F32DD);
                 color: white;
             }
 
-            h3 {
+            .page-brow {
                 font-size: size('body', 7);
                 text-transform: uppercase;
                 font-weight: 400;
@@ -762,7 +759,6 @@ linear-gradient(0deg, #6F32DD, #6F32DD);
                 background: url('../images/header-bottom-border.webp') left bottom no-repeat; 
                 margin-bottom: 0; 
                 margin-top: units(3);
-                order: 1; 
 
                 &.blog-post-section-header {
                     background: none;
@@ -804,7 +800,7 @@ linear-gradient(0deg, #6F32DD, #6F32DD);
         h3 {
             font-size: size('body', 8);
             font-weight: 500;
-            line-height: lh('heading', 3);
+            line-height: lh('heading', 5);
 
             .usa-link {
                 color: color("violet-90");
@@ -1187,3 +1183,9 @@ input[type="search"]::-webkit-search-cancel-button {
     background-image: url(../images/menu-close-X.webp);
     cursor: pointer;
 }
+
+.usa-footer {
+    .grid-container {
+        max-width: 64rem;
+    }
+}

about/contact-us.md

@@ -3,10 +3,10 @@ title: "Contact 10x"
 description: Want help brainstorming how to improve digital CX for the public? Have questions about 10x? We want to hear from you!
 layout: layouts/about-page.html
 permalink: /about/contact-us/index.html
-pageBrow: About
-pageTitle: Contact us
-subtitle: 10x wants to hear from you! 
 mainNavPageTitle: About 10x
+hero_banner:
+  title: "Contact us"
+  subtitle: "10x wants to hear from you!"
 theme: 8
 submit-idea-url: https://feedback.gsa.gov/jfe/form/SV_1Im8dTPnjnV3HpP
 submit-idea-button-text: Submit your idea!

about/what-we-do.md

@@ -3,10 +3,10 @@ title: "What we do: phases, process, approach, model"
 description: GSA's TTS 10x program is a venture studio that takes federal workers' ideas on ways good-for-government technology can make better-for-the-public experiences.
 layout: layouts/about-page.html
 permalink: /about/what-we-do/index.html
-pageBrow: About
-pageTitle: What we do
-subtitle: Venture studio model
 mainNavPageTitle: About 10x
+hero_banner:
+  title: "What we do"
+  subtitle: "Venture studio model"
 theme: 8
 submit-idea-url: /submit-an-idea/
 submit-idea-button-text: Submit your idea!