From 6c4e38486f88cf29635f0d3dc71d3bd129ac8e62 Mon Sep 17 00:00:00 2001
From: Stuart Langridge <sil@kryogenix.org>
Date: Wed, 11 Jun 2025 08:52:51 +0100
Subject: [PATCH 1/5] Generate a JSON version of each venue alongside the HTML,
 and then remove full data from the main json file; when a venue map pin is
 clicked, dynamically load the full details for the venue at that point from
 the new individual JSON file at that point

---
 config.toml                                   |  2 +-
 themes/ndt2/layouts/_default/item.json.json   |  7 +---
 themes/ndt2/layouts/_default/single.json.json | 10 +++++
 themes/ndt2/layouts/index.html                | 41 ++++++++++++-------
 4 files changed, 39 insertions(+), 21 deletions(-)
 create mode 100644 themes/ndt2/layouts/_default/single.json.json

diff --git a/config.toml b/config.toml
index 247407777ba..d71c560316a 100644
--- a/config.toml
+++ b/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']
diff --git a/themes/ndt2/layouts/_default/item.json.json b/themes/ndt2/layouts/_default/item.json.json
index 358f47ed1da..9fa5ec9a9ea 100644
--- a/themes/ndt2/layouts/_default/item.json.json
+++ b/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 }}"
 }
\ No newline at end of file
diff --git a/themes/ndt2/layouts/_default/single.json.json b/themes/ndt2/layouts/_default/single.json.json
new file mode 100644
index 00000000000..aa59f3656e8
--- /dev/null
+++ b/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 }}
+}
\ No newline at end of file
diff --git a/themes/ndt2/layouts/index.html b/themes/ndt2/layouts/index.html
index acfa2fa196c..55a1610cfb3 100644
--- a/themes/ndt2/layouts/index.html
+++ b/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 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 += `<br><div class="popup-location">${details.location}</div>`;
+                        }
+                        // If the venue has a description, append it to the popup text
+                        if (details.description) {
+                            popupText += `<br><div class="popup-description">${details.description}</div>`;
+                        }
+                        // If the venue has a poster, add it to the popup
+                        if (details.poster) {
+                            popupText += `<br><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);

From 5618718109ac6a0f025204f92a70573a3139c960 Mon Sep 17 00:00:00 2001
From: Stuart Langridge <sil@kryogenix.org>
Date: Wed, 11 Jun 2025 09:47:34 +0100
Subject: [PATCH 2/5] Tweak the styling of displayed popups to ellipsise stuff
 and not overflow

---
 themes/ndt2/assets/css/main.css | 33 +++++++++++++++++++++++++++++++++
 themes/ndt2/layouts/index.html  |  8 ++++----
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/themes/ndt2/assets/css/main.css b/themes/ndt2/assets/css/main.css
index 51b0a2a6f8f..62e4337b549 100644
--- a/themes/ndt2/assets/css/main.css
+++ b/themes/ndt2/assets/css/main.css
@@ -479,6 +479,16 @@ 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 { 
@@ -486,18 +496,41 @@ html, body {
   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;
+  xwhite-space: nowrap;
+  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 */
diff --git a/themes/ndt2/layouts/index.html b/themes/ndt2/layouts/index.html
index 55a1610cfb3..bd219ea72ba 100644
--- a/themes/ndt2/layouts/index.html
+++ b/themes/ndt2/layouts/index.html
@@ -70,22 +70,22 @@
                        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 href="${details.permalink}">${details.name}</a>`;
+                        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 += `<br><div class="popup-location">${details.location}</div>`;
+                            popupText += `<div class="popup-location">${details.location}</div>`;
                         }
                         // If the venue has a description, append it to the popup text
                         if (details.description) {
-                            popupText += `<br><div class="popup-description">${details.description}</div>`;
+                            popupText += `<div class="popup-description">${details.description}</div>`;
                         }
                         // If the venue has a poster, add it to the popup
                         if (details.poster) {
-                            popupText += `<br><div class="popup-poster">Added by: ${details.poster}.</div>`;
+                            popupText += `<div class="popup-poster">Added by: ${details.poster}.</div>`;
                         }
                         popup.setContent(popupText);
                         popup.update();

From 3e50913fa69fa1b874cc3911f28c0ccca24bf263 Mon Sep 17 00:00:00 2001
From: Stuart Langridge <sil@kryogenix.org>
Date: Wed, 11 Jun 2025 09:48:05 +0100
Subject: [PATCH 3/5] Tweak the styling of displayed popups to ellipsise stuff
 and not overflow, tidy

---
 themes/ndt2/assets/css/main.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/themes/ndt2/assets/css/main.css b/themes/ndt2/assets/css/main.css
index 62e4337b549..206db406690 100644
--- a/themes/ndt2/assets/css/main.css
+++ b/themes/ndt2/assets/css/main.css
@@ -509,7 +509,6 @@ html, body {
   color: #000000;
   grid-area: address;
   overflow: hidden;
-  xwhite-space: nowrap;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;

From 0f6b16e3f24735a192345934ff03a16a0e3a9351 Mon Sep 17 00:00:00 2001
From: Stuart Langridge <sil@kryogenix.org>
Date: Wed, 11 Jun 2025 09:58:21 +0100
Subject: [PATCH 4/5] Shorten addresses if possible A succession of little JS
 functions each try to shorten the address displayed in the map popup bubble.
 The reason for this approach is that it's easy to add new functions to the
 SHORTENERS list as and when we think of them. This does not change the data
 stored in the markdown files; it only changes the address displayed in the
 popup bubbles on the map. Note that this depends on and includes the
 dynamically-load-bubble-text PR at
 https://github.com/NerdyDayTrips/website/pull/593 This should hopefully
 alleviate the problems that motivated
 https://github.com/NerdyDayTrips/website/pull/558

---
 themes/ndt2/layouts/index.html | 28 +++++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/themes/ndt2/layouts/index.html b/themes/ndt2/layouts/index.html
index bd219ea72ba..1ecb6775eb7 100644
--- a/themes/ndt2/layouts/index.html
+++ b/themes/ndt2/layouts/index.html
@@ -51,6 +51,32 @@
 </style>
 
 <script>
+const SHORTENERS = [
+    address => address.replace(/, England,/g, ""),
+    address => address.replace(/, Wales,/g, ""),
+    address => address.replace(/, Alba \/ Scotland,/g, ""),
+    address => address.replace(/, United States of America$/, ", USA"),
+];
+function shorten(address, target_length) {
+    // successively try different address shortening techniques
+    // to try to get the address down below target_length.
+    // Add shorteners to this list in order of aggressiveness.
+    // If we've tried all shorteners and it's still too long, 
+    // tough, return anyway.
+    console.log("shorten", address, address.length);
+
+    // if it's already short enough, don't do anything.
+    if (address.length <= target_length) return address;
+
+    SHORTENERS.forEach(shortener => {
+        address = shortener(address);
+        console.log("  tried a shortener", address, address.length);
+        if (address.length <= target_length) return address;
+    })
+    // didn't work, still too long, oh well
+    return address;
+}
+
 var allMarkers = [];
 async function loadMarkers(L, map) {
     fetch("./daytrip/index.json")
@@ -77,7 +103,7 @@
                         }
                         // If the venue has a location, append it to the popup text
                         if (details.location) {
-                            popupText += `<div class="popup-location">${details.location}</div>`;
+                            popupText += `<div class="popup-location">${shorten(details.location, 40)}</div>`;
                         }
                         // If the venue has a description, append it to the popup text
                         if (details.description) {

From 99a2064d82d65a9c49b90b2468d127df1c0d4eff Mon Sep 17 00:00:00 2001
From: Stuart Langridge <sil@kryogenix.org>
Date: Wed, 11 Jun 2025 10:01:58 +0100
Subject: [PATCH 5/5] oops, target address length should be 100, not 40

---
 themes/ndt2/layouts/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/themes/ndt2/layouts/index.html b/themes/ndt2/layouts/index.html
index 1ecb6775eb7..242c2299ca4 100644
--- a/themes/ndt2/layouts/index.html
+++ b/themes/ndt2/layouts/index.html
@@ -103,7 +103,7 @@
                         }
                         // If the venue has a location, append it to the popup text
                         if (details.location) {
-                            popupText += `<div class="popup-location">${shorten(details.location, 40)}</div>`;
+                            popupText += `<div class="popup-location">${shorten(details.location, 100)}</div>`;
                         }
                         // If the venue has a description, append it to the popup text
                         if (details.description) {