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 %}

templates/masto-comments.html

@@ -0,0 +1,60 @@
+<br/><br/>
+For comments you can use your fediverse account to reply to this 
+<a href="https://{{page.extra.masto_instance}}/@{{page.extra.masto_user}}/{{page.extra.masto_id}}">toot</a>.<br/>
+<div id="mastodon-comments-list">
+    <button id="load-comment">Load comments</button><br/>
+</div>
+<noscript>You need JavaScript to view the comments.</noscript>
+<script src="/js/purify.min.js"></script>
+<script type="text/javascript">
+function escapeHtml(unsafe) {
+  return unsafe
+       .replace(/&/g, "&amp;")
+       .replace(/</g, "&lt;")
+       .replace(/>/g, "&gt;")
+       .replace(/"/g, "&quot;")
+       .replace(/'/g, "&#039;");
+}
+
+document.getElementById("load-comment").addEventListener("click", function() {
+  document.getElementById("load-comment").innerHTML = "Loading";
+  fetch('https://{{page.extra.masto_instance}}/api/v1/statuses/{{page.extra.masto_id}}/context')
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(data) {
+      if(data['descendants'] &&
+         Array.isArray(data['descendants']) &&
+        data['descendants'].length > 0) {
+          document.getElementById('mastodon-comments-list').innerHTML = "";
+          data['descendants'].forEach(function(reply) {
+            reply.account.display_name = escapeHtml(reply.account.display_name);
+            reply.account.emojis.forEach(emoji => {
+              reply.account.display_name = reply.account.display_name.replace(`:${emoji.shortcode}:`,
+                `<img src="${escapeHtml(emoji.static_url)}" alt="Emoji ${emoji.shortcode}" height="20" width="20" />`);
+            });
+            mastodonComment =
+              `<div class="mastodon-comment">
+                 <div class="avatar">
+                   <img src="${escapeHtml(reply.account.avatar_static)}" height=60 width=60 alt="">
+                 </div>
+                 <div class="content">
+                   <div class="author">
+                     <a href="${reply.account.url}" rel="nofollow">
+                       <span>${reply.account.display_name}</span>
+                     </a>
+                     <a class="date" href="${reply.uri}" rel="nofollow">
+                       ${reply.created_at.substr(0, 10)}
+                     </a>
+                   </div>
+                   <div class="mastodon-comment-content">${reply.content}</div>
+                 </div>
+               </div>`;
+            document.getElementById('mastodon-comments-list').appendChild(DOMPurify.sanitize(mastodonComment, {'RETURN_DOM_FRAGMENT': true}));
+          });
+      } else {
+        document.getElementById('mastodon-comments-list').innerHTML = "<p>Not comments found</p>";
+      }
+    });
+  });
+</script>

templates/page.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="/css/normalize.css">
+    <link rel="stylesheet" type="text/css" href="/css/redhat-text/redhat-text.css">
+
+    <link rel="stylesheet" type="text/css" href="/js/photoswipe/photoswipe.css">
+
+    {% block additional_css %}{% endblock %}
+
+    <link rel="stylesheet" type="text/css" href="/css/style.css">
+
+    <link rel="alternate" type="application/rss+xml"  title="RSS Feed for {{ config.title }}" href="/rss.xml" />
+
+    <script src="/js/mathjax/tex-chtml-full.js" id="MathJax-script" async></script>
+
+    <title>{% block title %}{{ config.title }} :: {{ page.title }}{% endblock title %}</title>
+</head>
+
+<body>
+    <header>
+        <img class="logo" src="/images/logo.png" />
+
+        <div class="text">
+            <div class="heading">{{ config.title }}</div>
+            <div class="subtext">{{ config.description }}</div>
+        </div>
+    </header>
+    {% block navigation %}
+    {% set top_section = get_section(path="_index.md", metadata_only=true) %}
+    <nav>
+        {% for subsec_path in top_section.subsections %}
+        {% set subsec = get_section(path=subsec_path) %}
+
+        {% if subsec.extra["menu_dropdown"] %}
+        <div class="dropdown">
+            <button class="dropbtn">{{subsec.title}} &#x2304;</button>
+            <div class="dropdown-content">
+                {% for subsec_page in subsec.pages %}
+                <a href="{{subsec_page.path}}">{{subsec_page.title}}</a>
+                {% endfor %}
+            </div>
+        </div>
+        {% else %}
+        <a href="{{subsec.path}}">{{subsec.title}}</a>
+        {% endif %}
+        {% endfor %}
+        <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="expandHamburger()">&#9776;</a>
+    </nav>
+    {% endblock navigation %}
+
+    {% block content %}
+    <main>
+        <h1>{{page.title}}</h1>
+        {{page.content | safe}}
+
+        {%- if page.extra.masto_instance -%}
+        {% include "masto-comments.html" %}
+        {%- endif -%}
+        <hr></hr>
+        <small>
+            Published: {{page.date | date(format="%d.%m.%Y %H:%M")}}
+            {% if page.updated %}
+            Updated: {{page.updated | date(format="%d.%m.%Y %H:%M")}}
+            {% endif %}
+        </small>
+        <br/>
+        <br/>
+    </main>
+    {% endblock content %}
+
+    <script>
+        function expandHamburger() {
+          var x = document.getElementsByTagName("nav")[0];
+          if (x.className === "") {
+            x.className += "responsive";
+          } else {
+            x.className = "";
+          }
+        }
+    </script>
+
+    <script type="module">
+        import PhotoSwipeLightbox from '/js/photoswipe/photoswipe-lightbox.esm.min.js';
+        const options = {
+          gallery: 'main .lightbox',
+          pswpModule: () => import('/js/photoswipe/photoswipe.esm.min.js')
+        };
+        const lightbox = new PhotoSwipeLightbox(options);
+        lightbox.init();
+    </script>
+</body>
+</html>

templates/section.html

@@ -0,0 +1,25 @@
+{% extends "page.html" %}
+
+{% block title %}{{ config.title }} :: {{ section.title }}{% endblock title %}</title>
+
+
+{% block content %}
+<main>
+    {% for item in section.pages %}
+    <h1>{{item.title}} - {{item.date | date(format="%d.%m.%Y")}}</h1>
+    {{item.content | safe}}
+
+    {%- if page.extra.masto_instance -%}
+    {% include "masto-comments.html" %}
+    {%- endif -%}
+    <small>
+        Published: {{item.date | date(format="%d.%m.%Y %H:%M")}}
+        {% if item.updated %}
+        Updated: {{item.updated | date(format="%d.%m.%Y %H:%M")}}
+        {% endif %}
+    </small>
+    <hr></hr>
+    {% endfor %}
+    <br/>
+</main>
+{% endblock content %}

templates/shortcodes/lightbox.html

@@ -0,0 +1,8 @@
+{% set meta = get_image_metadata(path=image) %}
+<a href="{{ get_url(path=image) }}"
+    class="lightbox"
+    data-pswp-width="{{ meta.width }}"
+    data-pswp-height="{{ meta.height }}"
+    target="_blank">
+    <img src="{{ get_url(path=image) }}" alt="{{alt}}" title="{{alt}}" />
+</a>