Merge branch 'master' into souvikinator/recognition-program-section-c…

…ommunity-page

gatsby-node.js

@@ -732,7 +732,6 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   });
 
   const components = componentsData.map((component) => component.src.replace("/", ""));
-
   const createComponentPages = (createPage, components) => {
     const pageTypes = [
       { suffix: "", file: "index.js" },

src/collections/blog/2024/11-05-what-is-the-kanvas-catalog/post.mdx

@@ -18,6 +18,17 @@ resource: true
 import { BlogWrapper } from "../../Blog.style.js";
 import { Link } from "gatsby";
 
+import quickActionsPNG from "./quick-actions-designs.png";
+import importDesignButtonPNG from "./import-button.png";
+import importDesignPanelPNG from "./import-designs-panel.png";
+import renderedDesignPNG from "./rendered-design.png";
+import designPannelOpener from "./designs-panel-opener.png";
+import designerDockPNG from "./designer-dock.png";
+import catalogGIF from "./catalog.gif";
+import publishToCatalogGIF from "./publish-to-catalog.gif";
+import importGIF from "./import-design-gif.gif";
+import getStartedWithDesignerGIF from "./start-from-scratch.gif";
+
 <BlogWrapper>
 
 ### What is the Kanvas Catalog?
@@ -41,8 +52,42 @@ import { Link } from "gatsby";
 - Collaboration: Share your own designs and contribute to the growing collection of patterns.
 
 ### How can you contribute to the Catalog?
-
+
+You can contribute to the Catalog by creating high-quality starter templates and publishing designs for the community to use in various ways. You can also climb the leaderboard by having your designs cloned, downloaded, or viewed the most. Follow the instructions below to get started with your designs.
+
+#### Create or Import a Design
+Begin by creating a new design from scratch, using existing design patterns and templates from catalog:
+
+**From Scratch**:
+
+- Open the Designs panel, Select and arrange components from the Designer Dock on the Kanvas, and customize with connections, labels, and properties.
+  <img src={getStartedWithDesignerGIF} />
+
+**From a Template**:
+
+- Start from a pre-built template or clone an existing design from the Catalog. This allows you to build on established designs for a quicker start.
+  <img src={catalogGIF} />
+
+**Import a Design**: 
 
 
+-   Access the Kanvas Designer and select the "Import" button in the left Designs panel. Import your own designs from local filesystem or from a remote URL directly into the Catalog. Upload a file or provide a URL for Docker Compose, Helm Charts, Meshery Designs or Kubernetes Manifests. Choose to either import as new or merge into current design that you have open in Kanvas.
+    <img src={importGIF} />
+
+Kanvas will convert these into a usable design based on their configurations.
+
+<img src={renderedDesignPNG} />
+
+
+#### Publish a Design
+Make your designs accessible to others by publishing them in the Catalog:
+
+- In the designs panel, locate your design and hover over it to access quick actions. Select the info button (marked with an "i") and add any necessary details for the review process, such as relevant technologies, descriptions, and considerations and click Publish button. Once approved by the Maintainers, your design becomes available to the broader community in Kanvas catalog.
+<img src={publishToCatalogGIF} />
+
+
+#### Share your designs
+Share your designs with your team members and effortlessly collaborate on designing and operating multi-cloud and Kubernetes native infrastrcutre with a seamless, built-in review mechanism.
 
 </BlogWrapper>
+

src/collections/integrations/linkerd/index.mdx

@@ -4,10 +4,10 @@ subtitle: Collaborative and visual infrastructure as design for Linkerd
 integrationIcon: icons/color/linkerd-color.svg
 darkModeIntegrationIcon: icons/white/linkerd-white.svg
 docURL: https://docs.meshery.io/extensibility/adapters/linkerd
-description: 
+description: git://github.com/meshery/meshery-linkerd/master/templates/meshmodel/components/stable-2.9.5
 category: Cloud Native Network
 subcategory: Service Mesh
-registrant: meshery
+registrant: GitHub
 components: []
 featureList: [
   "Visually configure and operate Linkerd with real-time topology",

src/collections/members/vivek-vishal/index.mdx

@@ -8,7 +8,7 @@ linkedin: vishalvivekm
 location: Punjab, India
 layer5: 878488d5-c394-4b04-91b4-fd2f9e67ffaf 
 bio: Vivek Vishal is a passionate CS undergrad from India who loves to explore new technologies and contribute to Open-Source projects. With proficiency in various programming languages, including Java, C++, C, Bash, and JavaScript, he possesses a profound understanding of SQL, Git, and Command-line tools. Vivek has a strong inclination towards Maths and a keen interest in Machine Learning, constantly expanding his knowledge and skillset. As an active member of the Layer5 community, he eagerly participates in community events and discussions, both to learn and to assist others in getting started with Layer5 projects or other Open-Source endeavors. Don't hesitate to connect with him on his socials below
-status: Inactive
+status: Active
 badges:
  - community
  - docs

src/components/CommonForm/commonForm.style.js

@@ -33,9 +33,10 @@ const CommonFormWrapper = styled.section`
 }
 
 .form-body{
-box-shadow: 0px 5px 5px 2px ${props => props.theme.primaryLightColor};
+box-shadow: 0px -2px 5px 2px ${props => props.theme.primaryLightColor};
 margin: 1rem;
 
+
 .form-title {
     padding: 1rem;
     text-align: center;
@@ -45,6 +46,7 @@ margin: 1rem;
 
 .form{
     font-size: .9rem;
+    width: fit-content !important;
     margin: 0 1rem 1rem;
     padding: 1rem;
     

src/components/CommonForm/index.js

@@ -7,7 +7,7 @@ import { Container } from "../../reusecore/Layout";
 import layer5_img from "../../assets/images/layer5/layer5-only/svg/layer5-white-no-trim.svg";
 
 
-const CommonForm = ({ form, title, submit_title, submit_body }) => {
+const CommonForm = ({ form, title, submit_title, submit_body, submit_button_title }) => {
 
   const [stepNumber, setStepNumber] = useState(0);
   const [memberFormOne, setMemberFormOne] = useState({});
@@ -84,7 +84,11 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
       {
         stepNumber === 0 &&
   <div className="form-body">
-    <h2 className="form-title">{title}</h2>
+    { form !== "contact" && (
+      <>
+        <h2 className="form-title">{title}</h2>
+      </>
+    )}
     <Formik
       initialValues={{
         firstname: firstname,
@@ -186,6 +190,27 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
             <option className="options" value="Other">Other</option>
           </Field>
         </div>
+        {form === "contact" && (
+          <>
+            <label htmlFor="subject" className="form-name">
+              Subject <span className="required-sign">*</span>
+            </label>
+            <Field type="text" required className="text-field" id="subject" name="subject" />
+            <label htmlFor="message" className="form-name">
+            Message <span className="required-sign">*</span>
+            </label>
+            <Field as="textarea" required rows="8" type="text" className="text-field" id="message" name="message" />
+            {/* <label>
+              <Field
+                type="checkbox"
+                name="subscribed"
+                className="form-check"
+              />
+              <span>Subscribe to our newsletter</span>
+            </label> */}
+            <div>By providing my contact information, I authorize Layer5 to contact me with communications about Layer5's products and services.</div>
+          </>
+        )}
         {form == "open-source-pricing" && (
           <>
             <label htmlFor="projectname" className="form-name">
@@ -264,7 +289,7 @@ const CommonForm = ({ form, title, submit_title, submit_body }) => {
         )}
 
 
-        <Button $secondary className="btn" title="Submit" />
+        <Button $secondary className="btn" title={submit_button_title || "Submit"} />
       </Form>
     </Formik>
   </div>
@@ -291,4 +316,4 @@ const ThankYou = forwardRef(({ title, description }, ref) => {
 });
 
 
-export default CommonForm;
+export default CommonForm;

src/components/PlanCard/index.js

@@ -1,10 +1,18 @@
-import React from "react";
+import React, { useState } from "react";
 import Button from "../../reusecore/Button";
 import { Col, Row, Container } from "../../reusecore/Layout";
 import PlanCardWrapper from "./planCard.style";
 import FeatureDetails from "./collapsible-details";
+import Modal from "react-modal";
+import CommonForm from "../CommonForm";
 
 const PlanCard = ({ planData , isYearly }) => {
+
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  const openModal = () => setModalIsOpen(true);
+  const closeModal = () => setModalIsOpen(false);
+
   if (!planData || !Array.isArray(planData) || planData.length === 0) {
     return <div>No plan data available</div>;
   }
@@ -76,9 +84,9 @@ const PlanCard = ({ planData , isYearly }) => {
                       ? "price-button-disabled"
                       : "price-button-link"
                   }
-                  $url={x.button[1]}
+                  onClick={x.tier === "Enterprise" ? openModal : undefined}
                 >
-                  {x.button[0]}
+                  {x.tier === "Enterprise" ? "Contact Sales" : x.button[0]}
                 </Button>
 
                 <h6>{x.byline2}</h6>
@@ -101,6 +109,58 @@ const PlanCard = ({ planData , isYearly }) => {
           ))}
         </Row>
       </Container>
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        className="Modal"
+        overlayClassName="Overlay"
+        ariaHideApp={false}
+        contentLabel="Enterprise Inquiry Form"
+        style={{
+          content: {
+            maxHeight: "90vh",
+            overflow: "hidden",
+            display: "flex",
+            flexDirection: "column",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            },
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          },
+          overlay: {
+            overflow: "auto",
+            "&::-webkit-scrollbar": {
+              display: "none"
+            },
+            scrollbarWidth: "none",
+            msOverflowStyle: "none"
+          }
+        }}
+      >
+        <Button $secondary className="close-modal-btn" onClick={closeModal}>
+    X
+        </Button>
+        <h2 className="modal-heading">Contact sales</h2>
+        <div style={{
+          flex: 1,
+          overflow: "auto",
+          scrollbarWidth: "none",
+          msOverflowStyle: "none",
+          "&::-webkit-scrollbar": {
+            display: "none"
+          }
+        }}>
+          <CommonForm
+            title="Contact sales"
+            form="contact"
+            account_desc=""
+            submit_title="Thanks for contacting us!"
+            submit_body="We'll get back to you as soon as we can."
+            submit_button_title="Contact sales"
+          />
+        </div>
+      </Modal>
     </PlanCardWrapper>
   );
 };

src/components/SistentNavigation/index.js

@@ -21,6 +21,11 @@ const TOC = () => {
     location.pathname.includes("/components")
   );
 
+  // Sorting the array of components by name
+  const sortedComponentArray = [...componentsData].sort((a, b) =>
+    a.name.localeCompare(b.name)
+  );
+
   return (
     <TOCWrapper>
       <div className="go-back">
@@ -129,7 +134,7 @@ const TOC = () => {
               {expandComponent && (
                 <div className="components-sublinks">
                   <li>
-                    {componentsData.map((component) => (
+                    {sortedComponentArray.map((component) => (
                       <li key={component.id}>
                         <Link
                           to={component.url}

src/sections/Careers/Careers-Internship-grid/InternshipPage.style.js

@@ -28,9 +28,10 @@ p{
   }
 
   .opportunity-col {
-    flex: 0 0 25%;
+    flex: 0 0 33.333333%;
     max-width: 100%;
     margin: 1rem 0;
+    padding: 0 1rem;
   }
   @media only screen and (max-width: 1200px) {
     .opportunity-col {
@@ -116,7 +117,7 @@ p{
 
   .full_time {
     .opportunity-card {
-      height: 12rem;
+      height: 15rem;
     }
   }
 
@@ -179,7 +180,10 @@ p{
   }
 
   .oppurtunities_row {
+    display: flex;
+    flex-wrap: wrap;
     justify-content: space-evenly;
+    margin: 0 -1rem;
   }
 `;
 

src/sections/Careers/Careers-Programs-grid/ProgramGrid.style.js

@@ -79,4 +79,46 @@ export const ProgramsPageWrapper = styled.div`
             flex: 0 0 100%;
         }
     }
+
+    .opensource-section{
+        margin-top: 6rem;
+        margin-bottom: 6rem;
+        text-align: center;
+        background: #00B39F;
+        color: white;
+        width: 100vw;
+        position: relative;
+        left: 50%;
+        right: 50%;
+        margin-left: -50vw;
+        margin-right: -50vw;
+    }
+    .opensource-section-text{
+        padding-top: 4rem;
+    }
+    .opensource-section-text > h1{
+        margin-bottom: 1rem;
+        color: white;
+    }
+    .opensource-section-text > p{
+        max-width: 60rem;
+        margin: auto;
+        color: white;
+
+    }
+    .opensource-section-img{
+        margin-top: -8rem;
+        position: relative;
+        top: 10rem;
+    }
+    .opensource-section-img img{
+        height: 30rem;
+        box-shadow: 0px 8px 20px -10px black;
+    }
+    @media only screen and (max-width:600px){
+        .opensource-section-img img{
+            height: 18rem;
+        }
+    }
+
 `;