fix: correct yoga layout double styling, remove repo icon extrenaous …

…classes
open-sauced · Apr 9, 2023 · d84015b · d84015b
1 parent 8594508
commit d84015b
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 49 deletions.
diff --git a/src/social-card/social-card.service.ts b/src/social-card/social-card.service.ts
@@ -60,7 +60,7 @@ export class SocialCardService {
     return {
       id: user.databaseId,
       name: user.name,
-      langs: Array.from(Object.values(langs)),
+      langs: Array.from(Object.values(langs)).sort((a, b) => b.size - a.size),
       langTotal,
       repos: user.topRepositories.nodes?.filter(repo => !repo?.isPrivate && repo?.owner.login !== username) as Repository[],
       avatarUrl: `${String(user.avatarUrl)}&size=150`,

diff --git a/src/social-card/templates/repo-icon-with-name.ts b/src/social-card/templates/repo-icon-with-name.ts
@@ -1,14 +1,14 @@
 const repoIconWithName = (name: string, avatarUrl: string) => `
-    <div tw="flex-row items-center p-8 h-48 border border-zinc-200 rounded-lg bg-gray-50">
-      <div tw="flex-row items-center p-0 h-32">
-        <img tw="w-32 h-32 rounded" src="${avatarUrl}"/>
-        <div tw="flex-row items-start p-0 h-32">
-          <h2 tw="h-32 not-italic font-medium text-4xl text-zinc-900">
-            ${name}
-          </h2>
-        </div>
+  <div tw="border border-zinc-200 rounded-lg bg-gray-50 h-48px p-8px" 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">
+          ${name}
+        </h2>
       </div>
     </div>
-  `;
+  </div>
+`;
 
 export default repoIconWithName;
diff --git a/src/social-card/templates/tailwind.config.ts b/src/social-card/templates/tailwind.config.ts
@@ -3,28 +3,29 @@ const tailwindConfig = {
     extend: {
       screens: {
         xs: "425px",
+
         // => @media (min-width: 425px) { ... }
 
-        "2xl": "1440px"
+        "2xl": "1440px",
+
         // => @media (min-width: 1440px) { ... }
       },
-      blur: {
-        "4xl": "5rem"
-      },
+      blur: { "4xl": "5rem" },
       spacing: {
-        98: "29rem",
-        97: "28rem",
-        99: "56rem"
+        "6px": "6px",
+        "8px": "8px",
+        "12px": "12px",
+        "16px": "16px",
+        "32px": "32px",
+        "48px": "48px",
       },
       colors: {
-        sauced: {
-          orange: "hsla(19, 100%, 50%, 1)"
-        },
+        sauced: { orange: "hsla(19, 100%, 50%, 1)" },
         gradient: {
           "dark-two": "hsl(26, 54%, 15%)",
           "dark-one": "hsl(23, 75%, 5%)",
           "orange-one": "	hsl(33, 100%, 50%)",
-          "orange-two": "	hsl(19, 100%, 50%)"
+          "orange-two": "	hsl(19, 100%, 50%)",
         },
         light: {
           slate: {
@@ -39,7 +40,7 @@ const tailwindConfig = {
             9: "hsl(206, 6.0%, 56.1%)",
             10: "hsl(206, 5.8%, 52.3%)",
             11: "hsl(206, 6.0%, 43.5%)",
-            12: "hsl(206, 24.0%, 9.0%)"
+            12: "hsl(206, 24.0%, 9.0%)",
           },
           "slate-opacity": {
             1: "hsla(210, 92.6%, 26.5%, 0.016)",
@@ -53,7 +54,7 @@ const tailwindConfig = {
             9: "hsla(206, 98.8%, 5.9%, 0.467)",
             10: "hsla(206, 99.6%, 5.4%, 0.506)",
             11: "hsla(206, 97.0%, 4.8%, 0.593)",
-            12: "hsla(202, 97.0%, 2.4%, 0.934)"
+            12: "hsla(202, 97.0%, 2.4%, 0.934)",
           },
           orange: {
             1: "hsl(24, 70.0%, 99.0%)",
@@ -67,7 +68,7 @@ const tailwindConfig = {
             9: "hsl(24, 94.0%, 50.0%)",
             10: "hsl(24, 100%, 46.5%)",
             11: "hsl(24, 100%, 37.0%)",
-            12: "hsl(15, 60.0%, 17.0%)"
+            12: "hsl(15, 60.0%, 17.0%)",
           },
           blue: {
             1: "hsl(206, 100%, 99.2%)",
@@ -81,7 +82,7 @@ const tailwindConfig = {
             9: "hsl(206, 100%, 50.0%)",
             10: "hsl(208, 100%, 47.3%)",
             11: "hsl(211, 100%, 43.2%)",
-            12: "hsl(211, 100%, 15.0%)"
+            12: "hsl(211, 100%, 15.0%)",
           },
           red: {
             1: "hsl(359, 100%, 99.4%)",
@@ -95,7 +96,7 @@ const tailwindConfig = {
             9: "hsl(358, 75.0%, 59.0%)",
             10: "hsl(358, 69.4%, 55.2%)",
             11: "hsl(358, 65.0%, 48.7%)",
-            12: "hsl(354, 50.0%, 14.6%)"
+            12: "hsl(354, 50.0%, 14.6%)",
           },
           grass: {
             1: "hsl(116, 50.0%, 98.9%)",
@@ -109,8 +110,8 @@ const tailwindConfig = {
             9: "hsl(131, 41.0%, 46.5%)",
             10: "hsl(132, 43.1%, 42.2%)",
             11: "hsl(133, 50.0%, 32.5%)",
-            12: "hsl(130, 30.0%, 14.9%)"
-          }
+            12: "hsl(130, 30.0%, 14.9%)",
+          },
         },
         dark: {
           slate: {
@@ -125,7 +126,7 @@ const tailwindConfig = {
             9: "hsl(206, 6.0%, 43.9%)",
             10: "hsl(206, 5.2%, 49.5%)",
             11: "hsl(206, 6.0%, 63.0%)",
-            12: "hsl(210, 6.0%, 93.0%)"
+            12: "hsl(210, 6.0%, 93.0%)",
           },
           "slate-opacity": {
             1: "hsla(0, 0%, 0%, 0)",
@@ -139,7 +140,7 @@ const tailwindConfig = {
             9: "hsla(207, 97.3%, 94.0%, 0.412)",
             10: "hsla(209, 99.4%, 95.2%, 0.472)",
             11: "hsla(208, 98.7%, 96.8%, 0.615)",
-            12: "hsla(211, 86.7%, 99.6%, 0.927)"
+            12: "hsla(211, 86.7%, 99.6%, 0.927)",
           },
           orange: {
             1: "hsl(30, 70.0%, 7.2%)",
@@ -153,7 +154,7 @@ const tailwindConfig = {
             9: "hsl(24, 94.0%, 50.0%)",
             10: "hsl(24, 100%, 58.5%)",
             11: "hsl(24, 100%, 62.2%)",
-            12: "hsl(24, 97.0%, 93.2%)"
+            12: "hsl(24, 97.0%, 93.2%)",
           },
           blue: {
             1: "hsl(212, 35.0%, 9.2%)",
@@ -167,7 +168,7 @@ const tailwindConfig = {
             9: "hsl(206, 100%, 50.0%)",
             10: "hsl(209, 100%, 60.6%)",
             11: "hsl(210, 100%, 66.1%)",
-            12: "hsl(206, 98.0%, 95.8%)"
+            12: "hsl(206, 98.0%, 95.8%)",
           },
           red: {
             1: "hsl(353, 23.0%, 9.8%)",
@@ -181,7 +182,7 @@ const tailwindConfig = {
             9: "hsl(358, 75.0%, 59.0%)",
             10: "hsl(358, 85.3%, 64.0%)",
             11: "hsl(358, 100%, 69.5%)",
-            12: "hsl(351, 89.0%, 96.0%)"
+            12: "hsl(351, 89.0%, 96.0%)",
           },
           grass: {
             1: "hsl(146, 30.0%, 7.4%)",
@@ -195,20 +196,18 @@ const tailwindConfig = {
             9: "hsl(131, 41.0%, 46.5%)",
             10: "hsl(131, 39.0%, 52.1%)",
             11: "hsl(131, 43.0%, 57.2%)",
-            12: "hsl(137, 72.0%, 94.0%)"
-          }
-        }
+            12: "hsl(137, 72.0%, 94.0%)",
+          },
+        },
       },
       boxShadow: {
         login: "0px 64px 100px -80px #FF5F13, 0px 16px 56px rgba(181, 107, 72, 0.19)",
         superlative: "0px 22px 24px -8px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.1)",
         paginate: "0px 1px 2px rgba(237, 95, 0, 0.05), 0px 1px 1px rgba(237, 95, 0, 0.05)",
-        input: "0px 1px 2px rgba(17, 24, 28, 0.05), 0px 1px 1px rgba(17, 24, 28, 0.05)"
+        input: "0px 1px 2px rgba(17, 24, 28, 0.05), 0px 1px 1px rgba(17, 24, 28, 0.05)",
       },
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))"
-      }
-    }
+      backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))" },
+    },
   },
 };
 

diff --git a/src/social-card/templates/user-profile-card.ts b/src/social-card/templates/user-profile-card.ts
@@ -1,12 +1,5 @@
 const userProfileCard = (avatarUrl: string, name: string, langs: string, repos: string): string => `
-  <style>
-  * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-
-  }
-
+<style>
   div {
     display: flex;
   }