Add gallery support for posts

app/templates/layouts/app.html.slim

@@ -25,6 +25,7 @@ html
     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"
 
     script src="https://unpkg.com/htmx.org@1.8.4" integrity="sha384-wg5Y/JwF7VxGk4zLsJEcAojRtlVp1FKKdGy1qN+OMtdq72WRvX/EdRdqg/LOhYeV" crossorigin="anonymous"
@@ -32,7 +33,7 @@ html
 
     - if Hanami.app.settings.micropub_pub_key
       link rel="pgpkey" href="/key"
-  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"
+  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" x-data="{ imgModal : false, imgModalSrc : '', imgModalDesc : '' }" x-on:keydown.escape="imgModal=false"
     main class="pb-8 px-4 pt-4 md:pt-8"
       header class="mb-12 max-w-screen-md mx-auto"
         div class="flex items-center mb-8 md:mb-12 text-lg md:text-xl text-gray-400 dark:text-gray-600"

app/templates/posts/show.html.slim

@@ -1,4 +1,14 @@
 article class="h-entry"
+  template @img-modal.window="imgModal = true; imgModalSrc = $event.detail.imgModalSrc; imgModalDesc = $event.detail.imgModalDesc;" x-if="imgModal"
+    div @mousedown.outside="imgModalSrc = ''" class="p-2 fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-center bg-black bg-opacity-75"
+      div @mousedown.outside="imgModal = ''" class="flex flex-col max-w-3xl max-h-full overflow-auto"
+        div class="z-50"
+          button @click="imgModal = ''" class="float-right pt-2 pr-2 outline-none focus:outline-none"
+            svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
+              path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
+        div class="p-2"
+          img class="rounded object-contain h-1/2-screen shadow-solid shadow-pink-100 dark:shadow-pink-200 mb-4" :src="imgModalSrc" :alt="imgModalSrc"
+          p x-text="imgModalDesc" class="text-center text-white"
   div class="mb-12 prose dark:prose-invert max-w-prose mx-auto text-gray-800 dark:text-gray-200"
     h1 class="p-name mb-2"
       a class="u-url" href=post.permalink