feat: article favicons and random feed description

src/lib/feed.ts

@@ -12,6 +12,7 @@ export interface FeedItem {
 	description: ArticleData['description'];
 	content: ArticleData['content'];
 	author: ArticleData['author'];
+	favicon: ArticleData['favicon'];
 }
 
 const baseUrl = `${env.SECURE ? 'https' : 'http'}://${env.HOST}:${env.PORT}`;
@@ -30,7 +31,8 @@ export function recreateDb(): BetterSqlite3.Database {
 		  description TEXT,
 		  content TEXT,
 		  author TEXT,
-		  date TEXT
+		  date TEXT,
+		  favicon TEXT
         )
       `
 	).run();
@@ -148,3 +150,17 @@ export function generateFeedTitle(): string {
 
 	return `The ${adjective}${noun} ${publication}`;
 }
+
+export function generateFeedDescription(): string {
+	const descriptions = [
+		'Making Headlines Less Boring',
+		'Headlines, Now with Flavor.',
+		'Bringing Headlines to Life.',
+		'Now 50% Less Boring!',
+		'Your Daily Briefing, Lightly Toasted.',
+		"The World's Events, Served with a Wink.",
+		'The Daily Scoop with Extra Sass.'
+	];
+
+	return descriptions[Math.floor(Math.random() * descriptions.length)];
+}

src/routes/+layout.server.ts

@@ -1,8 +1,9 @@
 import { env } from '$env/dynamic/private';
-import { generateFeedTitle, getArticles } from '$lib/feed';
+import { generateFeedDescription, generateFeedTitle, getArticles } from '$lib/feed';
 import type { LayoutServerLoad } from './$types';
 
 export const load: LayoutServerLoad = async () => ({
 	title: env.FEED_TITLE ?? generateFeedTitle(),
+	description: env.FEED_DESCRIPTION ?? generateFeedDescription(),
 	articles: getArticles()
 });

src/routes/+layout.svelte

@@ -2,11 +2,12 @@
 	import '../app.css';
 
 	export let data;
-	$: ({ title } = data);
+	$: ({ title, description } = data);
 </script>
 
 <svelte:head>
 	<title>{title}</title>
+	<meta name="description" content={description} />
 </svelte:head>
 
 <slot />

src/routes/+page.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	import '@fontsource/unifrakturcook';
 	import '@fontsource/unifrakturmaguntia';
+
 	import { IconAtom, IconJson, IconRss } from '@tabler/icons-svelte';
 
 	export let data;
-	$: ({ title, articles } = data);
+	$: ({ title, articles, description } = data);
 </script>
 
 <header class="border-gray flex w-full flex-col border-b dark:border-black">
-	<section class="font-title p-page bg-gray text-4xl dark:bg-black dark:text-white">
-		<h1>{title}</h1>
+	<section class="p-page bg-gray flex flex-col gap-y-1 dark:bg-black dark:text-white">
+		<h1 class="font-title text-4xl">{title}</h1>
+		<p><i>{description}</i></p>
 	</section>
 
 	<section
@@ -37,9 +39,19 @@
 			class="border-gray hover:bg-gray -ml-[1px] flex break-inside-avoid flex-col gap-y-2 border border-t-0 p-6 duration-[25ms] ease-out motion-safe:transition-colors dark:border-black dark:hover:bg-black"
 		>
 			<div class="flex flex-col gap-y-1">
-				<h2 class="font-title text-2xl hover:underline">
-					<a href={article.url}>{article.title}</a>
+				<h2 class="font-title flex items-start gap-x-2 text-2xl">
+					{#if article.favicon}
+						<img
+							class="inline"
+							width="24px"
+							src={article.favicon}
+							alt={`${article.title} favicon`}
+						/>
+					{/if}
+
+					<a class="hover:underline" href={article.url}>{article.title}</a>
 				</h2>
+
 				<h3 class="inline-flex gap-x-1">
 					<i>{article.author || 'By some author'}</i>
 					<span>•</span>
@@ -49,12 +61,17 @@
 
 			<p class="text-justify">{article.description}</p>
 
-			<div>
+			<div class="flex items-center justify-between">
 				<a class="bold font-subtitle text-start hover:underline" href={article.url}>
 					Read more
 					<!-- TODO: enable when time to read (ttr) is implemented -->
 					<!-- ({article.ttr}) -->
 				</a>
+
+				<!-- TODO: enable when delete article is implemented -->
+				<!-- <button>
+					<IconTrashFilled class="size-4" />
+				</button> -->
 			</div>
 		</article>
 	{/each}

src/routes/articles/add/+server.ts

@@ -19,15 +19,16 @@ export const POST: RequestHandler = async ({ request }) => {
 	if (article) {
 		const { lastInsertRowid } = db
 			.prepare(
-				'INSERT INTO articles (url, title, description, content, author, date) VALUES (@url, @title, @description, @content, @author, @date)'
+				'INSERT INTO articles (url, title, description, content, author, date, favicon) VALUES (@url, @title, @description, @content, @author, @date, @favicon)'
 			)
 			.run({
 				url,
 				title: article.title,
 				description: article.description?.slice(0, 200) ?? article.content?.slice(0, 200) + '...',
 				content: article.content,
 				author: article.author,
-				date: article.published || new Date().toDateString()
+				date: article.published || new Date().toDateString(),
+				favicon: article.favicon
 			});
 
 		return new Response(JSON.stringify({ id: lastInsertRowid, url }), {