feat: add geolocation of places in blog0.3.1

6 files changed, 112 insertions, 1 deletions

diff --git a/internal/frontmatter/parser.go b/internal/frontmatter/parser.go
index 6cc3ee8..1a521c0 100644
--- a/internal/frontmatter/parser.go
+++ b/internal/frontmatter/parser.go
@@ -15,6 +15,7 @@ type Metadata struct {
 	PublishedTime    time.Time `yaml:"publishedTime"`
 	Thumbnail        string    `yaml:"thumbnail"`
 	Tags             []string  `yaml:"tags"`
+	Geolocation      string    `yaml:"geolocation"`
 }
 
 func ParseFrontmatter(content []byte) (metadata *Metadata, markdown []byte, err error) {
diff --git a/main.go b/main.go
index 37d6e8d..447329b 100644
--- a/main.go
+++ b/main.go
@@ -101,12 +101,25 @@ func main() {
 			return c.Status(fiber.ErrNotFound.Code).SendString(fmt.Sprintf("failed to find '%s' post", c.Params("title")))
 		}
 
+		geolocationParts := strings.Split(metadata.Geolocation, " ")
+		var x, y, areaError string
+		if len(geolocationParts) >= 2 {
+			x = geolocationParts[0]
+			y = geolocationParts[1]
+		}
+		if len(geolocationParts) >= 3 {
+			areaError = geolocationParts[2]
+		}
+
 		return c.Render("layouts/blog-page", fiber.Map{
 			"Title":                 metadata.Title,
 			"PublishedDate":         metadata.PublishedTime.Format("2006-01-02 15:04:05 -07:00"),
 			"PublishedYear":         strconv.Itoa(metadata.PublishedTime.Year()),
 			"ParsedMarkdownDesktop": template.HTML(parsedMarkdownDesktop),
 			"ParsedMarkdownMobile":  template.HTML(parsedMarkdownMobile),
+			"MapLocationX":          x,
+			"MapLocationY":          y,
+			"MapLocationAreaMeters": areaError,
 		})
 	})
 
diff --git a/static/input.css b/static/input.css
index 4058cb1..c105d8f 100644
--- a/static/input.css
+++ b/static/input.css
@@ -227,14 +227,26 @@
     width: 90vw;
 }
 
+.w-p60 {
+    width: 60%;
+}
+
 .w-p80 {
     width: 80%;
 }
 
+.w-p100 {
+    width: 100%;
+}
+
 .w-vmax4 {
     width: 4vmax;
 }
 
+.h-vh40 {
+    height: 40vh;
+}
+
 .h-vh90 {
     height: 90vh;
 }
@@ -288,6 +300,10 @@
     padding-right: 1.2vmin;
 }
 
+.p-vmin0-8 {
+    padding: 0.8vmin;
+}
+
 .p-vmin2-4 {
     padding: 2.4vmin;
 }
diff --git a/static/output.css b/static/output.css
index ea57d8f..b07fd94 100644
--- a/static/output.css
+++ b/static/output.css
@@ -259,6 +259,9 @@
   .flex-5 {
     flex: 5;
   }
+  .flex-none {
+    flex: none;
+  }
   .flex-grow {
     flex-grow: 1;
   }
@@ -584,12 +587,21 @@
 .w-vw90 {
   width: 90vw;
 }
+.w-p60 {
+  width: 60%;
+}
 .w-p80 {
   width: 80%;
 }
+.w-p100 {
+  width: 100%;
+}
 .w-vmax4 {
   width: 4vmax;
 }
+.h-vh40 {
+  height: 40vh;
+}
 .h-vh90 {
   height: 90vh;
 }
@@ -630,6 +642,9 @@
 .pr-vmin1-2 {
   padding-right: 1.2vmin;
 }
+.p-vmin0-8 {
+  padding: 0.8vmin;
+}
 .p-vmin2-4 {
   padding: 2.4vmin;
 }
diff --git a/views/index.html b/views/index.html
index 1b6f8c8..ce80db6 100644
--- a/views/index.html
+++ b/views/index.html
@@ -95,7 +95,7 @@
         <div class="menu-inner-body grow bg-background-light flex flex-col mx-auto mb-vmin1-6 overflow-y-auto opacity-100">
             {{- range .BlogPages }}
             <div class="m-2 flex flex-row justify-center justify-items-center gap-4">
-                <img style="flex-grow: 0;" class="flex-1 object-cover rounded-4xl select-none w-vmax4 h-vmax4" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
+                <img onclick="location.href='/blog/{{ .Link }}';" style="flex-grow: 0;" class="flex-1 cursor-pointer object-cover rounded-4xl select-none w-vmax4 h-vmax4" src="https://f003.backblazeb2.com/file/sayana-photos/thumbnails/{{ .Thumbnail }}.webp">
                 <div class="flex-5 justify-self-center flex-col border-r-1 border-dashed border-opacity-50 border-main-medium">
                     <a href="/blog/{{ .Link }}" class="block font-extrabold">{{ .Title }}</a>
                     <a href="/blog/{{ .Link }}" class="block italic text-vmax1 text-secondary">{{ .ActionDate }}</a>
diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html
index df5e4cf..c52e0e4 100644
--- a/views/layouts/blog-page.html
+++ b/views/layouts/blog-page.html
@@ -8,10 +8,20 @@
     <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">
+{{- if .MapLocationX }}
+    <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css">
+{{- end }}
     <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 href="/output.css" rel="stylesheet">
+
+    <style>
+        .map-container .leaflet-container {
+            width: 100% !important;
+            height: 100% !important;
+        }
+    </style>
 </head>
 
 <body data-theme="olive" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex">
@@ -60,6 +70,11 @@
 
             <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4">
                 {{ .ParsedMarkdownDesktop }}
+                {{- if .MapLocationX }}
+                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+                <div id="location-map-desktop" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p60 h-vh40"></div>
+                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+                {{- end }}
             </div>
 
             <div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
@@ -103,6 +118,11 @@
 
             <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-vmin2-4">
                 {{ .ParsedMarkdownMobile }}
+                {{- if .MapLocationX }}
+                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+                <div id="location-map-mobile" class="relative p-vmin0-8 flex-none ml-auto mr-auto w-p100 h-vh40"></div>
+                <hr class="border-t-4 border-dotted border-main-dark mt-vmin0-8 mb-vmin0-8 w-p80 ml-auto mr-auto">
+                {{- end }}
             </div>
 
             <div class="flex flex-row mt-vmin0-8 mb-vmin0-4">
@@ -123,6 +143,52 @@
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/lightgallery.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-zoom.min.js"></script>
     <script src="https://f003.backblazeb2.com/file/sayana-static/libs/lightgallery/2.8.3/plugins/lg-thumbnail.min.js"></script>
+{{- if .MapLocationX }}
+    <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script>
+
+    <script>
+        function initLocationMap(id, x, y, relativeErrorMeters = 0) {
+            var map = L.map(id).setView([x, y], 13);
+
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                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]).addTo(map);
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {initLocationMap(
+            'location-map-desktop',
+            {{ .MapLocationX }},
+            {{ .MapLocationY }},
+            {{ .MapLocationAreaMeters }}
+        )});
+
+        document.addEventListener('DOMContentLoaded', () => {initLocationMap(
+            'location-map-mobile',
+            {{ .MapLocationX }},
+            {{ .MapLocationY }},
+            {{ .MapLocationAreaMeters }}
+        )});
+
+        window.addEventListener('resize', function() {
+            setTimeout(() => {
+                if (window.location-map-desktop) window.location-map-desktop.invalidateSize();
+                if (window.location-map-mobile) window.location-map-mobile.invalidateSize();
+            }, 100);
+        });
+    </script>
+{{- end }}
 
 </body>
 </html>