home header image slider support, shave.js deleted,

README.md

@@ -61,7 +61,6 @@ Zzo theme is using this library.
 * jquery.toc
 * photoswipe
 * prism
-* shave.js
 
 ## Minimum Hugo version
 
@@ -218,8 +217,11 @@ logoText = "Zzo"
 description = "The Zzo theme for Hugo example site."
 custom_css = ["css/custom.css", "css/custom.css"]
 custom_js = ["js/custom.js"]
-myname = "yourname"
+
+# home
+myname = "zzossig"
 whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
+swiperCount = 3
 
 # body
 enableBreadcrumb = true

assets/js/jquery.shave.min.js

@@ -1,8 +0,0 @@
-/**
-  shave - Shave is a javascript plugin that truncates multi-line text within a html element based on set max height
-  @version v2.5.6
-  @link https://github.com/dollarshaveclub/shave#readme
-  @author Jeff Wainwright <yowainwright@gmail.com> (jeffry.in)
-  @license MIT
-**/
-!function (e) { "function" == typeof define && define.amd ? define(e) : e() }(function () { "use strict"; if ("undefined" != typeof window) { var e = window.$ || window.jQuery || window.Zepto; e && (e.fn.shave = function (e, t) { return function (e, t) { var n = 2 < arguments.length && void 0 !== arguments[2] ? arguments[2] : {}; if (void 0 === t || isNaN(t)) throw Error("maxHeight is required"); var i = "string" == typeof e ? document.querySelectorAll(e) : e; if (i) { var a = n.character || "…", o = n.classname || "js-shave", r = "boolean" != typeof n.spaces || n.spaces, s = '<span class="js-shave-char">'.concat(a, "</span>"); "length" in i || (i = [i]); for (var c = 0; c < i.length; c += 1) { var h = i[c], d = h.style, l = h.querySelector(".".concat(o)), f = void 0 === h.textContent ? "innerText" : "textContent"; l && (h.removeChild(h.querySelector(".js-shave-char")), h[f] = h[f]); var v = h[f], g = r ? v.split(" ") : v; if (!(g.length < 2)) { var u = d.height; d.height = "auto"; var p = d.maxHeight; if (d.maxHeight = "none", h.offsetHeight <= t) d.height = u, d.maxHeight = p; else { for (var m = g.length - 1, y = 0, j = void 0; y < m;)j = y + m + 1 >> 1, h[f] = r ? g.slice(0, j).join(" ") : g.slice(0, j), h.insertAdjacentHTML("beforeend", s), h.offsetHeight > t ? m = j - 1 : y = j; h[f] = r ? g.slice(0, m).join(" ") : g.slice(0, m), h.insertAdjacentHTML("beforeend", s); var w = r ? " ".concat(g.slice(m).join(" ")) : g.slice(m), x = document.createTextNode(w), H = document.createElement("span"); H.classList.add(o), H.style.display = "none", H.appendChild(x), h.insertAdjacentElement("beforeend", H), d.height = u, d.maxHeight = p } } } } }(this, e, t), this }) } });

assets/js/zzo.js

@@ -113,7 +113,4 @@ $(document).ready(function() {
       $(this).removeClass('active');
     }
   });
-
-  // truncate
-  $('.summary__text').shave(160);
 });

assets/sass/components/_swiper.scss

@@ -0,0 +1,22 @@
+.swiper-container {
+  width: $grid_max_width;
+  height: 200px;
+  background-color: transparent;
+}
+
+.swiper-pagination-bullet {
+  opacity: .5;
+}
+.swiper-pagination-bullet-active {
+  @include themify($themes) {
+    background: themed('navbar-title-active-color') !important;
+  }
+}
+
+.swiper-button-prev {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23424242'%2F%3E%3C%2Fsvg%3E") !important;
+}
+
+.swiper-button-next {
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23424242'%2F%3E%3C%2Fsvg%3E") !important;
+}

assets/sass/layout/_header.scss

@@ -1,6 +1,4 @@
 .header {
-  padding: 1rem;
-
   @include flexbox();
   @include align-items(center);
   @include justify-content(center);

assets/sass/main.scss

@@ -163,6 +163,7 @@ $gallery_mask_background_color: {{ $scr.Get "gallery_mask_background_color" }};
 @import 'components/switch';
 @import 'components/subs';
 @import 'components/mermaid';
+@import 'components/swiper';
 
 @import 'pages/body';
 @import 'pages/home';

data/_config/_default/params.toml

@@ -2,8 +2,11 @@ logoText = "Zzo"
 description = "The Zzo theme for Hugo example site."
 custom_css = ["css/custom.css", "scss/custom.scss"]
 custom_js = ["js/custom.js"]
+
+# home
 myname = "zzossig"
 whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
+swiperCount = 3
 
 # body
 enableBreadcrumb = true

data/swiper.json

@@ -0,0 +1,14 @@
+{
+  "direction": "horizontal",
+  "loop": true,
+  "pagination": {
+    "el": ".swiper-pagination"
+  },
+    "navigation": {
+      "nextEl": ".swiper-button-next",
+      "prevEl": ".swiper-button-prev"
+  },
+    "autoplay": {
+        "delay": 5000
+  }
+}

exampleSite/config.toml

@@ -28,8 +28,11 @@ rssLimit = 100
   description = "The Zzo theme for Hugo example site."
   custom_css = ["css/custom.css", "scss/custom.scss"]
   custom_js = ["js/custom.js"]
-  myname = "yourname"
+  
+  # home
+  myname = "zzossig"
   whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
+  swiperCount = 3
 
   # body
   enableBreadcrumb = true

layouts/partials/head/scripts.html

@@ -8,8 +8,6 @@
 <script defer src="{{ $prism.RelPermalink }}"></script>
 {{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
 <script defer src="{{ $lazysizes.RelPermalink }}"></script>
-{{ $shave := resources.Get "js/jquery.shave.min.js" | resources.Fingerprint }}
-<script defer src="{{ $shave.RelPermalink }}"></script>
 {{ $zzo := resources.Get "js/zzo.js" | resources.Minify | resources.Fingerprint }}
 <script defer src="{{ $zzo.RelPermalink }}"></script>
 

layouts/partials/header/site-header.html

@@ -1,13 +1,31 @@
 {{ if .IsHome }}
 <header class="header">
-    <div class="header__whoami">
-        <img src="{{ "/images/whoami/photo.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ end }}" class="header__whoami--image">
-        <div class="header__whoami--name h6">
-            Hi, I'm {{ .Site.Params.myname }}
-        </div>
-        <div class="header__whoami--desc p2">
-            
+    <!-- Slider main container -->
+    <div class="swiper-container">
+        <!-- Additional required wrapper -->
+        <div class="swiper-wrapper">
+            <!-- Slides -->
+            {{ if .Site.Params.swiperCount }}
+            {{ range $idx, $seq :=  (seq .Site.Params.swiperCount) }}
+                <div class="swiper-slide">
+                    {{ partial (print "header/slide-" $seq) . }}
+                </div>
+            {{ end }}
+            {{ end }}
         </div>
+        <!-- If we need pagination -->
+        <div class="swiper-pagination"></div>
     </div>
 </header>
+
+<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
+<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
+
+<script>
+    {{ $swiper := .Site.Data.swiper }}
+    var options = JSON.parse({{ $swiper | jsonify }});
+
+    var mySwiper = new Swiper('.swiper-container', options);
+</script>
+
 {{ end }}

layouts/partials/header/slide-1.html

@@ -0,0 +1 @@
+<div>slide 111</div>

layouts/partials/header/slide-2.html

@@ -0,0 +1 @@
+<div>slide 222</div>

layouts/partials/header/slide-3.html

@@ -0,0 +1 @@
+<div>slide 333</div>