Merge branch 'layer5io:master' into master

Author: abhijeetgauravm

src/collections/integrations/apisix-ingress-controller/icon/white/apisix-ingress-controller-white.svg

@@ -99,6 +99,6 @@ export const AdventuresVolWrapper = styled.div`
 	}
 
 	.handbook__card:hover .handbook__card--head {
-	  color: ${props => props.theme.text};
+	  color: white;
 	}
 `;

src/components/AdventuresVol/adventures-vol.style.js

@@ -42,6 +42,11 @@ const supported_platforms = [
         <Code codeString={dedent`curl -L https://meshery.io/install | PLATFORM=docker bash -`
         }
         />
+        <h2 style={{ marginTop: "20px" }}>Using mesheryctl</h2>
+        <Code codeString={dedent`mesheryctl system context create docker --platform docker --set
+        mesheryctl system start`
+        }
+        />
         <h2 style={{ marginTop: "20px" }}>Docker Extension</h2>
         <Code codeString={dedent`docker extension install meshery/docker-extension-meshery:stable-latest`
         }
@@ -82,7 +87,13 @@ const supported_platforms = [
         <h2>Helm Chart</h2>
         <p>Install on Kubernetes using Helm:</p>
         <Code codeString={dedent`helm repo add meshery https://meshery.io/charts/
-        helm install my-meshery meshery/meshery --version 2.1.2`}
+             helm install my-meshery meshery/meshery --version 2.1.2`}
+        />
+        <h3  style={{ marginTop: "20px" }}>Using kubectl</h3>
+        <Code codeString={dedent`kubectl create ns meshery
+        helm repo add meshery https://meshery.io/charts
+        helm install meshery-operator meshery/meshery-operator -n meshery
+        helm install meshery meshery/meshery -n meshery`}
         />
       </>
     )
@@ -100,19 +111,19 @@ const supported_platforms = [
       </>
     )
   },
-  {
-    icon: Kind,
-    name: "Kind",
-    steps: (
-      <>
-        <h2>Kind User</h2>
-        <Code codeString={dedent`export KUBECONFIG=$HOME/.kube/config
-        kubectl create namespace meshery
-        helm install meshery --namespace meshery install/kubernetes/helm/meshery`}
-        />
-      </>
-    )
-  },
+  // {
+  //   icon: Kind,
+  //   name: "Kind",
+  //   steps: (
+  //     <>
+  //       <h2>Kind User</h2>
+  //       <Code codeString={dedent`export KUBECONFIG=$HOME/.kube/config
+  //       kubectl create namespace meshery
+  //       helm install meshery --namespace meshery install/kubernetes/helm/meshery`}
+  //       />
+  //     </>
+  //   )
+  // },
   {
     icon: Kubernetes,
     name: "Kubernetes",
@@ -131,9 +142,12 @@ const supported_platforms = [
     name: "Linux",
     steps: (
       <>
-        <h2>Bash User</h2>
+        <h3>Install Using Kubernetes</h3>
         <Code codeString={dedent`curl -L https://meshery.io/install | PLATFORM=kubernetes bash -`}
         />
+        <h3 style={{ marginTop: "20px" }}>Install Using Docker</h3>
+        <Code codeString={dedent`curl -L https://meshery.io/install | PLATFORM=docker bash -` }
+        />
       </>
     )
   },
@@ -221,7 +235,7 @@ const MesheryPlatforms = () => {
             </Col>
           ))}
         </Row>
-        <Container style={{ transition: "height 0.5s ease-in-out", height: currentPlatform.name == "Docker" ? "320px" : installationStepsHeight, overflow: "hidden" }}>
+        <Container style={{ transition: "height 0.5s ease-in-out", height: (currentPlatform.name === "Docker" || currentPlatform.name === "Helm" || currentPlatform.name === "Linux" )  ? "30rem" : installationStepsHeight, overflow: "hidden" }}>
           <Row className="installation-steps" >
             {currentPlatform.name && currentPlatform.steps}
           </Row>

src/sections/Meshery/Meshery-platforms/index.js

@@ -4,6 +4,7 @@ import { ReactComponent as IntegrationsImage } from "./images/integration-image-
 import UnderlineImg from "./images/underline.svg";
 import { useInView } from "react-intersection-observer";
 import { useState } from "react";
+import { useStaticQuery, graphql } from "gatsby";
 // import { useStyledDarkMode } from "../../../theme/app/useStyledDarkMode";
 
 const IntegrationsSectionWrapper = styled.div`
@@ -97,10 +98,20 @@ const MeshmapIntegrationsSection = () => {
   const [diagramRef, inView] = useInView({ threshold: 0.6 });
   const [imageInView, setimageInView] = useState(false);
 
-  if (inView && !imageInView)
-    setimageInView(true);
-  else if (imageInView && !inView)
-    setimageInView(false);
+  const integrations = useStaticQuery(graphql`
+    query {
+      allMdx(
+        filter: {
+          fields: { collection: { eq: "integrations" } }
+          frontmatter: { published: { eq: true } }
+        }
+      ) {
+        totalCount
+      }
+    }
+  `);
+  if (inView && !imageInView) setimageInView(true);
+  else if (imageInView && !inView) setimageInView(false);
 
   // const { isDark } = useStyledDarkMode();
 
@@ -110,7 +121,7 @@ const MeshmapIntegrationsSection = () => {
         <IntegrationsImage  alt="integrations-img" className={imageInView ? "diagram-visible" : "diagram-hidden"} />
       </div>
       <div className="hero-text">
-        <h1>220+ Built-in Integrations</h1>
+        <h1>{Math.ceil(integrations.allMdx.totalCount / 10) * 10}+ Built-in Integrations</h1>
         <img className="underline-img" src={UnderlineImg}/>
         <h4>Support for all of your Cloud Native Infrastructure and Applications.</h4>
       </div>