Added contributors section on homepage

Author: Himangini

userdocs/mkdocs.yml

@@ -111,6 +111,8 @@ extra_css:
 
 extra_javascript:
   - https://cdn.jsdelivr.net/npm/@glidejs/glide
+  - https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js
+  - javascripts/extra.js
 
 # Extensions
 markdown_extensions:

userdocs/src/javascripts/extra.js

@@ -0,0 +1,28 @@
+const Github_contributors_url = 'https://api.github.com/repos/eksctl-io/eksctl/contributors?per_page=100';
+
+const getContributors = () => {
+    axios
+        .get(Github_contributors_url)
+        .then((response) => {
+            const contributors = response.data;
+            const container = document.getElementById('contributors');
+            const imageTags = contributors.map(img => `<a href="${img.html_url}" ><img src="${img.avatar_url}"></a>`);
+            container.innerHTML = imageTags.join('');
+        })
+        .catch((error) => console.error(error));
+};
+
+document.addEventListener( 'DOMContentLoaded', function() {
+    // Show Github Contributors on Homepage
+    getContributors();
+
+    // Show adopters carousel
+    new Glide('.adopters', {
+        type: 'carousel',
+        autoplay: 4000,
+        hoverpause: false,
+        perView: 3,
+        animationTimingFunc: 'linear',
+        animationDuration: 1000
+    }).mount()
+});

userdocs/theme/home.html

@@ -161,34 +161,6 @@
             background-color: var(--md-default-bg-color)
         }
 
-        /* .mdx-parallax__layer {
-            height: max(120vh,100vw);
-            pointer-events: none;
-            position: absolute;
-            top: 0;
-            transform: translateZ(calc(var(--md-parallax-perspective)*var(--md-parallax-depth)*-1)) scale(calc(var(--md-parallax-depth) + 1));
-            transform-origin: 50vw 50vh;
-            width: 100vw;
-            z-index: calc(10 - var(--md-parallax-depth, 0))
-        }
-
-        .mdx-parallax__image {
-            display: block;
-            height: 100%;
-            object-fit: cover;
-            object-position: var(--md-image-position,50%);
-            position: absolute;
-            width: 100%;
-            z-index: -1
-        }
-
-        .mdx-parallax__blend {
-            background-image: linear-gradient(to bottom,#0000,var(--md-default-bg-color));
-            bottom: 0;
-            height: min(100vh,100vw);
-            top: auto
-        } */
-
         .mdx-content__column:last-child {
             margin-top: 2.4rem
         }
@@ -509,6 +481,11 @@
         .md-banner {
             display: none;
         }
+
+        .contributors img {
+            width: 3rem;
+            padding: .2rem;
+        }
     </style>
 
 <div class="mdx-parallax" data-mdx-component="parallax">
@@ -575,7 +552,7 @@ <h1 id="create-cluster-in-minutes">Create a basic cluster in minutes with just o
                                     Tel Aviv (<code>il-central-1</code>), 
                                     US ISO - (<code>us-iso-east-1</code> and <code>us-isob-east-1</code>)
                             </p>
-                            <p>EKS supported versions <code>1.25</code>  (default), <code>1.26</code> and </code>1.27</code>.</p> 
+                            <p>EKS supported versions <code>1.25</code> (default), <code>1.26</code>, <code>1.27</code> and <code>1.28</code>.</p> 
                             <p><a href="/usage/creating-and-managing-clusters/" aria-label="Usage"> 
                                 <span class="twemoji"> 
                                     {% include ".icons/octicons/arrow-right-16.svg" %} 
@@ -658,6 +635,10 @@ <h2>Eksctl Maintainers</h2>
                     <figure class="mdx-users__testimonial"><a href="https://github.com/yuxiang-zhang"><img src="https://avatars.githubusercontent.com/u/23327251?v=4" title="yuxiang-zhang" alt="yuxiang-zhang" loading="lazy"></a></figure>
                     <figure class="mdx-users__testimonial"><a href="https://github.com/a-hilaly"><img src="https://avatars.githubusercontent.com/u/10897901?v=4" title="a-hilaly" alt="a-hilaly" loading="lazy"></a></figure>
                 </div>
+                <header class="md-typeset">
+                    <h3>Thank you for all your contributions.<span class="twemoji">{% include ".icons/octicons/star-16.svg" %}</span></h3>
+                </header>
+                <div class="contributors" id="contributors"></div>
             </div> 
         </div>
     </section>

userdocs/theme/main.html

@@ -13,16 +13,5 @@
 {% block scripts %}
   <!-- Add scripts that need to run before here -->
   {{ super() }}
-<script>
-document.addEventListener( 'DOMContentLoaded', function() {
-    new Glide('.adopters', {
-        type: 'carousel',
-        autoplay: 4000,
-        hoverpause: false,
-        perView: 3,
-        animationTimingFunc: 'linear',
-        animationDuration: 1000
-    }).mount()
-});
-</script>
+
 {% endblock %}