From 98f519215a32653d4f94a30d6fae90f1181b5b6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pascal=20Eng=C3=A9libert?= <tuxmain@zettascript.org>
Date: Wed, 26 Apr 2023 11:24:49 +0200
Subject: [PATCH] Map: positions

---
 content/_index.md             | 22 +++++++++++++++++++++-
 sass/css/base.scss            |  6 ++++++
 templates/base.html           |  1 +
 templates/shortcodes/map.html | 15 +++++++++++++++
 4 files changed, 43 insertions(+), 1 deletion(-)
 create mode 100644 templates/shortcodes/map.html

diff --git a/content/_index.md b/content/_index.md
index 2cac32b..cba7d94 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -1,5 +1,7 @@
 +++
 title = "Librezo"
+[extra]
+leaflet = 1
 +++
 
 <img class="big-logo" alt="Logo Librezo" src="/img/logo-color-light.png"/>
@@ -7,7 +9,7 @@ title = "Librezo"
 <span class="slogan3">Collectif d'artisans numériques</span>
 
 <div class="cities nn">
-	<p>Aix &#8211; Bastia &#8211; Cajarc &#8211; Cambrai &#8211; Cévennes &#8211; Grasse &#8211; Le&nbsp;Havre &#8211; Marseille &#8211; Montreuil</p>
+	<p>Aix &#8211; Bastia &#8211; Cajarc &#8211; Cambrai &#8211; Grasse &#8211; Le&nbsp;Havre &#8211; Marseille &#8211; Montreuil</p>
 	<div class="madein-wrapper">
 		<img class="madein" alt="Made in Chez Vous" src="/img/madein-purple.png"/>
 	</div>
@@ -66,4 +68,22 @@ title = "Librezo"
 ) %}
 	J'ai fait appel à Librezo pour créer les sites web de Jarditerre et de Verdun Coliving. J’ai été très satisfaite de leur aide et de leur réactivité que ce soit par email ou par téléphone. Ils m’offrent aussi l’hébergement, le tout en <a href="https://monnaie-libre.fr" target="_blank">monnaie libre</a>, ce qui montre leur fort engagement pour un monde libre et meilleur, et nous permet d’en faire autant dans nos activités.
 {% end %}
+
 </div>
+
+{% map() %}
+[42.6998, 9.4518], // Bastia
+[44.4742, 1.8296], // Cajarc
+[50.1718, 3.2305], // Cambrai
+[43.6578, 6.9228], // Grasse
+[49.4927, 0.1641], // Le Havre
+[43.3099, 5.4127], // Marseille
+[43.6048, 3.8818], // Montpellier
+[48.8584, 2.4371], // Montreuil
+[47.2084, -1.6026], // Nantes
+[48.8505, 2.3380], // Paris
+[43.2926, -0.3703], // Pau
+[48.1077, -1.6795], // Rennes
+[46.0321, 4.0730], // Roanne
+[43.5931, 1.4272], // Toulouse
+{% end %}
diff --git a/sass/css/base.scss b/sass/css/base.scss
index 74d51ac..0e01b40 100644
--- a/sass/css/base.scss
+++ b/sass/css/base.scss
@@ -156,3 +156,9 @@ h3 {
 	height: 1px;
 	background: linear-gradient(0.25turn, $blue, $violet);
 }
+
+#map {
+	width: 100%;
+	height: 600px;
+	max-height: calc(100vh - 64px);
+}
diff --git a/templates/base.html b/templates/base.html
index f0ddbc6..aaae616 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,6 +5,7 @@
 		<meta charset="utf-8"/>
 		<title>{% block title %}{% endblock title %}</title>
 		<link rel="stylesheet" href="/css/base.css"/>
+		{% if page.extra.leaflet or section.extra.leaflet %}<link rel="stylesheet" href="/vendor/leaflet/leaflet.css"/>{% endif %}
 		<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
 		<meta name="viewport" content="width=device-width"/>
 		<meta name="robots" content="noindex,nofollow"/><!-- TODO remove this for production -->
diff --git a/templates/shortcodes/map.html b/templates/shortcodes/map.html
new file mode 100644
index 0000000..214b3c2
--- /dev/null
+++ b/templates/shortcodes/map.html
@@ -0,0 +1,15 @@
+<div id="map" class="nn"></div>
+<script type="text/javascript" src="/vendor/leaflet/leaflet.js"></script>
+<script type="text/javascript">
+	var map = L.map('map').setView([46.725, 2.834], 6);
+	L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+		maxZoom: 10,
+		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+	}).addTo(map);
+	var places = [
+		{{body|safe}}
+	];
+	for(i in places) {
+		L.marker(places[i]).addTo(map);
+	}
+</script>