mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Danny WhiteandAlan Daniel
48b96e8a79
## What kind of change does this PR introduce? - Bug fix that resolves DEPR-396 - Additional improvements to blog post image handling ## What is the current behavior? Blog post Open Graph metadata often prefers `imgThumb` over `imgSocial`, so social previews on X, iMessage, and similar surfaces can render the on-site thumbnail instead of the intended social image. The image selection and path-normalization rules are also duplicated across blog surfaces, which makes the precedence rules easy to drift. ## What is the new behavior? - Centralizes blog image handling in `apps/www/lib/blog-images.ts` - Uses `imgSocial` first, then `imgThumb`, for blog OG/Twitter metadata - Uses `imgThumb` first, then `imgSocial`, then the placeholder, for blog thumbnails and post hero images - Normalizes relative blog image paths into absolute URLs for metadata - Adds warning-only validation during content reads/builds for partial or malformed `imgSocial` / `imgThumb` config - Updates a few recent blog posts so `imgThumb` is a thumbnail-only asset instead of duplicating the social image ## Additional context - Replaces #42319 with the additional above fixes - Added unit coverage for the shared image helper --------- Co-authored-by: Alan Daniel <stylesshjs@gmail.com>
97 lines
3.1 KiB
TypeScript
97 lines
3.1 KiB
TypeScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
|
|
import authors from '@/lib/authors.json'
|
|
import {
|
|
BLOG_FEATURED_IMAGE_SIZES,
|
|
BLOG_PLACEHOLDER_IMAGE,
|
|
getBlogThumbnailImage,
|
|
} from '@/lib/blog-images'
|
|
import type PostTypes from '@/types/post'
|
|
|
|
function FeaturedThumb(blog: PostTypes) {
|
|
// For static posts, look up author info from authors.json
|
|
const authorArray = blog.author?.split(',').map((a) => a.trim()) || []
|
|
const author = []
|
|
|
|
for (let i = 0; i < authorArray.length; i++) {
|
|
const foundAuthor = authors.find((authors: any) => {
|
|
return authors.author_id === authorArray[i]
|
|
})
|
|
if (foundAuthor) {
|
|
author.push(foundAuthor)
|
|
}
|
|
}
|
|
|
|
return renderFeaturedThumb(blog, author)
|
|
}
|
|
|
|
function renderFeaturedThumb(blog: PostTypes, author: any[]) {
|
|
const imageUrl = getBlogThumbnailImage(blog) ?? BLOG_PLACEHOLDER_IMAGE
|
|
|
|
return (
|
|
<div key={blog.slug} className="w-full">
|
|
<Link
|
|
href={`${blog.path}`}
|
|
className="grid gap-4 lg:grid-cols-7 lg:gap-8 xl:gap-12 hover:bg-surface-200 dark:hover:bg-surface-75 p-2 sm:p-4 rounded-xl"
|
|
>
|
|
<div className="relative w-full aspect-[2/1] lg:col-span-3 lg:aspect-[3/2] overflow-auto rounded-lg border">
|
|
<Image
|
|
src={imageUrl}
|
|
fill
|
|
sizes={BLOG_FEATURED_IMAGE_SIZES}
|
|
priority
|
|
className="object-cover bg-alternative"
|
|
alt="blog thumbnail"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col space-y-2 lg:col-span-4 xl:justify-center max-w-xl">
|
|
<div className="text-lighter flex space-x-2 text-sm">
|
|
<span>{blog.formattedDate}</span>
|
|
<span>·</span>
|
|
<span>{blog.readingTime}</span>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="h2 lg:!text-2xl xl:!text-3xl !mb-2">{blog.title}</h2>
|
|
<p className="p xl:text-lg">{blog.description}</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col w-max gap-2">
|
|
{author.filter(Boolean).map((author: any, i: number) => {
|
|
const authorImageUrl =
|
|
typeof author.author_image_url === 'string'
|
|
? author.author_image_url
|
|
: (author.author_image_url as { url: string })?.url || ''
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center space-x-2"
|
|
key={`author-feat-${i}-${author.author}`}
|
|
>
|
|
{imageUrl && (
|
|
<div className="relative h-6 w-6 overflow-auto">
|
|
<Image
|
|
src={authorImageUrl}
|
|
alt={`${author.author} avatar`}
|
|
className="rounded-full object-cover"
|
|
fill
|
|
sizes="30px"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex flex-col">
|
|
<span className="text-foreground m-0 text-sm">{author.author}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default FeaturedThumb
|