show quotes on frontpage

lib/public/javascript/crafatar.js

@@ -1,6 +1,42 @@
 var valid_user_id = /^[0-9a-f-A-F-]{32,36}$/; // uuid
 var xhr = new XMLHttpRequest();
 
+var quotes = [
+  ["Crafatar is the best at what it does.", "Shotbow Network", "https://twitter.com/ShotbowNetwork/status/565201303555829762"],
+  ["Crafatar seems to stand out from others", "Dabsunter", "https://github.com/crafatar/crafatar/wiki/What-people-say-about-Crafatar"],
+  ["I can’t tell you how much Crafatar helped me along the way! You guys do some amazing work.", "Luke Chatton", "https://github.com/lukechatton"],
+  ["It's just awesome! Keep up the good work", "Dannyps", "https://forums.spongepowered.org/t/title-cant-be-empty/4964/22"],
+  ["It's one of the few services that actually does HTTP header caching correctly", "confuser", "https://github.com/BanManagement/BanManager-WebUI/issues/16#issuecomment-73230674"],
+  ["It's so beautiful. <3", "FerusGrim", "https://twitter.com/FerusGrim/status/642824817683656704"],
+  ["Love it! It's great!", "Reddit User", "https://reddit.com/comments/2nth0j/-/cmh5771"],
+  ["Such a useful service!", "Tim Z, NameMC", "https://twitter.com/CoderTimZ/status/602682146793349120"],
+  ["Thanks for providing us with such a reliable service :)", "BeanBlockz", "https://twitter.com/BeanBlockz/status/743927789422845952"],
+  ["This is excellent for my website! Good work.", "cyanide43", "https://reddit.com/comments/2nth0j/-/cmgpq85"],
+  ["This is really cool!", "AlexWebber", "https://forums.spongepowered.org/t/crafatar-a-new-minecraft-avatar-service/4964/19"],
+  ["This really is looking amazing. Absolutely love it!", "Enter_", "https://forums.spongepowered.org/t/crafatar-a-new-minecraft-avatar-service/4964/21"],
+  ["We couldn't believe how flawless your API is, Good job!", "SenceServers", "https://twitter.com/SenceServers/status/697132506626265089"],
+  ["WOW, Crafatar is FAST", "Rileriscool", "https://twitter.com/rileriscool/status/562057234986065921"],
+  ["You deserve way more popularity", "McSlushie", "https://github.com/crafatar/crafatar/wiki/Credit/a8f37373531b1d2c2cb3557ba809542a2ed81626"],
+  ["You do excellent work on Crafatar and are awesome! A very polished, concise & clean project.", "DrCorporate", "https://reddit.com/comments/2r1ns6/-/cnbq5f1"]
+];
+// shuffle quotes
+for (i = quotes.length -1; i > 0; i--) {
+  var a = Math.floor(Math.random() * i);
+  var b = quotes[i];
+  quotes[i] = quotes[a];
+  quotes[a] = b;
+}
+
+var current_quote = 0;
+
+function changeQuote() {
+  var elem = document.querySelector("#quote");
+  var quote = quotes[current_quote];
+  elem.innerHTML = "<b>“" + quote[0] + "”</b><br>― <i>" + quote[1] + "</i>";
+  elem.href = quote[2];
+  current_quote = (current_quote + 1) % quotes.length;
+}
+
 xhr.onload = function() {
   var response = JSON.parse(xhr.responseText);
   var status = {};
@@ -23,12 +59,14 @@ xhr.onload = function() {
 
 document.addEventListener("DOMContentLoaded", function(event) {
   var avatars = document.querySelector("#avatar-wrapper");
+  // shuffle avatars
   for (var i = 0; i < avatars.children.length; i++) {
-    // shake 'em on down!
-    // https://stackoverflow.com/a/11972692/2517068
     avatars.appendChild(avatars.children[Math.random() * i | 0]);
   }
 
+  setInterval(changeQuote, 5000);
+  changeQuote();
+
   var tryit = document.querySelector("#tryit");
   var tryname = document.querySelector("#tryname");
   var images = document.querySelectorAll(".tryit");

lib/public/stylesheets/style.css

@@ -58,6 +58,22 @@ a.sponsor-item {
   background: #fff8ec !important;
 }
 
+#quote-wrapper {
+  line-height: 9.5em;
+}
+
+#quote {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: initial;
+  background: #d4e7ff;
+  border-color: #94cbfc;
+}
+
+#quote:hover {
+  background: #dcedff;
+}
+
 .alert {
   font-size: 1rem;
 }

lib/views/index.html.ejs

@@ -285,7 +285,12 @@
         <a rel="nofollow" href="https://mcuuid.net/" target="_blank" class="list-group-item">MCUUID</a>
         <a href="https://github.com/crafatar/crafatar/wiki/Who-uses-crafatar%3F" target="_blank" class="list-group-item">and many more…</a>
       </div>
-      <p>See also: <a rel="nofollow" href="https://github.com/crafatar/crafatar/wiki/What-people-say-about-Crafatar" target="_blank">what users say</a> about Crafatar</p>
+      <hr>
+      <h4>Quotes</h4>
+      <div id="quote-wrapper" class="list-group">
+        <a id="quote" rel="nofollow" target="_blank" class="list-group-item"></a>
+      </div>
+      <p>See <a rel="nofollow" href="https://github.com/crafatar/crafatar/wiki/What-people-say-about-Crafatar" target="_blank">all quotes</a>.</p>
       <hr>
       <h4>Crafatar Tools & Plugins</h4>
       <div class="list-group">