feat: update projects page

src/_data/translations.json

@@ -1,22 +1,30 @@
 {
     "en": {
+        "announcements": "Announcements",
         "contact-us": "Contact Us",
         "contact-us-address": "Address",
         "contact-us-email": "Email",
         "contact-us-phone": "Phone",
+        "events": "Events",
         "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>",
+        "projects": "Projects",
+        "resources": "Resources",
         "social-media": "Social Media",
         "main-menu": "Main Menu",
         "menu": "menu"
     },
     "fr": {
+        "announcements": "Announcements",
         "contact-us": "Contactez-nous",
         "contact-us-address": "Adresse",
         "contact-us-email": "Courriel",
         "contact-us-phone": "Téléphone",
+        "events": "Events",
         "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>",
+        "projects": "Projets",
+        "resources": "Resources",
         "social-media": "Les médias sociaux",
         "main-menu": "Menu Principal",
         "menu": "menu"

src/_includes/layouts/about.njk

@@ -5,7 +5,7 @@
 {{ content | safe }}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <h2 class="display__title">Projects</h2>
+      <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}

src/_includes/layouts/home.njk

@@ -4,7 +4,7 @@
 {% block content %}
 {% if collections['projects_' + lang] %}
     <section class="display">
-      <h2 class="display__title">Projects</h2>
+      <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
@@ -17,7 +17,7 @@
     {% endif %}
     {% if collections.events %}
     <section class="display">
-      <h2 class="display__title>Events</h2>
+      <h2 class="display__title>{% __ 'events' %}</h2>
       <div class="display__items">
         {% set cardType = "event" %}
         {% for item in collections.events %}
@@ -30,7 +30,7 @@
     {% endif %}
     {% if collections.resources %}
     <section class="display">
-      <h2 class="display__title>Resources</h2>
+      <h2 class="display__title>{% __ 'resources' %}</h2>
       <div class="display__items">
         {% set cardType = "resource" %}
         {% for item in collections.resources %}
@@ -43,7 +43,7 @@
     {% endif %}
     {% if collections.news %}
     <section class="display">
-      <h2 class="display__title>Announcements</h2>
+      <h2 class="display__title>{% __ 'announcements' %}</h2>
       <div class="display__items">
         {% set cardType = "news" %}
         {% for item in collections.news %}

src/_includes/partials/components/projectPanel.macro.njk

@@ -1,17 +1,17 @@
 {%- macro projectPanel(params) -%}
-<div class="projectPanel">
-    <div class="projectPanel__color">
+<div class="project-panel">
+    <div class="project-panel__color">
     </div>
     {% if params.image %}
-        <div class="projectPanel__image">
+        <div class="project-panel__image">
             {{ params.image }}
         </div>
     {% endif %}
-    <div class="projectPanel__content">
-        <a class="projectPanel__title" href="#">
+    <div class="project-panel__content">
+        <a class="project-panel__title" href="#">
             {{ params.title | safe }}
         </a>
-        <div class="projectPanel__body">
+        <div class="project-panel__body">
             <p>{{ params.body | safe }}</p>
         </div>
     </div>

src/_transforms/parse.js

@@ -1,7 +1,7 @@
 import { parseHTML } from "linkedom";
 
 export default (value, outputPath) => {
-    if (outputPath && outputPath.includes(".html")) {
+    if (outputPath && outputPath.includes(".html") && outputPath.includes("about")) {
         const { document } = parseHTML(value);
 
         const sectionHeadings = document.querySelectorAll("main h2:not([class])");

src/assets/styles/app.css

@@ -15,4 +15,4 @@
 /* Components */
 @import "./components/card.css";
 @import "./components/navigation.css";
-@import "./components/projectPanel.css";
+@import "./components/project-panel.css";

src/assets/styles/base/_base.css

@@ -33,7 +33,7 @@ section {
 }
 
 .banner__text > * + *,
-.projectPanel__content > * + *,
+.project-panel__content > * + *,
 section > * + *,
 footer nav > * + *,
 footer .footer__contact-us > * + * {

src/assets/styles/components/projectPanel.css → src/assets/styles/components/project-panel.css

@@ -1,4 +1,4 @@
-div:has(.projectPanel) {
+div:has(.project-panel) {
     background-color: var(--color-indigo-100);
     display: flex;
     flex-direction: column;
@@ -7,7 +7,7 @@ div:has(.projectPanel) {
     padding-inline: var(--common-inline-padding);
 }
 
-.projectPanel {
+.project-panel {
     background-color: var(--fl-fgColor, var(--color-yellow));
     box-shadow: 0 0.625rem 1.25rem 0 #0B046C26;
     border: 0.1875rem solid var(--fl-bgColor, var(--color-indigo-100));
@@ -16,44 +16,44 @@ div:has(.projectPanel) {
     position: relative;
 }
 
-.projectPanel:has(a:focus) {
+.project-panel:has(a:focus) {
     border: 0.1875rem solid transparent;
     outline: 0.1875rem solid var(--fl-fgColor, transparent);
     outline-offset: 0.1875rem;
 }
 
-.projectPanel:hover {
+.project-panel:hover {
     box-shadow: 0 0.625rem 1.25rem 0 var(--fl-fgColor, #0B046C73);
 }
 
-.projectPanel__color {
+.project-panel__color {
     min-height: 2.5rem;
     border-bottom: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
 }
 
-.projectPanel__image {
+.project-panel__image {
     min-width: 16.25rem;
     min-height: 12.1875rem;
     max-width: 31.0625rem;
     max-height: 23.125rem;
 }
 
-.projectPanel__title {
+.project-panel__title {
     font-weight: var(--font-weight-semibold);
     font-family: var(--family-sans-serif);
     font-size: var(--step-4);
     text-decoration: none;
     color: black;
 }
 
-.projectPanel__title:focus {
+.project-panel__title:focus {
     background: none;
     box-shadow: none;
     color: var(--fl-linkColor, var(--black));
     outline: none;
 }
 
-.projectPanel__title::after {
+.project-panel__title::after {
     bottom: 0;
     content: "";
     display: block;
@@ -63,21 +63,21 @@ div:has(.projectPanel) {
     top: 0;
 }
 
-.projectPanel__content {
+.project-panel__content {
     background-color: white;
     display: flex;
     flex-direction: column;
-    margin: auto;
+    justify-content: center;
     padding: 1.875rem;
     width: 100%;
 }
 
 @media (width >= 70.875rem) {
-    .projectPanel {
+    .project-panel {
         flex-direction: row;
     }
 
-    .projectPanel__color {
+    .project-panel__color {
         border-right: 0.125rem solid var(--fl-fgColor, var(--color-yellow));
         min-width: 4.625rem;
         min-height: 23.125rem;