From bdf18a5fdf9aafe9d1bc57af6229e2ed0c2d7972 Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Thu, 27 Oct 2022 11:22:17 +0200
Subject: [PATCH] feat: add authors

---
 eleventy.config.js            |  4 ++++
 src/_components/postslist.njk |  2 +-
 src/_layouts/post.njk         |  4 +++-
 src/_pages/blog/exemple.md    |  3 ++-
 src/_pages/blog/exemple_2.md  |  6 ++++--
 src/_pages/blog/exemple_3.md  |  6 ++++--
 src/_pages/index.njk          |  2 +-
 src/assets/css/index.scss     | 20 +++++++++++++++-----
 8 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/eleventy.config.js b/eleventy.config.js
index 4eaaa0e..f73c405 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -80,6 +80,10 @@ module.exports = function(eleventyConfig) {
     return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
   });
 
+  eleventyConfig.addFilter("readableAuthors", (authors) => {
+    return authors ? "par " + (authors || []).join(" & ") : "";
+  });
+
   // Customize Markdown library and settings:
   eleventyConfig.amendLibrary("md", mdLib => {
     mdLib.use(markdownItAnchor, {
diff --git a/src/_components/postslist.njk b/src/_components/postslist.njk
index f3c064a..c74fb1a 100644
--- a/src/_components/postslist.njk
+++ b/src/_components/postslist.njk
@@ -5,7 +5,7 @@
           <a href="{{ post.url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
         </h2>
         <ul class="post-metadata">
-          <li><time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time></li>
+          <li class="post-metadata__header">Le <time datetime="{{ post.data.date | htmlDateString }}">{{ post.data.date | readableDate }}</time> {{ post.data.authors | readableAuthors }}</li>
           {%- for tag in post.data.tags | filterTagList %}
             {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
             <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
diff --git a/src/_layouts/post.njk b/src/_layouts/post.njk
index a8f7bce..38d32e3 100644
--- a/src/_layouts/post.njk
+++ b/src/_layouts/post.njk
@@ -5,7 +5,9 @@ templateClass: tmpl-post
 <h1>{{ title }}</h1>
 
 <ul class="post-metadata">
-  <li><time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time></li>
+  <li class="post-metadata__header">
+    Le <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time> {{ authors | readableAuthors }}
+  </li>
   {%- for tag in tags | filterTagList %}
   {%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
   <li><a href="{{ tagUrl }}" class="post-tag">#{{ tag }}</a>{%- if not loop.last %} {% endif %}</li>
diff --git a/src/_pages/blog/exemple.md b/src/_pages/blog/exemple.md
index e1cabc6..e368351 100644
--- a/src/_pages/blog/exemple.md
+++ b/src/_pages/blog/exemple.md
@@ -7,6 +7,8 @@ tags:
   - ACV
   - EFC
   - écoconception
+authors:
+  - John Doe
 layout: post.njk
 ---
 
@@ -18,7 +20,6 @@ to provide a robust synopsis for high level overviews. Iterative approaches to c
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
 
-![Un chaton](/images/blog/kitty_1.jpeg "Encore un chaton tout mignon 😍")
 
 ## Partie une
 
diff --git a/src/_pages/blog/exemple_2.md b/src/_pages/blog/exemple_2.md
index 5613434..f22fbbe 100644
--- a/src/_pages/blog/exemple_2.md
+++ b/src/_pages/blog/exemple_2.md
@@ -4,8 +4,10 @@ description: Article traitant d'accessibilité et d'écoconception
 resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
 date: 2022-10-15
 tags:
-  - accessibilité
-  - écoconception
+  - cryptographie
+authors:
+  - Alice
+  - Bob
 layout: post.njk
 ---
 
diff --git a/src/_pages/blog/exemple_3.md b/src/_pages/blog/exemple_3.md
index f9c5d37..c6930bb 100644
--- a/src/_pages/blog/exemple_3.md
+++ b/src/_pages/blog/exemple_3.md
@@ -1,10 +1,12 @@
 ---
 title: Troisième exemple d'article
-description: Article traitant d'écoconception
+description: Article traitant d'accessibilité
 resume: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Enim diam vulputate ut pharetra sit amet. Placerat orci nulla pellentesque dignissim. Gravida rutrum quisque non tellus. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Tempor id eu nisl nunc mi. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Eget magna fermentum iaculis eu non diam phasellus. Est lorem ipsum dolor sit amet consectetur adipiscing. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Velit scelerisque in dictum non consectetur a. Lectus sit amet est placerat. Viverra aliquet eget sit amet tellus cras adipiscing enim eu. Ut tristique et egestas quis ipsum suspendisse ultrices. Bibendum est ultricies integer quis auctor elit. Aliquam sem et tortor consequat id porta nibh.
 date: 2022-10-17
 tags:
-  - écoconception
+  - accessibilité
+authors:
+  - John Murdock
 layout: post.njk
 ---
 
diff --git a/src/_pages/index.njk b/src/_pages/index.njk
index 533c007..e87c0df 100644
--- a/src/_pages/index.njk
+++ b/src/_pages/index.njk
@@ -6,7 +6,7 @@ eleventyNavigation:
 ---
 {% set maxPosts = collections.posts.length | min(5) %}
 {#<h1>{% if maxPosts == 1 %}Article{% else %}Derniers articles{% endif %}</h1>#}
-<h1>Blog numérique responsable</h1>
+<h1 class="main-title">Blog numérique responsable</h1>
 <p class="sub-title">par le collectif IT's on us</p>
 {% set postslist = collections.posts | head(-5) %}
 {% set postslistCounter = collections.posts | length %}
diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss
index d0cf81a..26d546d 100644
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -104,6 +104,7 @@ h1 {
   font-style: normal;
   font-size: 3rem;
   font-weight: 700;
+  margin: 3rem 0 2rem;
 }
 
 h2 {
@@ -136,7 +137,11 @@ main {
   padding: 8rem 1rem 4rem 1rem;
 }
 main :first-child {
-  margin: 0;
+  margin-top: 0;
+}
+
+.main-title {
+  margin-bottom: 0;
 }
 
 .sub-title {
@@ -229,7 +234,7 @@ figure figcaption {
   margin-bottom: 5rem;
 }
 .postlist-header h2 {
-  margin-bottom: 0;
+  margin-bottom: .5rem;
 }
 .postlist-link {
   flex-basis: calc(100% - 1.5rem);
@@ -261,14 +266,19 @@ figure figcaption {
   padding: 0;
   margin: 0;
 }
-.post-list time,
-.post-metadata time {
+
+h1 + .post-metadata {
+  margin: 0 0 4rem;
+}
+.post-list time {
   margin-right: 1em;
   font-size: 0.8125rem; /* 13px /16 */
   color: var(--text-color-sub);
 }
-.post-metadata li:first-child {
+.post-metadata .post-metadata__header {
   flex-grow: 1;
+  font-size: 0.8125rem; /* 13px /16 */
+  color: var(--text-color-sub);
 }
 .post-nav ul {
   display: flex;