RSS генерирует HTML с миниатюрой и её альт-текстом

src/app.d.ts

@@ -22,6 +22,7 @@ declare global {
 			slug: string;
 			title: string;
 			thumbnail?: string;
+			thumbnailAlt?: string;
 			date?: string;
 			dateChanged?: string;
 			description: string;

src/routes/blog/+page.svelte

@@ -46,18 +46,18 @@
 		>
 			{monthYear}
 		</h1>
-		<div class="flex flex-col flex-wrap items-stretch gap-4">
+		<div class="flex flex-col flex-wrap items-center gap-4">
 			{#each postsInMonthYear as post, i}
 				<a
 					href="/blog/{post.slug}"
-					class="flex 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"
+					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="thumbnail"
+								alt={post.thumbnailAlt ?? 'Миниатюра поста'}
 							/>
 						{/if}
 					</div>

src/routes/blog/[slug]/+page.svelte

@@ -27,6 +27,7 @@
 		</div>
 	</div>
 </section>
+
 <section
 	class="flex shrink-0 flex-col items-center justify-center p-4 font-bold {isPublic
 		? 'bg-amber-50 text-slate-950'
@@ -79,6 +80,8 @@
 		hover:prose-a:transition-all
 		prose-code:break-words
 		prose-pre:drop-shadow-md
+		mx-auto
+		w-5xl
 		bg-white
 		p-4 lg:p-8"
 >

src/routes/blog/rss.xml/+server.ts

@@ -1,4 +1,4 @@
-import { fetchPostsSorted } from "$src/lib/util/Blogs";
+import { fetchPostsSorted, resolveBlogPath } from "$src/lib/util/Blogs";
 
 export const prerender = true;
 
@@ -13,6 +13,14 @@ function escapeXml(unsafe: string): string {
         .replace(/'/g, "'");
 }
 
+function makeThumbnail(post: App.BlogPost): string {
+    if (!post.thumbnail) return '';
+
+    const alt = !!post.thumbnailAlt ? ` alt="${escapeXml(post.thumbnailAlt)}"` : '';
+
+    return `<br><br><img src="https://teasanctuary.ru${resolveBlogPath(post.slug, post.thumbnail)}"${alt}>`;
+}
+
 export async function GET({ setHeaders }) {
     setHeaders({
         'Cache-Control': 'max-age=0, s-maxage=3600',
@@ -28,7 +36,7 @@ export async function GET({ setHeaders }) {
 <updated>${feedUpdated.toUTCString()}</updated>
 ${posts.map((post) => `<item>
 <title>${escapeXml(post.title)}</title>
-<description>${escapeXml(post.description)}</description>
+<description><![CDATA[${escapeXml(post.description)}${makeThumbnail(post)}]]></description>
 <guid isPermaLink="true">https://teasanctuary.ru/blog/${post.slug}</guid>
 <link>https://teasanctuary.ru/blog/${post.slug}</link>
 <pubDate>${(new Date(post.date!)).toUTCString()}</pubDate>