hugo-bearblog : add _index.md for blog and add random color gimmick

layouts/_default/list.html

@@ -6,6 +6,8 @@
     <a href="{{ "blog" | relURL }}">Remove filter</a>
   </small>
   {{ end }}
+  <!-- blog/_index.md content will goes here. -->
+  {{ .Content }}
   <ul class="blog-posts">
     {{ range .Pages }}
     <li>
@@ -16,7 +18,7 @@
           </time>
         </i>
       </span>
-      <a href="{{ .Permalink }}">{{ .Title }}</a>
+      <a class="random-color blog-link" href="{{ .Permalink }}">{{ .Title }}</a>
     </li>
     {{ else }}
     <li>
@@ -24,6 +26,9 @@
     </li>
     {{ end }}
   </ul>
+
+  {{- partial "random_color.html" -}}
+
   {{ if .Data.Singular }}
   {{else}}
     <small>

layouts/partials/random_color.html

@@ -0,0 +1,27 @@
+<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/style.html

@@ -126,6 +126,10 @@
     color: #8b6fcb;
   }
 
+  .blog-link {
+    text-decoration: none;
+  }
+
   .dark-mode {
       background-color: #333;
       color: #ddd;