feat: add correct languages calculation and display

Author: 0-vortex

src/github/gql/get-user.ts

@@ -80,7 +80,7 @@ query ($username: String!, $dateSince: DateTime) {
         primaryLanguage {
           name
         }
-        languages(first: 10, orderBy: { field: SIZE, direction: DESC }) {
+        languages(first: 100, orderBy: { field: SIZE, direction: DESC }) {
           edges {
             node {
               id

src/social-card/social-card.service.ts

@@ -7,7 +7,7 @@ import userLangs from "./templates/user-langs";
 import userProfileRepos from "./templates/user-profile-repos";
 import userProfileCard from "./templates/user-profile-card";
 import { GithubService } from "../github/github.service";
-import { Repository } from "@octokit/graphql-schema";
+import { Repository, Language } from "@octokit/graphql-schema";
 
 @Injectable()
 export class SocialCardService {
@@ -17,19 +17,42 @@ export class SocialCardService {
   ) {}
 
   async getUserData (username: string): Promise<{
-    langs: string[],
+    langs: (Language & {
+      size: number,
+    })[],
+    langTotal: number,
     repos: Repository[],
     avatarUrl: string,
   }> {
+    const langs: Record<string, Language & {
+      size: number,
+    }> = {};
+    const today = (new Date);
+    const today30daysAgo = new Date((new Date).setDate(today.getDate() - 30));
     const user = await this.githubService.getUser(username);
-
-    /*
-     * console.log(user);
-     * console.log(user.repositories.nodes);
-     */
+    const langRepos = user.repositories.nodes?.filter(repo => new Date(String(repo?.pushedAt)) > today30daysAgo) as Repository[];
+    let langTotal = 0;
+
+    langRepos.map(repo => {
+      repo.languages?.edges?.map(edge => {
+        if (edge?.node.id) {
+          langTotal += edge.size;
+
+          if (!Object.keys(langs).includes(edge.node.id)) {
+            langs[edge.node.id] = {
+              ...edge.node,
+              size: edge.size,
+            };
+          } else {
+            langs[edge.node.id].size += edge.size;
+          }
+        }
+      });
+    });
 
     return {
-      langs: [],
+      langs: Array.from(Object.values(langs)),
+      langTotal,
       repos: user.topRepositories.nodes?.filter(repo => !repo?.isPrivate && repo?.owner.login !== username) as Repository[],
       avatarUrl: `${String(user.avatarUrl)}&size=150`,
     };
@@ -45,9 +68,9 @@ export class SocialCardService {
     const { html } = await import("satori-html");
     const satori = (await import("satori")).default;
 
-    const { avatarUrl, repos, langs } = await this.getUserData(username);
+    const { avatarUrl, repos, langs, langTotal } = await this.getUserData(username);
 
-    const template = html(userProfileCard(avatarUrl, username, userLangs(langs), userProfileRepos(repos)));
+    const template = html(userProfileCard(avatarUrl, username, userLangs(langs, langTotal), userProfileRepos(repos)));
 
     const robotoArrayBuffer = await readFile("node_modules/@fontsource/roboto/files/roboto-latin-ext-400-normal.woff");
 

src/social-card/templates/user-langs.ts

@@ -1,16 +1,12 @@
-import colors from "github-colors/colors.json";
+import { Language } from "@octokit/graphql-schema";
 
-const userLangs = (langs: string[], joinLiteral = "") => langs.map(lang => {
-  const colorKey = Object.keys(colors).find(key => key.toLowerCase() === lang.toLowerCase());
-  const color = colorKey ? colors[colorKey as keyof typeof colors].color ?? "#000" : "#000";
-
-  return `
-      <div style="
-        width: ${Math.round(100 / langs.length)}%;
-        height: 10%;
-        background: ${color};
-      "/>
-    `;
-}).join(joinLiteral);
+const userLangs = (langs: (Language & {
+  size: number,
+})[], totalCount = 0, joinLiteral = "") => langs.map(({ color, size }) => `
+    <div style="
+      width: ${totalCount > 0 ? Math.round( size / totalCount * 100) : 100 / langs.length}%;
+      height: 11px;
+      background: ${color ?? "#000"};
+    "/>`).join(joinLiteral);
 
 export default userLangs;

src/social-card/templates/user-profile-card.ts

@@ -160,7 +160,7 @@ const userProfileCard = (avatarUrl: string, name: string, langs: string, repos:
                     gap: 8px;
 
                     width: 1136px;
-                    height: 10.5px;
+                    height: 11px;
                 ">
                     <div style="
 
@@ -171,7 +171,7 @@ const userProfileCard = (avatarUrl: string, name: string, langs: string, repos:
                         gap: 4px;
 
                         width: 1136px;
-                        height: 10.5px;
+                        height: 11px;
 
                         border-radius: 20px;
                     ">