Updated style and included issues and PRs

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

src/index.html

@@ -26,6 +26,7 @@
         <div id="status"></div>
 
         <div id="result"></div>
+        <div id="subResult"></div>
         <details id="rawResultsWrapper" class="hidden">
           <summary>Raw results</summary>
           <pre id="rawResults"></pre>

src/script.js

@@ -1,15 +1,26 @@
 const btn = document.querySelector("#find");
 const gh = document.querySelector("#github");
 const result = document.querySelector("#result");
+const subResult = document.querySelector("#subResult");
 const status = document.querySelector("#status");
 
 const rawResultsWrapper = document.querySelector("#rawResultsWrapper");
 const rawResults = document.querySelector("#rawResults");
 
+// Parse URL query parameters
+const urlParams = new URLSearchParams(window.location.search);
+const user = urlParams.get('user');
+
+// Fill form with user parameter
+if (user) {
+  gh.value = user;
+  find(); // Call the find function automatically
+}
+
 function find() {
-  let user = gh.value.toLowerCase();
+  let user = gh.value.trim().toLowerCase();
   if (user != "") {
-    statusUpdate(`Fetching devstat score for '${user}'`, "info");
+    statusUpdate(`Fetching devstats score for '${user}'`, "info");
     rawResultsWrapper.classList.add('hidden');
     fetch("https://devstats.cncf.io/api/v1", {
       method: "POST",
@@ -19,24 +30,30 @@ function find() {
         "Content-Type": "application/json",
       },
       redirect: "follow",
-      body: "{\"api\":\"DevActCnt\",\"payload\":{\"project\":\"all\",\"range\":\"Last decade\",\"metric\":\"Contributions\",\"repository_group\":\"All\",\"country\":\"All\",\"github_id\":\"" + user + "\",\"bg\":\"\"}}",
+      body: "{\"api\":\"GithubIDContributions\",\"payload\":{\"github_id\":\"" + user + "\"}}",
     })
     .then(res => res.json())
     .then(data => {
       statusUpdate("", "info");
-      let score = data.number[0];
-      if (score) {
-        result.innerHTML = score; 
-        rawResults.innerText = JSON.stringify(data, "", 2)
-        rawResultsWrapper.classList.remove('hidden');
-      } else {
-        statusUpdate(`Failed to get devstat score for '${user}'`, "error");
+      let score = data.contributions;
+      if (!score) {
+        statusUpdate(`Failed to get devstats score for '${user}'.\nEither user doesn't exist or no contributions recorded.`, "error");
       }
+      result.innerHTML = score;
+      subResult.innerHTML = `Issues: ${data.issues} | PRs: ${data.prs}`;
+      rawResults.innerText = JSON.stringify(data, "", 2)
+      rawResultsWrapper.classList.remove('hidden');
     })
     .catch(err => {
-      statusUpdate(`Failed to get devstat score for '${user}'`, "error");
+      statusUpdate(`Failed to get devstats score for '${user}'`, "error");
       console.log(err);
     });
+
+    // Change the URL
+    let url = new URL(window.location.href);
+    let params = new URLSearchParams(url.search);
+    params.set('user', user);
+    window.history.replaceState({}, '', `${url.pathname}?${params}`);
   }
 }
 
@@ -52,4 +69,4 @@ gh.onkeypress = function(event) {
   }
 }
 
-btn.onclick = find;
+btn.onclick = find;

src/style.css

@@ -34,7 +34,7 @@ html,
 body {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
 }
 
 body {
@@ -99,6 +99,7 @@ input {
 #status {
   height: 22px;
   margin: 8px;
+  text-align: center;
 }
 
 #status.info {
@@ -114,11 +115,30 @@ input {
   font-style: normal;
   font-weight: bold;
   font-size: 70px;
-  margin: 0.5em;
+  margin: 0.2em;
   height: 100px;
 }
 
-#rawResultsWrapper {
-  max-width: 90vw;
-  overflow-x: scroll;
+#subResult {
+  font-family: HK Grotesk;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  margin: 0em;
+  height: 30px;
+}
+
+#rawResultsWrapper {
+  margin-top: 2em;
+  overflow-x: scroll;
+  width: 100%;
+  text-align: center;
+}
+
+#rawResultsWrapper summary {
+  cursor: pointer;
+}
+
+#rawResultsWrapper pre {
+  text-align: left;
 }