Merge branch 'feature-map' into dev

# Conflicts:
#	src/members/yves-gatesoupe.md

.eleventy.js

@@ -1,6 +1,7 @@
 const rssPlugin = require('@11ty/eleventy-plugin-rss');
 const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight');
 const fs = require('fs');
+const util = require('util')
 
 // Import filters
 const dateFilter = require('./src/filters/date-filter.js');
@@ -19,6 +20,9 @@ module.exports = function(config) {
   config.addFilter('dateFilter', dateFilter);
   config.addFilter('markdownFilter', markdownFilter);
   config.addFilter('w3DateFilter', w3DateFilter);
+  config.addFilter('dump', obj => {
+    return util.inspect(obj)
+  });
 
   // Layout aliases
   config.addLayoutAlias('home', 'layouts/home.njk');
@@ -96,6 +100,17 @@ module.exports = function(config) {
     });
     return skillsList;
   });
+  config.addCollection("membersLocations", function(collectionApi) {
+    return collectionApi.getFilteredByGlob("./src/members/*.md")
+      .filter(item => typeof item.data.location !== 'undefined')
+      .map( member => {
+        return {
+          name: member.data.name,
+          url: member.data.url,
+          location: member.data.location,
+        };
+    });
+  });
   config.addCollection('customers', collection => {
     return [...collection.getFilteredByGlob("./src/customers/*.md")]
     .reverse()

package.json

@@ -9,9 +9,11 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3",
     "@tbranyen/jsdom": "^13.0.0",
     "concurrently": "^4.1.2",
+    "copyfiles": "^2.4.1",
     "html-minifier": "^4.0.0",
     "image-size": "^0.8.3",
     "json-to-scss": "^1.5.0",
+    "leaflet": "^1.7.1",
     "sass": "^1.26.3",
     "semver": "^6.3.0",
     "slugify": "^1.4.0",
@@ -36,9 +38,12 @@
     "sass:tokens": "npx json-to-scss src/_data/tokens.json src/scss/_tokens.scss",
     "sass:lint": "npx stylelint src/scss/**/*.scss",
     "sass:process": "npm run sass:tokens && npm run sass:lint && sass src/scss/global.scss src/_includes/assets/css/global.css --style=compressed",
-    "start": "concurrently \"npm run sass:process -- --watch\" \"npm run serve\"",
+    "vendor:css": "copyfiles node_modules/leaflet/dist/leaflet.css -f dist/vendor/css",
+    "vendor:js": "copyfiles node_modules/leaflet/dist/leaflet.js -f dist/vendor/js",
+    "vendor": "npm run vendor:css && npm run vendor:js",
+    "start": "concurrently \"npm run vendor\" \"npm run sass:process -- --watch\" \"npm run serve\"",
     "serve": "cross-env ELEVENTY_ENV=development npx eleventy --serve",
-    "prod": "cross-env ELEVENTY_ENV=prod npm run sass:process && npx eleventy",
+    "prod": "cross-env ELEVENTY_ENV=prod npm run vendor && npm run sass:process && npx eleventy",
     "deploy-preprod": "npm run prod && node deploy-preprod",
     "deploy-prod": "npm run prod && node deploy-prod"
   },

src/_includes/layouts/base.njk

@@ -7,6 +7,7 @@
   <link rel="icon" href="{{ site.faviconPath }}" type="image/png" />
   {% include "partials/global/meta-info.njk" %}
   <script>document.documentElement.classList.remove('no-js');</script>
+  <link rel = "stylesheet" href="/vendor/css/leaflet.css"/>
   <style>{% include "assets/css/global.css" %}</style>
   {% block head %}
   {% endblock %}

src/_includes/layouts/team.njk

@@ -15,6 +15,8 @@
       </ul>
     </div>
     {% include "partials/components/member-list.njk" %}
+    {% include "partials/components/map.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
+  
 {% endblock %}

src/_includes/partials/components/map.njk

@@ -0,0 +1,50 @@
+<div class="[ wrapper ]">
+  <h2 class="mt-2">Où sommes-nous ?</h2>
+</div>
+<div id = "map" style = "width: 100%; height: 500px"></div>
+<script type="text/javascript" src="/vendor/js/leaflet.js"></script>
+<script>
+  // Creating map options
+  var mapOptions = {
+    center: [48.10494125597395, -1.6795760019626425],
+    zoom: 15
+  }
+  
+  // Creating a map object
+  var map = new L.map('map', mapOptions);
+
+  var iconMarker = L.icon({
+    iconUrl: '/images/marker-stroke.svg',
+    iconSize: [28, 40],
+    iconAnchor: [14, 40],
+    popupAnchor: [0, -40]
+  });
+
+  var iconMarkerAlt = L.icon({
+    iconUrl: '/images/marker-logo-alt.svg',
+    iconSize: [40, 40],
+    iconAnchor: [20, 40],
+    popupAnchor: [0, -40]
+  });
+
+  var members = {{ collections.membersLocations | dump | safe }};
+
+  var markerGroup = members.map( member => {
+    return new L.marker(member.location, {icon: iconMarker}).bindPopup('<a href="'+member.url+'">'+member.name+'</a>');
+  });
+
+  var markerSiege = L.marker([48.10494125597395, -1.6795760019626425], {icon: iconMarkerAlt}).bindPopup('Siège Astrolabe CAE')
+  .openPopup();
+
+  markerGroup.push(markerSiege)
+
+  var featureGroup = L.featureGroup(markerGroup).addTo(map);
+
+  map.fitBounds(featureGroup.getBounds());
+
+  // Creating a Layer object
+  var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
+  
+  // Adding layer to the map
+  map.addLayer(layer);
+</script>

src/images/marker-alt.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.0392 19.7082C7.09406 20.2815 5.8626 19.9809 5.28869 19.0368C1.76195 13.2353 0 9.28709 0 6.99256C0 3.13068 3.13401 0 7 0C10.866 0 14 3.13068 14 6.99256C14 9.28709 12.238 13.2353 8.71131 19.0368C8.54447 19.3112 8.31394 19.5415 8.0392 19.7082ZM7.00745 10C8.66606 10 10.0106 8.65685 10.0106 7C10.0106 5.34315 8.66606 4 7.00745 4C5.34883 4 4.00426 5.34315 4.00426 7C4.00426 8.65685 5.34883 10 7.00745 10Z" fill="#282156"/>
+</svg>

src/images/marker-logo-alt.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 20C0 8.96178 8.96183 0 20 0C31.0387 0 40 8.96178 40 20C40 31.0382 31.0387 40 20 40C8.96183 40 0 31.0382 0 20ZM25.3303 22.6563L28.3342 29.1806C28.5043 29.5573 28.8225 29.8524 29.2122 29.9957C29.602 30.1398 30.036 30.1215 30.4123 29.9462C30.789 29.776 31.0842 29.4584 31.2279 29.0686C31.3715 28.6788 31.3533 28.2448 31.1784 27.8681L27.7869 20.4983L25.3303 22.6563ZM23.1467 17.9132L20.105 11.3073L17.0339 17.9149L13.4188 18.25L18.0417 8.30295C19.1879 5.83678 21.0417 5.84032 22.1784 8.31076L26.7513 18.2474L23.1467 17.9132ZM14.8411 22.6328L11.7192 29.3507C11.5442 29.7274 11.2261 30.0226 10.8368 30.1615C10.447 30.3056 10.0121 30.2873 9.63585 30.112C9.25952 29.9375 8.96831 29.6198 8.82509 29.23C8.68186 28.8403 8.69963 28.4062 8.87413 28.0295L12.385 20.4748L14.8411 22.6328Z" fill="#282156"/>
+</svg>

src/images/marker-stroke.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="40" viewBox="0 0 28 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8191 38.9909C14.1645 39.9946 12.009 39.4681 11.0046 37.8158L10.5774 38.0755L11.0046 37.8158C7.48332 32.0229 4.85137 27.1687 3.10115 23.1986C1.34537 19.2159 0.5 16.1729 0.5 13.9858C0.5 6.53829 6.54368 0.5 14 0.5C21.4563 0.5 27.5 6.53829 27.5 13.9858C27.5 16.1729 26.6546 19.2159 24.8989 23.1986C23.1486 27.1687 20.5167 32.0229 16.9954 37.8158C16.7034 38.2961 16.3 38.6991 15.8191 38.9909ZM14.0149 20.501C17.6078 20.501 20.5213 17.5912 20.5213 14.0007C20.5213 10.4102 17.6078 7.5004 14.0149 7.5004C10.422 7.5004 7.50851 10.4102 7.50851 14.0007C7.50851 17.5912 10.422 20.501 14.0149 20.501Z" fill="#D6F253" stroke="#282156"/>
+</svg>

src/members/jean-christophe-piriou.md

@@ -6,6 +6,7 @@ date: '2020-12-01'
 profile: '/images/profiles/jcp-profile.jpg'
 socialLinkedin: 'https://www.linkedin.com/in/piriou-jean-christophe-9bb4bb3b/'
 url: '/members/jean-christophe-piriou'
+location: [43.610632310943636, 3.873482372219893]
 ---
 
 Je suis ingénieur conseil auprès des collectivités dans le domaine de l’eau et l’aménagement du territoire ainsi que Product Owner de la solution informatique NAEGA que je co-développe avec mes collègues des CAE.

src/members/yves-gatesoupe.md

@@ -9,6 +9,7 @@ socialTwitter: 'https://twitter.com/YGdsgn'
 socialLinkedin: 'https://www.linkedin.com/in/yves-gatesoupe-05990b17a/'
 url: '/members/yves-gatesoupe'
 tags: [ web, dev, design, front-end ]
+location: [48.1047728782418, -1.6795127572657111]
 ---
 
 Je suis développeur web indépendant depuis janvier 2020. 

src/team-skills.njk

@@ -32,6 +32,7 @@ permalink: /equipe/{{ tag }}/
     <div class="wrapper box-flex justify-end">
       <a class="return-link" href="/equipe">Voir tous les membres</a>
     </div>
+    {% include "partials/components/map.njk" %}
     {% include "partials/components/contact-form.njk" %}
   </main>
 {% endblock %}