Add jumbotron image carousel (#23)

* Add jumbotron image carousel

* Correct image title

* Add screenshots page, clean up jumbotron

gulpfile.js

@@ -66,7 +66,7 @@ gulp.task('assets:images', () => {
 	const baseImages = gulp.src(`build/images/*`, {base: './'})
       .pipe(gulp.dest('./'));
 	const jumbotronImages = gulp.src(`build/images/jumbotron/*`, {base: './'})
-      .pipe(imageResize({width: 786, height: 471, crop: true}))
+      .pipe(imageResize({width: 426, height: 240, crop: true}))
       .pipe(gulp.dest('./'));
 	const bannerImages = gulp.src(`build/images/banners/*`, {base: './'})
       .pipe(imageResize({width: 824, height: 306, crop: false}))
@@ -78,7 +78,7 @@ gulp.task('assets:images', () => {
       .pipe(imageResize({width: 48, height: 48, crop: true}))
       .pipe(gulp.dest('./'));
 	const screenshotImages = gulp.src(`build/images/screenshots/*`)
-      .pipe(imageResize({width: 400, height: 240, crop: false}))
+      .pipe(imageResize({width: 640, height: 360, crop: false}))
       .pipe(gulp.dest(`build/images/screenshots/thumbs`));
 	return merge(baseImages, jumbotronImages, bannerImages, boxartImages, iconImages, screenshotImages);
 });

site/config.toml

@@ -26,8 +26,14 @@ paginate = 20
   url = "/wiki/home/"
 
 [[menu.main]]
-  name = "donate"
+  name = "screenshots"
   weight = 3
+  identifier = "screenshots"
+  url = "/screenshots"
+
+[[menu.main]]
+  name = "donate"
+  weight = 4
   identifier = "donate"
   url = "/donate"
 

site/content/screenshots.md

@@ -0,0 +1,4 @@
++++
+title = "Screenshots"
+type = "screenshots"
++++

site/layouts/partials/homepage/heroContents.html

@@ -25,8 +25,50 @@
 
     <!-- Right panel -->
     <div class="column is-centered-vertically is-7 is-hidden-mobile">
-        <figure class="image">
-            {{ partial "inline/heroSvg" }}
-        </figure>
+        <div class="container is-fluid is-marginless">
+            <figure class="image">
+                {{ partial "inline/heroSvg" }}
+            </figure>
+
+            <figure class="is-overlay offset-switch-overlay">
+                <div class="glide">
+                    <div class="glide__track" data-glide-el="track">
+                        <ul class="glide__slides">
+                            {{ $jumbotronFiles := readDir "/static/images/jumbotron/" }}
+                            {{ range $index, $element := $jumbotronFiles }}
+                            {{ $fileTitle := (index (split .Name "-") 1) }}
+                            {{ $fileTitle := (index (split $fileTitle ".") 0) }}
+                            <li class="glide__slide">
+                                <div>
+                                    <div class="carousel-caption">{{ $fileTitle }}</div>
+                                    <img {{if eq $index 0}}
+                                         class="article-image img-responsive center-block"
+                                         src="/images/jumbotron{{ $element.Name | relURL }}"
+                                         {{else}}
+                                         class="article-image img-responsive center-block lazy-load"
+                                         data-src="/images/jumbotron{{ $element.Name | relURL }}"
+                                         {{end}}
+                                         alt="{{ $fileTitle }}">
+                                </div>
+                            </li>
+                            {{ end }}
+                        </ul>
+                    </div>
+
+                    <div class="glide__arrows is-overlay" data-glide-el="controls">
+                        <a class="glide__arrow glide__arrow--left is-pulled-left" data-glide-dir="<">
+                            <span class="icon is-large">
+                                <i class="fas fa-arrow-left"></i>
+                            </span>
+                        </a>
+                        <a class="glide__arrow glide__arrow--right is-pulled-right" data-glide-dir=">">
+                            <span class="icon is-large">
+                                <i class="fas fa-arrow-right"></i>
+                            </span>
+                        </a>
+                    </div>
+                </div>
+            </figure>
+        </div>
     </div>
 </div>

site/themes/shared-bulma-theme

@@ -1 +1 @@
-Subproject commit 4b72b62370cbe3365c633c2e5615fadecb65cf7c
+Subproject commit f108e5d9f03b22a2da2bf9e68da03c4d7b47b01d

src/js/hero.js

@@ -18,3 +18,30 @@ if (navbar) {
 let colors = ["orangered", "deepskyblue", "yellow", "deeppink", "lime", "gray"];
 document.body.classList.add("switch-left-" + colors.splice(Math.floor(Math.random() * colors.length), 1)[0]);
 document.body.classList.add("switch-right-" + colors[Math.floor(Math.random() * colors.length)]);
+
+// Handle lazy-loading of images
+document.addEventListener("DOMContentLoaded", function () {
+    const elements = document.getElementsByClassName("lazy-load");
+    for (let i = 0; i < elements.length; i++) {
+        const element = elements[i];
+        element.src = element.getAttribute("data-src");
+    }
+});
+
+// Show image carousel, if needed
+const carousels = document.getElementsByClassName("glide");
+if (carousels.length > 0) {
+    document.addEventListener("DOMContentLoaded", function () {
+        const glide = new Glide(".glide", {
+            type: "carousel",
+            perView: 1,
+            focusAt: "center",
+            autoplay: 4000,
+            gap: 0,
+            animationTimingFunc: "ease-in-out",
+            animationDuration: 1000
+        });
+
+        glide.mount();
+    });
+}

src/scss/shared.scss

@@ -65,3 +65,16 @@ $blog-entry-single-height: 26em;
     width: 16px;
     height: 16px;
 }
+
+// Used for the carousel
+.carousel-caption {
+    text-align: left;
+    padding: 0 10px;
+    font-size: 14px;
+    top: 10px;
+    position: absolute;
+    z-index: 5;
+    text-shadow: -2px 2px 3px #000,-2px -2px 3px #000,2px -2px 3px #000,2px 2px 3px #000;
+    display: inline-block;
+    min-width: 300px;
+}

src/scss/style.scss

@@ -15,3 +15,6 @@
 @import "./helpers/spacing.scss";
 @import "./shared.scss";
 @import "./yuzu/yuzu.scss";
+
+/* 5. Bring in other external vendor SCSS to bake in */
+@import "./vendor/glide.scss";

src/scss/vendor/glide.scss

@@ -0,0 +1,72 @@
+$glide-class: 'glide' !default;
+$glide-element-separator: '__' !default;
+$glide-modifier-separator: '--' !default;
+
+.#{$glide-class} {
+  $this: &;
+
+  $se: $glide-element-separator;
+  $sm: $glide-modifier-separator;
+
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+
+  * {
+    box-sizing: inherit;
+  }
+
+  &#{$se}track {
+    overflow: hidden;
+  }
+
+  &#{$se}slides {
+    position: relative;
+    width: 100%;
+    list-style: none;
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    touch-action: pan-Y;
+    overflow: hidden;
+    padding: 0;
+    white-space: nowrap;
+    display: flex;
+    flex-wrap: nowrap;
+    will-change: transform;
+
+    &#{$glide-modifier-separator}dragging {
+      user-select: none;
+    }
+  }
+
+  &#{$se}slide {
+    width: 100%;
+    height: 100%;
+    flex-shrink: 0;
+    white-space: initial;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-tap-highlight-color: transparent;
+
+    a {
+      user-select: none;
+      -webkit-user-drag: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+    }
+  }
+
+  &#{$se}arrows {
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+
+  &#{$se}bullets {
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+
+  &#{$sm}rtl {
+    direction: rtl;
+  }
+}

src/scss/yuzu/yuzu.scss

@@ -39,3 +39,18 @@ $switch-gray: #828282;
 a:hover {
   color: lighten($blue, 5);
 }
+
+// Correctly positions the switch screen images in the overlay.
+.offset-switch-overlay {
+  top: 13.5%;
+  left: 22.5%;
+  // 100% - (22.5% * 2)
+  width: 55%;
+}
+
+// Ensure that arrows consume the entire overlay's height.
+.glide__arrow {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}