fix: update based on PR feedback

inclusive-design · Dec 6, 2024 · a275d04 · a275d04
1 parent 888d737
commit a275d04
Show file tree

Hide file tree

Showing 21 changed files with 93 additions and 92 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -23,6 +23,12 @@ export default function eleventy(eleventyConfig) {
         }
     });
 
+    ["en", "fr"].forEach((lang) => {
+        eleventyConfig.addCollection(`pages_${lang}`, (collection) => {
+            return collection.getFilteredByGlob(`src/collections/pages/${lang}/*.md`);
+        });
+    });
+
     eleventyConfig.addPassthroughCopy({
         "src/admin/config.yml": "admin/config.yml"
     });

diff --git a/src/_data/social.json b/src/_data/social.json
@@ -0,0 +1,7 @@
+{
+	"facebook": "https://www.facebook.com/",
+	"instagram": "https://www.instagram.com/",
+	"x": "https://x.com/",
+	"linkedin": "https://www.linkedin.com/",
+	"youtube": "https://www.youtube.com/"
+}
diff --git a/src/_data/translations.json b/src/_data/translations.json
@@ -4,6 +4,8 @@
         "contact-us-address": "Address",
         "contact-us-email": "Email",
         "contact-us-phone": "Phone",
+        "header-intro": "An <a href='https://idrc.ocadu.ca/'>Inclusive Design Research Centre</a> Project",
+        "header-intro-short": "<a href='https://idrc.ocadu.ca/'>An IDRC Project</a>",
         "social-media": "Social Media",
         "main-menu": "Main Menu",
         "menu": "menu"
@@ -13,6 +15,8 @@
         "contact-us-address": "Adresse",
         "contact-us-email": "Courriel",
         "contact-us-phone": "Téléphone",
+        "header-intro": "An <a href='https://idrc.ocadu.ca/'>Inclusive Design Research Centre</a> Project",
+        "header-intro-short": "<a href='https://idrc.ocadu.ca/'>An IDRC Project</a>",
         "social-media": "Les médias sociaux",
         "main-menu": "Menu Principal",
         "menu": "menu"

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -10,12 +10,9 @@
 <body>
     {% include "partials/global/header.njk" %}
     {% include "partials/components/navigation.njk" %}
-    {# example datas TODO: populate datas from different collections #}
-    {% set displayItems = ['1', '2', '3'] %}
-    {% set cardTitle = "Card Title" %}
-    {% set cardBody = "Lorem ipsum dolor sit amet, consectetur adipiscing elit" %}
+    {% from "partials/components/card.macro.njk" import card %}
     {% if hasBanner %}
-    <div class="banner bg-{{ bannerBGColor }}">
+    <div class="banner bg-{{ bannerBgColor }}">
       <div class="banner__text">
         <div class="banner__title">
           {{ bannerTitle | safe }}
@@ -30,61 +27,61 @@
     </div>
     {% endif %}
     {% block content %}{% endblock %}
-    {% if displayProjects %}
+    {% if collections['projects_' + lang] %}
     {% set cardImage = "yes" %}
     <section class="display">
       <div class="display__title">
         <h2>Projects</h2>
       </div>
       <div class="display__items">
         {% set cardType = "project" %}
-        {% for item in displayItems %}
-          {% include "partials/components/card.njk" %}
+        {% for item in collections['projects_' + lang] %}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
         {% endfor %}
       </div>
       <div class="display__link">
       </div>
     </section>
     {% endif %}
-    {% if displayEvents %}
+    {% if collections.events %}
     <section class="display">
       <div class="display__title">
         <h2>Events</h2>
       </div>
       <div class="display__items">
         {% set cardType = "event" %}
-        {% for item in displayItems %}
-          {% include "partials/components/card.njk" %}
+        {% for item in collections.events %}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
         {% endfor %}
       </div>
       <div class="display__link">
       </div>
     </section>
     {% endif %}
-    {% if displayResources %}
+    {% if collections.resources %}
     <section class="display">
       <div class="display__title">
         <h2>Resources</h2>
       </div>
       <div class="display__items">
         {% set cardType = "resource" %}
-        {% for item in displayItems %}
-          {% include "partials/components/card.njk" %}
+        {% for item in collections.resources %}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
         {% endfor %}
       </div>
       <div class="display__link">
       </div>
     </section>
     {% endif %}
-    {% if displayNews %}
+    {% if collections.news %}
     <section class="display">
       <div class="display__title">
         <h2>Announcements</h2>
       </div>
       <div class="display__items">
         {% set cardType = "news" %}
-        {% for item in displayItems %}
-          {% include "partials/components/card.njk" %}
+        {% for item in collections.news %}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
         {% endfor %}
       </div>
       <div class="display__link">

diff --git a/src/_includes/partials/components/card.njk → ...cludes/partials/components/card.macro.njk b/src/_includes/partials/components/card.njk → ...cludes/partials/components/card.macro.njk
@@ -1,37 +1,43 @@
+{%- macro card(params) -%}
 <div class="card">
-    {% if cardImage %}
+    {% if params.image %}
         <div class="card__image">
+            {{ params.image }}
         </div>
     {% endif %}
     <div class="card__content">
         <div class="card__title">
-            <h4>{{ cardTitle }}</h4>
+            <h4>{{ params.title | safe }}</h4>
         </div>
         {% if cardType === "event" %}
             <div class="card__event-status">
                 {% include 'svg/eventTag.svg' %}
-                <p>Upcoming</p>
+                <p>{{ params.eventStatus | safe }}</p>
             </div>
         {% endif %}
         {% if cardType === "event" or cardType === "news" %}
             <div class="card__date">
-                <p>March 15, 2024</p>
+                <p>{{ params.date }}</p>
             </div>
         {% endif %}
         {% if cardType === "resource" %}
             <div class="card__publisher">
+                <p>{{ params.publisher }} </p>
             </div>
         {% endif %}
         <div class="card__body">
-            <p>{{ cardBody }}</p>
+            <p>{{ params.body | renderContent("md") }}</p>
         </div>
         {% if cardType === "resource" %}
             <div class="card__resource-type">
+                {{ params.resourceType }}
             </div>
         {% endif %}
         {% if cardType === "resource" or cardType === "news" %}
             <div class="card__tag">
+                {{ params.tag }}
             </div>
         {% endif %}
     </div>
-</div>
+</div>
+{% endmacro %}
diff --git a/src/_includes/partials/components/navigation.njk b/src/_includes/partials/components/navigation.njk
@@ -1,10 +1,10 @@
 <nav class="navigation">
     <div class="navigation__link">
         <a class="navigation__home" href="/">{{ "<b>Inclusive</b><br>Standards" | safe }}</a>
-        {% set navItems = collections.all | eleventyNavigation %}
+        {% set navItems = collections['pages_' + lang] | eleventyNavigation %}
         <button class="navigation__toggle" id="navigation-toggle" aria-expanded="false">{% __ 'menu' %} {% include 'svg/menu.svg' %}</button>
     </div>
-    <div class="navigation__menu visually-hidden" id="navigation-menu">
+    <div class="navigation__menu" id="navigation-menu">
         <ul>
             {% for item in navItems %}
             {% if locale == item.locale %}

diff --git a/src/_includes/partials/global/footer.njk b/src/_includes/partials/global/footer.njk
@@ -1,7 +1,7 @@
 <footer role="contentinfo">
     <div class="footer__container">
         <div class="footer__title">
-            <div><b>inclusive</b></div>
+            <div><strong>inclusive</strong></div>
             <div>standards</div>
         </div>
         <div class="footer__content">
@@ -11,11 +11,11 @@
                     <nav aria-label="{% __ 'social-media' %}">
                         <h4>{% __ 'social-media' %}</h4>
                         <ul role="list">
-                            <li><a href="https://www.facebook.com/" rel="external">{% include "svg/facebook.svg" %} Facebook</a></li>
-                            <li><a href="https://www.linkedin.com/" rel="external">{% include "svg/linkedin.svg" %} LinkedIn</a></li>
-                            <li><a href="https://www.instagram.com/" rel="external">{% include "svg/instagram.svg" %} Instagram</a></li>
-                            <li><a href="https://twitter.com/" rel="external">{% include "svg/x.svg" %} X</a></li>
-                            <li><a href="https://www.youtube.com/" rel="external">{% include "svg/youtube.svg" %} YouTube</a></li>
+                            <li><a href="{{ social.facebook }}" rel="external">{% include "svg/facebook.svg" %} Facebook</a></li>
+                            <li><a href="{{ social.linkedin }}" rel="external">{% include "svg/linkedin.svg" %} LinkedIn</a></li>
+                            <li><a href="{{ social.instagram }}" rel="external">{% include "svg/instagram.svg" %} Instagram</a></li>
+                            <li><a href="{{ social.x }}" rel="external">{% include "svg/x.svg" %} X</a></li>
+                            <li><a href="{{ social.youtube }}" rel="external">{% include "svg/youtube.svg" %} YouTube</a></li>
                         </ul>
                     </nav>
                 </div>

diff --git a/src/_includes/partials/global/header.njk b/src/_includes/partials/global/header.njk
@@ -3,7 +3,7 @@
     {% uioInit %}
     <div class="header large-viewport">
         <div class="header__intro">
-            An <a href="https://idrc.ocadu.ca/">Inclusive Design Research Centre</a> Project
+            {% __ 'header-intro' | safe %}
         </div>
         <div class="header__settings">
             <ul class="header__language" role="list">
@@ -18,15 +18,15 @@
     </div>
     <div class="header small-viewport">
         <div class="header__intro">
-            <a href="https://idrc.ocadu.ca/">An IDRC Project</a>
+            {% __ 'header-intro-short' | safe %}
         </div>
         <div class="header__settings">
             <ul class="header__language" role="list">
                 <li>
-                    <a href="{% if page.url == '/' %} /en/ {% else %} {{ page.url | replace("/fr/", "/en/") }} {% endif %}" lang="en-CA" hreflang="en-CA"{% if page.lang == 'en' %} aria-current="page"{% endif %}>En</a>
+                    <a href="{% if page.url == '/' %} /en/ {% else %} {{ page.url | replace("/fr/", "/en/") }} {% endif %}" lang="en-CA" hreflang="en-CA"{% if page.lang == 'en' %} aria-current="page"{% endif %}>EN</a>
                 </li>
                 <li>
-                    <a href="{% if page.url == '/' %} /fr/ {% else %} {{ page.url | replace("/en/", "/fr/") }} {% endif %}" lang="fr-CA" hreflang="fr-CA"{% if page.lang == 'fr' %} aria-current="page"{% endif %}>Fr</a>
+                    <a href="{% if page.url == '/' %} /fr/ {% else %} {{ page.url | replace("/en/", "/fr/") }} {% endif %}" lang="fr-CA" hreflang="fr-CA"{% if page.lang == 'fr' %} aria-current="page"{% endif %}>FR</a>
                 </li>
             </ul>
         </div>

diff --git a/src/assets/scripts/app.js b/src/assets/scripts/app.js
@@ -2,6 +2,4 @@ const menuButton = document.getElementById("navigation-toggle");
 menuButton.addEventListener("click", () => {
     const ariaExpanded = menuButton.ariaExpanded === "false";
     menuButton.ariaExpanded = ariaExpanded;
-    const menu = document.getElementById("navigation-menu");
-    menu.classList.toggle("visually-hidden");
 });
diff --git a/src/assets/styles/base/_base.css b/src/assets/styles/base/_base.css
@@ -68,15 +68,15 @@ section:last-of-type {
 
 .banner__text {
     font-family: 'Raleway';
-    font-size: var(--step-0, 1.25rem);
-    line-height: var(--step-2, 1.75rem);
+    font-size: var(--step-0);
+    line-height: var(--step-2);
     padding-inline: var(--common-inline-padding);
     padding-block: 3rem;
 }
 
 .banner__title {
-    font-size: var(--step-4, 3rem);
-    line-height: var(--step-5, 3.5rem);
+    font-size: var(--step-4);
+    line-height: var(--step-5);
     margin-bottom: 1.5rem;
 }
 
@@ -87,8 +87,8 @@ section:last-of-type {
 }
 
 .display__title h2{
-    font-weight: var(--font-weight-bold, 700);
-    font-size: var(--step-4, 2.625rem);
+    font-weight: var(--font-weight-bold);
+    font-size: var(--step-4);
     margin-bottom: 2rem;
 }
 

diff --git a/src/assets/styles/components/card.css b/src/assets/styles/components/card.css
@@ -22,7 +22,7 @@
 .card__title h4{
     font-family: var(--family-sans-serif);
     font-weight: var(--font-weight-semibold);
-    font-size: var(--step-1, 1.375rem);
+    font-size: var(--step-1);
     margin: 0;
 }
 
@@ -31,7 +31,7 @@
 .card__event-status {
     font-family: var(--family-sans-serif);
     font-weight: var(--font-weight-normal);
-    font-size: var(--step-0, 1.125rem);
+    font-size: var(--step-0);
 }
 
 .card__event-status {

diff --git a/src/assets/styles/components/navigation.css b/src/assets/styles/components/navigation.css
@@ -17,7 +17,7 @@
     text-decoration: none;
     color: white;
     font-family: 'Raleway';
-    font-size: var(--step-0, 1.125rem);
+    font-size: var(--step-0);
 }
 
 .navigation__toggle {
@@ -29,7 +29,7 @@
     border: none;
     font-family: var(--family-sans-serif);
     font-weight: var(--font-weight-normal);
-    font-size: var(--step-0, 1.125rem);
+    font-size: var(--step-0);
 }
 
 .navigation__menu {
@@ -38,6 +38,14 @@
     padding-inline: var(--common-inline-padding);
 }
 
+.navigation__link:has([aria-expanded="true"]) + .navigation__menu {
+    display: block;
+}
+
+.navigation__link:has([aria-expanded="false"]) + .navigation__menu {
+    display: none;
+}
+
 .navigation__menu ul {
     display: flex;
     flex-direction: column;
@@ -46,7 +54,7 @@
 }
 
 .navigation__menu li {
-    font-size: var(--step-0, 1.125rem);
+    font-size: var(--step-0);
     font-weight: var(--font-weight-normal);
     line-height: 1.625rem;
     padding-block: 0.625rem;
@@ -65,26 +73,17 @@
     }
 
     .navigation__link {
-        display: block;
-        padding-block: unset;
-        padding-inline: unset;
-        margin-block: auto;
+        padding: unset;
     }
 
     .navigation__toggle {
         display: none;
     }
 
-    .navigation__menu {
-        clip: unset;
-        clip-path: unset;
-        height: unset;
-        overflow: unset;
+    .navigation__link:has([aria-expanded="false"]) + .navigation__menu {
+        display: block;
         padding: unset;
-        position: unset;
-        white-space: unset;
         width: unset;
-        display: block;
     }
 
     .navigation__menu ul {