Merge pull request 'feature/leaflet-map' (#61) from feature/leaflet-map into main

Reviewed-on: #61

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "languageTool.enabled": true
+}

README.md

@@ -85,3 +85,53 @@ After a `git pull`, you may need to run `pip install git+https://git.autonomic.z
 ### Deploy a new `feeds_list.txt`
 
 Increment the `_v<n>` (e.g. `v1` -> `v2`) in [`compose.yml`](./compose.yml) `configs` to avoid any deployment error.
+
+### Adding a leaflet map to a page
+
+To add a new leaflet map use the shortcode:
+```
+{{< map geoJson="data/geojsonContributors.json">}}
+```
+This way you can display a map on any page with any data.
+
+To add data to the map, add a new json file to the `data/` directory and use the [geojson datascructure](https://geojson.org/) in the json file.
+Then point the `geoJson="data/newfile.json"` in the shortcode to the new file.
+
+If you wanna display new test in the tooltips just add a new property key/value.
+
+e.g.
+
+```
+      "properties": {
+        "a": "new value",
+      }
+```
+One catcha is that Javascipt always output the order of the object in alfabetic order, there is nothing to do about this.
+
+Key names `groupName` and `listOfNames` are reserved.
+This will display it in the way it does now on the map
+e.g.
+```
+"properties": {
+  "groupName": "The Question of Funding",
+   "listOfNames": [
+     "Adele Jarrar",
+     "Amany Khalifa",
+     ]
+}
+```
+So just to be clear if you want extra value under it, give the key name a letter that is after the `l` in the alfabet.
+e.g.
+```
+"properties": {
+ "groupName": "The Question of Funding",
+  "listOfNames": [
+     "Adele Jarrar",
+     "Amany Khalifa",
+    ],
+  "m": "value under the list"
+}
+```
+
+The new added value will alway be displayed the same and will be in a `<p>` tag.
+

content/contributors.md

@@ -5,6 +5,8 @@ draft: false
 hidden: true
 ---
 
+{{< map geoJson="data/geojsonContributors.json">}}
+
 ## Lumbung members
 - **The Question of Funding**
     - Adele Jarrar

content/publishers/_index.html

@@ -0,0 +1,8 @@
+---
+draft: false
+---
+<h1>Lumbung of Publishers</h1>
+
+<article class="map">
+  {{< map geoJson="data/geojsonContributors.json">}}
+</article>

content/publishers/about-lumbung-publishers.md

@@ -0,0 +1,47 @@
+---
+title: "About lumbung of Publishers"
+date: 2022-10-18T13:33:21+05:00
+draft: false
+authors: ["lumbung publishers"]
+categories: ["shouts"]
+title: lumbung books tutorial
+tags: [ "publishers" ]
+---
+
+Within the cultural sphere, independent publishers and publishing collectives are particularly dependent on solidarity and the sharing of resources to survive. During documenta fifteen, lumbung of Publishers offers independent publishers the possibility to get to know each other and to share knowledge. The goal is to create a network that exists beyond the 100-day duration of documenta fifteen.
+
+![documenta fifteen: lumbung of Publishers, Harvest by Daniela and Camila from HAMBRE, 2022](https://documenta-fifteen.de/wp-content/uploads/2022/06/lumbung-of-Publishers-1280x838.jpeg)
+
+Among the invited publishers are the publishing collective consonni from Bilbao, the graphic experimentation workshop La Impresora from Puerto Rico, Ljubljana-based Stripburger, Rotopol from Kassel, and many more.
+
+Two stakeholders from each publishing house travel to Kassel to first participate in a two-day internal workshop. During the first Meydan weekend, from Friday, July 8 until Sunday, July 10, 2022, the publishers design a three-day public program, with presentations, workshops, and lectures. lumbung of Publishers offers visitors of documenta fifteen the possibility to get to know the independent publishers and their programs from different countries and to gain an insight into their survival strategies.
+
+The participating publishers and collectives showcase their publications and produce new ones on the spot. This happens in collaboration with lumbung Press, which is a collective project of lumbung members and lumbung artists for flexible and process-oriented production of print products on site in Kassel.
+
+lumbung Press is a partner project between documenta fifteen and Kunsthaus Göttingen.
+
+## LUMBUNG OF PUBLISHERS COLLABORATORS ARE CURRENTLY:
+- Abdul Halik Azeez
+- Bananafish Books
+- BOLOHO (lumbung artists)
+- consonni
+- Cooperativa Cráter Invertido
+- David Kaiza
+- Erick Beltrán (lumbung artist)
+- HAMBRE
+- Jalada
+- Kayfa ta
+- kuš!
+- Kutikuti
+- La Impresora
+- Marjin Kiri
+- microutopías press
+- N’fana Diakite
+- Nieves
+- Reading Room
+- Relampago
+- Rotopol Press
+- Strapazin
+- Stripburger
+
+![documenta fifteen: lumbung of Publishers, screenshot during a meeting, 2022](https://documenta-fifteen.de/wp-content/uploads/2022/06/lumbung-of-Publishers_2-1280x847.jpeg)

content/publishers/comics-reading.md

@@ -0,0 +1,21 @@
+---
+title: "Comics Reading"
+date: 2022-10-18T13:31:58+05:00
+draft: false
+authors: ["lumbung publishers"]
+categories: ["shouts"]
+title: lumbung books tutorial
+tags: [ "publishers" ]
+---
+
+lumbung of Publishers: Comics Reading is an event by lumbung of Publishers together with Rotopol and friends.
+
+## PARTLY BARRIER-FREE
+Access:
+
+Ground-level entrance via Obere Königsstraße. The entrance via Treppenstraße is not wheelchair accessible as there are several steps, but the second level of ruruHaus can be reached via an in-house elevator (140 x 160 cm).
+
+## DIRECTIONS
+Entrance via Treppenstraße
+
+Obere Königsstraße 43, 34117 Kassel

content/publishers/lumbung-books-tutorial.md

@@ -0,0 +1,14 @@
+---
+date: 2022-10-18
+draft: false
+authors: ["lumbung publishers"]
+categories: ["shouts"]
+title: lumbung books tutorial
+tags: [ "publishers" ]
+---
+
+In this short video you learn how you can share digital publications using books.lumbung.space:
+
+https://tv.lumbung.space/w/p/vpiJrFaFNxnCi7c5dEmnN5
+
+Video made by Varia member Aggeliki (Kiki) Diakrousi while she was at Kefalonia, Greece in August 2022

data/geojsonContributors.json

@@ -0,0 +1,33 @@
+{
+  "type": "FeatureCollection",
+  "features": [
+    {
+      "type": "Feature",
+      "geometry": {
+        "type": "Point",
+        "coordinates": [34.46684826773766, 31.501803673432892]
+      },
+      "properties": {
+        "groupName": "The Question of Funding",
+        "listOfNames": [
+          "Adele Jarrar",
+          "Amany Khalifa",
+          "Dena Matter",
+          "Fayrouz Sharqawi",
+          "Martin Heller",
+          "Mohammad Hawajri",
+          "Mohammad Abu Sal",
+          "Noor Abed",
+          "Raed Issa",
+          "Raoof Alajouri",
+          "Rayya Badran",
+          "Siwar Kraitm",
+          "Yazan Khalili"
+        ],
+        "video": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+        "iframe": "https://tv.lumbung.space/videos/embed/d5b26273-cb7e-4f5e-9041-5694a504405e?title=0",
+        "audio": "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3"
+      }
+    }
+  ]
+}

themes/lumbung-theme/layouts/partials/publishers_post_card.html

@@ -0,0 +1,26 @@
+<div class='publishers card {{ .Params.feed_name }}'>
+  <article class="h-entry publishers">
+    {{ $postPermalink := .Permalink}}
+    <a href="{{ .Permalink }}" class="link-wrapper">
+      <header>
+        <h2 class="p-name">
+          {{ .Title }}
+        </h2>
+      </header>  
+      <div class="p-summary">
+        <div class="summary-text">
+          {{ .Summary }}...
+        </div>
+      </div>
+        
+      <footer class='post-footer'>
+        <svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
+          <path d="M10.2172 3.892C9.86979 3.02585 9.33722 2.34509 8.61023 1.77874C8.23826 1.49028 7.72957 1.04191 7.21547 0.839212C7.21382 0.703503 7.14487 0.575079 6.97767 0.503871C5.42624 -0.162284 3.69503 0.311299 2.52647 1.51482C1.94635 2.11223 1.51951 2.8478 1.21108 3.62501C0.914861 4.3676 0.507572 5.32483 0.948415 6.07996C1.00646 6.17836 1.09356 6.24193 1.1908 6.27306C1.2735 7.35573 1.57765 8.46801 2.37847 9.21874C3.2325 10.0162 4.43613 10.3053 5.5673 10.1773C6.72371 10.0468 7.96432 9.57061 8.8816 8.82474C9.01086 8.71974 9.1274 8.60844 9.23337 8.49296C9.27968 8.4924 9.32805 8.4875 9.37839 8.4718C11.3643 7.82491 10.8101 5.37347 10.2172 3.892Z" />
+        </svg>
+        <time class="dt-published" datetime="{{ .Date.Format `Jan 02 2006` }}">
+          {{ .Date.Format "Jan 02, 2006" }}
+        </time>
+      </footer>            
+    </a>
+  </article>
+</div>

themes/lumbung-theme/layouts/publishers/list.html

@@ -0,0 +1,16 @@
+{{ define "main" }}
+  <main class="publishers-page">
+    {{.Content}}
+
+    <section class='entries'>
+      <div class="h-feed">
+        {{ range where (.Paginator 13).Pages "Params.hidden" "ne" "true" }}
+          {{- partial "publishers_post_card.html" . -}}
+        {{ end }}
+      </div>
+
+      <nav class="pagination">
+        {{ template "_internal/pagination.html" . }}
+      </nav>
+  </main>
+{{ end }}

themes/lumbung-theme/layouts/shortcodes/map.html

@@ -0,0 +1,95 @@
+{{ with .Get "geoJson" }}
+{{ $geoJson := . }}
+{{ $data := getJSON $geoJson }}
+<div>
+    <!-- Leaflet's CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
+        integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
+        crossorigin="" />
+
+    <!-- Make sure you put this AFTER Leaflet's CSS -->
+    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
+        integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
+        crossorigin=""></script>
+
+    <div id="map"></div>
+
+    <style>
+        #map {
+            width: 100%;
+            padding-bottom: 70%;
+            /* height: 500px; */
+        }
+
+        .fa-icon-marker {
+            text-align: center;
+            width: 100%;
+        }
+
+        .download-track {
+            background-color: #e1e1e1;
+            text-align: center;
+            margin-bottom: 25px;
+            border-radius: 0 0 10px 10px;
+            cursor: pointer;
+        }
+    </style>
+
+    <script>
+        // Utils
+        function properties(feature, layer) {
+            // Iterate over the properties keys
+            // NOTE: there is no way for javascipt to preserve the order of de declaration of object values.
+            // JS will just print in alfabetical order (so if you wanna order it name the keys in  alfabetical order like 'a', 'b', 'c')
+            const objectOrder = {
+                ...feature.properties,
+                "AgroupName": feature.properties.groupName,
+                "BlistOfNames": feature.properties.listOfNames,
+            }
+            if (objectOrder?.groupName) { delete objectOrder.groupName }
+            if (objectOrder?.listOfNames) { delete objectOrder.listOfNames }
+
+            const newObjectOrder = Object.keys(objectOrder).sort()
+
+            const textOutput = newObjectOrder.map(function (key, index) {
+                console.log(key, objectOrder[key])
+                if (!objectOrder[key]) return
+                if (key === 'AgroupName') {
+                    return '<h1>' + objectOrder[key] + '</h1>'
+                } else if (key === 'BlistOfNames') {
+                    return '<div style="padding-bottom: 12px"><span><strong>Members:</strong></span><br>' + objectOrder[key].map(function (item) { return '• <span>' + item + '</span><br>' }).join('') + '</div>'
+                } else if (key === 'iframe') {
+                    return '<iframe src="' + objectOrder[key] + '" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups" style="width: 100%; margin-top: 12px; margin-bottom: 12px;" frameborder="0"></iframe>'
+                } else if (key === 'video') {
+                    return '<video width="320" controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></video>'
+                } else if (key === 'audio') {
+                    return '<audio controls style="padding-bottom: 12px; width: 100%;"><source src="' + objectOrder[key] + '"></audio>'
+                } else {
+                    return '<p>' + objectOrder[key] + '</p>'
+                }
+            });
+
+            layer.bindPopup(textOutput.join(''), { maxHeight: 500, innerWidth: 400 })
+        }
+
+        var map = L.map('map').setView([-7.2344, 108.3211], 3);
+
+        window.addEventListener('load', (event) => {
+            map.invalidateSize();
+        });
+
+        // Init map
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '© OpenStreetMap'
+        }).addTo(map);
+
+        // Add markers
+        L.geoJSON({{ $data }}, {
+            onEachFeature: properties
+        }).addTo(map);
+
+    </script>
+
+</div>
+{{ end }}

themes/lumbung-theme/static/css/main.css

@@ -1766,7 +1766,7 @@ a.timeline-url {
     /* Timeline Events - Right Side */
     .timeline-event:nth-child(2n) {
         margin-right: -5vw;
-    }
+}
 
     .timeline-event:nth-child(36n + 8), .timeline-event:nth-child(36n + 24) {
         margin-right: -6vw;
@@ -1793,3 +1793,113 @@ a.timeline-url {
         padding: 0;
     }
 }
+
+
+/*===============================================
+Styles for publishers page 
+================================================= */
+
+.publishers-page .map {
+    margin-block: 2rem 4rem;
+    border: 1px solid;
+}
+
+.card.publishers {
+    border: 2px solid var(--social-dark);
+    background-color: var(--social-light);
+    max-width: min-content;
+    margin-bottom: 2em;
+    flex: auto;
+    margin: 0 3em 3em 0;
+    align-self: start;
+    color: var(--social-dark);
+    transition: transform 0.1s ease-in-out;
+}
+
+.card.publishers .link-wrapper {
+    text-decoration: none;
+    color: inherit;
+}
+
+.card.publishers:hover {
+    transform: rotate(5deg);
+}
+
+.h-entry.publishers header {
+    display: flex;
+    flex-direction: column;
+}
+
+.h-entry.publishers header h2 {
+    padding: 0.5em 0.5em 0.2em 0.5em;
+    margin: 0;
+    border: none;
+}
+
+.h-entry.publishers header h2:hover {
+    cursor: pointer;
+}
+
+.h-entry.publishers header h2 a {
+    text-decoration: none;
+    color: var(--social-dark);
+}
+
+.h-entry.publishers header time {
+    text-align: right;
+    padding: 0.6em 0.8em;
+    font-size: 1rem;
+}
+
+.card.publishers .header-metadata {
+    align-items: center;
+}
+
+.card.publishers .header-metadata .dt-published {
+    border-bottom: 2px solid var(--social-dark);
+}
+
+.card.publishers .filler {
+    min-height: 1rem;
+}
+
+.card.publishers .author.p-author {
+    border-color: var(--social-dark);
+    padding: 0.5em 1.2em 0.5em 1.2em;
+}
+
+.card.publishers .p-summary {
+    display: flex;
+}
+
+.card.publishers .p-summary.landscape {
+    flex-direction: column;
+}
+
+.card.publishers .summary-image > img {
+    display: inherit;
+}
+
+.card.publishers .summary-text {
+    font-size: 18px;
+}
+
+.card.publishers .footer-filler {
+    border-left: 2px solid var(--social-dark);
+    border-top: none;
+}
+
+.card.publishers .post-footer {
+    border-top: 2px solid var(--social-dark);
+    flex-flow: row;
+    font-size: 0.9rem;
+    background-color: var(--social-light);
+    color: var(--social-dark);
+    padding: 1em;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.card.publishers .post-footer svg {
+    fill: var(--social-dark)
+}