Scripts adjustment

9 files changed, 153 insertions, 164 deletions

diff --git a/README.md b/README.md
index 74d3ca2..093748a 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markdown style.
 
-![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square)
+![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![CODE SIZE](https://img.shields.io/github/languages/code-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square)
 
 [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md)
 
diff --git a/README_CN.md b/README_CN.md
index 38c36f7..0c199a8 100644
--- a/README_CN.md
+++ b/README_CN.md
@@ -2,7 +2,7 @@
 
 简单的 Hugo 主题，支持夜间模式，Markdown 是蹭的 GitHub Primer。萌新一个啥也不会，有问题尽管提（
 
-![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![REPO SIZE](https://img.shields.io/github/repo-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square)
+![RELEASE](https://img.shields.io/github/v/release/amzrk2/hugo-theme-fuji?style=flat-square) ![BUILD STATUS](https://img.shields.io/github/workflow/status/amzrk2/hugo-theme-fuji/Build%20Test?style=flat-square) ![CODE SIZE](https://img.shields.io/github/languages/code-size/amzrk2/hugo-theme-fuji?style=flat-square) ![LICENSE](https://img.shields.io/github/license/amzrk2/hugo-theme-fuji?style=flat-square)
 
 [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [白话文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md)
 
@@ -19,7 +19,7 @@
   - [放大图片；网慢，要 lazyload](#放大图片网慢要-lazyload)
   - [Markdown 钩子](#markdown-钩子)
   - [这字体也太丑了，换掉](#这字体也太丑了换掉)
-  - [自定义 highlight.js 支持的语言]()
+  - [自定义 highlight.js 支持的语言](#自定义-highlightjs-支持的语言)
   - [Disqus identifier](#disqus-identifier)
 - [批判一番](#批判一番)
 - [License](#license)
diff --git a/layouts/partials/analytic-cfga.html b/layouts/partials/analytic-cfga.html
index ee7567e..63db4d6 100644
--- a/layouts/partials/analytic-cfga.html
+++ b/layouts/partials/analytic-cfga.html
@@ -3,5 +3,5 @@
     window.ga_tid = '{{ .Site.Params.googleAnalyticsTid }}';
     window.ga_api = '{{ .Site.Params.googleAnalyticsRoute }}';
 </script>
-<script src="https://cdn.jsdelivr.net/npm/cfga@1.0.1/cfga.min.js" async></script>
+<script async src="https://cdn.jsdelivr.net/npm/cfga@1.0.1/cfga.min.js"></script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/analytic-gtag.html b/layouts/partials/analytic-gtag.html
index f43e48a..f851745 100644
--- a/layouts/partials/analytic-gtag.html
+++ b/layouts/partials/analytic-gtag.html
@@ -1,6 +1,5 @@
 {{ with .Site.GoogleAnalytics }}
 <!-- GA -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
 <script>
     window.dataLayer = window.dataLayer || [];
 
@@ -10,4 +9,5 @@
     gtag('js', new Date());
     gtag('config', '{{ . }}');
 </script>
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ . }}"></script>
 {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index d4b610c..f648160 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -38,18 +38,10 @@
 {{ $style := $sass | resources.ToCSS $options }}
 <link rel="stylesheet" href="{{ $style.RelPermalink }}" />
 
-<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" data-cfasync="false"></script>
-<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script>
+<script data-cfasync="false" src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/amzrk2/web-font-archive@1.4.5/font-awesome/fontawesome.min.css" />
-{{ if .Site.Params.customHighlight }}
-<script src="{{ .Site.Params.customHighlightURL | relURL }}"></script>
-{{ else }}
-<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js"></script>
-{{ end }}
 {{ if .Params.playerURL }}
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
 {{ end }}
 
 {{ partial "analytic-gtag.html" . }}
diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html
index 39b3a00..220ee93 100644
--- a/layouts/partials/scripts-end.html
+++ b/layouts/partials/scripts-end.html
@@ -1,152 +1,14 @@
-<script>
-    // toggle theme
-    function toggleTheme() {
-        $('body').attr('data-theme', (index, attr) => {
-            if (attr === 'light') {
-                localStorage.setItem('fuji_theme', 'dark');
-                return 'dark';
-            } else {
-                localStorage.setItem('fuji_theme', 'light');
-                return 'light';
-            }
-        });
-    }
-    // update medium-zoom theme
-    // @params fujiTheme, mediumEvent
-    function updateMeidumTheme(fujiTheme, mediumEvent) {
-        if (fujiTheme && mediumEvent) {
-            mediumEvent.detach();
-            let mediumTheme;
-            if (fujiTheme === 'dark') {
-                mediumTheme = '#2f3136';
-            } else {
-                mediumTheme = '#fffffd';
-            }
-            mediumEvent = mediumZoom('.img-zoomable', {
-                background: mediumTheme
-            });
-        }
-    }
-    // update utterances theme
-    // @params fujiTheme, utterancesFrame
-    function updateUtterancesTheme(fujiTheme, utterancesFrame) {
-        if (fujiTheme && utterancesFrame) {
-            let ifMessage;
-            if (fujiTheme === 'dark') {
-                ifMessage = {
-                    type: 'set-theme',
-                    theme: 'photon-dark'
-                };
-            } else {
-                ifMessage = {
-                    type: 'set-theme',
-                    theme: 'github-light'
-                };
-            }
-            utterancesFrame.contentWindow.postMessage(ifMessage, 'https://utteranc.es');
-        }
-    }
-</script>
-
-<script>
-    // toc anchors & to-top button
-    $('.btn .btn-scroll-top').on('click', () => {
-        $('html, body').animate({
-            scrollTop: 0,
-        });
-    });
-    $('.sidebar-toc a').on('click', (event) => {
-        $('html, body').animate({
-            scrollTop: $($(event.currentTarget).attr('href')).offset().top
-        });
-    });
-
-    // init medium-zoom
-    var mediumTheme;
-    if ($('body').attr('data-theme') === 'dark') {
-        mediumTheme = '#2f3136';
-    } else {
-        mediumTheme = '#fffffd';
-    }
-    var mediumEvent = mediumZoom('.img-zoomable', {
-        background: mediumTheme
-    });
-
-    hljs.initHighlightingOnLoad();
-
-    // remove empty ul in toc if article only have ## and ###
-    if ($('.sidebar-toc ul ul').length > 0 && $('.sidebar-toc ul ul li').text() === '') {
-        $('.sidebar-toc ul ul').hide();
-    }
-
-    // init highlight.js
-    hljs.initHighlighting();
-</script>
-
-{{ if and (and (ne .Params.noComments true) (.IsPage)) (.Site.Params.utterancesRepo) }}
-<script>
-    // utterances comment loading indicator
-    var commentStatus; // utterence status
-    var commentLoadingTime = 0; // loading time passed
-    var commentCheckInterval = self.setInterval(checkUtterances, 500);
-
-    function checkUtterances() {
-        commentStatus = $('.post-comment .utterances').attr('style');
-        if (commentStatus) {
-            clearInterval(commentCheckInterval);
-            updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0])
-            $('.post-loading').hide();
-        } else {
-            if (++commentLoadingTime > 20) {
-                clearInterval(commentCheckInterval);
-                $('.post-comment').hide();
-                $('.post-loading p').text('{{ i18n "postCommentLoadingFailed" }}');
-                $('.post-loading i').attr('class', 'far fa-times-circle');
-            }
-        }
-    }
-
-    // theme switch button
-    $('.btn .btn-toggle-mode').on('click', () => {
-        // toggle theme
-        toggleTheme();
-        // update medium background
-        updateMeidumTheme($('body').attr('data-theme'), mediumEvent);
-        // update utterances theme if available
-        if (commentStatus) {
-            updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
-        }
-    });
-</script>
-{{ else if and (and (ne .Params.noComments true) (.IsPage)) (.Site.Params.disqusShortname) }}
-<script>
-    // theme switch button
-    $('.btn .btn-toggle-mode').on('click', () => {
-        // toggle theme
-        toggleTheme();
-        // update medium background
-        updateMeidumTheme($('body').attr('data-theme'), mediumEvent);
-        // update disqus theme  if available
-        if (DISQUS) {
-            DISQUS.reset({
-                reload: true
-            });
-        }
-    });
-</script>
+<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.5/dist/medium-zoom.min.js"></script>
+{{ if .Site.Params.customHighlight }}
+<script src="{{ .Site.Params.customHighlightURL | relURL }}"></script>
 {{ else }}
-<script>
-    // theme switch button
-    $('.btn .btn-toggle-mode').on('click', () => {
-        // toggle theme
-        toggleTheme();
-        // update medium background
-        updateMeidumTheme($('body').attr('data-theme'), mediumEvent);
-    });
-</script>
+<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/highlight.min.js"></script>
 {{ end }}
+<script src="{{ "/assets/js/fuji.dev.js" | relURL }}"></script>
 
 {{ with .Params.playerURL }}
+<script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
 <script>
     // in-post aplayer
     var aPlayer = new APlayer({
diff --git a/layouts/partials/scripts-front.html b/layouts/partials/scripts-front.html
index 59c3bb0..9425769 100644
--- a/layouts/partials/scripts-front.html
+++ b/layouts/partials/scripts-front.html
@@ -1,6 +1,6 @@
 <script data-cfasync="false">
     // detect theme data in localStorage
-    // change the data-theme attribute of body
+    // if diff change the data-theme attribute of body
     var fujiThemeData = localStorage.getItem('fuji_theme');
     if (fujiThemeData) {
         if ($('body').attr('data-theme') !== fujiThemeData) {
@@ -12,12 +12,10 @@
                 }
             });
         }
-    } else {
-        localStorage.setItem('fuji_theme', $('body').attr('data-theme'));
     }
 </script>
 <script data-cfasync="false">
-    // ie
+    // ie detection
     var ua = window.navigator.userAgent;
 
     function browserDetection() {
diff --git a/package.json b/package.json
index e6592f3..7e7f66b 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,13 @@
     },
     "homepage": "https://github.com/amzrk2/hugo-theme-fuji#readme",
     "devDependencies": {
-        "@primer/css": "14.4.0"
+        "@babel/cli": "^7.10.1",
+        "@babel/core": "^7.10.2",
+        "@primer/css": "14.4.0",
+        "uglify-js": "^3.9.4"
+    },
+    "scripts": {
+        "babel": "babel static/assets/js/fuji.dev.js --out-file static/assets/js/fuji.js",
+        "js": "uglifyjs static/assets/js/fuji.js -o static/assets/js/fuji.min.js -c --source-map"
     }
 }
diff --git a/static/assets/js/fuji.dev.js b/static/assets/js/fuji.dev.js
new file mode 100644
index 0000000..d6917a3
--- /dev/null
+++ b/static/assets/js/fuji.dev.js
@@ -0,0 +1,130 @@
+'use strict';
+
+// toggle theme
+function toggleTheme() {
+    $('body').attr('data-theme', (index, attr) => {
+        if (attr === 'light') {
+            localStorage.setItem('fuji_theme', 'dark');
+            return 'dark';
+        } else {
+            localStorage.setItem('fuji_theme', 'light');
+            return 'light';
+        }
+    });
+}
+
+// update medium-zoom theme
+// @params targetTheme, mediumInst
+function updateMeidumTheme(targetTheme, mediumInst) {
+    if (targetTheme && mediumInst) {
+        mediumInst.detach();
+        if (targetTheme === 'dark') {
+            mediumInst = mediumZoom('.img-zoomable', {
+                background: '#2f3136',
+            });
+        } else {
+            mediumInst = mediumZoom('.img-zoomable', {
+                background: '#fffffd',
+            });
+        }
+    }
+}
+
+// update utterances theme
+// @params targetTheme, utterancesFrame
+function updateUtterancesTheme(targetTheme, utterancesFrame) {
+    if (targetTheme && utterancesFrame) {
+        if (targetTheme === 'dark') {
+            utterancesFrame.contentWindow.postMessage(
+                {
+                    type: 'set-theme',
+                    theme: 'photon-dark',
+                },
+                'https://utteranc.es'
+            );
+        } else {
+            utterancesFrame.contentWindow.postMessage(
+                {
+                    type: 'set-theme',
+                    theme: 'github-light',
+                },
+                'https://utteranc.es'
+            );
+        }
+    }
+}
+
+// to-top button
+$('.btn .btn-scroll-top').on('click', () => {
+    $('html, body').animate({
+        scrollTop: 0,
+    });
+});
+
+// toc anchors
+$('.sidebar-toc a').on('click', (event) => {
+    $('html, body').animate({
+        scrollTop: $($(event.currentTarget).attr('href')).offset().top,
+    });
+});
+
+// remove empty ul in toc if article only have ## and ###
+if ($('.sidebar-toc ul ul').length > 0 && $('.sidebar-toc ul ul li').text() === '') {
+    $('.sidebar-toc ul ul').hide();
+}
+
+// init medium-zoom
+var mediumInst; // medium-zoom instance
+if ($('body').attr('data-theme') === 'dark') {
+    mediumInst = mediumZoom('.img-zoomable', {
+        background: '#2f3136',
+    });
+} else {
+    mediumInst = mediumZoom('.img-zoomable', {
+        background: '#fffffd',
+    });
+}
+
+// init highlight.js
+hljs.initHighlighting();
+
+// if in post page and using utterances
+// add utterances comment loading indicator
+if ($('.post-loading').length >= 1) {
+    var commentStatus; // utterence status
+    var commentLoadingTime = 0; // loading time passed
+    var commentCheckInterval = self.setInterval(checkUtterances, 500);
+
+    function checkUtterances() {
+        commentStatus = $('.post-comment .utterances').attr('style');
+        if (commentStatus) {
+            clearInterval(commentCheckInterval);
+            updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
+            $('.post-loading').hide();
+        } else {
+            if (++commentLoadingTime > 20) {
+                clearInterval(commentCheckInterval);
+                $('.post-comment').hide();
+                $('.post-loading i').attr('class', 'far fa-times-circle');
+            }
+        }
+    }
+}
+
+// init theme switch button
+$('.btn .btn-toggle-mode').on('click', () => {
+    // toggle theme
+    toggleTheme();
+    // update medium background
+    updateMeidumTheme($('body').attr('data-theme'), mediumInst);
+    // switch comment area theme
+    // only works after comment area are initialized
+    if ($('.post-loading').length >= 1 && commentStatus) {
+        updateUtterancesTheme($('body').attr('data-theme'), $('.post-comment iframe')[0]);
+    }
+    if ($('#disqus_thread').length >= 1 && typeof DISQUS !== 'undefined') {
+        DISQUS.reset({
+            reload: true,
+        });
+    }
+});