Add screenshot renderer

layouts/screenshots/single.html

@@ -0,0 +1,40 @@
+{{ define "main" }}
+<section class="section" id="gallery">
+    <h1 class="title">{{ .Title }}</h1>
+
+    {{ .Content }}
+
+    <div class="tile is-ancestor">
+    {{ $columns := 3 }}
+    {{ $files := readDir "/static/images/screenshots/" }}
+    {{ range $index, $element := (shuffle $files) }}
+    {{ $fileTitle := (index (split .Name "-") 1) }}
+    {{ $fileTitle := (index (split $fileTitle ".") 0) }}
+        <div class="tile is-parent">
+            <div class="tile is-child is-boxed">
+                <a href="/images/screenshots/{{ .Name }}" title="{{ $fileTitle }}">
+                    <figure class="image is-16by9">
+                        <img src="/images/screenshots/thumbs/{{ .Name }}" alt="{{ $fileTitle }}">
+                    </figure>
+                </a>
+            </div>
+        </div>
+    {{if eq (mod $index $columns) (sub $columns 1)}}
+    </div>
+    <div class="tile is-ancestor">
+    {{ end }}
+    {{ end }}
+    </div>
+</section>
+{{ end }}
+
+{{ define "scripts" }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js" type="text/javascript"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" type="text/css" />
+
+<script type="text/javascript">
+    window.addEventListener("DOMContentLoaded", function() {
+        baguetteBox.run('#gallery');
+    });
+</script>
+{{ end }}