Updated syntaxes order a bit

assets/js/index.js

@@ -1,13 +1,18 @@
+//Carousel
 let next = document.querySelector(".next");
 let prev = document.querySelector(".prev");
 
 let pages = document.getElementById("pages");
-let pgctrl = [document.querySelector(".pgctrl")];
+let pgctrl = document.querySelector(".pgctrl");
 let slider = document.querySelector(".slider");
 let carousel = document.querySelector(".carousel");
 
 let bg = document.querySelector(".slider-bg");
 
+//Album-cards
+let album_cards = document.querySelector(".album-cards");
+
+//The Database call.
 import { createClient } from "https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm";
 
 const supabaseUrl = "https://owbamcqdmqetrgcznxva.supabase.co";
@@ -18,6 +23,7 @@ const supabaseKey =
 //the moment you notice you need an API endpoint.
 const supabase = createClient(supabaseUrl, supabaseKey);
 
+//the elements for the carousel
 if (!document) console.log("press f");
 if (!next) console.log("Class next missing.");
 if (!prev) console.log("Class prev missing.");
@@ -36,79 +42,40 @@ let highlights = [],
         "https://cdn.glitch.com/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FScreenshot%20(36).png?v=1633031087464",
       url: "/",
       title: "This page is still under construction.",
-      context:
+      preview:
         "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
+let path_name = window.location.pathname;
-start_page();
+//Start building the page by calling data
+if (path_name === "/") build_event(0);
+if (path_name === "/" || path_name === "/release") build_event(1);
+if (path_name === "/" || path_name === "/activity") build_event(2);
 
-pgctrl.push(document.querySelectorAll(".pgctrl li"));
+// #region Slider section
-if (pgctrl[1])
-  pgctrl[1].forEach((m, n) =>
-    m.addEventListener("click", function () {
-      reset();
-      slider_index = n;
-      set();
-    })
-  );
 
-async function fetch_releases() {
+function build_event(i) {
-  let { data, error } = await supabase
+  let conditions = [
-    .from("events")
+      "event_type.eq.highlight,event_type.eq.highlight_activity,event_type.eq.highlight_release",
-    .select("url, title, subtitle, context, img_src")
+      "event_type.eq.release,event_type.eq.highlight_release",
-    .eq("event_type", "release"); //note it only shows u public stuffs
+      "event_type.eq.activity,event_type.eq.highlight_activity",
-  if (error) {
+    ],
-    console.error("Error fetching data:", error);
+    inits = [init_highlights, init_releases, init_activities];
-  } else {
-    return (releases = data);
-  }
-}
-async function fetch_activities() {
-  let { data, error } = await supabase
-    .from("events")
-    .select("url, title, subtitle, context, img_src")
-    .eq("event_type", "activity"); //note it only shows u public stuffs
-  if (error) {
-    console.error("Error fetching data:", error);
-  } else {
-    return (activities = data);
-  }
-}
-
-function start_page() {
-  fetch_releases();
-  fetch_activities();
   supabase
     .from("events")
-    .select("url, title, subtitle, context, img_src")
+    .select("url, title, subtitle, preview, img_src")
-    .eq("event_type", "highlight")
+    .order("id", i < 1 ? { ascending: true } : { descending: true })
-    .then(init_page);
+    .limit(10)
+    .or(conditions[i])
+    .then(inits[i]);
 }
 
-function init_page(d) {
+function init_highlights(d) {
   if (d.error) {
     console.error("Error fetching data:", d.error);
   } else {
     highlights = d.data;
-    
     if (d.data.length === 0) highlights = default_highlights;
 
     highlights.forEach((a) => {
@@ -121,7 +88,7 @@ function init_page(d) {
       _h1.textContent = a.title;
 
       _p.classList.add("desc");
-      _p.textContent = a.context;
+      _p.textContent = a.preview;
 
       _div.appendChild(_h1);
       _div.appendChild(_p);
@@ -162,23 +129,30 @@ function pg_ctrl() {
     let button = document.createElement("li");
     let n = i;
     button.textContent = "•"; //&bull; not &middot;
-    pgctrl[0].append(button);
+    pgctrl.appendChild(button);
   }
+  if (pgctrl)
+  [].slice.call(pgctrl.children).forEach((m, n) =>
+    m.addEventListener("click", function () {
+      reset();
+      slider_index = n;
+      set();
+    })
+  );
 }
 
 function set() {
   slider.children[slider_index].style.opacity = 1;
   slider.children[slider_index].style.zIndex = 1;
-  pgctrl[0].children[slider_index].style.opacity = 1;
+  [].slice.call(pgctrl.children)[slider_index].style.opacity = 1;
   if (bg)
     bg.style.backgroundImage = `url('${highlights[slider_index].img_src}')`;
 }
-
 function reset() {
   for (var i = 0; i < slider.children.length; i++) {
     slider.children[i].style.opacity = 0;
     slider.children[i].style.zIndex = 0;
-    pgctrl[0].children[i].style.opacity = 0.4;
+    [].slice.call(pgctrl.children)[i].style.opacity = 0.4;
     if (bg) bg.style.backgroundImage = null;
   }
 }
@@ -210,3 +184,147 @@ function checkX() {
   if (touchendX < touchstartX && touchstartX - touchendX > 60) nxt();
   if (touchendX > touchstartX && touchendX - touchstartX > 60) prv();
 }
+
+// #endregion
+
+async function init_releases(d) {
+  if (d.error) {
+    console.error("Error fetching data:", d.error);
+  } else {
+    releases = d.data;
+    /*
+        <a class="card" href="/release">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
+            "></div>
+          <h2>PoΣΣεssion (Possession)</h2>
+          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
+          <p>Ghost and monsters are gathering you...</p>
+        </a>
+        <a class="card" href="/release">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
+            "></div>
+          <h2>Hyper Liminality</h2>
+          <p>t404:null &amp; trung-nova &amp; AXiS</p>
+          <p>"until you reach it... the two hyper sides."</p>
+        </a>
+        <a class="card" href="/release/A_Lake_With_Endless_Stars">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
+            "></div>
+          <h2>A Lake With Endless Stars</h2>
+          <p> "Under the coruscating night sky, gaze into the kaleidoscopic waters..." </p>
+        </a>
+        <a class="card" href="/release/Oblitus_Requiem">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
+            "></div>
+          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
+          <p>VNMC2023 Grand Finals Tiebreaker.</p>
+          <p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
+        </a>
+*/
+    releases.forEach((a) => {
+      let _card = document.createElement("a"),
+        _bg_img = document.createElement("div"),
+        _h2 = document.createElement("h2"),
+        _p_subtitle = document.createElement("p"),
+        _p_preview = document.createElement("p");
+      _card.href = a.url;
+
+      _card.classList.add("card");
+
+      _bg_img.classList.add("bg-img");
+      _bg_img.style = "background-image: url(" + a.img_src + ");";
+
+      _h2.textContent = a.title;
+
+      _p_subtitle.textContent = a.subtitle;
+      _p_preview.textContent = a.preview;
+
+      _card.appendChild(_bg_img);
+      _card.appendChild(_h2);
+      _card.appendChild(_p_subtitle);
+      _card.appendChild(_p_preview);
+      album_cards.appendChild(_card);
+    });
+  }
+}
+async function init_activities(d) {
+  if (d.error) {
+    console.error("Error fetching data:", d.error);
+  } else {
+    releases = d.data;
+    /*<a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png);
+            "></div>
+          <h2>Fanmade of Fighters I: Genesis</h2>
+          <p>BOF-like Contest Releases.</p>
+          <p> Our team (Sine Fine Stellae) Achieved #2 :D <br />
+            <br />
+            <strong>A Lake With Endless Stars</strong> is one of the soundtracks from Sine Fine Stellae produced by me, thanks to the help of Riprider500 and more people :D
+          </p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/vnmc2023.png?v=1717348650235);
+            "></div>
+          <h2>VNMC 2023</h2>
+          <p> (Vietnamese National Mania Championship 2023) Grand Finals Tiebreaker by me (t404:null) </p>
+          <p>
+            <strong>Oblitus Requiem &bsol;&bsol;Against the Forsaken Legacy//</strong>
+            <br />
+            <br /> "Even if you don't remember me now, I will bring the you I once knew back from them." <br />
+            <br />Sivelia (the host of VNMC) has asked me making a custom soundtrack round for the tourney. The soundtrack get much likes and subscribers on Youtube within 2 weeks as the tournament got a big impact gained. Big thank you to all VNMC staffs for that!
+          </p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch1.jpg);
+            "></div>
+          <h2>VNMC 2024 (???)</h2>
+          <p>???</p>
+          <p> Li4tLiAuLS0gLS4uIC0tLi4u <br />&bsol;-...-4buoe2v1qZuiULSrOPuzXZBn <br />YZt0ULSr9PuzvfuiaZwo5ZBseZB39 <br />fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO </p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg);
+            "></div>
+          <h2>VNMC 2024 (???) (w/ ??? as ???)</h2>
+          <p>???</p>
+        </a>
+        <a class="card" href="/activity">
+          <div class="bg-img" style="
+              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glich3.jpg);
+            "></div>
+          <h2>???? 5 (????2024) (w/ ??? as ???)</h2>
+          <p>???</p>
+          <p>???</p>
+        </a>*/
+    releases.forEach((a) => {
+      let _card = document.createElement("a"),
+        _bg_img = document.createElement("div"),
+        _h2 = document.createElement("h2"),
+        _p_subtitle = document.createElement("p"),
+        _p_preview = document.createElement("p");
+      _card.href = a.url;
+      _card.classList.add("card");
+
+      _bg_img.classList.add("bg-img");
+      _bg_img.style = "background-image: url(" + a.img_src + ");";
+
+      _h2.textContent = a.title;
+
+      _p_subtitle.textContent = a.subtitle;
+      _p_preview.textContent = a.preview;
+
+      _card.appendChild(_bg_img);
+      _card.appendChild(_h2);
+      _card.appendChild(_p_subtitle);
+      _card.appendChild(_p_preview);
+      album_cards.appendChild(_card);
+    });
+  }
+}

index.html

@@ -207,107 +207,21 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
         </div>
       </div>
       <div></div>
-      <script src="/assets/js/index.js" type="module"></script>
       <!--💀-->
       <hr />
       <h1 class="topic">
         <a href="/release">Releases (Click for more)</a>
       </h1>
       <div class="album-cards">
-        <a class="card" href="/release/hello.world(Zer/O)">
-          <div class="bg-img" style="
-              background-image: url(https://t404null.glitch.me/assets/images/image0.png);
-            "></div>
-          <h2>hello.world(Zer/O)</h2>
-          <p>First Release</p>
-          <p>What do I see... a new world...?</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
-            "></div>
-          <h2>PoΣΣεssion (Possession)</h2>
-          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
-          <p>Ghost and monsters are gathering you...</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
-            "></div>
-          <h2>Hyper Liminality</h2>
-          <p>t404:null &amp; trung-nova &amp; AXiS</p>
-          <p>"until you reach it... the two hyper sides."</p>
-        </a>
-        <a class="card" href="/release/A_Lake_With_Endless_Stars">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
-            "></div>
-          <h2>A Lake With Endless Stars</h2>
-          <p> "Under the coruscating night sky, gaze into the kaleidoscopic waters..." </p>
-        </a>
-        <a class="card" href="/release/Oblitus_Requiem">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
-            "></div>
-          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
-          <p>VNMC2023 Grand Finals Tiebreaker.</p>
-          <p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
-        </a>
       </div>
       <hr />
       <h1 class="topic">
         <a href="/activity">Activities</a>
       </h1>
       <div class="half-image-cards">
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/fof-genesis.png);
-            "></div>
-          <h2>Fanmade of Fighters I: Genesis</h2>
-          <p>BOF-like Contest Releases.</p>
-          <p> Our team (Sine Fine Stellae) Achieved #2 :D <br />
-            <br />
-            <strong>A Lake With Endless Stars</strong> is one of the soundtracks from Sine Fine Stellae produced by me, thanks to the help of Riprider500 and more people :D
-          </p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/vnmc2023.png?v=1717348650235);
-            "></div>
-          <h2>VNMC 2023</h2>
-          <p> (Vietnamese National Mania Championship 2023) Grand Finals Tiebreaker by me (t404:null) </p>
-          <p>
-            <strong>Oblitus Requiem &bsol;&bsol;Against the Forsaken Legacy//</strong>
-            <br />
-            <br /> "Even if you don't remember me now, I will bring the you I once knew back from them." <br />
-            <br />Sivelia (the host of VNMC) has asked me making a custom soundtrack round for the tourney. The soundtrack get much likes and subscribers on Youtube within 2 weeks as the tournament got a big impact gained. Big thank you to all VNMC staffs for that!
-          </p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch1.jpg);
-            "></div>
-          <h2>VNMC 2024 (???)</h2>
-          <p>???</p>
-          <p> Li4tLiAuLS0gLS4uIC0tLi4u <br />&bsol;-...-4buoe2v1qZuiULSrOPuzXZBn <br />YZt0ULSr9PuzvfuiaZwo5ZBseZB39 <br />fuzpLxn9PurYZtz4PtzpVSlC3u3UrviaZO </p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glitch2.jpg);
-            "></div>
-          <h2>VNMC 2024 (???) (w/ ??? as ???)</h2>
-          <p>???</p>
-        </a>
-        <a class="card" href="/activity">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/glich3.jpg);
-            "></div>
-          <h2>???? 5 (????2024) (w/ ??? as ???)</h2>
-          <p>???</p>
-          <p>???</p>
-        </a>
       </div>
     </main>
+    <script src="/assets/js/index.js" type="module"></script>
     <div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
   </body>
 </html>

release/index.html

@@ -192,46 +192,8 @@ I write/make/produce EDM music(DTM), and for every releases I'll post my music o
     <main class= "main-page">
       <h1 class="topic">Releases</h1>
       <div class="album-cards">
-        <a class="card" href="/release/hello.world(Zer/O)">
-          <div class="bg-img" style="
-              background-image: url(https://t404null.glitch.me/assets/images/image0.png);
-            "></div>
-          <h2>hello.world(Zer/O)</h2>
-          <p>First Release</p>
-          <p>What do I see... a new world...?</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.me/f6cb427c-2cdb-4693-bc00-9d3e2991008c%2FC9B955D3-3A2A-4B83-92EB-EBCBDEB2B458.jpeg);
-            "></div>
-          <h2>PoΣΣεssion (Possession)</h2>
-          <p>Formerly "Mayonaka Dancehall!!!" (:DACHiTRAX) Release.</p>
-          <p>Ghost and monsters are gathering you...</p>
-        </a>
-        <a class="card" href="/release">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/Hyper_Limimality.png);
-            "></div>
-          <h2>Hyper Liminality</h2>
-          <p>t404:null &amp; trung-nova &amp; AXiS</p>
-          <p>"until you reach it... the two hyper sides."</p>
-        </a>
-        <a class="card" href="/release/A_Lake_With_Endless_Stars">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/2d9e31c1-a947-46cd-9fd2-8c92be70abe2/A_Lake_With_Endless_Stars.png);
-            "></div>
-          <h2>A Lake With Endless Stars</h2>
-          <p> "Under the coruscating night sky, gaze into the kaleidoscopic waters..." </p>
-        </a>
-        <a class="card" href="/release/Oblitus_Requiem">
-          <div class="bg-img" style="
-              background-image: url(https://cdn.glitch.global/f594d6b7-e72e-477c-b5cb-d71abbd39f44/oblitus-requiem.png);
-            "></div>
-          <h2>Oblitus Requiem \\Against the Forsaken Legacy//</h2>
-          <p>VNMC2023 Grand Finals Tiebreaker.</p>
-          <p> "Even if you don't remember me now, I will bring the you I once knew back from them." </p>
-        </a>
       </div>
+      <script src="/assets/js/index.js" type="module"></script>
     </main>
     <div class="footer">&copy; t404:null 2021-2024 - All Rights Reserved</div>
   </body>