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

html/landingpage.gohtml

@@ -9,6 +9,7 @@
 
     <link rel="stylesheet" href="sass/index.css">
     <script src="js/api.js" type="text/javascript"></script>
+    <script src="js/main.js" type="text/javascript" defer></script>
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -31,8 +32,8 @@
       <h2>Assault penguins to the Power</h2>
     </div>
     <div class="content">
-      <div class="articles">
+      <div id="articles" class="articles">
-
+         <!--
         <a href="#">
           <div class="article">
             <div class="article-header">
@@ -94,7 +95,7 @@
             </div>
           </div>
         </a>
-
+    -->
       </div>
     </div>
   </body>

js/main.js

@@ -0,0 +1,43 @@
+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;
+            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);
+        });
+    });
+};
+//# sourceMappingURL=main.js.map

js/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["main.ts"],"names":[],"mappings":"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"}

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)
+
+        })
+    })
+}