Merge branch 'master' into fix-one.1

.github/workflows/add-catalog.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-22.04
     steps:
       - name: Checkout Code
-        uses: actions/checkout@v3.5.2
+        uses: actions/checkout@v4
         with:
           token: ${{ secrets.GH_ACCESS_TOKEN }}
       - name: Set env
@@ -44,6 +44,13 @@ jobs:
             patternName="$(jq -r .[$idx].name temp.json)"
             compatibility=""
 
+            # check if directory doesn't exists; then create it
+            if [ ! -d "./collections/_catalog/"$(echo $patternType | tr '[:upper:]' '[:lower:]')"" ]; then
+              echo "$(echo $patternType | tr '[:upper:]' '[:lower:]') doesn't exist."
+              echo "Creating directory...$(echo $patternType | tr '[:upper:]' '[:lower:]')"
+              mkdir "./collections/_catalog/"$(echo $patternType | tr '[:upper:]' '[:lower:]')""
+            fi
+
             if [[ $patternInfo == "null" ]]; then
               patternInfo="\"\""
             fi
@@ -127,6 +134,13 @@ jobs:
             filterName="$(jq -r .[$idx].name temp.json)"
             compatibility=""
 
+            # check if directory doesn't exists; then create it
+            if [ ! -d "./collections/_catalog/"$(echo $filterType | tr '[:upper:]' '[:lower:]')"" ]; then
+              echo "$(echo $filterType | tr '[:upper:]' '[:lower:]') doesn't exist."
+              echo "Creating directory...$(echo $filterType | tr '[:upper:]' '[:lower:]')"
+              mkdir "./collections/_catalog/"$(echo $filterType | tr '[:upper:]' '[:lower:]')""
+            fi
+
             if [[ $filterInfo == "null" ]]; then
               filterInfo="\"\""
             fi

README.md

@@ -1,5 +1,5 @@
 <picture>
-  <p style="text-align:center;" align="center">
+  <p style="text-align: center;">
 <a href="https://layer5.io/meshery">
 <picture align="center">
 <source media="(prefers-color-scheme: dark)" srcset="./assets/images/logos/meshery-logo-dark-text-side.svg" width="70%" align="center" style="margin-bottom:20px;">
@@ -26,7 +26,7 @@
 
 </div>
 
-<h2>Preview of <a href="https://meshery.io">Meshery.io</a> Website<h2>
+<h2>Preview of <a href="https://meshery.io">Meshery.io</a> Website</h2>
 
 ![Meshery.io website screenshot](assets/images/mesheryio_screenshot.png)
 _Visit [Meshery.io](https://meshery.io/) to learn more!_
@@ -51,9 +51,9 @@ Our projects are community-built and welcome collaboration. 👍 Be sure to see
 <p>MeshMates are experienced Layer5 community members, who will help you learn your way around, discover live projects and expand your community network. 
 Become a <b>Meshtee</b> today!</p>
 
+<p>
 Find out more about the <a href="https://layer5.io/community#meshmate">Layer5 community</a>. <br />
 <br /><br /><br /><br />
-
 </p>
 <a href="https://slack.meshery.io">
 

_data/navigation.yml

@@ -70,11 +70,11 @@
     #   new_window: false
     #   external: false
     #   img_src: /assets/images/nav-icons/Service-Mesh.svg
-    - name: Talks and Presentations
-      link: /talks-and-presentations
-      new_window: false
-      external: false
-      img_src: /assets/images/nav-icons/Presentation.svg
+    # - name: Talks and Presentations
+    #   link: /talks-and-presentations
+    #   new_window: false
+    #   external: false
+    #   img_src: /assets/images/nav-icons/Presentation.svg
     # - name: Blog
     #   link: /blog
     #   new_window: false

_includes/home-page.html

@@ -114,13 +114,13 @@ <h2 class="sub-text" style="padding-top:1rem; font-size: 1rem; font-weight: 500;
 			native infrastructure</h2>
 		<a href="https://github.com/meshery/meshery">
 			<img class="meshery-repo"
-				src="https://img.shields.io/github/stars/meshery/meshery.svg?style=social&label=Stars" alt="Star Repo"
+				src="https://img.shields.io/github/stars/meshery/meshery.svg?style=social&label=Stars" alt="Stars on meshery.io GitHub repository"
 				style="height: 1.75rem;
 		margin-top: 1rem;" />
 		</a>
 		<a href="https://github.com/meshery/meshery">
 			<img class="meshery-repo"
-				src="https://img.shields.io/github/forks/meshery/meshery.svg?style=social&label=Fork" alt="Fork" style="height: 1.75rem;
+				src="https://img.shields.io/github/forks/meshery/meshery.svg?style=social&label=Fork" alt="Fork meshery.io GitHub repository" style="height: 1.75rem;
 			margin-top: 1rem;" />
 		</a>
 	</div>
@@ -148,7 +148,7 @@ <h2 class="sub-text" style="padding-top:1rem; font-size: 1rem; font-weight: 500;
 				<h1 class="created-by">Created By</h1>
 				<div class="company-image">
 					<a href="https://layer5.io/" target="_blank">
-						<img id="layer5-logo" src="./assets/images/company-logo/layer5-no-trim.svg" alt="Layer5"
+						<img id="layer5-logo" src="./assets/images/company-logo/layer5-no-trim.svg" alt="Layer5 logo"
 							loading="lazy" />
 					</a>
 				</div>
@@ -160,57 +160,57 @@ <h1 class="created-by">Created By</h1>
 				<h1 class="used-by">Used By</h1>
 				<div class="companies-image">
 					<div class="company-image">
-						<img src="./assets/images/company-logo/hpe-logo-color-no-trim.svg" alt="Hewlett Packard"
+						<img src="./assets/images/company-logo/hpe-logo-color-no-trim.svg" alt="Hewlett Packard logo"
 							loading="lazy" id="logo-dark-light"
 							data-logo-for-dark="./assets/images/company-logo/hpe-logo-dark.svg"
 							data-logo-for-light="./assets/images/company-logo/hpe-logo-color-no-trim.svg"
 							style="filter: none;" />
 					</div>
 					<div class="company-image">
-						<img src="./assets/images/company-logo/intraserve.png" alt="Intraserve" loading="lazy" />
+						<img src="./assets/images/company-logo/intraserve.png" alt="Intraserve logo" loading="lazy" />
 					</div>
 					<div class="company-image">
 						<img src="./assets/images/company-logo/solarwinds.svg" id="logo-dark-light"
 							data-logo-for-dark="/assets/images/company-logo/solarwinds_white.svg"
 							data-logo-for-light="./assets/images/company-logo/solarwinds.svg" style="filter: none;"
-							alt="SolarWinds" loading="lazy" />
+							alt="SolarWinds logo" loading="lazy" />
 					</div>
 					<div class="company-image">
-						<img src="./assets/images/company-logo/book-my-show-logo.png" alt="BookMyShow" loading="lazy" />
+						<img src="./assets/images/company-logo/book-my-show-logo.png" alt="BookMyShow logo" loading="lazy" />
 					</div>
 					<div id="ericsson-logo" class="company-image">
-						<img src="./assets/images/company-logo/ericsson-logo.png" alt="Ericsson" loading="lazy" />
+						<img src="./assets/images/company-logo/ericsson-logo.png" alt="Ericsson logo" loading="lazy" />
 					</div>
 					<div id="metabob-logo" class="company-image">
-						<img src="./assets/images/company-logo/metabob-logo-1.png" alt="Metabob" loading="lazy" />
+						<img src="./assets/images/company-logo/metabob-logo-1.png" alt="Metabob logo" loading="lazy" />
 					</div>
 					<div id="asteria-logo" class="company-image">
-						<img src="./assets/images/company-logo/Asteria_Logo_horizontal_blue.svg" alt="asteria"
+						<img src="./assets/images/company-logo/Asteria_Logo_horizontal_blue.svg" alt="asteria logo"
 							loading="lazy" />
 					</div>
 					<div id="Bootlabs-logo" class="company-image">
 						<img src="./assets/images/company-logo/bootlabs-logo-2.png" id="logo-dark-light"
 							data-logo-for-dark="/assets/images/company-logo/bootlabs-white.svg"
 							data-logo-for-light="./assets/images/company-logo/bootlabs-logo-2.png" style="filter: none;"
-							alt="Bootlabs" loading="lazy" />
+							alt="Bootlabs logo" loading="lazy" />
 					</div>
 					<div id="Intel-logo" class="company-image">
 						<img src="./assets/images/company-logo/intel-logo.svg"
-							data-logo-for-dark="/assets/images/company-logo/red-hat-dark-logo.png" alt="Intel"
+							data-logo-for-dark="/assets/images/company-logo/red-hat-dark-logo.png" alt="Intel logo"
 							loading="lazy" style="height: 5.3vh; width:auto" />
 					</div>
 					<div id="Bootlabs-logo" class="company-image">
-						<img src="./assets/images/company-logo/vmware-logo.svg" alt="VMWARE" loading="lazy" />
+						<img src="./assets/images/company-logo/vmware-logo.svg" alt="VMWARE logo" loading="lazy" />
 					</div>
 					<div id="Red-Hat-logo" class="company-image">
 						<img src="./assets/images/company-logo/red-hat-logo.svg" id="logo-dark-light"
 							data-logo-for-dark="/assets/images/company-logo/red-hat-dark-logo.png"
 							data-logo-for-light="./assets/images/company-logo/red-hat-logo.svg" style="filter: none;"
-							alt="RedHat" loading="lazy" />
+							alt="RedHat logo" loading="lazy" />
 
 					</div>
 					<div id="Metabit-Trading-logo" class="company-image">
-						<img src="./assets/images/company-logo/metabit-trading-logo.png" alt="Metabit Trading"
+						<img src="./assets/images/company-logo/metabit-trading-logo.png" alt="Metabit Trading logo"
 							loading="lazy" />
 					</div>
 				</div>
@@ -254,7 +254,7 @@ <h4>MESHERY IS A CLOUD NATIVE COMPUTING FOUNDATION PROJECT</h4>
 
 		<img src="./assets/images/cncf-horizontal-color.svg" id="logo-dark-light"
 			data-logo-for-dark="./assets/images/cncf-light-logo.svg"
-			data-logo-for-light="./assets/images/cncf-horizontal-color.svg" class="cncf-img" alt="CNCF Logo"
+			data-logo-for-light="./assets/images/cncf-horizontal-color.svg" class="cncf-img" alt="Cloud Native Computing Foundation Logo"
 			loading="lazy" />
 		<p>
 			<span class="layer5-caption">

_includes/programs.html

@@ -80,7 +80,7 @@
     >
       <img
         src="../assets/images/programs/cncf-icon-white.svg"
-        alt="CNCF"
+        alt="Cloud Native Computing Foundation logo"
         class="minicard-img"
       />
 
@@ -94,7 +94,7 @@
     >
       <img
         src="../assets/images/programs/gsod.svg"
-        alt="GSOD2020"
+        alt="Google Season of Docs logo"
         class="minicard-img"
       />
       <span class="inner-span">GSOD</span>
@@ -107,7 +107,7 @@
     >
       <img
         src="../assets/images/programs/gsoc.svg"
-        alt="GSOC"
+        alt="Google Summer of Code logo"
         class="minicard-img"
       />
       <span class="inner-span">GSOC </span>
@@ -120,7 +120,7 @@
     >
       <img
         src="../assets/images/programs/lfx-logo.svg"
-        alt="LFX"
+        alt="LFX logo"
         class="minicard-img"
         style="width:23%;padding-top:.4rem;padding-bottom:.4rem;"
       />

_includes/view-all.html

@@ -0,0 +1,30 @@
+<div class="viewall">
+    <button class="viewallbtn">View All</button>
+    </div>
+
+    <script>
+    var cardRow = document.querySelector('.row');
+    var viewAllButton = document.querySelector('.viewallbtn');
+
+    function toggleViewAllButton() {
+          if (cardRow.offsetHeight > 1135) {
+            viewAllButton.style.display = 'block';
+          } else {
+            viewAllButton.style.display = 'none';
+          }
+        }
+
+        toggleViewAllButton();
+
+
+    viewAllButton.addEventListener('click', function () {
+      cardRow.style.maxHeight = 'none';
+      cardRow.style.overflow = 'visible';
+      viewAllButton.style.display = 'none';
+    });
+
+    window.addEventListener('load', function () {
+      cardRow.style.maxHeight = '1135px'; 
+      cardRow.style.overflow = 'hidden';
+    });
+    </script>

_layouts/catalog.html

@@ -23,3 +23,4 @@ <h3>Pattern Management</h3>
 </div>
   {% include card-modal.html %}  
 <!-- CARD-END -->
+  {% include view-all.html %}

_sass/catalog.scss

@@ -125,6 +125,7 @@
     gap: 1rem;
     justify-content: space-around;
     height: fit-content;
+    padding-top: 1rem;
   }
 
   @media (max-width:770px) {
@@ -342,6 +343,7 @@ label {
   padding-left: 15px;
   text-indent: -15px;
 }
+
 input {
   width: 20px;
   height: 20px;
@@ -875,13 +877,36 @@ label {
     width: 100%;
   }
 }
+.viewall{
+  display: flex;
+    padding: 5px;
+    margin: 5px;
+}
+.viewallbtn{
+  cursor: pointer;
+  border: none;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  color: #fff;
+  border-radius: 7px;
+  padding: 0.5rem;
+  background: #00B39F;
+}
 
 @media screen and (max-width: 650px) {
   .modal-window {
     width: 100%;
     height: 100%;
   }
 }
+@media screen and (min-width: 770px) {
+
+  .viewallbtn{
+    position: relative;
+    left:60%;
+  }
+}
 @media screen and (max-width: 770px) {
   .catalog-load-more {
     display: unset;
@@ -892,7 +917,9 @@ label {
     justify-content: space-between;
     gap: 0.5rem;
   }
-
+  .viewall{
+    justify-content: center;
+  }
   .catalog{
 
     .row {
@@ -904,8 +931,8 @@ label {
       height: 100%;
     }
 
-    .column-lg {
-      display: none;
+    .column-lg:has(.card) {
+      display: block;
     }
     .mobile_column_sm {
       display: unset;
@@ -917,9 +944,9 @@ label {
     width: 100%;
     height: auto;
     flex-direction: column;
-    gap: 1.5rem;
-    padding-bottom: 5rem;
-    margin-bottom: 3rem;
+    gap: 1rem;
+    padding-bottom: 3rem;
+    margin-bottom: 1.5rem;
     .dropdown {
       align-self: center;
       margin-bottom: 7rem;
@@ -931,11 +958,9 @@ label {
     .compatibility-div,
     .tech-div {
       display: grid;
-      grid-template-columns: 1fr 1fr;
       label {
         margin: 0;
       }
-      row-gap: 2rem;
       column-gap: 2rem;
       .open-service-mesh {
         grid-row: 4/5;
@@ -956,7 +981,31 @@ label {
     }
   }
 }
+@media screen and (max-width:770px) and  (min-width:450px){
+  .category-div,
+  .compatibility-div,
+  .tech-div {
+    row-gap: 2rem;
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media screen and (max-width:450px) {
+  .category-div,
+  .compatibility-div,
+  .tech-div {
+    row-gap: 1rem;
+  }
+}
+
 @media screen and (max-width: 644px) {  
+  .modal-image {
+    width: 230px;
+    padding-bottom: 2rem;
+  }
+  .modal-h1,
+  .modal-h2 {
+    font-size: 1rem;
+  }
   .related-patterns {
     display: none;
   }