inclusive-design · greatislander · Jan 14, 2025 · Jan 8, 2025 · Jan 8, 2025 · Jan 8, 2025
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -29,6 +29,10 @@ export default function eleventy(eleventyConfig) {
         eleventyConfig.addCollection(`pages_${lang}`, (collection) => {
             return collection.getFilteredByGlob(`src/collections/pages/${lang}/*.md`);
         });
+
+        eleventyConfig.addCollection(`projects_${lang}`, (collection) => {
+            return collection.getFilteredByGlob(`src/collections/projects/${lang}/*.md`);
+        });
     });
 
     eleventyConfig.addFilter("findTranslation", function find(page, collection = [], lang, desiredLang) {

diff --git a/src/_data/translations.json b/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/' rel='external'>Inclusive Design Research Centre</a> Project",
         "header-intro-short": "<a href='https://idrc.ocadu.ca/' rel='external'>An IDRC Project</a>",
+        "projects": "Projects",
+        "resources": "Resources",
         "social-media": "Social Media",
         "main-menu": "Main Menu",
         "menu": "menu"
     },
     "fr": {
+        "announcements": "Annonces",
         "contact-us": "Contactez-nous",
         "contact-us-address": "Adresse",
         "contact-us-email": "Courriel",
         "contact-us-phone": "Téléphone",
+        "events": "Événements",
         "header-intro": "Un projet <a href='https://idrc.ocadu.ca/' rel='external'>Inclusive Design Research Centre</a>",
         "header-intro-short": "<a href='https://idrc.ocadu.ca/' rel='external'>Un project IDRC</a>",
+        "projects": "Projets",
+        "resources": "Ressources",
         "social-media": "Les médias sociaux",
         "main-menu": "Menu Principal",
         "menu": "menu"

diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
@@ -4,14 +4,12 @@
 {% block content %}
 {{ content | safe }}
 {% if collections['projects_' + lang] %}
-    <section class="display">
-      <div class="display__title">
-        <h2>Projects</h2>
-      </div>
+    <section class="display flow">
+      <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">

diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk
@@ -10,10 +10,10 @@
 <body>
   {% include "partials/global/header.njk" %}
   {% include "partials/components/navigation.njk" %}
-  <main>
+  <main {% if page.fileSlug == "about" %}class="sectioned"{% endif %}>
     {% if hasBanner %}
     <div class="banner bg-{{ bannerBgColor }}">
-      <div class="banner__text">
+      <div class="banner__text flow">
         <h1>{{ bannerTitle | renderContent('md') | safe }}</h1>
         {{ bannerBody | renderContent('md') | safe }}
       </div>

diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -3,59 +3,51 @@
 
 {% block content %}
 {% if collections['projects_' + lang] %}
-    <section class="display">
-      <div class="display__title">
-        <h2>Projects</h2>
-      </div>
+    <section class="display flow">
+      <h2 class="display__title">{% __ 'projects' %}</h2>
       <div class="display__items">
         {% set cardType = "project" %}
         {% for item in collections['projects_' + lang] %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
       </div>
     </section>
     {% endif %}
     {% if collections.events %}
-    <section class="display">
-      <div class="display__title">
-        <h2>Events</h2>
-      </div>
+    <section class="display flow">
+      <h2 class="display__title>{% __ 'events' %}</h2>
       <div class="display__items">
         {% set cardType = "event" %}
         {% for item in collections.events %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
       </div>
     </section>
     {% endif %}
     {% if collections.resources %}
-    <section class="display">
-      <div class="display__title">
-        <h2>Resources</h2>
-      </div>
+    <section class="display flow">
+      <h2 class="display__title>{% __ 'resources' %}</h2>
       <div class="display__items">
         {% set cardType = "resource" %}
         {% for item in collections.resources %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">
       </div>
     </section>
     {% endif %}
     {% if collections.news %}
-    <section class="display">
-      <div class="display__title">
-        <h2>Announcements</h2>
-      </div>
+    <section class="display flow">
+      <h2 class="display__title>{% __ 'announcements' %}</h2>
       <div class="display__items">
         {% set cardType = "news" %}
         {% for item in collections.news %}
-          {{ card({image: item.data.image, title: item.data.title, body: item.data.body }) }}
+          {{ card({image: item.data.image, title: item.data.title, body: item.data.desc, url: item.data.permalink }) }}
         {% endfor %}
       </div>
       <div class="display__link">

diff --git a/src/_includes/layouts/project.njk b/src/_includes/layouts/project.njk
@@ -0,0 +1,27 @@
+{% extends "layouts/base.njk" %}
+
+{% block content %}
+<div class="project__container">
+    <div class="project__banner">
+        <div class="project__banner__color bg-{{ projectColor }}"></div>
+        <div class="project__banner__header">
+            <a href="{% if lang === "en" %}/projects{% else %}/{{lang }}/{% __ 'projects' %}{% endif %}" >{% __ 'projects' %} {% include 'svg/arrowRight.svg' %}</a>
+            <h1 class="project__banner__title">
+                {{ title }}
+            </h1>
+        </div>
+        {% if image %}
+            <div class="project__image">
+                {{ image }}
+            </div>
+        {% endif %}
+    </div>
+    <div class="project__content">
+        <div class="project__nav">
+        </div>
+        <article class="flow">
+        {{ content | safe }}
+        </article>
+    </div>
+</div>
+{% endblock %}
diff --git a/src/_includes/layouts/projects.njk b/src/_includes/layouts/projects.njk
@@ -1,20 +1,12 @@
 {% extends "layouts/base.njk" %}
+{% from "partials/components/projectPanel.macro.njk" import projectPanel %}
 
 {% block content %}
 <div>
-    <div class="card">
-        <h2 class="card__heading">All Standards With Us</h2>
-        <p>
-            Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-    Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-        </p>
-    </div>
-    <div class="card">
-        <h2 class="card__heading">Review of the Review</h2>
-        <p>
-            Lorem ipsum dolor sit amet. Ea galisum quisquam aut galisum aperiam eum dolores consequuntur et fugit rerum ut necessitatibus eligendi aut corrupti nisi quo voluptatum impedit. Nam dolor delectus non sapiente vero sit sint esse cum libero provident est Quis voluptatem non ipsa ullam vel iure autem.
-            Quo facilis reprehenderit in atque deleniti qui facilis vitae sit officia galisum. Quo laboriosam consequatur sed fugit voluptas id quibusdam galisum sit explicabo modi sit mollitia placeat hic laboriosam omnis.
-        </p>
-    </div>
+    {% if collections['projects_' + lang] %}
+        {% for item in collections['projects_' + lang] %}
+            {{ projectPanel({image: item.data.image, title: item.data.title, body: item.data.desc, color: item.data.projectColor, url: item.data.permalink}) }}
+        {% endfor %}
+    {% endif %}
 </div>
 {% endblock %}
diff --git a/src/_includes/partials/components/card.macro.njk b/src/_includes/partials/components/card.macro.njk
@@ -1,14 +1,12 @@
 {%- macro card(params) -%}
-<div class="card">
+<div class="card {% if params.color %}bg-{{ params.color }}{% endif %}">
     {% if params.image %}
         <div class="card__image">
             {{ params.image }}
         </div>
     {% endif %}
     <div class="card__content">
-        <div class="card__title">
-            <h4>{{ params.title | safe }}</h4>
-        </div>
+        <a class="card__title" href="{{ params.url }}">{{ params.title | safe }}</a>
         {% if cardType === "event" %}
             <div class="card__event-status">
                 {% include 'svg/eventTag.svg' %}
@@ -26,7 +24,7 @@
             </div>
         {% endif %}
         <div class="card__body">
-            <p>{{ params.body | renderContent("md") }}</p>
+            <p>{{ params.body | safe }}</p>
         </div>
         {% if cardType === "resource" %}
             <div class="card__resource-type">

diff --git a/src/_includes/partials/components/navigation.njk b/src/_includes/partials/components/navigation.njk
@@ -1,6 +1,6 @@
 <nav class="navigation">
     <div class="navigation__link">
-        <a class="navigation__home" href="/">{{ "<b>Inclusive</b><br>Standards" | safe }}</a>
+        <a class="navigation__home" href="/{% if lang != 'en' %}{{ lang }}{% endif %}">{{ "<b>Inclusive</b><br>Standards" | safe }}</a>
         {% set navItems = collections['pages_' + lang] | eleventyNavigation %}
 
         <button class="navigation__toggle" id="navigation-toggle" aria-expanded="false">{% __ 'menu' %} {% include 'svg/menu.svg' %}</button>

diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
@@ -0,0 +1,17 @@
+{%- macro projectPanel(params) -%}
+<div class="project-panel bg-{{ params.color }}">
+    {% if params.image %}
+        <div class="project-panel__image">
+            {{ params.image }}
+        </div>
+    {% endif %}
+    <div class="project-panel__content flow">
+        <a class="project-panel__title" href="{{ params.url }}">
+            {{ params.title | safe }}
+        </a>
+        <div class="project-panel__body">
+            <p>{{ params.body | safe }}</p>
+        </div>
+    </div>
+</div>
+{% endmacro %}
diff --git a/src/_includes/partials/global/footer.njk b/src/_includes/partials/global/footer.njk
@@ -8,7 +8,7 @@
             <div class="footer__section">
                 <hr>
                 <div class="footer__social-media">
-                    <nav aria-labelledby="social">
+                    <nav aria-labelledby="social" class="flow">
                         <h2 id="social">{% __ 'social-media' %}</h2>
                         <ul role="list">
                             <li><a href="{{ social.facebook }}" rel="external">{% include "svg/facebook.svg" %} Facebook</a></li>
@@ -22,7 +22,7 @@
             </div>
             <div class="footer__section">
                 <hr>
-                <div class="footer__contact-us">
+                <div class="footer__contact-us flow">
                     <h2>{% __ 'contact-us' %}</h2>
                     <div class="footer__contact-us-item">
                         <div class="footer__contact-us-item-title">

diff --git a/src/_includes/svg/arrowRight.svg b/src/_includes/svg/arrowRight.svg
diff --git a/src/_transforms/parse.js b/src/_transforms/parse.js
@@ -4,12 +4,12 @@ export default (value, outputPath) => {
     if (outputPath && outputPath.includes(".html")) {
         const { document } = parseHTML(value);
 
-        const sectionHeadings = document.querySelectorAll("main h2:not([class])");
+        const sectionHeadings = document.querySelectorAll("main.sectioned h2:not([class])");
         if (sectionHeadings.length > 0) {
             for (const heading of sectionHeadings) {
                 const getContent = (elem) => {
                     let elems = [];
-                    while (elem.nextElementSibling && elem.nextElementSibling.tagName !== "H2") {
+                    while (elem.nextElementSibling && elem.nextElementSibling.tagName !== "H2" && elem.nextElementSibling.tagName !== "SECTION") {
                         elems.push(elem.nextElementSibling);
                         elem = elem.nextElementSibling;
                     }
@@ -22,6 +22,7 @@ export default (value, outputPath) => {
                 };
                 let contents = getContent(heading);
                 let section = document.createElement("section");
+                section.className = "flow";
                 contents.forEach((node) => {
                     section.appendChild(node);
                 });

diff --git a/src/admin/config.yml b/src/admin/config.yml
@@ -51,6 +51,33 @@ collections:
           required: false,
         }
       - { label: Body, name: body, widget: markdown, i18n: true }
+  - label: Projects
+    label_singular: Project
+    name: projects
+    icon: inventory
+    i18n:
+      structure: multiple_folders
+    folder: src/collections/projects/
+    extension: md
+    create: true
+    fields:
+      - { label: Title, name: title, widget: string, i18n: true }
+      - label: "Project Colour"
+        name: projectColor
+        widget: select
+        options:
+          - label: Yellow
+            value: yellow
+        i18n: copy
+        required: false
+      - {
+          label: "Description",
+          name: desc,
+          widget: string,
+          i18n: true,
+          required: true,
+        }
+      - { label: Body, name: body, widget: markdown, i18n: true }
   - label: Metadata
     name: metadata
     files:

diff --git a/src/assets/styles/abstracts/_variables.css b/src/assets/styles/abstracts/_variables.css
@@ -23,6 +23,9 @@
     --color-orange: hsla(25, 76%, 64%, 1);
     --color-red: hsla(359, 64%, 63%, 1);
     --color-dark-grey: hsl(0, 0%, 12%, 1);
+
+    --shadow-light: hsla(244, 93%, 22%, 0.15);
+    --shadow-dark: hsla(244, 93%, 22%, 0.45);
 
     --color-indigo-100: hsla(244, 100%, 98%, 1);
     --color-indigo-200: hsla(244, 93%, 93%, 1);

diff --git a/src/assets/styles/app.css b/src/assets/styles/app.css
@@ -16,3 +16,4 @@
 /* Components */
 @import "./components/card.css";
 @import "./components/navigation.css";
+@import "./components/project-panel.css";