From 5eb7b64b3da54e769cc6e52fd6918e4b465b8c0a Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sun, 31 Aug 2025 13:16:45 +0700
Subject: feat: integrate partials in page generating

---
 main.go | 4 ++++
 1 file changed, 4 insertions(+)

(limited to 'main.go')

diff --git a/main.go b/main.go
index 020f8ef..ace9916 100644
--- a/main.go
+++ b/main.go
@@ -124,10 +124,14 @@ func main() {
 	app.Get("/:lang/map", router.Lang_Map(localization, availableLanguages, b2Client))
 	app.Get("/:lang/blog", router.Lang_Blog(localization, availableLanguages, b2Client))
 	app.Get("/:lang/blog/:title", router.Lang_Blog_Title(localization, availableLanguages, b2Client, md))
+
 	app.Get("/api/v1/tz", router.Api_V1_TZ())
 	app.Get("/api/v1/blog-search", router.Api_V1_BlogSearch(localization, availableLanguages, b2Client))
 	app.Get("/api/v1/like", router.Api_V1_Like_Get(localization, b2Client))
 	app.Put("/api/v1/like", router.Api_V1_Like_Put(localization, b2Client))
+	app.Get("/api/v1/general-page/header", router.Api_V1_GeneralPage_Header(localization, availableLanguages, b2Client))
+	app.Get("/api/v1/general-page/body", router.Api_V1_GeneralPage_Body(localization, availableLanguages, b2Client, md))
+	app.Get("/api/v1/general-page/footer", router.Api_V1_GeneralPage_Footer(localization, availableLanguages))
 
 	app.Static("/", "./static")
 
-- 
cgit v1.3.1+13


From 145e7e05f3aa6adbc71a0db5e7da160e626bacd3 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sun, 31 Aug 2025 18:12:51 +0700
Subject: feat: seamless single page application

---
 internal/lightgallery/html_renderer.go             |  2 +-
 internal/router/api-v1-general-page-body.go        |  8 +-
 .../router/api-v1-general-page-bottom-embeds.go    | 65 +++++++++++++++
 internal/router/api-v1-general-page-footer.go      |  5 +-
 internal/router/api-v1-general-page-header.go      |  5 +-
 internal/router/api-v1-general-page-top-embeds.go  | 64 +++++++++++++++
 internal/router/lang-blog-title.go                 |  1 +
 internal/router/lang-blog.go                       |  1 +
 main.go                                            |  2 +
 views/layouts/general-page.html                    | 94 +++++++---------------
 views/pages/blog-catalogue.html                    | 36 +++++----
 views/pages/blog-page.html                         | 79 ++++++++++++++++++
 views/partials/catalogue-blog-cards.html           |  5 +-
 views/partials/general-page-bottom-embeds.html     |  1 +
 views/partials/general-page-header.html            |  2 +-
 views/partials/general-page-top-embeds.html        |  1 +
 16 files changed, 278 insertions(+), 93 deletions(-)
 create mode 100644 internal/router/api-v1-general-page-bottom-embeds.go
 create mode 100644 internal/router/api-v1-general-page-top-embeds.go
 create mode 100644 views/partials/general-page-bottom-embeds.html
 create mode 100644 views/partials/general-page-top-embeds.html

(limited to 'main.go')

diff --git a/internal/lightgallery/html_renderer.go b/internal/lightgallery/html_renderer.go
index 21bd049..c8c1cf0 100644
--- a/internal/lightgallery/html_renderer.go
+++ b/internal/lightgallery/html_renderer.go
@@ -126,7 +126,7 @@ document.addEventListener('htmx:afterRequest', (e) => {
 	if (e.detail.target.id == 'general-page-body') {
 		createLightGallery%s();
 	}
-});
+}, {once: true});
 </script>`, galleryID, galleryID, strings.Join(dynamicElements, ","), galleryID, galleryID))
 	}
 
diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go
index 419bad6..4108a4f 100644
--- a/internal/router/api-v1-general-page-body.go
+++ b/internal/router/api-v1-general-page-body.go
@@ -44,8 +44,9 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 		}
 
 		values := fiber.Map{
-			"L":    l[lang],
-			"Lang": lang,
+			"L":           l[lang],
+			"Lang":        lang,
+			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
 
@@ -117,10 +118,11 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 				areaError = geolocationParts[2]
 			}
 
-			values["ParsedMarkdown"] = template.HTML(parsedMarkdown)
 			values["MapLocationX"] = x
 			values["MapLocationY"] = y
 			values["MapLocationAreaMeters"] = areaError
+			values["Title"] = metadata.Title
+			values["ParsedMarkdown"] = template.HTML(parsedMarkdown)
 
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
 		}
diff --git a/internal/router/api-v1-general-page-bottom-embeds.go b/internal/router/api-v1-general-page-bottom-embeds.go
new file mode 100644
index 0000000..f0957f3
--- /dev/null
+++ b/internal/router/api-v1-general-page-bottom-embeds.go
@@ -0,0 +1,65 @@
+package router
+
+import (
+	"fmt"
+	"log/slog"
+	"net/url"
+	"slices"
+	"strings"
+
+	"github.com/SayaAndy/saya-today-web/internal/b2"
+	"github.com/SayaAndy/saya-today-web/locale"
+	"github.com/gofiber/fiber/v2"
+)
+
+func init() {
+	tm.Add("general-page-bottom-embeds", "views/partials/general-page-bottom-embeds.html")
+}
+
+func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B2Client) func(c *fiber.Ctx) error {
+	return func(c *fiber.Ctx) error {
+		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+
+		referer := c.Get("Referer", "")
+		if referer == "" {
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is empty")
+		}
+		urlStruct, err := url.ParseRequestURI(referer)
+		if err != nil {
+			return c.Status(fiber.ErrBadRequest.Code).SendString(fmt.Sprintf("'Referer' header is invalid: %s", err.Error()))
+		}
+
+		path := urlStruct.EscapedPath()
+		pathParts := strings.Split(strings.Trim(path, "/"), "/")
+		if len(pathParts) < 2 {
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
+		}
+
+		lang := pathParts[0]
+		if !slices.Contains(langs, lang) {
+			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language... yet??", lang))
+		}
+
+		values := fiber.Map{
+			"L":           l[lang],
+			"Lang":        lang,
+			"QueryString": string(c.Request().URI().QueryString()),
+		}
+		var additionalTemplates []string
+
+		if len(pathParts) == 2 && pathParts[1] == "blog" {
+			additionalTemplates = append(additionalTemplates, "views/pages/blog-catalogue.html")
+		} else if len(pathParts) == 3 && pathParts[1] == "blog" {
+			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
+		}
+
+		content, err := tm.Render("general-page-bottom-embeds", values, additionalTemplates...)
+		if err != nil {
+			slog.Warn("failed to generate div", slog.String("path", path), slog.String("error", err.Error()))
+			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
+		}
+
+		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+		return c.Status(fiber.StatusOK).Type("html").Send(content)
+	}
+}
diff --git a/internal/router/api-v1-general-page-footer.go b/internal/router/api-v1-general-page-footer.go
index 4c3a35e..39b6bea 100644
--- a/internal/router/api-v1-general-page-footer.go
+++ b/internal/router/api-v1-general-page-footer.go
@@ -40,8 +40,9 @@ func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string
 		}
 
 		values := fiber.Map{
-			"L":    l[lang],
-			"Lang": lang,
+			"L":           l[lang],
+			"Lang":        lang,
+			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
 
diff --git a/internal/router/api-v1-general-page-header.go b/internal/router/api-v1-general-page-header.go
index 045ff8b..0529ba6 100644
--- a/internal/router/api-v1-general-page-header.go
+++ b/internal/router/api-v1-general-page-header.go
@@ -41,8 +41,9 @@ func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string
 		}
 
 		values := fiber.Map{
-			"L":    l[lang],
-			"Lang": lang,
+			"L":           l[lang],
+			"Lang":        lang,
+			"QueryString": string(c.Request().URI().QueryString()),
 		}
 		var additionalTemplates []string
 
diff --git a/internal/router/api-v1-general-page-top-embeds.go b/internal/router/api-v1-general-page-top-embeds.go
new file mode 100644
index 0000000..090107b
--- /dev/null
+++ b/internal/router/api-v1-general-page-top-embeds.go
@@ -0,0 +1,64 @@
+package router
+
+import (
+	"fmt"
+	"log/slog"
+	"net/url"
+	"slices"
+	"strings"
+
+	"github.com/SayaAndy/saya-today-web/locale"
+	"github.com/gofiber/fiber/v2"
+)
+
+func init() {
+	tm.Add("general-page-top-embeds", "views/partials/general-page-top-embeds.html")
+}
+
+func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []string) func(c *fiber.Ctx) error {
+	return func(c *fiber.Ctx) error {
+		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+
+		referer := c.Get("Referer", "")
+		if referer == "" {
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is empty")
+		}
+		urlStruct, err := url.ParseRequestURI(referer)
+		if err != nil {
+			return c.Status(fiber.ErrBadRequest.Code).SendString(fmt.Sprintf("'Referer' header is invalid: %s", err.Error()))
+		}
+
+		path := urlStruct.EscapedPath()
+		pathParts := strings.Split(strings.Trim(path, "/"), "/")
+		if len(pathParts) < 2 {
+			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
+		}
+
+		lang := pathParts[0]
+		if !slices.Contains(langs, lang) {
+			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language... yet??", lang))
+		}
+
+		values := fiber.Map{
+			"L":           l[lang],
+			"Lang":        lang,
+			"QueryString": string(c.Request().URI().QueryString()),
+		}
+		var additionalTemplates []string
+
+		if len(pathParts) == 2 && pathParts[1] == "blog" {
+			additionalTemplates = append(additionalTemplates, "views/pages/blog-catalogue.html")
+		} else if len(pathParts) == 3 && pathParts[1] == "blog" {
+			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
+		}
+
+		content, err := tm.Render("general-page-top-embeds", values, additionalTemplates...)
+		if err != nil {
+			slog.Warn("failed to generate div", slog.String("path", path), slog.String("error", err.Error()))
+			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
+		}
+
+		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+		return c.Status(fiber.StatusOK).Type("html").Send(content)
+	}
+}
diff --git a/internal/router/lang-blog-title.go b/internal/router/lang-blog-title.go
index bafb0d2..d6ca917 100644
--- a/internal/router/lang-blog-title.go
+++ b/internal/router/lang-blog-title.go
@@ -56,6 +56,7 @@ func Lang_Blog_Title(l map[string]*locale.LocaleConfig, langs []string, b2Client
 			"MapLocationY":          y,
 			"MapLocationAreaMeters": areaError,
 			"Lang":                  lang,
+			"QueryString":           string(c.Request().URI().QueryString()),
 		})
 		if err != nil {
 			slog.Warn("failed to generate page", slog.String("page", "/"+lang+"/blog/"+c.Params("title")), slog.String("error", err.Error()))
diff --git a/internal/router/lang-blog.go b/internal/router/lang-blog.go
index dd3f079..38a6597 100644
--- a/internal/router/lang-blog.go
+++ b/internal/router/lang-blog.go
@@ -76,6 +76,7 @@ func Lang_Blog(l map[string]*locale.LocaleConfig, langs []string, b2Client *b2.B
 		content, err := tm.Render("blog-catalogue", fiber.Map{
 			"QuerySort":     querySort,
 			"QueryTags":     strings.Join(queryTags, ","),
+			"QueryString":   string(c.Request().URI().QueryString()),
 			"Tags":          tagsArray,
 			"Lang":          lang,
 			"L":             l[lang],
diff --git a/main.go b/main.go
index ace9916..72eca3d 100644
--- a/main.go
+++ b/main.go
@@ -132,6 +132,8 @@ func main() {
 	app.Get("/api/v1/general-page/header", router.Api_V1_GeneralPage_Header(localization, availableLanguages, b2Client))
 	app.Get("/api/v1/general-page/body", router.Api_V1_GeneralPage_Body(localization, availableLanguages, b2Client, md))
 	app.Get("/api/v1/general-page/footer", router.Api_V1_GeneralPage_Footer(localization, availableLanguages))
+	app.Get("/api/v1/general-page/top-embeds", router.Api_V1_GeneralPage_TopEmbeds(localization, availableLanguages))
+	app.Get("/api/v1/general-page/bottom-embeds", router.Api_V1_GeneralPage_BottomEmbeds(localization, availableLanguages, b2Client))
 
 	app.Static("/", "./static")
 
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 4e352f4..e9a6c0f 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -8,7 +8,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
-    {{ block "top-embeds" . }}{{ end }}
     <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">
@@ -18,6 +17,16 @@
 
 <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 changeUrl(path, toAppend = false) {
+            const urlParams = new URLSearchParams(window.location.search);
+            const newPathname = location.pathname.endsWith('/') ? location.pathname.slice(0, -1) : location.pathname;
+            const newPath = toAppend ? `${newPathname}${path}` : `${path}`;
+            history.pushState({}, '', `${newPath}?${urlParams.toString()}`);
+            window.dispatchEvent(new Event('popstate'));
+        };
+    </script>
+
     <script>
         function sfc32(a, b, c, d) {
             return function() {
@@ -144,9 +153,10 @@
         switchTheme(savedTheme);
     </script>
 
-    <script>
-        const galleryMap = new Map();
-    </script>
+    <div id="general-page-top-embeds" class="flex"
+        hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
+    </div>
+    <div id="general-page-top-embeds-trigger" hx-get="/api/v1/general-page/top-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-top-embeds" hx-swap="innerHTML"></div>
 
     <script>
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
@@ -157,8 +167,8 @@
             saya.today
         </div>
         <div class="text-[3vw] ar-lt-0.8:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
         </div>
@@ -175,18 +185,21 @@
 
         <div class="ar-gt-0.8:min-w-fit ar-gt-0.8:max-w-[100vh] flex flex-col bg-background-dark relative pt-[1.6vmin] ml-[1.6vmin] pr-[1.6vmin]">
             <div id="general-page-header" class="flex flex-col"
-                hx-get="/api/v1/general-page/header" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
+                hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
+            <div id="general-page-header-trigger" hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-header" hx-swap="innerHTML"></div>
 
             <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
 
             <div id="general-page-body" class="flex flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)] grow"
-                hx-get="/api/v1/general-page/body" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
+                hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
+            <div id="general-page-body-trigger" hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-body" hx-swap="innerHTML"></div>
 
             <div id="general-page-footer" class="flex flex-row mt-[0.8vmin] mb-[0.4vmin]"
-                hx-get="/api/v1/general-page/footer" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
+                hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
+            <div id="general-page-footer-trigger" hx-get="/api/v1/general-page/footer{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-footer" hx-swap="innerHTML"></div>
 
             <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
         </div>
@@ -200,6 +213,11 @@
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
 
+    <div id="general-page-bottom-embeds" class="flex"
+        hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
+    </div>
+    <div id="general-page-bottom-embeds-trigger" hx-get="/api/v1/general-page/bottom-embeds{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-bottom-embeds" hx-swap="innerHTML"></div>
+
     <script>
         const themeWheel = document.getElementById('theme-wheel');
         const themeButton = document.getElementById('theme-button');
@@ -319,63 +337,5 @@
         });
     </script>
 
-    <script>
-        var map;
-
-        function initLocationMap(id, x, y, relativeErrorMeters = 0) {
-            map = L.map(id).setView([x, y], 8);
-
-            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                maxZoom: 18,
-                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-            }).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();
-        }
-
-        document.addEventListener('htmx:afterRequest', (e) => {
-            if (e.detail.xhr.status == 404 || e.detail.successful != true) {
-                return console.error(e);
-            }
-            if (e.detail.target.id == 'general-page-body') {
-                initLocationMap(
-                    'map-container',
-                    {{ .MapLocationX }},
-                    {{ .MapLocationY }},
-                    {{ .MapLocationAreaMeters }}
-                );
-            }
-        });
-
-        let galleryResizeTimeout;
-        window.addEventListener('resize', function() {
-            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);
-        });
-    </script>
-
 </body>
 </html>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index ac2fb7d..a5f5256 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -98,6 +98,7 @@
     function cleanHrefParams() {
         const url = new URL(window.location.href);
         url.search = '';
+
         window.history.pushState({}, '', url.toString());
     }
 
@@ -137,22 +138,27 @@
         window.history.pushState({}, '', url.toString());
     }
 
-    document.addEventListener('DOMContentLoaded', contextAll);
-</script>
+    document.addEventListener('htmx:afterRequest', (e) => {
+        if (e.detail.xhr.status == 404 || e.detail.successful != true) {
+            return console.error(e);
+        }
+        if (e.detail.target.id == 'general-page-body') {
+            contextAll();
 
-<script>
-    const tagsContainers = document.querySelectorAll('form.tags-list');
-    tagsContainers.forEach(tagsContainer => {
-        const checkboxes = tagsContainer.querySelectorAll('input[type="checkbox"]');
-        anyChecked = false;
-        checkboxes.forEach(checkbox => {
-            anyChecked = checkbox.checked ? true : anyChecked;
-        });
-        if (!anyChecked) {
-            const selectAllCheckbox = tagsContainer.querySelector('#tagsAllCheckbox');
-            selectAllCheckbox.checked = true;
-            selectAll();
+            const tagsContainers = document.querySelectorAll('form.tags-list');
+            tagsContainers.forEach(tagsContainer => {
+                const checkboxes = tagsContainer.querySelectorAll('input[type="checkbox"]');
+                anyChecked = false;
+                checkboxes.forEach(checkbox => {
+                    anyChecked = checkbox.checked ? true : anyChecked;
+                });
+                if (!anyChecked) {
+                    const selectAllCheckbox = tagsContainer.querySelector('#tagsAllCheckbox');
+                    selectAllCheckbox.checked = true;
+                    selectAll();
+                }
+            });
         }
-    });
+    }, {once: true});
 </script>
 {{ end }}
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index d8fb118..e68fcab 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,3 +1,18 @@
+{{ define "top-embeds" }}
+<script>
+    var galleryMap = new Map();
+    var map;
+
+    window.addEventListener('popout', (e) => {
+        map.remove();
+        galleryMap.forEach((_, g, m) => {
+            g.destroy();
+        });
+        galleryMap.clear();
+    }, {once: true});
+</script>
+{{ end }}
+
 {{ define "body" }}
 <div class="bg-background-light flex flex-col inset-shadow p-[2.4vmin] overflow-y-auto">
     {{ .ParsedMarkdown }}
@@ -5,6 +20,43 @@
     <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-0.8:w-[80%] h-[40vh] ar-lt-0.8: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) {
+            map = L.map(id).setView([x, y], 8);
+
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 18,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }).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();
+        }
+
+        document.addEventListener('htmx:afterRequest', (e) => {
+            if (e.detail.target.id == 'general-page-body') {
+                initLocationMap(
+                    'map-container',
+                    {{ .MapLocationX }},
+                    {{ .MapLocationY }},
+                    {{ .MapLocationAreaMeters }}
+                );
+            }
+        }, {once: true});
+    </script>
 {{- end }}
 </div>
 {{ end }}
@@ -12,3 +64,30 @@
 {{ 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, {once: true});
+    });
+</script>
+{{ end }}
\ No newline at end of file
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index 35c7ad7..06d99d5 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -1,10 +1,10 @@
 {{- range .BlogPages }}
 <hr class="first-of-type:hidden border-t-[0.3vh] my-[0.8vmin] border-dotted border-main-dark w-[80%] mx-auto">
 <div class="m-[0.4vmin] flex flex-row justify-center justify-items-center">
-    <img onclick="location.href='{{ .ArticleLink }}';" class="cursor-pointer object-cover rounded-[10%] select-none w-[10vmin] h-[10vmin] aspect-square my-[0.4vmin] mr-[0.8vmin]" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
+    <img onclick="changeUrl('{{ .ArticleLink }}');" class="cursor-pointer object-cover rounded-[10%] select-none w-[10vmin] h-[10vmin] aspect-square my-[0.4vmin] mr-[0.8vmin]" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/{{ .Thumbnail }}.webp">
     <div class="grow my-[0.4vmin] mx-[0.8vmin] flex flex-col justify-center">
         <div class="flex flex-row gap-[5%] max-w-[100%]">
-            <a href="{{ .ArticleLink }}" class="flex-9/12 grow-0 block text-[1vmax] cursor-pointer">
+            <a onclick="changeUrl('{{ .ArticleLink }}');" class="flex-9/12 grow-0 block text-[1vmax] cursor-pointer">
                 <span class="font-extrabold">{{ .Title }}</span>
                 <span class="font-extrabold select-none text-secondary">//</span>
                 <span class="italic text-secondary">{{ .ActionDate }}</span>
@@ -12,6 +12,7 @@
                 <i class="fas fa-thumbs-up w-[1vmax] h-[1vmax]"></i>
                 <span class="italic text-secondary">{{ .LikeCount }}</span>
             </a>
+            <div hx-trigger="click from:#user_search_bar" hx-get="/endpoint1" hx-target="#users-list"></div>
             <p class="flex-3/12 grow-0 text-[1vmax] italic text-secondary text-right">{{ .PublishedTime }}</p>
         </div>
         <p class="text-[1vmax] text-main-dark">{{ .ShortDescription }}</p>
diff --git a/views/partials/general-page-bottom-embeds.html b/views/partials/general-page-bottom-embeds.html
new file mode 100644
index 0000000..4c36b26
--- /dev/null
+++ b/views/partials/general-page-bottom-embeds.html
@@ -0,0 +1 @@
+{{ block "bottom-embeds" . }}{{ end }}
\ No newline at end of file
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
index 66cfecf..63803bd 100644
--- a/views/partials/general-page-header.html
+++ b/views/partials/general-page-header.html
@@ -1,6 +1,6 @@
 <div {{ if .PublishedDate }} hx-get="/api/v1/tz" hx-vals='js:{timestamp: "{{ .PublishedDate }}", tz: clientTimeZone}' hx-target="#published-date" hx-swap="innerHTML" hx-trigger="load" {{ end }}
     class="flex flex-row mb-[0.4vmin]">
-    <i onclick="location.pathname += location.pathname.endsWith('/') ? '../' : '/../';" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
+    <i onclick="changeUrl('/../', true);" class="fas fa-circle-left hover:bg-main-dark hover:bg-opacity-10 cursor-pointer transition-colors duration-300 rounded-md text-[2vmax] mt-auto mb-auto px-[0.8vmin]"></i>
     <p class="text-[2vmax] font-spectral italic font-extrabold select-none mt-auto pl-[0.8vmin] pr-[1.2vmin]">//</p>
     <p class="text-[2vmax] font-spectral italic text-left mt-auto">{{ .Title }}</p>
     <p id="published-date" class="grow text-[1.5vmax] font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
diff --git a/views/partials/general-page-top-embeds.html b/views/partials/general-page-top-embeds.html
new file mode 100644
index 0000000..1407b50
--- /dev/null
+++ b/views/partials/general-page-top-embeds.html
@@ -0,0 +1 @@
+{{ block "top-embeds" . }}{{ end }}
\ No newline at end of file
-- 
cgit v1.3.1+13


From 6af14241ff2c8050753f1d6ac702a938a017a839 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sun, 31 Aug 2025 18:40:13 +0700
Subject: feat: add page cache

---
 go.mod                                               |  3 +++
 go.sum                                               |  6 ++++++
 internal/router/api-v1-general-page-body.go          |  9 +++++++++
 internal/router/api-v1-general-page-bottom-embeds.go |  8 ++++++++
 internal/router/api-v1-general-page-footer.go        |  9 +++++++++
 internal/router/api-v1-general-page-header.go        |  9 +++++++++
 internal/router/api-v1-general-page-top-embeds.go    |  9 +++++++++
 internal/router/client-cache.go                      |  5 -----
 internal/router/page-cache.go                        |  5 +++++
 main.go                                              | 14 +++++++++++++-
 10 files changed, 71 insertions(+), 6 deletions(-)
 create mode 100644 internal/router/page-cache.go

(limited to 'main.go')

diff --git a/go.mod b/go.mod
index 71aa20b..e7547b1 100644
--- a/go.mod
+++ b/go.mod
@@ -15,6 +15,9 @@ require (
 
 require (
 	github.com/andybalholm/brotli v1.2.0 // indirect
+	github.com/cespare/xxhash/v2 v2.3.0 // indirect
+	github.com/dgraph-io/ristretto/v2 v2.3.0 // indirect
+	github.com/dustin/go-humanize v1.0.1 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.10 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
diff --git a/go.sum b/go.sum
index 22ef8ff..bbfad9e 100644
--- a/go.sum
+++ b/go.sum
@@ -2,9 +2,15 @@ github.com/Backblaze/blazer v0.7.2 h1:UWNHMLB+Nf+UmbO2qkVvgriODLEMz4kIyr2Hm+DVXQ
 github.com/Backblaze/blazer v0.7.2/go.mod h1:T4y3EYa9IQ5J0PKc/C/J8/CEnSd3qa/lgNw938wZg10=
 github.com/andybalholm/brotli v1.2.0 h1:ukwgCxwYrmACq68yiUqwIWnGY0cTPox/M94sVwToPjQ=
 github.com/andybalholm/brotli v1.2.0/go.mod h1:rzTDkvFWvIrjDXZHkuS16NPggd91W3kUSvPlQ1pLaKY=
+github.com/cespare/xxhash/v2 v2.3.0 h1:UL815xU9SqsFlibzuggzjXhog7bL6oX9BbNZnL2UFvs=
+github.com/cespare/xxhash/v2 v2.3.0/go.mod h1:VGX0DQ3Q6kWi7AoAeZDth3/j3BFtOZR5XLFGgcrjCOs=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/dgraph-io/ristretto/v2 v2.3.0 h1:qTQ38m7oIyd4GAed/QkUZyPFNMnvVWyazGXRwvOt5zk=
+github.com/dgraph-io/ristretto/v2 v2.3.0/go.mod h1:gpoRV3VzrEY1a9dWAYV6T1U7YzfgttXdd/ZzL1s9OZM=
+github.com/dustin/go-humanize v1.0.1 h1:GzkhY7T5VNhEkwH0PVJgjz+fX1rhBrR7pRT3mDkpeCY=
+github.com/dustin/go-humanize v1.0.1/go.mod h1:Mu1zIs6XwVuF/gI1OepvI0qD18qycQx+mFykh5fBlto=
 github.com/gabriel-vasile/mimetype v1.4.10 h1:zyueNbySn/z8mJZHLt6IPw0KoZsiQNszIpU+bX4+ZK0=
 github.com/gabriel-vasile/mimetype v1.4.10/go.mod h1:d+9Oxyo1wTzWdyVUPMmXFvp4F9tea18J8ufA774AB3s=
 github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go
index 4108a4f..2329c4a 100644
--- a/internal/router/api-v1-general-page-body.go
+++ b/internal/router/api-v1-general-page-body.go
@@ -8,6 +8,7 @@ import (
 	"regexp"
 	"slices"
 	"strings"
+	"time"
 
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
@@ -33,6 +34,13 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 		}
 
 		path := urlStruct.EscapedPath()
+
+		cacheKey := fmt.Sprintf("body.%s", path)
+		if val, ok := PCache.Get(cacheKey); val != nil && ok {
+			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+			return c.Status(fiber.StatusOK).Type("html").Send(val)
+		}
+
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
 		if len(pathParts) < 2 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
@@ -133,6 +141,7 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
 		}
 
+		go PCache.SetWithTTL(cacheKey, content, int64(len(content)), 5*time.Minute)
 		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
 		return c.Status(fiber.StatusOK).Type("html").Send(content)
 	}
diff --git a/internal/router/api-v1-general-page-bottom-embeds.go b/internal/router/api-v1-general-page-bottom-embeds.go
index f0957f3..df766a7 100644
--- a/internal/router/api-v1-general-page-bottom-embeds.go
+++ b/internal/router/api-v1-general-page-bottom-embeds.go
@@ -6,6 +6,7 @@ import (
 	"net/url"
 	"slices"
 	"strings"
+	"time"
 
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
@@ -30,6 +31,12 @@ func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []
 		}
 
 		path := urlStruct.EscapedPath()
+		cacheKey := fmt.Sprintf("bottom-embeds.%s", path)
+		if val, ok := PCache.Get(cacheKey); val != nil && ok {
+			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+			return c.Status(fiber.StatusOK).Type("html").Send(val)
+		}
+
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
 		if len(pathParts) < 2 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
@@ -59,6 +66,7 @@ func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []
 			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
 		}
 
+		go PCache.SetWithTTL(cacheKey, content, int64(len(content)), 5*time.Minute)
 		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
 		return c.Status(fiber.StatusOK).Type("html").Send(content)
 	}
diff --git a/internal/router/api-v1-general-page-footer.go b/internal/router/api-v1-general-page-footer.go
index 39b6bea..98da6bb 100644
--- a/internal/router/api-v1-general-page-footer.go
+++ b/internal/router/api-v1-general-page-footer.go
@@ -6,6 +6,7 @@ import (
 	"net/url"
 	"slices"
 	"strings"
+	"time"
 
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
@@ -29,6 +30,13 @@ func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string
 		}
 
 		path := urlStruct.EscapedPath()
+
+		cacheKey := fmt.Sprintf("footer.%s", path)
+		if val, ok := PCache.Get(cacheKey); val != nil && ok {
+			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+			return c.Status(fiber.StatusOK).Type("html").Send(val)
+		}
+
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
 		if len(pathParts) < 2 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
@@ -58,6 +66,7 @@ func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string
 			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
 		}
 
+		go PCache.SetWithTTL(cacheKey, content, int64(len(content)), 5*time.Minute)
 		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
 		return c.Status(fiber.StatusOK).Type("html").Send(content)
 	}
diff --git a/internal/router/api-v1-general-page-header.go b/internal/router/api-v1-general-page-header.go
index 0529ba6..1d65966 100644
--- a/internal/router/api-v1-general-page-header.go
+++ b/internal/router/api-v1-general-page-header.go
@@ -6,6 +6,7 @@ import (
 	"net/url"
 	"slices"
 	"strings"
+	"time"
 
 	"github.com/SayaAndy/saya-today-web/internal/b2"
 	"github.com/SayaAndy/saya-today-web/locale"
@@ -30,6 +31,13 @@ func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string
 		}
 
 		path := urlStruct.EscapedPath()
+
+		cacheKey := fmt.Sprintf("header.%s", path)
+		if val, ok := PCache.Get(cacheKey); val != nil && ok {
+			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+			return c.Status(fiber.StatusOK).Type("html").Send(val)
+		}
+
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
 		if len(pathParts) < 2 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
@@ -67,6 +75,7 @@ func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string
 			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
 		}
 
+		go PCache.SetWithTTL(cacheKey, content, int64(len(content)), 5*time.Minute)
 		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
 		return c.Status(fiber.StatusOK).Type("html").Send(content)
 	}
diff --git a/internal/router/api-v1-general-page-top-embeds.go b/internal/router/api-v1-general-page-top-embeds.go
index 090107b..b26675f 100644
--- a/internal/router/api-v1-general-page-top-embeds.go
+++ b/internal/router/api-v1-general-page-top-embeds.go
@@ -6,6 +6,7 @@ import (
 	"net/url"
 	"slices"
 	"strings"
+	"time"
 
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
@@ -29,6 +30,13 @@ func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []str
 		}
 
 		path := urlStruct.EscapedPath()
+
+		cacheKey := fmt.Sprintf("top-embeds.%s", path)
+		if val, ok := PCache.Get(cacheKey); val != nil && ok {
+			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+			return c.Status(fiber.StatusOK).Type("html").Send(val)
+		}
+
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
 		if len(pathParts) < 2 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
@@ -58,6 +66,7 @@ func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []str
 			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
 		}
 
+		go PCache.SetWithTTL(cacheKey, content, int64(len(content)), 5*time.Minute)
 		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
 		return c.Status(fiber.StatusOK).Type("html").Send(content)
 	}
diff --git a/internal/router/client-cache.go b/internal/router/client-cache.go
index 81d7641..e448fb3 100644
--- a/internal/router/client-cache.go
+++ b/internal/router/client-cache.go
@@ -11,11 +11,6 @@ import (
 	"golang.org/x/crypto/argon2"
 )
 
-type PageLike struct {
-	PageRef string
-	UserId  string
-}
-
 type ClientCache struct {
 	hashMap      map[string]string
 	hashMapMutex sync.RWMutex
diff --git a/internal/router/page-cache.go b/internal/router/page-cache.go
new file mode 100644
index 0000000..01e4792
--- /dev/null
+++ b/internal/router/page-cache.go
@@ -0,0 +1,5 @@
+package router
+
+import "github.com/dgraph-io/ristretto/v2"
+
+var PCache *ristretto.Cache[string, []byte]
diff --git a/main.go b/main.go
index 72eca3d..e4e5a45 100644
--- a/main.go
+++ b/main.go
@@ -15,6 +15,7 @@ import (
 	"github.com/SayaAndy/saya-today-web/internal/router"
 	"github.com/SayaAndy/saya-today-web/internal/tailwind"
 	"github.com/SayaAndy/saya-today-web/locale"
+	"github.com/dgraph-io/ristretto/v2"
 	"github.com/gofiber/fiber/v2"
 	"github.com/gofiber/fiber/v2/middleware/redirect"
 	"github.com/golang-migrate/migrate/v4"
@@ -116,7 +117,17 @@ func main() {
 
 	router.CCache, err = router.NewClientCache(db, []byte(cfg.Auth.Salt))
 	if err != nil {
-		slog.Error("fail to initialize cache", slog.String("error", err.Error()))
+		slog.Error("fail to initialize client cache", slog.String("error", err.Error()))
+		os.Exit(1)
+	}
+
+	router.PCache, err = ristretto.NewCache(&ristretto.Config[string, []byte]{
+		NumCounters: 1e6,     // 1,000,000
+		MaxCost:     1 << 29, // 512 MB
+		BufferItems: 64,      // number of keys per Get buffer.
+	})
+	if err != nil {
+		slog.Error("fail to initialize page cache", slog.String("error", err.Error()))
 		os.Exit(1)
 	}
 
@@ -158,5 +169,6 @@ func main() {
 	if err = db.Close(); err != nil {
 		slog.Error("fail to close db connection", slog.String("error", err.Error()))
 	}
+	router.PCache.Close()
 	db.Close()
 }
-- 
cgit v1.3.1+13


From 0802dc3a8835bc19cf994f9eb2b462df604d4262 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Thu, 4 Sep 2025 00:51:05 +0700
Subject: feat: reroute general page derivations to general page route feat:
 always have page body in square aspect ratio feat: change to mobile view on
 1.1/1 aspect ratio (instead of 0.8/1) feat: dynamically change title with any
 new page feat: cache general page template

---
 internal/router/api-v1-general-page-body.go |  1 +
 internal/router/api-v1-general-page.go      | 52 +++++++++++++++++++++++++++
 main.go                                     |  4 +--
 static/input.css                            | 56 +++++++++++++++--------------
 views/layouts/general-page.html             | 23 ++++++------
 views/pages/blog-catalogue.html             |  8 ++---
 views/pages/blog-page.html                  |  2 +-
 views/pages/global-map.html                 | 18 +++++-----
 views/partials/general-page-body.html       |  1 +
 9 files changed, 111 insertions(+), 54 deletions(-)
 create mode 100644 internal/router/api-v1-general-page.go

(limited to 'main.go')

diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go
index 2329c4a..cdb558a 100644
--- a/internal/router/api-v1-general-page-body.go
+++ b/internal/router/api-v1-general-page-body.go
@@ -108,6 +108,7 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 			values["Tags"] = tagsArray
 			values["QuerySort"] = querySort
 			values["QueryTags"] = strings.Join(queryTags, ",")
+			values["Title"] = l[lang].BlogSearch.Header
 
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-catalogue.html")
 		} else if len(pathParts) == 3 && pathParts[1] == "blog" {
diff --git a/internal/router/api-v1-general-page.go b/internal/router/api-v1-general-page.go
new file mode 100644
index 0000000..8e1387b
--- /dev/null
+++ b/internal/router/api-v1-general-page.go
@@ -0,0 +1,52 @@
+package router
+
+import (
+	"fmt"
+	"log/slog"
+	"slices"
+	"strings"
+
+	"github.com/SayaAndy/saya-today-web/locale"
+	"github.com/gofiber/fiber/v2"
+)
+
+func init() {
+	tm.Add("general-page", "views/layouts/general-page.html")
+}
+
+func Api_V1_GeneralPage(l map[string]*locale.LocaleConfig, langs []string) func(c *fiber.Ctx) error {
+	return func(c *fiber.Ctx) error {
+		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+		path := c.Path()
+
+		pathParts := strings.Split(strings.Trim(path, "/"), "/")
+		if len(pathParts) < 2 {
+			return c.Status(fiber.ErrBadRequest.Code).SendString("url path is invalid: expect format '/{lang}/...'")
+		}
+
+		lang := pathParts[0]
+		if !slices.Contains(langs, lang) {
+			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language... yet??", lang))
+		}
+
+		cacheKey := "general-page." + lang
+		if val, ok := PCache.Get(cacheKey); val != nil && ok {
+			c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+			return c.Status(fiber.StatusOK).Type("html").Send(val)
+		}
+
+		content, err := tm.Render("general-page", fiber.Map{
+			"L":           l[lang],
+			"Lang":        lang,
+			"QueryString": string(c.Request().URI().QueryString()),
+		})
+		if err != nil {
+			slog.Warn("failed to generate div", slog.String("path", path), slog.String("error", err.Error()))
+			return c.Status(fiber.ErrInternalServerError.Code).SendString("failed to generate div")
+		}
+
+		go PCache.Set(cacheKey, content, int64(len(content)))
+		c.Set(fiber.HeaderContentType, fiber.MIMETextHTMLCharsetUTF8)
+		return c.Status(fiber.StatusOK).Type("html").Send(content)
+	}
+}
diff --git a/main.go b/main.go
index e4e5a45..2f8ef4b 100644
--- a/main.go
+++ b/main.go
@@ -133,8 +133,8 @@ func main() {
 
 	app.Get("/", router.Root(cfg.AvailableLanguages))
 	app.Get("/:lang/map", router.Lang_Map(localization, availableLanguages, b2Client))
-	app.Get("/:lang/blog", router.Lang_Blog(localization, availableLanguages, b2Client))
-	app.Get("/:lang/blog/:title", router.Lang_Blog_Title(localization, availableLanguages, b2Client, md))
+	app.Get("/:lang/blog", router.Api_V1_GeneralPage(localization, availableLanguages))
+	app.Get("/:lang/blog/:title", router.Api_V1_GeneralPage(localization, availableLanguages))
 
 	app.Get("/api/v1/tz", router.Api_V1_TZ())
 	app.Get("/api/v1/blog-search", router.Api_V1_BlogSearch(localization, availableLanguages, b2Client))
diff --git a/static/input.css b/static/input.css
index a64c59d..261aeb3 100644
--- a/static/input.css
+++ b/static/input.css
@@ -482,37 +482,41 @@ body[data-theme~="ram"] .leaflet-tile {
     filter: invert(1) hue-rotate(190deg) contrast(1.1) brightness(1.2) !important;
 }
 
-@media (min-aspect-ratio: 0.8/1) {
-    .ar-gt-0\.8\:mr-\[1\.2vmin\] {
+@media (min-aspect-ratio: 1.1/1) {
+    .ar-gt-1\.1\:mr-\[1\.2vmin\] {
         margin-right: 1.2vmin;
     }
 
-    .ar-gt-0\.8\:w-fit {
+    .ar-gt-1\.1\:w-fit {
         width: fit-content;
     }
 
-    .ar-gt-0\.8\:min-w-fit {
+    .ar-gt-1\.1\:w-\[100vh\] {
+        width: 100vh;
+    }
+
+    .ar-gt-1\.1\:min-w-fit {
         min-width: fit-content;
     }
 
-    .ar-gt-0\.8\:min-w-\[10vh\] {
+    .ar-gt-1\.1\:min-w-\[10vh\] {
         min-width: 10vh;
     }
 
-    .ar-gt-0\.8\:max-w-\[20vh\] {
+    .ar-gt-1\.1\:max-w-\[20vh\] {
         max-width: 20vh;
     }
 
-    .ar-gt-0\.8\:max-w-\[100vh\] {
+    .ar-gt-1\.1\:max-w-\[100vh\] {
         max-width: 100vh;
     }
 
-    .ar-gt-0\.8\:items-center {
+    .ar-gt-1\.1\:items-center {
         align-items: center;
     }
 }
 
-@media (max-aspect-ratio: 0.8/1) {
+@media (max-aspect-ratio: 1.1/1) {
     .bg-sidebar {
         background-size: calc(var(--squares-and-triangles-background-width-coef) * 1.6vh) calc(var(--squares-and-triangles-background-height-coef) * 1.6vh);
     }
@@ -542,71 +546,71 @@ body[data-theme~="ram"] .leaflet-tile {
         background-size: 10vh;
     }
 
-    .ar-lt-0\.8\:grid {
+    .ar-lt-1\.1\:grid {
         display: grid;
     }
 
-    .ar-lt-0\.8\:flex-col {
+    .ar-lt-1\.1\:flex-col {
         flex-direction: column;
     }
 
-    .ar-lt-0\.8\:flex-row {
+    .ar-lt-1\.1\:flex-row {
         flex-direction: row;
     }
 
-    .ar-lt-0\.8\:h-\[8vh\] {
+    .ar-lt-1\.1\:h-\[8vh\] {
         height: 8vh;
     }
 
-    .ar-lt-0\.8\:h-\[10vh\] {
+    .ar-lt-1\.1\:h-\[10vh\] {
         height: 10vh;
     }
 
-    .ar-lt-0\.8\:h-\[30vh\] {
+    .ar-lt-1\.1\:h-\[30vh\] {
         height: 30vh;
     }
 
-    .ar-lt-0\.8\:h-\[90vh\] {
+    .ar-lt-1\.1\:h-\[90vh\] {
         height: 90vh;
     }
 
-    .ar-lt-0\.8\:w-\[8vh\] {
+    .ar-lt-1\.1\:w-\[8vh\] {
         width: 8vh;
     }
 
-    .ar-lt-0\.8\:w-\[80\%\] {
+    .ar-lt-1\.1\:w-\[80\%\] {
         width: 80%;
     }
 
-    .ar-lt-0\.8\:w-\[90vw\] {
+    .ar-lt-1\.1\:w-\[90vw\] {
         width: 90vw;
     }
 
-    .ar-lt-0\.8\:w-screen {
+    .ar-lt-1\.1\:w-screen {
         width: 100vw;
     }
 
-    .ar-lt-0\.8\:max-h-\[25\%\] {
+    .ar-lt-1\.1\:max-h-\[25\%\] {
         max-height: 25%;
     }
 
-    .ar-lt-0\.8\:max-h-\[80\%\] {
+    .ar-lt-1\.1\:max-h-\[80\%\] {
         max-height: 80%;
     }
 
-    .ar-lt-0\.8\:max-h-\[calc\(100\%-25vh\)\] {
+    .ar-lt-1\.1\:max-h-\[calc\(100\%-25vh\)\] {
         max-height: calc(100% - 25vh);
     }
 
-    .ar-lt-0\.8\:text-\[5vh\] {
+    .ar-lt-1\.1\:text-\[5vh\] {
         font-size: 5vh;
     }
 
-    .ar-lt-0\.8\:ml-\[5vw\] {
+    .ar-lt-1\.1\:ml-\[5vw\] {
         margin-left: 5vw;
     }
 
-    .ar-lt-0\.8\:hidden {
+    .ar-lt-1\.1\:hidden {
         display: none;
     }
 }
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index 410e6e7..cb85a09 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SAYA TODAY // {{ .Title }}</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -15,7 +14,7 @@
     <link href="/output.css" rel="stylesheet">
 </head>
 
-<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">
+<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-1.1:flex-col">
 
     <script>
         function changeUrl(path, toAppend = false) {
@@ -162,15 +161,15 @@
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     </script>
 
-    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5vw] ar-lt-0.8:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-0.8:h-[8vh] ar-lt-0.8:ml-[5vw] ar-lt-0.4:ml-0">
-        <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-1.1:items-center shadow-2xl z-20 w-[5vw] ar-lt-1.1:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-1.1:h-[8vh] ar-lt-1.1:ml-[5vw] ar-lt-0.4:ml-0">
+        <div class="logo-custom ar-lt-1.1:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3vw] ar-lt-0.8:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+        <div class="text-[3vw] ar-lt-1.1:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
+            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -180,10 +179,10 @@
         </div>
     </div>
 
-    <div class="bg-background-dark flex z-10 ar-lt-0.8:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-0.8:ml-[5vw] ar-lt-0.4:ml-0">
+    <div class="bg-background-dark flex z-10 ar-lt-1.1:w-[90vw] ar-lt-0.4:w-[100vw] h-screen ar-lt-1.1:ml-[5vw] ar-lt-0.4:ml-0">
         <div class="pl-[0.5vw] bg-background-dark border-r-[0.4vmin] border-dashed border-main-dark"></div>
 
-        <div class="ar-gt-0.8:min-w-fit ar-gt-0.8:max-w-[100vh] flex flex-col bg-background-dark relative pt-[1.6vmin] ml-[1.6vmin] pr-[1.6vmin]">
+        <div class="ar-gt-1.1:w-[100vh] flex flex-col bg-background-dark relative pt-[1.6vmin] ml-[1.6vmin] pr-[1.6vmin]">
             <div id="general-page-header" class="flex flex-col"
                 hx-get="/api/v1/general-page/header{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
@@ -191,7 +190,7 @@
 
             <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
 
-            <div id="general-page-body" class="flex flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)] grow"
+            <div id="general-page-body" class="flex flex-col max-h-[calc(100%-7vmax)] ar-lt-1.1:max-h-[calc(100%-25vh)] grow"
                 hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="load" hx-target="this" hx-swap="innerHTML">
             </div>
             <div id="general-page-body-trigger" hx-get="/api/v1/general-page/body{{ if .QueryString }}?{{ .QueryString }}{{ end }}" hx-trigger="popstate from:window" hx-target="#general-page-body" hx-swap="innerHTML"></div>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index a5f5256..eccafd6 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,11 +1,11 @@
 {{ define "body" }}
-<div class="flex flex-row ar-lt-0.8:flex-col text-[1vmax] h-[100%]">
+<div class="flex flex-row ar-lt-1.1:flex-col text-[1vmax] h-[100%]">
     <form hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target=".blog-cards" hx-swap="innerHTML"
-        class="tags-list ar-gt-0.8:min-w-[10vh] ar-gt-0.8:max-w-[20vh] ar-gt-0.8:w-fit ar-lt-0.8:w-[100%] ar-lt-0.8:max-h-[25%] flex shrink-0 flex-col ar-gt-0.8:mr-[1.2vmin]">
+        class="tags-list ar-gt-1.1:min-w-[10vh] ar-gt-1.1:max-w-[20vh] ar-gt-1.1:w-fit ar-lt-1.1:w-[100%] ar-lt-1.1:max-h-[25%] flex shrink-0 flex-col ar-gt-1.1:mr-[1.2vmin]">
         <div class="flex flex-col overflow-y-auto">
             <fieldset>
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.TagsHeader }}</legend>
-                <div class="flex flex-col ar-lt-0.8:grid grid-cols-5 grid-flow-row-dense">
+                <div class="flex flex-col ar-lt-1.1:grid grid-cols-5 grid-flow-row-dense">
                     <div class="m-[0.4vmin]">
                         <label class="font-bold"><input type="checkbox" id="tagsAllCheckbox" onclick="selectAll();"> {{ .L.BlogSearch.ChooseAllTags }}</label>
                     </div>
@@ -18,7 +18,7 @@
             </fieldset>
             <fieldset class="mt-[0.8vmin]">
                 <legend class="font-bold w-[100%] text-center">{{ .L.BlogSearch.OrderByHeader }}</legend>
-                <div class="flex flex-col ar-lt-0.8:grid grid-cols-3 grid-rows-2 grid-flow-col">
+                <div class="flex flex-col ar-lt-1.1:grid grid-cols-3 grid-rows-2 grid-flow-col">
                     <div class="m-[0.4vmin]">
                         <label><input type="radio" id="sortTitleAsc" name="sort" value="titleAsc" {{ if eq .QuerySort "titleAsc" }}checked{{ end }}> {{ .L.BlogSearch.TitleOrdered }} <i class="fas fa-arrow-down-a-z"></i></label>
                     </div>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index e68fcab..b121cc6 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -18,7 +18,7 @@
     {{ .ParsedMarkdown }}
 {{- if .MapLocationX }}
     <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-0.8:w-[80%] h-[40vh] ar-lt-0.8:h-[30vh]"></div>
+    <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>
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 569166f..d6e7281 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -15,7 +15,7 @@
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css">
 </head>
 
-<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">
+<body data-theme="ram" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex flex-row ar-lt-1.1:flex-col">
 
     <script>
         function switchTheme(theme) {
@@ -40,15 +40,15 @@
         const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
     </script>
 
-    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-0.8:items-center shadow-2xl z-20 w-[5vw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[8vh]">
-        <div class="logo-custom ar-lt-0.8:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
+    <div id="sidebar" class="bg-sidebar flex sticky flex-col ar-gt-1.1:items-center shadow-2xl z-20 w-[5vw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[8vh]">
+        <div class="logo-custom ar-lt-1.1:hidden text-sidebar font-patua font-extrabold text-center relative z-20">
             saya.today
         </div>
-        <div class="text-[3vw] ar-lt-0.8:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-0.8:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
-            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-0.8:w-[8vh] h-[5vw] ar-lt-0.8:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+        <div class="text-[3vw] ar-lt-1.1:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
+            <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
         </div>
         <div class="theme-wheel" id="theme-wheel">
             <div class="theme-icon" data-theme="olive"></div>
@@ -58,7 +58,7 @@
         </div>
     </div>
 
-    <div id="map-container" class="bg-background-dark flex z-10 w-[95vw] ar-lt-0.8:w-screen h-screen ar-lt-0.8:h-[92vh]"></div>
+    <div id="map-container" class="bg-background-dark flex z-10 w-[95vw] ar-lt-1.1:w-screen h-screen ar-lt-1.1:h-[92vh]"></div>
 
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
diff --git a/views/partials/general-page-body.html b/views/partials/general-page-body.html
index d697c14..4686ea1 100644
--- a/views/partials/general-page-body.html
+++ b/views/partials/general-page-body.html
@@ -1 +1,2 @@
+<title>SAYA TODAY // {{ .Title }}</title>
 {{ block "body" . }}{{ end }}
\ No newline at end of file
-- 
cgit v1.3.1+13


From 13a66428533c5f870901343dd505bcb835015430 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sat, 6 Sep 2025 19:18:00 +0700
Subject: feat: home page feat: my random fact giver for a home page feat:
 stricter cors policy refactor: move lightlibrary css onto my bucket

---
 config/config.go                                   |  6 ++
 config/config.local.yaml                           | 10 +++
 config/config.prod.yaml                            | 10 +++
 config/config.stage.yaml                           | 10 +++
 internal/factgiver/factgiver.go                    | 67 +++++++++++++++
 internal/frontmatter/parser.go                     |  2 +
 internal/router/api-v1-general-page-body.go        | 13 ++-
 .../router/api-v1-general-page-bottom-embeds.go    |  4 +-
 internal/router/api-v1-general-page-footer.go      |  4 +-
 internal/router/api-v1-general-page-header.go      |  5 +-
 internal/router/api-v1-general-page-top-embeds.go  |  4 +-
 internal/router/api-v1-general-page.go             |  2 +-
 internal/templatemanager/templatemanager.go        | 19 +++--
 locale/localization.en.yaml                        | 12 +++
 locale/localization.go                             | 15 ++++
 locale/localization.ru.yaml                        | 12 +++
 main.go                                            | 20 +++--
 static/input.css                                   | 28 ++++++
 views/index.html                                   |  2 +-
 views/layouts/general-page.html                    |  8 +-
 views/pages/blog-page.html                         |  9 +-
 views/pages/global-map.html                        |  2 +-
 views/pages/home-page.html                         | 99 ++++++++++++++++++++++
 23 files changed, 335 insertions(+), 28 deletions(-)
 create mode 100644 internal/factgiver/factgiver.go
 create mode 100644 views/pages/home-page.html

(limited to 'main.go')

diff --git a/config/config.go b/config/config.go
index 7438fe1..f57b5cd 100644
--- a/config/config.go
+++ b/config/config.go
@@ -11,6 +11,7 @@ import (
 type Config struct {
 	LogLevel           slog.Level                `json:"LogLevel" yaml:"logLevel" validate:"required"`
 	BlogPages          BlogPagesConfig           `json:"BlogPages" yaml:"blogPages" validate:"required"`
+	FactGiver          FactGiverConfig           `json:"FactGiver" yaml:"factGiver" validate:"required"`
 	LocalePath         string                    `json:"LocalePath" yaml:"localePath" validate:"required,filepath"`
 	AvailableLanguages []AvailableLanguageConfig `json:"AvailableLanguages" yaml:"availableLanguages" validate:"required"`
 	Auth               AuthConfig                `json:"Auth" yaml:"auth" validate:"required"`
@@ -33,6 +34,11 @@ type B2Config struct {
 	ApplicationKey string `json:"ApplicationKey" yaml:"applicationKey"`
 }
 
+type FactGiverConfig struct {
+	Storage       StorageConfig `json:"Storage" yaml:"storage" validate:"required"`
+	FactsFileName string        `json:"FactsFileName" yaml:"factsFileName" validate:"required"`
+}
+
 type AvailableLanguageConfig struct {
 	Name    string `json:"Name" yaml:"name" validate:"required"`
 	Alt     string `json:"Alt" yaml:"alt"`
diff --git a/config/config.local.yaml b/config/config.local.yaml
index 0b48e47..6d0abf3 100644
--- a/config/config.local.yaml
+++ b/config/config.local.yaml
@@ -8,6 +8,16 @@ blogPages:
       prefix: 'stage-'
       keyID: '${B2_KEY_ID}'
       applicationKey: '${B2_APPLICATION_KEY}'
+factGiver:
+  storage:
+    type: b2
+    config:
+      bucketName: sayana-pages
+      region: eu-central-003
+      prefix: ''
+      keyID: '${B2_KEY_ID}'
+      applicationKey: '${B2_APPLICATION_KEY}'
+  factsFileName: 'facts-*.txt'
 localePath: ./locale/
 availableLanguages:
   - name: ru
diff --git a/config/config.prod.yaml b/config/config.prod.yaml
index e1294c0..38981a8 100644
--- a/config/config.prod.yaml
+++ b/config/config.prod.yaml
@@ -8,6 +8,16 @@ blogPages:
       prefix: 'prod-'
       keyID: '${B2_KEY_ID}'
       applicationKey: '${B2_APPLICATION_KEY}'
+factGiver:
+  storage:
+    type: b2
+    config:
+      bucketName: sayana-pages
+      region: eu-central-003
+      prefix: ''
+      keyID: '${B2_KEY_ID}'
+      applicationKey: '${B2_APPLICATION_KEY}'
+  factsFileName: 'facts-*.txt'
 localePath: ./locale/
 availableLanguages:
   - name: ru
diff --git a/config/config.stage.yaml b/config/config.stage.yaml
index 30233c1..b05edaf 100644
--- a/config/config.stage.yaml
+++ b/config/config.stage.yaml
@@ -8,6 +8,16 @@ blogPages:
       prefix: 'stage-'
       keyID: '${B2_KEY_ID}'
       applicationKey: '${B2_APPLICATION_KEY}'
+factGiver:
+  storage:
+    type: b2
+    config:
+      bucketName: sayana-pages
+      region: eu-central-003
+      prefix: ''
+      keyID: '${B2_KEY_ID}'
+      applicationKey: '${B2_APPLICATION_KEY}'
+  factsFileName: 'facts-*.txt'
 localePath: ./locale/
 availableLanguages:
   - name: ru
diff --git a/internal/factgiver/factgiver.go b/internal/factgiver/factgiver.go
new file mode 100644
index 0000000..6f77403
--- /dev/null
+++ b/internal/factgiver/factgiver.go
@@ -0,0 +1,67 @@
+package factgiver
+
+import (
+	"fmt"
+	"math/rand"
+	"regexp"
+	"strings"
+	"time"
+
+	"github.com/SayaAndy/saya-today-web/config"
+	"github.com/SayaAndy/saya-today-web/internal/b2"
+)
+
+type FactGiver struct {
+	b2Client      *b2.B2Client
+	cache         map[string][]string
+	langs         []string
+	factsFileName string
+	nlRe          *regexp.Regexp
+	randGen       *rand.Rand
+}
+
+func NewFactGiver(cfg *config.FactGiverConfig, langs []string) (*FactGiver, error) {
+	b2Client, err := b2.NewB2Client(&cfg.Storage.Config)
+	if err != nil {
+		return nil, fmt.Errorf("fail to init b2 client for a new fact giver: %s", err.Error())
+	}
+
+	factGiver := &FactGiver{
+		b2Client:      b2Client,
+		cache:         make(map[string][]string, len(langs)),
+		langs:         langs,
+		factsFileName: cfg.FactsFileName,
+		nlRe:          regexp.MustCompile(`\r?\n`),
+		randGen:       rand.New(rand.NewSource(time.Now().UnixNano())),
+	}
+	if err = factGiver.initCache(); err != nil {
+		return nil, fmt.Errorf("fail to init cache for a new fact giver: %s", err.Error())
+	}
+
+	return factGiver, nil
+}
+
+func (g *FactGiver) Give(lang string) [3]string {
+	factSlice := make([]string, len(g.cache[lang]))
+	copy(factSlice, g.cache[lang])
+	g.randGen.Shuffle(len(factSlice), func(i, j int) {
+		factSlice[i], factSlice[j] = factSlice[j], factSlice[i]
+	})
+	return [3]string{factSlice[0], factSlice[1], factSlice[2]}
+}
+
+func (g *FactGiver) initCache() error {
+	for _, lang := range g.langs {
+		localFacts := strings.Replace(g.factsFileName, "*", lang, 1)
+		factsContentBytes, err := g.b2Client.ReadAll(localFacts)
+		if err != nil {
+			return fmt.Errorf("fail to read '%s' facts file: %s", lang, err.Error())
+		}
+		factsContent := string(factsContentBytes)
+		g.cache[lang] = g.nlRe.Split(factsContent, -1)
+		if g.cache[lang][len(g.cache[lang])-1] == "" {
+			g.cache[lang] = g.cache[lang][:len(g.cache[lang])-1]
+		}
+	}
+	return nil
+}
diff --git a/internal/frontmatter/parser.go b/internal/frontmatter/parser.go
index 1a521c0..83312dc 100644
--- a/internal/frontmatter/parser.go
+++ b/internal/frontmatter/parser.go
@@ -16,6 +16,8 @@ type Metadata struct {
 	Thumbnail        string    `yaml:"thumbnail"`
 	Tags             []string  `yaml:"tags"`
 	Geolocation      string    `yaml:"geolocation"`
+	Medley           string    `yaml:"medley"`
+	MedleyPart       int       `yaml:"medleyPart"`
 }
 
 func ParseFrontmatter(content []byte) (metadata *Metadata, markdown []byte, err error) {
diff --git a/internal/router/api-v1-general-page-body.go b/internal/router/api-v1-general-page-body.go
index cdb558a..f27e0c0 100644
--- a/internal/router/api-v1-general-page-body.go
+++ b/internal/router/api-v1-general-page-body.go
@@ -4,6 +4,7 @@ import (
 	"fmt"
 	"html/template"
 	"log/slog"
+	"math/rand"
 	"net/url"
 	"regexp"
 	"slices"
@@ -11,11 +12,14 @@ import (
 	"time"
 
 	"github.com/SayaAndy/saya-today-web/internal/b2"
+	"github.com/SayaAndy/saya-today-web/internal/factgiver"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/gofiber/fiber/v2"
 	"github.com/yuin/goldmark"
 )
 
+var FactGiver *factgiver.FactGiver
+
 func init() {
 	tm.Add("general-page-body", "views/partials/general-page-body.html")
 }
@@ -42,7 +46,7 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 		}
 
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) < 2 {
+		if len(pathParts) == 0 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
@@ -134,6 +138,13 @@ func Api_V1_GeneralPage_Body(l map[string]*locale.LocaleConfig, langs []string,
 			values["ParsedMarkdown"] = template.HTML(parsedMarkdown)
 
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
+		} else if len(pathParts) == 1 {
+			values["Title"] = l[lang].HomePage.Header
+			values["FilledHeartCount"] = uint(40)
+			values["OutlineHeartCount"] = uint(40)
+			values["GifName"] = fmt.Sprintf("otter-%d.gif", rand.Int()%3+1)
+			values["FunFacts"] = FactGiver.Give(lang)
+			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
 		}
 
 		content, err := tm.Render("general-page-body", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-bottom-embeds.go b/internal/router/api-v1-general-page-bottom-embeds.go
index df766a7..c4d9543 100644
--- a/internal/router/api-v1-general-page-bottom-embeds.go
+++ b/internal/router/api-v1-general-page-bottom-embeds.go
@@ -38,7 +38,7 @@ func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []
 		}
 
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) < 2 {
+		if len(pathParts) == 0 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
@@ -58,6 +58,8 @@ func Api_V1_GeneralPage_BottomEmbeds(l map[string]*locale.LocaleConfig, langs []
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-catalogue.html")
 		} else if len(pathParts) == 3 && pathParts[1] == "blog" {
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
+		} else if len(pathParts) == 1 {
+			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
 		}
 
 		content, err := tm.Render("general-page-bottom-embeds", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-footer.go b/internal/router/api-v1-general-page-footer.go
index 98da6bb..003f54c 100644
--- a/internal/router/api-v1-general-page-footer.go
+++ b/internal/router/api-v1-general-page-footer.go
@@ -38,7 +38,7 @@ func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string
 		}
 
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) < 2 {
+		if len(pathParts) == 0 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
@@ -58,6 +58,8 @@ func Api_V1_GeneralPage_Footer(l map[string]*locale.LocaleConfig, langs []string
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-catalogue.html")
 		} else if len(pathParts) == 3 && pathParts[1] == "blog" {
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
+		} else if len(pathParts) == 1 {
+			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
 		}
 
 		content, err := tm.Render("general-page-footer", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-header.go b/internal/router/api-v1-general-page-header.go
index 1d65966..80228f7 100644
--- a/internal/router/api-v1-general-page-header.go
+++ b/internal/router/api-v1-general-page-header.go
@@ -39,7 +39,7 @@ func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string
 		}
 
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) < 2 {
+		if len(pathParts) == 0 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
@@ -67,6 +67,9 @@ func Api_V1_GeneralPage_Header(l map[string]*locale.LocaleConfig, langs []string
 			values["PublishedDate"] = metadata.PublishedTime.Format("2006-01-02 15:04:05 -07:00")
 			values["ActionDate"] = metadata.ActionDate
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
+		} else if len(pathParts) == 1 {
+			values["Title"] = l[lang].HomePage.Header
+			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
 		}
 
 		content, err := tm.Render("general-page-header", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page-top-embeds.go b/internal/router/api-v1-general-page-top-embeds.go
index b26675f..78021b2 100644
--- a/internal/router/api-v1-general-page-top-embeds.go
+++ b/internal/router/api-v1-general-page-top-embeds.go
@@ -38,7 +38,7 @@ func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []str
 		}
 
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) < 2 {
+		if len(pathParts) == 0 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("'Referer' header is invalid: expect format '/{lang}/...'")
 		}
 
@@ -58,6 +58,8 @@ func Api_V1_GeneralPage_TopEmbeds(l map[string]*locale.LocaleConfig, langs []str
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-catalogue.html")
 		} else if len(pathParts) == 3 && pathParts[1] == "blog" {
 			additionalTemplates = append(additionalTemplates, "views/pages/blog-page.html")
+		} else if len(pathParts) == 1 {
+			additionalTemplates = append(additionalTemplates, "views/pages/home-page.html")
 		}
 
 		content, err := tm.Render("general-page-top-embeds", values, additionalTemplates...)
diff --git a/internal/router/api-v1-general-page.go b/internal/router/api-v1-general-page.go
index 8e1387b..d0ea559 100644
--- a/internal/router/api-v1-general-page.go
+++ b/internal/router/api-v1-general-page.go
@@ -20,7 +20,7 @@ func Api_V1_GeneralPage(l map[string]*locale.LocaleConfig, langs []string) func(
 		path := c.Path()
 
 		pathParts := strings.Split(strings.Trim(path, "/"), "/")
-		if len(pathParts) < 2 {
+		if len(pathParts) == 0 {
 			return c.Status(fiber.ErrBadRequest.Code).SendString("url path is invalid: expect format '/{lang}/...'")
 		}
 
diff --git a/internal/templatemanager/templatemanager.go b/internal/templatemanager/templatemanager.go
index d8adab6..4bf9a49 100644
--- a/internal/templatemanager/templatemanager.go
+++ b/internal/templatemanager/templatemanager.go
@@ -22,13 +22,22 @@ type TemplateManagerTemplates struct {
 	Files []string
 }
 
+var templateFuncMap = template.FuncMap{
+	"contains": strings.Contains,
+	"iterate": func(count uint) []uint {
+		items := make([]uint, count)
+		for i := range count {
+			items[i] = i
+		}
+		return items
+	},
+}
+
 func NewTemplateManager(templates ...TemplateManagerTemplates) (*TemplateManager, error) {
 	templateMap := make(map[string]templateManagerRender)
 
 	for _, tmplStruct := range templates {
-		tmpl := template.New("").Funcs(template.FuncMap{
-			"contains": strings.Contains,
-		})
+		tmpl := template.New("").Funcs(templateFuncMap)
 		tmpl, err := tmpl.ParseFiles(tmplStruct.Files...)
 		if err != nil {
 			return nil, err
@@ -75,9 +84,7 @@ func (tm *TemplateManager) Add(name string, files ...string) error {
 		return fmt.Errorf("you can't add template without any files")
 	}
 
-	tmpl := template.New("").Funcs(template.FuncMap{
-		"contains": strings.Contains,
-	})
+	tmpl := template.New("").Funcs(templateFuncMap)
 
 	tmpl, err := tmpl.ParseFiles(files...)
 	if err != nil {
diff --git a/locale/localization.en.yaml b/locale/localization.en.yaml
index f5ee6c9..b3fca58 100644
--- a/locale/localization.en.yaml
+++ b/locale/localization.en.yaml
@@ -9,3 +9,15 @@ BlogSearch:
   ChooseAllTags: 'Choose All'
 GlobalMap:
   Header: 'Global Map'
+HomePage:
+  Header: 'Home Page'
+  DidYouKnowThat: 'Did you know, that...'
+  SidebarDescription: 'Describing the Sidebar'
+  HomePageDescription: 'Home Page -- where we are right now!'
+  BlogSearchDescription: 'Blog Search. You can find my travel notes there and, maybe, something else!'
+  MarkerMapDescription: 'Map with markers of my travel notes -- a convinient way to find an interesting region and find related posts!'
+  ThemeSwitchDescription: 'Theme Palette lets you change the theme of the site -- there are 2 dark and 2 bright themes currently!'
+  Hymn1: 'We welcome you to Sayasite!'
+  Hymn2: "We've been expecting you!"
+  Hymn3: 'You bring such joy in Sayasite!'
+  Hymn4: 'No matter where you roam, know our love is true!~'
diff --git a/locale/localization.go b/locale/localization.go
index 56b6462..5917932 100644
--- a/locale/localization.go
+++ b/locale/localization.go
@@ -11,6 +11,7 @@ type LocaleConfig struct {
 	TagsLabel  string           `yaml:"TagsLabel" json:"TagsLabel"`
 	BlogSearch BlogSearchConfig `yaml:"BlogSearch" json:"BlogSearch"`
 	GlobalMap  GlobalMapConfig  `yaml:"GlobalMap" json:"GlobalMap"`
+	HomePage   HomePageConfig   `yaml:"HomePage" json:"HomePage"`
 }
 
 type BlogSearchConfig struct {
@@ -27,6 +28,20 @@ type GlobalMapConfig struct {
 	Header string `yaml:"Header" json:"Header"`
 }
 
+type HomePageConfig struct {
+	Header                 string `yaml:"Header" json:"Header"`
+	DidYouKnowThat         string `yaml:"DidYouKnowThat" json:"DidYouKnowThat"`
+	SidebarDescription     string `yaml:"SidebarDescription" json:"SidebarDescription"`
+	HomePageDescription    string `yaml:"HomePageDescription" json:"HomePageDescription"`
+	BlogSearchDescription  string `yaml:"BlogSearchDescription" json:"BlogSearchDescription"`
+	MarkerMapDescription   string `yaml:"MarkerMapDescription" json:"MarkerMapDescription"`
+	ThemeSwitchDescription string `yaml:"ThemeSwitchDescription" json:"ThemeSwitchDescription"`
+	Hymn1                  string `yaml:"Hymn1" json:"Hymn1"`
+	Hymn2                  string `yaml:"Hymn2" json:"Hymn2"`
+	Hymn3                  string `yaml:"Hymn3" json:"Hymn3"`
+	Hymn4                  string `yaml:"Hymn4" json:"Hymn4"`
+}
+
 func LoadConfig(path string, config *LocaleConfig) error {
 	fileBytes, err := os.ReadFile(path)
 	if err != nil {
diff --git a/locale/localization.ru.yaml b/locale/localization.ru.yaml
index c236d1e..5e8d39f 100644
--- a/locale/localization.ru.yaml
+++ b/locale/localization.ru.yaml
@@ -9,3 +9,15 @@ BlogSearch:
   ChooseAllTags: 'Выбрать все'
 GlobalMap:
   Header: 'Глобальная карта'
+HomePage:
+  Header: 'Домашняя страница'
+  DidYouKnowThat: 'А вы знали, что...'
+  SidebarDescription: 'Поясняем за сайдбар'
+  HomePageDescription: 'Домашняя страница -- где мы сейчас и находимся!'
+  BlogSearchDescription: 'Поиск по блогу. Там размещены мои путевые заметки и, может, что-то ещё!'
+  MarkerMapDescription: 'Карта с маркерами моих путевых заметок, -- удобный способ найти интересный регион и перейти на заинтересовавшие посты!'
+  ThemeSwitchDescription: 'Позволяет поменять тему сайта -- есть 2 светлые и 2 тёмные темы!'
+  Hymn1: 'Приветствуем Вас на Саясайте!'
+  Hymn2: 'Мы Вас столько ждали!'
+  Hymn3: 'Столько радости от Вас на Саясайте!'
+  Hymn4: 'Где бы Вы не были, знайте, -- наша любовь крепка!'
diff --git a/main.go b/main.go
index 2f8ef4b..20e90f4 100644
--- a/main.go
+++ b/main.go
@@ -11,13 +11,14 @@ import (
 
 	"github.com/SayaAndy/saya-today-web/config"
 	"github.com/SayaAndy/saya-today-web/internal/b2"
+	"github.com/SayaAndy/saya-today-web/internal/factgiver"
 	"github.com/SayaAndy/saya-today-web/internal/lightgallery"
 	"github.com/SayaAndy/saya-today-web/internal/router"
 	"github.com/SayaAndy/saya-today-web/internal/tailwind"
 	"github.com/SayaAndy/saya-today-web/locale"
 	"github.com/dgraph-io/ristretto/v2"
 	"github.com/gofiber/fiber/v2"
-	"github.com/gofiber/fiber/v2/middleware/redirect"
+	"github.com/gofiber/fiber/v2/middleware/cors"
 	"github.com/golang-migrate/migrate/v4"
 	"github.com/golang-migrate/migrate/v4/database/sqlite3"
 	"github.com/yuin/goldmark"
@@ -107,12 +108,10 @@ func main() {
 		ProxyHeader: "X-Forwarded-For",
 	})
 
-	app.Use(redirect.New(redirect.Config{
-		Rules: map[string]string{
-			"/ru": "/",
-			"/en": "/",
-		},
-		StatusCode: 301,
+	app.Use(cors.New(cors.Config{
+		AllowOrigins: "https://f003.backblazeb2.com",
+		AllowMethods: "GET,POST,OPTIONS",
+		AllowHeaders: "Origin, Content-Type, Accept",
 	}))
 
 	router.CCache, err = router.NewClientCache(db, []byte(cfg.Auth.Salt))
@@ -131,7 +130,14 @@ func main() {
 		os.Exit(1)
 	}
 
+	router.FactGiver, err = factgiver.NewFactGiver(&cfg.FactGiver, availableLanguages)
+	if err != nil {
+		slog.Error("fail to initialize fact giver", slog.String("error", err.Error()))
+		os.Exit(1)
+	}
+
 	app.Get("/", router.Root(cfg.AvailableLanguages))
+	app.Get("/:lang<len(2)>", router.Api_V1_GeneralPage(localization, availableLanguages))
 	app.Get("/:lang/map", router.Lang_Map(localization, availableLanguages, b2Client))
 	app.Get("/:lang/blog", router.Api_V1_GeneralPage(localization, availableLanguages))
 	app.Get("/:lang/blog/:title", router.Api_V1_GeneralPage(localization, availableLanguages))
diff --git a/static/input.css b/static/input.css
index 261aeb3..739bea7 100644
--- a/static/input.css
+++ b/static/input.css
@@ -10,6 +10,7 @@
     --main-medium-color: #8a9d8a;
     --main-light-color: #a5b8a5;
     --background-dark-color: #ffffdd;
+    --background-medium-color: var(--background-dark-color);
     --background-light-color: #fffff0;
     --sidebar-text-color: var(--background-dark-color);
     --sidebar-stroke-color: var(--main-dark-color);
@@ -31,6 +32,7 @@
     --main-medium-color: #9bb665;
     --main-light-color: #bbd095;
     --background-dark-color: #f5eee2;
+    --background-medium-color: var(--background-dark-color);
     --background-light-color: #fff9ef;
     --sidebar-text-color: var(--main-dark-color);
     --sidebar-stroke-color: var(--background-dark-color);
@@ -52,6 +54,7 @@
     --main-medium-color: var(--color-sky-200);
     --main-light-color: var(--color-sky-300);
     --background-dark-color: #13131b;
+    --background-medium-color: var(--background-dark-color);
     --background-light-color: #222230;
     --sidebar-text-color: var(--main-dark-color);
     --sidebar-stroke-color: var(--background-light-color);
@@ -73,6 +76,7 @@
     --main-medium-color: #f6e4c5;
     --main-light-color: #e8d4b8;
     --background-dark-color: #413b34;
+    --background-medium-color: #62584f;
     --background-light-color: #6d6258;
     --sidebar-text-color: var(--main-dark-color);
     --sidebar-stroke-color: var(--background-light-color);
@@ -615,6 +619,22 @@ body[data-theme~="ram"] .leaflet-tile {
     }
 }
 
+@media (min-aspect-ratio: 0.6/1) {
+    .ar-gt-0\.6\:flex-3\/5 {
+        flex: 60%;
+    }
+
+    .ar-gt-0\.6\:flex-2\/5 {
+        flex: 40%;
+    }
+}
+
+@media (max-aspect-ratio: 0.6/1) {
+    .ar-lt-0\.6\:flex-col {
+        flex-direction: column;
+    }
+}
+
 @media (max-aspect-ratio: 0.4/1) {
     .ar-lt-0\.4\:w-\[100vw\] {
         width: 100vw;
@@ -625,6 +645,14 @@ body[data-theme~="ram"] .leaflet-tile {
     }
 }
 
+.home-page-heart {
+    position: absolute;
+    color: var(--color-pink-700);
+    user-select: none;
+    pointer-events: none;
+    font-family: serif;
+}
+
 .night-star {
     color: var(--color-yellow-100);
     animation-name: blink;
diff --git a/views/index.html b/views/index.html
index 2b8c937..b52df94 100644
--- a/views/index.html
+++ b/views/index.html
@@ -106,7 +106,7 @@
         <p class="font-patua mx-auto text-[2.5vmax] mt-[0.8vmin] mb-[0.8vmin]">saya.today</p>
         <div class="menu-inner-body grow bg-background-light flex flex-adaptive mx-auto opacity-100">
             {{- range .AvailableLanguages }}
-            <img onclick="location.href='/{{ .Name }}/blog';" class="object-scale-down cursor-pointer flex-1 rounded-[20%] language-icon mx-auto my-auto relative" src="{{ .Flag }}" alt="{{ .Alt }}">
+            <img onclick="location.href='/{{ .Name }}';" class="object-scale-down cursor-pointer flex-1 rounded-[20%] language-icon mx-auto my-auto relative" src="{{ .Flag }}" alt="{{ .Alt }}">
             {{- end }}
         </div>
         <p class="font-spectral mx-auto text-[1.5vmax] text-secondary mt-[0.8vmin] mb-[0.8vmin]">Choose your language</p>
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index cb85a09..60608f4 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -7,9 +7,9 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Patua+One&display=swap" rel="stylesheet">
-    <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">
+    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lightgallery.min.css">
+    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-zoom.min.css">
+    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/css/lg-thumbnail.min.css">
     <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css">
     <link href="/output.css" rel="stylesheet">
 </head>
@@ -166,7 +166,7 @@
             saya.today
         </div>
         <div class="text-[3vw] ar-lt-1.1:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="changeUrl('/{{ .Lang }}');" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="changeUrl('/{{ .Lang }}/blog');" class="fas fa-search w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index b121cc6..863b417 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -1,7 +1,7 @@
 {{ define "top-embeds" }}
 <script>
-    var galleryMap = new Map();
-    var map;
+    let galleryMap = new Map();
+    let map;
 
     window.addEventListener('popout', (e) => {
         map.remove();
@@ -9,6 +9,8 @@
             g.destroy();
         });
         galleryMap.clear();
+        map = null;
+        galleryMap = null;
     }, {once: true});
 </script>
 {{ end }}
@@ -87,7 +89,8 @@
     window.addEventListener('resize', resizeCb);
 
     document.addEventListener('popout', (e) => {
-        window.removeEventListener('resize', resizeCb, {once: true});
+        window.removeEventListener('resize', resizeCb);
+        galleryResizeTimeout = null;
     });
 </script>
 {{ end }}
\ No newline at end of file
diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index d6e7281..a844e06 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -45,7 +45,7 @@
             saya.today
         </div>
         <div class="text-[3vw] ar-lt-1.1:text-[5vh] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1vw] flex flex-col ar-lt-1.1:flex-row gap-0 relative z-20">
-            <i onclick="location.href='/';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
+            <i onclick="location.href='/{{ .Lang }}';" class="fas fa-home w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="location.href='/{{ .Lang }}/blog';" class="fas fa-search w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="location.href='/{{ .Lang }}/map';" class="fas fa-map w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
             <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook w-[5vw] ar-lt-1.1:w-[8vh] h-[5vw] ar-lt-1.1:h-[8vh] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex rounded-lg"></i>
diff --git a/views/pages/home-page.html b/views/pages/home-page.html
new file mode 100644
index 0000000..9775ac3
--- /dev/null
+++ b/views/pages/home-page.html
@@ -0,0 +1,99 @@
+{{ define "body" }}
+<div class="bg-background-light flex flex-row ar-lt-0.6:flex-col w-full h-full inset-shadow overflow-y-auto text-[1vmax]/[2] tracking-[0.04vmin]">
+    <div class="ar-gt-0.6:flex-3/5 justify-center content-start p-[5%]">
+        <div class="flex flex-col justify-start items-start bg-background-dark mb-[2vmax]">
+            <p class="text-[3vmax]/[2] tracking-[0.2vmin] uppercase w-full font-spectral italic text-left
+                border-l-[0.4vmax] border-solid border-(--background-dark-color)
+                bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.Hymn1 }}</p>
+            <hr class="w-full border-t-[0.2vmax] border-dotted border-main-dark mb-[0.8vmin]">
+            <p class="text-[2vmax]/[2] -indent-[2vmax] ml-[2vmax] p-[0.4vmax]">{{ .L.HomePage.Hymn2 }}</p>
+            <p class="text-[2vmax]/[2] -indent-[2vmax] ml-[2vmax] p-[0.4vmax]">{{ .L.HomePage.Hymn3 }}</p>
+            <p class="text-[2vmax]/[2] -indent-[2vmax] ml-[2vmax] p-[0.4vmax]">{{ .L.HomePage.Hymn4 }}</p>
+        </div>
+        <div class="flex flex-col justify-center items-center">
+            <p class="text-[2vmax] w-full font-spectral italic text-left
+                border-l-[0.4vmax] border-solid border-(--background-dark-color)
+                bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.DidYouKnowThat }}</p>
+            <hr class="w-full border-t-[0.2vmax] border-dotted border-main-dark mb-[0.8vmin]">
+            <ul class="w-full text-left list-[circle]">
+                <li class="ml-[2vmax] mb-[0.8vmin]">{{ index .FunFacts 0 }}</li>
+                <li class="ml-[2vmax] mb-[0.8vmin]">{{ index .FunFacts 1 }}</li>
+                <li class="ml-[2vmax]">{{ index .FunFacts 2 }}</li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="ar-gt-0.6:flex-2/5 justify-center content-start p-[5%]">
+        <div class="flex relative aspect-square justify-center content-center mb-[2vmax]">
+            {{- range $_ := iterate .FilledHeartCount }}
+                <div class="home-page-heart z-50">♥</div>
+            {{- end }}
+            {{- range $_ := iterate .OutlineHeartCount }}
+                <div class="home-page-heart z-50">♡</div>
+            {{- end }}
+            <img src="https://f003.backblazeb2.com/file/sayana-static/home-page-gifs/{{ .GifName }}"
+                class="home-page-gif z-49 -rotate-12 max-w-[70%] max-h-[70%] border-[1vmin] border-(--background-dark-color) border-inset">
+        </div>
+
+        <script>
+            function shuffleHearts() {
+                vmin = calculateVmin(1);
+                document.querySelectorAll('.home-page-heart').forEach((e) => {
+                    let top, left;
+                    do {
+                        top = Math.floor(rand() * 90) + 5;
+                        left = Math.floor(rand() * 90) + 5;
+                    } while (top > 30 && top < 70 && left > 30 && left < 70);
+                    const opacity = rand() * 0.7 + 0.2;
+                    const size = rand() * 3.2 + 0.8;
+                    e.style["top"] = `calc(${top}% - ${size}vmin / 2)`;
+                    e.style["left"] = `calc(${left}% - ${size}vmin / 2)`;
+                    e.style["opacity"] = `${opacity}`;
+                    e.style["font-size"] = `${size}vmin`;
+                });
+            }
+
+            let shuffleHeartsResizeTimeout;
+            function shuffleHeartsResizeCb() {
+                clearTimeout(shuffleHeartsResizeTimeout);
+                shuffleHeartsResizeTimeout = setTimeout(shuffleHearts, 300);
+            }
+            window.addEventListener('resize', shuffleHeartsResizeCb);
+
+            document.addEventListener('popout', (e) => {
+                window.removeEventListener('resize', shuffleHeartsResizeCb);
+                shuffleHeartsResizeCb = null;
+            });
+        </script>
+
+        <script>
+            document.addEventListener('htmx:afterRequest', (e) => {
+                if (e.detail.xhr.status == 404 || e.detail.successful != true) {
+                    return console.error(e);
+                }
+                if (e.detail.target.id == 'general-page-body') {
+                    shuffleHearts();
+                }
+            }, {once: true});
+        </script>
+
+        <div class="flex flex-col justify-center items-center">
+            <p class="text-[2vmax] w-full font-spectral italic text-left
+                border-l-[0.4vmax] border-solid border-(--background-dark-color)
+                bg-gradient-to-r from-(--background-dark-color) to-(--background-light-color)">{{ .L.HomePage.SidebarDescription }}</p>
+            <hr class="w-full border-t-[0.2vmax] border-dotted border-main-dark mb-[0.8vmin]">
+            <div class="w-full grid grid-cols-[1fr_4fr] content-center items-center
+                [&>*:nth-child(4n+2)]:bg-(--background-medium-color) [&>*:nth-child(4n+3)]:bg-(--background-medium-color)" style="container-type: inline-size;">
+                <i class="fas fa-home w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
+                <p class="p-[0.4vmax]">{{ .L.HomePage.HomePageDescription }}</p>
+                <i class="fas fa-search w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
+                <p class="p-[0.4vmax]">{{ .L.HomePage.BlogSearchDescription }}</p>
+                <i class="fas fa-map w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
+                <p class="p-[0.4vmax]">{{ .L.HomePage.MarkerMapDescription }}</p>
+                <i class="fas fa-swatchbook w-full h-full text-[10cqi] content-center text-center text-main-dark"></i>
+                <p class="p-[0.4vmax]">{{ .L.HomePage.ThemeSwitchDescription }}</p>
+            </div>
+        </div>
+    </div>
+</div>
+{{ end }}
-- 
cgit v1.3.1+13