Типы блог-постов

src/lib/components/BlogCard.svelte

@@ -7,18 +7,25 @@
 </script>
 
 <script lang="ts">
-	import { BLOG_POST_FRESHNESS_MILLIS } from '$lib/util/Blogs';
+	import {
+		BLOG_POST_FRESHNESS_MILLIS,
+		blogPostTypeToIcon,
+		blogPostTypeToString
+	} from '$lib/util/Blogs';
 	import DateWidget from '$lib/components/DateWidget.svelte';
+	import Icon from '@iconify/svelte';
 
 	export let post: App.BlogPost;
 	export let size: BlogCardSize = BlogCardSize.Both;
 
+	const type: App.BlogPostType = post.type ?? 'article';
 	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;
+	// TODO: rndtrash: события и их актуальность
 
 	/**
 	 * rndtrash: пришлось дублировать классы с модификатором и без, потому что Tailwind просто не понимает,
@@ -59,7 +66,7 @@
 >
 	<div
 		class="relative w-full basis-auto overflow-hidden
-        {shortClass('h-32')}
+        {shortClass('h-32 md:h-48')}
         {fullClass('h-auto basis-1/3', 'sm:h-auto sm:basis-1/3')}"
 	>
 		{#if post.thumbnail}
@@ -79,7 +86,7 @@
 			</div>
 		{/if}
 	</div>
-	<div class="flex w-full flex-col justify-center p-4 break-words md:p-8">
+	<div class="flex w-full flex-col justify-center p-4 break-words">
 		<div class="flex flex-row flex-wrap justify-start gap-4 pb-2">
 			<DateWidget
 				class={post.dateChanged ? shortClass('hidden', 'not-sm:hidden') : ''}
@@ -94,6 +101,12 @@
 					highlight={isPostUpdated}
 				/>
 			{/if}
+			<div class="flex items-center gap-2 p-1 text-lg font-bold">
+				<Icon icon={blogPostTypeToIcon(type)} width={28} height={28} />
+				<span>
+					{blogPostTypeToString(type)}
+				</span>
+			</div>
 		</div>
 
 		<h2 class="text-3xl font-bold">{post.title}</h2>

src/lib/util/Blogs.ts

@@ -1,5 +1,3 @@
-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 дня
 
@@ -60,4 +58,24 @@ export function resolveBlogPath(slug?: string, src?: string) {
 	return src.startsWith('http://') || src.startsWith('https://')
 		? src
 		: `/blog/${slug}/${src}`;
-}
+}
+
+const bptToString: Record<App.BlogPostType, string> = {
+	'article': 'Заметка',
+	'event': 'Событие',
+	'update': 'Обновление'
+};
+
+const bptToIcon: Record<App.BlogPostType, string> = {
+	'article': 'material-symbols:article',
+	'event': 'material-symbols:event',
+	'update': 'material-symbols:autorenew'
+};
+
+export function blogPostTypeToString(type: App.BlogPostType): string {
+	return bptToString[type] ?? bptToString['article'];
+}
+
+export function blogPostTypeToIcon(type: App.BlogPostType): string {
+	return bptToIcon[type] ?? bptToIcon['article'];
+}