wah-su.github.io/public/js/cards.js

const cards = [
  {
    image: "/public/images/vaultwarden.png",
    name: "Vaultwarden",
    description: "Unofficial Bitwarden compatible server.",
    about: "https://github.com/dani-garcia/vaultwarden",
    url: "https://vault.wah.su",
  },
  {
    image: "/public/images/nextcloud.png",
    name: "Nextcloud",
    description:
      "productivity suite, offering file sharing and collaboration tools.",
    about: "https://nextcloud.com/",
    url: "https://cloud.wah.su",
  },
  {
    image: "/public/images/immich.png",
    name: "Immich",
    description: "platform for managing and browsing your photos.",
    about: "https://immich.app",
    url: "https://photos.wah.su",
  },
  {
    image: "/public/images/zipline.png",
    name: "Zipline",
    description: "image uploading with ShareX compatibility.",
    about: "https://zipline.diced.sh/",
    url: "https://x.wah.su",
  },
];
const services = document.getElementById("services");

function renderCards() {
  const theme = document.getElementById("body").classList[0];
  services.innerHTML = "";
  for (let index = 0; index < cards.length; index++) {
    const image_name = cards[index].image.split(".")[0];
    const image_ext = cards[index].image.split(".")[1];
    const template = `
              <img class="rounded-t-lg object-cover h-[192px] w-full" src="${image_name}-${theme}.${image_ext}" alt="" />
              <div class="p-5">
                  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-800 dark:text-white">${cards[index].name}
                  </h5>
                  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">${cards[index].description}
                  </p>
                  <div class="flex gap-1 items-center justify-center flex-wrap lg:flex-nowrap lg:justify-start">
                      <a href="${cards[index].about}" target="_blank"
                          class="w-full inline-flex justify-center items-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
                          Read more
                      </a>
                      <a href="${cards[index].url}"
                          class="w-full inline-flex justify-center items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                          open
                          <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                  stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
                          </svg>
                      </a>
                  </div>
              </div>
          `;

    const element = document.createElement("div");
    element.className =
      "max-w-[298px] bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700";
    element.innerHTML = template;

    services.appendChild(element);
  }
}
window.onload = renderCards();