r/lumbung.space
0
0
Fork 0
forked from ruangrupa/lumbung.space
Code Issues Pull Requests Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: ruangrupa/lumbung.space#61
This commit is contained in:
Aadil Ayub
2022-12-19 08:49:51 +01:00
parent 5516e7ff5c 82fa063b9d
commit f61390ef61
12 changed files with 426 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
themes/lumbung-theme/layouts/partials/publishers_post_card.html Normal file
View File

@ -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>

16
themes/lumbung-theme/layouts/publishers/list.html Normal file
View File

@ -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 }}

95
themes/lumbung-theme/layouts/shortcodes/map.html Normal file
View File

@ -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 }}

112
themes/lumbung-theme/static/css/main.css
View File

@ -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)
}