From 3d41ce538f9c313d46233e02f86139d170113342 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Mon, 29 Sep 2025 04:28:02 +0300
Subject: [PATCH] =?UTF-8?q?=D0=A1=D0=BF=D0=B8=D1=81=D0=BE=D0=BA=20=D0=B2?=
 =?UTF-8?q?=D1=81=D0=B5=D1=85=20=D0=B1=D0=BB=D0=BE=D0=B3=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/blog/+page.server.ts |  5 +++
 src/routes/blog/+page.svelte    | 79 ++++++++++++++++++++++++++++++++-
 2 files changed, 83 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/blog/+page.server.ts

diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
new file mode 100644
index 0000000..c5653b5
--- /dev/null
+++ b/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() };
+}
\ No newline at end of file
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index befbbfd..8156cdd 100644
--- a/src/routes/blog/+page.svelte
+++ b/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>