Prepare pixelfed feed

src/lib/feeds/feedTypes.ts

@@ -0,0 +1,14 @@
+export interface AtomFeed {
+    title: string | null;
+    subtitle: string | null;
+    updated: string | null;
+    url: string | null;
+    content: PixelfedFeed[];
+}
+
+export interface PixelfedFeed {
+    title: string | null;
+    updated: string | null;
+    imgUrl: string | null;
+    pixelfedUrl: string | null;
+}

src/lib/feeds/pixelfed.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import type { AtomFeed, PixelfedFeed } from "./feedTypes";
+
+    export let pixelfedFeed: string;
+
+    const atomUrl = "https://pixelfed.scot/users/fbface.atom";
+
+    async function loadFeed(feed: string) {
+        try {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(feed, "text/xml");
+
+            const feedTitle = doc.getElementsByTagName('title')[0].textContent;
+            const feedSubtitle = doc.getElementsByTagName('subtitle')[0].textContent;
+            const feedUpdated = doc.getElementsByTagName('updated')[0].textContent;
+
+            // Get link to profile
+            const feedProfile = doc.querySelector('link[rel="alternate"][type="text/html"]');
+            const feedProfileLink = feedProfile ? feedProfile.getAttribute('url') : null;
+
+            // Parse feed entries
+            const entries = doc.getElementsByTagName('entry');
+
+            let entryArray: PixelfedFeed[] = [];
+
+            for (let i = 0; i < entries.length; i++) {
+                const entry = entries[i];
+                const entryMediaContent = entry.getElementsByTagName('media:content')[0];
+                const entryPixelfedUrl = entry.getElementsByTagName('link')[0];
+
+                const feedItem: PixelfedFeed = {
+                    title: entry.getElementsByTagName('title')[0].textContent,
+                    updated: entry.getElementsByTagName('updated')[0].textContent,
+                    imgUrl: entryMediaContent ? entryMediaContent.getAttribute('url') : null,
+                    pixelfedUrl: entryPixelfedUrl ? entryPixelfedUrl.getAttribute('href') : null,
+                }; 
+
+                entryArray.push(feedItem);
+            }
+
+            const parsedFeed: AtomFeed = {
+                title: feedTitle,
+                subtitle: feedSubtitle,
+                updated: feedUpdated,
+                url: feedProfileLink,
+                content: entryArray,
+            }
+            
+            console.log(JSON.stringify(parsedFeed))
+            return parsedFeed
+
+        } catch (err) {
+            console.error("Unable to load Pixelfed feed", err);
+            throw new Error("Unable to load Pixelfed feed");
+        }
+    }
+</script>
+{#await loadFeed(pixelfedFeed)}
+    <h5>Conneting to Pixelfed</h5>
+{:then feedData} 
+    <h5><a href="{feedData?.url}">Pixelfed</a></h5>
+    <p class="updated">{feedData?.updated}</p>
+    {#each feedData.content as feedItem}
+        <a href={feedItem.pixelfedUrl}>
+            <img class="pixelfedImg" src="{feedItem.imgUrl}" alt="{feedItem.title}">
+        </a>
+        <caption>{feedItem.title}</caption>
+    {/each}
+{:catch}
+    <h5>Error connecting to Pixelfed</h5>
+{/await}
+
+<style>
+    .pixelfedImg {
+        width: 50%;
+        margin: auto;
+    }
+</style>

src/routes/testing/+page.server.ts

@@ -0,0 +1,11 @@
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async () => {
+    try {
+        const res = await fetch("https://pixelfed.scot/users/fbface.atom")
+        const xml = await res.text();
+        return {xml: xml}
+    } catch (err) {
+        console.error("Error in load function", err)
+    }
+}

src/routes/testing/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import Pixelfed from "$lib/feeds/pixelfed.svelte";
+    import type { PageData } from "../$types";
+
+    export let data: PageData;
+</script>
+
+<Pixelfed pixelfedFeed={data.xml} />