58 lines
2.1 KiB
Plaintext
58 lines
2.1 KiB
Plaintext
---
|
|
import { getAllPaginatedBlogs } from '@/content/blogs/blogs';
|
|
import { getSettings } from '@/content/settings/settings';
|
|
import CalendarIcon from '@/icons/CalendarIcon.astro';
|
|
import { getImageSize, getImageUrl } from '@/lib/images';
|
|
import { markdownToHtml } from '@/lib/markdown';
|
|
import { getBlogRoute } from '@/lib/routing';
|
|
import { Image } from 'astro:assets';
|
|
|
|
interface Props {
|
|
page: BlogIndex;
|
|
}
|
|
|
|
const { page } = Astro.props;
|
|
const { pageNumber } = page;
|
|
|
|
const settings = await getSettings();
|
|
const blogs = await getAllPaginatedBlogs(settings, pageNumber);
|
|
---
|
|
|
|
<div
|
|
id={`blogindex-${pageNumber}`}
|
|
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-col justify-center items-center gap-2.5">
|
|
<h1 class="text-5xl font-bold">{ settings.blog.title }</h1>
|
|
{ settings.blog.subtext !== null && (
|
|
<div set:html={markdownToHtml(settings.blog.subtext)}></div>
|
|
) }
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-6">
|
|
{ blogs.map((blog) => {
|
|
const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 0.5);
|
|
|
|
return (
|
|
<a href={getBlogRoute(settings.blog, blog)} class={`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}
|
|
/>
|
|
<div class="flex flex-col gap-1">
|
|
<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>
|
|
</div>
|
|
</a>
|
|
)
|
|
|
|
}) }
|
|
</div>
|
|
</div>
|