first commit

js/main.js

@@ -0,0 +1,114 @@
+console.log("main.js loaded");
+
+document.addEventListener("DOMContentLoaded", () => {
+  console.log("dom loaded");
+  fakeFocus();
+  getConfig();
+  getCVE();
+});
+
+function fakeFocus() {
+  document.querySelector("input").addEventListener("focus", () => {
+    document.querySelector(".search-wrapper").classList.add("fake-focus");
+  });
+  document.querySelector("input").addEventListener("focusout", () => {
+    document.querySelector(".search-wrapper").classList.remove("fake-focus");
+  });
+}
+
+async function getConfig() {
+  const CONFIG = "../assets/config.json";
+  try {
+    const response = await fetch(CONFIG);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch ${CONFIG}`);
+    }
+    const container = document.querySelector("section");
+    container.innerHTML = "";
+    const config = await response.json();
+    config.forEach((element) => {
+      const div = document.createElement("div");
+      div.classList.add("section-wrapper");
+      div.innerHTML += `<h1>${element.name}</h1>`;
+      const div2 = document.createElement("div");
+      div2.classList.add("links-wrapper");
+      element.content.forEach((e) => {
+        div2.innerHTML += `
+            <a href="${e.url}">
+              <div class="link-wrapper-inner">
+                <img src="${e.icon}" class="icon">
+                <p>${e.name}</p>
+              </div>
+            </a>
+        `;
+      });
+      div.appendChild(div2);
+      container.appendChild(div);
+    });
+  } catch (error) {
+    console.error("Error fetching or parsing config file:", error);
+    document.querySelector("section").innerHTML =
+      `Failed to load config file. Please debug this fu***** dashboard : ${error}`;
+  }
+}
+
+async function getCVE() {
+  const RSS_URL = "./latest.xml";
+  try {
+    // Fetch xml RSS feed
+    const response = await fetch(RSS_URL);
+    if (!response.ok) {
+      throw new Error("Failed to fetch RSS feed");
+    }
+    const rssText = await response.text();
+    // Parse xml file and extract items in an array
+    const parser = new DOMParser();
+    const xml = parser.parseFromString(rssText, "application/xml");
+    const items = xml.querySelectorAll("item");
+    // clear cve div content
+    const cveDiv = document.querySelector(".aside-wrapper");
+    cveDiv.innerHTML = "";
+    cveDiv.innerHTML += `<h1>Latest CVE</h1>`;
+    // Loop items and extrat infos for each CVE
+    items.forEach((item) => {
+      const title = item.querySelector("title").textContent;
+      const link = item.querySelector("link").textContent;
+      const description = item
+        .querySelector("description")
+        .textContent.replace(/\r?\n|\r/g, " ")
+        .replace(/<br>/g, "\n");
+      console.log(description);
+      const parsedDescription = description.match(
+        /Description : <\/strong>(.*)/,
+      )[1];
+      const parsedPublished = description.match(
+        /Published : <\/strong>(.*)/,
+      )[1];
+      const parsedSeverity = description.match(
+        /Severity:<\/strong> (.*) \|/,
+      )[1];
+      colorHue = -12 * parseFloat(parsedSeverity) + 120;
+      console.log(colorHue);
+      cveDiv.innerHTML += `
+      <div class="cve-wrapper">
+        <div class="cve-header">
+          <div class="cve-severity" style="background-color:hsl(${colorHue} 100% 70%)">${parsedSeverity}</div>
+          <div class="cve-title-wrapper">
+            <div class="cve-title">
+              <a href="${link}">${title}</a>
+            </div>
+            <div class="cve-published">${parsedPublished}</div>
+          </div>
+        </div>
+        <div class="cve-description">
+          ${parsedDescription}
+        </div>
+      </div>
+      `;
+    });
+  } catch (error) {
+    console.error("Error fetching or parsing RSS feed:", error);
+    document.querySelector("#cve").innerHTML =
+      "Failed to load RSS feed. Please try again later.";
+  }
+}