mirror of
https://github.com/supabase/supabase.git
synced 2026-10-10 11:55:05 +03:00
Ivan VasilovandJordi Enric
56de26fe22
This PR migrates the whole monorepo to use Tailwind v4: - Removed `@tailwindcss/container-queries` plugin since it's included by default in v4, - Bump all instances of Tailwind to v4. Made minimal changes to the shared config to remove non-supported features (`alpha` mentions), - Migrate all apps to be compatible with v4 configs, - Fix the `typography.css` import in 3 apps, - Add missing rules which were included by default in v3, - Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot of classes - Rename all misnamed classes according to https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all apps. --------- Co-authored-by: Jordi Enric <jordi.err@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
|