have random posts in the flame button

_layouts/default.html

@@ -17,7 +17,7 @@
 <link rel="icon" type="image/png" href="{{ site.url }}/touch-icon.png" sizes="192x192">
 <link rel="shortcut icon" href="{{ site.url }}{{ site.icon }}" type="image/png" />
 <noscript><link rel="stylesheet" href="{{ relBase }}/assets/css/noscripts-20201215.css" /></noscript>
-
+<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
 <meta name="theme-color" content="{{ site.data.colors.bg }}"/>
 
 

_layouts/post.html

@@ -2,7 +2,7 @@
 layout: default
 ---
 {% if page.category == 'releases' %}
-<script src="{{ relBase }}/assets/js/jquery-3.5.1.min.js"></script>
+
 {% include header.html %}
 
 <section id="play">

index.html

@@ -28,6 +28,54 @@ apps:
     external: false
 ---
 
+<script type="text/javascript">
+
+  function generateRandomPosts()
+  {
+      $.getJSON("/posts.json", function(data) {
+          console.log("[posts.json loaded for random posts]");
+
+          var postsCount = data.length;
+          var posts = data;
+
+          var randomIndexUsed = [];
+          var counter = 0;
+          var numberOfPosts = 1;
+
+          var divRandomPosts = $("#random_posts");
+
+          while (counter < numberOfPosts)
+          {
+              var randomIndex = Math.floor(Math.random() * postsCount);
+
+              if (randomIndexUsed.indexOf(randomIndex) == "-1")
+              {
+                  var postHREF = posts[randomIndex].href;
+                  var postTitle = posts[randomIndex].title;
+
+                  if (counter == (numberOfPosts - 1))
+                  {
+                      divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+                  }
+                  else
+                  {
+                      divRandomPosts.append('<a class="button" href="' + postHREF + '">🔥</a>');
+                  }
+
+                  randomIndexUsed.push(randomIndex);
+
+                  counter++;
+              }
+          }
+      });
+  }
+
+  $(document).ready(function() {
+      generateRandomPosts();
+  });
+
+</script>
+
 {% include relBase.html %}
 <header class="hero" id="top"
   style="background-image: url({{ page.image }});">
@@ -46,7 +94,7 @@ apps:
         <ul>{% for app in page.apps %}
           <li><a href="{{ app.link }}" {% if app.external == true %}rel="noopener" target="_blank"{% endif %} class="button">{{ app.icon }}</a></li>
           {% endfor %}
-          <li>{% for post in site.categories.releases limit: 1%}<a href="{{ post.url }}#play" class="button">🔥</a>{% endfor %}</li>
+          <li id="random_posts"></li>
         </ul>
       </div>
     </div>

posts.json

@@ -0,0 +1,15 @@
+---
+layout: nil
+---
+[
+    {% assign albums = site.categories.releases %}
+    {% assign tracks = site.tracks %}
+
+    {% assign random = albums | concat: tracks %}
+{% for post in random %}
+{
+    "title": "{{ post.title }}",
+    "href": "{{ post.url }}"
+}{% unless forloop.last %},{% endunless %}
+{% endfor %}
+]