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

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>