src/routes/+page.server.ts

@@ -0,0 +1,7 @@
+import { fetchPostsSorted, sortPostsByPostAndUpdateDate } from "$src/lib/util/Blogs";
+
+const LATEST_POSTS_COUNT = 3;
+
+export async function load() {
+    return { posts: (await fetchPostsSorted(sortPostsByPostAndUpdateDate)).slice(0, LATEST_POSTS_COUNT) };
+}

src/routes/+page.svelte

@@ -2,6 +2,8 @@
 	import SocialButton from '$lib/components/SocialButton.svelte';
 	import SocialHyperlink from '$lib/components/SocialHyperlink.svelte';
 	import { PUBLIC_TS_DISCORD } from '$env/static/public';
+	import BlogCard, { BlogCardSize } from '$src/lib/components/BlogCard.svelte';
+	import { page } from '$app/state';
 </script>
 
 <svelte:head>
@@ -78,6 +80,19 @@
 		</SocialButton>
 	</div>
 </section>
+
+<section class="flex flex-col items-stretch bg-blue-900 pt-4 text-slate-50">
+	<h1 class="text-center">ПОСЛЕДНИЕ ПОСТЫ</h1>
+
+	<div class="flex flex-row items-stretch justify-evenly gap-4 overflow-x-auto p-4">
+		{#each page.data.posts as post, i}
+			<div class="aspect-3/2 w-80 shrink-0">
+				<BlogCard {post} size={BlogCardSize.Short} />
+			</div>
+		{/each}
+	</div>
+</section>
+
 <section class="flex justify-center bg-slate-50 text-slate-950">
 	<div
 		class="flex w-5xl max-w-screen flex-col flex-nowrap gap-12 p-2 px-2 pt-12 pb-12 text-base sm:text-xl"

src/routes/+page.ts

@@ -1,3 +0,0 @@
-export async function load() {
-    return { title: undefined };
-}