Rebase dengan menggunakan sqlite

public/js/api/main.js

@@ -0,0 +1,132 @@
+/**
+ * Utility function to calculate the current theme setting.
+ * Look for a local storage value.
+ * Fall back to system setting.
+ * Fall back to light mode.
+ */
+function calculateSettingAsThemeString({
+  localStorageTheme,
+  systemSettingDark,
+}) {
+  if (localStorageTheme !== null) {
+    return localStorageTheme;
+  }
+
+  if (systemSettingDark.matches) {
+    return "dark";
+  }
+
+  return "light";
+}
+
+/**
+ * Utility function to update the button text and aria-label.
+ */
+function updateButton({ buttonEl, isDark }) {
+  const newCta = isDark ? "Terang" : "Gelap";
+  // use an aria-label if you are omitting text on the button
+  // and using a sun/moon icon, for example
+  buttonEl.innerText = newCta;
+}
+
+/**
+ * Utility function to update the theme setting on the html tag
+ */
+function updateThemeOnHtmlEl({ theme }) {
+  document.querySelector("html").setAttribute("data-theme", theme);
+}
+
+/**
+ * On page load:
+ */
+
+/**
+ * 1. Grab what we need from the DOM and system settings on page load
+ */
+const button = document.querySelector(".theme-toggle");
+const localStorageTheme = localStorage.getItem("theme");
+const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+/**
+ * 2. Work out the current site settings
+ */
+let currentThemeSetting = calculateSettingAsThemeString({
+  localStorageTheme,
+  systemSettingDark,
+});
+
+/**
+ * 3. Update the theme setting and button text accoridng to current settings
+ */
+updateButton({
+  buttonEl: button,
+  isDark: currentThemeSetting === "dark",
+});
+updateThemeOnHtmlEl({ theme: currentThemeSetting });
+
+/**
+ * 4. Add an event listener to toggle the theme
+ */
+function changeTheme() {
+  const newTheme = currentThemeSetting === "dark" ? "light" : "dark";
+
+  localStorage.setItem("theme", newTheme);
+  updateButton({
+    buttonEl: button,
+    isDark: newTheme === "dark",
+  });
+  updateThemeOnHtmlEl({ theme: newTheme });
+
+  currentThemeSetting = newTheme;
+}
+
+$(document).ready(function () {
+  // Header Scroll
+  $(window).on("scroll", function () {
+    var scroll = $(window).scrollTop();
+
+    if (scroll >= 50) {
+      $("#header").addClass("fixed");
+    } else {
+      $("#header").removeClass("fixed");
+    }
+  });
+
+  // Page Scroll
+  var sections = $("section");
+  nav = $('nav[role="navigation"]');
+
+  $(window).on("scroll", function () {
+    var cur_pos = $(this).scrollTop();
+    sections.each(function () {
+      var top = $(this).offset().top - 276;
+      bottom = top + $(this).outerHeight();
+      if (cur_pos >= top && cur_pos <= bottom) {
+        nav.find("a").removeClass("active");
+        nav.find('a[href="#' + $(this).attr("id") + '"]').addClass("active");
+      }
+    });
+  });
+  nav.find("a").on("click", function () {
+    var $el = $(this);
+    id = $el.attr("href");
+    $("html, body").animate(
+      {
+        scrollTop: $(id).offset().top - 75,
+      },
+      500
+    );
+    return false;
+  });
+
+  // Mobile Navigation
+  $(".nav-toggle").on("click", function () {
+    $(this).toggleClass("close-nav");
+    nav.toggleClass("open");
+    return false;
+  });
+  nav.find("a").on("click", function () {
+    $(".nav-toggle").toggleClass("close-nav");
+    nav.toggleClass("open");
+  });
+});