Rectified Image Errors

meshery · Jul 31, 2024 · 4e28c9f · 4e28c9f
1 parent c0e1c5c
commit 4e28c9f
Showing 1 changed file with 22 additions and 39 deletions.
diff --git a/_includes/partials/homePage-integrations.html b/_includes/partials/homePage-integrations.html
@@ -5,7 +5,6 @@
         align-items: center;
         justify-content: center;
         max-width: 600px;
-        /* Adjust max-width as needed */
     }
 
     #sort {
@@ -26,7 +25,6 @@
         align-items: center;
         width: 100%;
         max-width: 500px;
-        /* Adjust max-width as needed */
         background-color: #fff;
         border: 1px solid #ddd;
         border-radius: 5px;
@@ -37,21 +35,16 @@
     #search {
         flex-grow: 1;
         height: 40px;
-        /* Increased height */
         padding: 10px 40px 10px 10px;
-        /* Adjust padding as needed */
         border: none;
         font-size: 16px;
         box-sizing: border-box;
         outline: none;
-        /* Remove outline on focus */
     }
 
     #search-btn {
         width: 80px;
-        /* Adjust width as needed */
         height: 40px;
-        /* Match height of input */
         background-color: green;
         border: none;
         color: #fff;
@@ -60,21 +53,17 @@
         justify-content: center;
         align-items: center;
         text-transform: uppercase;
-        /* Convert text to uppercase */
         margin-left: 10px;
-        /* Add margin to separate from input */
     }
 
     #search-btn svg {
         fill: #fff;
         width: 20px;
         height: 20px;
         margin-right: 5px;
-        /* Add margin to separate icon from text */
     }
 
     #integContainer {
-        /* Add padding after integContainer */
         column-gap: max(2vh, 2vw); 
         row-gap: 1.5rem; 
         display: flex; 
@@ -107,7 +96,6 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
         Meshery seamlessly integrates with every CNCF project, your existing tools, multiple Clouds and Kubernetes clusters.
     </p>
 
-    <!-- Search Bar Container -->
     <div class="sorting-options">
         <select id="sort">
             <option disabled selected value>Sort by</option>
@@ -119,9 +107,7 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
             <input type="text" id="search" placeholder="Search..." />
         </div>
 
-        <button class = "highlight" aria-label="Search">
-            Next
-        </button>
+        <button class="highlight" aria-label="Search">Next</button>
     </div>
 
     <div id="integContainer" class="integrations-container container"></div>
@@ -139,33 +125,31 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
 
         const integHeading = document.getElementById("integration-heading");
         const roundedIntegNumber = Math.floor(data.length / 10) * 10;
-        integHeading.textContent = `${ roundedIntegNumber } + Built - In Integrations`;
+        integHeading.textContent = `${roundedIntegNumber}+ Built-In Integrations`;
 
         const integContainer = document.getElementById("integContainer");
 
         let allDataShown = false;
 
         function renderIntegrationCards(data, showAll) {
-
             const cardsToShow = showAll ? data.length : 40;
-            return data
-                .slice(0, cardsToShow)
-                .map(
-                    (item) => `
-            <a href="${item.permalink}" class="integrations-card">
-              <div class="integrations-card-inner">
-                <div class="card-front">
-                  <img src="${item.color}" loading="lazy" id="logo-dark-light"
-                    data-logo-for-dark="${item.color}"
-                    data-logo-for-light="${item.color}" />
-                </div>
-                <div class="card-back">
-                  <p>${item.name}</p>
-                </div>
-              </div>
-            </a>`
-                )
-                .join('');
+            return data.slice(0, cardsToShow).map(item => {
+                const iconURL = item.color.split('/').slice(1).join('/');
+
+                return `
+                    <a href="${item.permalink}" class="integrations-card">
+                    <div class="integrations-card-inner">
+                    <div class="card-front">
+                    <img src="${iconURL}" loading="lazy" id="logo-dark-light"
+                    data-logo-for-dark="${iconURL}"
+                    data-logo-for-light="${iconURL}" />
+                    </div>
+                    <div class="card-back">
+                    <p> ${item.name} </p>
+                    </div>
+                    </div>
+                    </a>`;
+            }).join('');
         }
 
         const scrollOptions = { behavior: "smooth" };
@@ -178,14 +162,13 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
             const button = document.querySelector(".toggle-text");
 
             if (allDataShown) {
-                button.textContent = "See Less Integrations"; // Change button text when allDataShown is true
+                button.textContent = "See Less Integrations";
             } else {
-                button.textContent = "Show More Integrations"; // Change button text when allDataShown is false
+                button.textContent = "Show More Integrations";
             }
 
             integContainer.innerHTML = renderIntegrationCards(data, allDataShown);
 
-            // Scroll to the <h2> tag
             if (!allDataShown) {
                 const h2Tag = document.querySelector("h2");
                 h2Tag.scrollIntoView(scrollOptions);
@@ -214,4 +197,4 @@ <h2>for your Cloud Native Infrastructure and Apps</h2>
             integContainer.innerHTML = renderIntegrationCards(filteredData, allDataShown);
         });
     </script>
-    </style>
+</div>