adding more things from old site

justfile

@@ -7,7 +7,7 @@ serve:
 uglify:
     uglifyjs ./src/js/main.js --compress --mangle -o ./static/js/main.js && uglifyjs ./src/js/page.js --compress --mangle -o ./static/js/page.js && uglifyjs ./src/js/search.js --compress --mangle -o ./static/js/search.js && uglifyjs ./src/js/lang.js --compress --mangle -o ./static/js/lang.js
 dev:
-    NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w
+    tailwindcss -i static/css/base.css -o static/css/main.css --watch
 api:
     cargo build
 clean:

static/css/main.css

@@ -25,9 +25,7 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
-    --color-neutral-50: oklch(98.5% 0 0);
     --color-neutral-100: oklch(97% 0 0);
-    --color-neutral-300: oklch(87% 0 0);
     --color-neutral-500: oklch(55.6% 0 0);
     --color-black: #000;
     --color-white: #fff;
@@ -209,6 +207,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .invisible {
     visibility: hidden;
   }
@@ -259,9 +260,6 @@
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
-  .-left-1 {
-    left: calc(var(--spacing) * -1);
-  }
   .-left-1\/2 {
     left: calc(calc(1/2 * 100%) * -1);
   }
@@ -428,9 +426,6 @@
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
-  .h-2 {
-    height: calc(var(--spacing) * 2);
-  }
   .h-2\/3 {
     height: calc(2/3 * 100%);
   }
@@ -473,21 +468,12 @@
   .h-screen {
     height: 100vh;
   }
-  .max-h-8 {
-    max-height: calc(var(--spacing) * 8);
-  }
   .max-h-12 {
     max-height: calc(var(--spacing) * 12);
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/3 {
     width: calc(1/3 * 100%);
   }
-  .w-2 {
-    width: calc(var(--spacing) * 2);
-  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
@@ -503,9 +489,6 @@
   .w-9 {
     width: calc(var(--spacing) * 9);
   }
-  .w-11 {
-    width: calc(var(--spacing) * 11);
-  }
   .w-11\/12 {
     width: calc(11/12 * 100%);
   }
@@ -551,15 +534,9 @@
   .flex-none {
     flex: none;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .flex-shrink-0 {
     flex-shrink: 0;
   }
-  .flex-grow {
-    flex-grow: 1;
-  }
   .grow {
     flex-grow: 1;
   }
@@ -783,9 +760,6 @@
   .bg-indigo-500 {
     background-color: var(--color-indigo-500);
   }
-  .bg-neutral-500 {
-    background-color: var(--color-neutral-500);
-  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -810,9 +784,6 @@
   .p-5 {
     padding: calc(var(--spacing) * 5);
   }
-  .px-1 {
-    padding-inline: calc(var(--spacing) * 1);
-  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -828,9 +799,6 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
-  .py-0 {
-    padding-block: calc(var(--spacing) * 0);
-  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -849,12 +817,6 @@
   .py-6 {
     padding-block: calc(var(--spacing) * 6);
   }
-  .ps-4 {
-    padding-inline-start: calc(var(--spacing) * 4);
-  }
-  .pe-4 {
-    padding-inline-end: calc(var(--spacing) * 4);
-  }
   .pt-1 {
     padding-top: calc(var(--spacing) * 1);
   }
@@ -971,9 +933,6 @@
   .text-indigo-500 {
     color: var(--color-indigo-500);
   }
-  .text-neutral-50 {
-    color: var(--color-neutral-50);
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -983,6 +942,9 @@
   .\!no-underline {
     text-decoration-line: none !important;
   }
+  .line-through {
+    text-decoration-line: line-through;
+  }
   .no-underline {
     text-decoration-line: none;
   }
@@ -994,11 +956,6 @@
       color: var(--color-gray-300);
     }
   }
-  .placeholder-neutral-300 {
-    &::placeholder {
-      color: var(--color-neutral-300);
-    }
-  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -1008,6 +965,10 @@
   .opacity-100 {
     opacity: 100%;
   }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-2xl {
     --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1023,17 +984,10 @@
   .ring-black {
     --tw-ring-color: var(--color-black);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .blur {
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
-  .filter {
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1865,11 +1819,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1965,7 +1914,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;

static/js/leaflet.hugo.js

@@ -0,0 +1,108 @@
+let leafletMapsObj = {};
+let leafletMarkersObj = {};
+
+function drawTrack(trackOpts, elevationOpts, markerOpts) {
+    var opts = {
+        elevationControl: {
+            options: {
+                position: elevationOpts.graphPosition,
+                theme: elevationOpts.graphTheme,
+                width: elevationOpts.graphWidth,
+                height: elevationOpts.graphHeight,
+                margins: {
+                    top: 20,
+                    right: 20,
+                    bottom: 35,
+                    left: 50
+                },
+                followMarker: elevationOpts.graphFollowMarker,
+                collapsed: elevationOpts.graphCollapsed,
+                detached: elevationOpts.graphDetached,
+                legend: false,
+                summary: false,
+                downloadLink: '',
+                gpxOptions: {
+                    polyline_options: {
+                        className: 'track-' + trackOpts.trackId + '-',
+                        color: trackOpts.lineColor,
+                        opacity: trackOpts.lineOpacity,
+                        weight: trackOpts.lineWeight,
+                    },
+                    marker_options: {
+                        startIcon: new L.ExtraMarkers.icon({
+                            icon: markerOpts.iconStart,
+                            markerColor: markerOpts.iconStartColor,
+                            shape: markerOpts.iconStartShape,
+                            prefix: 'fa',
+                            extraClasses: markerOpts.iconStartClasses
+                        }),
+                        endIcon: new L.ExtraMarkers.icon({
+                            icon: markerOpts.iconEnd,
+                            markerColor: markerOpts.iconEndColor,
+                            shape: markerOpts.iconEndShape,
+                            prefix: 'fa',
+                            extraClasses: markerOpts.iconEndClasses
+                        }),
+                        wptIcons: {
+                            '': new L.ExtraMarkers.icon({
+                                icon: markerOpts.icon,
+                                markerColor: markerOpts.iconColor,
+                                shape: markerOpts.iconShape,
+                                prefix: 'fa',
+                                extraClasses:  markerOpts.iconClasses,
+                            })
+                        }
+                    }
+                },
+
+            },
+        },
+    };
+
+    L.control.elevation(opts.elevationControl.options).addTo(leafletMapsObj[trackOpts.mapId]).load(trackOpts.trackPath);
+
+    /*map.on('eledata_loaded', function(e) {
+        track = e.track_info;
+    });*/
+}
+
+window.downloadFile = function (sUrl) {
+
+    //iOS devices do not support downloading. We have to inform user about this.
+    if (/(iP)/g.test(navigator.userAgent)) {
+        alert('Your device does not support files downloading. Please try again in desktop browser.');
+        return false;
+    }
+
+    //If in Chrome or Safari - download via virtual link click
+    if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
+        //Creating new link node.
+        var link = document.createElement('a');
+        link.href = sUrl;
+
+        if (link.download !== undefined) {
+            //Set HTML5 download attribute. This will prevent file from opening if supported.
+            var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
+            link.download = fileName;
+        }
+
+        //Dispatching click event.
+        if (document.createEvent) {
+            var e = document.createEvent('MouseEvents');
+            e.initEvent('click', true, true);
+            link.dispatchEvent(e);
+            return true;
+        }
+    }
+
+    // Force file download (whether supported by server).
+    if (sUrl.indexOf('?') === -1) {
+        sUrl += '?download';
+    }
+
+    window.open(sUrl, '_self');
+    return true;
+};
+
+window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
+window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;

static/js/map.js

@@ -0,0 +1,41 @@
+function initMap() {
+    if ($('#map').length) {
+        let map_provider = $('#map-provider').val();
+        let lat = $('#map-lat').val();
+        let lng = $('#map-lng').val();
+        let zoom = parseInt($('#map-zoom').val());
+        let address = $('#map-dir').val();
+        let api_key = $('#map-api-key').val();
+        
+        let map = new L.map('map').setView([lat, lng], zoom);
+        if (map_provider === 'mapbox' && api_key.length) {
+            L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+                attribution:
+                'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+                tileSize: 512,
+                maxZoom: 18,
+                zoomOffset: -1,
+                id: 'mapbox/streets-v11',
+                accessToken: api_key,
+            }).addTo(map);
+        } else {
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+            }).addTo(map);
+        }
+        let marker = L.marker([lat, lng]).addTo(map);
+        let url = lat + ',' + lng + '#map=' + zoom + '/' + lat + '/' + lng + '&layers=N';
+        marker.bindPopup(
+            address +
+                '<p><a href="https://www.openstreetmap.org/directions?engine=osrm_car&route=' +
+                url +
+                '">Routing via OpenStreetMap</a></p>',
+        );
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function () {
+    // Initialise street maps if necessary.
+    initMap();
+});

static/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}