Initial commit

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
2024-01-26 13:47:41 +00:00
commit 5604408244
8 changed files with 444 additions and 0 deletions
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <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>
+
+    <link rel="stylesheet" href="/style.css" />
+    <script src="/script.js" defer></script>
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="content" role="main">
+        <h1 class="title">Devstats!</h1>
+        
+        <p>
+          Enter your GitHub username to find your CNCF 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>
+        <details id="rawResultsWrapper" class="hidden">
+          <summary>Raw results</summary>
+          <pre id="rawResults"></pre>
+        </details>
+      </div>
+    </div>
+
+    <footer class="footer">
+      Made with 💙 by <a href="https://marcusnoble.com">Marcus Noble</a>
+    </footer>
+  </body>
+</html>
@@ -0,0 +1,55 @@
+const btn = document.querySelector("#find");
+const gh = document.querySelector("#github");
+const result = document.querySelector("#result");
+const status = document.querySelector("#status");
+
+const rawResultsWrapper = document.querySelector("#rawResultsWrapper");
+const rawResults = document.querySelector("#rawResults");
+
+function find() {
+  let user = gh.value.toLowerCase();
+  if (user != "") {
+    statusUpdate(`Fetching devstat score for '${user}'`, "info");
+    rawResultsWrapper.classList.add('hidden');
+    fetch("https://devstats.cncf.io/api/v1", {
+      method: "POST",
+      mode: "cors",
+      cache: "no-cache",
+      headers: {
+        "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\":\"\"}}",
+    })
+    .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");
+      }
+    })
+    .catch(err => {
+      statusUpdate(`Failed to get devstat score for '${user}'`, "error");
+      console.log(err);
+    });
+  }
+}
+
+function statusUpdate(msg, statusClass) {
+  console.log(msg);
+  status.innerText = msg;
+  status.className = statusClass;
+}
+
+gh.onkeypress = function(event) {
+  if (event.keyCode == 13) {
+    find();
+  }
+}
+
+btn.onclick = find;
@@ -0,0 +1,120 @@
+:root {
+  --color-bg: #FFFFFF;
+  --color-text-main: #000000;
+  --color-primary: #326CE5;
+  --wrapper-height: 87vh;
+  --image-max-width: 300px;
+  --image-margin: 3rem;
+  --font-family: "HK Grotesk";
+  --font-family-header: "HK Grotesk";
+}
+
+/* Basic page style resets */
+* {
+  box-sizing: border-box;
+}
+[hidden], .hidden {
+  display: none !important;
+}
+
+/* Import fonts */
+@font-face {
+  font-family: HK Grotesk;
+  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
+    format("opentype");
+}
+@font-face {
+  font-family: HK Grotesk;
+  font-weight: bold;
+  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
+    format("opentype");
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: HK Grotesk;
+  background-color: var(--color-bg);
+  color: var(--color-text-main);
+}
+
+/* Page structure */
+.wrapper {
+  min-height: var(--wrapper-height);
+  display: grid;
+  place-items: center;
+  margin: 0 1rem;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Very light scaling for our illustration */
+.title {
+  color: var(--color-primary);
+  font-family: HK Grotesk;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 90px;
+  line-height: 105%;
+  margin: 0;
+}
+
+footer {
+  text-align: center;
+  font-family: HK Grotesk;
+  font-weight: light;
+  font-size: 0.8em;
+}
+
+label {
+  font-weight: bold;
+}
+
+button,
+input {
+  font-family: inherit;
+  font-size: 100%;
+  background: #FFFFFF;
+  border: 1px solid #000000;
+  box-sizing: border-box;
+  border-radius: 4px;
+  padding: 0.5rem 1rem;
+  transition: 500ms;
+  display: inline-block;
+}
+
+#status {
+  height: 22px;
+  margin: 8px;
+}
+
+#status.info {
+  color: blue;
+}
+#status.error {
+  color: red;
+}
+
+#result {
+  color: var(--color-primary);
+  font-family: HK Grotesk;
+  font-style: normal;
+  font-weight: bold;
+  font-size: 70px;
+  margin: 0.5em;
+  height: 100px;
+}
+
+#rawResultsWrapper {
+  max-width: 90vw;
+  overflow-x: scroll;
+}