GeoJSON support (alshedivat#2130)

Added support for GeoJSON maps.


![image](https://github.com/alshedivat/al-folio/assets/31376482/48e91158-a717-4d01-b6d7-47d45f0580e4)

---------

Signed-off-by: George Araújo <george.gcac@gmail.com>

_includes/head.liquid

@@ -61,3 +61,13 @@
   >
   <script src="{{ '/assets/js/theme.js' | relative_url | bust_file_cache }}"></script>
 {% endif %}
+
+<!-- GeoJSON support via Leaflet -->
+{% if page.map %}
+  <link
+    rel="stylesheet"
+    href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+    crossorigin=""
+  >
+{% endif %}

_includes/scripts/leaflet.liquid

@@ -0,0 +1,28 @@
+{% if page.map %}
+  <script
+    src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+    crossorigin=""
+  ></script>
+  <script>
+    /* Create leaflet map as another node and hide the code block, appending the leaflet node after it
+    this is done to enable retrieving the code again when changing theme between light/dark */
+    document.querySelectorAll('pre>code.language-geojson').forEach((elem) => {
+      const jsonData = elem.textContent;
+      const backup = elem.parentElement;
+      backup.classList.add('unloaded');
+      /* create leaflet node */
+      let mapElement = document.createElement('div');
+      mapElement.classList.add('map');
+      backup.after(mapElement);
+
+      var map = L.map(mapElement);
+      L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxZoom: 19,
+        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      }).addTo(map);
+      let geoJSON = L.geoJSON(JSON.parse(jsonData)).addTo(map);
+      map.fitBounds(geoJSON.getBounds());
+    });
+  </script>
+{% endif %}

_layouts/default.liquid

@@ -48,6 +48,7 @@
     {% include scripts/bootstrap.liquid %}
     {% include scripts/masonry.liquid %}
     {% include scripts/mermaid.liquid %}
+    {% include scripts/leaflet.liquid %}
     {% include scripts/chartjs.liquid %}
     {% include scripts/echarts.liquid %}
     {% include scripts/misc.liquid %}

_posts/2024-01-26-geojson-map.md

@@ -0,0 +1,93 @@
+---
+layout: post
+title: a post with geojson
+date: 2024-01-26 17:57:00
+description: this is what included geojson code could look like
+tags: formatting charts maps
+categories: sample-posts
+map: true
+---
+
+This is an example post with some [geojson](https://geojson.org/) code. To create your own visualization, go to [geojson.io](https://geojson.io/).
+
+````markdown
+```geojson
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}
+```
+````
+
+Which generates:
+
+```geojson
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "coordinates": [
+          [
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -3.162613728707967
+            ],
+            [
+              -59.820894493858034,
+              -2.904625022183211
+            ],
+            [
+              -60.11363029935569,
+              -2.904625022183211
+            ]
+          ]
+        ],
+        "type": "Polygon"
+      }
+    }
+  ]
+}
+```

_sass/_base.scss

@@ -1083,6 +1083,11 @@ nav[data-toggle="toc"] {
 }
 
 .echarts {
+  height: 400px;
   width: 100%;
+}
+
+.map {
   height: 400px;
+  width: 100%;
 }

assets/js/copy_code.js

@@ -5,6 +5,7 @@ codeBlocks.forEach(function (codeBlock) {
     (codeBlock.querySelector("pre:not(.lineno)") || codeBlock.querySelector("code")) &&
     codeBlock.querySelector("code:not(.language-chartjs)") &&
     codeBlock.querySelector("code:not(.language-echarts)") &&
+    codeBlock.querySelector("code:not(.language-geojson)") &&
     codeBlock.querySelector("code:not(.language-mermaid)")
   ) {
     // create copy button