From 772d7335d3fb01cfd95a886e6a535f7f7e7ed979 Mon Sep 17 00:00:00 2001
From: amzrk2
Date: Mon, 20 Apr 2020 16:29:46 +0800
Subject: Add webp checker for dev use

---
 layouts/partials/head.html    | 14 ++++++++++--
 layouts/partials/scripts.html | 50 +++++++++++++++++++++++++++----------------
 2 files changed, 43 insertions(+), 21 deletions(-)

(limited to 'layouts')

diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index c5331cc..658030e 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -5,6 +5,7 @@
 <meta http-equiv="Cache-Control" content="no-transform">
 <meta http-equiv="Cache-Control" content="no-siteapp">
 {{ hugo.Generator }}
+
 {{ partial "favicon.html" . }}
 
 {{ if .IsHome }}
@@ -18,20 +19,29 @@
 <meta name="keywords" content="{{ delimit .Params.tags ", " }}">
 {{ end }}
 
-
 {{ template "_internal/opengraph.html" . }}
 {{ template "_internal/twitter_cards.html" . }}
 
 {{ partial "analytic-google.html" . }}
 
+<!-- global css -->
 {{ $options := (dict "targetPath" "css/main.min.css" "outputStyle" "compressed") }}
 {{ $style := resources.Get "sass/main.scss" | resources.ToCSS $options }}
 <link rel="stylesheet" href="{{ $style.Permalink }}">
+
+<!-- global js -->
+{{ if .Site.Params.webpChecker }}
+{{ $webp := resources.Get "js/modernizr-webp.min.js" }}
+<script src="{{ $webp.Permalink }}"></script>
+{{ end }}
 {{ with .Site.Params.cdnIntersectionObserverJS }}
-<script src="{{ . }}"></script>{{ end }}
+<script src="{{ . }}"></script>
+{{ end }}
 <script src="{{ .Site.Params.cdnVanillaLazyloadJS }}"></script>
 <script src="{{ .Site.Params.cdnJQueryJS }}"></script>
 <script src="{{ .Site.Params.cdnProgessJS }}"></script>
+
+<!-- optional katex math cdnjs -->
 {{ if or .Params.math .Site.Params.math }}
 {{ partial "math.html" . }}
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/scripts.html b/layouts/partials/scripts.html
index e807e36..d734202 100644
--- a/layouts/partials/scripts.html
+++ b/layouts/partials/scripts.html
@@ -1,13 +1,13 @@
-<!-- Comment loading indicator -->
 {{ if and (.IsPage) (.Site.Params.utterancesComment) }}
+<!-- comment loading indicator -->
 <script>
     $(function () {
-        var loadingBar = new ProgressBar.Circle('#loading-bar', {
-            color: '#8AA2D3',
+        var loadingBar = new ProgressBar.Circle("#loading-bar", {
+            color: "#8AA2D3",
             strokeWidth: 15,
-            trailColor: '#E5E2E4',
+            trailColor: "#E5E2E4",
             trailWidth: 15,
-            fill: '#E5E2E4'
+            fill: "#E5E2E4"
         });
         loadingBar.animate(1.0, {
             duration: 10000
@@ -18,13 +18,13 @@
         var commentCheckInterval = self.setInterval(checkUtterances, 500);
 
         function checkUtterances() {
-            commentStatus = $('#post-comment .utterances').attr('style');
+            commentStatus = $("#post-comment .utterances").attr("style");
             if (commentStatus === undefined) {
                 commentLoadingTime += 1;
                 if (commentLoadingTime > 20) {
                     clearInterval(commentCheckInterval);
-                    $('#post-comment').hide();
-                    $('#post-loading p').text('{{ i18n "postCommentLoadingFailed" }}');
+                    $("#post-comment").hide();
+                    $("#post-loading p").text('{{ i18n "postCommentLoadingFailed" }}');
                 }
                 return;
             } else {
@@ -32,28 +32,28 @@
                 loadingBar.animate(1.0, {
                     duration: 500
                 }, function () {
-                    $('#post-loading').hide();
+                    $("#post-loading").hide();
                 });
             }
         }
     });
 </script>
 {{ end }}
-<!-- Scroll to top button -->
 {{ if .Site.Params.scrollTop }}
+<!-- scroll to top button -->
 <script>
     $(function () {
-        var bar = new ProgressBar.Circle('#progress', {
-            color: '#8AA2D3',
+        var bar = new ProgressBar.Circle("#progress", {
+            color: "#8AA2D3",
             strokeWidth: 12,
-            trailColor: '#E5E2E4',
+            trailColor: "#E5E2E4",
             trailWidth: 12,
             text: {
                 value: '{{ partial "fas/fa-angle-up" . }}',
                 autoStyleContainer: false,
                 style: null
             },
-            fill: '#E5E2E4'
+            fill: "#E5E2E4"
         });
         var scrolled = ($(window).scrollTop() / ($(document).height() - $(window).height() - 1));
         bar.animate(scrolled);
@@ -67,15 +67,27 @@
             bar.set(scrolled);
         });
     });
-    $('#container-progress').click(function () {
-        $('html, body').animate({
+    $("#container-progress").click(function () {
+        $("html, body").animate({
             scrollTop: 0
-        }, 'slow');
-        return false;
+        }, "slow");
     });
 </script>
 {{ end }}
-<!-- Vanilla LazyLoad -->
+{{ if .Site.Params.webpChecker }}
+<!-- webp checker -->
+<script>
+    $(function () {
+        Modernizr.on("webp", function (result) {
+            if (!result) {
+                $('<blockquote><p>{{ i18n "webpCheckerFront" }}<a href="https://caniuse.com/#feat=webp" target="_blank">WebP</a>{{ i18n "webpCheckerEnd" }}</p></blockquote>')
+                    .replaceAll("#content img");
+            }
+        });
+    });
+</script>
+{{ end }}
+<!-- vanilla lazyload -->
 <script>
     $(function () {
         var lazyLoadInstance = new LazyLoad({
-- 
cgit v1.2.3