have random posts in the flame button

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>