fix(nx-dev): OG image meta tag (#27195)

nx-dev/data-access-documents/src/lib/blog.api.ts

@@ -1,5 +1,5 @@
-import { readFileSync, readdirSync } from 'fs';
-import { join, basename } from 'path';
+import { readFileSync, readdirSync, accessSync, constants } from 'fs';
+import { join, basename, parse, resolve } from 'path';
 import { extractFrontmatter } from '@nx/nx-dev/ui-markdoc';
 import { sortPosts } from './blog.util';
 import { BlogPostDataEntry } from './blog.model';
@@ -42,6 +42,8 @@ export class BlogApi {
       const content = await readFile(filePath, 'utf8');
       const frontmatter = extractFrontmatter(content);
       const slug = this.calculateSlug(filePath, frontmatter);
+      const { image, type } = this.determineOgImage(frontmatter.cover_image);
+
       const post = {
         content,
         title: frontmatter.title ?? null,
@@ -56,6 +58,8 @@ export class BlogApi {
         tags: frontmatter.tags ?? [],
         reposts: frontmatter.reposts ?? [],
         pinned: frontmatter.pinned ?? false,
+        ogImage: image,
+        ogImageType: type,
         filePath,
         slug,
       };
@@ -81,6 +85,7 @@ export class BlogApi {
       const content = readFileSync(filePath, 'utf8');
       const frontmatter = extractFrontmatter(content);
       const slug = this.calculateSlug(filePath, frontmatter);
+      const { image, type } = this.determineOgImage(frontmatter.cover_image);
       const post = {
         content,
         title: frontmatter.title ?? null,
@@ -95,6 +100,8 @@ export class BlogApi {
         tags: frontmatter.tags ?? [],
         reposts: frontmatter.reposts ?? [],
         pinned: frontmatter.pinned ?? false,
+        ogImage: image,
+        ogImageType: type,
         filePath,
         slug,
       };
@@ -143,4 +150,50 @@ export class BlogApi {
       }
     }
   }
+
+  private fileExists(filePath: string): boolean {
+    try {
+      accessSync(filePath, constants.F_OK);
+      return true;
+    } catch (error) {
+      return false;
+    }
+  }
+
+  private determineOgImage(imagePath: string): {
+    image: string;
+    type: string;
+  } {
+    const allowedExtensions = ['.png', '.webp', '.jpg', '.jpeg'];
+    const defaultImage = 'https://nx.dev/socials/nx-media.png';
+    const defaultType = 'png';
+
+    if (!imagePath) {
+      return { image: defaultImage, type: defaultType };
+    }
+    const { ext } = parse(imagePath);
+
+    if (!allowedExtensions.includes(ext)) {
+      const foundExt = allowedExtensions.find((allowedExt) => {
+        const ogImagePath = imagePath.replace(ext, allowedExt);
+        return this.fileExists(
+          join(
+            'public',
+            'documentation',
+            resolve(this.options.blogRoot, ogImagePath)
+          )
+        );
+      });
+
+      if (!foundExt) {
+        return { image: defaultImage, type: defaultType };
+      }
+
+      return {
+        image: imagePath.replace(ext, foundExt),
+        type: foundExt.replace('.', ''),
+      };
+    }
+    return { image: imagePath, type: ext.replace('.', '') };
+  }
 }

nx-dev/data-access-documents/src/lib/blog.model.ts

@@ -11,6 +11,8 @@ export type BlogPostDataEntry = {
   pinned?: boolean;
   filePath: string;
   slug: string;
+  ogImage: string;
+  ogImageType: string;
 };
 
 export type BlogAuthor = {

nx-dev/data-access-documents/src/lib/blog.util.spec.ts

@@ -62,6 +62,8 @@ function createPost(data: {
     title: data.title,
     description: '',
     authors: [],
+    ogImage: '',
+    ogImageType: '',
     cover_image: '',
     tags: [],
     reposts: [],

nx-dev/nx-dev/app/blog/[slug]/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata, ResolvingMetadata } from 'next';
 import { blogApi } from '../../../lib/blog.api';
 import { BlogDetails } from '@nx/nx-dev/ui-blog';
 import { DefaultLayout } from '@nx/nx-dev/ui-common';
-import { parse } from 'path';
+
 interface BlogPostDetailProps {
   params: { slug: string };
 }
@@ -14,9 +14,6 @@ export async function generateMetadata(
   const post = await blogApi.getBlogPostBySlug(slug);
   const previousImages = (await parent).openGraph?.images ?? [];
 
-  const postCoverImage = post?.cover_image || 'nx-media';
-  const ogImage = `${parse(postCoverImage).name}.png`;
-
   return {
     title: `${post.title} | Nx Blog`,
     description: 'Latest news from the Nx & Nx Cloud core team',
@@ -26,11 +23,11 @@ export async function generateMetadata(
       description: post.description,
       images: [
         {
-          url: ogImage,
+          url: post.ogImage,
           width: 800,
           height: 421,
           alt: 'Nx: Smart, Fast and Extensible Build System',
-          type: 'image/png',
+          type: `image/${post.ogImageType}`,
         },
         ...previousImages,
       ],