Filter skills by tags

.eleventy.js

@@ -74,6 +74,28 @@ module.exports = function(config) {
     .slice(0, site.maxProfilePreview)
     ;
   });
+  config.addCollection("tagsList", function(collectionApi) {
+    const tagsList = new Set();
+    collectionApi.getAll().map( item => {
+          if (item.data.tags) { // handle pages that don't have tags
+              item.data.tags.map( tag => tagsList.add(tag))
+          }
+      });
+      return tagsList;
+  });
+  config.addCollection("skillsList", function(collectionApi) {
+    const skillsList = new Set();
+    collectionApi.getFilteredByGlob("./src/members/*.md").map( item => {
+          if (item.data.tags) { // handle pages that don't have skills
+            item.data.tags.map( skill => { // exclude non related tags
+              if (['post', 'news', 'event'].indexOf(skill) == -1) {
+                skillsList.add(skill)
+              }
+            })
+          }
+      });
+      return skillsList;
+  });
   config.addCollection('customers', collection => {
     return [...collection.getFilteredByGlob("./src/customers/*.md")]
     .reverse()

src/_includes/layouts/member.njk

@@ -29,9 +29,22 @@
             {% if socialLinkedin %}
               <a href="{{ socialLinkedin }}" class="social" title="linkedin"><svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.98 2.5A2.49 2.49 0 012.5 5 2.49 2.49 0 01.02 2.5C.02 1.12 1.13 0 2.5 0a2.49 2.49 0 012.48 2.5zM5 7H0v16h5V7zm7.982 0H8.014v16h4.969v-8.399c0-4.67 6.029-5.052 6.029 0V23H24V12.869c0-7.88-8.922-7.593-11.018-3.714V7z" fill="#282156"/></svg></a>
             {% endif %}
+            <div class="[ nav ] [ box-flex align-center ]">
+              
+            </div>
           </div>
           <div class="member__bio">
             {{ content | safe }}
+            {% if tags %}
+              <h2 class="font-base weight-mid mt-2">Mots-clés</h2>
+              <ul class="tag-list mt-1">
+                {% for item in tags %}
+                  <li class="tag-item">
+                    <a href="/equipe/{{ item }}">{{ item }}</a>
+                  </li>
+                {% endfor %}
+              </ul>
+            {% endif %}
           </div>
         </div>
       </article>

src/_includes/layouts/team.njk

@@ -7,6 +7,12 @@
     <div class="[ wrapper ]">
       <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
       {{ content | safe }}
+      <h2 class="[ gap-top-700 ]">{{ tagSearchHeading }}</h2>
+      <ul class="tag-list mt-1">
+        {% for skill in collections.skillsList %}
+          <li class="tag-item"><a href="/equipe/{{ skill }}">{{ skill }}</a></li>
+        {% endfor %}
+      </ul>
     </div>
     {% include "partials/components/member-list.njk" %}
     {% include "partials/components/contact-form.njk" %}

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

@@ -4,9 +4,7 @@
       <ol class="[ member-list__items ]" reversed>
         {% for item in teamListItems %}
             <li class="member-list__item">
-              {# <div class="img-wrapper"> #}
               <img src=" {{ item.data.profile }}" alt="photo de {{ item.data.name }}">
-              {# </div> #}
               <a role="button" href="{{ item.data.url }}" class="btn btn-primary">{{ item.data.name }}&nbsp;
                 <svg width="18" height="14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.602 5.823L12.05.376a1.357 1.357 0 00-1.875 0 1.295 1.295 0 000 1.84l3.278 3.235H1.326C.587 5.451 0 6.027 0 6.752s.587 1.302 1.326 1.302h12.127l-3.278 3.215a1.295 1.295 0 000 1.84 1.349 1.349 0 001.894 0l5.533-5.427c.246-.242.398-.576.398-.93 0-.353-.133-.687-.398-.93z" fill="#111"></path></svg>
               </a>

src/members/florent-le-saout.md

@@ -9,6 +9,11 @@ socialTwitter: 'https://twitter.com/AstrolabeCae'
 socialLinkedin: 'https://www.linkedin.com/company/astrolabe-cae'
 socialMastodon: 'https://framapiaf.org/@AstrolabeCAE'
 url: '/members/florent-le-saout'
+tags:
+ - linux
+ - dev
+skills:
+ - C++
 ---
 
 Je suis co-fondateur et co-gérant de la SCOP CAE Astrolabe.

src/members/vincent-genieux.md

@@ -9,6 +9,7 @@ socialTwitter: 'https://twitter.com/AstrolabeCae'
 socialLinkedin: 'https://www.linkedin.com/in/vincent-g%C3%A9nieux-4223982/'
 socialMastodon: 'https://framapiaf.org/@AstrolabeCAE'
 url: '/members/vincent-genieux'
+tags: [ linux, dev ]
 ---
 ### Co-fondateur et co-gérant d'Astrolabe
 

src/members/yves-gatesoupe.md

@@ -8,6 +8,13 @@ personalSite: 'https://www.behance.net/ygates'
 socialTwitter: 'https://twitter.com/YGdsgn'
 socialLinkedin: 'https://www.linkedin.com/in/yves-gatesoupe-05990b17a/'
 url: '/members/yves-gatesoupe'
+tags:
+ - html
+ - design
+ - dev
+skills:
+ - dev
+ - Vue.js
 ---
 
 Je suis designer web indépendant depuis janvier 2020. 

src/pages/comprendre-la-cae.md

@@ -1,6 +1,7 @@
 ---
 title: 'Comprendre la CAE'
 permalink: '/comprendre-la-cae/index.html'
+eleventyExcludeFromCollections: true
 ---
 
 # Une entreprise partagée

src/pages/contact.md

@@ -2,6 +2,7 @@
 title: 'Contact'
 permalink: '/contact/index.html'
 layout: 'layouts/contact.njk'
+eleventyExcludeFromCollections: true
 ---
 
 You can have a contact page which uses a basic form. The [code with the form fields lives here](https://github.com/hankchizljaw/hylia/blob/master/src/_includes/layouts/contact.njk). 

src/pages/equipe.md

@@ -3,6 +3,8 @@ title: 'L''équipe Astrolabe'
 permalink: '/equipe/index.html'
 layout: 'layouts/team.njk'
 teamListHeading: 'L''équipe Astrolabe'
+tagSearchHeading: 'Filter par mots-clés :'
+eleventyExcludeFromCollections: true
 ---
 
 Astrolabe CAE est confondée par Florent Le Saout et Vincent Génieux en 2019.<br>

src/pages/nous-rejoindre.md

@@ -1,6 +1,7 @@
 ---
 title: 'Nous rejoindre'
 permalink: '/nous-rejoindre/index.html'
+eleventyExcludeFromCollections: true
 ---
 
 # Comment rejoindre Astrolabe

src/pages/posts-events.md

@@ -3,6 +3,7 @@ title: 'Actualité & Évènements'
 permalink: '/posts-events/index.html'
 layout: 'layouts/posts-events.njk'
 pageHeading: 'Actualité & Évènements'
+eleventyExcludeFromCollections: true
 ---
 
 

src/pages/posts-news.md

@@ -3,6 +3,7 @@ title: 'Actualité & Évènements'
 permalink: '/posts-news/index.html'
 layout: 'layouts/posts-news.njk'
 pageHeading: 'Actualité & Évènements'
+eleventyExcludeFromCollections: true
 ---
 
 

src/pages/posts.md

@@ -3,6 +3,7 @@ title: 'Actualité & Évènements'
 permalink: '/posts/index.html'
 layout: 'layouts/posts.njk'
 pageHeading: 'Actualité & Évènements'
+eleventyExcludeFromCollections: true
 ---
 
 

src/pages/thank-you.md

@@ -1,6 +1,7 @@
 ---
 title: 'Thank you'
 permalink: '/thank-you/index.html'
+eleventyExcludeFromCollections: true
 ---
 
 # Merci !

src/scss/_theme.scss

@@ -60,3 +60,15 @@ a:not([class]):visited {
     color: inherit;
   }
 }
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.mt-1 {
+  margin-top: 1rem;
+}
+
+.mt-2 {
+  margin-top: 2rem;
+}

src/scss/components/_form.scss

@@ -5,6 +5,7 @@
 }
 
 .form-container {
+  margin-top: 8rem;
   padding: 0 0 6rem;
   background-color: var(--color-primary);
   color: var(--color-dark);

src/scss/components/_member-list.scss

@@ -1,6 +1,4 @@
 .member-list {
-  margin-bottom: 8rem;
-
   &__heading {
     margin: 8rem 0 4rem;
   }

src/scss/components/_tags.scss

@@ -0,0 +1,21 @@
+.tag-list {
+  list-style: none;
+  display: flex;
+
+  .tag-item + .tag-item {
+    margin-left: 1rem;
+  }
+}
+
+.tag-item {
+  padding: .5rem 1rem;
+  background-color: var(--color-light-gray);
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/scss/global.scss

@@ -75,4 +75,5 @@ img {
 @import 'components/partner';
 @import 'components/skip-link';
 @import 'components/video-player';
+@import 'components/tags';
 @import 'utilities/responsive';

src/team-skills.njk

@@ -0,0 +1,33 @@
+---
+title: 'L''équipe Astrolabe'
+pagination:
+  data: collections
+  size: 1
+  alias: tag
+  filter:
+    - post
+    - news
+    - event
+    - customer
+    - partner
+permalink: /equipe/{{ tag }}/
+---
+
+{% extends 'layouts/base.njk' %}
+
+{% set teamListItems = collections[tag] %}
+
+{% block content %}
+  <main id="main-content" tabindex="-1">
+    <div class="[ wrapper ]">
+      <h1 class="[ member-list__heading ]">{{ teamListHeading }}</h1>
+      {{ content | safe }}
+      <h2 class="[ gap-top-700 ]">Profils par mot-clé : <span class="tag-item">{{ tag }}</span></h2>
+    </div>
+    {% include "partials/components/member-list.njk" %}
+    <div class="wrapper box-flex justify-end">
+      <a class="return-link" href="/equipe">Voir tous les membres</a>
+    </div>
+    {% include "partials/components/contact-form.njk" %}
+  </main>
+{% endblock %}