1window.addEventListener("DOMContentLoaded", async function () { 2 async function get(url) { 3 const resp = await fetch(url); 4 return resp.json(); 5 } 6 7 document.querySelectorAll(".stack-card").forEach(async function (el) { 8 const userId = el.getAttribute("user-id"); 9 10 const response = await get(`https://api.stackexchange.com/2.2/users/${userId}?site=stackoverflow`); 11 const user = response.items[0]; 12 const { profile_image, website_url, link, display_name, reputation, user_id } = user; 13 const { gold, silver, bronze } = user.badge_counts; 14 15 el.innerHTML = ` 16 <div style="font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; border-radius: 6px; line-height: 1.5; padding: 16px; font-size: 14px; color: #24292e; background-color: #f9bf3f;"> 17 <div style="display: flex; align-items: center;"> 18 <img style="width: 48px; height: 48px; border-radius: 50%" src="${profile_image}" alt="Profile image"></img> 19 <div style="display: flex; flex-direction: column; margin-left: 12px"> 20 <span style="font-weight: 500; color: #black; font-size: 18px"> 21 <a style="text-decoration: none; color: inherit;" target="_blank" href="${website_url && link}"> 22 ${display_name} 23 </a> 24 </span> 25 <span style="font-weight: 400; color: #586069; font-size: 12px"> 26 @${link.replace("https://", '').replace(`/users/${user_id}`,'')} 27 </span> 28 </div> 29 </div> 30 31 <div style="margin-top: 12px; display: flex; justify-content: space-evenly; align-items: center; "> 32 <div style="margin-top: -4px"> 33 <span style="font-size: 10px; font-weight: 500; color: #586069;"> 34 REPUTATIONS 35 </span> 36 <div style="font-weight: 400; color: #211F1F; font-size: 12px; margin-top: 2px"> 37 <span style="font-weight: 600; color: #211F1F; font-size: 32px; line-height: 1;"> 38 ${reputation} 39 </span> 40 </div> 41 </div> 42 <div style="margin-top: -4px"> 43 <span style="font-size: 10px; font-weight: 500; color: #586069;"> 44 BADGES 45 </span> 46 <div style="font-weight: 400; color: #211F1F; font-size: 12px; margin-top: 2px"> 47 <span style="font-weight: 600; color: #211F1F; font-size: 32px; line-height: 1;"> 48 ${Number(gold) + Number(silver) + Number(bronze)} 49 </span> 50 </div> 51 </div> 52 </div> 53 </div> 54 `; 55 }); 56 57 document.querySelectorAll(".github-card").forEach(async function (el) { 58 const username = el.getAttribute("username"); 59 60 const response = await get(`https://api.github.com/users/${username}`); 61 const { name, avatar_url, public_repos, followers, html_url, following } = response; 62 63 el.innerHTML = ` 64 <div style="font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji; border-radius: 6px; line-height: 1.5; padding: 16px; font-size: 14px; color: #24292e; background-color: #f9bf3f;"> 65 <div style="display: flex; align-items: center; margin-top: -4px"> 66 <img style="width: 48px; height: 48px; border-radius: 50%" src="${avatar_url}" alt="Profile image"></img> 67 <div style="display: flex; flex-direction: column; margin-left: 12px"> 68 <span style="font-weight: 500; color: #black; font-size: 18px"> 69 <a style="text-decoration: none; color: inherit;" target="_blank" href="${html_url}"> 70 ${name} 71 </a> 72 </span>
73 <span style="font-weight: 400; color: #586069; font-size: 12px"> 74 @${html_url.replace('https://', '')} 75 </span> 76 </div> 77 </div> 78 79 <div style="margin-top: 12px; display: flex; justify-content: space-evenly; align-items: center; "> 80 <div style="display: flex; flex-direction: column;"> 81 <span style="font-size: 10px; font-weight: 500; color: #586069;"> 82 REPOSITORIES 83 </span> 84 <span style="font-weight: 600; color: #211F1F; font-size: 32px; line-height: 1"> 85 ${public_repos} 86 </span> 87 </div> 88 <div style="display: flex; flex-direction: column;"> 89 <span style="font-size: 10px; font-weight: 500; color: #586069;"> 90 FOLLOWERS 91 </span> 92 <span style="font-weight: 600; color: #211F1F; font-size: 32px; line-height: 1"> 93 ${followers} 94 </span> 95 </div> 96 <div style="display: flex; flex-direction: column;"> 97 <span style="font-size: 10px; font-weight: 500; color: #586069;"> 98 FOLLOWING 99 </span> 100 <span style="font-weight: 600; color: #211F1F; font-size: 32px; line-height: 1"> 101 ${following} 102 </span> 103 </div> 104 </div> 105 </div> 106 `; 107 }); 108});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.