feat: replace macros with includes (resolves #146) (#147)

inclusive-design · Jan 29, 2025 · f00155d · f00155d
1 parent febf2aa
commit f00155d
Show file tree

Hide file tree

Showing 16 changed files with 181 additions and 94 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -4,9 +4,11 @@ import eleventyNavigationPlugin from "@11ty/eleventy-navigation";
 import brokenLinksPlugin from "eleventy-plugin-broken-links";
 import fluidPlugin from "eleventy-plugin-fluid";
 import footnotesPlugin from "eleventy-plugin-footnotes";
+import _ from "lodash";
 import parse from "./src/_transforms/parse.js";
 
 export default function eleventy(eleventyConfig) {
+    eleventyConfig.addGlobalData("now", () => new Date());
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.addPlugin(RenderPlugin);
     eleventyConfig.addPlugin(footnotesPlugin);
@@ -39,11 +41,23 @@ export default function eleventy(eleventyConfig) {
             return collection.getFilteredByGlob(`src/collections/events/${lang}/*.md`);
         });
 
+        eleventyConfig.addCollection(`resources_${lang}`, (collection) => {
+            return collection.getFilteredByGlob(`src/collections/resources/${lang}/*.md`);
+        });
+
         eleventyConfig.addCollection(`announcements_${lang}`, (collection) => {
-            return collection.getFilteredByGlob(`src/announcements/announcements/${lang}/*.md`);
+            return collection.getFilteredByGlob(`src/collections/announcements/${lang}/*.md`);
+        });
+
+        eleventyConfig.addCollection(`topics_${lang}`, (collection) => {
+            return collection.getFilteredByGlob(`src/collections/topics/${lang}/*.md`);
         });
     });
 
+    eleventyConfig.addFilter("find", function find(collection = [], key = "", value) {
+        return collection.find((post) => _.get(post, key) === value);
+    });
+
     eleventyConfig.addFilter("findTranslation", function find(page, collection = [], lang, desiredLang) {
         const expectedFilePathStem = page.filePathStem.replace(lang, desiredLang);
 

diff --git a/src/_data/translations/en.json b/src/_data/translations/en.json
@@ -18,5 +18,12 @@
   "site-title": "<strong>Inclusive</strong><br />Standards",
   "no-projects": "No projects found.",
   "filters": "Filters",
-  "applied-filters": "Applied Filters"
+  "applied-filters": "Applied Filters",
+  "upcoming": "Upcoming",
+  "blog": "Blog",
+  "video": "Video",
+  "podcast": "Podcast",
+  "guide-or-toolkit": "Guide or toolkit",
+  "document": "Document",
+  "other": "Other"
 }
diff --git a/src/_data/translations/fr.json b/src/_data/translations/fr.json
@@ -18,5 +18,12 @@
   "site-title": "Normes<br /><strong>inclusives</strong>",
   "no-projects": "Aucun projet trouvé.",
   "filters": "Filtres",
-  "applied-filters": "Filtres appliqués"
+  "applied-filters": "Filtres appliqués",
+  "upcoming": "À venir",
+  "blog": "Blogue",
+  "video": "Vidéo",
+  "podcast": "Balado",
+  "guide-or-toolkit": "Guide ou boîte à outils",
+  "document": "Document",
+  "other": "Autre"
 }
diff --git a/src/_includes/layouts/about.njk b/src/_includes/layouts/about.njk
@@ -1,5 +1,4 @@
 {% extends "layouts/base.njk" %}
-{% from "partials/components/card.macro.njk" import card %}
 
 {% block content %}
 {{ content | safe }}
@@ -8,9 +7,8 @@
       <div class="wrapper flow">
         <h2>{% __ 'projects' %}</h2>
         <div class="cards">
-          {% set cardType = "project" %}
-          {% for item in collections['projects_' + lang] %}
-            {{ card({image: item.data.image, title: item.data.title, body: item.data.excerpt, color: item.data.color, url: item.data.permalink }) }}
+          {% for project in collections['projects_' + lang] %}
+            {% include "partials/components/card--project.njk" %}
           {% endfor %}
         </div>
         </div>

diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -1,5 +1,4 @@
 {% extends "layouts/base.njk" %}
-{% from "partials/components/card.macro.njk" import card %}
 
 {% block banner %}
     <h1>{% __ 'site-title' %}</h1>
@@ -14,10 +13,9 @@
       <div class="wrapper flow">
         <h2>{% __ 'projects' %}</h2>
         <div class="cards">
-          {% set cardType = "project" %}
-          {% for item in collections['projects_' + lang] %}
-            {{ card({image: item.data.image, title: item.data.title, body: item.data.excerpt, color: item.data.color, url: item.data.permalink }) }}
-          {% endfor %}
+        {% for project in collections['projects_' + lang] %}
+          {% include "partials/components/card--project.njk" %}
+        {% endfor %}
         </div>
       </div>
     </section>
@@ -27,10 +25,9 @@
       <div class="wrapper flow">
         <h2>{% __ 'events' %}</h2>
         <div class="cards">
-          {% set cardType = "event" %}
-          {% for item in collections['events_' + lang] %}
-            {{ card({image: item.data.image, title: item.data.title, body: item.data.excerpt, url: item.data.permalink }) }}
-          {% endfor %}
+        {% for event in collections['events_' + lang] %}
+          {% include "partials/components/card--event.njk" %}
+        {% endfor %}
         </div>
       </div>
     </section>
@@ -40,9 +37,8 @@
       <div class="wrapper flow">
         <h2>{% __ 'resources' %}</h2>
         <div class="cards">
-          {% set cardType = "resource" %}
-          {% for item in collections['resources_' + lang] %}
-            {{ card({image: item.data.image, title: item.data.title, body: item.data.excerpt, url: item.data.permalink }) }}
+          {% for resource in collections['resources_' + lang] %}
+              {% include "partials/components/card--resource.njk" %}
           {% endfor %}
         </div>
       </div>
@@ -53,9 +49,8 @@
       <div class="wrapper flow">
         <h2>{% __ 'announcements' %}</h2>
         <div class="cards">
-          {% set cardType = "news" %}
-          {% for item in collections['announcements_' + lang] %}
-            {{ card({image: item.data.image, title: item.data.title, body: item.data.excerpt, url: item.data.permalink }) }}
+          {% for announcement in collections['announcements_' + lang] %}
+              {% include "partials/components/card--announcement.njk" %}
           {% endfor %}
         </div>
       </div>

diff --git a/src/_includes/layouts/projects.njk b/src/_includes/layouts/projects.njk
@@ -1,11 +1,10 @@
 {% extends "layouts/base.njk" %}
-{% from "partials/components/projectPanel.macro.njk" import projectPanel %}
 
 {% block content %}
     {% if collections['projects_' + lang].length > 0 %}
     <section>
-        {% for item in collections['projects_' + lang] %}
-            {{ projectPanel({image: item.data.previewImage, title: item.data.title, body: item.data.excerpt, color: item.data.color, url: item.data.permalink}) }}
+        {% for project in collections['projects_' + lang] %}
+            {% include "partials/components/project-panel.njk" %}
         {% endfor %}
     </section>
     {% else %}

diff --git a/src/_includes/partials/components/card--announcement.njk b/src/_includes/partials/components/card--announcement.njk
@@ -0,0 +1,28 @@
+<div class="card card--announcement bg-green">
+    {% if announcement.data.previewImage %}
+    <div class="card__image">
+        <img src="{{ announcement.data.previewImage }}" alt="{{ announcement.data.previewImageAlt }}" />
+    </div>
+    {% endif %}
+    <div class="card__content">
+        <h3>
+            <a class="card__title" href="{{ announcement.url }}">
+                {{ announcement.data.title | safe }}
+            </a>
+        </h3>
+        <div class="card__announcement-date">
+            {{ announcement.data.date | formatDate }}
+        </div>
+        <div class="card__body">
+            <p>{{ announcement.data.excerpt | safe }}</p>
+        </div>
+        {% if announcement.data.topics.length > 0 %}
+        <div class="card__tags tags">
+            {% for topicId in announcement.data.topics %}
+            {% set topic = collections['topics_' + lang] | find("data.uuid", topicId) %}
+            <div class="tag">{{ topic.data.title }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+    </div>
+</div>
diff --git a/src/_includes/partials/components/card--event.njk b/src/_includes/partials/components/card--event.njk
@@ -0,0 +1,25 @@
+<div class="card bg-yellow">
+        {% if event.data.previewImage %}
+            <div class="card__image">
+                <img src="{{ event.data.previewImage }}" alt="{{ event.data.previewImageAlt }}" />
+            </div>
+        {% endif %}
+        <div class="card__content">
+            <h3>
+                <a class="card__title" href="{{ event.url }}">
+                    {{ event.data.title | safe }}
+                </a>
+            </h3>
+            {% if now < event.data.date %}
+            <div class="card__event-status">
+                <div class="badge">{% __ 'upcoming' %}</div>
+            </div>
+            {% endif %}
+            <div class="card__date">
+                <p>{{ event.data.date | formatDate }}</p>
+            </div>
+            <div class="card__body">
+                <p>{{ event.data.excerpt | safe }}</p>
+            </div>
+        </div>
+</div>
diff --git a/src/_includes/partials/components/card--project.njk b/src/_includes/partials/components/card--project.njk
@@ -0,0 +1,17 @@
+<div class="card bg-{{ project.data.color }}">
+    {% if project.data.previewImage %}
+        <div class="card__image">
+            <img src="{{ project.data.previewImage }}" alt="{{ project.data.previewImageAlt }}" />
+        </div>
+    {% endif %}
+    <div class="card__content">
+        <h3>
+            <a class="card__title" href="{{ project.url }}">
+                {{ project.data.title | safe }}
+            </a>
+        </h3>
+        <div class="card__body">
+            <p>{{ project.data.excerpt | safe }}</p>
+        </div>
+    </div>
+</div>
diff --git a/src/_includes/partials/components/card--resource.njk b/src/_includes/partials/components/card--resource.njk
@@ -0,0 +1,29 @@
+<div class="card">
+    <div class="card__content">
+        <h3>
+            <a class="card__title" href="{{ resource.url }}">
+                {{ resource.data.title | safe }}
+            </a>
+        </h3>
+        <div class="card__publisher">
+            <p>{{ resource.data.author }}{% if resource.data.author and resource.data.publisher %} | {% endif %}{{ resource.data.publisher }}</p>
+        </div>
+        <div class="card__body">
+            <p>{{ resource.templateContent | safe }}</p>
+        </div>
+        <div class="card__resource-type">
+            {% include "svg/type.svg" %} {% __ resource.data.type %}
+        </div>
+        <div class="card__resource-date">
+            {% include "svg/date.svg" %} {{ resource.data.date | formatDate }}
+        </div>
+        {% if resource.data.topics.length > 0 %}
+        <div class="card__tags tags">
+            {% for topicId in resource.data.topics %}
+            {% set topic = collections['topics_' + lang] | find("data.uuid", topicId) %}
+            <div class="tag">{{ topic.data.title }}</div>
+            {% endfor %}
+        </div>
+        {% endif %}
+    </div>
+</div>
diff --git a/src/_includes/partials/components/card.macro.njk b/src/_includes/partials/components/card.macro.njk
diff --git a/src/_includes/partials/components/project-panel.njk b/src/_includes/partials/components/project-panel.njk
@@ -0,0 +1,17 @@
+<div class="project-panel bg-{{ project.data.color }}">
+    {% if project.data.previewImage %}
+        <div class="project-panel__image">
+            <img src="{{ project.data.previewImage }}" alt="{{ project.data.previewImageAlt }}" />
+        </div>
+    {% endif %}
+    <div class="project-panel__content flow">
+        <h2>
+            <a class="project-panel__title" href="{{ project.url }}">
+                {{ project.data.title | safe }}
+            </a>
+        </h2>
+        <div class="project-panel__body">
+            <p>{{ project.data.excerpt | safe }}</p>
+        </div>
+    </div>
+</div>
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk
diff --git a/src/admin/config.yml b/src/admin/config.yml
@@ -161,7 +161,7 @@ collections:
         name: excerpt
         widget: text
         i18n: true
-        required: false
+        required: true
       - label: Date
         name: date
         widget: datetime
@@ -302,7 +302,7 @@ collections:
         name: title
         widget: string
         i18n: true
-      - label: Excerpt,
+      - label: Excerpt
         name: excerpt
         widget: text
         i18n: true
@@ -331,6 +331,7 @@ collections:
         search_fields: [title]
         display_fields: [title]
         required: false
+        multiple: true
         i18n: duplicate
       - label: Body
         name: body
@@ -383,7 +384,7 @@ collections:
     icon: sell
     i18n: true
     folder: src/collections/topics
-    extension: yml
+    extension: md
     create: true
     fields:
       - label: Title