feat: find more rss sources

package.json

@@ -65,7 +65,7 @@
 	},
 	"dependencies": {
 		"@lucide/svelte": "^1.7.0",
-		"fast-xml-parser": "^5.5.8",
+		"fast-xml-parser": "^5.7.1",
 		"fuse.js": "^7.3.0",
 		"isomorphic-dompurify": "^3.4.0",
 		"js-yaml": "^4.1.1",

src/lib/data/rss-sources.json

@@ -17,6 +17,18 @@
 			"name": "Techlore",
 			"url": "https://techlore.tech",
 			"feedUrl": "https://techlore.tech/rss/"
+		},
+		{
+			"id": "proton",
+			"name": "Proton",
+			"url": "https://proton.me/blog",
+			"feedUrl": "https://proton.me/blog/feed"
+		},
+		{
+			"id": "mullvad",
+			"name": "Mullvad",
+			"url": "https://mullvad.net/en/blog",
+			"feedUrl": "https://mullvad.net/en/blog/feed/rss/"
 		}
 	]
 }

src/lib/features/feed/components/article-filters.svelte

@@ -1,35 +1,63 @@
 <script lang="ts">
 	import type { HTMLAttributes } from 'svelte/elements';
 
+	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
 	import rssSources from '$lib/data/rss-sources.json';
 	import type { SourceSearchParam } from '$lib/features/feed/types';
 	import { cn } from '$lib/utils/cn';
 
+	type ArticleFiltersProps = HTMLAttributes<HTMLDivElement>;
+
+	let { class: klass, ...props }: ArticleFiltersProps = $props();
+
 	const filters = [{ id: 'all', name: 'All' }, ...rssSources.data];
 
 	let activeFilter = $state(page.url.searchParams.get('source') as SourceSearchParam);
 
-	type ArticleFiltersProps = HTMLAttributes<HTMLDivElement>;
+	function createHref(filterId: string | null) {
+		return filterId === 'all' || filterId === null
+			? '/privacy-news'
+			: (`/privacy-news?source=${filterId}` as const);
+	}
 
-	let { class: klass, ...props }: ArticleFiltersProps = $props();
+	function handleFilterChange(event: Event) {
+		const target = event.target as HTMLSelectElement;
+		const value = target.value as SourceSearchParam;
+
+		activeFilter = value;
+
+		void goto(resolve(createHref(value)));
+	}
 </script>
 
-<div role="tablist" class={cn('tabs-border mb-6 tabs ', klass)} {...props}>
-	{#each filters as filter (filter.id)}
-		{@const isActive = activeFilter === filter.id || (filter.id === 'all' && activeFilter === null)}
-		{@const href =
-			filter.id === 'all' ? '/privacy-news' : (`/privacy-news?source=${filter.id}` as const)}
-		<a
-			role="tab"
-			href={resolve(href)}
-			class={cn('tab', isActive && 'tab-active text-primary')}
-			onclick={() => {
-				activeFilter = filter.id as SourceSearchParam;
-			}}
-		>
-			{filter.name}
-		</a>
-	{/each}
+<div class={cn('mb-6', klass)} {...props}>
+	<select
+		class="select-bordered select w-full sm:hidden"
+		aria-label="Filter by source"
+		value={activeFilter ?? 'all'}
+		onchange={handleFilterChange}
+	>
+		{#each filters as filter (filter.id)}
+			<option value={filter.id}>{filter.name}</option>
+		{/each}
+	</select>
+
+	<div role="tablist" class="tabs-border tabs hidden gap-1 sm:flex">
+		{#each filters as filter (filter.id)}
+			{@const isActive =
+				activeFilter === filter.id || (filter.id === 'all' && activeFilter === null)}
+			<a
+				role="tab"
+				href={resolve(createHref(filter.id))}
+				class={cn('tab', isActive && 'tab-active text-primary')}
+				onclick={() => {
+					activeFilter = filter.id as SourceSearchParam;
+				}}
+			>
+				{filter.name}
+			</a>
+		{/each}
+	</div>
 </div>

src/lib/features/feed/components/source-badge.svelte

@@ -13,8 +13,12 @@
 	const variant = {
 		tuta: 'badge-error',
 		techlore: 'badge-info',
-		privacyguides: 'badge-warning'
+		privacyguides: 'badge-warning',
+		proton: 'bg-violet-950 border-violet-950  text-violet-300',
+		mullvad: 'bg-yellow-500 border-yellow-500  text-blue-800'
 	} satisfies Record<Source['id'], string>;
 </script>
 
-<div class={cn('badge badge-soft', variant[source.id], klass)} {...props}>{source.name}</div>
+<div class={cn('badge badge-soft font-semibold', variant[source.id], klass)} {...props}>
+	{source.name}
+</div>

src/lib/features/feed/service.test.ts

@@ -94,20 +94,20 @@ describe('RSS', () => {
 		it('returns all sources when source param is "all"', async () => {
 			const result = await rss.getSources({ source: 'all' });
 
-			expect(result.length).toBe(3);
-			expect(result).toHaveLength(3);
+			expect(result.length).toBe(5);
+			expect(result).toHaveLength(5);
 		});
 
 		it('returns all sources when called with default param', async () => {
 			const result = await rss.getSources();
 
-			expect(result.length).toBe(3);
+			expect(result.length).toBe(5);
 		});
 
 		it('returns all sources when source is null', async () => {
 			const result = await rss.getSources({ source: null });
 
-			expect(result.length).toBe(3);
+			expect(result.length).toBe(5);
 		});
 
 		it('returns only the matching source when a specific source id is provided', async () => {

src/lib/features/feed/types.ts

@@ -2,7 +2,7 @@
 // source
 //----------------------------------------------------------------------
 
-export type SourceId = 'tuta' | 'privacyguides' | 'techlore';
+export type SourceId = 'tuta' | 'privacyguides' | 'techlore' | 'proton' | 'mullvad';
 export type SourceSearchParam = SourceId | 'all' | null;
 
 export type Source = {