docs: show team on about page

Author: wuda-io

src/about.html

@@ -17,16 +17,48 @@
         <!--  Outer row  -->
         <div class="row">
           <div class="col s12 m8 offset-m1 xl7 offset-xl1 center-on-small-only">
+
+
+            <!--  About the Team-->
+            <div id="team" class="section scrollspy">
+              <h2 class="header">The Team</h2>
+              <p class="caption">
+                Due to inactivity of the original developers, MaterializeCSS has been forked into MaterializeWeb by a community of enthusiasts, which continues to be fully maintained by open source
+                principes since 2021. Without the many contributors who participated in this fork, this project would probably not have received any updates anymore.
+              </p>
+              <div class="orga-members" style="display: flex; gap: 1rem; flex-wrap: wrap;"></div>
+              <div class="center">
+                <div class="image-container">
+                  <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+                  <!-- prettier-ignore-start -->
+                  <!-- markdownlint-disable -->
+                  <!-- markdownlint-restore -->
+                  <!-- prettier-ignore-end -->
+                  <!-- ALL-CONTRIBUTORS-LIST:END -->
+                </div>
+              </div>
+              <!--
+                <h3>The original team</h3>
+                <p class="caption">
+                  <a href="https://www.materializecss.com" target="_blank">MaterializeCSS</a>
+                  was originally launched in 2014 by a team of students from Carnegie Mellon University. After 4 years of development, the latest official release was released in
+                  September 2018 and received more than 38K stars on GitHub.
+                </p>
+                <div class="center">
+                  <div class="image-container">
+                    <img src="images/materialize_team.jpeg" style="width: 100%" />
+                  </div>
+                </div>
+              -->
+            </div>
+
             <!--  Material Design -->
             <div id="materialdesign" class="section scrollspy">
               <h2 class="header">Material Design</h2>
               <p class="caption">
                 Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology.
                 Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform.
               </p>
-              <div class="video-container">
-                <iframe width="853" height="480" src="https://www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
-              </div>
               <div class="section">
                 <h3 class="header light">Principles</h3>
                 <div class="row">
@@ -39,7 +71,6 @@ <h4 class="center">Material is the metaphor</h4>
                       physical world.
                     </p>
                   </div>
-
                   <div class="col s12 l4">
                     <img class="promo" src="images/bold.png" />
                     <h4 class="center">Bold, graphic, intentional</h4>
@@ -48,7 +79,6 @@ <h4 class="center">Bold, graphic, intentional</h4>
                       focus. Emphasis on different actions and components create a visual guide for users.
                     </p>
                   </div>
-
                   <div class="col s12 l4">
                     <img class="promo" src="images/motion.png" />
                     <h4 class="center">Motion provides meaning</h4>
@@ -62,50 +92,15 @@ <h4 class="center">Motion provides meaning</h4>
               </div>
             </div>
 
-            <!--  About the Team-->
-            <div id="team" class="section scrollspy">
-              <h2 class="header">Meet the Team</h2>
-
-              <h5>The community</h5>
-
-              <p class="caption">
-                Due to inactivity of the original developers, MaterializeCSS has been forked by a community of enthusiasts, which continues to be fully maintained by open source
-                principes since 2021. Without the many contributors who participated in this fork, this project would probably not have received any updates anymore.
-              </p>
-
-              <div class="center">
-                <div class="image-container">
-                  <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-                  <!-- prettier-ignore-start -->
-                  <!-- markdownlint-disable -->
-                  <!-- markdownlint-restore -->
-                  <!-- prettier-ignore-end -->
-                  <!-- ALL-CONTRIBUTORS-LIST:END -->
-                </div>
-              </div>
-
-              <h5>The original team</h5>
-              <p class="caption">
-                <a href="https://www.materializecss.com" target="_blank">MaterializeCSS</a>
-                was originally launched in 2014 by a team of students from Carnegie Mellon University. After 4 years of development, the latest official release was released in
-                September 2018 and received more than 38K stars on GitHub.
-              </p>
-
-              <div class="center">
-                <div class="image-container">
-                  <img src="images/materialize_team.jpeg" style="width: 100%" />
-                </div>
-              </div>
-            </div>
           </div>
 
           <!-- Table of Contents -->
           <div class="col hide-on-small-only m3 xl3">
             <div class="toc-wrapper">
               <div style="height: 1px">
                 <ul class="section table-of-contents">
-                  <li><a href="#materialdesign">Material Design</a></li>
                   <li><a href="#team">Meet the Team</a></li>
+                  <li><a href="#materialdesign">Material Design</a></li>
                 </ul>
               </div>
             </div>

src/main.ts

@@ -57,9 +57,29 @@ function escapeHtml(unsafe) {
   return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
 }
 
+function renderOrganizationMembers() {
+  fetch("https://api.github.com/orgs/materializecss/members")
+  .then((resp) => resp.json())
+  .then((items) => {
+    console.log(items);
+    const elements = items.map(item => {
+      const div = document.createElement('div');
+      div.setAttribute('style', 'text-align: center; width: 150px;')
+      div.innerHTML = `<img src="${item.avatar_url}" alt="" style="width: 100px;" class="circle responsive-img"/>
+        <p>${item.login}</p>`;
+      return div;
+    });
+    document.querySelector('.orga-members').replaceChildren(...elements);
+  });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
   const themes = new Themes(document);
 
+  if (location.pathname.endsWith('about.html')) {
+    renderOrganizationMembers();
+  }
+
   // CSS > Colors
   document.querySelectorAll(".dynamic-color .col > div").forEach((el) => {
     const color = getComputedStyle(el).backgroundColor;