feat: homepage update (#1751)

package.json

@@ -40,6 +40,7 @@
   },
   "dependencies": {
     "@11ty/eleventy": "2.0.1",
+    "@11ty/eleventy-img": "4.0.2",
     "@11ty/eleventy-navigation": "0.3.5",
     "@11ty/eleventy-plugin-rss": "1.2.0",
     "airtable": "0.12.2",

src/_includes/components/brand.njk

@@ -1,7 +1,5 @@
 <div class="brand">
     <a {% if page.url === '/' %}aria-current="page"{% endif %} rel="home" href="/">
         {% include 'svg/logo.svg' %}
-        {% include 'svg/logotype.svg' %}
-        <span class="screen-reader-only">We Count</span>
     </a>
 </div>

src/_includes/components/footer.njk

@@ -1,6 +1,6 @@
+{% include 'components/subscribe.njk' %}
 <footer>
   <div class="footer-content">
-    {% include 'components/subscribe.njk' %}
     {% include 'components/social-media.njk' %}
     {% include 'components/contact-info.njk' %}
     {% include 'components/funders.njk' %}

src/_includes/components/header-nav.njk

@@ -1,31 +1,33 @@
-<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
-  <symbol id="menu-icon" viewBox="0 0 1536 1536">
-    {% include 'svg/menu.svg' %}
-  </symbol>
-  <symbol id="search" viewBox="0 0 21 22">
-    {% include 'svg/search.svg' %}
-  </symbol>
-</svg>
+<div class="nav-container">
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="menu-icon" viewBox="0 0 42 27">
+      {% include 'svg/menu.svg' %}
+    </symbol>
+    <symbol id="menu-close" viewBox="0 0 34 35">
+      {% include 'svg/close.svg' %}
+    </symbol>
+    <symbol id="search" viewBox="0 0 21 22">
+      {% include 'svg/search.svg' %}
+    </symbol>
+  </svg>
 
-{% set placeholderForSearch = "Search..." %}
-{% set ariaLabelForSearch = "Enter keywords for a site-wide search" %}
-
-<div class="nav-wideScreen">
-  {% include 'components/nav-menu.njk' %}
-  <form method="get" action="/search/">
-    {% include 'components/search-container.njk' %}
-  </form>
-</div>
-
-<div class="nav-smallScreen">
-  <nav class="starter-nav">
-    <button id="menuToggleButton" aria-expanded="false">
-      <svg><use xlink:href="#menu-icon" /></svg>&nbsp;<span>Menu</span><span class="screen-reader-only">Menu</span>
-    </button>
+  {% set placeholderForSearch = "Search..." %}
+  {% set ariaLabelForSearch = "Enter keywords for a site-wide search" %}
+  <div class="nav-mobile-layout-wrapped">
+    {% include 'components/brand.njk' %}
+    <a class="header-recount" href="/recount">Join the conversation</a>
+  </div>
+  <div class="nav-mobile-layout-wrapped">
+    <div class="starter-nav">
+      <button id="menuToggleButton" aria-expanded="false" aria-describedby="navigation-menu">
+        <svg class="menu-open" aria-hidden="true"><use xlink:href="#menu-icon" /></svg>
+        <svg class="menu-close" aria-hidden="true"><use xlink:href="#menu-close" /></svg>
+      </button>
+      <div id="navigation-menu">MENU</div>
+    </div>
     <form method="get" action="/search/">
-      {% include 'components/search-container.njk' %}
+    {% include 'components/search-container.njk' %}
     </form>
-  </nav>
-
-  {% include 'components/nav-menu.njk' %}
+  </div>
 </div>
+{% include 'components/nav-menu.njk' %}

src/_includes/components/header.njk

@@ -28,7 +28,6 @@
   </div>
   <!-- END markup for Preference Editor -->
   {% include 'components/idrc-indicator.njk' %}
-  {% include 'components/brand.njk' %}
     <div class="site-nav-wrapper">
         <div class="site-nav">
             {% include 'components/header-nav.njk' %}

src/_includes/components/idrc-indicator.njk

@@ -1,7 +1,7 @@
 <div class="idrc-indicator-wrapper">
     <div class="idrc-indicator">
         <div class="idrc-indicator-element">
-            <span>An <a href="https://idrc.ocadu.ca/">Inclusive Design Research Centre</a> project</span>
+            <span><em>We Count</em>: Artificial Intelligence Inclusion Projects from {% include "svg/idrc-logo.svg" %} <a href="https://idrc.ocadu.ca/">Inclusive Design Research Centre</a>
         </div>
     </div>
 </div>

src/_includes/components/nav-menu.njk

@@ -1,8 +1,15 @@
-<nav class="primary-nav" aria-label="Primary Navigation">
-  {% set navItems = collections.pages | eleventyNavigation %}
-  {%- for item in navItems %}
-    {%- if (item.order > 0) %}
-    <a {% if page.url === item.url %}aria-current="page" {% endif %}href="{{ item.url }}" {% if item.locale and item.locale !== "en-CA" %}hreflang="{{ item.locale }}" lang="{{ item.locale }}"{% endif %}>{{ item.key }}</a>
-    {%- endif %}
-  {%- endfor %}
-</nav>
+<div class="primary-nav">
+  <nav aria-label="Primary Navigation">
+    {% set navItems = collections.pages | eleventyNavigation %}
+    {%- for item in navItems %}
+      {%- if (item.order > 0) %}
+      <a {% if page.url === item.url %}aria-current="page" {% endif %}href="{{ item.url }}" {% if item.locale and item.locale !== "en-CA" %}hreflang="{{ item.locale }}" lang="{{ item.locale }}"{% endif %}>{{ item.key }}</a>
+      {%- endif %}
+    {%- endfor %}
+  </nav>
+  <div>
+    <form method="get" action="/search/">
+      {% include 'components/search-container.njk' %}
+    </form>
+  </div>
+</div>

src/_includes/components/search-container.njk

@@ -1,4 +1,6 @@
 <div class="search-container">
-  <svg><use xlink:href="#search" /></svg>
   <input name="s" type="search" placeholder="{{ placeholderForSearch }}" aria-label="{{ ariaLabelForSearch }}">
+  <button class="search-button">
+    <svg aria-label="search" class="search-button-target" role="button" type="submit" tabindex="0"><use xlink:href="#search" /></svg>
+  </button>
 </div>

src/_includes/components/subscribe.njk

@@ -1,5 +1,4 @@
 <div class="subscribe">
-  <p class="subscribe-text">Subscribe now to stay up-to-date with We Count's activities and the latest news from the field.</p>
-  <a class="subscribe-link" href="http://eepurl.com/hBMRev">Click to Subscribe</a>
-  <hr/>
+    <p class="subscribe-text">Get <em><b>We Count Recount newsletter</b></em> and stay up-to-date with our activities and news from the field — sent directly to your inbox.</p>
+    <a class="subscribe-link" href="http://eepurl.com/hBMRev">Click to Subscribe</a>
 </div>

src/_includes/layouts/base.njk

@@ -8,6 +8,7 @@
     {% include 'globals/service-worker.njk' %}
     {% endif %}
     {% include 'globals/meta.njk' %}
+    {% include "svg/filters.svg" %}
     <link rel="stylesheet" href="/assets/styles/main.css"/>
     <link rel="stylesheet" href="/assets/styles/lite-yt-embed.css"/>
     <script src="/assets/scripts/main.js" defer></script>
@@ -27,7 +28,7 @@
   <body>
     <div id="defaultContainer">
       {% include 'components/header.njk' %}
-      <div class="content-wrapper">
+      <div class="content-wrapper{% if page.url === "/" %} homepage-content-wrapper{% endif %}">
         <aside id="toc"></aside>
         <main>
           <nav class="flc-toc-tocContainer"></nav>

src/_includes/layouts/page.njk

@@ -11,18 +11,32 @@
 {% if page.url === "/" %}
 <div>
   <article>
-    <h1 class="title">{{ pageTitle }}</h1>
     <div class="api-content homepage-content">
+    <div class="homepage-intro">
+      <p>IDRC – Advancing the conversation of inclusive AI and data ecosystems</p>
+    </div>
+    {% if bannerImage %}
+    <div class="banner-image-container">
+      <figure>
+      <img src="{{ bannerImage }}" alt="{{ bannerImageAltText }}" />
+      </figure>
+      {% if bannerImageText %}
+        <div class="banner-image-text">
+          {{ bannerImageText | safe }}
+        </div>
+      {% endif %}
+    </div>
+    {% endif %}
     {{ content | safe }}
+    <div class="homepage-cards">
+      {%- from '../components/card.macro.njk' import card %}
+      {{ card({color: "blue", url: "/resources/", title: "Resource Library", text: "Search IDRC's library of AI and data analytics resources", backgroundSvg: "../svg/blue.svg"}) }}
+      {{ card({color: "green", url: "/events/", title: "Events", text: "Find out about IDRC events and how you can participate", backgroundSvg: "../svg/green.svg"}) }}
+      {{ card({color: "azure", url: "/initiatives/", title: "Inclusive AI Initiatives", text: "Explore IDRC project activities", backgroundSvg: "../svg/azure.svg"}) }}
+      {{ card({color: "yellow", url: "/rtdd/", title: "Regulating the Digital<div lang='fr-CA'>Réguler le numérique</div>", text: "Addressing digital exclusion / <span lang='fr-CA'>Lutter contre l’exclusion numérique</span>", backgroundSvg: "../svg/yellow.svg"}) }}
+    </div>
     </div>
   </article>
-  <div class="homepage-cards">
-    {%- from '../components/card.macro.njk' import card %}
-    {{ card({color: "blue", url: "/resources/", title: "Resource Library", text: "Search IDRC's library of AI and data analytics resources", backgroundSvg: "../svg/blue.svg"}) }}
-    {{ card({color: "green", url: "/events/", title: "Events", text: "Find out about IDRC events and how you can participate", backgroundSvg: "../svg/green.svg"}) }}
-    {{ card({color: "azure", url: "/initiatives/", title: "Inclusive AI Initiatives", text: "Explore IDRC project activities", backgroundSvg: "../svg/azure.svg"}) }}
-    {{ card({color: "yellow", url: "/rtdd/", title: "Regulating the Digital<div lang='fr-CA'>Réguler le numérique</div>", text: "Addressing digital exclusion / <span lang='fr-CA'>Lutter contre l’exclusion numérique</span>", backgroundSvg: "../svg/yellow.svg"}) }}
-  </div>
 </div>
 
 {% elif page.url === "/events/" %}