1 files changed, 59 insertions, 19 deletions

diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 9704502..863b417 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,14 +1,27 @@
+{{ define "top-embeds" }}
+<script>
+    let galleryMap = new Map();
+    let map;
+
+    window.addEventListener('popout', (e) => {
+        map.remove();
+        galleryMap.forEach((_, g, m) => {
+            g.destroy();
+        });
+        galleryMap.clear();
+        map = null;
+        galleryMap = null;
+    }, {once: true});
+</script>
+{{ end }}
+
 {{ define "body" }}
-<div class="bg-background-light flex flex-col inset-shadow px-8 py-4 overflow-y-auto">
-    <p class="xs:hidden font-spectral text-2xl font-bold italic text-main-dark tracking-[.0125rem] mb-1">{{ .Title }}</p>
-    <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Published }}: {{ .PublishedDate }}</p>
-    <p class="xs:hidden grow text-lg font-spectral text-secondary">{{ .L.Metadata.Action }}: {{ .ActionDate }}</p>
-    <hr class="xs:hidden border-t-2 border-dotted border-main-dark mt-1 mb-2 w-full ml-auto mr-auto">
+<div class="bg-background-light flex flex-col inset-shadow p-[2.4vmin] overflow-y-auto">
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
-    <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
-    <div id="map-container" class="relative p-1 flex-none ml-auto mr-auto w-[60%] ar-lt-0.8:w-[80%] h-[40dvh] ar-lt-0.8:h-[30dvh]"></div>
-    <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%] ml-auto mr-auto">
+    <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
+    <div id="map-container" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[60%] ar-lt-1.1:w-[80%] h-[40vh] ar-lt-1.1:h-[30vh]"></div>
+    <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
 
     <script>
         function initLocationMap(id, x, y, relativeErrorMeters = 0) {
@@ -35,17 +48,16 @@
                 .openPopup();
         }
 
-        if (map) {
-            map.remove();
-            map = null;
-        }
-
-        setTimeout(() => initLocationMap(
-            'map-container',
-            {{ .MapLocationX }},
-            {{ .MapLocationY }},
-            {{ .MapLocationAreaMeters }}
-        ), 1000);
+        document.addEventListener('htmx:afterRequest', (e) => {
+            if (e.detail.target.id == 'general-page-body') {
+                initLocationMap(
+                    'map-container',
+                    {{ .MapLocationX }},
+                    {{ .MapLocationY }},
+                    {{ .MapLocationAreaMeters }}
+                );
+            }
+        }, {once: true});
     </script>
 {{- end }}
 </div>
@@ -54,3 +66,31 @@
 {{ define "footer" }}
 <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
 {{ end }}
+
+{{ define "bottom-embeds" }}
+<script>
+    let galleryResizeTimeout;
+
+    function resizeCb() {
+        clearTimeout(galleryResizeTimeout);
+        galleryResizeTimeout = setTimeout(() => {
+            if (map !== undefined) {
+                map.invalidateSize();
+            }
+            var oldGalleryMap = new Map(galleryMap);
+            oldGalleryMap.forEach((createFunc, g, map) => {
+                galleryMap.delete(g);
+                g.destroy();
+                createFunc();
+            });
+        }, 300);
+    }
+
+    window.addEventListener('resize', resizeCb);
+
+    document.addEventListener('popout', (e) => {
+        window.removeEventListener('resize', resizeCb);
+        galleryResizeTimeout = null;
+    });
+</script>
+{{ end }}
\ No newline at end of file