feat: combined map widget

feat: migrate all static to cdn feat: use 560p thumbnails for multitone backgrounds
author: SayaAndy <saya.andy@posteo.com> 2026-05-18 00:15:41 +0700
committer: SayaAndy <saya.andy@posteo.com> 2026-05-18 00:15:41 +0700
commit: 6418da32d978a8b70d38f1911a154e4dcc33202e (patch)
tree: 60aa81938ebd1c48d8e276eac4733c8955882046 /views
parent: 0825abc878ab02ab21bd3cee3265d86576492d20 (diff)
download: web-6418da32d978a8b70d38f1911a154e4dcc33202e.tar.gz
web-6418da32d978a8b70d38f1911a154e4dcc33202e.zip
6 files changed, 147 insertions, 158 deletions
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index e380ef3..908a78c 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -22,15 +22,23 @@
         {{- end }} {{- end }}
         <link
             rel="stylesheet"
-            href="{{ .StaticStorageBaseUrl }}/fonts/fonts.css"
+            href="{{ .StaticStorage.BaseUrl }}/fonts/fonts.css"
         />
         <link
             rel="stylesheet"
-            href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
+            href="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
         />
         <link
             rel="stylesheet"
-            href="{{ .StaticStorageBaseUrl }}/libs/glightbox/3.3.0/css/glightbox.min.css"
+            href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
+        />
+        <link
+            rel="stylesheet"
+            href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
+        />
+        <link
+            rel="stylesheet"
+            href="{{ .StaticStorage.BaseUrl }}/libs/glightbox/3.3.0/css/glightbox.min.css"
         />
         <link rel="stylesheet" href="/output.css" />
         <link
@@ -55,6 +63,11 @@
             {{ . }}
         </script>
         {{- end }}
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
     </head>
 
     <body
@@ -160,8 +173,6 @@
             }
         </script>
 
-        <script src="{{ .StaticStorageBaseUrl }}/libs/glightbox/3.3.0/js/glightbox.min.js"></script>
-
         <script>
             function sfc32(a, b, c, d) {
                 return function () {
@@ -342,7 +353,7 @@
                         const frameCenters = new Array(4);
                         for (i = 1; i <= 4; i++) {
                             let frame = document.createElement("img");
-                            frame.src = `{{ .StaticStorageBaseUrl }}/themes/ram/ram-frame${i}.webp`;
+                            frame.src = `{{ .StaticStorage.BaseUrl }}/themes/ram/ram-frame${i}.webp`;
                             frame.classList.add(
                                 "ram-frame",
                                 "theme-decor",
@@ -419,11 +430,9 @@
             mq.addEventListener('change', (e) => switchColorScheme(e.matches));
         </script>
 
-        <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/imagesloaded/5.0.0/imagesloaded.pkgd.min.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/packery/3.0.0/dist/packery.pkgd.min.js"></script>
 
         <script>
             // Enable fitWidth-like attribute for Packery. Source: https://codepen.io/desandro/pen/kVmLYz
diff --git a/views/messages/new-post.html b/views/messages/new-post.html
index e956253..4e586e2 100644
--- a/views/messages/new-post.html
+++ b/views/messages/new-post.html
@@ -2,7 +2,7 @@
 <p>{{ l $.Lang "Mail" "NewPost" "Intro" }}</p>
 <table>
     <tr>
-        <td rowspan="3"><a href="https://{{ .ClientHost }}/{{ .Lang }}/blog/{{ .Post.FileName }}"><img src="{{ printf .ThumbnailBaseUrl .Post.Metadata.Thumbnail }}"></a></td>
+        <td rowspan="3"><a href="https://{{ .ClientHost }}/{{ .Lang }}/blog/{{ .Post.FileName }}"><img src="{{ printf .PhotoStorage.Thumbnail320p.BaseUrl .Post.Metadata.Thumbnail }}"></a></td>
         <td class="darkened" style="font-size: 24px"><a style="color: #273de1 !important;" href="https://{{ .ClientHost }}/{{ .Lang }}/blog/{{ .Post.FileName }}">{{ .Post.Metadata.Title }}</a></td>
     </tr>
     <tr>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 4d8ba06..c02c3f5 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -4,7 +4,7 @@
 <article class="relative bg-paper bg-background-light flex flex-col px-8 py-4 overflow-y-auto">
     <div class="flex flex-col sm:flex-row h-[30cqb] sm:h-[15cqb]">
         <div class="grow shrink-2 flex-1 overflow-y-auto -ml-8 -mt-4 {{if .Medley}}max-sm:-mr-8{{else}}-mr-8{{end}} z-1 shadow-elevation-2">
-            <div class="multitone min-h-full" style="--multitone-bg: url({{ printf $.ThumbnailBaseUrl .Thumbnail }});">
+            <div class="multitone min-h-full" style="--multitone-bg: url({{ printf $.PhotoStorage.Thumbnail560p.BaseUrl .Thumbnail }});">
                 <div class="ml-8 py-4">
                     <h1 class="max-xs:flex flex-row content-center [@media(max-height:32rem)]:block hidden font-gentium text-2xl font-bold italic text-main-hard tracking-[.0125rem] mb-1">
                         <div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
@@ -39,48 +39,12 @@
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
     <hr class="border-t-3 border-dotted border-main-hard 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-[80%] lg:w-[60%] h-[30dvh] md:h-[40dvh]"></div>
+    <div id="map-outer-container" class="relative p-1 flex-none ml-auto mr-auto w-[80%] lg:w-[60%] h-[30dvh] md:h-[40dvh]"
+        hx-get="/api/v1/map" hx-vals='{"lang": "{{ .Lang }}", "codename": "{{ .Codename }}", "zoom": 8}' hx-target="this" hx-swap="innerHTML" hx-trigger="load">
+    </div>
     <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%] ml-auto mr-auto">
 
     <script>
-        function initLocationMap(id, x, y, relativeErrorMeters = 0) {
-            map = L.map(id).setView([x, y], 8);
-
-            protomapsL.leafletLayer({
-                url: 'https://cdn.saya.uz/map/global.pmtiles',
-                maxZoom: 15,
-                flavor: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
-                lang: '{{ .Lang }}'
-            }).addTo(map);
-
-            if (relativeErrorMeters != 0) {
-                var circle = L.circle([x, y], {
-                    color: '#8a9d8a',
-                    fillColor: '#8a9d8a',
-                    fillOpacity: 0.15,
-                    radius: relativeErrorMeters
-                }).addTo(map);
-            }
-
-            var marker = L.marker([x, y], {
-                title: '{{ .Title }}',
-            }).addTo(map)
-                .bindPopup('<span><b>{{ .Title }}</b><br><a href="https://www.openstreetmap.org/#map=13/{{ .MapLocationX }}/{{ .MapLocationY }}">{{ .MapLocationX }}, {{ .MapLocationY }}</a></span>')
-                .openPopup();
-        }
-
-        if (map) {
-            map.remove();
-            map = null;
-        }
-
-        setTimeout(() => initLocationMap(
-            'map-container',
-            {{ .MapLocationX }},
-            {{ .MapLocationY }},
-            {{ .MapLocationAreaMeters }}
-        ), 1000);
-
         var lightbox = GLightbox({
             selector: '.glightbox',
             moreLength: 0
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index f460d95..4d1853f 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -19,7 +19,7 @@
         <link rel="canonical" href="{{ .CanonicalEndpoint }}/{{ .Lang }}/map" />
         <link
             rel="stylesheet"
-            href="{{ .StaticStorageBaseUrl }}/fonts/fonts.css"
+            href="{{ .StaticStorage.BaseUrl }}/fonts/fonts.css"
         />
         {{ block "header" . }}{{ end }}
         <link rel="stylesheet" href="/output.css" />
@@ -42,16 +42,20 @@
         />
         <link
             rel="stylesheet"
-            href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
+            href="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.css"
         />
         <link
             rel="stylesheet"
-            href="{{ .StaticStorageBaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
+            href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
         />
         <link
             rel="stylesheet"
-            href="{{ .StaticStorageBaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
+            href="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
         />
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
+        <script src="{{ .StaticStorage.BaseUrl }}/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
     </head>
 
     <body
@@ -216,21 +220,14 @@
             </div>
         </nav>
 
-        <div
-            id="map-container"
-            class="bg-paper bg-background-dark flex z-10 w-full h-full"
-        ></div>
-
-        <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/protomaps-leaflet/5.0.0/dist/protomaps-leaflet.js"></script>
-        <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
+        <div id="map-outer-container" class="bg-paper bg-background-dark flex z-10 w-full h-full"
+            hx-get="/api/v1/map" hx-vals='{"lang": "{{ .Lang }}", "codename": "{{ .Codename }}", "zoom": 4, "zoomPosition": "topright"}' hx-target="this" hx-swap="innerHTML" hx-trigger="load">
+        </div>
 
         <script>
             const themeWheel = document.getElementById("theme-wheel");
             const themeButton = document.getElementById("sidebar-theme-button");
             const themeIcons = document.querySelectorAll(".theme-icon");
-            const THUMB_BASE = "{{ .ThumbnailBaseUrl }}";
 
             themeIcons.forEach((icon) => {
                 if (icon.getAttribute("data-theme") == savedTheme) {
@@ -251,6 +248,7 @@
 
             function positionThemeIcons() {
                 const sliceAngle = 360 / themeIcons.length;
+                const themeWheelRadius = convertRemToPixels(6);
 
                 themeIcons.forEach((icon, index) => {
                     const startAngle = index * sliceAngle;
@@ -368,96 +366,5 @@
                 }
             });
         </script>
-
-        <script>
-            var map;
-            var markers = L.markerClusterGroup();
-
-            function createCustomIcon(color, borderColor = "var(--color-main-soft)") {
-                const svgIcon = `
-                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M12 1C7.5 1 4 4.5 4 9c0 6.5 8 14 8 14s8-7.5 8-14c0-4.5-3.5-8-8-8zm0 11c-1.5 0-3-1.5-3-3s1.5-3 3-3 3 1.5 3 3-1.5 3-3 3z"
-                              fill="${color}"
-                              stroke="${borderColor}"
-                              stroke-width="1"
-                              stroke-linejoin="round"/>
-                    </svg>
-                `;
-
-                return L.divIcon({
-                    html: svgIcon,
-                    className: 'custom-svg-marker',
-                    iconSize: [32, 32],
-                    iconAnchor: [16, 32],
-                    popupAnchor: [0, -32]
-                });
-            }
-
-            function initLocationMap() {
-                map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4);
-
-                protomapsL.leafletLayer({
-                    url: 'https://cdn.saya.uz/map/global.pmtiles',
-                    maxZoom: 15,
-                    flavor: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
-                    lang: '{{ .Lang }}'
-                }).addTo(map);
-
-                L.control.zoom({
-                    position: 'topright'
-                }).addTo(map);
-
-                map.addLayer(markers);
-            }
-
-            function markerToHsl(str, newCoef) {
-                let hash = 0;
-                for (let i = 0; i < str.length / 2; i++) {
-                    hash = str.charCodeAt(i) + ((hash << 5) - hash);
-                    hash = str.charCodeAt(str.length - i - 1) + ((hash << 5) - hash);
-                    hash %= 360;
-                }
-
-                return [hash, (20 + newCoef * 80).toFixed(0), (20 + newCoef * 75).toFixed(0)];
-            }
-
-            function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "", newCoef = 1) {
-                const [h, s, l] = markerToHsl(title, newCoef);
-                const color = `hsl(${h} ${s}% ${l}%)`;
-
-                if (relativeErrorMeters != 0) {
-                    var circle = L.circle([x, y], {
-                        color: color,
-                        fillColor: color,
-                        fillOpacity: 0.15,
-                        radius: relativeErrorMeters
-                    }).addTo(map);
-                }
-
-                var marker = L.marker([x, y], {
-                    icon: createCustomIcon(color),
-                    title: title,
-                }).bindPopup(`
-                        <div class="flex flex-row justify-center justify-items-center">
-                            <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="${THUMB_BASE.replace('%s', thumbnail)}">
-                            <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span>
-                        </div>`);
-
-                markers.addLayer(marker);
-            }
-
-            document.addEventListener('DOMContentLoaded', () => {
-                initLocationMap();
-                {{- range .MapMarkers }}
-                mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}, {{ fdiv .Index (len $.MapMarkers) }});
-                {{- end }}
-            });
-
-            window.addEventListener('resize', function() {
-                setTimeout(() => {
-                    map.invalidateSize();
-                }, 100);
-            });
-        </script>
     </body>
 </html>
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 799955f..b066a9e 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -2,7 +2,7 @@
 <hr class="first-of-type:hidden border-t-2 border-dotted border-main-hard">
 <div {{ if .ToHighlight }}id="blog-page-highlighted"{{ end }} class="w-full flex flex-row items-stretch {{ if .ToHighlight }}bg-accent-light bg-paper{{ end }}">
     <div class="relative min-h-24 flex flex-col w-28 overflow-hidden shrink-0 mask-r-from-70% mask-r-to-100%">
-        <img onclick="return changeUrl('{{ .ArticleLink }}');" class="h-full min-h-24 w-full cursor-pointer select-none object-cover block absolute" src="{{ printf $.ThumbnailBaseUrl .Thumbnail }}">
+        <img onclick="return changeUrl('{{ .ArticleLink }}');" class="h-full min-h-24 w-full cursor-pointer select-none object-cover block absolute" src="{{ printf $.PhotoStorage.Thumbnail320p.BaseUrl .Thumbnail }}">
         <div class="w-full h-6 flex flex-row mt-auto relative">
             <div class="flex-1/2 flex flex-row justify-center select-none bg-linear-180 {{ if .Liked }}from-accent-deep/40 to-accent-deep/80 text-background-dark{{ else }}from-accent-light/40 to-accent-light/80 text-main-hard{{ end }}">
                 <svg viewBox="0 0 24 24"><use href="#icon-like"/></svg>
diff --git a/views/partials/global-map-widget.html b/views/partials/global-map-widget.html
new file mode 100644
index 0000000..f50020f
--- /dev/null
+++ b/views/partials/global-map-widget.html
@@ -0,0 +1,109 @@
+<div
+    id="map-container"
+    class="bg-paper bg-background-dark flex z-10 w-full h-full"
+></div>
+
+<script>
+(function() {
+    var map;
+    var markers = L.markerClusterGroup();
+    const THUMB_BASE = "{{ .PhotoStorage.Thumbnail320p.BaseUrl }}";
+
+    function createCustomIcon(color, borderColor = "var(--color-main-soft)") {
+        const svgIcon = `
+            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M12 1C7.5 1 4 4.5 4 9c0 6.5 8 14 8 14s8-7.5 8-14c0-4.5-3.5-8-8-8zm0 11c-1.5 0-3-1.5-3-3s1.5-3 3-3 3 1.5 3 3-1.5 3-3 3z"
+                        fill="${color}"
+                        stroke="${borderColor}"
+                        stroke-width="1"
+                        stroke-linejoin="round"/>
+            </svg>
+        `;
+
+        return L.divIcon({
+            html: svgIcon,
+            className: 'custom-svg-marker',
+            iconSize: [32, 32],
+            iconAnchor: [16, 32],
+            popupAnchor: [0, -32]
+        });
+    }
+
+    function initLocationMap() {
+        map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], {{ .MapLocationZoom }});
+
+        protomapsL.leafletLayer({
+            url: '{{ .StaticStorage.Map.BaseUrl }}/{{ .StaticStorage.Map.PMTiles }}',
+            maxZoom: 15,
+            flavor: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light',
+            lang: '{{ .Lang }}'
+        }).addTo(map);
+
+        {{- with .ZoomPosition }}
+        L.control.zoom({
+            position: '{{ . }}'
+        }).addTo(map);
+        {{- end }}
+
+        map.addLayer(markers);
+    }
+
+    function markerToHsl(str, newCoef) {
+        let hash = 0;
+        for (let i = 0; i < str.length / 2; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+            hash = str.charCodeAt(str.length - i - 1) + ((hash << 5) - hash);
+            hash %= 360;
+        }
+
+        return [hash, (20 + newCoef * 80).toFixed(0), (20 + newCoef * 75).toFixed(0)];
+    }
+
+    function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "", newCoef = 1, toHighlight = false) {
+        const [h, s, l] = markerToHsl(title, newCoef);
+        const color = `hsl(${h} ${s}% ${l}%)`;
+
+        if (relativeErrorMeters != 0) {
+            var circle = L.circle([x, y], {
+                color: color,
+                fillColor: color,
+                fillOpacity: 0.15,
+                radius: relativeErrorMeters
+            }).addTo(map);
+        }
+
+        var marker = L.marker([x, y], {
+            icon: createCustomIcon(color),
+            title: title,
+        }).bindPopup(`
+                <div class="flex flex-row justify-center justify-items-center">
+                    <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="${THUMB_BASE.replace('%s', thumbnail)}">
+                    <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span>
+                </div>`);
+
+        markers.addLayer(marker);
+
+        if (toHighlight) {
+            markers.zoomToShowLayer(marker, () => marker.openPopup());
+        }
+    }
+
+    initLocationMap();
+    {{- range .MapMarkers }}
+    mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}, {{ fdiv .Index (len $.MapMarkers) }}, {{ .ToHighlight }});
+    {{- end }}
+
+    function onResize() {
+        setTimeout(() => {
+            if (map) map.invalidateSize();
+        }, 300);
+    }
+    window.addEventListener('resize', onResize);
+    new MutationObserver((muts, obs) => {
+        if (!document.getElementById('map-container')) {
+            window.removeEventListener('resize', onResize);
+            obs.disconnect();
+        }
+    }).observe(document.body, { childList: true, subtree: true });
+})();
+</script>
author	SayaAndy <saya.andy@posteo.com>	2026-05-18 00:15:41 +0700
committer	SayaAndy <saya.andy@posteo.com>	2026-05-18 00:15:41 +0700
commit	6418da32d978a8b70d38f1911a154e4dcc33202e (patch)
tree	60aa81938ebd1c48d8e276eac4733c8955882046 /views
parent	0825abc878ab02ab21bd3cee3265d86576492d20 (diff)
download	web-6418da32d978a8b70d38f1911a154e4dcc33202e.tar.gz web-6418da32d978a8b70d38f1911a154e4dcc33202e.zip