Add an image gallery (#1)

Add an image gallery tab to the website with a few images.

.gitignore

@@ -1,2 +1,4 @@
 _cache/
 _site/
+*~
+TAGS

.restyled.yaml

@@ -0,0 +1,6 @@
+restylers_version: stable
+restylers:
+  - fourmolu:
+      image: 'restyled/restyler-fourmolu:v0.13.0.0'
+      arguments:
+        []

fourmolu.yaml

@@ -0,0 +1,15 @@
+indentation: 2
+comma-style: leading
+record-brace-space: true
+indent-wheres: false # 'false' means save space by only half-indenting the 'where' keyword
+diff-friendly-import-export: true
+let-style: inline
+respectful: true
+single-constraint-parens: auto
+haddock-style: single-line
+newlines-between-decls: 1
+reexports:
+  - module Text.Megaparsec exports Control.Applicative
+  - module Options.Applicative exports Control.Applicative
+fixities:
+  - infixl 9 ".:"

gallery/crafting.png.metadata

@@ -0,0 +1 @@
+caption: An early tutorial level

gallery/debugger.png.metadata

@@ -0,0 +1 @@
+caption: Using the debugger

gallery/log.png.metadata

@@ -0,0 +1 @@
+caption: Making a log

gallery/main-menu.png.metadata

@@ -0,0 +1 @@
+caption: Main menu

gallery/tree_harvest.png.metadata

@@ -0,0 +1 @@
+caption: Robot status panel

site.hs

@@ -2,27 +2,24 @@
 
 {- cabal:
 build-depends:
-  base ^>= 4.18.0.0,
+  base >= 4.18 && < 4.20,
   filepath ^>= 1.4.100.1,
-  hakyll ^>= 4.16.1.0,
+  hakyll >= 4.16 && < 4.17,
 -}
 {-# LANGUAGE OverloadedStrings #-}
 
+import Data.String (String)
 import Hakyll
 import System.FilePath (dropExtension, takeDirectory, takeFileName, (</>))
 
 main :: IO ()
 main = hakyll $ do
-  match "images/**" $ do
-    route idRoute
-    compile copyFileCompiler
-
-  match "style.css" $ do
+  match ("images/**" .||. "gallery/**" .||. "style.css") $ do
     route idRoute
     compile copyFileCompiler
 
   match "blog/**" $ do
-    route $ cleanRoute
+    route cleanRoute
     compile $
       pandocCompiler
         >>= loadAndApplyTemplate "templates/post.html" blogPostContext
@@ -47,6 +44,27 @@ main = hakyll $ do
         >>= applyAsTemplate blogListContext
         >>= loadAndApplyTemplate "templates/default.html" defaultContext
 
+  create ["gallery.html"] $ do
+    route cleanRoute
+    compile $ do
+      images <- loadAll "gallery/*.png"
+      imgTpl <- loadBody "templates/gallery-image.html"
+
+      -- See https://github.com/jaspervdj/hakyll/issues/717
+      -- and example in https://github.com/goolord/skyespace/blob/master/src/Main.hs
+      let imgCtx :: Context CopyFile
+          imgCtx = metadataField <> urlField "url"
+      imgs <- applyTemplateList imgTpl imgCtx images
+
+      let galleryCtx =
+            constField "images" imgs
+              <> constField "title" "Gallery"
+              <> defaultContext
+
+      makeItem ""
+        >>= loadAndApplyTemplate "templates/gallery.html" galleryCtx
+        >>= loadAndApplyTemplate "templates/default.html" galleryCtx
+
   match "templates/*" $ compile templateBodyCompiler
 
 cleanRoute :: Routes

style.css

@@ -23,6 +23,11 @@ img {
   max-width: 100%;
 }
 
+.gallery-img {
+    margin-top: 2cm;
+    margin-bottom: 2cm;
+}
+
 #logo {
   text-align: center;
 }

templates/default.html

@@ -19,6 +19,9 @@
           } else if (e.key === 'F3') {
               window.location.href = "/blog"
               e.preventDefault();
+          } else if (e.key === 'F4') {
+              window.location.href = "/gallery"
+              e.preventDefault();
           }
       });
     </script>
@@ -31,7 +34,8 @@
       <div id="navigation">
         <a href="/">[F1] Home</a>
         <a href="/installing">[F2] Installing</a>
-		<a href="/blog">[F3] Blog</a>
+	<a href="/blog">[F3] Blog</a>
+	<a href="/gallery">[F4] Gallery</a>
       </div>
     </div>
 

templates/gallery-image.html

@@ -0,0 +1,4 @@
+<div class="gallery-img">
+  <img src="$url$"></img>
+  <div style="text-align: center"><em>$caption$</em></a>
+</div>

templates/gallery.html

@@ -0,0 +1,5 @@
+<h1>$title$</h1>
+$body$
+<div class="gallery">
+  $images$
+</div>