From 048491464ec186606b83385f8532a95d97958aa1 Mon Sep 17 00:00:00 2001
From: Colin <1580440944@qq.com>
Date: Fri, 6 May 2022 20:40:42 +0800
Subject: [PATCH] feat: js and css fallback

---
 layouts/partials/comments.html        | 22 +++++++++++++++++-----
 layouts/partials/extended_footer.html | 14 +++++++++-----
 layouts/partials/extended_head.html   | 26 ++++++++++++++++++++++++--
 3 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/layouts/partials/comments.html b/layouts/partials/comments.html
index 2df1923..e07f8f9 100644
--- a/layouts/partials/comments.html
+++ b/layouts/partials/comments.html
@@ -33,9 +33,21 @@
         gitalk.render('gitalk-container');
     }
 </script>
-<script defer src="{{ "assets/prism.js" | absURL }}"></script>
+<script defer 
+    onerror="fallbackJSloader('https://cdn.staticaly.com/gh/panr/hugo-theme-hello-friend/master/static/assets/prism.js')"
+    src="{{ "assets/prism.js" | absURL }}"></script>
 
-<script defer onload="tocbot_init()" src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
-<script defer onload="init_gitalk()" src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
\ No newline at end of file
+<script defer onload="tocbot_init()"
+    onerror="fallbackJSloader('https://cdn.staticfile.org/tocbot/4.9.1/tocbot.min.js','tocbot_init')"
+    src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.min.js"></script>
+<link rel="stylesheet" 
+onerror="fallbackCSSloader('https://cdn.staticfile.org/tocbot/4.9.1/tocbot.css')"
+
+href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.11.1/tocbot.css">
+<script defer onload="init_gitalk()"
+    onerror="fallbackJSloader('https://cdn.staticfile.org/gitalk/1.7.2/gitalk.min.js','init_gitalk')"
+    src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
+<link rel="stylesheet" 
+    onerror="fallbackCSSloader('https://cdn.staticfile.org/gitalk/1.7.2/gitalk.css')"
+    href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.css">
+<!-- no min css version fallback for gitalk css -->
\ No newline at end of file
diff --git a/layouts/partials/extended_footer.html b/layouts/partials/extended_footer.html
index 9f24c91..7883b45 100644
--- a/layouts/partials/extended_footer.html
+++ b/layouts/partials/extended_footer.html
@@ -1,14 +1,18 @@
-<script async src="{{ "assets/main.js" | absURL }}"></script>
-
 <script>
     function panguSpaing() {
         pangu.spacingElementByClassName('post');
         pangu.spacingElementByTagName('p');
-
+        // listen to any DOM change and automatically perform spacing via MutationObserver()
         document.addEventListener('DOMContentLoaded', () => {
-            // listen to any DOM change and automatically perform spacing via MutationObserver()
             pangu.autoSpacingPage();
         });
     }
 </script>
-<script async onload="panguSpaing()" src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
\ No newline at end of file
+
+<script async 
+onerror="fallbackJSloader('https://cdn.staticaly.com/gh/panr/hugo-theme-hello-friend/master/static/assets/main.js')"
+src="{{ "assets/main.js" | absURL }}"></script>
+
+<script async onload="panguSpaing()"
+    onerror="fallbackJSloader('https://cdn.staticfile.org/pangu/4.0.7/pangu.min.js','panguSpaing')"
+    src="https://cdn.jsdelivr.net/npm/pangu@4/dist/browser/pangu.min.js"></script>
\ No newline at end of file
diff --git a/layouts/partials/extended_head.html b/layouts/partials/extended_head.html
index 6924089..e70d253 100644
--- a/layouts/partials/extended_head.html
+++ b/layouts/partials/extended_head.html
@@ -1,9 +1,7 @@
-<script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22>
     <text y=%22.9em%22 font-size=%2290%22>👋</text></svg>">
 <script>
     function loadAgies() {
-        console.log('loaded');
         const aegis = new Aegis({
             id: 'gQ7V9SgjxZdOm1gy35', // 上报 id
             // uin: 'xxx', // 用户唯一 ID（可选）
@@ -12,9 +10,33 @@
             spa: true // spa 应用页面跳转的时候开启 pv 计算
         });
     }
+    function fallbackJSloader(url, loadedEvent) {
+        console.log('Error loading asset, using fallback url');
+        console.log('load asset from', url);
+
+        let script = document.createElement("script");
+        script.type = "text/javascript";
+        script.src = url;
+        script.async = true;
+        if (loadedEvent)
+            script.setAttribute('onload', `${loadedEvent}()`)
+        document.body.appendChild(script);
+    }
+    function fallbackCSSloader(url) {
+        console.log('Error loading asset, using fallback url');
+        console.log('load asset from', url);
+
+        var link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.type = "text/css";
+        link.href = url;
+        let head = document.getElementsByTagName("head")[0];
+        head.appendChild(link);
+    }
 </script>
 
 <script async onload="loadAgies()" src="https://cdn-go.cn/aegis/aegis-sdk/latest/aegis.min.js"></script>
+<script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
 <link rel="preconnect" href="https://cdnjs.cloudflare.com">
 <link rel="preconnect" href="https://cdn.jsdelivr.net">
 <meta http-equiv="x-dns-prefetch-control" content="on">