Merge pull request #769 from naher94/development

Resources Surprise Me Tag Added

_config.yml

@@ -13,7 +13,7 @@ description: > # this means to ignore newlines until "baseurl:"
 
 baseurl: "" # the subpath of your site, e.g. /blog
 url: "https://rehanbutt.com" # the base hostname & protocol for your site
-version: 8.31.0
+version: 8.32.0
 version-naming: [Apricot, Blackcurrent, Coconut, Dragonfruit, Elderberry, Fig, Guava, Honeydew]
 
 # Build settings

_includes/foot.html

@@ -13,6 +13,10 @@
   <script src="/js/easter-egg-achievements.js" type="text/javascript"></script>
 {% endif %}
 
+{% if page.url == '/resources' %}
+  <script src="/js/resources.js" type="text/javascript"></script>
+{% endif %}
+
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=G-XQEN9JC89E"></script>
 <script>

_sass/resources.scss

@@ -269,6 +269,16 @@ h1{
       &:hover{
         background-color: semantic-color(actionable-pill-hover);
       }
+      &.surprise-me{
+        i{
+          margin-inline-end: 0.25em;
+        }
+        &:hover{
+          background-image: linear-gradient(90deg, #00a2e2 0%, #1bad6b 20%, #fec609 40%, #e92687 60%, #6d358d 80%, #00a2e2 100%);
+          background-size: 200% auto;
+          animation: rainbow 3s linear infinite;
+        }
+      }
     }
   }
 }

js/resources.js

@@ -0,0 +1,34 @@
+let hrefs; // Declare in the outer scope
+let randomHref;
+
+document.addEventListener('DOMContentLoaded', () => {
+  const tagsContainer = document.querySelector('.tags-container');
+
+  // Populate hrefs when the page loads
+  if (tagsContainer) {
+    const links = tagsContainer.querySelectorAll('a');
+    hrefs = Array.from(links).map(link => link.href);
+  }
+
+  const linkElement = document.querySelector('.resource-surprise-me-button');
+
+  if (linkElement) {
+    // Define the function to update the link
+    const updateRandomLink = () => {
+      const randomIndex = Math.floor(Math.random() * hrefs.length);
+      randomHref = hrefs[randomIndex];
+      randomHref = randomHref.split('#')[1] ? `#${randomHref.split('#')[1]}` : '';
+      linkElement.href = randomHref; // Update the link's href
+    };
+
+    // Run the function once on page load to populate the link
+    updateRandomLink();
+
+    // Listen for click events on the link
+    linkElement.addEventListener('click', (event) => {
+      setTimeout(() => {
+        updateRandomLink(); // Update the link after the delay
+      }, 1000);
+    });
+  }
+});

resources.html

@@ -13,7 +13,6 @@ <h1>Resources</h1>
 {%- comment -%}collect all the unique tags from the resources and articles{%- endcomment -%}
 {% assign allresources = site.resources | concat: site.articles %}
 {% assign alltags = allresources | map: "tags" | uniq | sort %}
-
 <section class="cell tag-section">
   <h2 class="visually-hidden">Categories</h2>
   <div class="tags-container cell">
@@ -24,6 +23,12 @@ <h2 class="visually-hidden">Categories</h2>
         </div>
       </a>
     {% endfor %}
+     <a href="#" class="resource-surprise-me-button">
+      <div class="tag surprise-me">
+        <i class="fa-solid fa-wand-magic-sparkles"></i>
+        surprise me
+      </div>
+     </a>
   </div>
 </section>