Merge branch 'master' into seoNew

src/collections/integrations/solr-operator/index.mdx

@@ -0,0 +1,28 @@
+---
+title: Solr Operator  
+subtitle: Collaborative and visual infrastructure as code for Solr Operator
+integrationIcon: icon/color/solr-operator-color.svg
+darkModeIntegrationIcon: icon/white/solr-operator-white.svg
+docURL: 
+category: Analytics
+subcategory: Query
+featureList: ["Drag-n-drop cloud native infrastructure designer to configure, model, and deploy your workloads.",
+"Invite anyone to review and make changes to your private designs.",
+"Ongoing synchronization of Kubernetes configuration and changes across any number of clusters."
+]
+workingSlides: [
+    ../_images/meshmap-visualizer.png,
+    ../_images/meshmap-designer.png]
+howItWorks: "Collaborative Infrastructure as Code"
+howItWorksDetails: "Collaboratively manage infrastructure with your coworkers synchronously sharing the same designs."
+published: true
+---
+<p>
+    Solr is highly reliable, scalable and fault tolerant, providing distributed indexing, replication and load-balanced querying, automated failover and recovery, centralized configuration and more. Solr powers the search and navigation features of many of the world's largest internet sites.
+</p>
+<p>
+    Collaboratively and visually diagram your cloud native infrastructure with GitOps-style pipeline integration. Design, test, and manage configuration your Kubernetes-based, containerized applications as a visual topology.
+</p>
+<p>
+    Looking for best practice cloud native design and deployment best practices? Choose from thousands of pre-built components in MeshMap. Choose from hundreds of ready-made design patterns by importing templates from Meshery Catalog or use our low code designer, MeshMap, to create and deploy your own cloud native infrastructure designs.
+</p>

src/components/Features/TwoColLayout.js

@@ -11,6 +11,7 @@ import DiagrammingImageLight from "../../assets/images/AWS-Diagram/aws-light.svg
 import AWSLogoDark from "../../sections/Home/FeaturesContainer/images/aws-logo-dark.svg";
 import AWSLogoLight from "../../sections/Home/FeaturesContainer/images/aws-logo-light.svg";
 import GCPLogo from "../../sections/Home/FeaturesContainer/images/gcp-logo.svg";
+import KubernetesLogo from "../../sections/Kubernetes-Diagram/images/kubernetes-icon.svg";
 import OrchestrationLight from "./images/orchestration-light.svg";
 import OrchestrationDark from "./images/orchestration.svg";
 import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode.js";
@@ -21,7 +22,7 @@ const TwoColLayout = () => {
     <Section>
       <Container>
         <ImageWrapper ref={containerRef}>
-          <Link to="/whiteboard">
+          <Link to="/architecture-diagram/design-architecture-diagram">
             <img src={isDark ? DiagrammingImageDark : DiagrammingImageLight} alt="image" />
           </Link>
         </ImageWrapper>
@@ -31,11 +32,12 @@ const TwoColLayout = () => {
           <div className="small-card-container">
             <Link className="small-card" to="/cloud-native-management/generate-aws-architecture-diagram">
               <img src={isDark ? AWSLogoDark : AWSLogoLight} width={40} />
-              <span>Amazon Web Services</span>
             </Link>
             <Link className="small-card" to="/cloud-native-management/generate-gcp-architecture-diagram">
               <img src={GCPLogo} width={40} />
-              <span>Google Cloud Platform</span>
+            </Link>
+            <Link className="small-card" to="/cloud-native-management/generate-kubernetes-architecture-diagram">
+              <img src={KubernetesLogo} width={40} />
             </Link>
           </div>
         </ContentWrapper>

src/pages/architecture-diagram/design-architecture-diagram/index.js

@@ -1,7 +1,7 @@
 import React from "react";
 import ArchitectureDiagram from "../../../sections/ArchitectureDiagram";
 import ServiceMeshFocused from "../../../sections/Home/Service-mesh-focussed";
-
+import SEO from "../../../components/seo";
 const ArchitectureDiagramPage = () => {
   return (
     <>
@@ -11,4 +11,9 @@ const ArchitectureDiagramPage = () => {
   );
 };
 
-export default ArchitectureDiagramPage;
+export default ArchitectureDiagramPage;
+export const Head = () => {
+  return <SEO title="Design Architecture Diagram | Layer5"
+    description="Create architecture diagram for AWS, GCP or Kubernetes"
+    image="/images/meshery-logo-dark-text.webp" />;
+};

src/pages/cloud-native-management/generate-kubernetes-architecture-diagram.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+import SEO from "../../components/seo";
+import KubernetesDiagram from "../../sections/Kubernetes-Diagram";
+
+const Kubernetes = () => {
+  return (
+    <>
+      <KubernetesDiagram />
+    </>
+  );
+};
+export default Kubernetes;
+export const Head = () => {
+  return <SEO title="Kubernetes Architecture Diagram"
+    description="Create your own Kubernetes diagrams with Meshmap."
+    image="/images/meshery-logo-dark-text.webp" />;
+};

src/sections/AWS-Diagram/diagram.js

@@ -9,7 +9,8 @@ import InfrastructureLight from "../../assets/images/AWS-Diagram/infrastructure-
 import RelatedPicks from "../../components/RelatedPicks";
 import GCPDiagramDark from "../GCP-Diagram/images/gcp-diagram-dark.svg";
 import GCPDiagramLight from "../GCP-Diagram/images/gcp-diagram-light.svg";
-
+import KubernetesDark from "../Kubernetes-Diagram/images/kubernetes.svg";
+import KubernetesLight from "../Kubernetes-Diagram/images/kubernetes-light.svg";
 const DiagramWrapper = styled.div`
   min-height: fit-content;
   border-width: 2px 2px 2px 2px;
@@ -137,6 +138,12 @@ const Aws = () => {
       title: "GCP architecture diagram",
       redirectLink: "/cloud-native-management/generate-gcp-architecture-diagram",
       imgSrc: isDark ? GCPDiagramDark : GCPDiagramLight,
+    },
+    {
+      id: 2,
+      title: "Kubernetes architecture diagram",
+      redirectLink: "/cloud-native-management/generate-kubernetes-architecture-diagram",
+      imgSrc: isDark ? KubernetesDark : KubernetesLight,
     }
   ];
 

src/sections/GCP-Diagram/diagram.js

@@ -9,6 +9,8 @@ import GCPCatalogLight from "./images/gcp-catalog-light.svg";
 import RelatedPicks from "../../components/RelatedPicks";
 import AWSDiagramDark from "../Home/FeaturesContainer/images/aws.svg";
 import AWSDiagramLight from "../Home/FeaturesContainer/images/aws-light.svg";
+import KubernetesDark from "../Kubernetes-Diagram/images/kubernetes.svg";
+import KubernetesLight from "../Kubernetes-Diagram/images/kubernetes-light.svg";
 const DiagramWrapper = styled.div`
   min-height: fit-content;
   border-width: 2px 2px 2px 2px;
@@ -136,6 +138,12 @@ const Gcp = () => {
       title: "AWS architecture diagram",
       redirectLink: "/cloud-native-management/generate-aws-architecture-diagram",
       imgSrc: isDark ? AWSDiagramDark : AWSDiagramLight,
+    },
+    {
+      id: 2,
+      title: "Kubernetes architecture diagram",
+      redirectLink: "/cloud-native-management/generate-kubernetes-architecture-diagram",
+      imgSrc: isDark ? KubernetesDark : KubernetesLight,
     }
   ];
   return (