Added RSS import for blog posts (#253)

Co-authored-by: Zicklag <[email protected]>

.env.local

@@ -18,13 +18,14 @@ PUBLIC_TRAEFIK_CONFIG_HOST="127.0.0.1:9523"
 
 FEEDBACK_WEBHOOK=""
 
-
 PUBLIC_URL=http://localhost:9523
 PUBLIC_DOMAIN=localhost:9523
 DNS_PORT=7753
 PUBLIC_USER_DOMAIN_PARENT=user.localhost:9523
 REDIS_URL="redis://localhost:7634"
 
+PUBLIC_ENABLE_EXPERIMENTS=true
+
 # DNS
 APP_IPS="127.0.0.1"
 DNS_ALLOWED_DOMAINS="localhost:9523"

package.json

@@ -86,10 +86,11 @@
 		"vite-plugin-wasm": "^3.3.0",
 		"vitest": "^2.1.6",
 		"ws": "^8.18.0",
+		"@atproto/api": "^0.13.18",
+		"fast-xml-parser": "^4.5.0",
 		"zod": "^3.23.8"
 	},
 	"dependencies": {
-		"@atproto/api": "^0.13.18",
 		"sharp": "^0.33.5",
 		"zlib-sync": "^0.1.9"
 	},

src/lib/types/rss.ts

@@ -0,0 +1,9 @@
+export type PostItem = {
+	title: string;
+	'dc:creator': string;
+	pubDate: string;
+	link: string;
+	guid: string;
+	description: string;
+	category: string[];
+};

src/routes/(app)/[username]/+page.server.ts

@@ -1,12 +1,13 @@
 import { setProfileById, setAvatarById, type Profile } from '$lib/leaf/profile';
-import { type Actions, redirect, fail } from '@sveltejs/kit';
+import { type Actions, redirect, fail, error } from '@sveltejs/kit';
 import { type CheckResponseError } from '$lib/utils/http';
 import { getSession } from '$lib/rauthy/server';
 import { RawImage } from 'leaf-proto/components';
 import sharp from 'sharp';
+import { XMLParser } from 'fast-xml-parser';
 
 export const actions = {
-	default: async ({ fetch, request }) => {
+	edit: async ({ fetch, request }) => {
 		let { sessionInfo } = await getSession(fetch, request);
 		if (!sessionInfo) return fail(403, { error: 'Not logged in' });
 
@@ -85,5 +86,36 @@ export const actions = {
 		}
 
 		redirect(303, '/my-profile');
+	},
+	rss: async ({ fetch, request }) => {
+		const formData = await request.formData();
+		const rssLink = formData.get('rssLink');
+
+		if (!rssLink)
+			return {
+				rss: {
+					error: 'Please enter RSS Link'
+				}
+			};
+
+		const response = await fetch(rssLink.toString());
+		if (!response.ok) {
+			return {
+				rss: {
+					error: 'Error while parsing RSS Link'
+				}
+			};
+		}
+		const xmlText = await response.text();
+		const parser = new XMLParser();
+		const parsedData = parser.parse(xmlText);
+
+		// Adjust this based on your RSS feed structure
+		const items = parsedData?.rss?.channel?.item || [];
+		return {
+			rss: {
+				items
+			}
+		};
 	}
 } satisfies Actions;

src/routes/(app)/[username]/+page.svelte

@@ -18,6 +18,7 @@
 	import { page } from '$app/stores';
 	import SocialMediaButton from '$lib/components/social-media/social-media-button.svelte';
 	import FeaturedSocialMediaButton from '$lib/components/social-media/featured-social-media-button.svelte';
+	import PostCard from './post-card.svelte';
 
 	let { data, form }: { data: PageData; form: ActionData } = $props();
 
@@ -231,6 +232,7 @@
 							in:fadeIn={{ key: 'edit-buttons' }}
 							out:fadeOut={{ key: 'edit-buttons' }}
 							enctype="multipart/form-data"
+							action="?/edit"
 						>
 							<input type="hidden" name="display_name" value={editingState.profile.display_name} />
 							<input
@@ -321,6 +323,29 @@
 					</span>
 				</div>
 			{/if}
+
+			<div>
+				{#if editingState.editing && env.PUBLIC_ENABLE_EXPERIMENTS == 'true'}
+					<form method="POST" action="?/rss">
+						<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-none">
+							<div class="input-group-shim">
+								<Icon icon="mdi:rss" class="h-6 w-6" />
+							</div>
+							<input type="url" placeholder="Enter RSS Link" name="rssLink" />
+
+							<button type="submit" class="text-base variant-filled-secondary">Import</button>
+						</div>
+						<span class="text-sm text-error-300">{form?.rss?.error}</span>
+					</form>
+				{/if}
+
+				{#if form?.rss?.items}<div class="mt-8 grid grid-cols-1 gap-4">
+						{#each form.rss.items ?? [] as post}
+							<PostCard {post} />
+						{/each}
+					</div>
+				{/if}
+			</div>
 		</div>
 	</div>
 </main>

src/routes/(app)/[username]/post-card.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { PostItem } from '$lib/types/rss';
+	import Icon from '@iconify/svelte';
+	import { formatDistanceToNow } from 'date-fns';
+
+	export let post: PostItem;
+</script>
+
+<a href={post.link} target="_blank" class="card card-hover">
+	<main class="p-4">
+		<h3 class=" text-lg font-bold">{post.title}</h3>
+		<div class="mt-2 flex items-center gap-1">
+			<span class="opacity-75"><Icon icon="mdi:calendar" class="h-4 w-4" /></span>
+			<span class="text-base opacity-70">{formatDistanceToNow(post.pubDate)}</span>
+		</div>
+		<div class="mt-2 line-clamp-3 text-base opacity-70">
+			{@html post.description}
+		</div>
+
+		<ul class="mt-2 flex flex-wrap items-center gap-4">
+			{#each post.category as category}
+				<li>
+					<span class="variant-filled badge">{category}</span>
+				</li>
+			{/each}
+		</ul>
+	</main>
+</a>