2 files changed, 54 insertions, 0 deletions
diff --git a/backend/static/favicon.svg b/backend/static/favicon.svg
new file mode 100644
index 0000000..3602b2c
--- /dev/null
+++ b/backend/static/favicon.svg
@@ -0,0 +1,7 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <rect x="0" y="0"  width="100" height="100" rx="8" ry="8" fill="skyblue" />
+  <path d="M 0,18 L 74,18 A 8,8 0 0 1 82,26 L 82,100 L 0,100 L 0,18" fill="white" />
+  <path d="M 0,36 L 56,36 A 8,8 0 0 1 64,44 L 64,100 L 0,100 L 0,36" fill="skyblue" />
+  <path d="M 0,54 L 38,54 A 8,8 0 0 1 46,62 L 46,100 L 0,100 L 0,54" fill="white" />
+  <rect x="0" y="72" width="28"  height="28"  rx="8" ry="8" fill="skyblue" />
+</svg>
diff --git a/backend/static/index.js b/backend/static/index.js
new file mode 100644
index 0000000..6354bbd
--- /dev/null
+++ b/backend/static/index.js
@@ -0,0 +1,47 @@
+const markAllArticles = (feedId, el, read) => {
+	const basePath = window.BASE_PATH;
+	const apiUrl = `${basePath}/api/feeds/${feedId}/${read ? "read" : "unread"}`;
+	fetch(apiUrl, { method: "PUT" })
+		.then((_data) => {
+			el.parentNode.nextElementSibling.remove();
+			el.parentNode.remove();
+		})
+		.catch((error) => {
+			alert(error);
+		});
+};
+
+const markOneArticle = (articleId, el, read) => {
+	const basePath = window.BASE_PATH;
+	const apiUrl = `${basePath}/api/articles/${articleId}/${read ? "read" : "unread"}`;
+	fetch(apiUrl, { method: "PUT" })
+		.then((_data) => {
+			el.parentNode.remove();
+		})
+		.catch((error) => {
+			alert(error);
+		});
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+	document.querySelectorAll(".js-unread-feed").forEach((el) => {
+		el.addEventListener("click", () => {
+			markAllArticles(el.dataset.feedId, el, false);
+		});
+	});
+	document.querySelectorAll(".js-unread-article").forEach((el) => {
+		el.addEventListener("click", () => {
+			markOneArticle(el.dataset.articleId, el, false);
+		});
+	});
+	document.querySelectorAll(".js-read-feed").forEach((el) => {
+		el.addEventListener("click", () => {
+			markAllArticles(el.dataset.feedId, el, true);
+		});
+	});
+	document.querySelectorAll(".js-read-article").forEach((el) => {
+		el.addEventListener("click", () => {
+			markOneArticle(el.dataset.articleId, el, true);
+		});
+	});
+});