feat: add TypeIt and CountDown

assets/css/_common/_page/post.scss

@@ -38,7 +38,7 @@
     }
 
     .post-content {
-        padding-top: 2rem;
+        padding-top: 1rem;
 
         h2,
         h3,
@@ -150,8 +150,6 @@
             overflow: hidden;
         }
 
-     
-
         img[data-action="zoom"] {
             cursor: zoom-in;
         }
@@ -162,6 +160,42 @@
             height: auto !important;
             margin: 0 !important;
         }
+
+        div.code {
+          padding: 6px;
+          font-size: 14px;
+          font-family: Consolas, Monaco, Menlo, Consolas, monospace;
+          font-weight:bold;
+          word-break: break-all;
+
+          .code-key {
+            color: #D371E3;
+          }
+
+          .code-cvar {
+            color: #ECBF6F;
+          }
+
+          .code-var {
+            color: #F16473;
+          }
+
+          .code-func {
+            color: #41B1F5;
+          }
+
+          .code-str {
+            color: #8BC56F;
+          }
+
+          .code-num {
+            color: #DB975C;
+          }
+
+          .code-comm {
+            color: #7E848F;
+          }
+        }
     }
 
     p {

assets/css/_custom.scss

@@ -2,3 +2,10 @@
 // Custom style
 // ==============================
 // You can override the variables in _variables.scss to customize the style
+
+.since {
+  padding: 30px;
+  text-align:center;
+  font-size: 30px;
+  line-height: 50px;
+}

assets/js/main.js

@@ -9,6 +9,31 @@ jQuery(function($) {
         window.prettyPrint && prettyPrint();
     };
 
+    _Blog.typeit = function() {
+        if (window.typeitMap) {
+            for (let id in typeitMap) {
+                new TypeIt(id, {
+                    strings: typeitMap[id],
+                }).go();
+            }
+        }
+    };
+
+    _Blog.countdown = function() {
+        if (window.countdownMap) {
+            for (let id in countdownMap) {
+              $(id).countdown(countdownMap[id], {elapse: true})
+                .on('update.countdown', function(event) {
+                  var $this = $(this).html(event.strftime(''
+                    + '<span>%D</span> 天 <br />'
+                    + '<span>%H</span> 时 '
+                    + '<span>%M</span> 分 '
+                    + '<span>%S</span> 秒'));
+              });
+          }
+        }
+    };
+
     _Blog.externalUrl = function() {
         $.expr[':'].external = function(obj) {
             return !obj.href.match(/^mailto\:/) &&
@@ -48,9 +73,11 @@ jQuery(function($) {
     }
 
     $(document).ready(function() {
-        _Blog.prettify()
-        _Blog.changeTitle()
         _Blog.toggleTheme()
+        _Blog.prettify()
+        _Blog.countdown()
+        _Blog.changeTitle()
         _Blog.toggleMobileMenu()
+        _Blog.typeit()
     });
 });

layouts/partials/js.html

@@ -7,7 +7,7 @@
 
 <!-- jQuery https://github.com/jquery/jquery -->
 {{ $jquery := `
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 ` }}
 <!-- JavaScript code prettifier https://github.com/google/code-prettify -->
 {{ $prettify := `
@@ -28,16 +28,20 @@
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/katex.min.js" integrity="sha384-9Nhn55MVVN0/4OFx7EE5kpFBPsEMZxKTCnA+4fqDmg12eCTqGi6+BB2LjY8brQxJ" crossorigin="anonymous"></script>
     <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.2/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous" onload="renderMathInElement(document.body);"></script>
 ` }}
-<!-- Typed.js https://github.com/mattboldt/typed.js -->
+<!-- TypeIt https://github.com/alexmacarthur/typeit -->
-{{ $typed := `
+{{ $typeit := `
-    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.10/lib/typed.min.js" integrity="sha256-F6VRM94CIE3Kv2zkAtbzlViDfZ3HMaIgusIcFBPIjiU=" crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/typeit@6.0.3/dist/typeit.min.js" integrity="sha256-jl1b2Wp4cXCUyX8FxPZ8Z0PPIPV3QYNb/jPSLGDej2c=" crossorigin="anonymous"></script>
+` }}
+<!-- jQuery.countdown https://github.com/hilios/jQuery.countdown/ -->
+{{ $countdown := `
+  <script src="https://cdn.jsdelivr.net/npm/jquery-countdown@2.2.0/dist/jquery.countdown.min.js" integrity="sha256-Ikk5myJowmDQaYVCUD0Wr+vIDkN8hGI58SGWdE671A8=" crossorigin="anonymous"></script>
 ` }}
-
 {{ $jquery | safeHTML }}
 
 {{ if .IsPage }}
     {{ $prettify | safeHTML }}
-    {{ $typed | safeHTML }}
+    {{ $typeit | safeHTML }}
+    {{ $countdown | safeHTML }}
     {{ $scripts = $scripts | append $dynamicToTop }}
 
     {{ if $postHasImages }}

layouts/shortcodes/countdown.html

@@ -0,0 +1,17 @@
+{{ if .Get "id" }}
+    {{ $id := .Get "id" }}
+    {{ with .Get "class" }}
+        <div id={{ $id }} class="{{ . }}"></div>
+    {{ else }}
+        <div id={{ $id }}></div>
+    {{ end }}
+    {{ $id = printf "#%s" $id }}
+    {{ with .Get "date" }}
+        <script>
+            if (!window.countdownMap) {
+                var countdownMap = {}
+            }
+            countdownMap["{{ $id }}"] = {{ . }};
+        </script>
+    {{ end }}
+{{ end }}

layouts/shortcodes/typeit.html

@@ -0,0 +1,15 @@
+{{ if .Get "id" }}
+    {{ $id := .Get "id" }}
+    {{ with .Get "class" }}
+        <div id={{ $id }} class="{{ . }}"></div>
+    {{ else }}
+        <div id={{ $id }}></div>
+    {{ end }}
+    {{ $id = printf "#%s" $id }}
+        <script>
+            if (!typeitMap) {
+                var typeitMap = {}
+            }
+            typeitMap["{{ $id }}"] = {{ .Inner | safeHTML }};
+        </script>
+{{ end }}