Added JS to randomize the homepage's splash image

docs/Gemfile

@@ -13,4 +13,5 @@ group :jekyll_plugins do
   gem "jekyll-feed"
   gem "jemoji"
   gem "jekyll-algolia"
+  gem "jekyll-include-cache"
 end

docs/_config.yml

@@ -7,6 +7,7 @@
 
 remote_theme             : "mmistakes/minimal-mistakes"
 
+
 minimal_mistakes_skin    : "von" # "default", "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
 
 # Site Settings
@@ -263,6 +264,7 @@ plugins:
   - jekyll-gist
   - jekyll-feed
   - jemoji
+  - jekyll-include-cache
 
 # mimic GitHub Pages with --safe
 whitelist:

docs/_data/hero.yml

@@ -0,0 +1,11 @@
+images:
+  - url: "/assets/images/svgs/issuer-sitting-3-noshadow-forwhtbk.svg"
+    class: "issuer-1"
+  - url: "/assets/images/svgs/licenses-1.svg"
+    class: "licenses-1"
+  - url: "/assets/images/svgs/mary-service-card-2-midbk.svg"
+    class: "mary"
+  - url: "/assets/images/svgs/licenses-1.svg"
+    class: "licenses-2"
+  - url: "/assets/images/svgs/verifier-sitting-1.svg"
+    class: "issuer-2"

docs/_includes/footer/custom.html

@@ -0,0 +1 @@
+<script src="/assets/js/random-hero-splash.js"></script>

docs/_includes/page__hero.html

@@ -1,9 +1,3 @@
-{% if page.header.image contains "://" %}
-  {% capture img_path %}{{ page.header.image }}{% endcapture %}
-{% else %}
-  {% capture img_path %}{{ page.header.image | relative_url }}{% endcapture %}
-{% endif %}
-
 {% if page.header.primary_cta_url contains "://" %}
   {% capture primary_cta_path %}{{ page.header.primary_cta_url }}{% endcapture %}
 {% else %}
@@ -64,8 +58,15 @@ <h1 id="page-title" class="page__title" itemprop="headline">
           {% endif %}
         </p>
       {% endif %}
-      {% if page.header.image %}
-        <img src="{{ img_path }}" alt="{{ image_description }}" class="page__hero-image {{ page.header.image_class }}">
+      {% if site.data.hero.images %}
+        {% for hero in site.data.hero.images %}
+          {% if hero.url contains "://" %}
+            {% capture img_path %}{{ hero.url }}{% endcapture %}
+          {% else %}
+            {% capture img_path %}{{ hero.url | relative_url }}{% endcapture %}
+          {% endif %}
+          <img src="{{ img_path }}" class="page__hero-image {{ hero.class }}">
+        {% endfor %}
       {% endif %}
       {% if page.header.caption %}
         <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>

docs/_pages/v2.md → docs/_pages/home.md

@@ -1,14 +1,12 @@
 ---
 layout: splash
-permalink: /v2/
+permalink: /
 header:
   overlay_color: "#6c98a7"
   primary_cta_label: "<i class='fas fa-book-open'></i> Learn More About VON"
   primary_cta_url: "/about/"
   secondary_cta_label: "<i class='fas fa-people-carry'></i> Get Involved"
   secondary_cta_url: "/getting_started/quick-start-guide/"
-  image: "/assets/images/svgs/licenses-1.svg"
-  image_class: "licenses-1"
   caption:
 headline: 'One day, all government-issued documents will be fully digital. We&rsquo;re here to make that happen.'
 excerpt: ''

docs/_sass/minimal-mistakes/_page.scss

@@ -268,17 +268,22 @@
   -ms-interpolation-mode: bicubic;
   position: absolute;
   z-index: -1;
+  display: none;
 
-  &.issuer {
-    max-width: 480px;
-    right: -100px;
-    bottom: 0px;
-    max-height: 600px;
+  &.active {
     display: none;
 
     @include breakpoint($medium-wide) {
       display: block;
     }
+  }
+
+  &.issuer-1,
+  &.issuer-2 {
+    max-width: 480px;
+    right: -100px;
+    bottom: 0px;
+    max-height: 600px;
 
     @include breakpoint($large) {
       right: -40px;      

docs/assets/js/random-hero-splash.js

@@ -0,0 +1,24 @@
+---
+---
+
+{% assign numberOfHeroOptions = site.data.hero.images | size %}
+
+(function() {
+  var body = document.body;
+  var options = [];
+
+  {% for hero in site.data.hero.images %}
+    options.push("{{ hero.class }}");
+  {% endfor %}
+
+  var randomNumber = Math.floor((Math.random() * {{ numberOfHeroOptions }} ));
+
+  function hasClass(element, cls) {
+    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
+  }
+
+  if(hasClass(body, "layout--splash")) {
+    var randomlySelectedHero = document.getElementsByClassName("page__hero-image " + options[randomNumber])[0];
+    randomlySelectedHero.className += " active";
+  }
+})();