From f00155df6888a9ced06b7de551b7d5859e3f2ecc Mon Sep 17 00:00:00 2001 From: Ned Zimmerman Date: Wed, 29 Jan 2025 15:25:28 -0400 Subject: [PATCH] feat: replace macros with includes (resolves #146) (#147) --- eleventy.config.js | 16 ++++++- src/_data/translations/en.json | 9 +++- src/_data/translations/fr.json | 9 +++- src/_includes/layouts/about.njk | 6 +-- src/_includes/layouts/home.njk | 25 +++++------ src/_includes/layouts/projects.njk | 5 +-- .../components/card--announcement.njk | 28 ++++++++++++ .../partials/components/card--event.njk | 25 +++++++++++ .../partials/components/card--project.njk | 17 +++++++ .../partials/components/card--resource.njk | 29 ++++++++++++ .../partials/components/card.macro.njk | 45 ------------------- .../partials/components/project-panel.njk | 17 +++++++ .../components/projectPanel.macro.njk | 19 -------- src/admin/config.yml | 7 +-- src/assets/styles/components/_card.css | 17 ++++++- src/collections/topics/topics.11tydata.js | 1 - 16 files changed, 181 insertions(+), 94 deletions(-) create mode 100644 src/_includes/partials/components/card--announcement.njk create mode 100644 src/_includes/partials/components/card--event.njk create mode 100644 src/_includes/partials/components/card--project.njk create mode 100644 src/_includes/partials/components/card--resource.njk delete mode 100644 src/_includes/partials/components/card.macro.njk create mode 100644 src/_includes/partials/components/project-panel.njk delete mode 100644 src/_includes/partials/components/projectPanel.macro.njk diff --git a/eleventy.config.js b/eleventy.config.js index ff9484a..c502f4a 100644 --- 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 index b44b173..4b25aa8 100644 --- a/src/_data/translations/en.json +++ b/src/_data/translations/en.json @@ -18,5 +18,12 @@ "site-title": "Inclusive
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 index 2eea615..49e3f0b 100644 --- a/src/_data/translations/fr.json +++ b/src/_data/translations/fr.json @@ -18,5 +18,12 @@ "site-title": "Normes
inclusives", "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 index 13238ba..465da86 100644 --- 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 @@

{% __ 'projects' %}

- {% 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 %}
diff --git a/src/_includes/layouts/home.njk b/src/_includes/layouts/home.njk index 0cf6500..df2d84a 100644 --- 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 %}

{% __ 'site-title' %}

@@ -14,10 +13,9 @@

{% __ 'projects' %}

- {% 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 %}
@@ -27,10 +25,9 @@

{% __ 'events' %}

- {% 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 %}
@@ -40,9 +37,8 @@

{% __ 'resources' %}

- {% 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 %}
@@ -53,9 +49,8 @@

{% __ 'announcements' %}

- {% 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 %}
diff --git a/src/_includes/layouts/projects.njk b/src/_includes/layouts/projects.njk index f1c2321..b4135b2 100644 --- 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 %}
- {% 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 %}
{% else %} diff --git a/src/_includes/partials/components/card--announcement.njk b/src/_includes/partials/components/card--announcement.njk new file mode 100644 index 0000000..ecec515 --- /dev/null +++ b/src/_includes/partials/components/card--announcement.njk @@ -0,0 +1,28 @@ +
+ {% if announcement.data.previewImage %} +
+ {{ announcement.data.previewImageAlt }} +
+ {% endif %} +
+

+ + {{ announcement.data.title | safe }} + +

+
+ {{ announcement.data.date | formatDate }} +
+
+

{{ announcement.data.excerpt | safe }}

+
+ {% if announcement.data.topics.length > 0 %} +
+ {% for topicId in announcement.data.topics %} + {% set topic = collections['topics_' + lang] | find("data.uuid", topicId) %} +
{{ topic.data.title }}
+ {% endfor %} +
+ {% endif %} +
+
diff --git a/src/_includes/partials/components/card--event.njk b/src/_includes/partials/components/card--event.njk new file mode 100644 index 0000000..df99bd1 --- /dev/null +++ b/src/_includes/partials/components/card--event.njk @@ -0,0 +1,25 @@ +
+ {% if event.data.previewImage %} +
+ {{ event.data.previewImageAlt }} +
+ {% endif %} +
+

+ + {{ event.data.title | safe }} + +

+ {% if now < event.data.date %} +
+
{% __ 'upcoming' %}
+
+ {% endif %} +
+

{{ event.data.date | formatDate }}

+
+
+

{{ event.data.excerpt | safe }}

+
+
+
diff --git a/src/_includes/partials/components/card--project.njk b/src/_includes/partials/components/card--project.njk new file mode 100644 index 0000000..643b5dc --- /dev/null +++ b/src/_includes/partials/components/card--project.njk @@ -0,0 +1,17 @@ +
+ {% if project.data.previewImage %} +
+ {{ project.data.previewImageAlt }} +
+ {% endif %} +
+

+ + {{ project.data.title | safe }} + +

+
+

{{ project.data.excerpt | safe }}

+
+
+
diff --git a/src/_includes/partials/components/card--resource.njk b/src/_includes/partials/components/card--resource.njk new file mode 100644 index 0000000..a3b4af5 --- /dev/null +++ b/src/_includes/partials/components/card--resource.njk @@ -0,0 +1,29 @@ +
+
+

+ + {{ resource.data.title | safe }} + +

+
+

{{ resource.data.author }}{% if resource.data.author and resource.data.publisher %} | {% endif %}{{ resource.data.publisher }}

+
+
+

{{ resource.templateContent | safe }}

+
+
+ {% include "svg/type.svg" %} {% __ resource.data.type %} +
+
+ {% include "svg/date.svg" %} {{ resource.data.date | formatDate }} +
+ {% if resource.data.topics.length > 0 %} +
+ {% for topicId in resource.data.topics %} + {% set topic = collections['topics_' + lang] | find("data.uuid", topicId) %} +
{{ topic.data.title }}
+ {% endfor %} +
+ {% endif %} +
+
diff --git a/src/_includes/partials/components/card.macro.njk b/src/_includes/partials/components/card.macro.njk deleted file mode 100644 index c9b88b5..0000000 --- a/src/_includes/partials/components/card.macro.njk +++ /dev/null @@ -1,45 +0,0 @@ -{%- macro card(params) -%} -
- {% if params.image %} -
- {{ params.image }} -
- {% endif %} -
-

- - {{ params.title | safe }} - -

- {% if cardType === "event" %} -
- {% include 'svg/eventTag.svg' %} -

{{ params.eventStatus | safe }}

-
- {% endif %} - {% if cardType === "event" or cardType === "news" %} -
-

{{ params.date }}

-
- {% endif %} - {% if cardType === "resource" %} -
-

{{ params.publisher }}

-
- {% endif %} -
-

{{ params.body | safe }}

-
- {% if cardType === "resource" %} -
- {{ params.resourceType }} -
- {% endif %} - {% if cardType === "resource" or cardType === "news" %} -
- {{ params.tag }} -
- {% endif %} -
-
-{% endmacro %} diff --git a/src/_includes/partials/components/project-panel.njk b/src/_includes/partials/components/project-panel.njk new file mode 100644 index 0000000..97e2ce7 --- /dev/null +++ b/src/_includes/partials/components/project-panel.njk @@ -0,0 +1,17 @@ +
+ {% if project.data.previewImage %} +
+ {{ project.data.previewImageAlt }} +
+ {% endif %} +
+

+ + {{ project.data.title | safe }} + +

+
+

{{ project.data.excerpt | safe }}

+
+
+
diff --git a/src/_includes/partials/components/projectPanel.macro.njk b/src/_includes/partials/components/projectPanel.macro.njk deleted file mode 100644 index 674641b..0000000 --- a/src/_includes/partials/components/projectPanel.macro.njk +++ /dev/null @@ -1,19 +0,0 @@ -{%- macro projectPanel(params) -%} -
- {% if params.image %} -
- {{ params.image }} -
- {% endif %} -
-

- - {{ params.title | safe }} - -

-
-

{{ params.body | safe }}

-
-
-
-{% endmacro %} diff --git a/src/admin/config.yml b/src/admin/config.yml index ad94bf4..0f5fde3 100644 --- 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 diff --git a/src/assets/styles/components/_card.css b/src/assets/styles/components/_card.css index fa2a013..271db81 100644 --- a/src/assets/styles/components/_card.css +++ b/src/assets/styles/components/_card.css @@ -5,10 +5,14 @@ box-shadow: 0 0.625rem 1.25rem 0 var(--shadow-light), inset 0 0 0 0.1875rem var(--fl-fgColor, transparent); - padding-top: 2.5rem; + padding-block-start: 2.5rem; position: relative; } +.card.card--announcement { + padding-block-start: 0.375rem; +} + .card:has(a:focus) { border: 0.1875rem solid var(--fl-fgColor, transparent); box-shadow: 0 0.625rem 1.25rem 0 var(--shadow-light); @@ -99,6 +103,17 @@ border-left: 0.05rem solid var(--fl-fgColor, var(--color-yellow)); } +.card svg { + stroke: currentColor; +} + +.card *:has(> svg) { + align-items: center; + display: flex; + gap: 0.75rem; + width: 100%; +} + @media (width >= 24.25rem) { .cards { margin-inline: auto; diff --git a/src/collections/topics/topics.11tydata.js b/src/collections/topics/topics.11tydata.js index cc39455..e47b6a9 100644 --- a/src/collections/topics/topics.11tydata.js +++ b/src/collections/topics/topics.11tydata.js @@ -1,4 +1,3 @@ export default { - eleventyExcludeFromCollections: true, permalink: false };