Merge pull request layer5io#1688 from Tanuj22/Tanuj22/small-changes

Add lightbox component

package.json

@@ -71,6 +71,7 @@
     "react-twitter-embed": "^3.0.3",
     "react-vertical-timeline-component": "^3.3.0",
     "react-visibility-sensor": "^5.1.1",
+    "simple-react-lightbox": "^3.6.3",
     "slick-carousel": "^1.8.1",
     "styled-components": "^4.4.1",
     "swiper": "^6.3.5"

src/collections/blog/2019-07-09-Meshery-start-feat-WSL2-K3d/index.mdx

@@ -28,7 +28,7 @@ import wslmesherystart from "./wsl-meshery-start.png";
 <BlogWrapper>
 
 During KubeCon EU 2019, I had the chance to discover two new softwares that simply amazed me:
-1. [Meshery](https://layer5.io/meshery), which is the multi-service mesh management plane.
+1. [Meshery](https://layer5.io/service-mesh-management/meshery), which is the multi-service mesh management plane.
 2. [k3d](https://github.com/rancher/k3d), which is used to create a dockerized [k3s](https://k3s.io) server.
 
 And, what really appealed to me about both of them is that everything from the installation to the usage was just *simple!*
@@ -37,7 +37,7 @@ And cream on the top, both softwares are used with or inside containers, making
 <h4>Environment Setup</h4>
 
 Before we start having *real* fun with Meshery, I will quickly list the different components I used for this blog post and ensure I define what could be optional for your own setup:
-1. [Meshery](https://layer5.io/meshery)
+1. [Meshery](https://layer5.io/service-mesh-management/meshery)
 2. [Docker](https://docs.docker.com/install/)
     - Docker is of course mandatory and as Meshery is based on a Compose file, which means that [docker-compose](https://docs.docker.com/compose/install/) is also mandatory.
 3. [k3d](https://github.com/rancher/k3d)

src/collections/blog/2020-03-11-deploying-linkerd-with-meshery/index.mdx

@@ -22,6 +22,7 @@ import maesh from '../../../assets/images/service-mesh-icons/maesh.png';
 import nsm from '../../../assets/images/service-mesh-icons/nsm.svg';
 import octarine from '../../../assets/images/service-mesh-icons/octarine.svg';
 import kuma from '../../../assets/images/service-mesh-icons/kuma.svg';
+import {Link} from "gatsby"
 
 <BlogWrapper>
 
@@ -34,7 +35,7 @@ import kuma from '../../../assets/images/service-mesh-icons/kuma.svg';
     style="min-height: 315px; min-width: 280px;
     "></iframe>
 </div>
-But with so many mesh options around - how do we choose, evaluate and compare them? And once we’ve chosen a solution - how do we make it accessible to all our engineers? It is to provide an answer to these questions that the Layer5 community has created <a href="/meshery">Meshery</a>, the open-source, service mesh management plane. Meshery already supports a number of leading mesh providers with adapters for additional meshes on the way. In today’s video, I’ll show how to use Meshery for rolling out and evaluating Linkerd.
+But with so many mesh options around - how do we choose, evaluate and compare them? And once we’ve chosen a solution - how do we make it accessible to all our engineers? It is to provide an answer to these questions that the Layer5 community has created <Link to="/service-mesh-management/meshery">Meshery</Link>, the open-source, service mesh management plane. Meshery already supports a number of leading mesh providers with adapters for additional meshes on the way. In today’s video, I’ll show how to use Meshery for rolling out and evaluating Linkerd.
 
  Linkerd is a system that comes from the service mesh pioneers - the company called Buoyant. They were the first to realise the need for a distributed network of smart, centrally configured proxies and coin the term “service mesh” back in 2016. Today, we’ll be looking at Linkerd 2.x - the second generation of this now CNCF project.
 </div>
@@ -51,57 +52,57 @@ But with so many mesh options around - how do we choose, evaluate and compare th
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-istio">
-                <img src={istio} alt='Istio Service Mesh adapter' class="adapter-logo" />Meshery adapter for Istio</a>
+                <img src={istio} alt='Istio Service Mesh adapter' className="adapter-logo" />Meshery adapter for Istio</a>
             </td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-linkerd">
-                <img src={linkerd} alt='Linkerd' class="adapter-logo" />Meshery adapter for Linkerd</a>
+                <img src={linkerd} alt='Linkerd' className="adapter-logo" />Meshery adapter for Linkerd</a>
             </td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-consul">
-                <img src={consul} alt='Consul Connect' class="adapter-logo" />Meshery adapter for Consul</a>
+                <img src={consul} alt='Consul Connect' className="adapter-logo" />Meshery adapter for Consul</a>
             </td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-octarine">
-                <img src={octarine} alt='Octarine Service Mesh' class="adapter-logo" />Meshery adapter for Octarine</a>
+                <img src={octarine} alt='Octarine Service Mesh' className="adapter-logo" />Meshery adapter for Octarine</a>
             </td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-nsm">
-                <img src={nsm} alt='Network Mesh' class="adapter-logo" />Meshery adapter for Network Service Mesh</a>
+                <img src={nsm} alt='Network Mesh' className="adapter-logo" />Meshery adapter for Network Service Mesh</a>
             </td>
         </tr>
-        <tr><td class="stable-adapters"></td></tr>
+        <tr><td className="stable-adapters"/></tr>
         <tr>
-            <td rowspan="2" class="beta-adapters">beta</td>
+            <td rowspan="2" className="beta-adapters">beta</td>
             <td><a href="https://github.com/layer5io/meshery-cpx">
-                <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQksHj15DkID308qQw3cmkQrRULPxyzbVquSZVev-9dj1L6sPs-rQ&s' alt='Citrix CPX Service Mesh' class="adapter-logo" />Meshery adapter for Citrix CPX</a>
+                <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQksHj15DkID308qQw3cmkQrRULPxyzbVquSZVev-9dj1L6sPs-rQ&s' alt='Citrix CPX Service Mesh' className="adapter-logo" />Meshery adapter for Citrix CPX</a>
             </td>
         </tr>
-        <tr><td class="beta-adapters"></td></tr>
+        <tr><td className="beta-adapters"/></tr>
         <tr>
             <td rowspan="6" class="alpha-adapters">alpha</td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-maesh">
-                <img src={maesh} alt='Maesh Service Mesh' class="adapter-logo" />Meshery adapter for Maesh</a>
+                <img src={maesh} alt='Maesh Service Mesh' className="adapter-logo" />Meshery adapter for Maesh</a>
             </td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-app-mesh">
-                <img src={awsappmesh} alt='AWS App Mesh Service Mesh' class="adapter-logo" />Meshery adapter for App Mesh </a>
+                <img src={awsappmesh} alt='AWS App Mesh Service Mesh' className="adapter-logo" />Meshery adapter for App Mesh </a>
             </td>
         </tr>
         <tr>
             <td><a href="https://github.com/layer5io/meshery-kuma">
-                <img src={kuma} alt='Kuma Service Mesh' class="adapter-logo" />Meshery adapter for Kuma</a>
+                <img src={kuma} alt='Kuma Service Mesh' className="adapter-logo" />Meshery adapter for Kuma</a>
             </td>
         </tr><tr>
         </tr>
-        <tr><td class="alpha-adapters"></td></tr>
+        <tr><td className="alpha-adapters"/></tr>
         </tbody>
     </table>
 </div>

src/collections/events/istiocon2020/index.mdx

@@ -7,12 +7,12 @@ topic: event
 published: true
 upcoming: true
 speakers: ["Lee Calcote", "Abishek Kumar"]
-redirect_from: 
+redirect_from:
  - /community/events/istiocon-2020
 ---
 Join Layer5 at the inaugural Istio conference on Monday, Feb. 22nd to Friday, Feb. 26th. <a href="https://events.istio.io/istiocon-2021/about/">IstioCon</a> is a 100% virtual event that is designed to connect community members across the globe with Istio and the Istio ecosystem.
 
-Layer5 will kickoff the event with our renowned service mesh workshop, featuring <a href="/meshery">Meshery</a>, the service mesh manager. Attend our workshop to help you get started with managing your own service mesh!
+Layer5 will kickoff the event with our renowned service mesh workshop, featuring <a href="/service-mesh-management/meshery">Meshery</a>, the service mesh manager. Attend our workshop to help you get started with managing your own service mesh!
 
 <h4>Using Istio</h4>
 <br />

src/collections/news/2020-05-28-layer5-and-hasicorp-launch-service-mesh-partnership/index.mdx

@@ -21,7 +21,7 @@ _Announced on May 28th, 2020 at DockerCon Live 2020._
 
 ## Meshery Announces Native Support for Consul Service Mesh
 
-Today, we are pleased to announce the technology partnership of Layer5 and HashiCorp. Layer5’s [Meshery](https://layer5.io/meshery), the service mesh management plane, and HashiCorp’s [Consul](https://consul.io) integrate to provide advanced, cloud native infrastructure solutions for containerized and non-containerized workloads - strengths of Consul. The marriage of these technologies forms a layering of network planes: data, control, and management.
+Today, we are pleased to announce the technology partnership of Layer5 and HashiCorp. Layer5’s [Meshery](https://layer5.io/service-mesh-management/meshery), the service mesh management plane, and HashiCorp’s [Consul](https://consul.io) integrate to provide advanced, cloud native infrastructure solutions for containerized and non-containerized workloads - strengths of Consul. The marriage of these technologies forms a layering of network planes: data, control, and management.
 
 <a href={layer5_hashicorp_partnership}><img src={layer5_hashicorp_partnership} alt="layer5-hashicorp-partnership" width="100%" /></a>
 

src/collections/news/2020-10-29-kubernetes-evolves-into-an-enterprise-platform.md/index.mdx

@@ -1,4 +1,4 @@
----		
+---
 title:  "Meshery Provides the Service Mesh Management Plane and Kubernetes Evolves into an Enterprise Platform"
 date:   2020-10-29 12:00:00 +0000
 author: The Newsroom
@@ -14,7 +14,7 @@ import kubernetes from "./kubernetes-platform.png";
 A service mesh has become a critical part of platforms based on Kubernetes clusters. It provides both east-west and north-south traffic managementxi, security, observability, and shaping for services implemented by the cluster and supporting components. As clusters have grown in size and platforms have become comprised of many clusters, maintaining a consistent view, management, and policies for network layer 4 – 7 traffic has become increasingly complex.
 
 <p>
-In response, a number of vendors have extended control planes with a multi-cluster management layer such that they federate and manage service meshes at scale across multiple clouds and on-premises deployments. Both Hashicorp Consul and VMWare Tanzu NSX Service Mesh extend the service mesh control plane past the local service mesh to allow a management layer over multiple clouds and clusters. <u>The open source project <a href="/meshery"><b>Meshery</b></a> is also providing a service mesh management plane as separate software that can interact using the Service Mesh Interface or through built-for-purpose adapters for a variety of existing service mesh products and projects.</u>
+In response, a number of vendors have extended control planes with a multi-cluster management layer such that they federate and manage service meshes at scale across multiple clouds and on-premises deployments. Both Hashicorp Consul and VMWare Tanzu NSX Service Mesh extend the service mesh control plane past the local service mesh to allow a management layer over multiple clouds and clusters. <u>The open source project <a href="/service-mesh-management/meshery"><b>Meshery</b></a> is also providing a service mesh management plane as separate software that can interact using the Service Mesh Interface or through built-for-purpose adapters for a variety of existing service mesh products and projects.</u>
 </p>
 
 Like Kubernetes control planes, this extension of the service mesh control plane allows for consistent management and policies across clusters in different environments, a situation that is becoming more typical in enterprise IT applications.
@@ -24,4 +24,4 @@ Service mesh control plane federation is an emerging feature of service mesh pro
 <center>
 <h5 class="black-text">Access the full <a href="https://amalgaminsights.com/product/market-landscape-kubernetes-evolves-into-an-enterprise-platform/">research from Amalgam Insights</a>
 </h5>
-</center>
+</center>

src/components/Features-carousel/index.js

@@ -1,4 +1,5 @@
 import React, {useState} from "react";
+import {SRLWrapper} from "simple-react-lightbox";
 import {Link} from "gatsby";
 import Carousel from "nuka-carousel";
 import { IoIosArrowRoundForward } from "react-icons/io";
@@ -34,7 +35,9 @@ const FeaturesList = ({ features }) => {
           ))}
         </ul>
         <div className="terminal-wrapper">
-          {features[activeFeature].content}
+          <SRLWrapper>
+            {features[activeFeature].content}
+          </SRLWrapper>
         </div>
       </div>
     </FeaturesWrapper>

src/components/layout.js

@@ -8,6 +8,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Helmet from "react-helmet";
+import SimpleReactLightbox from "simple-react-lightbox";
 
 import FavIcon from "../assets/images/favicon.png";
 
@@ -33,8 +34,9 @@ const Layout = ({ children }) => {
           href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css"
         />
       </Helmet>
-
-      {children}
+      <SimpleReactLightbox>
+        {children}
+      </SimpleReactLightbox>
     </>
   );
 };

src/components/seo.js

@@ -4,7 +4,7 @@ import Helmet from "react-helmet";
 import { useLocation } from "@reach/router";
 import { useStaticQuery, graphql } from "gatsby";
 
-function SEO({ description, lang, meta, title, image }) {
+const SEO = ({ description, lang, meta, title, image }) => {
   const { pathname } = useLocation();
   const { site } = useStaticQuery(
     graphql`
@@ -81,7 +81,7 @@ function SEO({ description, lang, meta, title, image }) {
       ].concat(meta)}
     />
   );
-}
+};
 
 SEO.defaultProps = {
   title: null,

src/pages/index.js

@@ -17,7 +17,6 @@ import Footer from "../sections/General/Footer";
 import ServiceMeshManagement from "../sections/Home/service-mesh-management";
 import { GlobalStyle } from "../sections/app.style";
 import theme from "../theme/app/themeStyles";
-import EngineerEnabler from "../sections/Home/Engineer-enabler";
 import SubscribeSection from "../sections/subscribe/subscribe";
 import ServiceMeshFocussed from "../sections/Home/Service-mesh-focussed";
 import CloudNativeLeaders from "../sections/Home/Cloud-Native";

src/reusecore/Particle/index.js

@@ -1,11 +1,6 @@
 import React from "react";
 import Particles from "react-particles-js";
 
-// import particle1 from "../../assets/images/app/particle/01.png";
-// import particle2 from "../../assets/images/app/particle/02.png";
-// import particle3 from "../../assets/images/app/particle/03.png";
-// import particle4 from "../../assets/images/app/particle/04.png";
-// import particle5 from "../../assets/images/app/particle/05.png";
 import meshery from "../../assets/images/app/projects/meshery-logo-white.png";
 import smp from "../../assets/images/app/projects/smp.png";
 import imagehub from "../../assets/images/app/projects/layer5-image-hub.png";

src/sections/Blog/Blog-single/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "gatsby";
 import { MDXRenderer } from "gatsby-plugin-mdx";
+import { SRLWrapper } from "simple-react-lightbox";
 import slugify from "../../../utils/slugify";
 import { Container } from "../../../reusecore/Layout";
 import PageHeader from "../../../reusecore/PageHeader";
@@ -21,7 +22,9 @@ const BlogSingle = ({data}) => {
       />
       <div className="single-post-wrapper">
         <Container>
-          <MDXRenderer>{body}</MDXRenderer>
+          <SRLWrapper>
+            <MDXRenderer>{body}</MDXRenderer>
+          </SRLWrapper>
           <BlogPostSignOff
             author={{ name: frontmatter.author }}
           />

src/sections/Careers/Careers-Internship-grid/index.js

@@ -84,10 +84,10 @@ const InternshipPage = ({ hide_heading }) => {
       )}
       <Container>
         <p>
-                    At Layer5, we take our internships seriously. Interns are expected to work hard, learn much, and be recognized for doing so. Past interns have presented their projects at KubeCon, DockerCon, and similar technical conferences.
+            At Layer5, we take our internships seriously. Interns are expected to work hard, learn much, and be recognized for doing so. Past interns have presented their projects at KubeCon, DockerCon, and similar technical conferences.
         </p>
         <p>
-                    Our community of contributors is the key ingredient to the success of every one of our projects. Interns engage as part of the community. Whether interning directly with Layer5 or through one of Layer5's partner programs, your contributions will affect people you've never met as the Layer5 projects are being broadly referenced and used in organizations large and small.
+            Our community of contributors is the key ingredient to the success of every one of our projects. Interns engage as part of the community. Whether interning directly with Layer5 or through one of Layer5's partner programs, your contributions will affect people you've never met as the Layer5 projects are being broadly referenced and used in organizations large and small.
         </p>
 
         <div className="oppurtunities">
@@ -115,8 +115,8 @@ const InternshipPage = ({ hide_heading }) => {
             <ProgramsGrid sub_section={true}/>
           </div>
           <p>
-                      The Layer5 community includes software engineers, researchers, students, artists, system administrators,
-                      operators and web designers -- all of whom will be happy to help you get started. We believe that all contributors should be afforded a safe and friendly environment for constructive learning. Our projects are improved through diversity and empathic community.
+          The Layer5 community includes software engineers, researchers, students, artists, system administrators,
+          operators and web designers -- all of whom will be happy to help you get started. We believe that all contributors should be afforded a safe and friendly environment for constructive learning. Our projects are improved through diversity and empathic community.
           </p>
           <div>
             <h1>Participating Partners</h1>

src/sections/Careers/Careers-Programs-grid/index.js

@@ -71,7 +71,7 @@ const ProgramsGrid = ({ hide_path, sub_section }) => {
             Our shared commitment to the open source spirit push the Layer5 community and its projects forward.
             New members are always welcome.
           </p>
-          HashiCorp is driven by its people who are the stewards of our culture and principles which have been the foundational characteristics of. Join us on the journey to enabling the world's most innovative companies make the transition to cloud, and multi-cloud through simple workflows and automation.
+          Layer5 is driven by its people who are the stewards of our culture and principles which have been the foundational characteristics of. Join us on the journey to enabling the world's most innovative companies make the transition to cloud, and multi-cloud through simple workflows and automation.
 
           <p>Layer5 goes out of its way to welcome and encourage new contributors. We often assign newcomers an onboarding buddy, a MeshMate, to ensure that newcomers get both introduced to the projects within the community and introduced around to other individuals. We strive to help them get a foothold on a crevice of one of our initiatives, instilling and nurturing a sense of ownership, so that they feel at-home as they become a regular contributor.</p>
           <p>