Merge branch 'zhoufang/master/694' into 'master'

#694 Updated member list on home page and members page

See merge request eclipsefdn/it/websites/iot.eclipse.org!694

content/membership/members/_index.md

@@ -12,4 +12,5 @@ outputs:
     - HTML
     - JSON
     - RSS
+hide_sidebar: true
 ---

js/src/home-members.js

@@ -7,43 +7,28 @@
  *
  * Contributors:
  *   Christopher Guindon <chris.guindon@eclipse-foundation.org>
- *
+ *   Zhou Fang <zhou.fang@eclipse-foundation.org>
  * SPDX-License-Identifier: EPL-2.0
  */
 
-(function ($, document) {
-  if ($('.featured-members-list').length) {
-    $.getJSON('/membership/members/index.json', function (data) {
-      var items = [];
-      var count = 1;
-      $.each(shuffle(data['items']), function (key, val) {
-        if (count <= 3) {
-          items.push(
-            "<li><img src='" +
-              val['logo'] +
-              "' alt='Logo of " +
-              val['title'] +
-              "'></li>"
-          );
-        }
-        count = count + 1;
-      });
-      $('<ul/>', {
-        class: 'list-inline',
-        html: items.join(''),
-      }).appendTo('.featured-members-list');
-    });
+const pickThreeRandomMembers = (() => {
+  const memberListElement = document.querySelector('.eclipsefdn-members-list');
 
-    function shuffle(arr) {
-      for (
-        var j, x, i = arr.length;
-        i;
-        j = parseInt(Math.random() * i),
-          x = arr[--i],
-          arr[i] = arr[j],
-          arr[j] = x
-      );
-      return arr;
+  const callback = () => {
+    observer.disconnect();
+    const allMemberItems = memberListElement.querySelectorAll('.members-item');
+    if (allMemberItems.length === 0) {
+      return
+    }
+    memberListElement.innerHTML = '';
+    // The member list is in random order so just pick first 3 items
+    for (let i = 0; i < 3; i++) {
+      memberListElement.appendChild(allMemberItems[i]);
     }
-  }
-})(jQuery, document);
+    document.getElementById('iot-member-list').classList.add('hide');
+    memberListElement.classList.remove('hide');
+  };
+
+  const observer = new MutationObserver(callback);
+  observer.observe(memberListElement, { childList: true });
+})();

layouts/membership/members.html

 {{ define "main" }}
 {{ .Content }}
-<p class="big" style="font-weight:200;">Learn more about our members and discover the IoT solutions they&nbsp;offer&nbsp;today.</p>
-<h2 class="margin-bottom-30">Strategic members</h2>
-<div id="sc-members" class="members">
-  {{ range sort (where .Site.RegularPages.ByTitle "Section" "membership") ".Title" }}
-  {{ if eq .Params.member_type "steering" }}
-  <div class="row members-info" id="member-{{ .Params.logo }}">
-    <div class="col-md-4 col-md-offset-1 mb-logo margin-top-20">
-      <a href="http://eclipse.org/membership/showMember.php?member_id={{ .Params.member_id }}">
-        <img src="/membership/members/images/logo-{{ .Params.logo }}.png" alt="{{ .Title }}" class="img-responsive" />
-      </a>
-    </div>
-    <div class="col-md-16 col-md-offset-1 mb-info margin-bottom-50">
-      <div class="mb-info-container">
-        <h3 id="{{ .Params.logo }}">{{ .Title }} </h3> {{ .Content }}
-      </div>
-      <div>
-        {{ if isset .Params "more_url" }}
-        <a href="{{ .Params.more_url }} " target="_blank">
-          <button class="btn btn-info btn-sm">Read more <i class="icon-chevron-right"></i></button>
-        </a>
-        {{ end }}
-        {{ if isset .Params "demo_url" }}
-        <a href="{{ .Params.demo_url }} " target="_blank">
-          <button class="btn btn-info btn-sm">View Demo <i class="icon-eye-open"></i></button>
-        </a>
-        {{ end }}
-      </div>
-    </div>
-  </div>
-  {{ end }}
-  {{ end }}
+<p class="big fw-200">Learn more about our members and discover the IoT solutions
+  they&nbsp;offer&nbsp;today.</p>
+<div class="eclipsefdn-members-list" data-ml-wg="internet-things-iot"
+  data-ml-template="logo-title-with-levels" data-ml-default-level="Supporter Member">
 </div>
-<h2 class="margin-bottom-30 margin-top-60">Participating members</h2>
-<div id="participating-members" class="members">
-  {{ range sort (where .Site.RegularPages.ByTitle "Section" "membership") ".Title" }}
-  {{ if eq .Params.member_type "participating" }}
-  <div class="row members-info" id="member-{{ .Params.logo }}" title="{{ .Title }}">
-    <div class="col-md-4 col-md-offset-1 mb-logo margin-top-20">
-      <a href="http://eclipse.org/membership/showMember.php?member_id={{ .Params.member_id }}">
-        <img src="/membership/members/images/logo-{{ .Params.logo }}.png" alt="{{ .Title }}" class="img-responsive" />
-      </a>
-    </div>
-    <div class="col-md-16 col-md-offset-1 mb-info margin-bottom-50">
-      <div class="mb-info-container">
-        <h3 id="{{ .Params.logo }}">{{ .Title }} </h3> {{ .Content }}
-      </div>
-      <div>
-        {{ if isset .Params "more_url" }}
-        <a href="{{ .Params.more_url }} " target="_blank">
-          <button class="btn btn-info btn-sm">Read more <i class="icon-chevron-right"></i></button>
-        </a>
-        {{ end }}
-        {{ if isset .Params "demo_url" }}
-        <a href="{{ .Params.demo_url }} " target="_blank">
-          <button class="btn btn-info btn-sm">View Demo <i class="icon-eye-open"></i></button>
-        </a>
-        {{ end }}
-      </div>
-    </div>
-  </div>
-  {{ end }}
-  {{ end }}
-</div>
-<h2 class="purple" style="margin-top: 2em;">Guest members<br /><br /></h2>
-<div id="guest-members" class="members">
-  {{ range sort (where .Site.RegularPages.ByTitle "Section" "membership") ".Title" }}
-  {{ if eq .Params.member_type "guest" }}
-  <div class="row members-info" id="member-{{ .Params.logo }}" title="{{ .Title }}">
-    <div class="col-md-4 col-md-offset-1 mb-logo margin-top-20">
-      <a href="http://eclipse.org/membership/showMember.php?member_id={{ .Params.member_id }}">
-        <img src="/membership/members/images/logo-{{ .Params.logo }}.png" alt="{{ .Title }}" class="img-responsive" />
-      </a>
-    </div>
-    <div class="col-md-16 col-md-offset-1 mb-info margin-bottom-50">
-      <div class="mb-info-container">
-        <h3 id="{{ .Params.logo }}">{{ .Title }} </h3> {{ .Content }}
-      </div>
-      <div>
-        {{ if isset .Params "more_url" }}
-        <a href="{{ .Params.more_url }} " target="_blank">
-          <button class="btn btn-info">Read more <i class="icon-chevron-right"></i></button>
-        </a>
-        {{ end }}
-        {{ if isset .Params "demo_url" }}
-        <a href="{{ .Params.demo_url }} " target="_blank">
-          <button class="btn btn-info">View Demo <i class="icon-eye-open"></i></button>
-        </a>
-        {{ end }}
-      </div>
-    </div>
-  </div>
-  {{ end }}
-  {{ end }}
 </div>
 {{ end }}
\ No newline at end of file

layouts/shortcodes/home-members.html

 <div class="featured-members text-center row">
-  <div class="featured-members-list"></div>
+  <div class="container">
+    <div class="row">
+      <ul id="iot-member-list" class="list-inline margin-30 flex-center gap-50">
+        <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>
+      </ul>
+      <ul class="eclipsefdn-members-list list-inline margin-30 flex-center gap-50 hide" data-ml-sort="random"
+        data-ml-wg="internet-things-iot" data-ml-template="only-logos"></ul>
+    </div>
+  </div>
   <p></p>
   <ul class="list-inline">
     <li><a class="btn btn-primary" href="/membership/join-us">Become a Member</a></li>

less/_components/quicksilver/featured-members.less

@@ -23,10 +23,10 @@
       @media screen and (min-width: 768px) {
         padding:0 20px;
       }
-      img {
-        max-width: 150px;
-        max-height: 90px;
-      }
+    }
+    .members-item a {
+      max-width: 150px;
+      max-height: 90px;
     }
   }
 }

package.json

@@ -21,7 +21,7 @@
     "build_netlify": "NODE_ENV=production npm run production"
   },
   "dependencies": {
-    "eclipsefdn-hugo-solstice-theme": "0.0.146",
+    "eclipsefdn-hugo-solstice-theme": "0.0.153",
     "list.js": "^1.2.0"
   },
   "prettier": {