feat(image): add image lightgallery

assets/css/_page/_single.scss

@@ -168,26 +168,35 @@
 
     figure {
       text-align: center;
-    }
 
-    .image-caption:not(:empty) {
-      min-width: 20%;
-      max-width: 80%;
-      display: inline-block;
-      padding: .625rem;
-      margin: 0 auto;
-      border-bottom: 1px solid #d9d9d9;
-      font-size: .875rem;
-      color: #969696;
-      line-height: 1.7;
+      .image-caption:not(:empty) {
+        min-width: 20%;
+        max-width: 80%;
+        display: inline-block;
+        padding: .625rem;
+        margin: 0 auto;
+        border-bottom: 1px solid #d9d9d9;
+        font-size: .875rem;
+        color: #969696;
+        line-height: 1.7;
+      }
+
+      a.lightgallery:hover img {
+        transform: scale(1.02);
+      }
     }
 
     img {
       display: block;
-      max-width: 100%;
+      max-width: 90%;
       height: auto;
       margin: 0 auto;
       overflow: hidden;
+      transition: all 0.2s ease-in-out;
+    }
+
+    .lazyloading {
+      object-fit: none;
     }
 
     blockquote {

assets/css/lib/VERSION

@@ -6,3 +6,4 @@ aplayer@1.10.1
 animate.css@3.7.2
 mermaid@8.4.2
 valine@1.3.10
+lightgallery@1.1.3

assets/js/lib/VERSION

@@ -1,6 +1,6 @@
 gitalk@1.5.0
 valine@1.3.10
-lazysizes@5.1.2
+lazysizes@5.2.0
 katex@0.11.1
 mermaid@8.4.2
 echarts@4.5.0
@@ -9,3 +9,4 @@ aplayer@1.10.1
 meting@2.0.1
 smooth-scroll@16.1.2
 sharer@0.4.0
+lightgallery@1.1.3 lg-thumbnail@1.1.0 lg-zoom@1.1.0

assets/js/lib/lazysizes/ls.native-loading.min.js

@@ -0,0 +1,2 @@
+/*! lazysizes - v5.2.0 */
+!function(a,b){var c=function(){b(a.lazySizes),a.removeEventListener("lazyunveilread",c,!0)};b=b.bind(null,a,a.document),"object"==typeof module&&module.exports?b(require("lazysizes")):a.lazySizes?c():a.addEventListener("lazyunveilread",c,!0)}(window,function(a,b,c){"use strict";function d(){var d=c.loader,e=d.checkElems,f=function(){setTimeout(function(){a.removeEventListener("scroll",d._aLSL,!0)},1e3)},g="object"==typeof j.nativeLoading.disableListeners?j.nativeLoading.disableListeners:k;g.scroll&&(a.addEventListener("load",f),f(),a.removeEventListener("scroll",e,!0)),g.resize&&a.removeEventListener("resize",e,!0),Object.keys(g).forEach(function(a){g[a]&&b.removeEventListener(a,e,!0)})}function e(){h||(h=!0,f&&g&&j.nativeLoading.disableListeners&&(!0===j.nativeLoading.disableListeners&&(j.nativeLoading.setLoadingAttribute=!0),d()),j.nativeLoading.setLoadingAttribute&&a.addEventListener("lazybeforeunveil",function(a){var b=a.target;"loading"in b&&!b.getAttribute("loading")&&b.setAttribute("loading","lazy")},!0))}var f="loading"in HTMLImageElement.prototype,g="loading"in HTMLIFrameElement.prototype,h=!1,i=c.prematureUnveil,j=c.cfg,k={focus:1,mouseover:1,click:1,load:1,transitionend:1,animationend:1,scroll:1,resize:1};j.nativeLoading||(j.nativeLoading={}),a.addEventListener&&a.MutationObserver&&(f||g)&&(c.prematureUnveil=function(a){return h||e(),!(!("loading"in a&&(j.nativeLoading.setLoadingAttribute||a.getAttribute("loading")))||"auto"==a.getAttribute("data-sizes")&&!a.offsetWidth)||(i?i(a):void 0)})});

assets/svg/loading.small.svg

@@ -0,0 +1,32 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="69" height="69" viewBox="-31 -31 100 100" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
+            <stop stop-color="#fff" stop-opacity="0" offset="0%"/>
+            <stop stop-color="#fff" stop-opacity=".631" offset="63.146%"/>
+            <stop stop-color="#fff" offset="100%"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)">
+            <path d="M36 18c0-9.94-8.06-18-18-18" id="Oval-2" stroke="url(#a)" stroke-width="2">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </path>
+            <circle fill="#fff" cx="36" cy="18" r="1">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="0.9s"
+                    repeatCount="indefinite" />
+            </circle>
+        </g>
+    </g>
+</svg>