fix: correct user languages sizing issues

open-sauced · Apr 9, 2023 · 5846c42 · 5846c42
1 parent fdc553c
commit 5846c42
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 23 deletions.
diff --git a/src/social-card/templates/repo-icon-with-name.ts b/src/social-card/templates/repo-icon-with-name.ts
@@ -1,9 +1,9 @@
 const repoIconWithName = (name: string, avatarUrl: string) => `
-  <div tw="border border-zinc-200 rounded-lg bg-gray-50 h-48px p-8px" style="gap: 12px">
+  <div tw="h-48px p-8px border border-zinc-200 rounded-lg bg-gray-50" style="gap: 12px">
     <div tw="h-32px" style="gap: 6px">
       <img tw="w-32px h-32px rounded" src="${avatarUrl}"/>
       <div tw="h-32px" style="gap: 2px">
-        <h2 tw="m-0 not-italic font-medium text-32px leading-32px text-zinc-900">
+        <h2 tw="m-0 font-medium text-32px leading-32px text-zinc-900">
           ${name}
         </h2>
       </div>

diff --git a/src/social-card/templates/user-langs.ts b/src/social-card/templates/user-langs.ts
@@ -1,12 +1,12 @@
 import { Language } from "@octokit/graphql-schema";
 
-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);
+const userLangs = (langs: (Language & { size: number })[], totalCount = 0, joinLiteral = "") =>
+  langs
+    .map(({ color, size }) => {
+      const realPercent = size / totalCount * 100;
+
+      return `<div tw="h-12px ${color ? `bg-[${color}]` : 'bg-black'}" style="width: ${totalCount > 0 ? realPercent : 100 / langs.length}%"/>`
+    })
+    .join(joinLiteral);
 
 export default userLangs;
diff --git a/src/social-card/templates/user-profile-repos.ts b/src/social-card/templates/user-profile-repos.ts
@@ -6,19 +6,7 @@ const userProfileRepos = (repos: Repository[]): string => {
     repoIconWithName(`${name.substring(0, 15).replace(/\.+$/, "")}${name.length > 15 ? "..." : ""}`, `${String(avatarUrl)}&size=40`));
 
   return `${repoList.slice(0, 4).join("")}${repoList.length > 4
-    ? `<h2 style="
-        width: 39px;
-        height: 37px;
-        font-family: 'Inter';
-        font-style: normal;
-        font-weight: 500;
-        font-size: 32px;
-        line-height: 115%;
-        letter-spacing: -0.02em;
-        color: #687076;
-      ">
-          +${repoList.length - 2}
-      </h2>`
+    ? `<h2 tw="m-0 font-medium text-32px leading-32px text-zinc-900">+${repoList.length - 2}</h2>`
     : ``}`;
 };