Load venue details dynamically when a map pin is clicked

config.toml

@@ -14,7 +14,7 @@ relativeURLs = true
 [outputs]
     section = ['html', 'rss', 'json']
     home = ['html', 'rss']
-    page = ['html']
+    page = ['html', 'json']
     rss = ['rss']
     taxonomy = ['html', 'rss']
     term = ['html', 'rss']

themes/ndt2/assets/css/main.css

@@ -479,25 +479,57 @@ html, body {
   line-height: 1.4;
   font-weight: normal;
   font-size: 1em; 
+  display: grid;
+  grid-template-areas: 
+    " title          external "
+    " address         address "
+    " description description "
+    " poster           poster ";
+  flex-direction: column;
+  justify-content: space-between;
+  grid-template-columns: 1fr min-content;
+  grid-template-rows: min-content min-content 1fr min-content;
 }
 
 #map .leaflet-popup-content a { 
   font-size: 2.5em; 
   font-weight: bold;
   color: #02b1ec;
 }
+#map .leaflet-popup-content a.popup-name {
+    grid-area: title;
+}
+#map .leaflet-popup-content a.external-link {
+    grid-area: external;
+}
 
 #map .leaflet-popup-content .popup-location { 
   font-size: 2em; 
   font-weight: normal;
   color: #000000;
+  grid-area: address;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
+#map .leaflet-popup-content .popup-description { 
+  font-size: 1.8em; 
+  font-weight: normal;
+  color: #000000;
+  grid-area: description;
+  overflow: hidden;
+}
+
+
 #map .leaflet-popup-content .popup-poster { 
   font-size: 1.8em; 
   font-weight: normal;
   color: #000000;
   font-style: italic;
+  grid-area: poster;
 }
 
 /* Added from posts.html */

themes/ndt2/layouts/_default/item.json.json

@@ -1,10 +1,5 @@
 {
-    "name": "{{ .Title | htmlEscape }}",
     "permalink" : "{{ .Slug }}",
     "lat": "{{ .Params.lat }}",
-    "lng": "{{ .Params.lng }}"{{ if .Params.poster }},
-    "poster": "{{ .Params.poster }}"{{ end }}{{ if .Params.location}},
-    "location": "{{ .Params.location }}"{{ end }}{{ if .Params.external_url}},
-    "external_url": "{{ .Params.external_url }}"
-    {{ end }}
+    "lng": "{{ .Params.lng }}"
 }

themes/ndt2/layouts/_default/single.json.json

@@ -0,0 +1,10 @@
+{
+    "description": {{ .Content | plainify | jsonify }},
+    "permalink" : {{ .Slug | plainify | jsonify }},
+    "name": {{ .Name | plainify | jsonify }},
+    "lat": "{{ .Params.lat }}",
+    "lng": "{{ .Params.lng }}"{{ if .Params.poster }},
+    "poster": {{ .Params.poster | plainify | jsonify }}{{ end }}{{ if .Params.location}},
+    "location": {{ .Params.location | plainify | jsonify }}{{ end }}{{ if .Params.external_url}},
+    "external_url": {{ .Params.external_url | plainify | jsonify }}{{ end }}
+}

themes/ndt2/layouts/index.html

@@ -63,25 +63,38 @@
             }
 
             venues.data.forEach(v => {
-                var popupText = `<a href="${v.permalink}">${v.name}</a>`;
-                // If the venue has an external_url add it as a ink to the popup
-                if (v.external_url) {
-                    popupText += `&nbsp;&nbsp;<a href="${v.external_url}" target="_blank" class="external-link" title="Website"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>`;
-                }
-                // If the venue has a location, append it to the popup text
-                if (v.location) {
-                    popupText += `<br><div class="popup-location">${v.location}</div>`;
-                }
-                // If the venue has a poster, add it to the popup
-                if (v.poster) {
-                    popupText += `<br><div class="popup-poster">Added by: ${v.poster}.</div>`;
-                }
+                const popupText = "loading...";
                 const marker = L.marker({lon: v.lng, lat: v.lat}).bindPopup(popupText);
+                marker.on("click", e => {
+                    /* populate the contents of the popup when you click it
+                       this keeps the size of the index.json down to a minimum */
+                    const popup = e.target.getPopup();
+                    fetch(v.permalink + '/index.json').then(res => res.json()).then(details => {
+                        let popupText = `<a class="popup-name" href="${details.permalink}">${details.name}</a>`;
+                        // If the venue has an external_url add it as a ink to the popup
+                        if (details.external_url) {
+                            popupText += `&nbsp;&nbsp;<a href="${details.external_url}" target="_blank" class="external-link" title="Website"><i class="fa-solid fa-arrow-up-right-from-square"></i></a>`;
+                        }
+                        // If the venue has a location, append it to the popup text
+                        if (details.location) {
+                            popupText += `<div class="popup-location">${details.location}</div>`;
+                        }
+                        // If the venue has a description, append it to the popup text
+                        if (details.description) {
+                            popupText += `<div class="popup-description">${details.description}</div>`;
+                        }
+                        // If the venue has a poster, add it to the popup
+                        if (details.poster) {
+                            popupText += `<div class="popup-poster">Added by: ${details.poster}.</div>`;
+                        }
+                        popup.setContent(popupText);
+                        popup.update();
+                    })
+                })
 
                 marker.addTo(cluster);
                 allMarkers.push(marker); // Store marker reference
 
-                console.log({jumpToSlug, p: v.permalink, eq: jumpToSlug == v.permalink})
                 if (jumpToSlug && jumpToSlug == v.permalink) {
                     console.log("Fly, my pretties")
                     map.flyTo([v.lat, v.lng], 19);