Merge pull request #58 from open-sauced/beta

chore: release 2.2.1

CHANGELOG.md

@@ -5,6 +5,13 @@
 
 > All notable changes to this project will be documented in this file
 
+### [2.2.1-beta.1](https://github.com/open-sauced/opengraph.opensauced.pizza/compare/v2.2.0...v2.2.1-beta.1) (2023-06-22)
+
+
+### 🧑‍💻 Code Refactoring
+
+* update social card design ([#52](https://github.com/open-sauced/opengraph.opensauced.pizza/issues/52)) ([6a46be1](https://github.com/open-sauced/opengraph.opensauced.pizza/commit/6a46be144b40ca4b6d406236ad71e42ed509ae90))
+
 ## [2.2.0](https://github.com/open-sauced/opengraph.opensauced.pizza/compare/v2.1.1...v2.2.0) (2023-06-20)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-sauced/opengraph.opensauced.pizza",
-  "version": "2.2.0",
+  "version": "2.2.1-beta.1",
   "keywords": [],
   "description": "OpenGraph dot Open Sauced is a general purpose social card generator",
   "author": "Ahmed Mohamed Atwa <Ahmedatwa866@yahoo.com>",

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

@@ -16,7 +16,7 @@ import { DbReaction } from "../../github/entities/db-reaction.entity";
 import { RequiresUpdateMeta } from "../user-card/user-card.service";
 
 interface HighlightCardData {
-  title: string;
+  login: string;
   body: string;
   reactions: number;
   avatarUrl: string;
@@ -43,7 +43,7 @@ export class HighlightCardService {
     const highlightReq = await firstValueFrom(
       this.httpService.get<DbUserHighlight>(`https://api.opensauced.pizza/v1/user/highlights/${highlightId}`),
     );
-    const { login, title, highlight: body, updated_at, url } = highlightReq.data;
+    const { login, updated_at, url, highlight: body } = highlightReq.data;
 
     const reactionsReq = await firstValueFrom(
       this.httpService.get<DbReaction[]>(`https://api.opensauced.pizza/v1/highlights/${highlightId}/reactions`),
@@ -65,8 +65,8 @@ export class HighlightCardService {
     }) as (Language & { size: number })[];
 
     return {
-      title,
       body,
+      login,
       reactions,
       avatarUrl: `${String(user.avatarUrl)}&size=150`,
       langs: langList,
@@ -82,12 +82,12 @@ export class HighlightCardService {
     const { html } = await import("satori-html");
     const satori = (await import("satori")).default;
 
-    const { title, body, reactions, avatarUrl, repo, langs, langTotal } = highlightData
+    const { reactions, body, avatarUrl, repo, langs, langTotal } = highlightData
       ? highlightData
       : await this.getHighlightData(highlightId);
 
     const template = html(
-      highlightCardTemplate(avatarUrl, title, body, userLangs(langs, langTotal), userProfileRepos([repo], 2), reactions),
+      highlightCardTemplate(avatarUrl, body, userLangs(langs, langTotal), userProfileRepos([repo], 2), reactions),
     );
 
     const interArrayBuffer = await fs.readFile("node_modules/@fontsource/inter/files/inter-all-400-normal.woff");

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

@@ -85,7 +85,7 @@ export class InsightCardService {
 
     const { pageName, repos, contributors } = insightData ? insightData : await this.getInsightData(insightId);
 
-    const template = html(insightCardTemplate(pageName, insightContributors(contributors), insightRepos(repos, 2)));
+    const template = html(insightCardTemplate(pageName, insightContributors(contributors), insightRepos(repos, 3)));
 
     const interArrayBuffer = await fs.readFile("node_modules/@fontsource/inter/files/inter-all-400-normal.woff");
     const interArrayBufferMedium = await fs.readFile("node_modules/@fontsource/inter/files/inter-all-500-normal.woff");

src/social-card/templates/highlight-card.template.ts

@@ -3,34 +3,31 @@ import cardStyleSetup from "./shared/card-style-setup";
 
 const highlightCardTemplate = (
   avatarUrl: string,
-  title: string,
   body: string,
   langs: string,
   repos: string,
   reactions: number,
 ): string => `
   ${cardStyleSetup}
 
-  <div tw="flex-col justify-between w-1200px h-627px bg-white rounded-2xl p-32px pt-48px">
-    <div style="gap: 16px;">
-      <div tw="p-2.5 pt-5" style="gap: 10px;">
-        <img tw="w-132px h-132px border border-sauced-orange rounded-full" src="${avatarUrl}"/>
-      </div>
-
-      <div tw="w-906px flex-col flex-nowrap" style="gap: -10px;">
-        <h1 tw="text-72px leading-72px text-black tracking-tight" style="width: 926px; font-weight: 500;">
-          ${title.length > 50 ? `${title.slice(0, 50)}...` : title}
-        </h1>
-        <p tw="font-normal text-48px text-light-slate-11 tracking-tight">
+  <div tw="flex-col justify-between bg-white w-1200px h-627px">
+    <div tw="flex-col justify-between w-full overflow-hidden pt-48px px-32px">
+      <div tw="flex-row justify-between" style="gap: 16px;">
+        <div tw="w-906px flex-col flex-nowrap" style="gap: -10px;">
+          <h1 tw="text-72px leading-72px text-black tracking-tight" style="width: 926px; font-weight: 500;">
+               OpenSauced Highlight
+          </h1>
+          <p tw="font-normal text-48px text-light-slate-11 tracking-tight">
           ${body.length > 108 ? `${body.slice(0, 108)}...` : body}
-        </p>
+          </p>
+        </div>
+        <div>
+          <img tw="w-132px h-132px border border-sauced-orange rounded-full" src="${avatarUrl}"/>
+        </div>
       </div>
 
-      <div>
-        <img tw="w-46px h-46px border border-white rounded" src="https://raw.githubusercontent.com/open-sauced/assets/d9a0d5a317036084aa3f5f4e20cdfbe58dc37377/svgs/slice-Orange-Gradient.svg"/>
-      </div>
-    </div>
 
+    </div>
     ${cardFooter(langs, repos, reactions)}
   </div>`;
 

src/social-card/templates/insight-card.template.ts

@@ -8,11 +8,11 @@ const insightCardTemplate = (pageName: string, contributors: string, repos: stri
     <div tw="">
       <div tw="w-full flex-col flex-nowrap" style="gap: -10px;">
         <h1 tw="font-medium text-72px leading-72px text-zinc-900 tracking-tight" style="width: 100%;">
-          ${pageName}: Insights
+          OpenSauced Insights
         </h1>
+        <p tw="font-medium text-48px tracking-tight"> ${pageName}: Insights </p>
       </div>
     </div>
-
     ${insightFooter(contributors, repos)}
   </div>`;
 

src/social-card/templates/shared/card-footer.ts

@@ -1,28 +1,33 @@
 const heartIconData = `data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.73649 2.5C3.82903 2.5 1 5.052 1 8.51351C1 12.3318 3.80141 15.5735 6.38882 17.7763C7.70549 18.8973 9.01844 19.7929 10.0004 20.4077C10.4922 20.7157 10.9029 20.9544 11.1922 21.1169C11.4093 21.2388 11.5582 21.318 11.6223 21.3516C11.7407 21.4132 11.8652 21.4527 12 21.4527C12.1193 21.4527 12.2378 21.4238 12.3438 21.3693C12.5003 21.2886 12.6543 21.2031 12.8078 21.1169C13.0971 20.9544 13.5078 20.7157 13.9996 20.4077C14.9816 19.7929 16.2945 18.8973 17.6112 17.7763C20.1986 15.5735 23 12.3318 23 8.51351C23 5.052 20.171 2.5 17.2635 2.5C14.9702 2.5 13.1192 3.72621 12 5.60482C10.8808 3.72621 9.02981 2.5 6.73649 2.5ZM6.73649 4C4.65746 4 2.5 5.88043 2.5 8.51351C2.5 11.6209 4.8236 14.4738 7.36118 16.6342C8.60701 17.6948 9.85656 18.5479 10.7965 19.1364C11.2656 19.4301 11.6557 19.6567 11.9269 19.8091L12 19.85L12.0731 19.8091C12.3443 19.6567 12.7344 19.4301 13.2035 19.1364C14.1434 18.5479 15.393 17.6948 16.6388 16.6342C19.1764 14.4738 21.5 11.6209 21.5 8.51351C21.5 5.88043 19.3425 4 17.2635 4C15.1581 4 13.4627 5.38899 12.7115 7.64258C12.6094 7.94883 12.3228 8.15541 12 8.15541C11.6772 8.15541 11.3906 7.94883 11.2885 7.64258C10.5373 5.38899 8.84185 4 6.73649 4Z' fill='%2324292F'/%3e%3c/svg%3e`;
 
 const cardFooter = (langs: string, repos: string, reactions?: number) => `
-    <div tw="flex-col" style="gap: 8px;">
-      <div tw="h-48px ${!reactions ? "items-center" : "justify-between"}" style="gap: 8px;">
+    <div tw="flex-col " style="gap: 30px;">
+      <div tw="h-48px px-32px items-center justify-between">
         <div tw="h-48px items-center" style="gap: 8px;">
           ${repos}
         </div>
 
-        ${
-  reactions
-    ? `
+
+
           <div tw="h-48px items-center" style="gap: 12px;">
-            <img tw="w-32px h-32px" width="1" height="1" src="${heartIconData}"/>
+            ${
+  reactions
+    ? ` <img tw="w-32px h-32px" width="1" height="1" src="${heartIconData}"/>
             <span tw="font-medium text-32px text-black">
               ${reactions} Reactions
-            </span>
-          </div>
-        `
+            </span>`
     : ""
 }
+
+            <div>
+               <img tw="w-46px h-46px rounded" src="https://raw.githubusercontent.com/open-sauced/assets/d9a0d5a317036084aa3f5f4e20cdfbe58dc37377/svgs/slice-Orange-Gradient.svg"/>
+            </div>
+          </div>
+
       </div>
 
-      <div tw="flex-col h-12px rounded-full justify-center overflow-hidden">
-        <div tw="h-12px " style="gap: 3px;">
+      <div tw="flex-col rounded-b-2xl h-32px justify-center overflow-hidden">
+        <div tw="h-32px ">
           ${langs}
         </div>
       </div>

src/social-card/templates/shared/insight-repos.ts

@@ -1,7 +1,7 @@
 import repoIconWithName from "./repo-icon-with-name";
 
 const insightRepos = (repos: { repoName: string; avatarUrl: string }[], limit: number): string => {
-  const charLimit = limit === 1 ? 60 : repos.length === 1 ? 60 : 15;
+  const charLimit = limit === 1 ? 60 : repos.length === 1 ? 60 : 9;
   const repoList = repos.map(({ repoName, avatarUrl }) =>
     repoIconWithName(
       `${repoName.substring(0, charLimit).replace(/\.+$/, "")}${repoName.length > charLimit ? "..." : ""}`,

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

@@ -1,14 +1,15 @@
 import { Language } from "@octokit/graphql-schema";
 
 const userLangs = (langs: (Language & { size: number })[], totalCount = 0, joinLiteral = "") => {
-  const filteredLangs = langs
-    .filter(({ size }) => size > 0 && (size / totalCount) * 100 >= 0.5);
+  const filteredLangs = langs.filter(({ size }) => size > 0 && (size / totalCount) * 100 >= 0.5);
 
   return filteredLangs
     .map(({ color, size }) => {
-      const realPercent = size / totalCount * 100;
+      const realPercent = (size / totalCount) * 100;
 
-      return `<div tw="h-12px ${color ? `bg-[${color}]` : "bg-black"}" style="width: ${totalCount > 0 ? realPercent : 100 / filteredLangs.length}%"/>`;
+      return `<div tw="h-32px ${color ? `bg-[${color}]` : "bg-black"}" style="width: ${
+        totalCount > 0 ? realPercent : 100 / filteredLangs.length
+      }%"/>`;
     })
     .join(joinLiteral);
 };

src/social-card/templates/shared/user-repos.ts

@@ -2,13 +2,18 @@ import repoIconWithName from "./repo-icon-with-name";
 import { Repository } from "@octokit/graphql-schema";
 
 const userProfileRepos = (repos: Repository[], limit: number): string => {
-  const charLimit = limit === 1 ? 60 : repos.length === 1 ? 60 : 15;
+  const charLimit = limit === 1 ? 60 : repos.length === 1 ? 60 : 9;
   const repoList = repos.map(({ name, owner: { avatarUrl } }) =>
-    repoIconWithName(`${name.substring(0, charLimit).replace(/\.+$/, "")}${name.length > charLimit ? "..." : ""}`, `${String(avatarUrl)}&size=40`));
+    repoIconWithName(
+      `${name.substring(0, charLimit).replace(/\.+$/, "")}${name.length > charLimit ? "..." : ""}`,
+      `${String(avatarUrl)}&size=40`,
+    ));
 
-  return `${repoList.slice(0, limit).join("")}${repoList.length > limit
-    ? `<h2 tw="m-0 font-medium text-32px leading-32px text-zinc-900">+${repoList.length - limit}</h2>`
-    : ``}`;
+  return `${repoList.slice(0, limit).join("")}${
+    repoList.length > limit
+      ? `<h2 tw="m-0 font-medium text-32px leading-32px text-zinc-900">+${repoList.length - limit}</h2>`
+      : ``
+  }`;
 };
 
 export default userProfileRepos;

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

@@ -4,17 +4,17 @@ import cardStyleSetup from "./shared/card-style-setup";
 const userProfileCardTemplate = (avatarUrl: string, name: string, langs: string, repos: string): string => `
   ${cardStyleSetup}
 
-  <div tw="flex-col justify-between w-1200px h-627px bg-white rounded-2xl p-32px pt-48px">
-    <div style="gap: 16px;">
-      <img tw="w-134px h-134px border border-sauced-orange rounded-full" src="${avatarUrl}"/>
+  <div tw="flex-col justify-between rounded-2xl pt-48px bg-white w-1200px h-627px">
+    <div tw="flex-col justify-between w-full bg-white px-32px ">
+      <div tw="justify-between items-center" style="gap: 16px;">
+        <h1 tw="h-134px font-medium text-96px leading-134px text-zinc-900 tracking-tight" style="width: 926px;">
+          ${name}
+        </h1>
+        <img tw="w-134px h-134px border border-sauced-orange rounded-full" src="${avatarUrl}"/>
+      </div>
 
-      <h1 tw="h-134px font-medium text-96px leading-134px text-zinc-900 tracking-tight" style="width: 926px;">
-        ${name}
-      </h1>
 
-      <img tw="w-48px h-48px border border-white rounded" src="https://raw.githubusercontent.com/open-sauced/assets/d9a0d5a317036084aa3f5f4e20cdfbe58dc37377/svgs/slice-Orange-Gradient.svg"/>
     </div>
-
     ${cardFooter(langs, repos)}
   </div>`;
 

test/local-dev/HighlightCards.ts

@@ -4,7 +4,7 @@ import { existsSync } from "node:fs";
 import { mkdir, writeFile } from "fs/promises";
 import { HighlightCardService } from "../../src/social-card/highlight-card/highlight-card.service";
 
-const testHighlights = [102, 101, 103];
+const testHighlights = [102, 101, 103, 171];
 
 const folderPath = "dist/local-dev";