feat: add correct languages calculation and display

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;
  ">