added MAL to about section and refactor style

2 files changed, 74 insertions, 1 deletions

diff --git a/src/components/DiscordActivity.astro b/src/components/DiscordActivity.astro
index 0b2bb88..a07d660 100644
--- a/src/components/DiscordActivity.astro
+++ b/src/components/DiscordActivity.astro
@@ -10,7 +10,7 @@
                 const activities = data.data.activities;
                 let activityHTML = "";
                 if (activities.length === 0) {
-                    activityHTML = "<p>Not doing anything at the moment</p>";
+                    activityHTML = "<p>Not doing anything at the moment :(</p>";
                 } else {
                     for (const activity of activities) {
                         const imageUrl =
diff --git a/src/components/RSSFeed.astro b/src/components/RSSFeed.astro
new file mode 100644
index 0000000..ca2dddb
--- /dev/null
+++ b/src/components/RSSFeed.astro
@@ -0,0 +1,73 @@
+---
+import { JSDOM } from 'jsdom';
+
+const fetchContent = async (url) => {
+    try {
+        const response = await fetch(url);
+        if (!response.ok) {
+            throw new Error(`Failed to fetch RSS feed: ${response.statusText}`);
+        }
+        return await response.text();
+    } catch (error) {
+        console.error(error);
+        return '<rss></rss>';
+    }
+};
+
+const rssData = await fetchContent(Astro.props.url);
+
+// Parse the RSS data
+const dom = new JSDOM(rssData);
+const xmlDoc = dom.window.document;
+const items = Array.from(xmlDoc.querySelectorAll("item")).slice(0, 7); // Only take the first 5 items
+
+const title = xmlDoc.querySelector("title").textContent;
+const link = xmlDoc.querySelector("link").textContent;
+const description = xmlDoc.querySelector("description").textContent;
+---
+
+<style>
+    body {
+        font-family: Arial, sans-serif;
+    }
+    header {
+        padding: 20px;
+        margin-bottom: 20px;
+        border-radius: 8px;
+    }
+    ul {
+        list-style-type: none;
+        padding: 0;
+    }
+    li {
+        border-bottom: 1px solid #444;
+        padding: 10px 0;
+        transition: background-color 0.3s;
+    }
+    li:hover {
+        background-color: #3a3a3a;
+    }
+    a {
+        color: #f9a825;  
+        text-decoration: none;
+    }
+    a:hover {
+        text-decoration: underline;
+    }
+    time {
+        color: #888;
+        font-size: 0.85em;
+    }
+</style>
+
+<ul>
+    {items.map(item => {
+        return (
+            <li key={item.querySelector("guid").textContent}>
+                <a href={item.querySelector("guid").textContent}>{item.querySelector("title").textContent}</a>
+                <p>{item.querySelector("description").textContent}</p>
+                <time>{item.querySelector("pubDate").textContent}</time>
+            </li>
+        );
+    })}
+</ul>