Create impact report landing page

.eleventy.js

@@ -105,7 +105,7 @@ module.exports = function (eleventyConfig) {
   //eleventyConfig.addPassthroughCopy({ "_includes/theme/fonts": "theme/fonts" });
   //eleventyConfig.addPassthroughCopy({ "node_modules/@uswds/uswds/dist/fonts": "assets/fonts" });
   eleventyConfig.addPassthroughCopy({ "_includes/theme/images": "assets/images" });
-  eleventyConfig.addPassthroughCopy({ "reports/pdfs": "reports" });
+  eleventyConfig.addPassthroughCopy({ "reports/pdfs": "impact" });
   eleventyConfig.addPassthroughCopy({ "node_modules/@uswds/uswds/img": "assets/uswds/img" });
   // eleventyConfig.addPassthroughCopy({ "_includes/theme/uswds-2.10.1-dist/js": "assets/theme/uswds/js" });
 

_data/assetPaths.json

@@ -7,23 +7,24 @@
   "Latin-Merriweather-Regular.woff2": "/assets/assets/Latin-Merriweather-Regular-EYXYAATC.woff2",
   "Poppins-Bold.woff2": "/assets/assets/Poppins-Bold-3GBDYPWO.woff2",
   "Poppins-BoldItalic.woff2": "/assets/assets/Poppins-BoldItalic-2VJWFQLM.woff2",
+  "Poppins-Italic.woff2": "/assets/assets/Poppins-Italic-F6OTYX7T.woff2",
   "Poppins-Light.woff2": "/assets/assets/Poppins-Light-36KYKMDJ.woff2",
   "Poppins-LightItalic.woff2": "/assets/assets/Poppins-LightItalic-IX33PQO5.woff2",
   "Poppins-Regular.woff2": "/assets/assets/Poppins-Regular-CQW4ZHRL.woff2",
-  "ableist-ui-demo-800px-opt.gif": "/assets/assets/ableist-ui-demo-800px-opt-BR3MFL55.gif",
   "add.svg": "/assets/assets/add-XJXD7HSN.svg",
   "arrow_back.svg": "/assets/assets/arrow_back-NBHWBQVI.svg",
   "calendar_today.svg": "/assets/assets/calendar_today-3TYM6CKQ.svg",
-  "callout-green-full-lg.png": "/assets/assets/callout-green-full-lg-AA7NZKYB.png",
-  "callout-lilac-full-lg.png": "/assets/assets/callout-lilac-full-lg-Q4C5KZDB.png",
-  "callout-lilac-half-lg.png": "/assets/assets/callout-lilac-half-lg-QSVKYYFZ.png",
+  "callout-green-full-lg.webp": "/assets/assets/callout-green-full-lg-XZJ55ZMM.webp",
+  "callout-lilac-full-lg.webp": "/assets/assets/callout-lilac-full-lg-XLX5SHBI.webp",
+  "callout-lilac-half-lg.webp": "/assets/assets/callout-lilac-half-lg-R26T4MIX.webp",
   "check--blue-60v.svg": "/assets/assets/check--blue-60v-PCQB53AU.svg",
   "check_circle.svg": "/assets/assets/check_circle-FKYRF36F.svg",
   "checkbox-indeterminate.svg": "/assets/assets/checkbox-indeterminate-HJACJSU3.svg",
   "checkbox-indeterminate-alt.svg": "/assets/assets/checkbox-indeterminate-alt-SXGAHOOI.svg",
   "close.svg": "/assets/assets/close-D6X4FKTZ.svg",
   "correct8.svg": "/assets/assets/correct8-BW6WT7U2.svg",
   "correct8-alt.svg": "/assets/assets/correct8-alt-M4H3GT6Q.svg",
+  "delna.webp": "/assets/assets/delna-Y7FFIQ4T.webp",
   "error--white.svg": "/assets/assets/error--white-XMM7ATFA.svg",
   "error.svg": "/assets/assets/error-3VQTC4AF.svg",
   "expand_less.svg": "/assets/assets/expand_less-RBECZ4GA.svg",
@@ -33,12 +34,14 @@
   "file-pdf.svg": "/assets/assets/file-pdf-JIOM4YQ2.svg",
   "file-video.svg": "/assets/assets/file-video-EG2XXN3X.svg",
   "file-word.svg": "/assets/assets/file-word-LAS3SDGR.svg",
+  "frank.webp": "/assets/assets/frank-WEGTXKFN.webp",
   "header-bottom-border.webp": "/assets/assets/header-bottom-border-K2INIIYM.webp",
   "hero.jpg": "/assets/assets/hero-OXUBFI7L.jpg",
   "homepage-gradient-bg.jpg": "/assets/assets/homepage-gradient-bg-L552LDA4.jpg",
   "homepage-gradient-bg-mobile.jpg": "/assets/assets/homepage-gradient-bg-mobile-7NX7I3DV.jpg",
-  "impact-report_pdf-icon.png": "/assets/assets/impact-report_pdf-icon-XZRCPUZL.png",
+  "impact-report_pdf-icon.webp": "/assets/assets/impact-report_pdf-icon-ARH2FAXH.webp",
   "info.svg": "/assets/assets/info-TBKQSD4V.svg",
+  "jim.webp": "/assets/assets/jim-YNT2QTL4.webp",
   "launch--white.svg": "/assets/assets/launch--white-RFNMNFON.svg",
   "launch.svg": "/assets/assets/launch-ITYHD56Q.svg",
   "loader.svg": "/assets/assets/loader-XRERFQEW.svg",
@@ -47,26 +50,27 @@
   "navigate_far_before.svg": "/assets/assets/navigate_far_before-GSWMTOHQ.svg",
   "navigate_far_next.svg": "/assets/assets/navigate_far_next-EC44VNMY.svg",
   "navigate_next.svg": "/assets/assets/navigate_next-EH2RHTK7.svg",
-  "portfolio-paint-stroke-1.png": "/assets/assets/portfolio-paint-stroke-1-AGEVRO3B.png",
-  "portfolio-paint-stroke-1-v.png": "/assets/assets/portfolio-paint-stroke-1-v-HYH6CCTI.png",
-  "portfolio-paint-stroke-2.png": "/assets/assets/portfolio-paint-stroke-2-3YWRCN5F.png",
-  "portfolio-paint-stroke-2-v.png": "/assets/assets/portfolio-paint-stroke-2-v-CHRL2BBD.png",
-  "portfolio-paint-stroke-3.png": "/assets/assets/portfolio-paint-stroke-3-BGLH6ZS4.png",
-  "portfolio-paint-stroke-3-v.png": "/assets/assets/portfolio-paint-stroke-3-v-BZ3HXSUZ.png",
-  "portfolio-paint-stroke-4.png": "/assets/assets/portfolio-paint-stroke-4-H5J4BXZM.png",
-  "portfolio-paint-stroke-4-v.png": "/assets/assets/portfolio-paint-stroke-4-v-FKV47AXI.png",
-  "portfolio-paint-stroke-5.png": "/assets/assets/portfolio-paint-stroke-5-4RVRY2L5.png",
-  "portfolio-paint-stroke-5-v.png": "/assets/assets/portfolio-paint-stroke-5-v-WPBWGNWZ.png",
-  "portfolio-paint-stroke-6.png": "/assets/assets/portfolio-paint-stroke-6-MZPAIYPK.png",
-  "portfolio-paint-stroke-6-v.png": "/assets/assets/portfolio-paint-stroke-6-v-Q5Q23WM3.png",
+  "portfolio-paint-stroke-1.png": "/assets/assets/portfolio-paint-stroke-1-BT6O5O7C.png",
+  "portfolio-paint-stroke-1-v.png": "/assets/assets/portfolio-paint-stroke-1-v-RTELLBUD.png",
+  "portfolio-paint-stroke-2.png": "/assets/assets/portfolio-paint-stroke-2-IYZESJZT.png",
+  "portfolio-paint-stroke-2-v.png": "/assets/assets/portfolio-paint-stroke-2-v-ADHGV4VY.png",
+  "portfolio-paint-stroke-3.png": "/assets/assets/portfolio-paint-stroke-3-W2SSUFEU.png",
+  "portfolio-paint-stroke-3-v.png": "/assets/assets/portfolio-paint-stroke-3-v-74W3M462.png",
+  "portfolio-paint-stroke-4.png": "/assets/assets/portfolio-paint-stroke-4-KBEKFOJW.png",
+  "portfolio-paint-stroke-4-v.png": "/assets/assets/portfolio-paint-stroke-4-v-75WFJ4MT.png",
+  "portfolio-paint-stroke-5.png": "/assets/assets/portfolio-paint-stroke-5-FY6PLBWZ.png",
+  "portfolio-paint-stroke-5-v.png": "/assets/assets/portfolio-paint-stroke-5-v-S5HFBMXY.png",
+  "portfolio-paint-stroke-6.png": "/assets/assets/portfolio-paint-stroke-6-VLCBIA6C.png",
+  "portfolio-paint-stroke-6-v.png": "/assets/assets/portfolio-paint-stroke-6-v-GBSGMNIF.png",
   "remove.svg": "/assets/assets/remove-6IAU2W4S.svg",
-  "report-1-bg.png": "/assets/assets/report-1-bg-4DA7CIY3.png",
-  "report-1-bg-mobile.png": "/assets/assets/report-1-bg-mobile-JB5WV2AI.png",
-  "report-1-bg-tablet.png": "/assets/assets/report-1-bg-tablet-R4QCU4X5.png",
-  "report-gradient-separator.png": "/assets/assets/report-gradient-separator-B22CUQ6N.png",
-  "report-green-brush-stroke.png": "/assets/assets/report-green-brush-stroke-WPU7KT5H.png",
-  "report-lilac-brush-stroke.png": "/assets/assets/report-lilac-brush-stroke-MHCJC7WW.png",
-  "report-nav-active-bar.png": "/assets/assets/report-nav-active-bar-LAQEKIMJ.png",
+  "report-1-bg.png": "/assets/assets/report-1-bg-C3ZMOMYT.png",
+  "report-1-bg-mobile.png": "/assets/assets/report-1-bg-mobile-7YWW4XSQ.png",
+  "report-1-bg-tablet.png": "/assets/assets/report-1-bg-tablet-NWSNE6A3.png",
+  "report-gradient-separator.webp": "/assets/assets/report-gradient-separator-BFERC5QK.webp",
+  "report-green-brush-stroke.webp": "/assets/assets/report-green-brush-stroke-JFPXNXZQ.webp",
+  "report-green-separator.webp": "/assets/assets/report-green-separator-B365AIK4.webp",
+  "report-lilac-brush-stroke.png": "/assets/assets/report-lilac-brush-stroke-M7XHI42Z.png",
+  "report-nav-active-bar.png": "/assets/assets/report-nav-active-bar-OOHI5OAH.png",
   "roboto-mono-v5-latin-300.woff2": "/assets/assets/roboto-mono-v5-latin-300-UE3MSWKN.woff2",
   "roboto-mono-v5-latin-300italic.woff2": "/assets/assets/roboto-mono-v5-latin-300italic-L54VLD6K.woff2",
   "roboto-mono-v5-latin-700.woff2": "/assets/assets/roboto-mono-v5-latin-700-3IFUE232.woff2",
@@ -75,12 +79,12 @@
   "roboto-mono-v5-latin-regular.woff2": "/assets/assets/roboto-mono-v5-latin-regular-OEH334AX.woff2",
   "search.svg": "/assets/assets/search-2D3FZK3P.svg",
   "section2-purple-bg.webp": "/assets/assets/section2-purple-bg-NLRL7WNF.webp",
-  "the-10x-team.png": "/assets/assets/the-10x-team-MTDVPVQ6.png",
+  "the-10x-team.webp": "/assets/assets/the-10x-team-77VTG5RX.webp",
   "tts-inclusive-grid-map.svg": "/assets/assets/tts-inclusive-grid-map-D5DPHQNA.svg",
   "unfold_more.svg": "/assets/assets/unfold_more-WL443JWS.svg",
   "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-6NLQABYQ.css",
+  "index.map": "/assets/styles/index-6NLQABYQ.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,31 @@
+{% 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 -%}
+    {% if section == 'reports' %}
+    <p class="intro">{{ intro }}</p>
+    {%- else -%}
+    <p class="intro">{{ hero_banner.subtitle }}</p>
+    {% endif %}
+    {%- 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>
@@ -75,9 +74,16 @@
         {%- for entry in navPages %}
         {% assign isCurrent = false %}
         {% assign hasChildren = false %}
+        {% assign lowercase_entry_title = entry.title | downcase %}
+
         {%- if entry.url == page.url or page.url contains entry.url -%}
         {% assign isCurrent = true %}
-        {%- endif -%}
+        {% elsif entry.title == 'Impact' and page.url contains '/impact' %}
+          {% assign isCurrent = true %}
+        {% elsif not page.url contains 'fy23-impact-report' and page.url contains 'impact' and lowercase_entry_title contains 'impact' %}
+          {% assign isCurrent = true %}
+        {% endif %}
+
         {%- if entry.children.length > 0 -%}
         {% assign hasChildren = true %}
         {%- endif -%}

_includes/components/impact-breadcrumb.html

@@ -0,0 +1,27 @@
+<div class="grid-row impact-breadcrumb">
+  <div class="grid-container">
+    <nav class="usa-breadcrumb padding-y-0" aria-label="Breadcrumbs,,">
+      <ol class="usa-breadcrumb__list">
+        <li class="usa-breadcrumb__list-item">
+          <a href="{{ '/' | url }}" class="usa-breadcrumb__link">
+            <span>
+              {{ home-link-text }}
+            </span>
+          </a>
+        </li>
+        <li class="usa-breadcrumb__list-item">
+          <a href="{{ impact-list-url | url }}" class="usa-breadcrumb__link">
+            <span>
+              {{ all-impact-reports }}
+            </span>
+          </a>
+        </li>
+        <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
+          <span>
+            {{ title }}
+          </span>
+        </li>
+      </ol>
+    </nav>
+  </div>
+</div>

_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/reports-list.html

@@ -1,28 +1,38 @@
-  </div>
-</div>
-<!-- come back and adjust max width -->
-<div class="grid-container">
-  <div class="ReportList grid-row grid-gap">
+<ul class="usa-card-group grid-row grid-gap-2">
   {%- for report in collections.reports -%}
-   {%- if report.data.pdf -%}
-     {%- assign reportLink = report.data.reportUrl -%}
+  {%- if report.data.pdf -%}
+    {%- assign reportLink = report.data.reportUrl | url -%}
     {%- else -%}
       {%- assign reportLink = report.url | url -%}
     {%- endif -%}
-
-    <div class="grid-col-12 desktop:grid-col-6">
-      <a class="ReportCard__link" {% if report.data.pdf -%}target="_blank"{%- endif %} href="{{ reportLink }}">
-        <div class="usa-card usa-card--no-media ReportCard template-{{ report.data.template }}">
-          <div class="usa-card__container">
-            <div class="usa-card__body">
-              <h1 class="usa-card__heading {% if report.data.pdf -%}pdf-icon{%- endif -%}">FY{{ report.data.year }}</h1>
-              <h2 class="usa-card__subhead">{{ report.data.subtitle }}</h2>
-              <p>{{ report.data.excerpt | markdownify }}</p>
-            </div>
+  <li class="usa-card usa-card--flag fy-card fy{{ report.data.year }}-card template-{{ report.data.template }} mobile:grid-col-12 {% if not report.data.year == 23 %}  widescreen:grid-col-4 desktop:grid-col-6 {%- else -%} usa-card--media-right current-year {%- endif -%}">
+    <a class="ReportCard__link" {% if report.data.pdf -%}target="_blank"{%- endif %} href="{{ reportLink }}">
+      <div class="usa-card__container">
+        <div class="usa-card__header">
+          <h2 class="usa-card__heading">
+            FY{{ report.data.year }}
+          </h2>
+        </div>
+        {% if report.data.year == 23 %}
+        <div class="usa-card__media usa-card__media">
+          <div class="usa-card__img">
+            <img src="{{ '/assets/images/current-report-icon-floated.svg' | url }}" alt="" width="216" height="301" /> 
           </div>
         </div>
-      </a>
-    </div>
-  {%- endfor -%}
-  </div>
-</div>
+        {%- endif -%}
+        <div class="usa-card__body">
+          <h3 class="usa-card__subhead {% if report.data.pdf -%}pdf-icon{%- endif -%}">        
+            <span>{{ report.data.hero_banner.subtitle }} </span>
+            {% if report.data.pdf -%}
+            <span class="usa-sr-only">PDF</span>          
+            {%- endif -%}             
+          </h3>
+          <p class="excerpt-text">
+            <span>{{ report.data.excerpt | markdownify }}</span>        
+          </p>
+        </div>
+      </div>
+    </a>
+  </li>
+  {% endfor %}
+</ul>

_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/about-sub-page.html

@@ -10,12 +10,12 @@
           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">
+        <section class="grid-container header-section blog-post-header-section usa-section" aria-labelledby="{{ pageBrow }}">
+          <span class="page-brow" id="{{ pageBrow }}">{{ pageBrow }}</span>
           <h1>{{ pageTitle }}</h1>
           {%- if subtitle != null -%}
           <h2>{{ subtitle }}</h2>
           {%- endif -%}
-          <h3>{{ pageBrow }}</h3>
         </section>
       </div>
     </div>

_includes/layouts/impact-list-page.html

@@ -0,0 +1,40 @@
+---
+layout: layouts/base.html
+section: about
+--- 
+<div class="impact-landing-page {{ className }} portfolio-blog-pages portfolio-bloglist-wrapper">
+  <div class="TxContent portfolio-blog-single-page about-page-section about-page static-content-page">
+    <div class="banner-bg desktop:margin-bottom-2">
+      {% include "components/gradient-hero-banner.html" %}
+    </div>
+    <section class="usa-section grid-container">
+      <div class="grid-row">
+        <div class="grid-col-12 usa-prose usa-layout-docs" id="main-content">
+          {% assign reportslist = reports %}
+          {% include "components/reports-list.html" %}
+
+          {% if pagination.pages.length > 1 %}
+          {% include "components/pagination.html" %}
+          {% endif %}
+
+          {% if tags %}
+          <p class="tag-container margin-top-5">
+            <span>Tag:</span>
+            {% for tag in tags %}
+            {%- if tag != "post" -%}
+            {% capture tagUrl %}/news/tags/{{ tag }}/{% endcapture %}
+            <span class="usa-tag usa-tag--big">
+              <a href="{{ tagUrl | url }}" rel="tag">{{ tag }}</a>
+            </span>
+            {%- endif -%}
+            {% endfor %}
+          </p>
+          {% endif %}
+          <p id="return-to-top-wrapper" class="usa-identifier__required-links-item return-to-top margin-bottom-5">
+            <a class="usa-link" href="#top">{{ return-to-top_text }}</a>
+          </p>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>