hugo-bearblog : loading javascript,stylesheet out of HTML page (no unsafe CSP)

assets/css/style.css

@@ -1,4 +1,3 @@
-<style>
 body {
     font-family: Verdana, sans-serif;
     margin: auto;
@@ -171,5 +170,3 @@
 .dark-mode .helptext {
     color: #aaa;
 }
-
-</style>

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');
+}

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()
+}

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;

layouts/_default/baseof.html

@@ -15,8 +15,13 @@
   {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
 
-  {{- partial "style.html" . -}}
+  {{- /* CSS stylesheet */}}
-  {{- partial "script.html" . -}}
+  {{- $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
@@ -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>
 

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}}

layouts/partials/random_color.html

@@ -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>

layouts/partials/script.html

@@ -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>

layouts/partials/script_bottom.html

@@ -1,5 +0,0 @@
-<script>
-    if (localStorage.getItem('dark-mode') === 'true') {
-        darkmode_enable()
-    }
-</script>