Made highlights to start dyamically

assets/js/index.js

@@ -18,24 +18,6 @@ const supabaseKey =
 //the moment you notice you need an API endpoint.
 const supabase = createClient(supabaseUrl, supabaseKey);
 
-//prototype
-let img = [
-    "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
-    "https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png?v=1717353087051",
-    "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
-  ],
-  pg = ["/", "release/Oblitus_Requiem", "release/A_Lake_With_Endless_Stars"],
-  title = [
-    "This page is still under construction.",
-    "Oblitus Requiem \\\\Against the Forsaken Legacy//",
-    "A Lake With Endless Stars",
-  ],
-  desc = [
-    "The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
-    '"Even if you don\'t remember me now, I will bring the you I once knew back from them."',
-    '"Under the coruscating night sky, gaze into the kaleidoscopic waters..."',
-  ];
-
 if (!document) console.log("press f");
 if (!next) console.log("Class next missing.");
 if (!prev) console.log("Class prev missing.");
@@ -45,10 +27,38 @@ if (!carousel) console.log("Class carousel missing.");
 let slider_index = 0;
 let touchstartX = 0;
 let touchendX = 0;
+let highlights = [],
+  releases = [],
+  activities = [],
+  default_highlights = [
+    {
+      img_url:
+        "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
+      url: "/",
+      title: "This page is still under construction.",
+      context:
+        "The page is still under development. In cases, this page will change after reload or after a few days and a reload.",
+    },
+    {
+      img_url:
+        "https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png?v=1717353087051",
+      url: "release/Oblitus_Requiem",
+      title: "Oblitus Requiem \\\\Against the Forsaken Legacy//",
+      context:
+        '"Even if you don\'t remember me now, I will bring the you I once knew back from them."',
+    },
+    {
+      img_url:
+        "https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png",
+      url: "release/A_Lake_With_Endless_Stars",
+      title: "A Lake With Endless Stars",
+      context:
+        '"Under the coruscating night sky, gaze into the kaleidoscopic waters..."',
+    },
+  ];
 
 //create pages and add buttons
-init_page();
+start_page();
-pg_ctrl();
 
 pgctrl.push(document.querySelectorAll(".pgctrl li"));
 if (pgctrl[1])
@@ -60,24 +70,6 @@ if (pgctrl[1])
     })
   );
 
-//refresh
-reset();
-set();
-
-
-let highlights, releases, activities;
-
-async function fetch_highlights() {
-  let { data, error } = await supabase
-    .from("events")
-    .select("url, title, subtitle, context, img_src")
-    .eq("event_type", "highlight"); //note it only shows u public stuffs
-  if (error) {
-    console.error("Error fetching data:", error);
-  } else {
-    return (highlights = data);
-  }
-}
 async function fetch_releases() {
   let { data, error } = await supabase
     .from("events")
@@ -101,33 +93,70 @@ async function fetch_activities() {
   }
 }
 
+function start_page() {
+  fetch_releases();
+  fetch_activities();
+  supabase
+    .from("events")
+    .select("url, title, subtitle, context, img_src")
+    .eq("event_type", "highlight")
+    .then(init_page);
+}
 
-fetch_releases();
+function init_page(d) {
+  if (d.error) {
+    console.error("Error fetching data:", d.error);
+  } else {
+    highlights = d.data;
+    
+    if (d.data.length === 0) highlights = default_highlights;
 
-console.log(releases);
+    highlights.forEach((a) => {
+      let _pg = document.createElement("section"),
+        _div = document.createElement("div");
+      let _h1 = document.createElement("h1"),
+        _p = document.createElement("p");
 
+      _h1.classList.add("title");
+      _h1.textContent = a.title;
 
-function init_page() {
+      _p.classList.add("desc");
-  for (var i = 0; i < 3; i++) {
+      _p.textContent = a.context;
-    let _pg = document.createElement("section"),
-      _div = document.createElement("div"),
-      _desc = desc[i],
-      _title = title[i];
-    let _h1 = document.createElement("h1"),
-      _p = document.createElement("p");
 
-    _h1.classList.add("title");
+      _div.appendChild(_h1);
-    _h1.textContent = _title;
+      _div.appendChild(_p);
+      _pg.appendChild(_div);
+      pages.appendChild(_pg);
+    });
+    pg_ctrl();
 
-    _p.classList.add("desc");
+    //refresh
-    _p.textContent = _desc;
+    reset();
+    set();
 
-    _div.appendChild(_h1);
+    //next
-    _div.appendChild(_p);
+    if (next) {
-    _pg.appendChild(_div);
+      next.addEventListener("click", nxt);
-    pages.appendChild(_pg);
+      setInterval(nxt, 30000);
+    }
+
+    //previous
+    if (prev) prev.addEventListener("click", prv);
+
+    slider.onclick = function () {
+      location.assign(highlights[slider_index].url);
+    };
+    //slider.children.forEach((carousel, num) => {
+    carousel.addEventListener("touchstart", (e) => {
+      touchstartX = e.changedTouches[0].screenX;
+    });
+    carousel.addEventListener("touchend", (e) => {
+      touchendX = e.changedTouches[0].screenX;
+      checkX();
+    });
   }
 }
+
 function pg_ctrl() {
   for (var i = 0; i < slider.children.length; i++) {
     let button = document.createElement("li");
@@ -141,16 +170,10 @@ function set() {
   slider.children[slider_index].style.opacity = 1;
   slider.children[slider_index].style.zIndex = 1;
   pgctrl[0].children[slider_index].style.opacity = 1;
-  if (bg) bg.style.backgroundImage = `url('${img[slider_index]}')`;
+  if (bg)
+    bg.style.backgroundImage = `url('${highlights[slider_index].img_src}')`;
 }
 
-// setInterval(getinfo, 60000);
-// async function getinfo() {
-//   let res = await fetch("");
-//   const info = await res.json();
-//   if (bg) bg.style.backgroundImage = `url('${info.slider[1].img}')`;
-// }
-
 function reset() {
   for (var i = 0; i < slider.children.length; i++) {
     slider.children[i].style.opacity = 0;
@@ -182,31 +205,8 @@ function prv() {
   set();
 }
 
-//next
-if (next) {
-  next.addEventListener("click", nxt);
-  setInterval(nxt, 30000);
-}
-
-//previous
-if (prev) prev.addEventListener("click", prv);
-
-slider.onclick = function () {
-  location.assign(pg[slider_index]);
-};
-
 //touchswipe control
 function checkX() {
   if (touchendX < touchstartX && touchstartX - touchendX > 60) nxt();
   if (touchendX > touchstartX && touchendX - touchstartX > 60) prv();
 }
-//slider.children.forEach((carousel, num) => {
-carousel.addEventListener("touchstart", (e) => {
-  touchstartX = e.changedTouches[0].screenX;
-});
-carousel.addEventListener("touchend", (e) => {
-  touchendX = e.changedTouches[0].screenX;
-  checkX();
-});
-
-//location.reload(true);

index.html

@@ -7,6 +7,9 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
     <link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/t404_null%20Icon.png" />
     <meta charset="UTF-8" />
     <link rel="stylesheet" type="text/css" href="/assets/css/main.css" />
+    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
+<script>eruda.init();</script>
+
   </head>
   <body>
     <nav>