Refactor app in to its own slice

slices/main/assets/css/app.css

@@ -0,0 +1,100 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind typography;
+
+@font-face {
+    font-family: "Montagu";
+    src: url("../fonts/MontaguSlab-VariableFont_opsz,wght.ttf") format("truetype");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "JetBrainsMono";
+    src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Figtree";
+    src: url("../fonts/Figtree-VariableFont_wght.ttf") format("truetype");
+    font-display: swap;
+}
+
+* {
+    font-family: "Figtree", Helvetica, Arial, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    font-family: "Montagu", Times New Roman, serif;
+}
+
+.prose h1 a {
+    border-bottom: none;
+    text-decoration: none;
+}
+
+.prose h1 a:hover {
+    opacity: 0.8;
+}
+
+.gist tr {
+    border-bottom: none;
+}
+
+.gist span, pre, pre span {
+    font-family: "JetBrainsMono", Monaco, monospace;
+}
+
+.map-marker {
+    border: 3px solid blue;
+    border-radius: 8px;
+    background: RGBa(0, 0, 255, 0.1);
+    width: 14px;
+    height: 14px;
+}
+
+.prose pre code::before {
+    padding-left: unset
+}
+
+.prose pre code:after {
+    padding-right: unset
+}
+
+.prose code {
+    font-weight: 400;
+    border-radius: 0.25rem;
+}
+
+.prose code:before {
+    content: "";
+    padding: 0 0 0 0.25rem;
+}
+
+.prose pre {
+    padding: 0;
+}
+
+.prose code:after {
+    content: "";
+    padding: 0 0.25rem 0 0;
+}
+
+.video-container {
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 */
+    height: 0;
+}
+.video-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+}
+
+.squircle {
+  clip-path: url(#squircleClip);
+}

slices/main/assets/js/app.js

@@ -0,0 +1,76 @@
+import { md_gallery } from "./gallery.js";
+
+(function() {
+    document.addEventListener("DOMContentLoaded", function () {
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+          localStorage.setItem("_x_darkMode", event.matches ? true : false)
+        });
+
+        if (window.hljs !== undefined) {
+            window.hljs.highlightAll();
+        }
+
+        const times = document.querySelectorAll('time');
+        times.forEach((time) => {
+            const oldDtime = Date.parse(time.dateTime);
+            time.innerHTML = new Date(oldDtime).toLocaleDateString(navigator.language, { weekday:"long", year:"numeric", month:"short", day:"numeric"});
+
+            md_gallery({
+                "class_name": "grid gap-4 grid-cols-2 prose-img:m-0"
+            });
+
+            const mediaForm = document.getElementById("media_form");
+            if (mediaForm !== null) {
+                htmx.on('#media_form', 'htmx:xhr:progress', function (evt) {
+                    htmx.find('#progress').setAttribute('value', evt.detail.loaded / evt.detail.total * 100)
+                });
+            }
+        });
+
+        const videos = document.querySelectorAll('video');
+        videos.forEach((video) => {
+            video.addEventListener("click", () => {
+              const isPaused = video.paused;
+              video[isPaused ? "play" : "pause"]();
+              video.classList.toggle("u-none", !isPaused);
+            });
+        });
+
+        const mapContainer = document.getElementById("map");
+        const goBack = document.getElementById("go-back");
+        if (mapContainer !== null) {
+            if (goBack !== null) {
+                document.getElementById("go-back").addEventListener("click", () => {
+                history.back();
+                });
+            }
+
+            mapboxgl.accessToken = 'pk.eyJ1IjoiZG5pdHphIiwiYSI6ImNsZWIyY3ZzaTE0cjUzdm4xdnZ6czRlYjUifQ.FRETOXYRID6T2IoB7qqRLg';
+            var map = new mapboxgl.Map({
+                container: 'map',
+                style: 'mapbox://styles/mapbox/streets-v11',
+                maxZoom: 8
+            });
+
+            const markers = JSON.parse(mapContainer.dataset["markers"]);
+
+            const bounds = new mapboxgl.LngLatBounds(markers[0], markers[0]);
+
+            for (var i = 0; i < markers.length; i++) {
+                bounds.extend(markers[i]);
+            }
+
+            map.fitBounds(bounds, { padding: 60 });
+
+            for (var i = 0; i < markers.length; i++) {
+                const marker = markers[i];
+                const el = document.createElement("div");
+                el.className = "map-marker";
+
+                new mapboxgl.Marker(el)
+                    .setLngLat(marker)
+                    .addTo(map);
+            }
+        }
+    });
+})();

slices/main/assets/js/gallery.js

@@ -0,0 +1,103 @@
+/*
+Markdown Gallery
+-- v1.0 2016
+-- Created by Lee Penney
+-- Released under GPLv3
+*/
+
+export function md_gallery(config) {
+    var config = config || {},
+        list_type = config.list_type || 'ul',
+        class_name = config.class_name || 'gallery',
+        tag_type = config.tag_type || 'div';
+
+    function find_lists(list_type) {
+        var lists = document.getElementsByTagName(list_type), matching_lists = [];
+        for (var i = 0; i < lists.length; i++) {
+            var list_elements = lists[i].children;
+            var total_matches = 0;
+            for (var c = 0; c < list_elements.length; c++) {
+                if (!list_elements[c].textContent.length && (list_elements[c].firstChild.tagName == 'A' || list_elements[c].firstChild.tagName == 'IMG') && (!list_elements[c].firstChild.firstChild || (list_elements[c].firstChild.firstChild && list_elements[c].firstChild.firstChild.tagName == 'IMG') )) {
+                    total_matches++;
+                }
+            }
+            if (total_matches == list_elements.length) {
+                matching_lists[matching_lists.length] = lists[i];
+            }
+        }
+        return matching_lists;
+    }
+
+    function prepend_tag(img_lists, list_tag, prepend_tag, class_name) {
+        for (var i = 0; i < img_lists.length; i++) {
+            // add_figure_tags(img_lists[i]);
+            add_anchor(img_lists[i]);
+            wrap_tag(img_lists[i], prepend_tag, class_name, null, true);
+            strip_tag(img_lists[i], 'li');
+            strip_tag(img_lists[i].parentNode, list_tag);
+        }
+    }
+
+    function append_caption(el) {
+        if ((el.tagName == 'A' && el.firstChild.tagName == 'IMG' && el.firstChild.hasAttribute('alt') && el.firstChild.getAttribute('alt').length > 0) || (el.tagName == 'IMG' && el.hasAttribute('alt') && el.getAttribute('alt').length > 0)) {
+            var caption = document.createElement('figcaption');
+            try {
+                caption.textContent = el.firstChild.getAttribute('alt')
+                el.appendChild(caption);
+            } catch (e) {
+                caption.textContent = el.getAttribute('alt');
+                el.parentNode.appendChild(caption);
+            }
+        }
+    }
+
+    function strip_tag(el, tag_type) {
+        var start_tag_regex = new RegExp('<'+tag_type+'>', 'gi');
+        var end_tag_regex = new RegExp('<\/'+tag_type+'>', 'gi');
+        el.innerHTML = el.innerHTML.replace(start_tag_regex,'').replace(end_tag_regex,'');
+    }
+
+    function add_figure_tags(img_list) {
+        var list_elements = img_list.children;
+        for (var i = 0; i < list_elements.length; i++) {
+            append_caption(list_elements[i].firstChild);
+            wrap_tag(list_elements[i], 'figure');
+        }
+    }
+
+    function add_anchor(img_list) {
+        var list_elements = img_list.children;
+        for (var i = 0; i < list_elements.length; i++) {
+            let img = list_elements[i].getElementsByTagName('img')[0];
+            let src = img.getAttribute("src");
+            let alt = img.getAttribute("alt");
+            wrap_tag(list_elements[i],
+                'a',
+                'hover:cursor-pointer',
+                "$dispatch('img-modal', {  imgModalSrc: '" + src + "', imgModalDesc: '" + alt + "' })",
+                false
+                );
+        }
+    }
+
+    function wrap_tag(el, tag_type, class_name, click, root) {
+        var wrap = document.createElement(tag_type);
+        if (root) {
+            wrap.setAttribute('x-data', "{}");
+        }
+        if (class_name) {
+            wrap.setAttribute('class', class_name);
+        }
+        if (click) {
+            wrap.setAttribute('x-on:click.prevent', click);
+            wrap.setAttribute('href', '#');
+        }
+        el.parentNode.replaceChild(wrap, el);
+        wrap.appendChild(el);
+    }
+
+    var found_img_lists = find_lists(list_type);
+    if (found_img_lists.length) {
+        prepend_tag(found_img_lists, list_type, tag_type, class_name);
+    }
+}