fix build by adding quotes to avatar img src in satori template-html

Author: nemanjam

src/libs/api/open-graph/template-html.ts

@@ -15,6 +15,8 @@ const templateHtml = ({ title, heroImageUrl, avatarImageUrl, siteUrl }: Template
 
   const randomGradient = getRandomGradient();
 
+  // important: <img src="..." /> must have quotes, and all attributes too, or build will fail
+
   return html`
     <div class="flex p-8 h-full" style="${randomGradient}">
       <div class="flex w-full flex-row justify-between text-slate-900">
@@ -26,7 +28,7 @@ const templateHtml = ({ title, heroImageUrl, avatarImageUrl, siteUrl }: Template
           <!-- avatar and site -->
           <div class="flex items-center ${isLongSiteUrl ? 'flex-col justify-end items-start' : ''}">
             <img
-              src=${avatarImageUrl}
+              src="${avatarImageUrl}"
               width="120"
               height="120"
               class="rounded-full mr-8 border-2 border-gray-300"

src/libs/api/open-graph/template-props.ts

@@ -15,55 +15,12 @@ import image404 from '@/assets/images/pages/image404.jpg';
 const { SITE_URL } = CONFIG_CLIENT;
 const { AVATAR, OG_FOLDER, IMAGE_404 } = FILE_PATHS;
 
-// todo: no urls at build time
-// ! must use absolute file paths
-export const getTemplatePropsUrl = (frontmatterProps: FrontmatterProps): TemplateProps => {
-  const { title, heroImage, pageId } = frontmatterProps;
-
-  // avatarImage
-  const avatarImageUrl = avatarImage.src;
-
-  // heroImage
-  let heroImageUrl: string;
-
-  switch (true) {
-    // from mdx frontmatter
-    case Boolean(heroImage.src):
-      heroImageUrl = `${SITE_URL}${heroImage.src}`; // todo: fix this, path from mdx frontmatter
-      break;
-    // hardcoded in 404.mdx frontmatter
-    case pageId === 'page404':
-      heroImageUrl = image404.src;
-      break;
-
-    // fallback to random default image
-    default:
-      heroImageUrl = `${SITE_URL}${getRandomImageUrl()}`;
-      break;
-  }
-
-  // ? all fail
-  // const dummyImageAbsolutePath =
-  //   '/home/username/Desktop/nemanjam.github.io/src/assets/images/default/open-graph/amfi1.jpg';
-  // const dummyImageUrl = 'https://placehold.co/600x400.png';
-  // const dummyImageBase64Url =
-  //   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAusB9Y1bN+UAAAAASUVORK5CYII=';
-
-  const templateProps = {
-    title,
-    heroImageUrl: heroImageUrl,
-    avatarImageUrl: avatarImageUrl,
-    siteUrl: trimHttpProtocol(SITE_URL),
-  };
-
-  return templateProps;
-};
-
 // original base64 implementation
 export const getTemplatePropsBase64 = async (
   frontmatterProps: FrontmatterProps
 ): Promise<TemplateProps> => {
   const { title, heroImage, pageId } = frontmatterProps;
+
   // avatarImage
   const avatarImageBase64Url = await getBase64Image(AVATAR);
 
@@ -97,26 +54,8 @@ export const getTemplatePropsBase64 = async (
   return templateProps;
 };
 
-/*-------------------------------- url utils (ImageMetadata) ------------------------------*/
-
-export const getOpenGraphImagesMetadata = (): ImageMetadata[] => {
-  const imageModules = import.meta.glob<{ default: ImageMetadata }>(
-    // cant be even variable
-    '/src/assets/images/default/open-graph/*.jpg',
-    { eager: true }
-  );
-
-  // convert map to array
-  const imagesMetadata = Object.keys(imageModules).map((path) => imageModules[path].default);
-
-  return imagesMetadata;
-};
-
-export const getRandomImageUrl = () => getRandomElementFromArray(getOpenGraphImagesMetadata()).src;
-
 /*-------------------------------- base64 utils ------------------------------*/
 
-// Satori started to fail with base64 url
 export const getBase64Image = async (imagePath: string): Promise<string> => {
   const imageData = await fs.readFile(imagePath);
 
@@ -166,3 +105,59 @@ export const getRandomImagePath = async (folderPath: string): Promise<string> =>
 
   return randomImageWithPath;
 };
+
+/*-------------------------------- unused code bellow ------------------------------*/
+
+// todo: this cant work, no urls at build time
+// ! must use absolute file paths
+export const getTemplatePropsUrl = (frontmatterProps: FrontmatterProps): TemplateProps => {
+  const { title, heroImage, pageId } = frontmatterProps;
+
+  // avatarImage
+  const avatarImageUrl = avatarImage.src;
+
+  // heroImage
+  let heroImageUrl: string;
+
+  switch (true) {
+    // from mdx frontmatter
+    case Boolean(heroImage.src):
+      heroImageUrl = `${SITE_URL}${heroImage.src}`; // todo: fix this, path from mdx frontmatter
+      break;
+    // hardcoded in 404.mdx frontmatter
+    case pageId === 'page404':
+      heroImageUrl = image404.src;
+      break;
+
+    // fallback to random default image
+    default:
+      heroImageUrl = `${SITE_URL}${getRandomImageUrl()}`;
+      break;
+  }
+
+  const templateProps = {
+    title,
+    heroImageUrl: heroImageUrl,
+    avatarImageUrl: avatarImageUrl,
+    siteUrl: trimHttpProtocol(SITE_URL),
+  };
+
+  return templateProps;
+};
+
+/*-------------------------------- url utils (ImageMetadata) ------------------------------*/
+
+export const getOpenGraphImagesMetadata = (): ImageMetadata[] => {
+  const imageModules = import.meta.glob<{ default: ImageMetadata }>(
+    // cant be even variable
+    '/src/assets/images/default/open-graph/*.jpg',
+    { eager: true }
+  );
+
+  // convert map to array
+  const imagesMetadata = Object.keys(imageModules).map((path) => imageModules[path].default);
+
+  return imagesMetadata;
+};
+
+export const getRandomImageUrl = () => getRandomElementFromArray(getOpenGraphImagesMetadata()).src;

src/pages/api/open-graph/[...route].png.ts

@@ -30,7 +30,6 @@ export const GET: APIRoute = async ({ props }: APIContext) => {
   // resize images in template in CSS only, not in sharp
 
   const templateProps = await getTemplatePropsBase64(props.page);
-  // const templateProps = getTemplatePropsUrl(props.page);
 
   const fontData = await fs.readFile(`${FONTS_FOLDER}inter-regular.woff`);