feat: update font-awesome 6.7.2 to 7.2.0

feat: import font-awesome from static storage base url
fix: thumbnails in map
refactor: put svgs as symbols

1 files changed, 11 insertions, 8 deletions

diff --git a/views/pages/global-map.html b/views/pages/global-map.html
index 1547ada..2459ca1 100644
--- a/views/pages/global-map.html
+++ b/views/pages/global-map.html
@@ -10,7 +10,9 @@
     <meta property="og:type" content="site">
     <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title>
     <link rel="canonical" href="{{ .CanonicalEndpoint }}/{{ .Lang }}/map">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
+    <link rel="stylesheet" href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/fontawesome.min.css">
+    <link rel="stylesheet" href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/brands.min.css">
+    <link rel="stylesheet" href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/solid.min.css">
     {{ block "header" . }}{{ end }}
     <link href="/output.css" rel="stylesheet">
     <link rel="stylesheet" href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css">
@@ -51,22 +53,22 @@
     <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-fit h-auto">
         <div class="text-[3rem] flex flex-col gap-0 relative z-1001">
             <a href="./" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
-                <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar"></i>
+                <i class="fas fa-circle-left flex faw-18 h-18 content-center text-center text-sidebar"></i>
             </a>
             <a href="/{{ .Lang }}" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
-                <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i>
+                <i class="fas fa-home flex faw-18 h-18 content-center text-center text-sidebar"></i>
             </a>
             <a href="/{{ .Lang }}/blog" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
-                <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i>
+                <i class="fas fa-search flex faw-18 h-18 content-center text-center text-sidebar"></i>
             </a>
             <a href="/{{ .Lang }}/map" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
-                <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i>
+                <i class="fas fa-map flex faw-18 h-18 content-center text-center text-sidebar"></i>
             </a>
             <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
-                <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar"></i>
+                <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex faw-18 h-18 content-center text-center text-sidebar"></i>
             </div>
             <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false">
-                <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar"></i>
+                <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex faw-18 h-18 content-center text-center text-sidebar"></i>
             </a>
         </div>
         <div class="theme-wheel" id="theme-wheel">
@@ -90,6 +92,7 @@
         const themeButton = document.getElementById('toolbar-theme-button');
         const themeIcons = document.querySelectorAll('.theme-icon');
         const themeWheelRadius = convertRemToPixels(6);
+        const THUMB_BASE = "{{ .ThumbnailBaseUrl }}";
 
         themeIcons.forEach(icon => {
             if (icon.getAttribute('data-theme') == savedTheme) {
@@ -278,7 +281,7 @@
                 title: title,
             }).bindPopup(`
                     <div class="flex flex-row justify-center justify-items-center">
-                        <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src='{{ printf .ThumbnailBaseUrl "${thumbnail}" }}'>
+                        <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="${THUMB_BASE.replace('%s', thumbnail)}">
                         <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span>
                     </div>`);