initial commit by simponic-infra

3 files changed, 40 insertions, 0 deletions

diff --git a/template/static/js/components/formatDate.js b/template/static/js/components/formatDate.js
new file mode 100644
index 0000000..a12f04f
--- /dev/null
+++ b/template/static/js/components/formatDate.js
@@ -0,0 +1,7 @@
+const timeElements = document.querySelectorAll(".time");
+timeElements.forEach((timeElement) => {
+  const dateStr = timeElement.textContent.split(" ").slice(0, 3).join(" ");
+  const date = new Date(dateStr);
+
+  timeElement.textContent = date.toLocaleString();
+});
diff --git a/template/static/js/components/infoBanners.js b/template/static/js/components/infoBanners.js
new file mode 100644
index 0000000..6a19864
--- /dev/null
+++ b/template/static/js/components/infoBanners.js
@@ -0,0 +1,6 @@
+const infoBanners = document.querySelectorAll(".info");
+Array.from(infoBanners).forEach((infoBanner) => {
+  infoBanner.addEventListener("click", () => {
+    infoBanner.remove();
+  });
+});
diff --git a/template/static/js/components/themeSwitcher.js b/template/static/js/components/themeSwitcher.js
new file mode 100644
index 0000000..e5497f0
--- /dev/null
+++ b/template/static/js/components/themeSwitcher.js
@@ -0,0 +1,27 @@
+const THEMES = {
+  DARK: "DARK",
+  LIGHT: "LIGHT",
+};
+
+const flipFlopTheme = (theme) =>
+  THEMES[theme] === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
+
+const themePickerText = {
+  DARK: "light mode.",
+  LIGHT: "dark mode.",
+};
+
+const themeSwitcher = document.getElementById("theme-switcher");
+
+const setTheme = (theme) => {
+  themeSwitcher.textContent = `${themePickerText[theme]}`;
+
+  document.documentElement.setAttribute("data-theme", theme);
+  localStorage.setItem("theme", theme);
+};
+
+themeSwitcher.addEventListener("click", () =>
+  setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))),
+);
+
+setTheme(localStorage.getItem("theme") || THEMES.LIGHT);