mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Francesco SansalvadoreandClaude
1952abb6d1
AuthorAvatars now caps visible avatars at 4 (showing a "+N" badge for the rest) and collapses author names to "First Author, +N others" once there are more than two, instead of joining every name into one long string. A tooltip shows the full list. <img width="434" height="306" alt="Screenshot 2026-07-21 at 15 14 38" src="https://github.com/user-attachments/assets/507ce37e-b080-4dd6-bd49-ca694252cd72" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Enhancements** * Blog author displays now cap at three visible avatars and show a “+N” indicator for additional authors. * Author name labels are now summarized for multi-author posts (with full author names available via tooltip when applicable). * Featured post metadata (author, published date, reading time) has improved spacing, truncation behavior, and responsive visibility on smaller screens. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude <noreply@anthropic.com>
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
|
|
import AuthorAvatars from './AuthorAvatars'
|
|
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) {
|
|
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 (
|
|
<article aria-label={`Featured post: ${blog.title}`}>
|
|
<Link
|
|
href={`${blog.path}`}
|
|
prefetch={false}
|
|
key={blog.slug}
|
|
className="group w-full grid lg:grid-cols-12 gap-8 md:gap-12 hover:bg-surface-200 dark:hover:bg-surface-75 p-2 sm:p-4 rounded-xl"
|
|
>
|
|
<div className="relative w-full aspect-[1.91/1] lg:col-span-6 overflow-hidden block group">
|
|
<div className="relative w-full h-full shadow-lg border border-foreground/10 rounded-lg overflow-hidden">
|
|
<Image
|
|
src={imageUrl}
|
|
fill
|
|
sizes={BLOG_FEATURED_IMAGE_SIZES}
|
|
priority
|
|
className="object-cover bg-alternative group-hover:scale-[1.02] transition-transform duration-300"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div className="flex flex-col lg:col-span-6 md:justify-center lg:pr-8">
|
|
<div>
|
|
<h2 className="h2 lg:text-2xl! xl:text-3xl! mb-2! group-hover:underline">
|
|
{blog.title}
|
|
</h2>
|
|
<p className="p">{blog.description}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between gap-4 mt-4">
|
|
<div className="min-w-0 flex-1">
|
|
<span className="sr-only">Author: </span>
|
|
<AuthorAvatars authors={author} size="md" />
|
|
</div>
|
|
<div className="text-foreground-lighter flex shrink-0 space-x-2 text-xs">
|
|
<span>
|
|
<span className="sr-only">Published </span>
|
|
{blog.formattedDate}
|
|
</span>
|
|
<span aria-hidden="true" className="hidden sm:inline">
|
|
·
|
|
</span>
|
|
<span className="hidden sm:inline">{blog.readingTime}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</article>
|
|
)
|
|
}
|
|
|
|
export default FeaturedThumb
|