updated images and videos for better browser loading

.github/ISSUE_TEMPLATE/feature_request.md

@@ -17,7 +17,7 @@ assignees: ''
 <!-- Add any other context or screenshots about the feature request here. -->
 
 ---
-<img src="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-logo.png" width="16px" align="left" /><h4>Contributor [Guides](https://docs.meshery.io/project/contributing) and Resources</h4>
+<img src="https://raw.githubusercontent.com/meshery/meshery.io/master/assets/images/logos/meshery-logo.webp" width="16px" align="left" /><h4>Contributor [Guides](https://docs.meshery.io/project/contributing) and Resources</h4>
 
 - 🎨 Wireframes and designs for Meshery Site in [Figma](https://www.figma.com/file/SMP3zxOjZztdOLtgN4dS2W/Meshery-UI)
 - 🖥 [Contributing to Meshery Website](https://github.com/meshery/meshery.io#contributing-to-the-mesheryio-website)

.github/config.yml

@@ -20,7 +20,7 @@ firstPRMergeComment: >
   <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/meshery/meshery.io/master/.github/welcome/Meshery-celebration-Dark.svg">
   <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/meshery/meshery.io/master/.github/welcome/Meshery-celebration-Light.svg">
-  <img alt="Meshery Logo" src="">
+  <img alt="Meshery Logo" src="" loading="lazy">
   </picture>
 
   &nbsp; &#9; &nbsp; &#9;  &nbsp; &#9;  &nbsp; &#9; :star: Please leave a [star on the project](../stargazers). :smile:

README.md

@@ -28,7 +28,7 @@
 
 <h2>Preview of <a href="https://meshery.io">Meshery.io</a> Website<h2>
 
-![Meshery.io website screenshot](assets/images/mesheryio_screenshot.png)
+![Meshery.io website screenshot](./assets/images/mesheryio_screenshot.webp)
 _Visit [Meshery.io](https://meshery.io/) to learn more!_
 
 ## What is Meshery?
@@ -45,7 +45,7 @@ For further information, refer to the [Meshery Docs](https://docs.meshery.io).
 Our projects are community-built and welcome collaboration. 👍 Be sure to see the <a href="https://layer5.io/community/newcomers/">Newcomers' Guide</a> for a tour of resources available to you and jump into our <a href="https://slack.meshery.io">Slack</a> to engage!
 
 <p style="clear:both;">
-<a href ="https://layer5.io/community"><img alt="MeshMates" src="assets/images/logos/Layer5-MeshMentors.png" style="margin-right:10px; margin-bottom:7px;" width="28%" align="left" /></a>
+<a href ="https://layer5.io/community"><img alt="MeshMates" src="assets/images/logos/Layer5-MeshMentors.webp" style="margin-right:10px; margin-bottom:7px;" width="28%" align="left" /></a>
 <h3>Find your MeshMate</h3>
 
 <p>MeshMates are experienced Layer5 community members, who will help you learn your way around, discover live projects and expand your community network. 
@@ -58,13 +58,13 @@ Find out more about the <a href="https://layer5.io/community#meshmate">Layer5 co
 <a href="https://slack.meshery.io">
 
 <picture align="right">
-  <source media="(prefers-color-scheme: dark)" srcset="./assets/images/logos/slack-dark-128.png"  width="110px" align="right" style="margin-left:10px;margin-top:10px;">
-  <source media="(prefers-color-scheme: light)" srcset="./assets/images/logos/slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:5px;">
-  <img alt="Shows an illustrated light mode meshery logo in light color mode and a dark mode meshery logo dark color mode." src="./assets/images/logos/slack-128.png" width="110px" align="right" style="margin-left:10px;padding-top:13px;">
+  <source media="(prefers-color-scheme: dark)" srcset="./assets/images/logos/slack-dark-128.webp"  width="110px" align="right" style="margin-left:10px;margin-top:10px;">
+  <source media="(prefers-color-scheme: light)" srcset="./assets/images/logos/slack-128.webp" width="110px" align="right" style="margin-left:10px;padding-top:5px;">
+  <img alt="Shows an illustrated light mode meshery logo in light color mode and a dark mode meshery logo dark color mode." src="./assets/images/logos/slack-128.webp" width="110px" align="right" style="margin-left:10px;padding-top:13px;">
 </picture>
 </a>
 
-<a href="https://meshery.io/community"><img alt="Meshery Community" src="https://docs.meshery.io/assets/img/readme/community.png" style="margin-right:8px;padding-top:5px;" width="140px" align="left" /></a>
+<a href="https://meshery.io/community"><img alt="Meshery Community" src="https://docs.meshery.io/assets/img/readme/community.webp" style="margin-right:8px;padding-top:5px;" width="140px" align="left" /></a>
 
 <p>
 

_config.yml

@@ -9,9 +9,9 @@ google_maps_javascript_api_key:
 disqus_shortname:
 
 # Values for the jekyll-seo-tag gem (https://github.com/jekyll/jekyll-seo-tag)
-logo: /assets/images/logos/meshery-gradient.png
+logo: /assets/images/logos/meshery-gradient.webp
 description: The extensible cloud native manager. Confidently wrangle cloud native infrastructure with Meshery.
-author: 
+author:
   name: Layer5 Authors
   email: [email protected]
   twitter: mesheryio
@@ -46,7 +46,7 @@ collections:
   pages:
     output: true
   programs:
-    output: true  
+    output: true
   catalog:
     output: true
     sort_by: patternId
@@ -56,11 +56,14 @@ paginate: 10
 paginate_path: "/blog/:num/"
 permalink: pretty
 
+sass:
+  style: compressed
+
 # # Site configuration for the Jekyll 3 Pagination Gem
 # # The values here represent the defaults if nothing is set
 # pagination:
-  
-#   # Site-wide kill switch, disabled here it doesn't run at all 
+
+#   # Site-wide kill switch, disabled here it doesn't run at all
 #   enabled: true
 
 #   # Set to 'true' to enable pagination debugging. This can be enabled in the site config or only for individual pagination pages
@@ -74,15 +77,15 @@ permalink: pretty
 
 #   # The permalink structure for the paginated pages (this can be any level deep)
 #   permalink: '/page/:num/' # Pages are index.html inside this folder (default)
-#   #permalink: '/page/:num.html' # Pages are simple html files 
+#   #permalink: '/page/:num.html' # Pages are simple html files
 #   #permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
 
 #   # Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
 #   title: ':title - page :num'
 
 #   # Limit how many pagenated pages to create (default: 0, means all)
 #   limit: 0
-  
+
 #   # Optional, defines the field that the posts should be sorted on (omit to default to 'date')
 #   sort_field: 'patternId'
 
@@ -95,13 +98,13 @@ permalink: pretty
 #   # Optional, the default tag to use, omit to disable
 #   tag: ''
 
-#   # Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts, 
+#   # Optional, the default locale to use, omit to disable (depends on a field 'locale' to be specified in the posts,
 #   # in reality this can be any value, suggested are the Microsoft locale-codes (e.g. en_US, en_GB) or simply the ISO-639 language code )
-#   locale: '' 
+#   locale: ''
 
-#  # Optional,omit or set both before and after to zero to disable. 
-#  # Controls how the pagination trail for the paginated pages look like. 
-#   trail: 
+#  # Optional,omit or set both before and after to zero to disable.
+#  # Controls how the pagination trail for the paginated pages look like.
+#   trail:
 #     before: 2
 #     after: 2
 
@@ -116,14 +119,12 @@ permalink: pretty
 ############################################################
 
 defaults:
-  -
-    scope:
+  - scope:
       path: ""
       type: "pages"
     values:
       layout: "plain"
-  -
-    scope:
+  - scope:
       path: ""
       type: "posts"
     values:
@@ -132,42 +133,36 @@ defaults:
         content:
           width: 1500
           height: 2500
-  -
-    scope: 
+  - scope:
       path: ""
       type: "catalog"
     values:
       _options:
-        image: 
+        image:
           width: 600
           height: 600
-
-  -
-    scope:
+
+  - scope:
       path: ""
       type: "contributors"
     values:
       _options:
         image_path:
           width: 600
           height: 600
-  -
-    scope:
+  - scope:
       path: ""
     values:
       layout: "page"
-  -
-    scope:
+  - scope:
       path: "programs.html"
     values:
       layout: "default"
-  -
-    scope:
+  - scope:
       path: "index.html"
     values:
       layout: "default"
-  -
-    scope:
+  - scope:
       path: "contact.html"
     values:
       full_width: true
@@ -176,7 +171,6 @@ jekyll-archives:
   enabled:
     - categories
 
-
 exclude:
   - Gemfile
   - Gemfile.lock

_data/testimonials.yml

@@ -2,64 +2,64 @@
   quote: The Meshery Extension transforms Docker Desktop into a powerful load generation utility, conveniently enabling me to deploy and configure any service mesh with a click of the button and invoke and control load-based performance tests from my desktop.
   person: Maximiliano Churichi
   title: Software Engineer at HPE
-  image: /assets/images/Maximiliano-Churichi.jpg
+  image: /assets/images/Maximiliano-Churichi.webp
 
 - type: 2
   quote: The precision by which performance measurements are generated and analyzed is a pinnacle focus of Nighthawk. Mesh performance characterization should be distilled from a set of value measurements, and that is where MeshMark compliments to create the ultimate comprehensive efficiency calculation.
   person: Otto Van Der Schaaf
   title: Principal Engineer at Red Hat
-  image: /assets/images/otto-van-der-schaaf.jpg
+  image: /assets/images/otto-van-der-schaaf.webp
 
 - type: 2
   quote: Meshery is the perfect tool for ensuring that your cloud native applications are optimally configured and performing well; it also gives you a fantastic visual insight into what can be a large amount of textual configuration.
   person: Nic Jackson
   title: Principal Developer Advocate at HashiCorp
-  image: /assets/images/nic-jackson.jpg
+  image: /assets/images/nic-jackson.webp
 
 - type: 3
   quote: While speed is one of Linkerd's core competitive advantages, Linkerd provides much more than just an ultrafast data plane. We are pleased to support MeshMark's establishment of a higher order set of functional considerations that incorporate value into the performance equation.
   person: "William Morgan"
   title: CEO of Buoyant and one of the creators of Linkerd
-  image: /assets/images/william-morgan.png
+  image: /assets/images/william-morgan.webp
 
 - type: 2
   quote: Performance measurement data rarely provides a clear and simple picture of how well our applications are performing from a business point of view, which are so often the key efficiency indicators that we really need.
   person: Ken Owens
   title: Vice President Cyber Cloud Security Engineering at Fiserv
-  image: /assets/images/ken-owens.png
+  image: /assets/images/ken-owens.webp
 
 - type: 1
   quote: Many cloud native adopters have been put off from using service mesh due to the extra resource consumption and complexity that it can involve. We welcome MeshMark as an objective measure of that overhead, to help drive efficiency and make it easier for users to compare service mesh options.
   person: Liz Rice
   title: Chief Open Source Officer, Isovalent and Emeritus Chair of the CNCFs TOC
-  image: /assets/images/liz-rice.jpeg
+  image: /assets/images/liz-rice.webp
 
 - type: 3
   quote: "The fact that MeshMap automatically renders our Kubernetes configuration is a game-changer for our team."
   person: Kaur Kallas
   title: Software Architect at Entigo
-  image: /assets/images/kaur-kallas.jpg
+  image: /assets/images/kaur-kallas.webp
 
 - type: 1
   quote: It was an intuitive experience to visually place and configure various components saving the time of going through 10 different YAML files.
   person: Deepak Dinesh
   title: MeshMap User
-  image: /assets/images/deepak-dinesh.jpg
+  image: /assets/images/deepak-dinesh.webp
 
 - type: 1
   quote: Are my resources utilized as best as possible? Why am I not getting the SLO met with 4 resources when I only needed 1 resource without the service mesh? How can I improve my 99.9% latencies or can I map my service policy to utilization? MeshMark will model and provide an index in answer to such questions.
   person: Mrittika Ganguli
   title: Principal Engineer & Director Cloud Native Network Pathfinding
-  image: /assets/images/mrittika-ganguli.jpeg
+  image: /assets/images/mrittika-ganguli.webp
 
 - type: 2
   quote: With a goal to bring workload identity and attestation to all service meshes, HPE Security Engineering uses the Meshery Docker Extension to deploy their service mesh of choice and test the performance of our SPIFFE and SPIRE-based identity solution.
   person: Maximiliano Churichi
   title: Software Engineer at HPE
-  image: /assets/images/Maximiliano-Churichi.jpg
+  image: /assets/images/Maximiliano-Churichi.webp
 
 - type: 3
   quote: The Meshery Docker Extension offers an easy button to go from Docker Compose to Kubernetes to any service mesh.
   person: Nic Jackson
   title: Principal Developer Advocate at HashiCorp
-  image: /assets/images/nic-jackson.jpg
+  image: /assets/images/nic-jackson.webp

_includes/card.html

@@ -1,4 +1,5 @@
-  <div class= "card link">  
+<a class="external-link" href="{{pattern.url}}">
+  <div class="card link">
     <div class="card-inner">
 
       <div class="front">
@@ -7,28 +8,25 @@
         </div>
         <h4 class="pattern-name">{{pattern.name}}</h4>
         <div class="pattern-image-container">
-          <img class= "pattern-image" src="{{pattern.image}}" />
+          <img class="pattern-image" src="{{pattern.image}}" />
         </div>
         <h6 class="pattern-id">
-          <img class="smp"
-          src="{{site.baseurl}}/assets/images/logos/service-mesh-pattern.svg"
-          loading="lazy" />
+          <img class="smp" src="{{site.baseurl}}/assets/images/logos/service-mesh-pattern.svg" loading="lazy" />
           <span id="patId{{pattern.patternId}}" class="pat">
             {% assign bigPatId = pattern.patternId%}
             {% assign patId = bigPatId | split: "-" %}
 
             {% if patId[2] %}
-              MESHERY{{patId[2]}}
+            MESHERY{{patId[2]}}
             {%else%}
-              {{pattern.patternId}}
+            {{pattern.patternId}}
             {% endif %}
           </span>
         </h6>
-      </div> 
+      </div>
       <div class="back">
-        
+
       </div>
     </div>
-  </div>  
-
-
+  </div>
+</a>

_includes/coming-soon.html

@@ -1,14 +1,14 @@
-    <div class="card link">
-        <div class="card-inner">
-            <div class="front" style="background:rgba(0, 0, 0, 0.7)">
-                <h4 class="overlay-text">{{pattern.name}}</h4>
-                <h5 class="pattern-name">Coming Soon...</h5>
-                <img class="pattern-image-overlay" src="{{pattern.image}}" />
-                <h6 class="pattern-id-overlay">
-                    <img class="smp-overlay" src="{{site.baseurl}}/assets/images/logos/service-mesh-pattern.svg"
-                        loading="lazy" />{{pattern.patternId}}
-                </h6>
-            </div>
-            <div class="back"></div>
+<div class="card link">
+    <div class="card-inner">
+        <div class="front" style="background:rgba(0, 0, 0, 0.7)">
+            <h4 class="overlay-text">{{pattern.name}}</h4>
+            <h5 class="pattern-name">Coming Soon...</h5>
+            <img class="pattern-image-overlay" src="{{pattern.image}}" loading="lazy" />
+            <h6 class="pattern-id-overlay">
+                <img class="smp-overlay" src="{{site.baseurl}}/assets/images/logos/service-mesh-pattern.svg"
+                    loading="lazy" />{{pattern.patternId}}
+            </h6>
         </div>
+        <div class="back"></div>
     </div>
+</div>

_includes/dummy-filter.html

@@ -11,15 +11,15 @@ <h4>Categories:</h4>
     <label><input type="checkbox" value="Resiliency" id="resiliency"   /> Resiliency </label>   
   <hr>
     <p><strong>Compatibility:</strong></p>
-      <label><input type="checkbox" value="Istio" id="istio" onclick=handleChange()  /> <img class="dropdown-icon" src="/assets/images/istio.svg"/> Istio </label>
-      <label><input type="checkbox" value="Linkerd" id="linkerd" onclick=handleChange()  /> <img class="dropdown-icon" src="/assets/images/linkerd.svg"/> Linkerd </label>
-      <label><input type="checkbox" value="Consul" id="consul" /> <img class="dropdown-icon" src="/assets/images/consul.svg"/> Consul </label>
-      <label><input type="checkbox" value="Kuma" id="kuma"/> <img class="dropdown-icon" src="/assets/images/kuma.svg"/> Kuma </label>
-      <label><input type="checkbox" value="App Mesh" id="app-mesh"  /> <img class="dropdown-icon" src="/assets/images/aws-app-mesh.svg"/> App Mesh </label>
-      <label><input type="checkbox" value="OSM" id="osm"  /> <img class="dropdown-icon" src="/assets/images/osm.svg"/> Open Service Mesh </label>
-      <label><input type="checkbox" value="Traefik" id="traefik"   /> <img class="dropdown-icon" src="/assets/images/traefik-mesh.svg"/> Traefik Mesh </label>
-      <label><input type="checkbox" value="Nginx" id="nginx"/> <img class="dropdown-icon" src="/assets/images/nginx-sm.svg"/> Nginx </label>
-      <label><input type="checkbox" value="NSM" id="nsm" /> <img class="dropdown-icon" src="/assets/images/nsm.svg"/> NSM </label>   
+      <label><input type="checkbox" value="Istio" id="istio" onclick=handleChange()  /> <img loading="lazy" class="dropdown-icon" src="/assets/images/istio.svg"/> Istio </label>
+      <label><input type="checkbox" value="Linkerd" id="linkerd" onclick=handleChange()  /> <img loading="lazy" class="dropdown-icon" src="/assets/images/linkerd.svg"/> Linkerd </label>
+      <label><input type="checkbox" value="Consul" id="consul" /> <img loading="lazy" class="dropdown-icon" src="/assets/images/consul.svg"/> Consul </label>
+      <label><input type="checkbox" value="Kuma" id="kuma"/> <img loading="lazy" class="dropdown-icon" src="/assets/images/kuma.svg"/> Kuma </label>
+      <label><input type="checkbox" value="App Mesh" id="app-mesh"  /> <img loading="lazy" class="dropdown-icon" src="/assets/images/aws-app-mesh.svg"/> App Mesh </label>
+      <label><input type="checkbox" value="OSM" id="osm"  /> <img loading="lazy" class="dropdown-icon" src="/assets/images/osm.svg"/> Open Service Mesh </label>
+      <label><input type="checkbox" value="Traefik" id="traefik"   /> <img loading="lazy" class="dropdown-icon" src="/assets/images/traefik-mesh.svg"/> Traefik Mesh </label>
+      <label><input type="checkbox" value="Nginx" id="nginx"/> <img loading="lazy" class="dropdown-icon" src="/assets/images/nginx-sm.svg"/> Nginx </label>
+      <label><input type="checkbox" value="NSM" id="nsm" /> <img loading="lazy" class="dropdown-icon" src="/assets/images/nsm.svg"/> NSM </label>   
     <hr>
     <p><strong>Technology:</strong></p>
       <label><input type="checkbox" value="WebAssembly" id="webassembly"   /> WebAssembly </label>