fix: simplify Redact header and remove duplicate blog divider

content-collections.ts

@@ -37,6 +37,7 @@ const posts = defineCollection({
       contributors: z.string().array().optional(),
       library: libraryListSchema.optional(),
       headerImage: z.string().optional(),
+      socialImage: z.string().optional(),
       headerVideo: z.string().optional(),
       headerVideoCaptions: z.string().optional(),
       content: z.string(),

src/blog/introducing-tanstack-redact.md

@@ -6,9 +6,10 @@ draft: false
 authors:
   - Tanner Linsley
 library: redact
+socialImage: /blog-assets/introducing-tanstack-redact/header.jpg
 ---
 
-![TanStack Redact. Your React app. Less JavaScript.](/blog-assets/introducing-tanstack-redact/header.jpg)
+![TanStack Redact](/blog-assets/introducing-tanstack-redact/banner.jpg)
 
 When I wrote [Projecting React](https://tannerlinsley.com/posts/projecting-react), I was pretty explicit about how far I wanted to take Redact. I wanted to see if a smaller implementation of the React APIs we used could work on my personal site and tanstack.com, and I was willing to keep it very specific to those two sites.
 

src/components/markdown/MarkdownContent.tsx

@@ -145,9 +145,13 @@ export function MarkdownContent({
           </div>
         </div>
       ) : null}
-      <div className="h-4" />
-      <div className="h-px bg-gray-500 opacity-20" />
-      <div className="h-4" />
+      {title ? (
+        <>
+          <div className="h-4" />
+          <div className="h-px bg-gray-500 opacity-20" />
+          <div className="h-4" />
+        </>
+      ) : null}
       <div
         ref={containerRef}
         className={twMerge(

src/routes/blog.$.tsx

@@ -31,7 +31,9 @@ export const Route = createFileRoute('/blog/$')({
     return fetchBlogPost({ data: blogPath })
   },
   head: ({ loaderData }) => {
-    const socialImage = getBlogSocialImageUrl(loaderData?.headerImage)
+    const socialImage = getBlogSocialImageUrl(
+      loaderData?.socialImage ?? loaderData?.headerImage,
+    )
 
     return getBlogPostHead(
       loaderData ? { ...loaderData, socialImage } : undefined,

src/utils/blog.functions.ts

@@ -129,6 +129,7 @@ export const fetchBlogPost = createServerFn({ method: 'GET' })
       description: post.excerpt,
       filePath: `src/blog/${data}.md`,
       headerImage: post.headerImage,
+      socialImage: post.socialImage,
       isUnpublished,
       headerVideo: post.headerVideo,
       headerVideoCaptions: post.headerVideoCaptions,