diff --git a/CHANGELOG.md b/CHANGELOG.md index 27986f3..c927aa6 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index 939859b..1ab545b 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -1,12 +1,12 @@ { "name": "@open-sauced/opengraph.opensauced.pizza", - "version": "2.2.0", + "version": "2.2.1-beta.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@open-sauced/opengraph.opensauced.pizza", - "version": "2.2.0", + "version": "2.2.1-beta.1", "hasInstallScript": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 6224094..c52402f 100644 --- a/package.json +++ b/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 ", diff --git a/public/diagram.svg b/public/diagram.svg index a019c2c..b1050b1 100644 --- a/public/diagram.svg +++ b/public/diagram.svg @@ -1 +1 @@ -social-cardsocial-cards3-file-storages3-file-storagehealthhealthgithubgithubconfigconfiguser-carduser-cardtemplatestemplatesinsight-cardinsight-cardhighlight-cardhighlight-cardgqlgqlentitiesentitiessharedshareds3-file-storage...s3-file-storage...s3-file-storage...health.control...health.control...health.control...github.servi...github.servi...github.servi...api.confi...api.confi...api.confi...digital-...digital-...digital-...main.tsmain.tsmain.tsapp.module.tsapp.module.tsapp.module.tsuser-card.service.tsuser-card.service.tsuser-card.service.tsuser-card.cont...user-card.cont...user-card.cont...tailwind.config.tstailwind.config.tstailwind.config.tshighlight-c...highlight-c...highlight-c...user-prof...user-prof...user-prof...insight-...insight-...insight-...insight-card.service.tsinsight-card.service.tsinsight-card.service.tsinsight-card.c...insight-card.c...insight-card.c...highlight-card.servi...highlight-card.servi...highlight-card.servi...highlight-card...highlight-card...highlight-card...get-user.tsget-user.tsget-user.tscard-footer.tscard-footer.tscard-footer.tsinsight-f...insight-f...insight-f...user-repo...user-repo...user-repo...insight-...insight-...insight-....gql.tseach dot sized by file size \ No newline at end of file +social-cardsocial-cards3-file-storages3-file-storagehealthhealthgithubgithubconfigconfiguser-carduser-cardtemplatestemplatesinsight-cardinsight-cardhighlight-cardhighlight-cardgqlgqlentitiesentitiessharedshareds3-file-storage...s3-file-storage...s3-file-storage...health.contro...health.contro...health.contro...github.servi...github.servi...github.servi...api.confi...api.confi...api.confi...digital-...digital-...digital-...main.tsmain.tsmain.tsapp.module.tsapp.module.tsapp.module.tsuser-card.service.tsuser-card.service.tsuser-card.service.tsuser-card.cont...user-card.cont...user-card.cont...tailwind.config.tstailwind.config.tstailwind.config.tshighlight-...highlight-...highlight-...user-prof...user-prof...user-prof...insight-c...insight-c...insight-c...insight-card.service.tsinsight-card.service.tsinsight-card.service.tsinsight-card.c...insight-card.c...insight-card.c...highlight-card.servi...highlight-card.servi...highlight-card.servi...highlight-card...highlight-card...highlight-card...get-user.tsget-user.tsget-user.tscard-footer.tscard-footer.tscard-footer.tsuser-repo...user-repo...user-repo...insight-f...insight-f...insight-f...insight-...insight-...insight-...user-lan...user-lan...user-lan....gql.tseach dot sized by file size \ No newline at end of file diff --git a/src/social-card/highlight-card/highlight-card.service.ts b/src/social-card/highlight-card/highlight-card.service.ts index 478fdcc..abff17e 100644 --- a/src/social-card/highlight-card/highlight-card.service.ts +++ b/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(`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(`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"); diff --git a/src/social-card/insight-card/insight-card.service.ts b/src/social-card/insight-card/insight-card.service.ts index 374325b..a2f0a09 100644 --- a/src/social-card/insight-card/insight-card.service.ts +++ b/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"); diff --git a/src/social-card/templates/highlight-card.template.ts b/src/social-card/templates/highlight-card.template.ts index 6ac49ee..00c8274 100644 --- a/src/social-card/templates/highlight-card.template.ts +++ b/src/social-card/templates/highlight-card.template.ts @@ -3,7 +3,6 @@ import cardStyleSetup from "./shared/card-style-setup"; const highlightCardTemplate = ( avatarUrl: string, - title: string, body: string, langs: string, repos: string, @@ -11,26 +10,24 @@ const highlightCardTemplate = ( ): string => ` ${cardStyleSetup} -
-
-
- -
- -
-

- ${title.length > 50 ? `${title.slice(0, 50)}...` : title} -

-

+

+
+
+
+

+ OpenSauced Highlight +

+

${body.length > 108 ? `${body.slice(0, 108)}...` : body} -

+

+
+
+ +
-
- -
-
+
${cardFooter(langs, repos, reactions)}
`; diff --git a/src/social-card/templates/insight-card.template.ts b/src/social-card/templates/insight-card.template.ts index 863b37d..c8b0b9f 100644 --- a/src/social-card/templates/insight-card.template.ts +++ b/src/social-card/templates/insight-card.template.ts @@ -8,11 +8,11 @@ const insightCardTemplate = (pageName: string, contributors: string, repos: stri

- ${pageName}: Insights + OpenSauced Insights

+

${pageName}: Insights

- ${insightFooter(contributors, repos)}
`; diff --git a/src/social-card/templates/shared/card-footer.ts b/src/social-card/templates/shared/card-footer.ts index 87f068c..dff5c71 100644 --- a/src/social-card/templates/shared/card-footer.ts +++ b/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) => ` -
-
+
+
${repos}
- ${ - reactions - ? ` + +
- + ${ + reactions + ? ` ${reactions} Reactions - -
- ` + ` : "" } + +
+ +
+
+
-
-
+
+
${langs}
diff --git a/src/social-card/templates/shared/insight-repos.ts b/src/social-card/templates/shared/insight-repos.ts index 2e6885c..734c8ad 100644 --- a/src/social-card/templates/shared/insight-repos.ts +++ b/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 ? "..." : ""}`, diff --git a/src/social-card/templates/shared/user-langs.ts b/src/social-card/templates/shared/user-langs.ts index 17d8e77..72fe47f 100644 --- a/src/social-card/templates/shared/user-langs.ts +++ b/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 `
`; + return `
`; }) .join(joinLiteral); }; diff --git a/src/social-card/templates/shared/user-repos.ts b/src/social-card/templates/shared/user-repos.ts index faedf7d..1287509 100644 --- a/src/social-card/templates/shared/user-repos.ts +++ b/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 - ? `

+${repoList.length - limit}

` - : ``}`; + return `${repoList.slice(0, limit).join("")}${ + repoList.length > limit + ? `

+${repoList.length - limit}

` + : `` + }`; }; export default userProfileRepos; diff --git a/src/social-card/templates/user-profile-card.template.ts b/src/social-card/templates/user-profile-card.template.ts index 69274ac..45aa0c7 100644 --- a/src/social-card/templates/user-profile-card.template.ts +++ b/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} -
-
- +
+
+
+

+ ${name} +

+ +
-

- ${name} -

-
- ${cardFooter(langs, repos)}
`; diff --git a/test/local-dev/HighlightCards.ts b/test/local-dev/HighlightCards.ts index d762424..90b5db6 100644 --- a/test/local-dev/HighlightCards.ts +++ b/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";