fix og image

Author: maxphillipsdev

src/components/BaseHead.astro

@@ -11,7 +11,11 @@ export interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
-const { title, description, image = "/placeholder-social.png" } = Astro.props;
+const {
+  title,
+  description,
+  image = new URL("/placeholder-social.png", Astro.url),
+} = Astro.props;
 ---
 
 <!-- Global Metadata -->
@@ -41,6 +45,6 @@ const { title, description, image = "/placeholder-social.png" } = Astro.props;
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image, Astro.url)} />
+<meta property="twitter:image" content={image} />
 
 <!-- Third-party scripts -->

src/layouts/BlogPost.astro

@@ -8,7 +8,7 @@ type Props = CollectionEntry<"blog">["data"] & { slug: string };
 const { title, description, pubDate, updatedDate, heroImage, slug } =
   Astro.props;
 
-const buildOGURL = (title: string | undefined) => {
+export const buildOGURL = (title: string | undefined) => {
   const url = new URL("https://image.memp.dev/api");
   title && url.searchParams.set("title", `/${slug}`);
   return url.toString();

src/pages/blog/[...slug].astro

@@ -1,6 +1,6 @@
 ---
 import { CollectionEntry, getCollection } from "astro:content";
-import BlogPost from "../../layouts/BlogPost.astro";
+import BlogPost, { buildOGURL } from "../../layouts/BlogPost.astro";
 
 export async function getStaticPaths() {
   const posts = await getCollection("blog");
@@ -15,7 +15,11 @@ const post = Astro.props;
 const { Content } = await post.render();
 ---
 
-<BlogPost {...post.data} slug={post.slug}>
+<BlogPost
+  {...post.data}
+  slug={post.slug}
+  heroImage={buildOGURL(post.data.title)}
+>
   <Content />
   <script
     src="https://utteranc.es/client.js"