refactor: prepare layout for SPA

8 files changed, 84 insertions, 13 deletions

diff --git a/internal/router/api-v1-general-page-header.go b/internal/router/api-v1-general-page-header.go
new file mode 100644
index 0000000..8ac7c03
--- /dev/null
+++ b/internal/router/api-v1-general-page-header.go
@@ -0,0 +1,39 @@
+package router
+
+import (
+	"fmt"
+	"net/url"
+	"slices"
+	"strings"
+
+	"github.com/SayaAndy/saya-today-web/locale"
+	"github.com/gofiber/fiber/v2"
+)
+
+func Api_V1_GeneralPage_Header(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.SplitN(strings.Trim(path, "/"), "/", 2)
+		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))
+		}
+
+		return nil
+	}
+}
diff --git a/internal/templatemanager/templatemanager.go b/internal/templatemanager/templatemanager.go
index f89d0c8..640a706 100644
--- a/internal/templatemanager/templatemanager.go
+++ b/internal/templatemanager/templatemanager.go
@@ -44,14 +44,25 @@ func NewTemplateManager(templates ...TemplateManagerTemplates) (*TemplateManager
 	}, nil
 }
 
-func (tm *TemplateManager) Render(name string, data interface{}) ([]byte, error) {
+func (tm *TemplateManager) Render(name string, data any, files ...string) ([]byte, error) {
 	tmpl, exists := tm.templates[name]
 	if !exists {
 		return nil, fmt.Errorf("template %s is not found", name)
 	}
 
+	var err error
+	var tempTmpl *template.Template
+	if len(files) == 0 {
+		tempTmpl = tmpl.Tmpl
+	} else {
+		tempTmpl, err = tmpl.Tmpl.ParseFiles(files...)
+		if err != nil {
+			return nil, fmt.Errorf("couldn't include additional files in template rendering: %w", err)
+		}
+	}
+
 	var buf bytes.Buffer
-	err := tmpl.Tmpl.ExecuteTemplate(&buf, tmpl.Main, data)
+	err = tempTmpl.ExecuteTemplate(&buf, tmpl.Main, data)
 	return buf.Bytes(), err
 }
 
diff --git a/views/layouts/general-page.html b/views/layouts/general-page.html
index a7cf66e..0b020c6 100644
--- a/views/layouts/general-page.html
+++ b/views/layouts/general-page.html
@@ -166,19 +166,24 @@
         <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 {{ 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 id="general-page-header" class="flex flex-col">
+                <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 }}
             </div>
-            {{ block "header" . }}{{ end }}
+
             <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
 
-            {{ block "body" . }}{{ end }}
+            <div id="general-page-body" class="flex flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)] grow">
+                {{ block "body" . }}{{ end }}
+            </div>
 
-            <div class="flex flex-row mt-[0.8vmin] mb-[0.4vmin]">
+            <div id="general-page-footer" class="flex flex-row mt-[0.8vmin] mb-[0.4vmin]">
                 {{ 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 }}
diff --git a/views/pages/blog-catalogue.html b/views/pages/blog-catalogue.html
index 1d0a2de..1bed1cc 100644
--- a/views/pages/blog-catalogue.html
+++ b/views/pages/blog-catalogue.html
@@ -1,5 +1,5 @@
 {{ define "body" }}
-<div class="flex flex-row ar-lt-0.8:flex-col max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)] flex-1 text-[1vmax]">
+<div class="flex flex-row ar-lt-0.8: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]">
         <div class="flex flex-col overflow-y-auto">
diff --git a/views/pages/blog-page.html b/views/pages/blog-page.html
index 65ee31d..2f5465c 100644
--- a/views/pages/blog-page.html
+++ b/views/pages/blog-page.html
@@ -19,7 +19,7 @@
 {{ end }}
 
 {{ define "body" }}
-<div class="bg-background-light flex flex-col grow overflow-y-auto inset-shadow p-[2.4vmin] max-h-[calc(100%-7vmax)] ar-lt-0.8:max-h-[calc(100%-25vh)]">
+<div class="bg-background-light flex flex-col inset-shadow p-[2.4vmin] overflow-y-auto">
     {{ .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">
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 }}