Merge pull request #60 from anishkn04/sfd-2024

refactor: Use a constant base URL instead of whole

js/activities.js

@@ -1,3 +1,5 @@
+const baseActivitiesURL = "https://raw.githubusercontent.com/noskofficial/sfd-resources/refs/heads/main/nosk-sfd-2024"
+
 document.addEventListener("DOMContentLoaded", async () => {
   const clkContainer = document.getElementById("clickables");
   const colorForTitles = ["#E4554E", "#000000", "#009042", "#FFCD29"];
@@ -17,24 +19,24 @@ document.addEventListener("DOMContentLoaded", async () => {
       cCard += clickGen(activity, colorForTitles[i], colorForButtons[i]);
       i++;
     });
-  } catch {
-    console.error();
+  } catch(error) {
+    console.error(error);
   }
   document.getElementById("unclickables").innerHTML = ucCard;
   document.getElementById("clickables").innerHTML = cCard;
 });
 
 const unclickGen = (activity) => {
   return `<div class='bg-white rounded-2xl w-full p-5 pt-8 border-[0.2px] border-[#787676] transition-all drop-shadow-lg hover:drop-shadow-2xl cursor-default flex flex-col gap-4  items-center h-full ${activity.title == "Cake Cutting" ? " sm:hidden lg:flex " : ""}'>
-        <img src="${activity.image}" alt="${activity.title}" class="h-20 w-20">
+        <img src="${baseActivitiesURL+activity.image}" alt="${activity.title}" class="h-20 w-20">
         <div class="font-bold text-xl md:text-2xl text-center">${activity.title}</div>
         <div class="font-light text-sm md:text-base text-center">${activity.description}</div>
     </div>`;
 };
 const clickGen = (activity, titleColor, buttonColor) => {
   return `<div class='bg-white rounded-2xl w-full p-5 flex flex-col gap-4 drop-shadow-lg transition-all hover:drop-shadow-2xl cursor-default border-[0.2px] border-[#787676] items-center h-full ${activity.title == "Cake Cutting" ? " sm:hidden lg:flex " : ""}'>
         <div class="flex w-full items-center">
-            <img src="${activity.image}" alt="${activity.title}" class="h-20 w-20">
+            <img src="${baseActivitiesURL+activity.image}" alt="${activity.title}" class="h-20 w-20">
             <div class="font-bold text-xl md:text-2xl flex-1 text-center" style="color: ${titleColor}">${activity.title}</div>
         </div>
         <div class="font-light text-sm md:text-base flex-1 text-center">${activity.description}</div>

js/gallery.js

@@ -1,3 +1,5 @@
+const baseGalleryURL = "https://raw.githubusercontent.com/noskofficial/sfd-resources/refs/heads/main/nosk-sfd-2024"
+
 // Fetch the gallery data from the JSON file and insert it into the HTML
 fetch(
   "https://raw.githubusercontent.com/noskofficial/sfd-resources/refs/heads/main/nosk-sfd-2024/data/gallery.json",
@@ -16,7 +18,7 @@ fetch(
       );
 
       galleryItem.innerHTML = `
-                <img class="w-full h-64 object-cover" src="${item.image}" alt="${item.description}">
+                <img class="w-full h-64 object-cover" src="${baseGalleryURL+item.image}" alt="${item.description}">
                 <div class="p-4">
                     <p class="font-semibold text-lg mb-2">${item.description}</p>
                 </div>

js/members.js

@@ -1,9 +1,10 @@
+const baseMembersURL = "https://raw.githubusercontent.com/noskofficial/sfd-resources/refs/heads/main/nosk-sfd-2024"
 // Function to create cards
 function createCard(member) {
   return `
     <div id="members-card" class="relative w-72 rounded-3xl shadow-lg overflow-hidden">
                 <!-- Background Image -->
-                <img id="profile" src="${member.image}" alt="${member.name}" class="w-full rounded-3xl h-96 object-cover border-8 border-white">
+                <img id="profile" src="${baseMembersURL+member.image}" alt="${member.name}" class="w-full rounded-3xl h-96 object-cover border-8 border-white">
                 
                 <!-- Overlay with text -->
                 <div class="absolute text-center bottom-0 left-0 w-full bg-black bg-opacity-60 text-white p-4">

js/partners.js

@@ -1,3 +1,5 @@
+const basePartnersURL = "https://raw.githubusercontent.com/noskofficial/sfd-resources/refs/heads/main/nosk-sfd-2024"
+
 async function partnersLoader() {
   const res = await fetch(
     "https://raw.githubusercontent.com/noskofficial/sfd-resources/refs/heads/main/nosk-sfd-2024/data/sponsors.json",
@@ -43,7 +45,7 @@ async function partnersLoader() {
         <div class="sponsor-image max-w-full max-h-full min-h-36 my-auto flex items-center justify-center">
           <a href="${link}">
             <img
-              src="${image}"
+              src="${basePartnersURL+image}"
               alt="${name}"
               class="max-w-full max-h-full  min-w-48 object-cover"
             />

js/sponsors.js

@@ -1,3 +1,5 @@
+const baseSponsorsURL = "https://raw.githubusercontent.com/noskofficial/sfd-resources/refs/heads/main/nosk-sfd-2024"
+
 document.addEventListener("DOMContentLoaded", async () => {
   let spCards = "";
 
@@ -9,7 +11,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   const sponsorCount = data.length;
   data.forEach((sponsor) => {
     spCards += `<a target="_blank" href="${sponsor.link}" class="w-full h-full has-tooltip min-h-48 bg-white drop-shadow-lg hover:drop-shadow-2xl border-[0.2px] border-[#787676] p-8 flex justify-center items-center rounded-lg ">
-            <abbr title="${sponsor.name}"><img src="${sponsor.image}" alt="${sponsor.name}" class="max-w-full max-h-full object-contain"></abbr>
+            <abbr title="${sponsor.name}"><img src="${baseSponsorsURL+sponsor.image}" alt="${sponsor.name}" class="max-w-full max-h-full object-contain"></abbr>
         </a>`;
   });