Home page content rework

.eleventy.js

@@ -58,6 +58,16 @@ module.exports = function(config) {
       .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);
+  });
+
   // Plugins
   config.addPlugin(rssPlugin);
   config.addPlugin(syntaxHighlight);

src/_data/site.json

@@ -19,5 +19,6 @@
   "enableThirdPartyComments": false,
   "maxPostsPerPage": 5,
   "maxNewsPerPage": 4,
+  "maxProfilePreview": 3,
   "faviconPath": "/images/favicon.png"
 }

src/_includes/layouts/home.njk

@@ -1,14 +1,9 @@
 {% extends 'layouts/base.njk' %}
 
-{# Post list content #}
+{# Set lists content #}
 {% set newsListHeading = newsHeading %}
 {% set newsListItems = collections.newsFeed %}
 
-{# Presentation content #}
-{% set presentation %}
-  {{ content | safe }}
-{% endset %}
-
 {% block content %}
   <main id="main-content" tabindex="-1">
     {% include "partials/components/intro.njk" %}

src/_includes/partials/components/member.njk

@@ -4,8 +4,33 @@
 
 {% block content %}
   <main id="main-content" tabindex="-1">
-    <article class="[ wrapper ]">
+    <div class="[ wrapper member ]">
-      <p>{{ content | safe }}</p>
+      <article class="[ member__wrapper ]">
-    </article>
+        <div>
+          <h1>{{ name }}</h1>
+          <h2>{{ position }}</h2>
+          <div class="member__bio">{{ content | safe }}</div>
+          {% if personalSite %}
+            <p>
+              <span>site perso :</span>
+              <a href="{{ personalSite }}" class="social">{{ personalSite }}</a>
+            </p>
+          {% endif %}
+          {% if socialTwitter %}
+            <a href="{{ socialTwitter }}" class="social">Twitter</a>
+          {% endif %}
+          {% if socialLinkedin %}
+            <a href="{{ socialLinkedin }}" class="social">Linkedin</a>
+          {% endif %}
+          {% if socialMastodon %}
+            <a href="{{ socialMastodon }}" class="social">Mastodon</a>
+          {% endif %}
+        </div>
+        <div>
+          <img src="{{ profile }}" alt="profile de {{ name }}">
+        </div>
+      </article>
+      <a class="return-link" href="/equipe">Voir tous les membres</a>
+    </div>
   </main>
 {% endblock %}

src/_includes/partials/components/presentation.njk

@@ -1,5 +1,64 @@
+{% set profilePics = collections.profiles %}
+
 <section class="[ presentation ]">
   <div class="[ wrapper ]">
-    {{ presentation | safe }}
+    <article>
+      <div class="content">
+        <h2>Qui sommes-nous ?</h2>
+        <p>
+          Astrolabe CAE est une scop spécialisée dans la prestation de <strong>services</strong> autour des métiers du <strong>numérique</strong>. 
+          Notre objectif est de favoriser l’<strong>autonomie</strong> et l’<strong>émancipation</strong> de nos membres sur un modèle d’économie sociale et <strong>solidaire</strong>.
+        </p>
+      </div>
+      <div class="side-info">
+        {# <figure> #}
+          <img src="/images/crew.svg" alt="équipage astrolabe" loading="lazy" style="width: 80%">
+        {# </figure> #}
+        <a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre 
+          <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>
+      </div>
+    </article>
+    <article>
+      <div class="content">
+        <h2>Communs numérique</h2>
+        <p>
+          Chez Astrolabe nous aimons et faisons la promotion du <b>logiciel libre</b>. Nos sommes membres d’<a href="http://www.alliance-libre.org/" target="_blank">Alliance Libre</a>
+          et nous mettons nos documents et projets internes à disposition sur notre gitlab.
+        </p>
+      </div>
+      <div class="side-info">
+        <figure>
+          <img src="/images/gitlab.svg" alt="logo Gitlab" loading="lazy" width="110" height="101">
+        </figure>
+        {# <a role="button" href="https://framagit.org/astrolabe" class="btn btn-primary btn-icon" target="_blank">
+          <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.929 13.407l-1.26-3.86a.552.552 0 00-.03-.104l-2.525-7.76A1.002 1.002 0 0019.155 1a.988.988 0 00-.947.689l-2.407 7.394H8.203l-2.41-7.394A.985.985 0 004.848 1h-.005a1.008 1.008 0 00-.956.69L1.36 9.458c0 .007-.006.013-.008.02l-1.281 3.93a1.431 1.431 0 00.522 1.605l11.072 8.03a.568.568 0 00.669-.004l11.074-8.026a1.433 1.433 0 00.52-1.606zm-16.55-3.189l3.086 9.48-7.409-9.48H7.38zm6.16 9.483l2.96-9.09.127-.393h4.326l-6.703 8.57-.71.913zm5.626-17.284l2.169 6.666h-4.34l2.171-6.666zm-3.732 7.797l-2.15 6.604L12 20.752 8.572 10.214h6.861zM4.84 2.417L7.01 9.083H2.673L4.84 2.417zm-3.58 11.681a.305.305 0 01-.11-.341l.951-2.919 6.979 8.93-7.82-5.67zm21.483 0l-7.82 5.669.026-.034 6.952-8.895.952 2.918a.304.304 0 01-.11.342" fill="#111"/></svg>
+          Gitlab
+        </a> #}
+         <a role="button" href="https://framagit.org/astrolabe" class="btn btn-primary btn-icon" target="_blank">Gitlab</a>
+      </div>
+    </article>
+    <article>
+      <div class="content">
+        <h2>Des profils variés</h2>
+        <p>
+          Nos coopérateurs possèdent des compétences propres allant de développement linux embarqué au web design et créent ainsi la <b>pluralité</b> de nos prestations.
+          <br><br>
+          Nous sommes également <b>distributeurs</b> de la solution logicielle <a href="https://www.crealead.com/naega#bootstrap-fieldgroup-nav-item--prsentation" target="_blank">Naega</a>.
+        </p>
+      </div>
+      <div class="side-info">
+        <ul class="profile-preview">
+          {% for profile in profilePics %}
+          <li>
+            <a href="{{ profile.data.url }}" title="{{ profile.data.name }}">
+              <img src="{{ profile.data.profile }}" alt="photo de {{ profile.data.name }}">
+            </a>
+          </li>
+          {% endfor %}
+        </ul>
+        <a role="button" href="/equipe" class="btn btn-secondary">Voir l'équipe</a>
+      </div>
+    </article>
   </div>
 </section>

src/index.md

@@ -5,40 +5,3 @@ brandHeading: La Coopérative d'Activité et d'Emploi spécialisée en informati
 newsHeading: Actualité & Évenements
 metaDesc: 'Hylia is a lightweight Eleventy starter kit to help you to create your own blog or personal website.'
 ---
-
-<article>
-  <div class="content">
-
-  ## Qui sommes-nous ?
-  Astrolabe CAE est une scop spécialisée dans la prestation de **services** autour des métiers du **numérique**.
-  Notre objectif est de favoriser l’**autonomie** et l’**émancipation** de nos membres sur un modèle d’économie sociale et **solidaire**.
-  </div>
-
-  <!-- ![logo Gitlab](/images/gitlab.svg) -->
-  <a role="button" href="/nous-rejoindre" class="btn btn-primary">Nous rejoindre
-      <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"/></svg>
-    </a>
-</article>
-
-<article>
-  <div class="content">
-
-  ## Communs numérique
-  Chez Astrolabe nous aimons et faisons la promotion du **logiciel libre**. Nos sommes membres d’[Alliance Libre](http://www.alliance-libre.org/) et nous mettons nos documents et projets internes à disposition sur notre [gitlab]().
-  </div>
-
-  ![logo Gitlab](/images/gitlab.svg)
-</article>
-
-<article>
-  <div class="content">
-
-  ## Des profils variés
-  Nos coopérateurs possèdent des compétences propres allant de développement linux embarqué au web design et créent ainsi la **pluralité** de nos prestations.
-  <br><br>
-  Nous sommes également **distributeurs** de la solution logicielle [Naega](https://www.crealead.com/naega#bootstrap-fieldgroup-nav-item--prsentation).
-  </div>
-
-  <!-- ![logo Gitlab](/images/gitlab.svg) -->
-  <a role="button" href="/equipe" class="btn btn-secondary">Voir l'équipe</a>
-</article>

src/members/florent-le-saout.md

@@ -3,7 +3,7 @@ name: 'Florent Le Saout'
 position: 'Développeur systèmes embarqués'
 positionInternal: 'Co-fondateur'
 date: '2019-01-01'
-profile: '/images/fls-profile.jpg'
+profile: '/images/profiles/fls-profile.jpg'
 url: '/members/florent-le-saout'
 layout: 'partials/components/member.njk'
 ---

src/members/francois-bonningues.md

@@ -2,7 +2,7 @@
 name: 'François Bonningues'
 position: 'Développeur systèmes embarqués'
 date: '2020-06-01'
-profile: '/images/default-profile.svg'
+profile: '/images/profiles/default-profile.png'
 url: '/members/francois-bonningues'
 layout: 'partials/components/member.njk'
 ---

src/members/vincent-genieux.md

@@ -3,7 +3,7 @@ name: 'Vincent Génieux'
 position: 'Développeur senior'
 positionInternal: 'Co-fondateur'
 date: '2019-01-01'
-profile: '/images/vg-profile.jpg'
+profile: '/images/profiles/vg-profile.jpg'
 url: '/members/vincent-genieux'
 layout: 'partials/components/member.njk'
 ---

src/members/yves-gatesoupe.md

@@ -2,9 +2,18 @@
 name: 'Yves Gatesoupe'
 position: 'Designer Web'
 date: '2020-06-01'
-profile: '/images/yg-profile.jpg'
+profile: '/images/profiles/yg-profile.jpg'
+personalSite: 'www.astrolabe.coop'
+socialTwitter: 'https://twitter.com/YGdsgn'
+socialLinkedin: 'https://www.linkedin.com/in/yves-gatesoupe-05990b17a/'
 url: '/members/yves-gatesoupe'
 layout: 'partials/components/member.njk'
 ---
 
-Yves
+Je suis designer web indépendant depuis janvier 2019. 
+
+J’ai construit mon expérience en tant que développeur web front end pour Orange Business Services en contribuant notamment à la mise en place du Bootstrap Orange [Boosted](https://boosted.orange.com) qui est un framework aux couleurs de la marque avec un focus sur l’accessibilité numérique. 
+
+Ces deux dernières années j’ai étendu le champs de mes compétence en passant la certification professionnelle “Ergonomie des interfaces, UX/UI Design” (Usabilis 2018).
+
+Ce parcours me permet aujourd’hui de proposer mes services en tant que Designer Web, que ce soit pour la conception d’une identité visuelle, d’une étude de conception centrée utilisateur, du maquettage et intégration de votre site ou application web.

src/scss/components/_button.scss

@@ -71,4 +71,16 @@
     background-color: var(--color-secondary);
     font-weight: 500;
   }
+
+  &.btn-icon {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-left: 0;
+      margin-right: .5rem;
+    }
+  }
 }

src/scss/components/_member-list.scss

@@ -4,6 +4,7 @@
   &__heading {
     margin: 8rem 0 2rem;
   }
+  
   &__items {
     margin-top: 4rem;
     display: grid;

src/scss/components/_member.scss

@@ -0,0 +1,37 @@
+.member {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20rem;
+
+  &__wrapper {
+    display: grid;
+    grid-template-columns: .6fr .4fr;
+    grid-template-rows: 1fr;
+    grid-column-gap: 1.5rem;
+    grid-row-gap: 0;
+    margin-top: 8rem;
+  }
+  
+  &__bio {
+    margin-top: 2.5rem;
+
+    + p,
+    p + p {
+      margin-top: 1.5rem;
+      
+      span {
+        font-weight: 600;
+      }
+    }
+  }
+
+  .return-link {
+    align-self: flex-end;
+    font-size: 1.125rem;
+    font-weight: 700;
+
+    &:visited {
+      color: inherit;
+    }
+  }
+}

src/scss/components/_presentation.scss

@@ -5,6 +5,7 @@
     grid-template-rows: auto;
     grid-column-gap: 2.125rem;
     grid-row-gap: 2.125rem;
+    margin-bottom: 10rem;
 
     &:nth-child(2n + 1) {
       .content {
@@ -36,15 +37,18 @@
 
       + p {
         font-size: 1.25rem;
-        margin-bottom: 8rem;
       }
     }
 
+    a,
+    a:visited {
+      color: var(--color-dark);
+    }
+
     + figure,
     + p {
       display: flex;
       flex-direction: column;
-      // justify-content: center;
       align-items: center;
   
       img {
@@ -57,5 +61,33 @@
     }
   }
 
+  .side-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
+    img {
+      margin-bottom: 1.5rem;
+    }
+  }
+
+  .profile-preview {
+    display: flex;
+    list-style: none;
+    margin-top: auto;
+    margin-bottom: 1.5rem;
+
+    li + li {
+      margin-left: -2rem;
+    }
+
+    img {
+      width: 10rem;
+      border-radius: 50%;
+      border: 2px solid;
+      color: var(--color-white);
+      background-color: var(--color-white);
+    }
+  }
 }

src/transforms/parse-transform.js

@@ -11,7 +11,7 @@ module.exports = function(value, outputPath) {
     });
 
     const document = DOM.window.document;
-    const articleImages = [...document.querySelectorAll('main section:not(.process-cae) article img, .intro img')];
+    const articleImages = [...document.querySelectorAll('main section:not(.process-cae, .presentation) article img, .intro img')];
     const articleHeadings = [
       ...document.querySelectorAll('main article h2, main article h3')
     ];