Create scripts.js

Author: the-oblyv

scripts.js

@@ -0,0 +1,46 @@
+const starSVG = `
+  <svg class="icon-inline" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 .587l3.668 7.431L24 9.748l-6 5.848 1.42 8.284L12 19.771 4.58 23.88 6 15.596 0 9.748l8.332-1.73z"/>
+  </svg>
+`;
+
+const forkSVG = `
+  <svg class="icon-inline" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+    <path d="M7 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+    <path d="M17 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
+    <path d="M7 8v2a2 2 0 0 0 2 2h6a2 2 0 0 0 2 -2v-2" />
+    <path d="M12 12l0 4" />
+  </svg>
+`;
+
+async function loadProjects() {
+  const res = await fetch(
+    "https://gh-pinned-repos-tsj7ta5xfhep.deno.dev/?username=the-oblyv"
+  );
+  const repos = await res.json();
+
+  const container = document.getElementById("projects");
+  repos.forEach((repo) => {
+    const repoName = repo.repo.trim(); // Trim extra spaces
+    const card = document.createElement("div");
+
+    card.innerHTML = `
+      <h3><a href="https://github.com/${repo.owner}/${repoName}" target="_blank" rel="noopener noreferrer">${repoName}</a></h3>
+      <p>${repo.description || "No description"}</p>
+      <p>
+        ${starSVG} ${repo.stars} &nbsp; ${forkSVG} ${repo.forks}
+      </p>
+      <p>
+        <span style="color:${repo.languageColor}">●</span>
+        ${repo.language || "Unknown"}
+      </p>
+    `;
+
+    container.appendChild(card);
+  });
+}
+
+loadProjects();
+