Add blog RSS scraper

anilist.js

@@ -39,7 +39,7 @@ fetch("https://graphql.anilist.co", options)
 		});
 	})
 	.then(data => {
-		const container = document.querySelector(".activities");
+		const container = document.querySelector("#anime");
 		container.innerHTML = "";
 		const activities = data.data.Page.activities;
 		let displayedIds = [];
@@ -83,4 +83,4 @@ fetch("https://graphql.anilist.co", options)
 	.catch(error => {
 		document.querySelector(".activities").innerHTML = "Failed to load!";
 		console.error(error);
-	});
+	});

index.html

@@ -7,7 +7,8 @@
 	<link rel="stylesheet" href="style.css">
 	<title>Elnu's Homepage</title>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
-	<script src="script.js"></script>
+	<script src="anilist.js"></script>
+	<script src="rss.js"></script>
 	<script>
 		var _paq = window._paq = window._paq || [];
 		_paq.push(['trackPageView']);
@@ -48,9 +49,13 @@
 			</div>
 		</div>
 		<h3>Recently watched anime from <a href="https://anilist.co/user/Elnu/">AniList</a></h3>
-		<div class="activities">
+		<div id="anime" class="activities">
 			Loading recent anime activity...
 		</div>
+		<h3>Recent posts from <a href="https://blog.elnu.com">blog</a></h3>
+		<div id="posts" class="activities">
+			Loading recent post activity...
+		</div>
 		<br>
 		<div class="socials">
 			<a href="https://anilist.co/user/Elnu/" title="AniList" target="_blank"><img src="anilist.svg" alt="AniList"></a>

rss.js

@@ -0,0 +1,41 @@
+fetch("https://blog.elnu.com/index.xml")
+	.then(response => response.text())
+	.then(str => new window.DOMParser().parseFromString(str, "text/xml"))
+	.then(data => {
+		const container = document.querySelector("#posts");
+		const items = data.querySelectorAll("item");
+		container.innerHTML = "";
+		for (let i = 0; i < Math.min(items.length, 6); i++) {
+			const item = items[i];
+
+			const link = item.querySelector("link").innerHTML;
+			const title = item.querySelector("title").innerHTML;
+			const description = item.querySelector("description").innerHTML;
+			const date = new Date(item.querySelector("pubDate").innerHTML);
+
+			const element = document.createElement("div");
+			
+			if (item.querySelector("enclosure")) {
+				const coverUrl = item.querySelector("enclosure").getAttribute("url");
+				const thumbnailLink = document.createElement("a");
+				thumbnailLink.href = link;
+				thumbnailLink.title = title;
+			
+				const thumbnail = document.createElement("img");
+				thumbnail.src = coverUrl;
+				thumbnail.alt = title;
+				
+				thumbnailLink.appendChild(thumbnail);
+
+				element.appendChild(thumbnailLink)
+			}
+			
+			const descriptionDiv = document.createElement("div");
+			descriptionDiv.classList.add("description");
+			descriptionDiv.innerHTML = `<p><b>${moment(date).fromNow()}</b> posted <a href="${link}"><b><i>${title}</i></b></a></p><p>${description}</p>`;
+
+			element.appendChild(descriptionDiv);
+
+			container.appendChild(element);
+		}
+	});