From 224187422ac3561f4f9ebb708100884707d5d4ff Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 05:34:36 +0300
Subject: [PATCH 1/7] =?UTF-8?q?=D0=9D=D0=B5=20=D0=BD=D0=B0=D0=B4=D0=BE=20?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8F=20=D0=BF=D0=B8=D0=BD=D0=B0=D1=82=D1=8C?=
 =?UTF-8?q?!?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.svelte | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 606b8a5..122786e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -65,11 +65,6 @@
 		</div>
 	</div>
 	<div class="flex flex-col items-center justify-start gap-4">
-		<!--
-		<div class="flex flex-row gap-2 rounded-2xl bg-amber-950 p-2 text-center text-amber-50 ring-2 shadow">
-			Сайт находится в разработке. Если эта плашка висит после 1.06.2025 - пинайте Ивана!
-		</div>
-		-->
 		<div class="flex flex-row flex-wrap items-start justify-center gap-4">
 			<SocialButton class="w-60 shrink-0" href={PUBLIC_TS_DISCORD}>Сообщество</SocialButton>
 			<SocialButton class="w-60 shrink-0" href="https://github.com/TeaSanctuary/">

From be6615ff483555f99c49eaf7b90906b00e4967c6 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 05:50:07 +0300
Subject: [PATCH 2/7] =?UTF-8?q?=D0=92=D1=8B=D0=B4=D0=B5=D0=BB=D0=B8=D0=BB?=
 =?UTF-8?q?=20=D0=BA=D0=B0=D1=80=D1=82=D0=BE=D1=87=D0=BA=D1=83=20=D0=B1?=
 =?UTF-8?q?=D0=BB=D0=BE=D0=B3=D0=B0=20=D0=B2=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/BlogCard.svelte | 100 +++++++++++++++++++++++++++++
 src/routes/blog/+page.svelte       |  41 +-----------
 svelte.config.js                   |   2 +-
 3 files changed, 103 insertions(+), 40 deletions(-)
 create mode 100644 src/lib/components/BlogCard.svelte

diff --git a/src/lib/components/BlogCard.svelte b/src/lib/components/BlogCard.svelte
new file mode 100644
index 0000000..161d579
--- /dev/null
+++ b/src/lib/components/BlogCard.svelte
@@ -0,0 +1,100 @@
+<script lang="ts" module>
+	export enum BlogCardSize {
+		Short,
+		Long,
+		Both
+	}
+</script>
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	export let post: App.BlogPost;
+	export let size: BlogCardSize = BlogCardSize.Both;
+
+	/**
+	 * rndtrash: пришлось дублировать классы с модификатором и без, потому что Tailwind ОЧЕНЬ не любит,
+	 * когда его классы склеивают из нескольких частей
+	 */
+
+	/**
+	 * Возвращает список классов для полноразмерной плашки.
+	 *
+	 * Возвращает пустую строку, если плашка может быть только короткой
+	 * @param classes
+	 * @param modClasses
+	 */
+	function fullClass(classes: string, modClasses: string): string {
+		if (size === BlogCardSize.Short) return '';
+		return size === BlogCardSize.Both ? modClasses : classes;
+	}
+
+	/**
+	 * Возвращает список классов для короткой карточки.
+	 *
+	 * Возвращает пустую строку, если плашка может быть только полноразмерной
+	 * @param classes
+	 */
+	function shortClass(classes: string): string {
+		return size === BlogCardSize.Long ? '' : classes;
+	}
+</script>
+
+<a
+	href="/blog/{post.slug}"
+	class="blog-card
+    {shortClass('flex-col justify-baseline')}
+    {fullClass('flex-row justify-stretch', 'sm:flex-row sm:justify-stretch')}"
+>
+	<div
+		class="relative w-full basis-auto overflow-hidden
+        {shortClass('h-32')}
+        {fullClass('h-auto basis-1/3', 'sm:h-auto sm:basis-1/3')}"
+	>
+		{#if post.thumbnail}
+			<img
+				class="thumbnail"
+				src={`/blog/${post.slug}/${post.thumbnail}`}
+				alt={post.thumbnailAlt ?? 'Миниатюра поста'}
+			/>
+		{/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" width={24} height={24} />
+				<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>
+
+<style>
+	@import '$src/app.css';
+
+	.blog-card {
+		@apply flex w-full max-w-5xl overflow-hidden rounded-lg bg-slate-100 text-slate-950 drop-shadow-xl transition-all hover:drop-shadow-2xl;
+
+		img.thumbnail {
+			@apply absolute h-full w-full object-cover transition-transform;
+
+			transform: scale(1);
+		}
+
+		&:hover img.thumbnail {
+			transform: scale(1.1);
+		}
+	}
+</style>
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index e5d11ae..870fcc9 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	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';
+	import BlogCard from '$src/lib/components/BlogCard.svelte';
 
 	function groupPostsByMonthYear(posts: App.BlogPost[]) {
 		const groupedPosts = new Map<string, App.BlogPost[]>();
@@ -48,44 +48,7 @@
 		</h1>
 		<div class="flex flex-col flex-wrap items-center gap-4">
 			{#each postsInMonthYear as post, i}
-				<a
-					href="/blog/{post.slug}"
-					class="flex w-full max-w-5xl flex-col justify-baseline overflow-hidden rounded-lg bg-slate-100 text-slate-950 drop-shadow-xl transition-all hover:drop-shadow-2xl sm:flex-row sm:justify-stretch"
-				>
-					<div class="relative h-32 w-full basis-auto sm:h-auto sm:basis-1/3">
-						{#if post.thumbnail}
-							<img
-								class="absolute h-full w-full object-cover"
-								src={`/blog/${post.slug}/${post.thumbnail}`}
-								alt={post.thumbnailAlt ?? 'Миниатюра поста'}
-							/>
-						{/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>
+				<BlogCard {post} />
 			{/each}
 		</div>
 	{/each}
diff --git a/svelte.config.js b/svelte.config.js
index 8bcc2c3..2ea3e94 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -38,7 +38,7 @@ const config = {
 	},
 	extensions: ['.svelte', '.md'],
 	preprocess: [
-		vitePreprocess(),
+		vitePreprocess({ script: true }),
 		mdsvex({
 			extensions: ['.md'],
 			layout: join(__dirname, "./src/lib/components/MdsvexLayout.svelte")

From 90f14bc652ef3d27f1d40739be330fff55e33d4c Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 06:02:54 +0300
Subject: [PATCH 3/7] =?UTF-8?q?=D0=A1=D0=BE=D1=80=D1=82=D0=B8=D1=80=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BA=D0=B0=20=D0=BF=D0=BE=D1=81=D1=82=D0=BE=D0=B2=20?=
 =?UTF-8?q?=D0=BF=D0=BE=20=D0=B4=D0=B0=D1=82=D0=B5=20=D0=BE=D0=B1=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/util/Blogs.ts | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/lib/util/Blogs.ts b/src/lib/util/Blogs.ts
index ad2d430..a45ceaa 100644
--- a/src/lib/util/Blogs.ts
+++ b/src/lib/util/Blogs.ts
@@ -2,15 +2,27 @@ import path from 'path';
 
 export const THUMBNAIL_DEFAULT = "https://teasanctuary.ru/common/background-day.webp";
 
-export async function fetchPostsSorted() {
+export type PostComparer = (a: App.BlogPost, b: App.BlogPost) => number;
+
+export const sortPostsByPostDate: PostComparer = (a, b) => new Date(b.date!).valueOf() - new Date(a.date!).valueOf();
+
+function laterDate(a: string, b?: string): number {
+	const dateA = new Date(a).valueOf();
+	if (!b) return dateA;
+
+	const dateB = new Date(b).valueOf();
+	return Math.max(dateA, dateB);
+}
+
+export const sortPostsByPostAndUpdateDate: PostComparer = (a, b) => laterDate(b.date!, b.dateChanged) - laterDate(a.date!, a.dateChanged);
+
+export async function fetchPostsSorted(postComparer?: PostComparer) {
 	const allPosts = await fetchPosts();
 
 	const sortedPosts = allPosts
 		// Для списка постов оставляем только те, у которых объявлена дата публикации
 		.filter((a) => !!a.date)
-		.sort((a, b) => {
-			return new Date(b.date!).valueOf() - new Date(a.date!).valueOf();
-		});
+		.sort(postComparer ?? sortPostsByPostDate);
 
 	return sortedPosts;
 };

From 07325e57dd061ebf31f9bec4718124a973a7a81c Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 06:05:50 +0300
Subject: [PATCH 4/7] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B5=D1=84=D0=BE=D1=80?=
 =?UTF-8?q?=D0=BC=D0=B0=D1=82=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BB=20=D0=B3?=
 =?UTF-8?q?=D0=BB=D0=B0=D0=B2=D0=BD=D1=83=D1=8E=20=D1=81=D1=82=D1=80=D0=B0?=
 =?UTF-8?q?=D0=BD=D0=B8=D1=86=D1=83=20=D0=B8=20=D1=80=D0=B0=D0=B7=D0=B4?=
 =?UTF-8?q?=D0=B5=D0=BB=D0=B8=D0=BB=20=D1=81=D1=82=D0=B8=D0=BB=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.svelte | 80 ++++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 122786e..e17465d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,9 +8,7 @@
 	<title>Tea Sanctuary</title>
 </svelte:head>
 
-<section
-	class="flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4 hero"
->
+<section class="hero flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4">
 	<div
 		class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
 	>
@@ -57,9 +55,7 @@
 			>
 		</div>
 
-		<div
-			class="text-center font-bold lg:text-left"
-		>
+		<div class="text-center font-bold lg:text-left">
 			<h1>TEA</h1>
 			<h1>SANCTUARY</h1>
 		</div>
@@ -89,67 +85,87 @@
 		<section id="who-are-we">
 			<h1>Кто мы?</h1>
 			<div class="text-justify">
-				<b>Tea Sanctuary</b> &mdash; это в первую очередь коллектив друзей, разрабатывающих проекты
-				для души, для всеобщего пользования и даже на заказ. С <b>8 июля 2017 года</b> мы ведём публичную
-				деятельность в сфере разработки ПО и развлечений.
+				<b>Tea Sanctuary</b> &mdash; это в первую очередь коллектив друзей, разрабатывающих
+				проекты для души, для всеобщего пользования и даже на заказ. С
+				<b>8 июля 2017 года</b> мы ведём публичную деятельность в сфере разработки ПО и развлечений.
 			</div>
 			<br />
 			<div class="text-justify">
-				<b>Tea Sanctuary</b> &mdash; это также и сообщество единомышленников. Любовь к добротным видеоиграм
-				и пассивная агрессия к вычислительной технике у нас в крови. Когда-то сообщество было закрытым
-				и насчитывало около 50 участников, но впоследствии мы решили его расширить. Станьте частью коллектива!
+				<b>Tea Sanctuary</b> &mdash; это также и сообщество единомышленников. Любовь к добротным
+				видеоиграм и пассивная агрессия к вычислительной технике у нас в крови. Когда-то сообщество
+				было закрытым и насчитывало около 50 участников, но впоследствии мы решили его расширить.
+				Станьте частью коллектива!
 			</div>
 		</section>
 		<section id="what-are-we-doing">
 			<h1>Что делаем?</h1>
 			<div class="text-justify">
-				Наша главная страсть &mdash; это, конечно, видеоигры. Мы часто участвуем в так называемых
-				"гейм джемах" &mdash; конкурсах на разработку игр. Наши игры вы можете оценить здесь:
+				Наша главная страсть &mdash; это, конечно, видеоигры. Мы часто участвуем в так
+				называемых "гейм джемах" &mdash; конкурсах на разработку игр. Наши игры вы можете
+				оценить здесь:
 				<SocialHyperlink href="https://randomtrash.itch.io">RandomTrash</SocialHyperlink>
-				<SocialHyperlink href="https://friendlywithmeat.itch.io/">FriendlyWithMeat</SocialHyperlink>.
-				Также мы ведём работу над нашим первым полноценным игровым проектом.
-				Следите за новостями в нашем
+				<SocialHyperlink href="https://friendlywithmeat.itch.io/">
+					FriendlyWithMeat
+				</SocialHyperlink>. Также мы ведём работу над нашим первым полноценным игровым
+				проектом. Следите за новостями в нашем
 				<SocialHyperlink href={PUBLIC_TS_DISCORD}>сообществе</SocialHyperlink>!
 			</div>
 			<br />
 			<div class="text-justify">
-				Отдельные участники нашего коллектива занимаются модификацией существующих игр, добавляя в
-				них новый контент. Например, <b>MegaZerg</b> создаёт оригинальные карты для такой
-				бессмертной классики, как Counter-Strike 1.6, и выкладывает их на ресурс GameBanana:
-				<SocialHyperlink href="https://gamebanana.com/members/2971042">kemist</SocialHyperlink>
+				Отдельные участники нашего коллектива занимаются модификацией существующих игр,
+				добавляя в них новый контент. Например, <b>MegaZerg</b> создаёт оригинальные карты
+				для такой бессмертной классики, как Counter-Strike 1.6, и выкладывает их на ресурс
+				GameBanana:
+				<SocialHyperlink href="https://gamebanana.com/members/2971042">
+					kemist
+				</SocialHyperlink>
 			</div>
 			<br />
 			<div class="text-justify">
 				Мы размещаем игровые сервера, как постоянные, так и временные для различных событий.
 				Например, у нас есть сервер
-				<SocialHyperlink href="https://hl.teasanctuary.ru">Tea Sanctuary HLDM</SocialHyperlink>, где
-				вы можете ознакомиться с новыми картами от всего сообщества Half-Life.
+				<SocialHyperlink href="https://hl.teasanctuary.ru">
+					Tea Sanctuary HLDM
+				</SocialHyperlink>, где вы можете ознакомиться с новыми картами от всего сообщества
+				Half-Life.
 			</div>
 			<br />
 			<div class="text-justify">
-				Не одними играми едины, за нашими плечами есть несколько прикладных программ, созданных под
-				заказ. Про них ничего особо рассказать не можем, но если вам надо что-нибудь сделать &mdash;
-				пишите нам!
+				Не одними играми едины, за нашими плечами есть несколько прикладных программ,
+				созданных под заказ. Про них ничего особо рассказать не можем, но если вам надо
+				что-нибудь сделать &mdash; пишите нам!
 			</div>
 		</section>
 		<section id="how-can-you-contact-us">
 			<h1>Как с вами связаться?</h1>
 			<div class="text-justify">
-				Общие вопросы можно задавать в <SocialHyperlink href={PUBLIC_TS_DISCORD}>сообществе Tea Sanctuary</SocialHyperlink>.
-				Там же можете написать личное сообщение администраторам.
+				Общие вопросы можно задавать в
+				<SocialHyperlink href={PUBLIC_TS_DISCORD}>
+					сообществе Tea Sanctuary
+				</SocialHyperlink>. Там же можете написать личное сообщение администраторам.
 			</div>
 			<br />
 			<div class="text-justify">
-				Наши соцсети и почту для более важных обращений можно найти на странице <SocialHyperlink href="/contact">Контакты</SocialHyperlink>.
+				Наши соцсети и почту для более важных обращений можно найти на странице
+				<SocialHyperlink href="/contact">Контакты</SocialHyperlink>.
 			</div>
 		</section>
 	</div>
 </section>
 
 <style>
-	@import "$src/app.css";
+	@import '$src/app.css';
+
+	section > h1,
+	section > h2 {
+		@apply font-disket mb-4 font-bold;
+	}
 
 	section > h1 {
-		@apply font-disket mb-4 text-2xl font-bold sm:text-4xl;
+		@apply text-2xl sm:text-4xl;
 	}
-</style>
\ No newline at end of file
+
+	section > h2 {
+		@apply text-xl sm:text-3xl;
+	}
+</style>

From e8532af1de4d24eade20b1d2d2c47eae3219b155 Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 06:06:22 +0300
Subject: [PATCH 5/7] =?UTF-8?q?=D0=9F=D0=BE=D1=81=D0=BB=D0=B5=D0=B4=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=203=20=D0=BF=D0=BE=D1=81=D1=82=D0=B0=20=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=B3=D0=BB=D0=B0=D0=B2=D0=BD=D0=BE=D0=B9=20=D1=81?=
 =?UTF-8?q?=D1=82=D1=80=D0=B0=D0=BD=D0=B8=D1=86=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.server.ts |  7 +++++++
 src/routes/+page.svelte    | 15 +++++++++++++++
 src/routes/+page.ts        |  3 ---
 3 files changed, 22 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/+page.server.ts
 delete mode 100644 src/routes/+page.ts

diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
new file mode 100644
index 0000000..de4f6ab
--- /dev/null
+++ b/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) };
+}
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index e17465d..36571a1 100644
--- a/src/routes/+page.svelte
+++ b/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"
diff --git a/src/routes/+page.ts b/src/routes/+page.ts
deleted file mode 100644
index f5d539c..0000000
--- a/src/routes/+page.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export async function load() {
-    return { title: undefined };
-}
\ No newline at end of file

From 3c55a37ed88493d034a0bee847f90624a90cc2ec Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 06:59:47 +0300
Subject: [PATCH 6/7] =?UTF-8?q?=D0=92=D0=B8=D0=B4=D0=B6=D0=B5=D1=82=20?=
 =?UTF-8?q?=D0=B4=D0=B0=D1=82=D1=8B=20=D0=BF=D1=83=D0=B1=D0=BB=D0=B8=D0=BA?=
 =?UTF-8?q?=D0=B0=D1=86=D0=B8=D0=B8=20=D0=B8=D0=BB=D0=B8=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5=D0=BD=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/DateWidget.svelte | 32 ++++++++++++++++++++++++++++
 src/routes/blog/[slug]/+page.svelte  | 29 +++++--------------------
 2 files changed, 37 insertions(+), 24 deletions(-)
 create mode 100644 src/lib/components/DateWidget.svelte

diff --git a/src/lib/components/DateWidget.svelte b/src/lib/components/DateWidget.svelte
new file mode 100644
index 0000000..337868d
--- /dev/null
+++ b/src/lib/components/DateWidget.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+
+	let className: string = '';
+	export { className as class };
+
+	export let dateString: string | undefined;
+	export let type: 'published' | 'updated' = 'published';
+	export let highlight = false;
+
+	const icon =
+		type == 'published' ? 'material-symbols:calendar-today' : 'material-symbols:update';
+
+	const highlightClasses = (classes: string) => (highlight ? classes : '');
+</script>
+
+<div
+	class="flex items-center gap-2 p-1 text-lg font-bold {className} rounded-lg
+    {highlightClasses(type == 'published' ? 'bg-amber-600' : 'bg-purple-600')}
+    {highlightClasses('text-slate-50')}"
+>
+	<Icon {icon} width={28} height={28} />
+	<span>
+		{dateString
+			? new Date(dateString).toLocaleString(undefined, {
+					month: 'short',
+					day: 'numeric',
+					year: 'numeric'
+				})
+			: 'Не опубликован!'}
+	</span>
+</div>
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index dbd0f2d..0ac6d22 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { page } from '$app/state';
+	import DateWidget from '$src/lib/components/DateWidget.svelte';
 	import InfoBlock from '$src/lib/components/InfoBlock.svelte';
 	import type { PageData } from './$types';
 	import Icon from '@iconify/svelte';
@@ -33,29 +34,9 @@
 		? 'bg-amber-50 text-slate-950'
 		: 'bg-red-500 text-slate-50'} sm:flex-row sm:flex-nowrap sm:gap-5"
 >
-	<div class="flex items-center">
-		<Icon icon="material-symbols:calendar-today" class="mr-3" width={24} height={24} />
-		<p>
-			{data.blogPost.date
-				? new Date(data.blogPost.date).toLocaleString(undefined, {
-						month: 'short',
-						day: 'numeric',
-						year: 'numeric'
-					})
-				: 'Не опубликован!'}
-		</p>
-	</div>
+	<DateWidget dateString={data.blogPost.date} type="published" />
 	{#if data.blogPost.dateChanged}
-		<div class="flex items-center font-bold">
-			<Icon icon="material-symbols:update" class="mr-3" width={24} height={24} />
-			<p>
-				{new Date(data.blogPost.dateChanged).toLocaleString(undefined, {
-					month: 'short',
-					day: 'numeric',
-					year: 'numeric'
-				})}
-			</p>
-		</div>
+		<DateWidget dateString={data.blogPost.dateChanged} type="updated" />
 	{/if}
 </section>
 
@@ -80,8 +61,8 @@
 		prose-headings:mb-4
 		prose-headings:font-bold prose-headings:text-slate-950 prose-h1:text-2xl
 		prose-h1:sm:text-4xl prose-h2:text-xl
-		prose-h2:sm:text-3xl mx-auto
-		prose-p:text-justify
+		prose-h2:sm:text-3xl prose-p:text-justify
+		mx-auto
 		w-5xl
 		p-4
 		text-base

From 2e99b04261f3d64edf2558b8d8e450a99a2fd68b Mon Sep 17 00:00:00 2001
From: Ivan Kuzmenko <6745157+rndtrash@users.noreply.github.com>
Date: Tue, 30 Sep 2025 07:11:32 +0300
Subject: [PATCH 7/7] =?UTF-8?q?=D0=9F=D0=BE=D0=B4=D1=81=D0=B2=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BA=D0=B0=20=D1=81=D0=B2=D0=B5=D0=B6=D0=B8=D1=85=20=D0=B8?=
 =?UTF-8?q?=D0=BB=D0=B8=20=D0=BD=D0=B5=D0=B4=D0=B0=D0=B2=D0=BD=D0=BE=20?=
 =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D1=91=D0=BD=D0=BD=D1=8B?=
 =?UTF-8?q?=D1=85=20=D0=BF=D0=BE=D1=81=D1=82=D0=BE=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/BlogCard.svelte | 73 ++++++++++++++++++++++++------
 src/lib/util/Blogs.ts              |  1 +
 2 files changed, 59 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/BlogCard.svelte b/src/lib/components/BlogCard.svelte
index 161d579..1d31599 100644
--- a/src/lib/components/BlogCard.svelte
+++ b/src/lib/components/BlogCard.svelte
@@ -7,13 +7,21 @@
 </script>
 
 <script lang="ts">
-	import Icon from '@iconify/svelte';
+	import { BLOG_POST_FRESHNESS_MILLIS } from '$lib/util/Blogs';
+	import DateWidget from '$lib/components/DateWidget.svelte';
 
 	export let post: App.BlogPost;
 	export let size: BlogCardSize = BlogCardSize.Both;
 
+	const dateNow = new Date().valueOf();
+	const isPostNew = dateNow - new Date(post.date!).valueOf() <= BLOG_POST_FRESHNESS_MILLIS;
+	const isPostUpdated =
+		post.dateChanged != null &&
+		dateNow - new Date(post.dateChanged).valueOf() <= BLOG_POST_FRESHNESS_MILLIS;
+	const isPostFresh = isPostNew || isPostUpdated;
+
 	/**
-	 * rndtrash: пришлось дублировать классы с модификатором и без, потому что Tailwind ОЧЕНЬ не любит,
+	 * rndtrash: пришлось дублировать классы с модификатором и без, потому что Tailwind просто не понимает,
 	 * когда его классы склеивают из нескольких частей
 	 */
 
@@ -34,15 +42,18 @@
 	 *
 	 * Возвращает пустую строку, если плашка может быть только полноразмерной
 	 * @param classes
+	 * @param modClasses
 	 */
-	function shortClass(classes: string): string {
-		return size === BlogCardSize.Long ? '' : classes;
+	function shortClass(classes: string, modClasses?: string): string {
+		if (size === BlogCardSize.Long) return '';
+		return size === BlogCardSize.Both && modClasses ? modClasses : classes;
 	}
 </script>
 
 <a
 	href="/blog/{post.slug}"
 	class="blog-card
+    {isPostUpdated ? 'updated' : isPostNew ? 'new' : ''}
     {shortClass('flex-col justify-baseline')}
     {fullClass('flex-row justify-stretch', 'sm:flex-row sm:justify-stretch')}"
 >
@@ -58,19 +69,31 @@
 				alt={post.thumbnailAlt ?? 'Миниатюра поста'}
 			/>
 		{/if}
+		{#if isPostFresh}
+			<div class="toast {fullClass('hidden', 'sm:hidden')}">
+				{#if isPostUpdated}
+					ОБНОВЛЕНО
+				{:else}
+					НОВОЕ
+				{/if}
+			</div>
+		{/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" width={24} height={24} />
-				<p>
-					{new Date(post.date!).toLocaleString('default', {
-						month: 'short',
-						day: 'numeric',
-						year: 'numeric'
-					})}
-				</p>
-			</div>
+		<div class="flex flex-row flex-wrap justify-start gap-4 pb-2">
+			<DateWidget
+				class={post.dateChanged ? shortClass('hidden', 'not-sm:hidden') : ''}
+				dateString={post.date}
+				type="published"
+				highlight={isPostNew && !isPostUpdated}
+			/>
+			{#if post.dateChanged}
+				<DateWidget
+					dateString={post.dateChanged}
+					type="updated"
+					highlight={isPostUpdated}
+				/>
+			{/if}
 		</div>
 
 		<h2 class="text-3xl font-bold">{post.title}</h2>
@@ -87,6 +110,26 @@
 	.blog-card {
 		@apply flex w-full max-w-5xl overflow-hidden rounded-lg bg-slate-100 text-slate-950 drop-shadow-xl transition-all hover:drop-shadow-2xl;
 
+		.toast {
+			@apply absolute top-0 right-0 rounded-bl-lg p-2 font-bold text-slate-50;
+		}
+
+		&.updated {
+			box-shadow: 0 0 0 4px var(--color-purple-600);
+
+			.toast {
+				@apply bg-purple-600;
+			}
+		}
+
+		&.new {
+			box-shadow: 0 0 0 4px var(--color-amber-600);
+
+			.toast {
+				@apply bg-amber-600;
+			}
+		}
+
 		img.thumbnail {
 			@apply absolute h-full w-full object-cover transition-transform;
 
diff --git a/src/lib/util/Blogs.ts b/src/lib/util/Blogs.ts
index a45ceaa..47939b5 100644
--- a/src/lib/util/Blogs.ts
+++ b/src/lib/util/Blogs.ts
@@ -1,6 +1,7 @@
 import path from 'path';
 
 export const THUMBNAIL_DEFAULT = "https://teasanctuary.ru/common/background-day.webp";
+export const BLOG_POST_FRESHNESS_MILLIS = 3 * 24 * 60 * 60 * 1000; // 3 дня
 
 export type PostComparer = (a: App.BlogPost, b: App.BlogPost) => number;