Updated style and included issues and PRs

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
Switch to using GithubIDContributions api
2025-07-27 12:02:55 +01:00 · 2025-07-11 08:20:32 +01:00 · 2025-06-27 08:16:50 +01:00 · 2025-04-25 06:28:23 +01:00 · 2024-03-03 10:37:54 +00:00 · 2024-01-29 08:22:10 +00:00
5 changed files with 85 additions and 25 deletions
--- a/4
+++ b/4
@@ -20,6 +20,10 @@ docker-publish:
 release:
 	kubectl --namespace devstats-viewer set image deployment devstats-viewer web=rg.fr-par.scw.cloud/averagemarcus/devstats-viewer:$(SHA)

+.PHONY: run # Run the web server (relies on npx being available)
+run:
+	npx http-server ./src
+
 .PHONY: help # Show this list of commands
 help:
 	@echo "kube-image-prefetch"
--- a/README.md
+++ b/README.md
@@ -1,3 +1,11 @@
 # devstats-viewer

-Discover your CNCF devstats score based on your GitHub username
+Discover your CNCF devstats score based on your GitHub username.
+
+Thanks to the [DevStats Code](https://github.com/cncf/devstatscode) authors for providing the API that powers this.
+
+## Resources
+
+* [DevStats](https://github.com/cncf/devstats)
+* [Dashboards](https://devstats.cncf.io/)
+* [DevStats Code](https://github.com/cncf/devstatscode)
--- a/src/index.html
+++ b/src/index.html
@@ -4,7 +4,7 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

-    <title>Devstats!</title>
+    <title>DevStats!</title>

    <link rel="stylesheet" href="/style.css" />
    <script src="/script.js" defer></script>
@@ -12,20 +12,21 @@
  <body>
    <div class="wrapper">
      <div class="content" role="main">
-        <h1 class="title">Devstats!</h1>
-        
+        <h1 class="title">DevStats!</h1>
+
        <p>
-          Enter your GitHub username to find your CNCF devstats score.
+          Enter your GitHub username to find your <a href="https://cncf.io/">CNCF</a> devstats score.
        </p>
-        
+
        <div>
          <label>GitHub Username: <input name="github" id="github" autocomplete="off" data-lpignore="true" /></label>
          <button id="find">Find</button>
        </div>
-        
+
        <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>
@@ -34,7 +35,13 @@
    </div>

    <footer class="footer">
-      Made with 💙 by <a href="https://marcusnoble.com">Marcus Noble</a>
+      <p>
+        Made with 💙 by <a href="https://marcusnoble.com">Marcus Noble</a> and with thanks to the <a href="https://github.com/cncf/devstatscode">DevStats code</a> authors
+      </p>
+      <p>
+        Source available at:<br/>
+        <a href="https://github.com/AverageMarcus/devstats-viewer" target="_blank">https://github.com/AverageMarcus/devstats-viewer</a>
+      </p>
    </footer>
  </body>
 </html>
--- a/src/script.js
+++ b/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;
--- a/src/style.css
+++ b/src/style.css
@@ -34,7 +34,7 @@ html,
 body {
  width: 100%;
  height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
 }

 body {
@@ -43,6 +43,10 @@ body {
  color: var(--color-text-main);
 }

+a {
+  color: var(--color-primary);
+}
+
 /* Page structure */
 .wrapper {
  min-height: var(--wrapper-height);
@@ -95,6 +99,7 @@ input {
 #status {
  height: 22px;
  margin: 8px;
+  text-align: center;
 }

 #status.info {
@@ -110,11 +115,30 @@ input {
  font-style: normal;
  font-weight: bold;
  font-size: 70px;
-  margin: 0.5em;
+  margin: 0.2em;
  height: 100px;
 }

+#subResult {
+  font-family: HK Grotesk;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 20px;
+  margin: 0em;
+  height: 30px;
+}
+
 #rawResultsWrapper {
-  max-width: 90vw;
+  margin-top: 2em;
  overflow-x: scroll;
-}
+  width: 100%;
+  text-align: center;
+}
+
+#rawResultsWrapper summary {
+  cursor: pointer;
+}
+
+#rawResultsWrapper pre {
+  text-align: left;
+}
Author	SHA1	Message	Date
Marcus Noble	b48b218ee8	Updated style and included issues and PRs Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>	2025-07-27 12:02:55 +01:00
Marcus Noble	75c00d911f	Switch to using GithubIDContributions api Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>	2025-07-11 08:20:32 +01:00
Łukasz Gryglicki	feb6342a68	Update script.js (#4 ) Let's use "Last century" stats instead of "Last decade" - because some CNCF projects passed 10 years last year.	2025-06-27 08:16:50 +01:00
viveksair	fb34587b1c	adds trim (#3 ) to remove trailing whitespace.	2025-04-25 06:28:23 +01:00
saifeddine Rajhi	e9fd8681ac	add URL git username param (#2 ) * add URL git username param * Update src/script.js --------- Co-authored-by: Marcus Noble <AverageMarcus@users.noreply.github.com>	2024-03-03 10:37:54 +00:00
Michel Murabito	2a0bfb6add	Update style.css (#1 ) Deactivation of the overflow on the X-axis, while still maintaining the overflow on the Y-axis.	2024-01-29 08:22:10 +00:00
Marcus Noble	a6d18f90bb	Fix typo Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>	2024-01-26 14:07:51 +00:00
Marcus Noble	6e1d5a472e	Updated readme with resources Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>	2024-01-26 14:03:01 +00:00
Marcus Noble	15acf5935c	Tweaked style and footer content Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>	2024-01-26 14:02:49 +00:00
Marcus Noble	a5b7093e32	Added run task Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>	2024-01-26 14:02:37 +00:00