blog/index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Sixtron Blog</title>
	<meta charset="utf-8">
	<meta name="author" content="https://orcid.org/0009-0001-0977-2029">
	<meta name="color-scheme" content="dark light">
	<meta name="description" content="a webpage to nicely display the entries of my Atom feed">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../style.css">
</head>

<body>
	<script>
		/**
		 * @param {Element} element
		 * @param {string} tagName
		 * @returns {Element | undefined}
		 */
		function getFrom(element, tagName) {
			return element.getElementsByTagName(tagName)[0];
		}

		/**
		 * @param {Element} atomEntry - Contains a human readable title element.
		 * @returns {Element}
		 */
		function atomEntryToHTML(atomEntry) {
			const article = document.createElement("article");
			article.id = getFrom(atomEntry, "link")?.getAttribute("href")?.split("#")?.[1] ?? "";
			const h2 = document.createElement("h2");
			h2.textContent = getFrom(atomEntry, "title").textContent;
			article.appendChild(h2);
			article.insertAdjacentHTML("beforeend", getFrom(atomEntry, "content")?.innerHTML ?? "");
			return article;
		}

		/**
		 * @param {Document | null} atomDoc - Contains a human readable title
		 * element if not null.
		 */
		function displayAtomFeed(atomDoc) {
			if (atomDoc === null) {
				console.log("XMLHttpRequest.responseXML was null");
				return;
			}
			const link = document.createElement("link");
			link.rel = "icon";
			link.href = getFrom(atomDoc, "icon")?.textContent ?? "";
			document.head.appendChild(link);
			const titleText = getFrom(atomDoc, "title").textContent;
			document.title = titleText;
			const header = document.createElement("header");
			const h1 = document.createElement("h1");
			h1.textContent = titleText;
			header.appendChild(h1);
			header.insertAdjacentHTML("beforeend", getFrom(atomDoc, "subtitle")?.innerHTML ?? "");
			document.body.appendChild(header);
			for (const entry of atomDoc.getElementsByTagName("entry")) {
				document.body.appendChild(atomEntryToHTML(entry));
			}
		}

		const req = new XMLHttpRequest();
		req.onload = () => displayAtomFeed(req.responseXML);
		const feedUrl = new URLSearchParams(window.location.search).get("f") ?? "https://home.6t.lt/atom.xml";
		req.open("GET", feedUrl);
		req.send();
	</script>
</body>

</html>