69 lines
2.4 KiB
Plaintext
69 lines
2.4 KiB
Plaintext
---
|
|
import { getLastBlogs } from '@/content/blogs/blogs';
|
|
import { getSettings } from '@/content/settings/settings';
|
|
import CalendarIcon from '@/icons/CalendarIcon.astro';
|
|
import { getImageSize, getImageUrl } from '@/lib/images';
|
|
import { getBlogRoute } from '@/lib/routing';
|
|
import { Image } from 'astro:assets';
|
|
|
|
interface Props {
|
|
blogs: LastBlogsComponent;
|
|
}
|
|
|
|
function calculateSizeClasses(amount: number, length: number) {
|
|
if (amount === 2 || length <= 2) {
|
|
return "lg:w-[45%] w-full";
|
|
}
|
|
else {
|
|
return "lg:w-[31%] w-full";
|
|
}
|
|
}
|
|
|
|
const blogs = Astro.props.blogs;
|
|
const settings = await getSettings();
|
|
const lastBlogs = await getLastBlogs(blogs.amount);
|
|
const size = calculateSizeClasses(blogs.amount, lastBlogs.length);
|
|
---
|
|
|
|
{ (settings.blog.enabled && lastBlogs.length > 0) && (
|
|
<div
|
|
id={`lastblogs-${blogs.id}`}
|
|
class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
|
|
>
|
|
<div class="flex flex-row justify-between items-center w-full">
|
|
<h2 class="text-4xl font-bold">{blogs.title}</h2>
|
|
<div>
|
|
<a
|
|
href={settings.blog.indexRouteTemplate}
|
|
class="text-(--ptt) bg-(--ptc) hover:text-(--stt) hover:bg-(--stc) duration-200 py-3 px-5 rounded-full text-lg"
|
|
>
|
|
{blogs.readMoreButtonText}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
|
|
{ lastBlogs.map((blog) => {
|
|
const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 0.5);
|
|
|
|
return (
|
|
<a href={getBlogRoute(settings.blog, blog)} class={`${size} flex flex-col gap-2`}>
|
|
<Image
|
|
src={getImageUrl(blog.searchEngine.thumbnail.url)}
|
|
alt={blog.title}
|
|
class="flex rounded-2xl shadow-md w-full"
|
|
width={imageSize.width}
|
|
height={imageSize.height}
|
|
/>
|
|
<h4 class="font-semibold text-[28px]">{blog.title}</h4>
|
|
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
|
|
<CalendarIcon width={20} height={20} />
|
|
<div>{blog.date}</div>
|
|
</div>
|
|
</a>
|
|
)
|
|
}) }
|
|
</div>
|
|
</div>
|
|
) }
|