feat: clickable tags (to search explicitly one)v0.5.9

feat: show published time in client's timezone
feat: make 'ram' theme default
fix: show tags header in catalogue

5 files changed, 80 insertions, 24 deletions

diff --git a/main.go b/main.go
index 4dc9619..9e3f9a4 100644
--- a/main.go
+++ b/main.go
@@ -82,7 +82,7 @@ func main() {
 		{Name: "blog-page", Files: []string{"views/layouts/general-page.html", "views/pages/blog-page.html"}},
 		{Name: "blog-catalogue", Files: []string{"views/layouts/general-page.html", "views/pages/blog-catalogue.html"}},
 		{Name: "index", Files: []string{"views/index.html"}},
-		{Name: "catalogue-blog-cards", Files: []string{"views/partials/catalogue-blog-cards.html"}},
+		{Name: "catalogue-blog-cards", Files: []string{"views/partials/catalogue-blog-cards.html", "views/partials/catalogue-blog-card-tags.html"}},
 	})
 	if err != nil {
 		slog.Error("fail to initialize template manager", slog.String("error", err.Error()))
@@ -227,15 +227,49 @@ func main() {
 		return c.Type("html").Send(content)
 	})
 
+	app.Get("/api/v1/tz", func(c *fiber.Ctx) error {
+		timestampString := c.Query("timestamp")
+		tz := c.Query("tz")
+
+		loc, err := time.LoadLocation(tz)
+		if err != nil {
+			loc = time.UTC
+			slog.Warn("unable to parse a client timezone, defaulting to UTC", slog.String("error", err.Error()), slog.String("tz", tz))
+		}
+
+		var format string
+		var timestamp time.Time
+		for _, format = range []string{"2006-01-02 15:04:05 -07:00", time.RFC3339} {
+			if timestamp, err = time.Parse(format, timestampString); err == nil {
+				break
+			}
+		}
+
+		c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
+
+		if err != nil {
+			return c.Status(fiber.StatusBadRequest).SendString("invalid timestamp format")
+		}
+
+		return c.Status(fiber.StatusOK).SendString(timestamp.In(loc).Format(format))
+	})
+
 	app.Get("/api/v1/blog-search", func(c *fiber.Ctx) error {
 		sort := c.Query("sort")
 		lang := c.Query("lang")
+		tz := c.Query("tz")
 
 		if !slices.Contains(availableLanguages, lang) {
 			c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
 			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("server does not support '%s' language", lang))
 		}
 
+		loc, err := time.LoadLocation(tz)
+		if err != nil {
+			loc = time.UTC
+			slog.Warn("unable to parse a client timezone, defaulting to UTC", slog.String("error", err.Error()), slog.String("tz", tz))
+		}
+
 		pages, err := b2Client.Scan(lang + "/")
 		if err != nil {
 			c.Set(fiber.HeaderContentType, fiber.MIMETextPlainCharsetUTF8)
@@ -257,42 +291,42 @@ func main() {
 			tags = append(tags, string(match[1]))
 		}
 
-		pageMeta := make([]map[string]string, 0, len(pages))
+		pageMeta := make([]fiber.Map, 0, len(pages))
 		for _, page := range pages {
 			for _, tag := range page.Metadata.Tags {
 				if len(tags) == 0 || slices.Contains(tags, tag) {
-					pageMeta = append(pageMeta, map[string]string{
+					pageMeta = append(pageMeta, fiber.Map{
 						"Link":             page.Link,
 						"ArticleLink":      "/" + lang + "/blog/" + page.FileName,
 						"Title":            page.Metadata.Title,
-						"PublishedTime":    page.Metadata.PublishedTime.Format("2006-01-02 15:04:05 -07:00"),
+						"PublishedTime":    page.Metadata.PublishedTime.In(loc).Format("2006-01-02 15:04:05 -07:00"),
 						"ActionDate":       page.Metadata.ActionDate,
 						"ShortDescription": page.Metadata.ShortDescription,
 						"Thumbnail":        page.Metadata.Thumbnail,
-						"Tags":             strings.Join(page.Metadata.Tags, ", "),
+						"Tags":             page.Metadata.Tags,
 					})
 					break
 				}
 			}
 		}
 
-		slices.SortFunc(pageMeta, func(a, b map[string]string) int {
+		slices.SortFunc(pageMeta, func(a, b fiber.Map) int {
 			switch sort {
 			case "titleAsc":
-				return strings.Compare(a["Title"], b["Title"])
+				return strings.Compare(a["Title"].(string), b["Title"].(string))
 			case "titleDesc":
-				return strings.Compare(b["Title"], a["Title"])
+				return strings.Compare(b["Title"].(string), a["Title"].(string))
 			case "actionDateAsc":
-				return strings.Compare(a["ActionDate"], b["ActionDate"])
+				return strings.Compare(a["ActionDate"].(string), b["ActionDate"].(string))
 			case "actionDateDesc":
-				return strings.Compare(b["ActionDate"], a["ActionDate"])
+				return strings.Compare(b["ActionDate"].(string), a["ActionDate"].(string))
 			case "publicationDateAsc":
-				publishedTimeA, _ := time.Parse("2006-01-02 15:04:05 -07:00", a["PublishedTime"])
-				publishedTimeB, _ := time.Parse("2006-01-02 15:04:05 -07:00", b["PublishedTime"])
+				publishedTimeA, _ := time.Parse("2006-01-02 15:04:05 -07:00", a["PublishedTime"].(string))
+				publishedTimeB, _ := time.Parse("2006-01-02 15:04:05 -07:00", b["PublishedTime"].(string))
 				return publishedTimeA.Compare(publishedTimeB)
 			case "publicationDateDesc":
-				publishedTimeA, _ := time.Parse("2006-01-02 15:04:05 -07:00", a["PublishedTime"])
-				publishedTimeB, _ := time.Parse("2006-01-02 15:04:05 -07:00", b["PublishedTime"])
+				publishedTimeA, _ := time.Parse("2006-01-02 15:04:05 -07:00", a["PublishedTime"].(string))
+				publishedTimeB, _ := time.Parse("2006-01-02 15:04:05 -07:00", b["PublishedTime"].(string))
 				return publishedTimeB.Compare(publishedTimeA)
 			}
 			return 0
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index eab7cd1..46ef2e6 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -12,7 +12,7 @@
     <link href="/output.css" rel="stylesheet">
 </head>
 
-<body data-theme="night" 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-0.8:flex-col">
 
     <script>
         function switchTheme(theme) {
@@ -29,10 +29,14 @@
             document.body.setAttribute('data-theme', theme);
         }
 
-        const savedTheme = localStorage.getItem('theme') || 'night';
+        const savedTheme = localStorage.getItem('theme') || 'ram';
         switchTheme(savedTheme);
     </script>
 
+    <script>
+        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">
             saya.today
@@ -49,13 +53,12 @@
         <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="flex flex-row mb-[0.4vmin]">
+            <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>
-                {{- if .PublishedDate }}
-                <p class="grow text-[1.5vmax] font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
-                {{- end }}
+                <p id="published-date" class="grow text-[1.5vmax] font-spectral text-secondary text-right mt-auto">{{ .PublishedDate }}</p>
             </div>
             <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
 
@@ -76,6 +79,8 @@
         <div class="pr-[0.5vw] bg-background-dark shadow-2xl border-l-[0.4vmin] border-dotted border-main-dark"></div>
     </div>
 
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
+
     {{ block "footer" . }}{{ end }}
 
 </body>
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 6c0f629..2b248c3 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -49,7 +49,7 @@
 
     <div class="w-[0.5vh] border-r-[0.3vh] border-dotted border-main-dark bg-background-dark"></div>
 
-    <div hx-get="/api/v1/blog-search" hx-vals='{"lang": "{{ .Lang }}"}' hx-target="this" hx-swap="innerHTML" hx-trigger="load" hx-include=".tags-list"
+    <div hx-get="/api/v1/blog-search" hx-vals='js:{lang: "{{ .Lang }}", tz: clientTimeZone}' hx-target="this" hx-swap="innerHTML" hx-trigger="load" hx-include=".tags-list"
         class="blog-cards grow flex flex-col overflow-y-auto bg-background-light inset-shadow p-[2.4vmin]">
         Loading...
     </div>
@@ -57,8 +57,6 @@
 {{ end }}
 
 {{ define "footer" }}
-<script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script>
-
 <script>
     function selectAll() {
         const tagsContainers = document.querySelectorAll('form.tags-list');
@@ -120,6 +118,24 @@
         window.history.pushState({}, '', url.toString());
     }
 
+    function pickedTagSetHrefParams(tag) {
+        const url = new URL(window.location.href);
+        url.searchParams.delete('tags[]');
+        url.searchParams.set('tags[]', tag);
+
+        const tagsContainers = document.querySelectorAll('form.tags-list');
+        tagsContainers.forEach(tagsContainer => {
+            const checkboxes = tagsContainer.querySelectorAll('input[type="checkbox"]');
+            checkboxes.forEach(checkbox => {
+                checkbox.checked = false;
+            });
+            chosenCheckbox = tagsContainer.querySelector(`#tag${tag}Checkbox`);
+            chosenCheckbox.checked = true;
+        });
+
+        window.history.pushState({}, '', url.toString());
+    }
+
     document.addEventListener('DOMContentLoaded', contextAll);
 </script>
 
diff --git a/views/partials/catalogue-blog-card-tags.html b/views/partials/catalogue-blog-card-tags.html
new file mode 100644
index 0000000..374314a
--- /dev/null
+++ b/views/partials/catalogue-blog-card-tags.html
@@ -0,0 +1 @@
+{{ range $i, $tag := .Tags }}{{ if ne $i 0 }}, {{ end }}<a hx-trigger="click" hx-get="/api/v1/blog-search" hx-target=".blog-cards" hx-swap="innerHTML" hx-trigger="load" hx-include=".tags-list" class="hx-anchor cursor-pointer" onclick="pickedTagSetHrefParams({{ $tag }})">{{ $tag }}</a>{{ end }}
\ No newline at end of file
diff --git a/views/partials/catalogue-blog-cards.html b/views/partials/catalogue-blog-cards.html
index a9e4010..406ef9b 100644
--- a/views/partials/catalogue-blog-cards.html
+++ b/views/partials/catalogue-blog-cards.html
@@ -12,7 +12,7 @@
             <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>
-        <p class="text-[1vmax] text-secondary">{{ .L.TagsLabel }} {{ .Tags }}</p>
+        <p class="text-[1vmax] text-secondary">{{ $.L.TagsLabel }} {{ template "catalogue-blog-card-tags.html" . }}</p>
     </div>
 </div>
 {{- end }}
\ No newline at end of file