From f96073359380903fb5601ccb0e78025a62c19665 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Wed, 1 Jun 2022 16:37:44 -0400
Subject: [PATCH 01/11] Added newsrooms resources list view logic and template

Signed-off-by: Zhou Fang <zhou.fang@eclipse-foundation.org>
---
 js/solstice/eclipsefdn.newsroom-resources.js  | 85 +++++++++++++++++++
 js/solstice/index.js                          |  1 +
 .../resources-list.mustache                   | 19 +++++
 3 files changed, 105 insertions(+)
 create mode 100644 js/solstice/eclipsefdn.newsroom-resources.js
 create mode 100644 js/solstice/templates/newsroom-resources/resources-list.mustache

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
new file mode 100644
index 0000000..d129182
--- /dev/null
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -0,0 +1,85 @@
+/*!
+ * Copyright (c) 2022 Eclipse Foundation, Inc.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * Contributors:
+ *   Zhou Fang <zhou.fang@eclipse-foundation.org>
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ */
+
+import templateResourceList from './templates/newsroom-resources/resources-list.mustache';
+import templateLoading from './templates/loading-icon.mustache';
+
+const eclipseFdnResources = (() => {
+  const resourcesElement = document.querySelector('.newsroom-resources');
+  if (!resourcesElement) {
+    return;
+  }
+
+  resourcesElement.innerHTML = templateLoading();
+
+  const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
+  const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
+
+  let resourcesData = [];
+  titles.forEach((title, index) => {
+    resourcesData.push({ title, resourceType: resourceTypes[index], data: [], isFetching: true });
+  });
+
+  const formatDate = function () {
+    let theDate = new Date(this.date).toDateString();
+    theDate = theDate.slice(0, 3) + ',' + theDate.slice(3);
+    return theDate;
+  };
+
+  const displayDataOnPageForOneType = (data) => {
+    console.log(resourcesElement.querySelector('fa-spinner'));
+    if (resourcesElement.querySelector('.fa-spinner')) {
+      resourcesElement.innerHTML = '';
+    }
+
+    resourcesElement.innerHTML =
+      resourcesElement.innerHTML +
+      templateResourceList({
+        items: data,
+      });
+  };
+
+  const fetchWithPagination = async (resource, index) => {
+    let i = 1;
+    let data = [];
+
+    const getData = async () => {
+      let response = await fetch(
+        `https://newsroom.eclipse.org/api/resources?pagesize=60&parameters[publish_to]=eclipse_iot&parameters[resource_type][]=${resource.resourceType}`
+      );
+      if (response.ok) {
+        let newData = await response.json();
+        data = [...data, ...newData.resources];
+
+        if (response.headers.get('link')?.includes('rel="next"')) {
+          i++;
+          await getData();
+        }
+      }
+    };
+
+    await getData();
+    resourcesData[index] = { ...resourcesData[index], isFetching: false, data };
+    displayDataOnPageForOneType(resourcesData[index]);
+  };
+
+  resourcesElement.innerHTML = templateResourceList({
+    items: resourcesData,
+  });
+
+  resourcesData.forEach((item, index) => {
+    fetchWithPagination(item, index);
+  });
+})();
+
+export default eclipseFdnResources;
diff --git a/js/solstice/index.js b/js/solstice/index.js
index 7752d84..dc6158a 100644
--- a/js/solstice/index.js
+++ b/js/solstice/index.js
@@ -23,3 +23,4 @@ import './eclipsefdn.solstice-rss-blog-list';
 import './eclipsefdn.solstice-slider';
 import './eclipsefdn.time-conversion';
 import './eclipsefdn.wgs-list.js'
+import './eclipsefdn.newsroom-resources.js'
diff --git a/js/solstice/templates/newsroom-resources/resources-list.mustache b/js/solstice/templates/newsroom-resources/resources-list.mustache
new file mode 100644
index 0000000..81cc6bb
--- /dev/null
+++ b/js/solstice/templates/newsroom-resources/resources-list.mustache
@@ -0,0 +1,19 @@
+{{#items}}
+  <h2>{{title}}</h2>
+  {{#isFetching}}
+    <div class="text-center">
+      <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  {{/isFetching}}
+  {{^isFetching}}
+    <ul>
+      {{#data}}
+        <li>
+          <a href="{{#landing_link}}{{landing_link}}{{/landing_link}}{{^landing_link}}{{direct_link}}{{/landing_link}}">{{title}}</a>
+        </li>
+      {{/data}}
+    </ul>
+  {{/isFetching}}
+
+{{/items}}
-- 
GitLab


From 2ce9eb2f182f539055336761bde198a019f4b464 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Thu, 2 Jun 2022 15:11:02 -0400
Subject: [PATCH 02/11] finalized the code for list view template

---
 js/solstice/eclipsefdn.newsroom-resources.js  | 29 +++++++------------
 .../resources-list.mustache                   |  3 +-
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index d129182..c8a8274 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -12,7 +12,6 @@
  */
 
 import templateResourceList from './templates/newsroom-resources/resources-list.mustache';
-import templateLoading from './templates/loading-icon.mustache';
 
 const eclipseFdnResources = (() => {
   const resourcesElement = document.querySelector('.newsroom-resources');
@@ -20,8 +19,6 @@ const eclipseFdnResources = (() => {
     return;
   }
 
-  resourcesElement.innerHTML = templateLoading();
-
   const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
   const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
 
@@ -36,33 +33,26 @@ const eclipseFdnResources = (() => {
     return theDate;
   };
 
-  const displayDataOnPageForOneType = (data) => {
-    console.log(resourcesElement.querySelector('fa-spinner'));
-    if (resourcesElement.querySelector('.fa-spinner')) {
-      resourcesElement.innerHTML = '';
-    }
-
-    resourcesElement.innerHTML =
-      resourcesElement.innerHTML +
-      templateResourceList({
-        items: data,
-      });
+  const displayDataOnPage = (data) => {
+    resourcesElement.innerHTML = templateResourceList({
+      items: data,
+    });
   };
 
   const fetchWithPagination = async (resource, index) => {
-    let i = 1;
     let data = [];
 
     const getData = async () => {
       let response = await fetch(
-        `https://newsroom.eclipse.org/api/resources?pagesize=60&parameters[publish_to]=eclipse_iot&parameters[resource_type][]=${resource.resourceType}`
+        `https://newsroom.eclipse.org/api/resources?pagesize=60&parameters[publish_to]=${resourcesElement.getAttribute(
+          'data-res-wg'
+        )}&parameters[resource_type][]=${resource.resourceType}`
       );
       if (response.ok) {
         let newData = await response.json();
         data = [...data, ...newData.resources];
 
         if (response.headers.get('link')?.includes('rel="next"')) {
-          i++;
           await getData();
         }
       }
@@ -70,7 +60,10 @@ const eclipseFdnResources = (() => {
 
     await getData();
     resourcesData[index] = { ...resourcesData[index], isFetching: false, data };
-    displayDataOnPageForOneType(resourcesData[index]);
+
+    if (index === resourcesData.length - 1) {
+      displayDataOnPage(resourcesData);
+    }
   };
 
   resourcesElement.innerHTML = templateResourceList({
diff --git a/js/solstice/templates/newsroom-resources/resources-list.mustache b/js/solstice/templates/newsroom-resources/resources-list.mustache
index 81cc6bb..2b73673 100644
--- a/js/solstice/templates/newsroom-resources/resources-list.mustache
+++ b/js/solstice/templates/newsroom-resources/resources-list.mustache
@@ -1,7 +1,7 @@
 {{#items}}
   <h2>{{title}}</h2>
   {{#isFetching}}
-    <div class="text-center">
+    <div class="margin-left-30">
       <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
       <span class="sr-only">Loading...</span>
     </div>
@@ -15,5 +15,4 @@
       {{/data}}
     </ul>
   {{/isFetching}}
-
 {{/items}}
-- 
GitLab


From b2bbaad4c0dfdb022749f7566f0d5909135d3be7 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Fri, 3 Jun 2022 11:18:18 -0400
Subject: [PATCH 03/11] Updated logic to handle multiple res elements

---
 js/solstice/eclipsefdn.newsroom-resources.js | 90 ++++++++++----------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index c8a8274..a912fae 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -14,64 +14,66 @@
 import templateResourceList from './templates/newsroom-resources/resources-list.mustache';
 
 const eclipseFdnResources = (() => {
-  const resourcesElement = document.querySelector('.newsroom-resources');
-  if (!resourcesElement) {
+  const resourcesElements = document.querySelectorAll('.newsroom-resources');
+  if (!resourcesElements || resourcesElements.length === 0) {
     return;
   }
 
-  const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
-  const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
+  resourcesElements.forEach((resourcesElement) => {
+    const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
+    const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
 
-  let resourcesData = [];
-  titles.forEach((title, index) => {
-    resourcesData.push({ title, resourceType: resourceTypes[index], data: [], isFetching: true });
-  });
+    let resourcesData = [];
+    titles.forEach((title, index) => {
+      resourcesData.push({ title, resourceType: resourceTypes[index], data: [], isFetching: true });
+    });
 
-  const formatDate = function () {
-    let theDate = new Date(this.date).toDateString();
-    theDate = theDate.slice(0, 3) + ',' + theDate.slice(3);
-    return theDate;
-  };
+    const formatDate = function () {
+      let theDate = new Date(this.date).toDateString();
+      theDate = theDate.slice(0, 3) + ',' + theDate.slice(3);
+      return theDate;
+    };
 
-  const displayDataOnPage = (data) => {
-    resourcesElement.innerHTML = templateResourceList({
-      items: data,
-    });
-  };
+    const displayDataOnPage = (data) => {
+      resourcesElement.innerHTML = templateResourceList({
+        items: data,
+      });
+    };
 
-  const fetchWithPagination = async (resource, index) => {
-    let data = [];
+    const fetchWithPagination = async (resource, index) => {
+      let data = [];
 
-    const getData = async () => {
-      let response = await fetch(
-        `https://newsroom.eclipse.org/api/resources?pagesize=60&parameters[publish_to]=${resourcesElement.getAttribute(
-          'data-res-wg'
-        )}&parameters[resource_type][]=${resource.resourceType}`
-      );
-      if (response.ok) {
-        let newData = await response.json();
-        data = [...data, ...newData.resources];
+      const getData = async () => {
+        let response = await fetch(
+          `https://newsroom.eclipse.org/api/resources?pagesize=60&parameters[publish_to]=${resourcesElement.getAttribute(
+            'data-res-wg'
+          )}&parameters[resource_type][]=${resource.resourceType}`
+        );
+        if (response.ok) {
+          let newData = await response.json();
+          data = [...data, ...newData.resources];
 
-        if (response.headers.get('link')?.includes('rel="next"')) {
-          await getData();
+          if (response.headers.get('link')?.includes('rel="next"')) {
+            await getData();
+          }
         }
-      }
-    };
+      };
 
-    await getData();
-    resourcesData[index] = { ...resourcesData[index], isFetching: false, data };
+      await getData();
+      resourcesData[index] = { ...resourcesData[index], isFetching: false, data };
 
-    if (index === resourcesData.length - 1) {
-      displayDataOnPage(resourcesData);
-    }
-  };
+      if (index === resourcesData.length - 1) {
+        displayDataOnPage(resourcesData);
+      }
+    };
 
-  resourcesElement.innerHTML = templateResourceList({
-    items: resourcesData,
-  });
+    resourcesElement.innerHTML = templateResourceList({
+      items: resourcesData,
+    });
 
-  resourcesData.forEach((item, index) => {
-    fetchWithPagination(item, index);
+    resourcesData.forEach((item, index) => {
+      fetchWithPagination(item, index);
+    });
   });
 })();
 
-- 
GitLab


From 8b3e6e312c7909c671c6f124a1bfbfefe30ed885 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Fri, 3 Jun 2022 12:02:32 -0400
Subject: [PATCH 04/11] Updated logic for pagination and pagesize limit

---
 js/solstice/eclipsefdn.newsroom-resources.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index a912fae..1f8f086 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -12,6 +12,7 @@
  */
 
 import templateResourceList from './templates/newsroom-resources/resources-list.mustache';
+import parse from 'parse-link-header';
 
 const eclipseFdnResources = (() => {
   const resourcesElements = document.querySelectorAll('.newsroom-resources');
@@ -42,18 +43,19 @@ const eclipseFdnResources = (() => {
 
     const fetchWithPagination = async (resource, index) => {
       let data = [];
-
+      const pagesizeAttribute = resourcesElement.getAttribute('data-res-limit')
+      const pagesize = pagesizeAttribute || 100;
+      let url = `https://newsroom.eclipse.org/api/resources?pagesize=${pagesize}&parameters[publish_to]=${resourcesElement.getAttribute(
+        'data-res-wg'
+      )}&parameters[resource_type][]=${resource.resourceType}&page=1`;
       const getData = async () => {
-        let response = await fetch(
-          `https://newsroom.eclipse.org/api/resources?pagesize=60&parameters[publish_to]=${resourcesElement.getAttribute(
-            'data-res-wg'
-          )}&parameters[resource_type][]=${resource.resourceType}`
-        );
+        let response = await fetch(url);
         if (response.ok) {
           let newData = await response.json();
           data = [...data, ...newData.resources];
-
-          if (response.headers.get('link')?.includes('rel="next"')) {
+          const links = parse(response.headers.get('link'));
+          if (links?.next?.url && !pagesizeAttribute) {
+            url = links.next.url;
             await getData();
           }
         }
-- 
GitLab


From da6dc13abcb88400f0f16cbd15c3cbff77b3e2dd Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Mon, 6 Jun 2022 16:02:35 -0400
Subject: [PATCH 05/11] Added ability to specify link type

---
 js/solstice/eclipsefdn.newsroom-resources.js         | 12 +++++++++++-
 .../newsroom-resources/resources-list.mustache       |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index 1f8f086..7ee6e07 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -20,6 +20,13 @@ const eclipseFdnResources = (() => {
     return;
   }
 
+  const resLink = function (linkType, item) {
+    if (linkType === 'direct') {
+      return item.direct_link || item.landing_link || '';
+    }
+    return item.landing_link || item.direct_link || '';
+  };
+
   resourcesElements.forEach((resourcesElement) => {
     const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
     const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
@@ -38,12 +45,15 @@ const eclipseFdnResources = (() => {
     const displayDataOnPage = (data) => {
       resourcesElement.innerHTML = templateResourceList({
         items: data,
+        resLink: function () {
+          return resLink(resourcesElement.getAttribute('data-res-link'), this);
+        },
       });
     };
 
     const fetchWithPagination = async (resource, index) => {
       let data = [];
-      const pagesizeAttribute = resourcesElement.getAttribute('data-res-limit')
+      const pagesizeAttribute = resourcesElement.getAttribute('data-res-limit');
       const pagesize = pagesizeAttribute || 100;
       let url = `https://newsroom.eclipse.org/api/resources?pagesize=${pagesize}&parameters[publish_to]=${resourcesElement.getAttribute(
         'data-res-wg'
diff --git a/js/solstice/templates/newsroom-resources/resources-list.mustache b/js/solstice/templates/newsroom-resources/resources-list.mustache
index 2b73673..eebba9a 100644
--- a/js/solstice/templates/newsroom-resources/resources-list.mustache
+++ b/js/solstice/templates/newsroom-resources/resources-list.mustache
@@ -10,7 +10,7 @@
     <ul>
       {{#data}}
         <li>
-          <a href="{{#landing_link}}{{landing_link}}{{/landing_link}}{{^landing_link}}{{direct_link}}{{/landing_link}}">{{title}}</a>
+          <a href="{{resLink}}">{{title}}</a>
         </li>
       {{/data}}
     </ul>
-- 
GitLab


From ad4d0df466341e031d31b96b893c29956ef20fcf Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Tue, 7 Jun 2022 17:55:42 -0400
Subject: [PATCH 06/11] Added logic to handle /value page

---
 js/solstice/eclipsefdn.newsroom-resources.js  | 33 +++++++++++++++----
 .../resources-image.mustache                  | 20 +++++++++++
 2 files changed, 47 insertions(+), 6 deletions(-)
 create mode 100644 js/solstice/templates/newsroom-resources/resources-image.mustache

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index 7ee6e07..cbc0bad 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -12,6 +12,7 @@
  */
 
 import templateResourceList from './templates/newsroom-resources/resources-list.mustache';
+import templateResourceImage from './templates/newsroom-resources/resources-image.mustache';
 import parse from 'parse-link-header';
 
 const eclipseFdnResources = (() => {
@@ -43,12 +44,32 @@ const eclipseFdnResources = (() => {
     };
 
     const displayDataOnPage = (data) => {
-      resourcesElement.innerHTML = templateResourceList({
-        items: data,
-        resLink: function () {
-          return resLink(resourcesElement.getAttribute('data-res-link'), this);
-        },
-      });
+      switch (resourcesElement.getAttribute('data-res-template')) {
+        case 'list':
+          resourcesElement.innerHTML = templateResourceList({
+            items: data,
+            resLink: function () {
+              return resLink(resourcesElement.getAttribute('data-res-link'), this);
+            },
+          });
+          break;
+        case 'image':
+          const skipItems = resourcesElement.getAttribute("data-res-skip")
+          if (skipItems) {
+            data.forEach(item=>item.data.splice(0,skipItems))
+          }
+          console.log(data)
+          resourcesElement.innerHTML = templateResourceImage({
+            items: data,
+            colValue: resourcesElement.getAttribute('data-res-class') || 6,
+            resLink: function () {
+              return resLink(resourcesElement.getAttribute('data-res-link'), this);
+            },
+          });
+          break;
+        default:
+          break;
+      }
     };
 
     const fetchWithPagination = async (resource, index) => {
diff --git a/js/solstice/templates/newsroom-resources/resources-image.mustache b/js/solstice/templates/newsroom-resources/resources-image.mustache
new file mode 100644
index 0000000..c6f3d30
--- /dev/null
+++ b/js/solstice/templates/newsroom-resources/resources-image.mustache
@@ -0,0 +1,20 @@
+{{#items}}
+  {{#isFetching}}
+    <div class="margin-left-30">
+      <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  {{/isFetching}}
+  {{^isFetching}}
+    {{#data}}
+      <div class="{{colValue}}">
+          <a class="image-container" aria-label="download {{title}}" href="{{resLink}}">
+            <img class="cover" alt="Cover of {{title}}" src="{{image}}">
+          </a>
+          <a class="btn btn-primary success-stories-download" aria-label="download {{title}}" href="{{resLink}}">
+            Download
+          </a>
+      </div>
+    {{/data}}
+  {{/isFetching}}
+{{/items}}
-- 
GitLab


From 550e01edb334c552e0d82c1648f9011f95dc4be4 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Wed, 8 Jun 2022 16:58:26 -0400
Subject: [PATCH 07/11] Added template for iot style

---
 js/solstice/eclipsefdn.newsroom-resources.js  | 30 +++++++++++--------
 .../resources-image-with-title.mustache       | 20 +++++++++++++
 2 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 js/solstice/templates/newsroom-resources/resources-image-with-title.mustache

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index cbc0bad..0974fb8 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -13,9 +13,10 @@
 
 import templateResourceList from './templates/newsroom-resources/resources-list.mustache';
 import templateResourceImage from './templates/newsroom-resources/resources-image.mustache';
+import templateResourceImageWithTitle from './templates/newsroom-resources/resources-image-with-title.mustache';
 import parse from 'parse-link-header';
 
-const eclipseFdnResources = (() => {
+const eclipseFdnResources = (async () => {
   const resourcesElements = document.querySelectorAll('.newsroom-resources');
   if (!resourcesElements || resourcesElements.length === 0) {
     return;
@@ -28,7 +29,7 @@ const eclipseFdnResources = (() => {
     return item.landing_link || item.direct_link || '';
   };
 
-  resourcesElements.forEach((resourcesElement) => {
+  resourcesElements.forEach(async (resourcesElement) => {
     const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
     const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
 
@@ -54,14 +55,22 @@ const eclipseFdnResources = (() => {
           });
           break;
         case 'image':
-          const skipItems = resourcesElement.getAttribute("data-res-skip")
+          const skipItems = resourcesElement.getAttribute('data-res-skip');
           if (skipItems) {
-            data.forEach(item=>item.data.splice(0,skipItems))
+            data.forEach((item) => item.data.splice(0, skipItems));
           }
-          console.log(data)
           resourcesElement.innerHTML = templateResourceImage({
             items: data,
-            colValue: resourcesElement.getAttribute('data-res-class') || 6,
+            colValue: resourcesElement.getAttribute('data-res-class'),
+            resLink: function () {
+              return resLink(resourcesElement.getAttribute('data-res-link'), this);
+            },
+          });
+          break;
+        case 'image-with-title':
+          resourcesElement.innerHTML = templateResourceImage({
+            items: data,
+            resClass: resourcesElement.getAttribute('data-res-class'),
             resLink: function () {
               return resLink(resourcesElement.getAttribute('data-res-link'), this);
             },
@@ -94,19 +103,14 @@ const eclipseFdnResources = (() => {
 
       await getData();
       resourcesData[index] = { ...resourcesData[index], isFetching: false, data };
-
-      if (index === resourcesData.length - 1) {
-        displayDataOnPage(resourcesData);
-      }
     };
 
     resourcesElement.innerHTML = templateResourceList({
       items: resourcesData,
     });
 
-    resourcesData.forEach((item, index) => {
-      fetchWithPagination(item, index);
-    });
+    await Promise.all(resourcesData.map((item, index) => fetchWithPagination(item, index)));
+    displayDataOnPage(resourcesData);
   });
 })();
 
diff --git a/js/solstice/templates/newsroom-resources/resources-image-with-title.mustache b/js/solstice/templates/newsroom-resources/resources-image-with-title.mustache
new file mode 100644
index 0000000..a772292
--- /dev/null
+++ b/js/solstice/templates/newsroom-resources/resources-image-with-title.mustache
@@ -0,0 +1,20 @@
+{{#items}}
+  {{#isFetching}}
+    <div class="margin-left-30">
+      <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
+      <span class="sr-only">Loading...</span>
+    </div>
+  {{/isFetching}}
+  {{^isFetching}}
+    {{#data}}
+      <div class="{{resClass}}">
+          <a class="image-container" aria-label="download {{title}}" href="{{resLink}}">
+            <img class="cover" alt="Cover of {{title}}" src="{{image}}">
+          </a>
+          <a class="btn btn-primary success-stories-download" aria-label="download {{title}}" href="{{resLink}}">
+            Download
+          </a>
+      </div>
+    {{/data}}
+  {{/isFetching}}
+{{/items}}
-- 
GitLab


From 2437610700aa1850e07b81c2e0f75f6d39087d8f Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Wed, 8 Jun 2022 17:56:17 -0400
Subject: [PATCH 08/11] Updated logic and template for iot style

---
 js/solstice/eclipsefdn.newsroom-resources.js  | 17 +++++++++++-----
 .../resources-image-with-title.mustache       | 20 ++++++++++++++-----
 .../resources-image.mustache                  |  4 ++--
 .../resources-list.mustache                   |  2 +-
 4 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index 0974fb8..0726e62 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -23,19 +23,24 @@ const eclipseFdnResources = (async () => {
   }
 
   const resLink = function (linkType, item) {
+    let linkObj = {link: '', icon: '', type:''}
     if (linkType === 'direct') {
-      return item.direct_link || item.landing_link || '';
+      return item.direct_link 
+      ? linkObj = {link: item.direct_link || '', icon: 'pdf', type:'PDF'} 
+      : linkObj = {link: item.landing_link || '', icon: 'text', type:'HTML'}
     }
-    return item.landing_link || item.direct_link || '';
+    return item.landing_link 
+    ? linkObj = {link: item.landing_link || '', icon: 'text', type:'HTML'}
+    : linkObj = {link: item.direct_link || '', icon: 'pdf', type:'PDF'} 
   };
 
   resourcesElements.forEach(async (resourcesElement) => {
     const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
     const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
-
+    const viewMoreLinks = resourcesElement.getAttribute('data-res-view-more')?.replaceAll(', ', ',')?.split(',');
     let resourcesData = [];
     titles.forEach((title, index) => {
-      resourcesData.push({ title, resourceType: resourceTypes[index], data: [], isFetching: true });
+      resourcesData.push({ title, resourceType: resourceTypes[index], viewMoreLink: viewMoreLinks?.[index], data: [], isFetching: true });
     });
 
     const formatDate = function () {
@@ -68,12 +73,14 @@ const eclipseFdnResources = (async () => {
           });
           break;
         case 'image-with-title':
-          resourcesElement.innerHTML = templateResourceImage({
+          
+          resourcesElement.innerHTML = templateResourceImageWithTitle({
             items: data,
             resClass: resourcesElement.getAttribute('data-res-class'),
             resLink: function () {
               return resLink(resourcesElement.getAttribute('data-res-link'), this);
             },
+            formatDate
           });
           break;
         default:
diff --git a/js/solstice/templates/newsroom-resources/resources-image-with-title.mustache b/js/solstice/templates/newsroom-resources/resources-image-with-title.mustache
index a772292..01cceb3 100644
--- a/js/solstice/templates/newsroom-resources/resources-image-with-title.mustache
+++ b/js/solstice/templates/newsroom-resources/resources-image-with-title.mustache
@@ -1,4 +1,6 @@
 {{#items}}
+  <h2 class="margin-bottom-30">{{title}}</h2>
+  <div class="resources each-resource row">
   {{#isFetching}}
     <div class="margin-left-30">
       <i class="fa fa-spinner fa-pulse fa-2x fa-fw margin-20"></i>
@@ -8,13 +10,21 @@
   {{^isFetching}}
     {{#data}}
       <div class="{{resClass}}">
-          <a class="image-container" aria-label="download {{title}}" href="{{resLink}}">
-            <img class="cover" alt="Cover of {{title}}" src="{{image}}">
-          </a>
-          <a class="btn btn-primary success-stories-download" aria-label="download {{title}}" href="{{resLink}}">
-            Download
+        <div class="resources-summary">
+          <a class="resources-summary-img text-center" href="{{resLink.link}}">
+            <img src="{{image}}" alt="Cover of {{title}}">
           </a>
+          <h4 class="resources-summary-heading"><a href="{{resLink.link}}">{{title}}</a></h4>
+          <p class="resources-summary-date">{{formatDate}}</p>
+          <p class="margin-top-10">
+            <a href="{{resLink.link}}"><i class="fa fa-file-{{resLink.icon}}-o" aria-hidden="true"></i><span class="sr-only">{{resLink.type}} Link</span></a>
+         </p>
+        </div>
       </div>
     {{/data}}
   {{/isFetching}}
+  {{#viewMoreLink}}
+    <p class="col-sm-24 text-right resources-more"><a href="{{viewMoreLink}}">View More</a></p>
+  {{/viewMoreLink}}
+  </div>
 {{/items}}
diff --git a/js/solstice/templates/newsroom-resources/resources-image.mustache b/js/solstice/templates/newsroom-resources/resources-image.mustache
index c6f3d30..f384e3b 100644
--- a/js/solstice/templates/newsroom-resources/resources-image.mustache
+++ b/js/solstice/templates/newsroom-resources/resources-image.mustache
@@ -8,10 +8,10 @@
   {{^isFetching}}
     {{#data}}
       <div class="{{colValue}}">
-          <a class="image-container" aria-label="download {{title}}" href="{{resLink}}">
+          <a class="image-container" aria-label="download {{title}}" href="{{resLink.link}}">
             <img class="cover" alt="Cover of {{title}}" src="{{image}}">
           </a>
-          <a class="btn btn-primary success-stories-download" aria-label="download {{title}}" href="{{resLink}}">
+          <a class="btn btn-primary success-stories-download" aria-label="download {{title}}" href="{{resLink.link}}">
             Download
           </a>
       </div>
diff --git a/js/solstice/templates/newsroom-resources/resources-list.mustache b/js/solstice/templates/newsroom-resources/resources-list.mustache
index eebba9a..75f2a12 100644
--- a/js/solstice/templates/newsroom-resources/resources-list.mustache
+++ b/js/solstice/templates/newsroom-resources/resources-list.mustache
@@ -10,7 +10,7 @@
     <ul>
       {{#data}}
         <li>
-          <a href="{{resLink}}">{{title}}</a>
+          <a href="{{resLink.link}}">{{title}}</a>
         </li>
       {{/data}}
     </ul>
-- 
GitLab


From c9784816ccf7d631cc201c01c41572c08bb4b582 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Thu, 9 Jun 2022 13:38:28 -0400
Subject: [PATCH 09/11] Updated code format

---
 js/solstice/eclipsefdn.newsroom-resources.js | 25 ++++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index 0726e62..b1a4412 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -23,15 +23,15 @@ const eclipseFdnResources = (async () => {
   }
 
   const resLink = function (linkType, item) {
-    let linkObj = {link: '', icon: '', type:''}
+    let linkObj = { link: '', icon: '', type: '' };
     if (linkType === 'direct') {
-      return item.direct_link 
-      ? linkObj = {link: item.direct_link || '', icon: 'pdf', type:'PDF'} 
-      : linkObj = {link: item.landing_link || '', icon: 'text', type:'HTML'}
+      return item.direct_link
+        ? (linkObj = { link: item.direct_link || '', icon: 'pdf', type: 'PDF' })
+        : (linkObj = { link: item.landing_link || '', icon: 'text', type: 'HTML' });
     }
-    return item.landing_link 
-    ? linkObj = {link: item.landing_link || '', icon: 'text', type:'HTML'}
-    : linkObj = {link: item.direct_link || '', icon: 'pdf', type:'PDF'} 
+    return item.landing_link
+      ? (linkObj = { link: item.landing_link || '', icon: 'text', type: 'HTML' })
+      : (linkObj = { link: item.direct_link || '', icon: 'pdf', type: 'PDF' });
   };
 
   resourcesElements.forEach(async (resourcesElement) => {
@@ -40,7 +40,13 @@ const eclipseFdnResources = (async () => {
     const viewMoreLinks = resourcesElement.getAttribute('data-res-view-more')?.replaceAll(', ', ',')?.split(',');
     let resourcesData = [];
     titles.forEach((title, index) => {
-      resourcesData.push({ title, resourceType: resourceTypes[index], viewMoreLink: viewMoreLinks?.[index], data: [], isFetching: true });
+      resourcesData.push({
+        title,
+        resourceType: resourceTypes[index],
+        viewMoreLink: viewMoreLinks?.[index],
+        data: [],
+        isFetching: true,
+      });
     });
 
     const formatDate = function () {
@@ -73,14 +79,13 @@ const eclipseFdnResources = (async () => {
           });
           break;
         case 'image-with-title':
-          
           resourcesElement.innerHTML = templateResourceImageWithTitle({
             items: data,
             resClass: resourcesElement.getAttribute('data-res-class'),
             resLink: function () {
               return resLink(resourcesElement.getAttribute('data-res-link'), this);
             },
-            formatDate
+            formatDate,
           });
           break;
         default:
-- 
GitLab


From 595637631e6cbd0717869f7cd14a11892d37e869 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Thu, 9 Jun 2022 14:25:11 -0400
Subject: [PATCH 10/11] Added error handler

---
 js/solstice/eclipsefdn.newsroom-resources.js | 35 +++++++++++++++-----
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index b1a4412..209d03e 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -15,6 +15,7 @@ import templateResourceList from './templates/newsroom-resources/resources-list.
 import templateResourceImage from './templates/newsroom-resources/resources-image.mustache';
 import templateResourceImageWithTitle from './templates/newsroom-resources/resources-image-with-title.mustache';
 import parse from 'parse-link-header';
+import { displayErrMsg } from '../utils/utils';
 
 const eclipseFdnResources = (async () => {
   const resourcesElements = document.querySelectorAll('.newsroom-resources');
@@ -35,6 +36,7 @@ const eclipseFdnResources = (async () => {
   };
 
   resourcesElements.forEach(async (resourcesElement) => {
+    let hasError = false;
     const titles = resourcesElement.getAttribute('data-res-title')?.replaceAll(', ', ',')?.split(',');
     const resourceTypes = resourcesElement.getAttribute('data-res-type')?.replaceAll(', ', ',')?.split(',');
     const viewMoreLinks = resourcesElement.getAttribute('data-res-view-more')?.replaceAll(', ', ',')?.split(',');
@@ -101,19 +103,32 @@ const eclipseFdnResources = (async () => {
         'data-res-wg'
       )}&parameters[resource_type][]=${resource.resourceType}&page=1`;
       const getData = async () => {
-        let response = await fetch(url);
-        if (response.ok) {
-          let newData = await response.json();
-          data = [...data, ...newData.resources];
-          const links = parse(response.headers.get('link'));
-          if (links?.next?.url && !pagesizeAttribute) {
-            url = links.next.url;
-            await getData();
+        try {
+          let response = await fetch(url);
+          if (response.ok) {
+            let newData = await response.json();
+            data = [...data, ...newData.resources];
+            const links = parse(response.headers.get('link'));
+            if (links?.next?.url && !pagesizeAttribute) {
+              url = links.next.url;
+              await getData();
+            }
+            return;
           }
+          hasError = true;
+          displayErrMsg(resourcesElement, response.status);
+        } catch (error) {
+          console.log(error);
+          hasError = true;
+          displayErrMsg(resourcesElement, error);
         }
       };
 
       await getData();
+
+      if (hasError) {
+        return;
+      }
       resourcesData[index] = { ...resourcesData[index], isFetching: false, data };
     };
 
@@ -122,6 +137,10 @@ const eclipseFdnResources = (async () => {
     });
 
     await Promise.all(resourcesData.map((item, index) => fetchWithPagination(item, index)));
+
+    if (hasError) {
+      return;
+    }
     displayDataOnPage(resourcesData);
   });
 })();
-- 
GitLab


From 3815654a71bb7ea7139f744ea7fc785078587d80 Mon Sep 17 00:00:00 2001
From: Zhou Fang <zhou.fang@eclipse-foundation.org>
Date: Fri, 10 Jun 2022 11:02:45 -0400
Subject: [PATCH 11/11] Updated property name

---
 js/solstice/eclipsefdn.newsroom-resources.js                    | 2 +-
 .../templates/newsroom-resources/resources-image.mustache       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/js/solstice/eclipsefdn.newsroom-resources.js b/js/solstice/eclipsefdn.newsroom-resources.js
index 209d03e..c4b190b 100644
--- a/js/solstice/eclipsefdn.newsroom-resources.js
+++ b/js/solstice/eclipsefdn.newsroom-resources.js
@@ -74,7 +74,7 @@ const eclipseFdnResources = (async () => {
           }
           resourcesElement.innerHTML = templateResourceImage({
             items: data,
-            colValue: resourcesElement.getAttribute('data-res-class'),
+            resClass: resourcesElement.getAttribute('data-res-class'),
             resLink: function () {
               return resLink(resourcesElement.getAttribute('data-res-link'), this);
             },
diff --git a/js/solstice/templates/newsroom-resources/resources-image.mustache b/js/solstice/templates/newsroom-resources/resources-image.mustache
index f384e3b..900c83b 100644
--- a/js/solstice/templates/newsroom-resources/resources-image.mustache
+++ b/js/solstice/templates/newsroom-resources/resources-image.mustache
@@ -7,7 +7,7 @@
   {{/isFetching}}
   {{^isFetching}}
     {{#data}}
-      <div class="{{colValue}}">
+      <div class="{{resClass}}">
           <a class="image-container" aria-label="download {{title}}" href="{{resLink.link}}">
             <img class="cover" alt="Cover of {{title}}" src="{{image}}">
           </a>
-- 
GitLab