Merge pull request #6 from j-selby/master

Add screenshot renderer

layouts/_default/baseof.html

@@ -22,7 +22,8 @@
     <link href="https://fonts.googleapis.com/css?family=Ubuntu|Dosis" rel="stylesheet">
     <link href="https://use.fontawesome.com/releases/v5.0.2/css/all.css" rel="stylesheet">
     <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/style.css" />
-    
+    {{- block "css" . }}{{- end }}
+
     {{ if eq (getenv "HUGO_ENV") "PRD" }}
     <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.GoogleAnalyticsTrackingId }}"></script>
@@ -46,7 +47,7 @@
     {{- end }}
 
     {{ .Render "header" }}
-    
+
     {{ block "header" . }}{{ end }}
 
     {{ $full_width := .Params.FullWidth | default false }}
@@ -87,4 +88,4 @@
     {{- end }}
 </body>
 
-</html>
+</html>

layouts/screenshots/single.html

@@ -0,0 +1,43 @@
+{{ 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 "css" }}
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.css" type="text/css" />
+{{ end }}
+
+{{ define "scripts" }}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.10.0/baguetteBox.min.js" type="text/javascript"></script>
+
+<script type="text/javascript">
+    window.addEventListener("DOMContentLoaded", function() {
+        baguetteBox.run('#gallery');
+    });
+</script>
+{{ end }}