nelle-observer/frontend/public/scripts/badges.js

/*
 * have the default list, then if javascript is on,
 * turn all badgeDefault* to display: none;, then set all badge* display: initial;.
 * and randomize
 *
 * all html values will have their own const, and will be placed inside the divs in a random order.
 * */

/*
 *
 *
 * */

const elke =
  '<a href="https://elke.cafe/"><img class="badge" src="/assets/images/badges/friends/elke.cafe.gif" alt="dark static background, on the left side, a triquetra, in yellow/orange text \'elke.cafe\'" loading="lazy"></a>';
const tomo =
  '<a href="https://azumanga.gay/"><img class="badge" src="/assets/images/badges/friends/kaitbutton.png" alt="kait" loading="lazy"></a>\n';
const lily =
  '<a href="https://lilysthings.org/"><img class="badge" src="/assets/images/badges/friends/lilysthings.png" alt="the word \'lily!!\' next to a microwave" loading="lazy"></a>\n';
const eris =
  '<a href="https://eris.meows.gay/"><img class="badge" src="/assets/images/badges/friends/eris.png" alt="purple background, with pink text that reads \'eris\' and a cat" loading="lazy"></a>\n';
const zvava =
  '<a href="https://zvava.org/"><img class="badge" src="/assets/images/badges/friends/zvava.org.png" alt="black background, with a slanted dark purple grid, and a purple outline, pink text saying \'zvava.org\'" loading="lazy"></a>\n';
const mira =
  '<a href="https://csillagpor.net"><img class="badge" src="/assets/images/badges/friends/mira-button.png" alt="miras button\'" loading="lazy"></a>\n';
const tempest =
  '<a href="https://tempest.dev/"><img class="badge" src="/assets/images/badges/friends/tempest.dev.png" alt="badge for tempest.dev\'" loading="lazy"></a>\n';
const disarray =
  '<a href="https://disarray.sh/"><img class="badge" src="/assets/images/badges/friends/disarray.sh.png" alt="jade disarray site" loading="lazy"></a>\n';
const astrid =
  '<a href="https://astrid.tech/"><img class="badge" src="/assets/images/badges/friends/astrid.tech.png" alt="astrid dot tech" loading="lazy"></a>\n';
const constellatory =
  '<a href="https://constellatory.net/"><img class="badge" src="/assets/images/badges/friends/constellatory.net.png" alt="constellatory" loading="lazy"></a>\n';
const nbsp =
  '<a href="https://enby.space/"><img class="badge" src="/assets/images/badges/friends/nbsp.gif" alt="ralsei clapping next to the text \'nbsp\'" loading="lazy"></a>\n';
const micro =
  '<a href="https://micro.pages.gay/"><img class="badge" src="/assets/images/badges/friends/niko.png" alt="prototype from oneshot giviing a :3c expression with a darker background and Micro in purple 500 from tailwindcss on the right with dithering between the two sections" loading="lazy"></a>\n';
const loveshock =
  '<a href="https://loveshock.xyz/"><img class="badge" src="/assets/images/badges/friends/loveshock.gif" alt="dark background, with a curved grid/web, with the text \'vist the jukebox at loveshock.xyz\'" loading="lazy"></a>\n';
const pancakes =
  '<a href="https://trypancakes.com/"><img class="badge" src="/assets/images/badges/friends/pancakes.png" alt="purple background, with a drawing of a cat, to the left of the cat is the underlined word \'pancakes\'" loading="lazy"></a>\n';
const sophari =
  '<a href="https://sophari.org/"><img class="badge" src="https://sophari.org/img/sophari.gif" alt="black background, with white borders and text, colorful snow-like substance falling down, text says \'Sophari.org\' " loading="lazy"></a>\n';

const badges = [
  elke,
  tomo,
  lily,
  eris,
  zvava,
  mira,
  tempest,
  disarray,
  astrid,
  constellatory,
  nbsp,
  micro,
  loveshock,
  pancakes,
  sophari,
];

function shuffle(array) {
  var currentIndex = array.length;
  var temporaryValue;
  var randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}

const shuffledBadges = shuffle(badges);

for (var i = 0; i < 3; i++) {
  document.getElementById("badge" + (i + 1)).innerHTML = shuffledBadges[i];
}