Port asset pipeline to Hanami

app/assets/css/tailwind.css

@@ -5,19 +5,19 @@
 
 @font-face {
     font-family: "Rubik";
-    src: url("/assets/Rubik-VariableFont_wght.ttf") format("truetype");
+    src: url("../fonts/Rubik-VariableFont_wght.ttf") format("truetype");
     font-display: swap;
 }
 
 @font-face {
     font-family: "JetBrainsMono";
-    src: url("/assets/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
+    src: url("../fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
     font-display: swap;
 }
 
 @font-face {
     font-family: "Karla";
-    src: url("/assets/Karla-VariableFont_wght.ttf") format("truetype");
+    src: url("../fonts/Karla-VariableFont_wght.ttf") format("truetype");
     font-display: swap;
 }
 

app/assets/js/app.js

@@ -0,0 +1,79 @@
+import "../builds/tailwind.css";
+
+import { md_gallery } from "./gallery.js";
+
+(function() {
+    document.addEventListener('alpine:init', () => {
+        Alpine.magic('clipboard', () => {
+            return subject => navigator.clipboard.writeText(subject)
+        })
+    })
+    document.addEventListener("DOMContentLoaded", function () {
+        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);
+            }
+        }
+    });
+})();

app/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);
+    }
+}

app/templates/apps/patternmate/show.html.slim

@@ -0,0 +1,23 @@
+- context.content_for(:title, "")
+- context.content_for(:highlight_code, false)
+
+article class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200 prose-em:font-bold prose-em:not-italic prose-em:bg-blue-600 prose-em:px-1 prose-em:rounded prose-a:text-blue-600 prose-a:dark:text-indigo-300 prose-a:p-0.5 prose-a:rounded-sm prose-a:no-underline hover:prose-a:underline prose-em:text-blue-100"
+
+h1 Hello world
+/ # PatternMate
+/
+/ ## Features
+/
+/ ### Accessibility
+/
+/ ### Paid features
+/
+/ ## Who is this app for?
+/
+/ ## Why did I build it?
+/
+/ ## Pricing
+/
+
+
+div class="max-w-screen-md mx-auto border-t border-solid border-gray-200 dark:border-gray-600"

app/templates/layouts/app.html.slim

@@ -23,12 +23,11 @@ html
     link rel="me" href=Hanami.app.settings.github_url
     link rel="me" href=Hanami.app.settings.fed_bridge_url
 
-    link rel="stylesheet" href=context.asset_by_name("index.css")
+    = stylesheet_tag "app"
     link rel="icon" type="image/x-icon" href="/assets/favicon.ico"
 
     script data-domain="dnitza.com" src="https://stats.dnitza.com/js/script.js" defer="true"
-    script src="/assets/gallery.js"
-    script src=assets["index.js"]
+    = javascript_tag "app"
 
     script src="https://unpkg.com/htmx.org@1.9.2/dist/htmx.min.js" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"
     script src="https://cdn.jsdelivr.net/npm/alpinejs@3.12.0/dist/cdn.min.js" defer="true"

app/templates/layouts/map.html.slim

@@ -21,14 +21,14 @@ html
     link rel="me" href=Hanami.app.settings.mastodon_url
     link rel="me" href=Hanami.app.settings.github_url
 
-    link rel="stylesheet" href=assets["index.css"]
+    = stylesheet_tag "app"
     link rel="icon" type="image/x-icon" href="/assets/favicon.ico"
 
     script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'
     link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet'
 
     script data-domain="dnitza.com" src="https://stats.dnitza.com/js/script.js" defer="true"
-    script src=assets["index.js"]
+    = javascript_tag "app"
 
   body class="bg-white dark:bg-black selection:bg-blue-100 selection:text-blue-900 dark:selection:bg-blue-600 dark:selection:text-blue-100"
     == yield