feat: improve performance when generating highlight card image (#60)

.env.example

@@ -8,6 +8,7 @@ DISK_PERCENTAGE=0.7
 DISK_SIZE=100
 NODE_ENV=development
 API_CODENAME=opengraph-local
+API_BASE_URL=https://beta.api.opensauced.pizza
 
 # Github
 GITHUB_PAT_USER=

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

@@ -22,7 +22,7 @@ export class HighlightCardController {
  @Get("/:id")
  @ApiOperation({
  operationId: "generateHighlightSocialCard",
- summary: "Gets latest cache aware social card link for :id or generates a new one",
+ summary: "Generates the social card image for the provided highlight ID",
  })
  @Header("Content-Type", "image/png")
  @ApiOkResponse({ type: StreamableFile, description: "Social card image" })
@@ -34,15 +34,9 @@ export class HighlightCardController {
  @Param("id", ParseIntPipe) id: number,
  @Res({ passthrough: true }) res: FastifyReply,
  ): Promise<void> {
- const { fileUrl, hasFile, needsUpdate } = await this.highlightCardService.checkRequiresUpdate(id);
+ const png = await this.highlightCardService.getHighlightCard(id);
 
- if (hasFile && !needsUpdate) {
- return res.status(HttpStatus.FOUND).redirect(fileUrl);
- }
-
- const url = await this.highlightCardService.getHighlightCard(id);
-
- return res.status(HttpStatus.FOUND).redirect(url);
+ return res.status(HttpStatus.OK).send(png);
  }
 
  @Get("/:id/metadata")

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

@@ -3,13 +3,13 @@ import { HttpService } from "@nestjs/axios";
 import { Resvg } from "@resvg/resvg-js";
 import { Repository, Language } from "@octokit/graphql-schema";
 import fs from "node:fs/promises";
+import { firstValueFrom } from "rxjs";
 
 import { GithubService } from "../../github/github.service";
 import { S3FileStorageService } from "../../s3-file-storage/s3-file-storage.service";
 import userLangs from "../templates/shared/user-langs";
 import userProfileRepos from "../templates/shared/user-repos";
 import tailwindConfig from "../templates/tailwind.config";
-import { firstValueFrom } from "rxjs";
 import highlightCardTemplate from "../templates/highlight-card.template";
 import { DbUserHighlight } from "../../github/entities/db-user-highlight.entity";
 import { DbReaction } from "../../github/entities/db-reaction.entity";
@@ -32,6 +32,7 @@ interface HighlightCardData {
 @Injectable()
 export class HighlightCardService {
  private readonly logger = new Logger(this.constructor.name);
+ private fonts: Buffer[] = [];
 
  constructor (
  private readonly httpService: HttpService,
@@ -40,20 +41,20 @@ export class HighlightCardService {
  ) {}
 
  private async getHighlightData (highlightId: number): Promise<HighlightCardData> {
- const highlightReq = await firstValueFrom(
- this.httpService.get<DbUserHighlight>(`https://api.opensauced.pizza/v1/user/highlights/${highlightId}`),
+ const highlightReq = firstValueFrom(
+ this.httpService.get<DbUserHighlight>(`${process.env.API_BASE_URL!}/v1/user/highlights/${highlightId}`),
  );
- 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`),
+ const reactionsReq = firstValueFrom(
+ this.httpService.get<DbReaction[]>(`${process.env.API_BASE_URL!}/v1/highlights/${highlightId}/reactions`),
  );
- const reactions = reactionsReq.data.reduce<number>((acc, curr) => acc + Number(curr.reaction_count), 0);
 
+ const [highlight, highlightReactions] = await Promise.all([highlightReq, reactionsReq]);
+ const { login, updated_at, url, highlight: body } = highlight.data;
  const [owner, repoName] = url.replace("https://github.com/", "").split("/");
 
- const user = await this.githubService.getUser(login);
  const repo = await this.githubService.getRepo(owner, repoName);
+ const reactions = highlightReactions.data.reduce<number>((acc, curr) => acc + Number(curr.reaction_count), 0);
 
  const langList = repo.languages?.edges?.flatMap(edge => {
  if (edge) {
@@ -68,7 +69,7 @@ export class HighlightCardService {
  body,
  login,
  reactions,
- avatarUrl: `${String(user.avatarUrl)}&size=150`,
+ avatarUrl: `https://github.com/${login}.png?size=150`,
  langs: langList,
  langTotal: repo.languages?.totalSize ?? 0,
  repo,
@@ -77,6 +78,17 @@ export class HighlightCardService {
  };
  }
 
+ private async getFonts () {
+ if (this.fonts.length === 0) {
+ const interArrayBufferReq = fs.readFile("node_modules/@fontsource/inter/files/inter-all-400-normal.woff");
+ const interArrayBufferMediumReq = fs.readFile("node_modules/@fontsource/inter/files/inter-all-500-normal.woff");
+
+ this.fonts = await Promise.all([interArrayBufferReq, interArrayBufferMediumReq]);
+ }
+
+ return this.fonts;
+ }
+
  // public only to be used in local scripts. Not for controller direct use.
  async generateCardBuffer (highlightId: number, highlightData?: HighlightCardData) {
  const { html } = await import("satori-html");
@@ -90,8 +102,7 @@ export class HighlightCardService {
  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");
- const interArrayBufferMedium = await fs.readFile("node_modules/@fontsource/inter/files/inter-all-500-normal.woff");
+ const [interArrayBuffer, interArrayBufferMedium] = await this.getFonts();
 
  const svg = await satori(template, {
  width: 1200,
@@ -133,12 +144,16 @@ export class HighlightCardService {
  };
 
  if (hasFile) {
- const lastModified = await this.s3FileStorageService.getFileLastModified(hash);
+ const lastModifiedReq = this.s3FileStorageService.getFileLastModified(hash);
+ const highlightReq = this.getHighlightData(id);
+ const metadataReq = this.s3FileStorageService.getFileMeta(hash);
+
+ const [lastModified, highlight, metadata] = await Promise.all([lastModifiedReq, highlightReq, metadataReq]);
 
  returnVal.lastModified = lastModified;
 
- const { updated_at, reactions } = await this.getHighlightData(id);
- const metadata = await this.s3FileStorageService.getFileMeta(hash);
+ const { updated_at, reactions } = highlight;
+
  const savedReactions = metadata?.["reactions-count"] ?? "0";
 
  if (lastModified && lastModified > updated_at && savedReactions === String(reactions)) {
@@ -152,7 +167,7 @@ export class HighlightCardService {
  return returnVal;
  }
 
- async getHighlightCard (id: number): Promise<string> {
+ async getHighlightCard (id: number): Promise<Buffer> {
  const { remaining } = await this.githubService.rateLimit();
 
  if (remaining < 1000) {
@@ -162,16 +177,9 @@ export class HighlightCardService {
  const highlightData = await this.getHighlightData(id);
 
  try {
- const hash = `highlights/${String(id)}.png`;
- const fileUrl = `${this.s3FileStorageService.getCdnEndpoint()}${hash}`;
-
  const { png } = await this.generateCardBuffer(id, highlightData);
 
- await this.s3FileStorageService.uploadFile(png, hash, "image/png", { "reactions-count": String(highlightData.reactions) });
-
- this.logger.debug(`Highlight ${id} did not exist in S3, generated image and uploaded to S3, redirecting`);
-
- return fileUrl;
+ return png;
  } catch (e) {
  this.logger.error(`Error generating highlight card for ${id}`, e);
 

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

@@ -35,7 +35,7 @@ export class InsightCardService {
  const maxRepoQueryIdsLenght = 10;
 
  const insightPageReq = await firstValueFrom(
- this.httpService.get<DbInsight>(`https://api.opensauced.pizza/v1/insights/${insightId}`),
+ this.httpService.get<DbInsight>(`${process.env.API_BASE_URL!}/v1/insights/${insightId}`),
  );
 
  const { repos, name, updated_at } = insightPageReq.data;
@@ -52,7 +52,7 @@ export class InsightCardService {
 
  const contributorsReq = await firstValueFrom(
  this.httpService.get<{ data: { author_login: string }[] }>(
- `https://api.opensauced.pizza/v1/contributors/search?${String(query)}`,
+ `${process.env.API_BASE_URL!}/v1/contributors/search?${String(query)}`,
  ),
  );
 

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, 171];
+const testHighlights = [124, 120, 116, 115];
 
 const folderPath = "dist/local-dev";