my-portfolio/src/lib/RssFeed.svelte

<script>
	import { onMount } from 'svelte';

	const url = 'https://gitea.rannes.dev/rannes.dev/my-portfolio.rss';

	let feed = null;
	let error = null;

	async function fetchFeed() {
		try {
			const response = await fetch(url);
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
			}
			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
			}));
			feed = items;
		} catch (err) {
			error = err.message;
		}
	}

	onMount(() => {
		fetchFeed();
	});
</script>

{#if error}
	<p>Error: {error}</p>
{:else if !feed}
	<p>Loading...</p>
{:else}
	<div>
		{#each feed.slice(0, 5) as item}
			<div>
				<h3>{@html item.title}</h3>
				<p>{@html item.description}</p>
				<a href={item.link} target="_blank">Read more</a>
			</div>
		{/each}
	</div>
{/if}