Merge branch 'master' into fix-one.1

Signed-off-by: Suruchi Kumari <suruchikumarimfp4@gmail.com>

.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/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;
   }

_sass/elements.scss

@@ -102,16 +102,16 @@ p, address {
 }
 
 ol {
-	color: var(--color-secondary-dark);
+	color: var(--color-grey-light);
+	font-size: 1.1rem;
 }
 
 p.grey-bg-text{
 	color: var(--color-secondary-dark);
 }
 
-ul > li{
-	color: var(--color-secondary-dark);
-	font-weight: 300;
+ul{
+	color: var(--color-grey-light);
 }
 
 li.heading{

_sass/navigation.scss

@@ -42,7 +42,6 @@ nav {
 .nav-item:not(.has-sub) > a:not(.highlight).nav-text{
 	position: relative;
 	&:hover{
-		background-image: var(--background-grey);
 
 		&::after{
 		  width: 100%;
@@ -121,7 +120,6 @@ a.nav-text:hover {
 		}
 	}
 	&:hover{
-		background-image: var(--background-grey);
 	}
 }
 
@@ -200,6 +198,7 @@ a.nav-text:hover {
 	width:100%;
 	background-size: cover;
 	display: flex !important;
+	justify-content: space-between;
 	gap: 5px !important;
 }