src/lib/RssFeed.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { onMount } from 'svelte';
 
-	const url = 'https://gitea.rannes.dev/rannes.dev/local-weather.rss';
+	const url = 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss';
 
 	let feed = null;
 	let error = null;
@@ -37,10 +37,10 @@
 	<p>Loading...</p>
 {:else}
 	<div>
-		{#each feed as item}
+		{#each feed.slice(0, 5) as item}
 			<div>
-				<h3>{item.title}</h3>
+				<h3>{@html item.title}</h3>
-				<p>{item.description}</p>
+				<p>{@html item.description}</p>
 				<a href={item.link} target="_blank">Read more</a>
 			</div>
 		{/each}

src/routes/+page.svelte

@@ -1,6 +1,15 @@
+<script>
+	import RssFeed from '../lib/RssFeed.svelte';
+</script>
+
 <div class="main-container text-center">
-    <h1 class="text-xl mb-2">Welcome to my corner of the internet</h1>
+	<h1 class="text-xl mb-2">Welcome to my corner of the internet</h1>
-    <p>You most likely ended up here after listening to me rambling about the wonders of self hosted services, and how life would be much easier if we could just containerize everything.
+	<p>
-    </p>
+		You most likely ended up here after listening to me rambling about the wonders of self hosted
-    <p class="italic text-sm mt-8">This page is my initial svelte project to try out the framework, and at the time of writing (24th April 2024) many pages are still lacking content.</p>
+		services, and how life would be much easier if we could just containerize everything.
-</div>
+	</p>
+	<p class="italic text-sm mt-8">
+		This page is my initial svelte project to try out the framework, and at the time of writing
+		(24th April 2024) many pages are still lacking content.
+	</p>
+</div>

src/routes/svelte/+page.svelte

@@ -1,5 +1,6 @@
 <script>
 	import { fade } from 'svelte/transition';
+	import RssFeed from '../../lib/RssFeed.svelte';
 </script>
 
 <div in:fade>
@@ -18,4 +19,5 @@
 			>Read more about that here.</a
 		>
 	</p>
+	<RssFeed />
 </div>