Add JS refreshing to the news displays

Author: meldra

layouts/shortcodes/news.md

@@ -1,5 +1,5 @@
   <h2 class="ms-3">CodeMeta News</h2>
-  <ul class="list-group list-unstyled">
+  <ul id="newslist" class="list-group list-unstyled">
 
 {{ $items := slice }}
 
@@ -26,4 +26,55 @@
     </li>
     {{ end }}
   </ul>
-<div class="text-center "><small class="mw-100 text-secondary-emphasis">Updates daily</small></div>
+<script>
+
+function formatAMPM(date) {
+    var hours = date.getUTCHours();
+    var minutes = date.getUTCMinutes();
+    var ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0'+minutes : minutes;
+    var strTime = hours + ':' + minutes + ' ' + ampm;
+    return strTime;
+}
+
+async function fetchCodeMetaPostsFromSWHWordPress() {
+    let url = `https://softwareheritage.org/tag/codemeta/feed/`;
+    let response = await fetch(url, {
+        method: "GET",
+    });
+
+    const text = await response.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(text, "text/xml");
+    const items = doc.getElementsByTagName("item");
+
+    $("#newslist").empty();
+    for (let i = 0 ; i < items.length ; ++i) {
+
+        const title = items[i].querySelector("title").textContent;
+        const link = items[i].querySelector("link").textContent;
+        const date = new Date(items[i].querySelector("pubDate").textContent);
+        const desc = items[i].querySelector("description").textContent;
+
+        const year = date.getUTCFullYear();
+        const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+        const month = months[date.getUTCMonth()];
+        const day = date.getUTCDate().toString().padStart(2, '0');
+        const timestr = formatAMPM(date);
+
+        const utc = `${month} ${day}, ${year} ${timestr} UTC`
+
+        $("#newslist").append(
+            `<li class="ps-2 pb-2 refreshed">
+                <h3><a class="list-group-item newslink p-2" href="${link}">${title}</a></h3>
+                <small class="ps-2 text-secondary-emphasis">${utc}</small>
+                <div class="ps-2 pt-2">${desc}</div>
+            </li>`
+        )
+    };
+}
+
+fetchCodeMetaPostsFromSWHWordPress();
+</script>

themes/CodeMeta-Pyramids/layouts/partials/news.html

@@ -22,7 +22,7 @@ <h3 class="ms-3">News</h3>
 
   {{ range first .Site.Params.newslimit $combi }}
 
-      <li class="ps-2">
+    <li class="ps-2">
       <a class="list-group-item newslink lh-base p-2" href="{{ .link }}">{{ .title }}</a>
       <small class="p-2 text-secondary-emphasis">{{ .pubDate | time.Format "Jan 02, 2006 3:04 PM MST" }}</small>
     </li>
@@ -36,5 +36,56 @@ <h3 class="ms-3">News</h3>
       {{ end }}
     {{ end }}
   </ul>
-    {{ if .IsHome }}<div class="text-center"><small class="mw-100 text-secondary-emphasis">Updates daily<br><a href="/news">Full news feed</a></small></div>{{ end }}
+    {{ if .IsHome }}<div class="text-center"><small class="mw-100 text-secondary-emphasis"><a href="/news">Full news feed</a></small></div>{{ end }}
 </div>
+<script>
+
+function formatAMPM(date) {
+    var hours = date.getUTCHours();
+    var minutes = date.getUTCMinutes();
+    var ampm = hours >= 12 ? 'PM' : 'AM';
+    hours = hours % 12;
+    hours = hours ? hours : 12; // the hour '0' should be '12'
+    minutes = minutes < 10 ? '0'+minutes : minutes;
+    var strTime = hours + ':' + minutes + ' ' + ampm;
+    return strTime;
+}
+
+async function fetchCodeMetaPostsFromSWHWordPress() {
+    let url = `https://softwareheritage.org/tag/codemeta/feed/`;
+    let response = await fetch(url, {
+        method: "GET",
+    });
+
+    const text = await response.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(text, "text/xml");
+    const items = doc.getElementsByTagName("item");
+
+    $("#newslinks ul").empty();
+    for (let i = 0 ; i < items.length ; ++i) {
+        const title = items[i].querySelector("title").textContent;
+        const link = items[i].querySelector("link").textContent;
+        const date = new Date(items[i].querySelector("pubDate").textContent);
+        const desc = items[i].querySelector("description").textContent;
+
+        const year = date.getUTCFullYear();
+        const months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+        const month = months[date.getUTCMonth()];
+        const day = date.getUTCDate().toString().padStart(2, '0');
+        const timestr = formatAMPM(date);
+
+        const utc = `${month} ${day}, ${year} ${timestr} UTC`
+
+        if (i <= ({{ .Site.Params.newslimit }} - 1 ))
+            $("#newslinks ul").append(
+                `<li class="ps-2 refreshed">
+                  <a class="list-group-item newslink lh-base p-2" href="${link}">${title}</a>
+                  <small class="p-2 text-secondary-emphasis">${utc}</small>
+                </li>`
+            )
+    };
+}
+
+fetchCodeMetaPostsFromSWHWordPress();
+</script>