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/assets/css/main.css b/themes/ndt2/assets/css/main.css index 51b0a2a6f8f..206db406690 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,40 @@ 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; + 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/_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..bd219ea72ba 100644 --- a/themes/ndt2/layouts/index.html +++ b/themes/ndt2/layouts/index.html @@ -63,25 +63,38 @@ } venues.data.forEach(v => { - var popupText = `${v.name}`; - // If the venue has an external_url add it as a ink to the popup - if (v.external_url) { - popupText += `  `; - } - // If the venue has a location, append it to the popup text - if (v.location) { - popupText += `
`; - } - // If the venue has a poster, add it to the popup - if (v.poster) { - popupText += `
`; - } + 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 = `${details.name}`; + // If the venue has an external_url add it as a ink to the popup + if (details.external_url) { + popupText += `  `; + } + // If the venue has a location, append it to the popup text + if (details.location) { + popupText += ``; + } + // If the venue has a description, append it to the popup text + if (details.description) { + popupText += ``; + } + // If the venue has a poster, add it to the popup + if (details.poster) { + popupText += ``; + } + 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);