Simplify News aggregation

app/templates/main/news.html.j2

@@ -196,30 +196,35 @@
     });
   }
 
-  function mastodonStatusToHtml(status) {
-    let date = new Date(status.created_at).toLocaleString('en-US')
-    return htmlString = `
-      <div class="row">
-        <div class="col s11">
-          <div class="card white-text" style="background-color:#5D50E7; border-radius:10px;">
-            <div class="card-content">
-              <span class="card-title">New Actitvity on Mastodon</span>
-              <p><i>Published on ${date}</i></p>
-              <br>
-              <p>${status.content}</p>
+  function mastodonStatusToElement(status) {
+    let date = new Date(status.created_at).toLocaleString('en-US');
+    let newsElement = Utils.HTMLToElement(
+      `
+        <div class="row">
+          <div class="col s11">
+            <div class="card white-text" style="background-color:#5D50E7; border-radius:10px;">
+              <div class="card-content">
+                <span class="card-title">New Actitvity on Mastodon</span>
+                <p><i>Published on ${date}</i></p>
+                <br>
+                <p>${status.content}</p>
+              </div>
             </div>
           </div>
+          <div class="col s1">
+            <img src="https://joinmastodon.org/logos/logo-purple.svg" alt="Mastodon" class="responsive-img hide-on-small-only" style="width:70%; margin-top:30px;">
+          </div>
         </div>
-        <div class="col s1">
-          <img src="https://joinmastodon.org/logos/logo-purple.svg" alt="Mastodon" class="responsive-img hide-on-small-only" style="width:70%; margin-top:30px;">
-        </div>
-    `.trim();
+      `
+    );
+    return newsElement;
   }
-  function bisBlogsEntryToHtml(entry) {
-    let date = new Date(entry.published).toLocaleString('en-US')
-    let bisBlogHTMLElement = document.createElement('div');
-    bisBlogHTMLElement.classList.add('row');
-    bisBlogHTMLElement.innerHTML = `
+
+  function bisBlogsEntryToElement(entry) {
+    let date = new Date(entry.published).toLocaleString('en-US');
+    let newsElement = Utils.HTMLToElement(
+      `
+        <div class="row">
           <div class="col s1">
             <img src="https://blogs.uni-bielefeld.de/blog/uniintern/resource/themabilder/unilogo-square.svg" alt="Bielefeld University Blogs" class="responsive-img hide-on-small-only" style="width:70%; margin-top:40px;">
           </div>
@@ -233,30 +238,31 @@
               </div>
             </div>
           </div>
-      `.trim();
-    let bisBlogImages = bisBlogHTMLElement.querySelectorAll('img');
-    bisBlogImages.forEach((img) => {
-      img.classList.add('responsive-img');
-    });
-    return bisBlogHTMLElement.outerHTML;
+        </div>
+      `
+    );
+    let newsImageElements = newsElement.querySelectorAll('img');
+    for (let newsImageElement of newsImageElements) {
+      newsImageElement.classList.add('responsive-img');
+    }
+    return newsElement;
   }
 
   let aggregatedNewsElement = document.querySelector('#aggregated-news');
   aggregateNews().then((aggregatedNews) => {
     for (let item of aggregatedNews) {
-      let itemHtmlString;
+      let newsElement;
       switch (item.source) {
         case 'mastodon':
-          console.log(item);
-          itemHtmlString = mastodonStatusToHtml(item);
+          newsElement = mastodonStatusToElement(item);
           break;
         case 'big-blogs':
-          itemHtmlString = bisBlogsEntryToHtml(item);
+          newsElement = bisBlogsEntryToElement(item);
           break;
         default:
           throw new Error('Unknown source');
       }
-      aggregatedNewsElement.insertAdjacentHTML('beforeend', itemHtmlString);
+      aggregatedNewsElement.appendChild(newsElement);
     }
   });
 </script>