add: failback thumbnail with image in content

next.config.ts

@@ -5,33 +5,13 @@ const nextConfig: NextConfig = {
     remotePatterns: [
       {
         protocol: "http",
-        hostname: "localhost",
-        port: "3001",
-        pathname: "/uploads/**",
-      },
-      {
-        protocol: "https",
-        hostname: "vcci-hcm.org.vn",
-        port: "",
+        hostname: "**",
         pathname: "/**",
       },
       {
         protocol: "https",
-        hostname: "vccihcm.vn",
-        port: "",
-        pathname: "/images/**",
-      },
-      {
-        protocol: "https",
-        hostname: "img.youtube.com",
-        port: "",
-        pathname: "/vi/**",
-      },
-      {
-        protocol: "https",
-        hostname: "news.vccihcm.vn",
-        port: "",
-        pathname: "/uploads/**",
+        hostname: "**",
+        pathname: "/**",
       },
     ],
   },

src/app/(main)/[...slug]/templates/data.ts

@@ -407,6 +407,12 @@ export function resolveDynamicPostImage(thumbnail?: DynamicPostThumbnail) {
   return Links.resolveImageUrl(value);
 }
 
+const extractFirstImageFromHtml = (html?: string | null): string | null => {
+  if (!html) return null;
+  const match = html.match(/<img[^>]+src=["']([^"']+)["']/i);
+  return match?.[1]?.trim() || null;
+};
+
 export function getDynamicPostSeoImage(post: DynamicPostItem | null): string {
   if (!post) return "/thumbnail.png";
 
@@ -415,7 +421,18 @@ export function getDynamicPostSeoImage(post: DynamicPostItem | null): string {
     if (resolved && resolved !== "/thumbnail.png") return resolved;
   }
 
+  // 1. First image embedded in the raw HTML content.
+  const contentImage = extractFirstImageFromHtml(post.content);
+  if (contentImage) return Links.resolveImageUrl(contentImage);
+
+  // 2. First image embedded in any section's HTML content.
   const sections = post.content_structure?.post_content ?? [];
+  for (const section of sections) {
+    const sectionImage = extractFirstImageFromHtml(section.content);
+    if (sectionImage) return Links.resolveImageUrl(sectionImage);
+  }
+
+  // 3. First structured section image.
   for (const section of sections) {
     for (const item of section.images) {
       const url = item.image?.url;

src/app/(main)/[...slug]/templates/news-page/index.tsx

@@ -18,6 +18,7 @@ import {
   findDisplayCategoryForPost,
   getDynamicPostExcerpt,
   resolveDynamicPostImage,
+  getDynamicPostSeoImage,
 } from "../data";
 import type { DynamicCategoryRouteItem } from "../types";
 import type { DynamicPostItem } from "@/api/vcci-news/types/post";
@@ -159,7 +160,7 @@ export default function NewsPage({ category, allCategories }: NewsPageProps) {
                         >
                           <div className="relative overflow-hidden rounded-md bg-[#edf1f5] aspect-[25/15] sm:aspect-[5/3]">
                             <Image
-                              src={resolveDynamicPostImage(item.thumbnail)}
+                              src={getDynamicPostSeoImage(item)}
                               alt={item.title}
                               width={520}
                               height={360}

src/app/(main)/news/news-listing.tsx

@@ -14,6 +14,7 @@ import { Button } from "@/components/ui/button";
 import {
   buildDynamicPostHref,
   resolveDynamicPostImage,
+  getDynamicPostSeoImage,
   stripHtml,
 } from "../[...slug]/templates/data";
 
@@ -147,7 +148,7 @@ export default function NewsListing() {
                         >
                           <div className="relative aspect-[25/15] overflow-hidden rounded-md bg-[#edf1f5] sm:aspect-[5/3]">
                             <Image
-                              src={resolveDynamicPostImage(item.thumbnail)}
+                              src={getDynamicPostSeoImage(item)}
                               alt={item.title}
                               width={520}
                               height={360}