summaryrefslogtreecommitdiff
path: root/views
diff options
from:
to:
context:
space:
mode:
authorGravatar SayaAndy <montferrat@tuta.io> 2025-08-02 16:22:53 +0700
committerGravatar SayaAndy <montferrat@tuta.io> 2025-08-02 16:22:53 +0700
commit8e3f93ed503864670476d322639a8b9051d5e740 (patch)
treedff97c3fd0177744ff9473afd94ed78bce21182f /views
parent79cc42d8a6904720ffba455e8a4083a8f48851b7 (diff)
downloadweb-8e3f93ed503864670476d322639a8b9051d5e740.tar.gz
web-8e3f93ed503864670476d322639a8b9051d5e740.zip
feat: add geolocation of places in blog0.3.1
Diffstat (limited to 'views')
-rw-r--r--views/index.html2
-rw-r--r--views/layouts/blog-page.html66
2 files changed, 67 insertions, 1 deletions
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>
generated by cgitext v1.3.1+13 (git 2.54.0) at 2026-08-20 15:54:15 +0000