feat: add event card partial

Signed-off-by: Ned Zimmerman <ned@bight.dev>
inclusive-design · Jan 27, 2025 · af1ed57 · af1ed57
1 parent 38b46ed
commit af1ed57
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 16 deletions.
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -7,6 +7,7 @@ import footnotesPlugin from "eleventy-plugin-footnotes";
 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);

diff --git a/src/_data/translations/en.json b/src/_data/translations/en.json
@@ -18,5 +18,6 @@
   "site-title": "<strong>Inclusive</strong><br />Standards",
   "no-projects": "No projects found.",
   "filters": "Filters",
-  "applied-filters": "Applied Filters"
+  "applied-filters": "Applied Filters",
+  "upcoming": "Upcoming"
 }
diff --git a/src/_data/translations/fr.json b/src/_data/translations/fr.json
@@ -18,5 +18,6 @@
   "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"
 }
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk
@@ -14,9 +14,9 @@
       <div class="wrapper flow">
         <h2>{% __ 'projects' %}</h2>
         <div class="cards">
-          {% for project in collections['projects_' + lang] %}
-            {% include "partials/components/card--project.njk" %}
-          {% endfor %}
+        {% for project in collections['projects_' + lang] %}
+          {% include "partials/components/card--project.njk" %}
+        {% endfor %}
         </div>
       </div>
     </section>
@@ -26,10 +26,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>

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.macro.njk b/src/_includes/partials/components/card.macro.njk
@@ -11,13 +11,7 @@
                 {{ params.title | safe }}
             </a>
         </h3>
-        {% if cardType === "event" %}
-            <div class="card__event-status">
-                {% include 'svg/eventTag.svg' %}
-                <p>{{ params.eventStatus | safe }}</p>
-            </div>
-        {% endif %}
-        {% if cardType === "event" or cardType === "news" %}
+        {% if cardType === "news" %}
             <div class="card__date">
                 <p>{{ params.date }}</p>
             </div>