[WIP] Add hero image for social preview in blog posts (#6379)

Copilot · franciscojavierarceo · web-flow · commit bedc0effe287 · 2026-05-07T09:53:50.000-04:00
* Initial plan * fix: use blog hero image for social preview metadata Agent-Logs-Url: https://github.com/feast-dev/feast/sessions/8c33bcc6-0cd4-4222-95a1-bfa02f136b5b Co-authored-by: franciscojavierarceo <4163062+franciscojavierarceo@users.noreply.github.com> * fix: harden hero image extraction for blog social tags Agent-Logs-Url: https://github.com/feast-dev/feast/sessions/8c33bcc6-0cd4-4222-95a1-bfa02f136b5b Co-authored-by: franciscojavierarceo <4163062+franciscojavierarceo@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: franciscojavierarceo <4163062+franciscojavierarceo@users.noreply.github.com>
diff --git a/infra/website/src/layouts/BaseLayout.astro b/infra/website/src/layouts/BaseLayout.astro
@@ -4,9 +4,17 @@ import '../styles/global.css';
 interface Props {
   title: string;
   description?: string;
+  socialImage?: string;
+  ogUrl?: string;
 }
 
-const { title, description = "Feast is an end-to-end open source feature store for machine learning. It allows teams to define, manage, discover, and serve features." } = Astro.props;
+const defaultSocialImage = "https://feast.dev/wp-content/uploads/2023/01/feast-og@2x.png";
+const {
+  title,
+  description = "Feast is an end-to-end open source feature store for machine learning. It allows teams to define, manage, discover, and serve features.",
+  socialImage = defaultSocialImage,
+  ogUrl = "https://feast.dev/",
+} = Astro.props;
 ---
 
 <!DOCTYPE html>
@@ -25,16 +33,16 @@ const { title, description = "Feast is an end-to-end open source feature store f
     <meta property="og:type" content="website">
     <meta property="og:title" content={title}>
     <meta property="og:description" content={description}>
-    <meta property="og:url" content="https://feast.dev/">
+    <meta property="og:url" content={ogUrl}>
     <meta property="og:site_name" content="Feast">
-    <meta property="og:image" content="https://feast.dev/wp-content/uploads/2023/01/feast-og@2x.png">
+    <meta property="og:image" content={socialImage}>
     <meta property="og:image:width" content="1201">
     <meta property="og:image:height" content="630">
     <meta property="og:image:type" content="image/png">
     
     <!-- Twitter Card Meta Tags -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:image" content="https://feast.dev/wp-content/uploads/2023/01/feast-og@2x.png">
+    <meta name="twitter:image" content={socialImage}>
 
     <!-- Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&family=IBM+Plex+Sans:wght@400&display=swap" rel="stylesheet">
@@ -51,4 +59,4 @@ const { title, description = "Feast is an end-to-end open source feature store f
     </main>
     <slot name="footer" />
   </body>
-</html> 
+</html> 
diff --git a/infra/website/src/pages/blog/[slug].astro b/infra/website/src/pages/blog/[slug].astro
@@ -1,6 +1,25 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import Navigation from '../../components/Navigation.astro';
+import { readFileSync } from 'node:fs';
+
+const SITE_URL = 'https://feast.dev';
+
+function toAbsoluteUrl(path: string): string {
+  if (/^https?:\/\//i.test(path)) {
+    return path;
+  }
+  return new URL(path, SITE_URL).toString();
+}
+
+function extractHeroImage(markdown: string): string | undefined {
+  const heroContainerMatch = markdown.match(/<div[^>]*class=["'][^"']*\bhero-image\b[^"']*["'][^>]*>([\s\S]*?)<\/div>/i);
+  if (!heroContainerMatch?.[1]) {
+    return undefined;
+  }
+  const imageMatch = heroContainerMatch[1].match(/<img[^>]*\bsrc=["']([^"']+)["'][^>]*>/i);
+  return imageMatch?.[1];
+}
 
 export async function getStaticPaths() {
   const posts = await Astro.glob('../../../docs/blog/*.md');
@@ -17,9 +36,13 @@ export async function getStaticPaths() {
 
 const { post } = Astro.props;
 const { title, description, date, authors = [] } = post.frontmatter;
+const blogUrl = `${SITE_URL}/blog/${Astro.params.slug}/`;
+const frontmatterImage = post.frontmatter.hero_image || post.frontmatter.heroImage || post.frontmatter.image;
+const heroImage = frontmatterImage || extractHeroImage(readFileSync(post.file, 'utf-8'));
+const socialImage = heroImage ? toAbsoluteUrl(heroImage) : undefined;
 ---
 
-<BaseLayout title={title} description={description}>
+<BaseLayout title={title} description={description} socialImage={socialImage} ogUrl={blogUrl}>
   <Navigation slot="header" />
   <div class="blog-wrapper">
     <header class="blog-hero">
@@ -316,4 +339,4 @@ const { title, description, date, authors = [] } = post.frontmatter;
       font-size: 18px;
     }
   }
-</style> 
+</style> 
