From b0ab2ed92870d8c651267db10d68eb695da2ec62 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Tue, 26 Aug 2025 23:41:00 +0700
Subject: feat: like button (only inmem-cache for now)

---
 views/pages/blog-page.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'views/pages/blog-page.html')

diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 755744d..83860d7 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,4 +1,4 @@
-{{ define "header" }}
+{{ define "top-embeds" }}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lightgallery.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-zoom.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css">
@@ -26,6 +26,10 @@
 {{ end }}
 
 {{ define "footer" }}
+<div hx-get="/api/v1/like" hx-target="this" hx-swap="outerHTML" hx-trigger="load"></div>
+{{ end }}
+
+{{ define "bottom-embeds" }}
 <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/lightgallery.min.js"></script>
 <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-zoom.min.js"></script>
 <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script>
-- 
cgit v1.3.1+17


From ea8c6da9b8bafa1d4e5fe5a77fb306006db7d6f6 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Wed, 27 Aug 2025 01:37:04 +0700
Subject: feat: update galleries on resize (with smooth animations this time)

---
 internal/lightgallery/html_renderer.go | 49 ++++++++++++++++++----------------
 views/pages/blog-page.html             | 16 +++++++++--
 2 files changed, 40 insertions(+), 25 deletions(-)

(limited to 'views/pages/blog-page.html')

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index e20e9ec..17a6f2b 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -92,32 +92,35 @@ func (r *LightGalleryHTMLRenderer) renderLightGallery(w util.BufWriter, source [
 		w.WriteString(fmt.Sprintf(`
 <script>
 function createLightGallery%s() {
-		const $lgContainer = document.getElementById('lg-%s');
-        const inlineGallery = lightGallery($lgContainer, {
-			container: $lgContainer,
-			dynamic: true,
-			dynamicEl: [%s],
-			width: "100%%",
-            height: "50vmin",
-			hash: false,
-			closable: false,
-			showMaximizeIcon: true,
-			appendSubHtmlTo: ".lg-sub-html",
-            isMobile: () => false,
-			slideDelay: 0,
-			plugins: [lgZoom, lgThumbnail],
-			thumbWidth: calculateVmin(10),
-			thumbHeight: "10vmin",
-			thumbMargin: 4
-        });
-
-		setTimeout(() => {
-			inlineGallery.openGallery();
-		}, 200);
+	const $lgContainer = document.getElementById('lg-%s');
+	const config = {
+		container: $lgContainer,
+		dynamic: true,
+		dynamicEl: [%s],
+		width: "100%%",
+		height: "50vmin",
+		hash: false,
+		closable: false,
+		showMaximizeIcon: true,
+		appendSubHtmlTo: ".lg-sub-html",
+		isMobile: () => false,
+		slideDelay: 0,
+		plugins: [lgZoom, lgThumbnail],
+		thumbWidth: calculateVmin(10),
+		thumbHeight: "10vmin",
+		thumbMargin: 4
+	};
+	const inlineGallery = lightGallery($lgContainer, config);
+
+	setTimeout(() => {
+		inlineGallery.openGallery();
+	}, 200);
+
+	galleryMap.set(inlineGallery, createLightGallery%s);
 }
 
 document.addEventListener('DOMContentLoaded', createLightGallery%s);
-</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID))
+</script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID))
 	}
 
 	return ast.WalkContinue, nil
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 83860d7..d685fda 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -12,6 +12,10 @@
         height: 100% !important;
     }
 </style>
+
+<script>
+    const galleryMap = new Map();
+</script>
 {{ end }}
 
 {{ define "body" }}
@@ -70,10 +74,18 @@
         {{ .MapLocationAreaMeters }}
     )});
 
+    let resizeTimeout;
     window.addEventListener('resize', function() {
-        setTimeout(() => {
+        clearTimeout(resizeTimeout);
+        resizeTimeout = setTimeout(() => {
             map.invalidateSize();
-        }, 100);
+            var oldGalleryMap = new Map(galleryMap);
+            oldGalleryMap.forEach((createFunc, g, map) => {
+                galleryMap.delete(g);
+                g.destroy();
+                createFunc();
+            });
+        }, 300);
     });
 </script>
 {{- end }}
-- 
cgit v1.3.1+17


From 5e40ca4d314a9dc6cb7cb2c69081876f5aa446f3 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Fri, 29 Aug 2025 02:02:52 +0700
Subject: feat: implement decor of night/ram theme on general pages

---
 static/input.css                |  14 ++++-
 views/layouts/general-page.html | 126 ++++++++++++++++++++++++++++++++++++----
 views/pages/blog-page.html      |   6 +-
 3 files changed, 131 insertions(+), 15 deletions(-)

(limited to 'views/pages/blog-page.html')

diff --git a/static/input.css b/static/input.css
index 18910eb..7b7da23 100644
--- a/static/input.css
+++ b/static/input.css
@@ -612,7 +612,7 @@ body[data-theme~="ram"] .leaflet-tile {
     }
 }
 
-.star {
+.night-star {
     color: var(--color-yellow-100);
     animation-name: blink;
     animation-duration: 5s;
@@ -621,6 +621,18 @@ body[data-theme~="ram"] .leaflet-tile {
     -webkit-user-select: none;
 }
 
+.ram-frame {
+    width: 20vmin;
+    height: 20vmin;
+    user-select: none;
+    -webkit-user-select: none;
+    box-shadow:
+        inset 1vmin 1vmin var(--background-dark-color),
+        inset -1vmin -1vmin var(--main-light-color),
+        1vmin 1vmin var(--background-dark-color),
+        -1vmin -1vmin var(--main-dark-color);
+}
+
 @keyframes blink {
     0% {
         opacity: 1;
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 9885d66..a7cf66e 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -15,6 +15,112 @@
 <body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-0.8:flex-col">
 
     <script>
+        function sfc32(a, b, c, d) {
+            return function() {
+                a |= 0; b |= 0; c |= 0; d |= 0;
+                let t = (a + b | 0) + d | 0;
+                d = d + 1 | 0;
+                a = b ^ b >>> 9;
+                b = c + (c << 3) | 0;
+                c = (c << 21 | c >>> 11);
+                c = c + t | 0;
+                return (t >>> 0) / 4294967296;
+            }
+        }
+
+        function cyrb128(str) {
+            let h1 = 1779033703, h2 = 3144134277,
+                h3 = 1013904242, h4 = 2773480762;
+            for (let i = 0, k; i < str.length; i++) {
+                k = str.charCodeAt(i);
+                h1 = h2 ^ Math.imul(h1 ^ k, 597399067);
+                h2 = h3 ^ Math.imul(h2 ^ k, 2869860233);
+                h3 = h4 ^ Math.imul(h3 ^ k, 951274213);
+                h4 = h1 ^ Math.imul(h4 ^ k, 2716044179);
+            }
+            h1 = Math.imul(h3 ^ (h1 >>> 18), 597399067);
+            h2 = Math.imul(h4 ^ (h2 >>> 22), 2869860233);
+            h3 = Math.imul(h1 ^ (h3 >>> 17), 951274213);
+            h4 = Math.imul(h2 ^ (h4 >>> 19), 2716044179);
+            h1 ^= (h2 ^ h3 ^ h4), h2 ^= h1, h3 ^= h1, h4 ^= h1;
+            return [h1>>>0, h2>>>0, h3>>>0, h4>>>0];
+        }
+
+        var seed = cyrb128("{{ .Title }}");
+        var rand = sfc32(seed[0], seed[1], seed[2], seed[3]);
+
+        function calculateVmin(percent) {
+            const viewportWidth = window.innerWidth;
+            const viewportHeight = window.innerHeight;
+
+            const smallerDimension = Math.min(viewportWidth, viewportHeight);
+
+            const vminValue = (smallerDimension / 100) * percent;
+
+            return vminValue;
+        }
+
+        function switchThemeDecor(theme) {
+            document.querySelectorAll('.theme-decor').forEach((e) => {
+                e.remove();
+            });
+
+            if (theme == "" || typeof theme == "undefined") {
+                theme = document.body.getAttribute('data-theme');
+            }
+
+            vmin = calculateVmin(1);
+            var clWidth = document.documentElement.clientWidth;
+            var clHeight = document.documentElement.clientHeight;
+
+            switch (theme) {
+                case "olive": break;
+                case "lettuce": break;
+                case "night":
+                    for (i = 0; i < 25; i++) {
+                        let star = document.createElement("div");
+                        star.append("*");
+                        star.classList.add("night-star", "theme-decor", "z-0", "absolute");
+                        const x = Math.floor(rand() * clWidth);
+                        const y = Math.floor(rand() * clHeight * 0.8);
+                        const rot = rand() * 90;
+                        const animDuration = (rand() * 10) + 3;
+                        const sz = Math.floor(rand() * 8) + 12;
+                        star.style.transform = `translateX(${x}px) translateY(${y}px) rotate(${rot}deg)`;
+                        star.style.animationDuration = `${animDuration}s`;
+                        star.style.fontSize = `${sz}px`;
+                        document.body.append(star);
+                    }
+                    break;
+                case "ram":
+                    const frameCenters = new Array(4);
+                    for (i = 1; i <= 4; i++) {
+                        let frame = document.createElement("img");
+                        frame.src = `https://f003.backblazeb2.com/file/sayana-static/themes/ram/ram-frame${i}.webp`;
+                        frame.classList.add("ram-frame", "theme-decor", "z-0", "absolute");
+                        let x, y;
+                    outerLoop:
+                        while (true) {
+                            x = Math.floor(rand() * clWidth - 20*vmin);
+                            y = Math.floor(rand() * clHeight - 20*vmin);
+                            for (j = 0; j < i-1; j++) {
+                                const xd = frameCenters[j].x - x;
+                                const yd = frameCenters[j].y - y;
+                                if (Math.sqrt(xd*xd + yd*yd) < 30*vmin) {
+                                    continue outerLoop;
+                                }
+                            }
+                            break;
+                        }
+                        frameCenters[i-1] = {x: x, y: y};
+                        const rot = rand() * 90 - 45;
+                        frame.style.transform = `translateX(${x}px) translateY(${y}px) rotate(${rot}deg)`;
+                        document.body.append(frame);
+                    }
+                    break;
+            }
+        }
+
         function switchTheme(theme) {
             if (theme == "" || typeof theme == "undefined") {
                 const currentTheme = document.body.getAttribute('data-theme');
@@ -27,6 +133,7 @@
             }
             localStorage.setItem('theme', theme);
             document.body.setAttribute('data-theme', theme);
+            switchThemeDecor(theme);
         }
 
         const savedTheme = localStorage.getItem('theme') || 'ram';
@@ -100,17 +207,6 @@
             }
         });
 
-        function calculateVmin(percent) {
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-
-            const smallerDimension = Math.min(viewportWidth, viewportHeight);
-
-            const vminValue = (smallerDimension / 100) * percent;
-
-            return vminValue;
-        }
-
         function calculateVmax(percent) {
             const viewportWidth = window.innerWidth;
             const viewportHeight = window.innerHeight;
@@ -211,6 +307,14 @@
         });
     </script>
 
+    <script>
+        let decorResizeTimeout;
+        window.addEventListener('resize', function() {
+            clearTimeout(decorResizeTimeout);
+            decorResizeTimeout = setTimeout(switchThemeDecor, 300);
+        });
+    </script>
+
     {{ block "bottom-embeds" . }}{{ end }}
 
 </body>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index d685fda..65ee31d 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -74,10 +74,10 @@
         {{ .MapLocationAreaMeters }}
     )});
 
-    let resizeTimeout;
+    let galleryResizeTimeout;
     window.addEventListener('resize', function() {
-        clearTimeout(resizeTimeout);
-        resizeTimeout = setTimeout(() => {
+        clearTimeout(galleryResizeTimeout);
+        galleryResizeTimeout = setTimeout(() => {
             map.invalidateSize();
             var oldGalleryMap = new Map(galleryMap);
             oldGalleryMap.forEach((createFunc, g, map) => {
-- 
cgit v1.3.1+17