src/routes/blog/+page.server.ts

@@ -0,0 +1,5 @@
+import { fetchPostsSorted } from "$src/lib/util/Blogs";
+
+export async function load() {
+    return { title: "Блог", description: "Новости и заметки проектов Tea Sanctuary", posts: await fetchPostsSorted() };
+}

src/routes/blog/+page.svelte

@@ -1,5 +1,25 @@
 <script lang="ts">
-	import SocialButton from '$lib/components/SocialButton.svelte';
+	import { page } from '$app/state';
+	import Icon from '@iconify/svelte';
+	import SocialHyperlink from '$src/lib/components/SocialHyperlink.svelte';
+	import InfoBlock from '$src/lib/components/InfoBlock.svelte';
+
+	function groupPostsByMonthYear(posts: App.BlogPost[]) {
+		const groupedPosts = new Map<string, App.BlogPost[]>();
+
+		posts.forEach((post) => {
+			const key = new Date(post.date!).toLocaleString('default', {
+				month: 'long',
+				year: 'numeric'
+			});
+			if (!groupedPosts.has(key)) groupedPosts.set(key, []);
+			groupedPosts.get(key)?.push(post);
+		});
+
+		return groupedPosts;
+	}
+
+	const groupedPosts = groupPostsByMonthYear(page.data.posts);
 </script>
 
 <section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
@@ -14,6 +34,63 @@
 	</div>
 </section>
 
+<InfoBlock>
+	Подпишитесь на нашу <SocialHyperlink href="/blog/rss.xml">RSS ленту</SocialHyperlink>, чтобы не
+	пропускать новые посты!
+</InfoBlock>
+
+<section class="flex flex-col items-stretch p-2 pb-8 md:p-4">
+	{#each groupedPosts.entries() as [monthYear, postsInMonthYear]}
+		<h1
+			class="mt-10 mb-4 text-left text-2xl font-bold underline decoration-4 md:text-center md:text-4xl md:decoration-8"
+		>
+			{monthYear}
+		</h1>
+		<div class="flex flex-col flex-wrap items-stretch gap-4 md:flex-row md:justify-center">
+			{#each postsInMonthYear as post, i}
+				<a
+					href="/blog/{post.slug}"
+					class="flex flex-row justify-stretch overflow-hidden rounded-lg bg-slate-100 text-slate-950 drop-shadow-xl transition-all hover:drop-shadow-2xl md:flex-col md:justify-baseline"
+				>
+					<div class="relative h-auto w-full basis-1/3 md:h-48 md:basis-auto">
+						{#if post.thumbnail}
+							<img
+								class="absolute h-full w-full object-cover"
+								src={`/blog/${post.slug}/${post.thumbnail}`}
+								alt="thumbnail"
+							/>
+						{/if}
+					</div>
+					<div class="flex w-full flex-col justify-center p-4 break-words md:p-8">
+						<div class="flex flex-row flex-wrap justify-between gap-4 pb-4">
+							<div class="flex items-center text-lg font-bold">
+								<Icon
+									icon="material-symbols:calendar-today"
+									class="mr-3"
+									style="transform: scale( 1.3 )"
+								/>
+								<p>
+									{new Date(post.date!).toLocaleString('default', {
+										month: 'short',
+										day: 'numeric',
+										year: 'numeric'
+									})}
+								</p>
+							</div>
+						</div>
+
+						<h2 class="text-3xl font-bold">{post.title}</h2>
+
+						{#if post.description}
+							<p>{post.description}</p>
+						{/if}
+					</div>
+				</a>
+			{/each}
+		</div>
+	{/each}
+</section>
+
 <style>
 	@import '$src/app.css';
 </style>