Posts list pages and post page

.eleventy.js

@@ -41,28 +41,32 @@ module.exports = function(config) {
 
   // Custom collections
   const livePosts = post => post.date <= now && !post.data.draft;
+  const newsPosts = post => post.data.type === 'news';
+  const eventPosts = post => post.data.type === 'event';
+  
   config.addCollection('posts', collection => {
     return [
-      ...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)
+      ...collection.getFilteredByGlob('./src/posts/*.md')
     ].reverse();
   });
-
+  config.addCollection('news', collection => {
-  config.addCollection('postFeed', collection => {
+    return [
-    return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
+      ...collection.getFilteredByGlob('./src/posts/*.md').filter(newsPosts)
-      .reverse()
+    ].reverse();
-      .slice(0, site.maxPostsPerPage);
+  });
+  config.addCollection('events', collection => {
+    return [
+      ...collection.getFilteredByGlob('./src/posts/*.md').filter(eventPosts)
+    ].reverse();
   });
   config.addCollection('newsFeed', collection => {
     return [...collection.getFilteredByGlob('./src/posts/*.md').filter(livePosts)]
       .reverse()
       .slice(0, site.maxNewsPerPage);
   });
-
-  // const teamMembers = member;
   config.addCollection('members', collection => {
     return [...collection.getFilteredByGlob("./src/members/*.md")];
   });
-
   config.addCollection('profiles', collection => {
     return [...collection.getFilteredByGlob("./src/members/*.md")]
     .slice(0, site.maxProfilePreview);

src/_data/navigation.json

@@ -1,23 +1,23 @@
 {
   "items": [
+    {
+      "text": "Actualité",
+      "url": "/posts/",
+      "external": false
+    },
     {
       "text": "Comprendre la CAE",
-      "url": "/comprendre-la-cae",
+      "url": "/comprendre-la-cae/",
       "external": false
     },
     {
       "text": "Nous rejoindre",
-      "url": "/nous-rejoindre",
+      "url": "/nous-rejoindre/",
       "external": false
     },
     {
       "text": "L'équipe",
-      "url": "/equipe",
+      "url": "/equipe/",
-      "external": false
-    },
-    {
-      "text": "Actualité",
-      "url": "/actualite",
       "external": false
     },
     {

src/_includes/layouts/home.njk

@@ -7,7 +7,7 @@
 {% block content %}
   <main id="main-content" class="home" tabindex="-1">
     {% include "partials/components/intro.njk" %}
-    {% include "partials/components/news-list.njk" %}
+    {% include "partials/components/posts-list-home.njk" %}
     {% include "partials/components/post-list.njk" %}
     {% include "partials/components/presentation.njk" %}
     {% include "partials/components/sponsor.njk" %}

src/_includes/layouts/post.njk

@@ -1,47 +1,17 @@
 {% extends 'layouts/base.njk' %}
 
-{# Intro content #}
-{% set introHeading = title %}
-{% set introSummary %}
-<p class="[ intro__meta ] [ text-500 leading-tight ]">
-  {% if date %}
-    <time datetime="{{ date | w3DateFilter }}" class="dt-published">{{ date | dateFilter }}</time>
-  {% endif %}
-  <span>— {{ helpers.getReadingTime(content) }} minute read</span>
-</p>
-{% endset %}
-
 {% block content %}
   <main id="main-content" tabindex="-1">
-    <article class="[ post ] [ h-entry ]">
+    <article class="[ post wrapper ]">
-      {% include "partials/components/intro.njk" %}
+      <div class="[ post__body ]">
-      <div class="[ post__body ] [ inner-wrapper ] [ leading-loose pad-top-900 {{ 'pad-bottom-900' if not site.enableThirdPartyComments }} text-500 ] [ sf-flow ] [ e-content ]">
+        <h1>{{ title }}</h1>
+        {% if illustration %}
+        <img class="post-pic" src="{{ illustration }}" alt="illustration de l'article">
+        {% endif %}
         {{ content | safe }}
+        <a class="return-link" href="/posts">Voir toute l'actualité</a>
       </div>
-      {% if site.enableThirdPartyComments %}
-        <hr />
-        <aside class="[ post__body ] [ inner-wrapper ] [ pad-bottom-900 text-500 ]">
-          {% include "partials/global/third-party-comments.njk" %}
-        </aside>
-      {% endif %}
-      {% if tags %}
-        <footer class="[ post__footer ] [ pad-top-500 pad-bottom-500 ]">
-          <div class="inner-wrapper">
-            <div class="[ nav ] [ box-flex align-center ]">
-              <h2 class="font-base text-600 weight-mid">Filed under</h2>
-              <ul class="[ nav__list ] [ box-flex align-center pad-left-400 ] [ p-category ]">
-                {% for item in tags %}
-                  <li class="nav__item">
-                    <a href="/tags/{{ item }}">{{ item }}</a>
-                  </li>
-                {% endfor %}
-              </ul>
-            </div>
-          </div>
-        </footer>
-      {% endif %}
     </article>
+    {% include "partials/components/contact-form.njk" %}
   </main>
 {% endblock %}
-
-{{ content | safe }}

src/_includes/layouts/posts-events.njk

@@ -0,0 +1,24 @@
+{% extends 'layouts/base.njk' %}
+
+{% set newsListItems = collections.events %}
+
+{% block content %}
+  <main id="main-content" class="posts" tabindex="-1">
+    <div class="[ wrapper ]">
+      <h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
+      <ul class="post-filter">
+        <li>
+          <a href="/posts">Tout</a>
+        </li>
+        <li>
+          <a href="/posts-news">Actualités</a>
+        </li>
+        <li class="active">
+          <a href="/posts-events">Évènements</a>
+        </li>
+      </ul>
+    </div>
+    {% include "partials/components//posts-list.njk" %}
+    {% include "partials/components/contact-form.njk" %}
+  </main>
+{% endblock %}

src/_includes/layouts/posts-news.njk

@@ -0,0 +1,24 @@
+{% extends 'layouts/base.njk' %}
+
+{% set newsListItems = collections.news %}
+
+{% block content %}
+  <main id="main-content" class="posts" tabindex="-1">
+    <div class="[ wrapper ]">
+      <h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
+      <ul class="post-filter">
+        <li>
+          <a href="/posts">Tout</a>
+        </li>
+        <li class="active">
+          <a href="/posts-news">Actualités</a>
+        </li>
+        <li>
+          <a href="/posts-events">Évènements</a>
+        </li>
+      </ul>
+    </div>
+    {% include "partials/components//posts-list.njk" %}
+    {% include "partials/components/contact-form.njk" %}
+  </main>
+{% endblock %}

src/_includes/layouts/posts.njk

@@ -0,0 +1,27 @@
+{% extends 'layouts/base.njk' %}
+
+{% set newsListItems = collections.posts %}
+
+{% block content %}
+  <main id="main-content" class="posts" tabindex="-1">
+    <div class="[ wrapper ]">
+      <h1 class="[ member-list__heading ]">{{ pageHeading }}</h1>
+      <ul class="post-filter">
+        <li class="active">
+          <a href="/posts">Tout</a>
+        </li>
+        <li>
+          <a href="/posts-news">Actualités</a>
+        </li>
+        <li>
+          <a href="/posts-events">Évènements</a>
+        </li>
+      </ul>
+    </div>
+    <section class="[ news-list wrapper ]">
+      {% include "partials/components/posts-list.njk" %}
+    </section>
+    
+    {% include "partials/components/contact-form.njk" %}
+  </main>
+{% endblock %}

src/_includes/partials/components/nav.njk

@@ -13,7 +13,11 @@
           {% set currentAttribute = ' aria-current="page"' %}
         {% endif %}
 
+        {% if page.url == item.url %}
+        <li class="nav__item active">
+        {% else %}
         <li class="nav__item">
+        {% endif %}
           <a href="{{ item.url | url }}" {{ relAttribute | safe }}{{ currentAttribute | safe }}>{{ item.text }}</a>
         </li>
       {% endfor %}

src/_includes/partials/components/news-list.njk

@@ -1,25 +0,0 @@
-{% if newsListItems.length %}
-  <section class="[ news-list ]">
-    <svg aria-hidden="true" viewBox="0 0 1440 349" width="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#282156" d="M1440 154H0v195h1440z"/><path d="M1440 54.078l-48 12.41c-48 12.41-144 37.23-240 45.53-96 7.989-192 .232-288-29.01C768 54.079 672 4.438 576 .327c-96-4.421-192 37.463-288 45.452-96 8.3-192-16.52-240-28.931L0 4.437V203h1440V54.078z" fill="#282156"/></svg>
-    <div class="[ wrapper ]">
-      <div class="news-list__inner">
-        <h2 class="[ news-list__heading ]">{{ newsListHeading }}</h2>
-        <ol class="[ news-list__items ]" reversed>
-          {% for item in newsListItems %}
-            {% if item.date.getTime() <= global.now %}
-              <li class="news-list__item">
-                <h3 class="news-list__item-heading">
-                  <a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
-                </h3>
-                <p class="news-list__item-date">
-                  <time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
-                </p>
-              </li>
-            {% endif %}
-          {% endfor %}
-        </ol>
-        <a href="/" class="news-list__see-all">Voir tout</a>
-      </div>
-    </div>
-  </section>
-{% endif %}

src/_includes/partials/components/posts-list-home.njk

@@ -0,0 +1,10 @@
+<section class="[ news-list ]">
+  <svg aria-hidden="true" viewBox="0 0 1440 349" width="auto" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#282156" d="M1440 154H0v195h1440z"/><path d="M1440 54.078l-48 12.41c-48 12.41-144 37.23-240 45.53-96 7.989-192 .232-288-29.01C768 54.079 672 4.438 576 .327c-96-4.421-192 37.463-288 45.452-96 8.3-192-16.52-240-28.931L0 4.437V203h1440V54.078z" fill="#282156"/></svg>
+  <div class="[ wrapper ]">
+    <div class="news-list__inner">
+      <h2 class="[ news-list__heading ]">{{ newsListHeading }}</h2>
+      {% include "partials/components/posts-list.njk" %}
+      <a href="/posts" class="news-list__see-all">Voir tout</a>
+    </div>
+  </div>
+</section>

src/_includes/partials/components/posts-list.njk

@@ -0,0 +1,16 @@
+{% if newsListItems.length %}
+  <ol class="[ news-list__items ]" reversed>
+    {% for item in newsListItems %}
+      {% if item.date.getTime() <= global.now %}
+        <li class="news-list__item {{ item.data.type }}">
+          <h3 class="news-list__item-heading">
+            <a href="{{ item.url | url }}" class="news-list__link" rel="bookmark">{{ item.data.title }}</a>
+          </h3>
+          <p class="news-list__item-date">
+            <time datetime="{{ item.date | w3DateFilter }}">{{ item.date | dateFilter }}</time>
+          </p>
+        </li>
+      {% endif %}
+    {% endfor %}
+  </ol>
+{% endif %}

src/pages/posts-events.md

@@ -0,0 +1,8 @@
+---
+title: 'Actualité & Évènements'
+permalink: '/posts-events/index.html'
+layout: 'layouts/posts-events.njk'
+pageHeading: 'Actualité & Évènements'
+---
+
+

src/pages/posts-news.md

@@ -0,0 +1,8 @@
+---
+title: 'Actualité & Évènements'
+permalink: '/posts-news/index.html'
+layout: 'layouts/posts-news.njk'
+pageHeading: 'Actualité & Évènements'
+---
+
+

src/pages/posts.md

@@ -0,0 +1,8 @@
+---
+title: 'Actualité & Évènements'
+permalink: '/posts/index.html'
+layout: 'layouts/posts.njk'
+pageHeading: 'Actualité & Évènements'
+---
+
+

src/posts/a-post-with-code-samples.md

@@ -1,6 +1,7 @@
 ---
 title: A post with code samples
 date: '2019-12-18'
+type: 'news'
 tags:
   - demo-content
   - code

src/posts/a-post-with-figures-and-video.md

@@ -1,6 +1,7 @@
 ---
 title: A post with figures and video
 date: '2019-04-18'
+type: 'news'
 tags:
   - demo-content
   - blog

src/posts/a-scheduled-post.md

@@ -1,6 +1,7 @@
 ---
 title: A scheduled post
 date: '2022-06-18'
+type: 'news'
 tags:
   - demo-content
   - simple-post

src/posts/a-simple-post copy.md

@@ -0,0 +1,29 @@
+---
+title: A simple post
+date: '2019-05-18'
+type: 'news'
+tags:
+  - demo-content
+  - simple-post
+  - blog
+---
+A simple post to demonstrate how a normal blog post looks on Hylia. Content is all set in the “Body” field as markdown and Eleventy transforms it into a proper HTML post. You can also edit the markdown file directly if you prefer not to use the CMS.
+
+How about a `<blockquote>`?
+
+> Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
+
+A list of stuff:
+
+- Sed posuere consectetur est at lobortis
+- Aenean lacinia bibendum nulla sed consectetur
+- Sed posuere consectetur est at lobortis
+
+How about an ordered list of stuff:
+
+1. Sed posuere consectetur est at lobortis
+2. Aenean lacinia bibendum nulla sed consectetur
+3. Sed posuere consectetur est at lobortis
+
+
+Hopefully, this has demonstrated how simple it is to make a nice looking blog with Hylia.

src/posts/a-simple-post.md

@@ -1,28 +1,10 @@
 ---
-title: A simple post
+title: A simpler post
-date: '2019-05-18'
+date: '2019-05-19'
+type: 'news'
 tags:
   - demo-content
   - simple-post
   - blog
 ---
 A simple post to demonstrate how a normal blog post looks on Hylia. Content is all set in the “Body” field as markdown and Eleventy transforms it into a proper HTML post. You can also edit the markdown file directly if you prefer not to use the CMS.
-
-How about a `<blockquote>`?
-
-> Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
-
-A list of stuff:
-
-- Sed posuere consectetur est at lobortis
-- Aenean lacinia bibendum nulla sed consectetur
-- Sed posuere consectetur est at lobortis
-
-How about an ordered list of stuff:
-
-1. Sed posuere consectetur est at lobortis
-2. Aenean lacinia bibendum nulla sed consectetur
-3. Sed posuere consectetur est at lobortis
-
-
-Hopefully, this has demonstrated how simple it is to make a nice looking blog with Hylia.

src/posts/evenement-12-06-20.md

@@ -2,6 +2,7 @@
 title: Réunion d'information Astrolabe
 date: '2020-06-12'
 time: '19:00'
+type: 'event'
 tags:
   - évenement
   - réunion

src/posts/evenement-24-06-20.md

@@ -0,0 +1,16 @@
+---
+title: Réunion d'information Astrolabe
+date: '2020-06-24'
+time: '19:00'
+type: 'event'
+illustration: '/images/reunion-24-06-2020.jpeg'
+layout: 'layouts/post.njk'
+---
+Vous vous demandez ce qu'est une #SCOP #CAE ? Le statut d'entrepreneur salarié #CESA est-il fait pour vous ?
+
+Venez nous rencontrer lors de notre  réunion d'information : 
+
+- Date : 24 Juin 19H 
+- Lieu :  Visio-conférence
+
+[Formulaire d'inscription](https://framaforms.org/reunion-dinformation-scop-astrolabe-cae-du-24-juin-a-19h-en-visio-1591805443)

src/scss/_theme.scss

@@ -60,5 +60,21 @@ a:visited {
 
   &.highlight {
     background-color: var(--color-primary);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.return-link {
+  align-self: flex-end;
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-top: 2rem;
+
+  &:visited {
+    color: inherit;
   }
 }

src/scss/components/_nav.scss

@@ -29,5 +29,10 @@
         text-decoration: none;
       }
     }
+
+    &.active a {
+      text-decoration: underline;
+      cursor: default;
+    }
   }
 }

src/scss/components/_post.scss

@@ -1,32 +1,23 @@
 .post {
-  padding-bottom: 8rem;
+  margin-bottom: 8rem;
 
   &__body {
-    // --flow-space: #{get-size(800)};
+    display: flex;
+    flex-direction: column;
 
-    /**
-     * Generic HTML styles 
-     */
     h1 {
-      margin-top: 8rem;
+      margin: 8rem 0 4rem;
     }
 
-    // h2 + *,
-    // h3 + * {
-    //   --flow-space: #{get-size(500)};
-    // }
-
     h2,
     h3 {
       @include apply-utility('leading', 'tight');
       position: relative;
-      /*display: flex;*/
     }
 
-    
-
     p {
       font-size: 1.125rem;
+      margin-bottom: 1rem;
     }
 
     a:not([class]) {
@@ -75,6 +66,7 @@
     ol:not([class]),
     ul:not([class]) {
       margin-left: get-size(800);
+      margin-bottom: 1rem;
 
       li + li {
         margin-top: get-size(300);
@@ -101,12 +93,6 @@
       position: relative;
     }
 
-    figure img,
-    pre > code,
-    .video-player {
-      // box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
-    }
-
     figure img {
       position: relative;
       z-index: 1;
@@ -120,6 +106,11 @@
       padding: 0 get-size(500);
     }
 
+    .post-pic {
+      align-self: center;
+      margin-bottom: 3rem;
+    }
+
     pre > code {
       display: block;
       background: var(--color-dark);
@@ -134,7 +125,6 @@
       grid-template-rows: auto;
       grid-column-gap: 1.5rem;
       grid-row-gap: 0;
-      margin-top: 4rem;
 
       .video-player > iframe {
         height: 89%;
@@ -237,7 +227,7 @@
 
     .process-cae {
       max-width: 34.875rem;
-      margin: 8rem auto 0;
+      margin: 0 auto;
 
       &.split {
         max-width: 100%;

src/scss/components/_posts-list.scss

@@ -1,23 +1,9 @@
 .news-list {
-  margin-top: 8rem;
-  margin-bottom: 24rem;
-  position: relative;
-
-  // > svg {
-  //   position: absolute;
-  //   z-index: -1;
-  //   top: -18rem;
-  // }
-
   .wrapper {
-    // display: flex;
-    // flex-direction: column;
     position: relative;
   }
 
   &__inner {
-    position: absolute;
-    top: -9rem;
     display: flex;
     flex-direction: column;
   }
@@ -33,7 +19,7 @@
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: 1fr;
     grid-column-gap: 1.5rem;
-    grid-row-gap: 0;
+    grid-row-gap: 2rem;
   }
 
   &__item {
@@ -43,6 +29,10 @@
     color: var(--color-dark);
     border-radius: 1rem;
 
+    &.event {
+      background-color: #97dffc;
+    }
+
     &-heading {
       font-size: 1.125rem;
       font-weight: 600;
@@ -78,16 +68,16 @@
     align-self: flex-end;
     margin-top: 3rem;
     padding: .875rem 1.5rem;
-
+  }
-    &,
-    &:visited {
-      color: var(--color-dark);
 }
 
-    &:hover {
+.home .news-list {
-      background-color: var(--color-primary);
+  margin-top: 8rem;
-      border-radius: 1.5rem;
+  margin-bottom: 24rem;
-      text-decoration: none;
+  position: relative;
-    }
+
+  &__inner {
+    position: absolute;
+    top: -9rem;
   }
 }

src/scss/components/_posts.scss

@@ -0,0 +1,28 @@
+.posts {
+  .wrapper:first-child {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .post-filter {
+    align-self: flex-end;
+    margin-bottom: 2rem;
+    list-style: none;
+    display: flex;
+
+    li {
+      display: inline-block;
+      margin-left: 1.5rem;
+
+      a {
+        font-weight: 600;
+        text-decoration: none;
+      }
+
+      &.active a {
+        text-decoration: underline;
+        cursor: default;
+      }
+    }
+  }
+}

src/scss/global.scss

@@ -68,11 +68,12 @@ img {
 @import 'components/intro';
 @import 'components/nav';
 @import 'components/pagination';
+@import 'components/posts';
 @import 'components/post';
 @import 'components/post-list';
 @import 'components/member';
 @import 'components/member-list';
-@import 'components/news-list';
+@import 'components/posts-list';
 @import 'components/presentation';
 @import 'components/site-head';
 @import 'components/site-foot';