added main.ts, and recent loading for Articles - early state

2022-02-02 20:48:36 +01:00
parent 026bf1c3bc
commit df4f4da3d3
5 changed files with 112 additions and 3 deletions
--- a/js/main.ts
+++ b/js/main.ts
@@ -0,0 +1,63 @@
+let articleParent = document.getElementById("articles");
+
+window.onload = function() {
+
+    recent(5).then(function(data) {
+        data.forEach(function(article) {
+
+            let articleA = document.createElement("a")
+            articleA.setAttribute("href", article.link)
+
+            let articleDiv = document.createElement("div")
+            articleDiv.setAttribute("class", "article")
+
+            let articleHeader = document.createElement("div")
+            articleHeader.setAttribute("class", "article-header")
+
+            let articleHeaderTitle = document.createElement("h3")
+            articleHeaderTitle.innerHTML = article.title
+
+            articleHeader.appendChild(articleHeaderTitle)
+            articleDiv.appendChild(articleHeader)
+
+            let articleDescription = document.createElement("div")
+            articleDescription.setAttribute("class", "article-description")
+
+            let articleDescriptionP = document.createElement("p")
+
+            let articleDescriptionTopics = document.createElement("i")
+            articleDescriptionTopics.innerHTML = article.tags.join(", ")
+
+            let articleDescriptionAuthors = document.createElement("i")
+            articleDescriptionAuthors.innerHTML = article.authors[0].name //TODO join ALL Auhtors
+
+            let articleDescriptionDate = document.createElement("i")
+            articleDescriptionDate.innerHTML = article.modified.toString()
+
+            articleDescriptionP.appendChild(articleDescriptionTopics)
+            articleDescriptionP.appendChild(articleDescriptionAuthors)
+            articleDescriptionP.appendChild(articleDescriptionDate)
+
+            articleDescription.appendChild(articleDescriptionP)
+            articleDiv.appendChild(articleDescription)
+
+            let articleBody = document.createElement("div")
+            articleBody.setAttribute("class", "article-body")
+
+            let articleBodyP = document.createElement("p")
+            articleBodyP.innerHTML = article.summary
+
+            articleBody.appendChild(articleBodyP)
+            articleDiv.appendChild(articleBody)
+
+            articleA.appendChild(articleDiv)
+            articleParent.appendChild(articleA)
+
+            let divider = document.createElement("div")
+            divider.setAttribute("class", "divider")
+
+            articleParent.appendChild(divider)
+
+        })
+    })
+}