src/lib/Commit.svelte

@@ -1,24 +1,21 @@
 <script>
+	import { AccordionItem } from 'flowbite-svelte';
 	import moment from 'moment';
+	export let isOpen = false;
 	export let link;
 	export let title;
 	export let description;
 	export let published;
-	export let author;
-	export let guid;
 	const pubAgo = moment(published).fromNow();
 </script>
 
-<div
-	class="block p-6 bg-white border border-gray-200 rounded-lg shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700"
->
-	<div class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">
-		{@html title}
+<AccordionItem {...isOpen ? { open: true } : {}}>
+	<span slot="header">{@html title} - {pubAgo}</span>
+	<div class="flex flex-col">
+		{#if description}
+			<p>with the message:</p>
+			<code>{description}</code>
+		{/if}
+		<a class="hover:text-slate-100" href={link}>view commit</a>
 	</div>
-	<div class="font-normal hover:text-slate-400">
-		{@html description}
-	</div>
-	<div>commited {pubAgo} by {@html author}</div>
-	<a class="hover:text-slate-400 underline" href={link}>view commit</a>
-	<div class="text-xs text-slate-400">guid:{guid}</div>
-</div>
+</AccordionItem>

src/lib/RssContainer.svelte

@@ -4,6 +4,6 @@
 </script>
 
 <div>
-	<h2 class="text-xl mt-4 font-normal">Here are the last 5 commits:</h2>
+	<h2 class="text-xl mt-4 font-normal">Here are the 5 most recent commits</h2>
 	<RssFeed {url} />
 </div>

src/lib/RssFeed.svelte

@@ -2,13 +2,14 @@
 	import { onMount } from 'svelte';
 	import Spinner from './Spinner.svelte';
 	import Commit from './Commit.svelte';
+	import { Accordion } from 'flowbite-svelte';
 
 	export let url;
 
 	let feed = null;
 	let error = null;
 
-	async function fetchFeed() {
+	async function fetchFeed(url) {
 		try {
 			const response = await fetch(url);
 			if (!response.ok) {
@@ -17,14 +18,32 @@
 			const text = await response.text();
 			const parser = new DOMParser();
 			const xml = parser.parseFromString(text, 'application/xml');
-			const items = Array.from(xml.querySelectorAll('item')).map((item) => ({
-				title: item.querySelector('title')?.textContent,
-				link: item.querySelector('link')?.textContent,
-				description: item.querySelector('description')?.textContent,
-				published: item.querySelector('pubDate')?.textContent,
-				author: item.querySelector('author')?.textContent,
-				guid: item.querySelector('guid')?.textContent
-			}));
+
+			const items = Array.from(xml.querySelectorAll('item')).map((item) => {
+				// Parse description
+				const descriptionElement = item.querySelector('description');
+				const descriptionContent = descriptionElement ? descriptionElement.textContent : '';
+				const tempDivDescription = document.createElement('div');
+				tempDivDescription.innerHTML = descriptionContent;
+				const firstLinkDescription = tempDivDescription.querySelector('a')
+					? tempDivDescription.querySelector('a').href
+					: '';
+				if (tempDivDescription.querySelector('a')) {
+					tempDivDescription.querySelector('a').remove();
+				}
+				const cleanedDescription = tempDivDescription.innerHTML.trim();
+
+				return {
+					title: item.querySelector('title')?.textContent,
+					description: cleanedDescription,
+					commit: firstLinkDescription,
+					link: item.querySelector('link')?.textContent,
+					published: item.querySelector('pubDate')?.textContent,
+					author: item.querySelector('author')?.textContent,
+					guid: item.querySelector('guid')?.textContent
+				};
+			});
+
 			feed = items;
 		} catch (err) {
 			error = err.message;
@@ -32,7 +51,7 @@
 	}
 
 	onMount(() => {
-		fetchFeed();
+		fetchFeed(url);
 	});
 </script>
 
@@ -43,9 +62,15 @@
 		<Spinner />
 	{:else}
 		<div class="flex flex-col gap-2">
-			{#each feed.slice(0, 5) as commit}
-				<Commit {...commit} />
-			{/each}
+			<Accordion>
+				{#each feed.slice(0, 5) as commit, i}
+					{#if i === 0}
+						<Commit {...commit} isOpen={true} />
+					{:else}
+						<Commit {...commit} open={false} />
+					{/if}
+				{/each}
+			</Accordion>
 		</div>
 	{/if}
 </div>