From 9340e7022d95c912db5f1d9fcb0313743ae3cb4a Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Sun, 31 Aug 2025 11:16:59 +0700
Subject: refactor: prepare layout for SPA

---
 views/partials/general-page-body.html   | 1 +
 views/partials/general-page-footer.html | 7 +++++++
 views/partials/general-page-header.html | 8 ++++++++
 3 files changed, 16 insertions(+)
 create mode 100644 views/partials/general-page-body.html
 create mode 100644 views/partials/general-page-footer.html
 create mode 100644 views/partials/general-page-header.html

(limited to 'views/partials')

diff --git a/views/partials/general-page-body.html b/views/partials/general-page-body.html
new file mode 100644
index 0000000..d697c14
--- /dev/null
+++ b/views/partials/general-page-body.html
@@ -0,0 +1 @@
+{{ block "body" . }}{{ end }}
\ No newline at end of file
diff --git a/views/partials/general-page-footer.html b/views/partials/general-page-footer.html
new file mode 100644
index 0000000..af6aec9
--- /dev/null
+++ b/views/partials/general-page-footer.html
@@ -0,0 +1,7 @@
+{{ block "footer" . }}{{ end }}
+<p class="grow content-center text-[1vmax]/[1] font-spectral italic text-right text-secondary mr-2">
+    All the photos on <a href="https://saya.today/">saya.today</a> are licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a> by <a href="https://t.me/EarlInisMona">Saya Andy</a> © {{ .PublishedYear }}
+</p>
+<img class="max-w-[1vmax] max-h-[1vmax] self-center" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="CC">
+<img class="max-w-[1vmax] max-h-[1vmax] self-center" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="BY">
+<img class="max-w-[1vmax] max-h-[1vmax] self-center" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="SA">
\ No newline at end of file
diff --git a/views/partials/general-page-header.html b/views/partials/general-page-header.html
new file mode 100644
index 0000000..66cfecf
--- /dev/null
+++ b/views/partials/general-page-header.html
@@ -0,0 +1,8 @@
+<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>
+    <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>
+</div>
+{{ block "header" . }}{{ end }}
-- 
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 'views/partials')

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 fad8679f7173273e528d626c5c03f90d02010733 Mon Sep 17 00:00:00 2001
From: SayaAndy <saya.andy@posteo.com>
Date: Wed, 3 Sep 2025 17:39:12 +0700
Subject: feat: remove label in like button

---
 locale/localization.en.yaml               | 1 -
 locale/localization.go                    | 1 -
 locale/localization.ru.yaml               | 1 -
 views/partials/blog-page-like-button.html | 3 +--
 4 files changed, 1 insertion(+), 5 deletions(-)

(limited to 'views/partials')

diff --git a/locale/localization.en.yaml b/locale/localization.en.yaml
index 48ef9da..f5ee6c9 100644
--- a/locale/localization.en.yaml
+++ b/locale/localization.en.yaml
@@ -9,4 +9,3 @@ BlogSearch:
   ChooseAllTags: 'Choose All'
 GlobalMap:
   Header: 'Global Map'
-LikeButton: 'Like!'
diff --git a/locale/localization.go b/locale/localization.go
index b557e08..56b6462 100644
--- a/locale/localization.go
+++ b/locale/localization.go
@@ -11,7 +11,6 @@ type LocaleConfig struct {
 	TagsLabel  string           `yaml:"TagsLabel" json:"TagsLabel"`
 	BlogSearch BlogSearchConfig `yaml:"BlogSearch" json:"BlogSearch"`
 	GlobalMap  GlobalMapConfig  `yaml:"GlobalMap" json:"GlobalMap"`
-	LikeButton string           `yaml:"LikeButton" json:"LikeButton"`
 }
 
 type BlogSearchConfig struct {
diff --git a/locale/localization.ru.yaml b/locale/localization.ru.yaml
index d6e9fe4..c236d1e 100644
--- a/locale/localization.ru.yaml
+++ b/locale/localization.ru.yaml
@@ -9,4 +9,3 @@ BlogSearch:
   ChooseAllTags: 'Выбрать все'
 GlobalMap:
   Header: 'Глобальная карта'
-LikeButton: 'Нраица!'
diff --git a/views/partials/blog-page-like-button.html b/views/partials/blog-page-like-button.html
index afc3027..a16e8c0 100644
--- a/views/partials/blog-page-like-button.html
+++ b/views/partials/blog-page-like-button.html
@@ -1,7 +1,6 @@
 <button 
     hx-put="/api/v1/like" hx-vals='{"like": {{ not .Liked }}}' hx-target="this" hx-swap="outerHTML" hx-trigger="click"
     class="text-[0.8vmax]/[0.9] font-spectral text-left px-[0.4vmax] py-[0.2vmax] {{ if .Liked }}bg-main-light hover:bg-main-medium text-background-dark border-inset{{ else }}bg-main-dark hover:bg-main-medium text-background-light border-outset{{ end }} cursor-pointer border-[0.2vmax] border-background-dark">
-    <i class="fas fa-thumbs-up w-[0.8vmax] h-[0.8vmax] mr-[0.4vmax]"></i>
-    <span>{{ .L.LikeButton }}</span>
+    <i class="fas fa-thumbs-up w-[0.8vmax] h-[0.8vmax]"></i>
     <span class="italic ml-[0.2vmax] text-background-light">({{ .LikedCount }})</span>
 </button>
\ No newline at end of file
-- 
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 'views/partials')

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