Startet to add some content

templates/gallery.html

@@ -0,0 +1,46 @@
+{% extends "page.html" %}
+
+{% block content %}
+<main>
+    <h1>{{page.title}}</h1>
+    {{page.content | safe}}
+    <br/>
+
+    <div class="gallery">
+    {% for asset in page.assets | sort -%}
+        {%- if asset is matching("[.](jpg|jpeg|JPG)$") -%}
+            {% set meta = get_image_metadata(path=asset) %}
+            {% set image = resize_image(path=asset, width=280, height=210) %}
+                <a href="{{ get_url(path=asset) }}"
+                    data-pswp-width="{{ meta.width }}"
+                    data-pswp-height="{{ meta.height }}"
+                    target="_blank">
+                    <img src="{{ image.url }}" />
+                </a>
+        {%- endif %}
+    {%- endfor %}
+    </div>
+    {%- if page.extra.masto_instance -%}
+    {% include "masto-comments.html" %}
+    {%- endif -%}
+    <hr></hr>
+    <small>
+        Published: {{page.date | date(format="%d.%m.%Y %H:%M")}}
+        {% if item.updated %}
+        Updated: {{page.updated | date(format="%d.%m.%Y %H:%M")}}
+        {% endif %}
+    </small>
+    <br/>
+    <br/>
+</main>
+
+<script type="module">
+    import PhotoSwipeLightbox from '/js/photoswipe/photoswipe-lightbox.esm.min.js';
+    const lightbox = new PhotoSwipeLightbox({
+        gallery: '.gallery',
+        children: 'a',
+        pswpModule: () => import('/js/photoswipe/photoswipe.esm.min.js')
+    });
+    lightbox.init();
+</script>
+{% endblock content %}