fix(nx-dev): ensure long titles on og images have line breaks (#18619)

nrwl · Aug 14, 2023 · 4f67f15 · 4f67f15 · vercel · Aug 14, 2023
1 parent b749b47
commit 4f67f15
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/scripts/documentation/open-graph/generate-images.ts b/scripts/documentation/open-graph/generate-images.ts
@@ -90,6 +90,9 @@ packages.map((pkg) => {
   });
 });
 
+const TITLE_LINE_HEIGHT = 60;
+const SUB_LINE_HEIGHT = 38;
+
 function createOpenGraphImage(
   backgroundImagePath: string,
   targetFolder: string,
@@ -115,7 +118,10 @@ function createOpenGraphImage(
     context.textAlign = 'center';
     context.textBaseline = 'top';
     context.fillStyle = '#0F172A';
-    context.fillText(title.toUpperCase(), 600, 220);
+    const titleLines = splitLines(context, title.toUpperCase(), 1100);
+    titleLines.forEach((line, index) => {
+      context.fillText(line, 600, 220 + index * TITLE_LINE_HEIGHT);
+    });
 
     context.font = 'normal 32px system-ui';
     context.textAlign = 'center';
@@ -124,7 +130,11 @@ function createOpenGraphImage(
 
     const lines = splitLines(context, content, 1100);
     lines.forEach((line, index) => {
-      context.fillText(line, 600, 310 + index * 55);
+      context.fillText(
+        line,
+        600,
+        310 + index * SUB_LINE_HEIGHT + titleLines.length * TITLE_LINE_HEIGHT
+      );
     });
 
     console.log('Generating: ', `${filename}.jpg`);