Updated syntaxes order a bit

2025-12-12 18:08:47 +00:00 · 2025-07-02 22:06:31 +00:00
parent c7847344f3
commit b0a642cb63
3 changed files with 185 additions and 191 deletions
--- a/assets/js/index.js
+++ b/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
-start_page();
+let path_name = window.location.pathname;
+//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"));
-if (pgctrl[1])
-  pgctrl[1].forEach((m, n) =>
-    m.addEventListener("click", function () {
-      reset();
-      slider_index = n;
-      set();
-    })
-  );
+// #region Slider section

-async function fetch_releases() {
-  let { data, error } = await supabase
-    .from("events")
-    .select("url, title, subtitle, context, img_src")
-    .eq("event_type", "release"); //note it only shows u public stuffs
-  if (error) {
-    console.error("Error fetching data:", error);
-  } 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();
+function build_event(i) {
+  let conditions = [
+      "event_type.eq.highlight,event_type.eq.highlight_activity,event_type.eq.highlight_release",
+      "event_type.eq.release,event_type.eq.highlight_release",
+      "event_type.eq.activity,event_type.eq.highlight_activity",
+    ],
+    inits = [init_highlights, init_releases, init_activities];
  supabase
    .from("events")
-    .select("url, title, subtitle, context, img_src")
-    .eq("event_type", "highlight")
-    .then(init_page);
+    .select("url, title, subtitle, preview, img_src")
+    .order("id", i < 1 ? { ascending: true } : { descending: true })
+    .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);
+    });
+  }
+}
--- a/index.html
+++ b/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>
--- a/release/index.html
+++ b/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>