From d57f6f03bd0364b8487b495db1974f7aede97c0e Mon Sep 17 00:00:00 2001
From: Carter McBride <18412686+carterworks@users.noreply.github.com>
Date: Fri, 23 Aug 2024 16:07:19 -0600
Subject: [PATCH] Improve error formatting

---
 src/pages/index.astro | 21 +++++++++++++--------
 src/services/feeds.ts |  6 +++---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4fe0c81..86e9ff3 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -131,11 +131,16 @@ const categoriesSelectorCss = categories
 		class="font-system text-base md:grid grid-cols-12 auto-rows-min p-4 bg-orange-50 dark:bg-slate-900 dark:text-slate-300 text-stone-700 font-semibold"
 	>
 		<header
-			class="col-span-12 row-span-1 h-fit mb-4 flex flex-row gap-8 items-center"
+			class="col-span-12 row-span-1 h-fit mb-4 flex flex-row gap-8 items-center overflow-auto"
 		>
 			<h1 class="">Carter's RSS Feeds</h1>
 			<hr class="flex-grow h-px border-0 border-b-2 border-b-stone-500" />
-			<ul>
+			<ul class="flex flex-row gap-2">
+				{
+					feedItems.errors.length > 0 ? (
+						<li>{feedItems.errors.length} error(s)</li>
+					) : null
+				}
 				<li>
 					<a
 						href="https://github.com/carterworks/rss-reader"
@@ -148,7 +153,7 @@ const categoriesSelectorCss = categories
 		</header>
 		<nav
 			id="category-picker"
-			class="flex flex-row mb-2 md:flex-col gap-2 md:gap-1 col-span-2 md:sticky md:top-4 row-span-1"
+			class="flex flex-row mb-2 md:flex-col gap-2 md:gap-1 col-span-2 md:sticky md:top-4 row-span-1 md:mr-4"
 		>
 			{
 				categories.map((category) => (
@@ -158,10 +163,10 @@ const categoriesSelectorCss = categories
 							id={category}
 							name="category"
 							class="hidden peer"
-							checked={category === STATIC_CATEGORIES.All}
+							checked={category === STATIC_CATEGORIES.Recent}
 						/>
 						<label
-							class="cursor-pointer transition-all pr-4 opacity-25 peer-checked:opacity-100 hover:opacity-100 flex flex-row gap-2 items-center"
+							class="cursor-pointer transition-all opacity-25 peer-checked:opacity-100 hover:opacity-100 flex flex-row gap-2 items-center"
 							for={category}
 						>
 							<div
@@ -233,15 +238,15 @@ const categoriesSelectorCss = categories
 			</ul>
 		</main>
 		<footer
-			class="sticky bottom-4 mt-4 md:mt-0 text-sm row-end-13 row-span-1 col-span-2 h-8 opacity-25 hover:opacity-100 transition-opacity"
+			class="mt-4 md:mr-4 md:mt-0 text-sm row-end-13 row-span-1 col-span-2 overflow-auto max-h-20 opacity-25 hover:opacity-100 transition-opacity"
 		>
 			{
 				feedItems.errors.length === 0 ? (
 					<>No errors</>
 				) : (
-					<ul class="">
+					<ul>
 						{feedItems.errors.map((error) => (
-							<li class="break-words">{error}</li>
+							<li class="break-words mb-2">{error}</li>
 						))}
 					</ul>
 				)
diff --git a/src/services/feeds.ts b/src/services/feeds.ts
index 314f0d7..6d3a162 100644
--- a/src/services/feeds.ts
+++ b/src/services/feeds.ts
@@ -141,7 +141,7 @@ async function parseFeedContents(
 		}));
 		return items;
 	} catch (err) {
-		console.error(`Error processing: ${feedUrl}\n${err}`);
+		console.error(`${feedUrl}\n${err}`);
 		throw err;
 	}
 }
@@ -162,10 +162,10 @@ export default async function getAllFeedItems(): Promise<{
 					return parseFeedContents(feedUrl, category).catch((err) => {
 						let toThrow: Error;
 						if (err instanceof Error) {
-							err.message = `Error fetching ${feedUrl}: ${err.message}`;
+							err.message = `${feedUrl}: ${err.message}`;
 							toThrow = err;
 						} else {
-							toThrow = new Error(`Error fetching ${feedUrl}: ${err}`);
+							toThrow = new Error(`${feedUrl}: ${err}`);
 						}
 						return Promise.reject(toThrow);
 					});