From b46dab5ba6a3979cafb04762ff7721524bc559f0 Mon Sep 17 00:00:00 2001
From: minoplhy <c@3qx.nl>
Date: Sun, 10 Mar 2024 11:47:53 +0700
Subject: [PATCH] hugo-bearblog : loading javascript,stylesheet out of HTML
 page (no unsafe CSP)

---
 .../style.html => assets/css/style.css        | 181 +++++++++---------
 assets/js/darkmode.js                         |  23 +++
 assets/js/darkmode_load.js                    |   5 +
 assets/js/random_color.js                     |  25 +++
 layouts/_default/baseof.html                  |  14 +-
 layouts/_default/list.html                    |   5 +-
 layouts/partials/random_color.html            |  27 ---
 layouts/partials/script.html                  |  25 ---
 layouts/partials/script_bottom.html           |   5 -
 9 files changed, 157 insertions(+), 153 deletions(-)
 rename layouts/partials/style.html => assets/css/style.css (59%)
 create mode 100644 assets/js/darkmode.js
 create mode 100644 assets/js/darkmode_load.js
 create mode 100644 assets/js/random_color.js
 delete mode 100644 layouts/partials/random_color.html
 delete mode 100644 layouts/partials/script.html
 delete mode 100644 layouts/partials/script_bottom.html

diff --git a/layouts/partials/style.html b/assets/css/style.css
similarity index 59%
rename from layouts/partials/style.html
rename to assets/css/style.css
index 9e16279..75019fb 100644
--- a/layouts/partials/style.html
+++ b/assets/css/style.css
@@ -1,5 +1,4 @@
-<style>
-  body {
+body {
     font-family: Verdana, sans-serif;
     margin: auto;
     padding: 20px;
@@ -10,166 +9,164 @@
     overflow-wrap: break-word;
     line-height: 1.5;
     color: #444;
-  }
+}
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  strong,
-  b {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong,
+b {
     color: #222;
-  }
+}
 
-  a {
+a {
     color: #3273dc;
     /*color: #ff5e6c;*/
-  }
+}
 
-  .title {
+.title {
     text-decoration: none;
     border: 0;
-  }
+}
 
-  .title span {
+.title span {
     font-weight: 400;
-  }
+}
 
-  nav a {
+nav a {
     margin-right: 10px;
-  }
+}
 
-  textarea {
+textarea {
     width: 100%;
     font-size: 16px;
-  }
+}
 
-  input {
+input {
     font-size: 16px;
-  }
+}
 
-  content {
+content {
     line-height: 1.6;
-  }
+}
 
-  table {
+table {
     width: 100%;
-  }
+}
 
-  img {
+img {
     max-width: 100%;
-  }
+}
 
-  code {
+code {
     padding: 2px 5px;
     background-color: #f2f2f2;
-  }
+}
 
-  pre code {
+pre code {
     color: #222;
     display: block;
     padding: 20px;
     white-space: pre-wrap;
     font-size: 14px;
     overflow-x: auto;
-  }
+}
 
-  div.highlight pre {
+div.highlight pre {
     background-color: initial;
     color: initial;
-  }
+}
 
-  div.highlight code {
+div.highlight code {
     background-color: unset;
     color: unset;
-  }
+}
 
-  blockquote {
+blockquote {
     border-left: 1px solid #999;
     color: #222;
     padding-left: 20px;
     font-style: italic;
-  }
+}
 
-  footer {
+footer {
     padding: 25px;
     text-align: center;
-  }
+}
 
-  .helptext {
+.helptext {
     color: #777;
     font-size: small;
-  }
+}
 
-  .errorlist {
+.errorlist {
     color: #eba613;
     font-size: small;
-  }
+}
 
-  /* blog posts */
-  ul.blog-posts {
+/* blog posts */
+ul.blog-posts {
     list-style-type: none;
     padding: unset;
-  }
+}
 
-  ul.blog-posts li {
+ul.blog-posts li {
     display: flex;
-  }
+}
 
-  ul.blog-posts li span {
+ul.blog-posts li span {
     flex: 0 0 130px;
-  }
+}
 
-  ul.blog-posts li a:visited {
+ul.blog-posts li a:visited {
     color: #8b6fcb;
-  }
+}
 
-  .blog-link {
+.blog-link {
     text-decoration: none;
-  }
+}
 
-  .dark-mode {
-      background-color: #333;
-      color: #ddd;
-    }
-
-  .dark-mode h1,
-  .dark-mode h2,
-  .dark-mode h3,
-  .dark-mode h4,
-  .dark-mode h5,
-  .dark-mode h6,
-  .dark-mode strong,
-  .dark-mode b {
-    color: #eee;
-  }
-
-  .dark-mode a {
-    color: #8cc2dd;
-  }
-
-  .dark-mode code {
-    background-color: #777;
-  }
-
-  .dark-mode pre code {
+.dark-mode {
+    background-color: #333;
     color: #ddd;
-  }
+}
 
-  .dark-mode blockquote {
+.dark-mode h1,
+.dark-mode h2,
+.dark-mode h3,
+.dark-mode h4,
+.dark-mode h5,
+.dark-mode h6,
+.dark-mode strong,
+.dark-mode b {
+    color: #eee;
+}
+
+.dark-mode a {
+    color: #8cc2dd;
+}
+
+.dark-mode code {
+    background-color: #777;
+}
+
+.dark-mode pre code {
+    color: #ddd;
+}
+
+.dark-mode blockquote {
     color: #ccc;
-  }
+}
 
-  .dark-mode textarea,
-  .dark-mode input {
+.dark-mode textarea,
+.dark-mode input {
     background-color: #252525;
     color: #ddd;
-  }
+}
 
-  .dark-mode .helptext {
+.dark-mode .helptext {
     color: #aaa;
-  }
-
-</style>
+}
\ No newline at end of file
diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js
new file mode 100644
index 0000000..109db12
--- /dev/null
+++ b/assets/js/darkmode.js
@@ -0,0 +1,23 @@
+if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
+    localStorage.setItem('dark-mode', 'true');
+}
+
+function darkmode() {
+    if (localStorage.getItem('dark-mode') === 'false') {
+        darkmode_enable();
+    } else if (localStorage.getItem('dark-mode') === null) {
+        darkmode_enable();
+    } else {
+        darkmode_disable();
+    }
+}
+
+function darkmode_enable()  {
+    document.body.classList.add("dark-mode");
+    localStorage.setItem('dark-mode', 'true');
+}
+
+function darkmode_disable() {
+    document.body.classList.remove("dark-mode");
+    localStorage.setItem('dark-mode', 'false');
+}
\ No newline at end of file
diff --git a/assets/js/darkmode_load.js b/assets/js/darkmode_load.js
new file mode 100644
index 0000000..cf35254
--- /dev/null
+++ b/assets/js/darkmode_load.js
@@ -0,0 +1,5 @@
+/* darkmode_enable is defined in darkmode.js(should be in the same directory as this file)  */
+/* Must be executed after document.body is finished, else there would be error :)           */
+if (localStorage.getItem('dark-mode') === 'true') {
+    darkmode_enable()
+}
\ No newline at end of file
diff --git a/assets/js/random_color.js b/assets/js/random_color.js
new file mode 100644
index 0000000..617defd
--- /dev/null
+++ b/assets/js/random_color.js
@@ -0,0 +1,25 @@
+const links = document.querySelectorAll('.random-color');
+
+// To avoid too bright and too dark color being generated
+function getRandomColor(minBrightness = 100, maxBrightness = 230) {
+    // Generate random color components within a specific brightness range
+    let red = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
+    let green = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
+    let blue = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
+
+    // Convert components to hexadecimal string format
+    red = red.toString(16).padStart(2, '0');
+    green = green.toString(16).padStart(2, '0');
+    blue = blue.toString(16).padStart(2, '0');
+
+    return `#${red}${green}${blue}`;
+}
+
+
+function setRandomColors() {
+    links.forEach(link => {
+        link.style.color = getRandomColor();
+    });
+}
+
+window.onload = setRandomColors;
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index d175160..2c3c000 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -15,9 +15,14 @@
   {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
 
-  {{- partial "style.html" . -}}
-  {{- partial "script.html" . -}}
+  {{- /* CSS stylesheet */}}
+  {{- $stylesheet := (resources.Get "css/style.css") | resources.Minify | fingerprint }}
+  <link crossorigin="anonymous" href="{{ $stylesheet.RelPermalink }}" integrity="{{ $stylesheet.Data.Integrity }}" rel="preload stylesheet" as="style">
 
+  {{- /* Javascript */}}
+  {{- $darkmode_script := (resources.Get "js/darkmode.js") | resources.Minify | fingerprint}}
+  <script defer crossorigin="anonymous" src="{{ $darkmode_script.RelPermalink }}" integrity="{{ $darkmode_script.Data.Integrity }}" async></script>
+  
   <!-- A partial to be overwritten by the user.
   Simply place a custom_head.html into
   your local /layouts/partials-directory -->
@@ -35,10 +40,13 @@
     {{- partial "footer.html" . -}}
   </footer>
 
+  {{- /* Bottom Javascript */}}
+  {{- $darkmode_load_script := (resources.Get "js/darkmode_load.js") | resources.Minify | fingerprint}}
+  <script defer crossorigin="anonymous" src="{{ $darkmode_load_script.RelPermalink }}" integrity="{{ $darkmode_load_script.Data.Integrity }}"></script>
+  
   <!-- A partial to be overwritten by the user.
   Simply place a custom_body.html into
   your local /layouts/partials-directory -->
-  {{- partial "script_bottom.html" -}}
   {{- partial "custom_body.html" . -}}
 </body>
 
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 4243521..f1ad886 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -27,7 +27,10 @@
     {{ end }}
   </ul>
 
-  {{- partial "random_color.html" -}}
+  {{- /* Random Color Script */}}
+  {{- $random_color_script := (resources.Get "js/random_color.js") | resources.Minify | fingerprint}}
+  <script defer crossorigin="anonymous" src="{{ $random_color_script.RelPermalink }}" integrity="{{ $random_color_script.Data.Integrity }}" async></script>
+
 
   {{ if .Data.Singular }}
   {{else}}
diff --git a/layouts/partials/random_color.html b/layouts/partials/random_color.html
deleted file mode 100644
index 34b693d..0000000
--- a/layouts/partials/random_color.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<script>
-    const links = document.querySelectorAll('.random-color');
-
-    // To avoid too bright and too dark color being generated
-    function getRandomColor(minBrightness = 100, maxBrightness = 230) {
-        // Generate random color components within a specific brightness range
-        let red = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
-        let green = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
-        let blue = Math.floor(Math.random() * (maxBrightness - minBrightness) + minBrightness);
-  
-        // Convert components to hexadecimal string format
-        red = red.toString(16).padStart(2, '0');
-        green = green.toString(16).padStart(2, '0');
-        blue = blue.toString(16).padStart(2, '0');
-  
-        return `#${red}${green}${blue}`;
-    }
-
-
-    function setRandomColors() {
-        links.forEach(link => {
-            link.style.color = getRandomColor();
-        });
-    }
-
-    window.onload = setRandomColors;
-</script>
\ No newline at end of file
diff --git a/layouts/partials/script.html b/layouts/partials/script.html
deleted file mode 100644
index 9add0c5..0000000
--- a/layouts/partials/script.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<script>
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches && localStorage.getItem('dark-mode') === null) {
-        localStorage.setItem('dark-mode', 'true');
-    }
-    
-    function darkmode() {
-        if (localStorage.getItem('dark-mode') === 'false') {
-            darkmode_enable();
-        } else if (localStorage.getItem('dark-mode') === null) {
-            darkmode_enable();
-        } else {
-            darkmode_disable();
-        }
-    }
-
-    function darkmode_enable()  {
-        document.body.classList.add("dark-mode");
-        localStorage.setItem('dark-mode', 'true');
-    }
-
-    function darkmode_disable() {
-        document.body.classList.remove("dark-mode");
-        localStorage.setItem('dark-mode', 'false');
-    }
-</script>
\ No newline at end of file
diff --git a/layouts/partials/script_bottom.html b/layouts/partials/script_bottom.html
deleted file mode 100644
index 7a2b18e..0000000
--- a/layouts/partials/script_bottom.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-    if (localStorage.getItem('dark-mode') === 'true') {
-        darkmode_enable()
-    }
-</script>
\ No newline at end of file