feat: redo blog catalogue with same layout as blog-pagev0.5.0

feat: implement localization feat: filters and sort in blog catalogue feat: one-page search feat: ram theme refactor: generate blog catalogue and blog page out of one layout refactor: have one layout for both mobile & desktop (aspect ratio dependable) refactor: use own template manager to use templates separately
author: SayaAndy <montferrat@tuta.io> 2025-08-11 16:52:48 +0700
committer: SayaAndy <montferrat@tuta.io> 2025-08-11 16:52:48 +0700
commit: ea1f83df820baa14dcd904d581ab2bb0976b172d (patch)
tree: 61322010ecdd59534cc1d02ff1c29d815d07152c /views/layouts/blog-page.html
parent: 15356da2c3e3544d757591a2f6e68367bf2d137f (diff)
download: web-0.5.0.tar.gz
web-0.5.0.zip
1 files changed, 0 insertions, 194 deletions
diff --git a/views/layouts/blog-page.html b/views/layouts/blog-page.html
deleted file mode 100644
index 46fe9f4..0000000
--- a/views/layouts/blog-page.html
+++ /dev/null
@@ -1,194 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<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="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="night" class="font-spectral text-main-dark overflow-hidden bg-interlocked-hexagons h-screen flex">
-
-    <script>
-        function switchTheme(theme) {
-            if (theme == "" || typeof theme == "undefined") {
-                const currentTheme = document.body.getAttribute('data-theme');
-                switch (currentTheme) {
-                    case "olive": theme = "lettuce"; break;
-                    case "lettuce": theme = "night"; break;
-                    case "night": theme = "olive"; break;
-                }
-            }
-            localStorage.setItem('theme', theme);
-            document.body.setAttribute('data-theme', theme);
-        }
-
-        const savedTheme = localStorage.getItem('theme') || 'night';
-        switchTheme(savedTheme);
-    </script>
-
-    <div class="desktop-sidebar-custom sticky bg-squares-and-triangles bg-repeat flex-col items-center shadow-2xl z-20 h-screen desktop">
-        <div class="logo-custom text-sidebar font-patua font-extrabold text-center relative z-20">
-            saya.today
-        </div>
-        <div class="flex flex-col gap-0 relative z-20">
-            <i onclick="location.href+='/../';" class="fas fa-home nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-            <i class="fas fa-search nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-            <i class="fas fa-images nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-            <i onclick="switchTheme('')" class="fas fa-swatchbook nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-        </div>
-    </div>
-
-    <div class="bg-background-dark z-10 h-screen desktop">
-        <div class="border-left-custom bg-background-dark"></div>
-
-        <div class="content-square flex flex-col bg-background-dark relative mt-[1.6vmin] mx-[1.6vmin]">
-            <div class="flex flex-row mb-[0.4vmin]">
-                <i onclick="location.href+='/../';" 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 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]">
-
-            <div class="bg-background-light flex flex-col flex-1 overflow-y-auto inset-shadow p-[2.4vmin]">
-                {{ .ParsedMarkdownDesktop }}
-                {{- 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="location-map-desktop" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[60%] h-[40vh]"></div>
-                <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
-                {{- end }}
-            </div>
-
-            <div class="flex flex-row mt-[0.8vmin] mb-[0.4vmin]">
-                <p class="grow text-[0.8vmax]/[0.9] font-spectral italic text-right text-secondary mr-2">
-                    <a href="">{{ .Title }}</a> © {{ .PublishedYear }} by <a href="https://t.me/EarlInisMona">Saya Andy</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
-                </p>
-                <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
-                <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
-                <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
-            </div>
-
-            <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
-        </div>
-
-        <div class="border-right-custom bg-background-dark shadow-2xl"></div>
-    </div>
-
-    <div class="mobile-topbar-custom fixed bg-squares-and-triangles bg-repeat flex-row items-center shadow-2xl w-[90vw] z-20 mobile">
-        <div class="flex flex-row gap-0 relative z-20">
-            <i onclick="location.href+='/../';" class="fas fa-home nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-            <i class="fas fa-search nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-            <i class="fas fa-images nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-            <i onclick="switchTheme('')" class="fas fa-swatchbook nav-icon-custom text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 flex justify-center items-center rounded-lg"></i>
-        </div>
-        <div class="logo-custom text-background-dark font-patua font-extrabold text-center relative grow z-20">
-            demo.saya.today
-        </div>
-    </div>
-
-    <div class="bg-background-dark flex-row z-10 w-[90vw] h-[92vh] mobile ml-[5vw] mt-[8vh]">
-        <div class="border-left-custom bg-background-dark"></div>
-
-        <div class="content-square flex flex-col bg-background-dark relative mt-[1.6vmin] mx-[1.6vmin]">
-            <div class="flex flex-row mb-[0.4vmin]">
-                <i onclick="location.href+='/../';" 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 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]">
-
-            <div class="bg-background-light flex flex-col overflow-y-auto inset-shadow p-[2.4vmin] max-h-[80%]">
-                {{ .ParsedMarkdownMobile }}
-                {{- 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="location-map-mobile" class="relative p-[0.8vmin] flex-none ml-auto mr-auto w-[100%] h-[40vh]"></div>
-                <hr class="border-t-4 border-dotted border-main-dark mt-[0.8vmin] mb-[0.8vmin] w-[80%] ml-auto mr-auto">
-                {{- end }}
-            </div>
-
-            <div class="flex flex-row mt-[0.8vmin] mb-[0.4vmin]">
-                <p class="grow text-[0.8vmax]/[0.9] font-spectral italic text-right text-secondary mr-2">
-                    <a href="">{{ .Title }}</a> © {{ .PublishedYear }} by <a href="https://t.me/EarlInisMona">Saya Andy</a> is licensed under <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA 4.0</a>
-                </p>
-                <img src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
-                <img src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
-                <img src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" style="max-width:1.2vh; max-height:1.2vh;">
-            </div>
-
-            <hr class="border-t-4 border-dotted border-main-dark mb-[0.8vmin]">
-        </div>
-
-        <div class="border-right-custom bg-background-dark shadow-2xl"></div>
-    </div>
-
-    <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>
author	SayaAndy <montferrat@tuta.io>	2025-08-11 16:52:48 +0700
committer	SayaAndy <montferrat@tuta.io>	2025-08-11 16:52:48 +0700
commit	ea1f83df820baa14dcd904d581ab2bb0976b172d (patch)
tree	61322010ecdd59534cc1d02ff1c29d815d07152c /views/layouts/blog-page.html
parent	15356da2c3e3544d757591a2f6e68367bf2d137f (diff)
download	web-0.5.0.tar.gz web-0.5.0.zip