init

Signed-off-by: GitHub <[email protected]>
meshery · Oct 17, 2024 · 62b9b2a · 62b9b2a
1 parent b9b3feb
commit 62b9b2a
Show file tree

Hide file tree

Showing 8 changed files with 4,188 additions and 1,159 deletions.
diff --git a/site/package-lock.json b/site/package-lock.json
diff --git a/site/package.json b/site/package.json
@@ -20,7 +20,8 @@
     "react-scripts": "5.0.1",
     "remark-gfm": "^4.0.0",
     "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "react-modal": "^3.16.1"
   },
   "devDependencies": {
     "async": ">=2.6.4",

diff --git a/site/src/ArrowIcon.js b/site/src/ArrowIcon.js
@@ -0,0 +1,8 @@
+import React from "react"
+const ArrowIcon = () => {
+
+return (
+    <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="icon-left" height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.5 4a.5.5 0 01.5-.5h5a.5.5 0 01.5.5v5a.5.5 0 01-1 0V4.5H7a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M12.354 3.646a.5.5 0 010 .708l-9 9a.5.5 0 01-.708-.708l9-9a.5.5 0 01.708 0z" clip-rule="evenodd"></path></svg>
+)
+}
+export default ArrowIcon;
diff --git a/site/src/assets/data/faq/index.js b/site/src/assets/data/faq/index.js
@@ -42,14 +42,14 @@ const data = {
 - In other words, only Kanvas Visualizer is reset. All of your work in Meshery UI and Kanvas Designer will remain in your user account.
       `,
     },
-    {
-      question: "Is Meshery open source?",
-      category: "Meshery Playground",
-      answer: `
-- Yes, Meshery is a Cloud Native Computing Foundation (CNCF) project and is licensed under Apache v2.
-- As the extensible cloud native manager, Meshery is a pluggable platform, offering multiple extension points within which users and partners (ISVs) can customize and extend Meshery's functionality under the same or different license(s), offering commercial and non-commericial extensions.
-      `,
-    },
+//     {
+//       question: "Is Meshery open source?",
+//       category: "Meshery Playground",
+//       answer: `
+// - Yes, Meshery is a Cloud Native Computing Foundation (CNCF) project and is licensed under Apache v2.
+// - As the extensible cloud native manager, Meshery is a pluggable platform, offering multiple extension points within which users and partners (ISVs) can customize and extend Meshery's functionality under the same or different license(s), offering commercial and non-commericial extensions.
+//       `,
+//     },
     // {
     //     question: "What is the difference between the Cloud Native Playground and Kanvas?",
     //     category: "Meshery Playground",
@@ -66,16 +66,16 @@ const data = {
 - Yes, all of the designs that you have created in the Meshery Playground are saved to your user account and will be available to you each time that you return to the Playground. The designs will also be available in your other Meshery deployments.
       `,
     },
-    {
-      question: "Can I deploy the Meshery on-premises?",
-      category: "Meshery Playground",
-      answer: `
-- Yes, Meshery can be deployed on-premises with a single command to download, install, and run your own instance of Meshery in your environment.
-- See all supported platforms to deploy your own Meshery instance at https://meshery.io
-      `,
-      link: "https://meshery.io",
-      linktext: "Get Started with Meshery",
-    },
+//     {
+//       question: "Can I deploy the Meshery on-premises?",
+//       category: "Meshery Playground",
+//       answer: `
+// - Yes, Meshery can be deployed on-premises with a single command to download, install, and run your own instance of Meshery in your environment.
+// - See all supported platforms to deploy your own Meshery instance at https://meshery.io
+//       `,
+//       link: "https://meshery.io",
+//       linktext: "Get Started with Meshery",
+//     },
     {
       question:
         "When I add my Kubernetes cluster to the Meshery Playground will it be available to all other users? Can other people access my cluster?",

diff --git a/site/src/components/Faq/faqSection.style.js b/site/src/components/Faq/faqSection.style.js
@@ -1,20 +1,27 @@
 import styled from 'styled-components';
 
 const FaqSectionWrapper = styled.section`
-  margin: 2.5rem auto;
+  margin: 0.5rem auto;
   position: relative;
-  overflow: hidden;
+  overflow: scroll;
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   .category_name {
-    margin: 2rem 0 0.5rem;
+    margin: 0.5rem 0 0.5rem;
     font-style: italic;
-    text-transform: capitalize;
+    // text-transform: capitalize;
   }
   .accordion__item + .accordion__item {
     border-color: transparent;
   }
   .reusecore__accordion {
     margin-bottom: 5rem;
+    overflow: scroll;
+    &::-webkit-scrollbar {
+        display: none;
+    }
   }
   .accordion__item {
     .accordion__header {

diff --git a/site/src/components/Faq/index.js b/site/src/components/Faq/index.js
@@ -50,9 +50,9 @@ const Faq = (props) => {
           <>
             <h2
               className="category_name"
-              style={{ paddingBottom: 25, textAlign: "center" }}
+              style={{ paddingBottom: 25, textAlign: "center", fontSize: "1.5rem" }}
             >
-              {key}
+              You are about to access Meshery Playground
             </h2>
             {faqs[key].map((faq, index) => (
               <AccordionItem key={index}>

diff --git a/site/src/components/Navigation/index.js b/site/src/components/Navigation/index.js
@@ -8,6 +8,11 @@ import DefaultAvatar from "./DefaultAvatar";
 import CloudIcon from "./CloudIcon";
 import KanvasIcon from "./KanvasIcon";
 import LogoutIcon from "./LogoutIcon";
+import ArrowIcon from "../../ArrowIcon";
+import Modal from "react-modal";
+import Faq from "../Faq";
+import Button from "../../reusecore/Button";
+
 function Navigation({ theme, toggleTheme, showSignUpButton }) {
   const [userData, setUserData] = useState(null);
   const [openNav, setOpenNav] = useState(false);
@@ -40,7 +45,7 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
       "https://meshery.layer5.io/api/identity/users/profile";
     const fetchData = async () => {
       try {
-        const token = getCookieValue("token");
+        const token = getCookieValue("provider_token");
         const response = await axios.get(CLOUD_USER_API, {
           headers: {
             Authorization: `Bearer ${token}`,
@@ -63,7 +68,17 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
   const handleNavOpen = () => {
     setOpenNav(!openNav);
   };
+  const [modalIsOpen, setIsOpen] = useState(false);
+
+  const openModal = () => {
+    console.log("Opening modal"); // Debugging line
+    setIsOpen(true);
+  };
 
+  const closeModal = () => {
+    console.log("Closing modal"); // Debugging line
+    setIsOpen(false);
+  };
   return (
     <Header>
       <nav className={scroll ? "scrolled" : ""}>
@@ -161,9 +176,55 @@ setScroll((window.scrollY || window.pageYOffset) > 50)
           <div className="btn-container">
             <Toggle theme={theme} toggleTheme={toggleTheme} />
             {showSignUpButton && !userData && (
-              <a href="#signup-form" className="signup-btn" role="button">
-                Sign Up
+              <div>
+              <a href="#open-playground" className="signup-btn" role="button"  onClick={openModal}>
+                Try it now
               </a>
+              <Modal
+              isOpen={modalIsOpen}
+              onRequestClose={closeModal}
+              className="Modal"
+              overlayClassName="Overlay"
+              ariaHideApp={false}
+              contentLabel="Content Form"
+            >
+              <button
+                className="close-modal-btn"
+                onClick={closeModal}
+              >
+                X
+              </button>
+              {/* <h2 className="modal-heading">
+                Meshery Playground FAQ
+              </h2> */}
+              {/* <div className="content-form">
+                      <ContentForm />
+                    </div> */}
+              <div class="content">
+              <Faq category={["Meshery Playground"]}/>
+              <div className="btn-container" style={{
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center",
+                marginTop: "-2.6rem"
+
+              }}>
+              <a id="open-playground" href="https://playground.meshery.io">
+              <Button style={{ marginTop: "-0.5rem", display: "flex" }}className="submit-btn">
+                <ArrowIcon />
+                Continue
+              </Button>
+                </a>
+                </div>
+                <p style={{
+                    textAlign: "center",
+                    fontSize: "16px",
+                    color: `${props => props.theme.text}`,
+                    marginTop: ".5rem"
+                }}>
+                  Next: you'll be redirected to playground.meshery.io</p></div>
+            </Modal>
+            </div>
             )}
           </div>
         </div>

diff --git a/site/src/index.style.js b/site/src/index.style.js
@@ -1,6 +1,47 @@
 import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
+  div.btn-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+.Modal {
+    position: fixed;
+    inset: 50% auto auto 50%;
+    border: 1px solid rgb(204, 204, 204);
+    background: ${(props) => props.theme.body};
+    border-radius: 0.5rem;
+    outline: none;
+    padding: 20px;
+    margin-right: -50%;
+    transform: translate(-50%, -50%);
+    max-width: 50rem;
+    max-height: 80vh;
+    overflow-y: auto;
+    &::-webkit-scrollbar {
+        display: none;
+    }
+    .close-modal-btn {
+      min-width: 2rem;
+      height: 2rem;
+      padding: 0.25rem;
+      position: fixed;
+      right: 0.5rem;
+      top: 0.75rem;
+      svg {
+        font-size: 2rem;
+        width: 1.75rem;
+      }
+    }
+  }
+  .Overlay {
+    position: fixed;
+    inset: 0px;
+    background-color: rgba(0, 0, 0, 0.75);
+    z-index: 9999;
+    overflow-y: auto;
+  }
 
   ::selection {
     background: #3C494F;
@@ -41,7 +82,28 @@ export const GlobalStyle = createGlobalStyle`
         font-size: 1.75rem;
       }
   }
-
+      .submit-btn {
+      z-index: 0;
+				font-family: inherit;
+				margin: 1.5rem auto 0rem auto;
+				padding: 1rem 1.5rem;
+				font-size: 1.35rem;
+				display: block;
+				border: 0;
+				border-radius: 0.5rem;
+				background: #00B39F;
+				color: #FFF;
+				transition: 0.2s ease-in-out;
+				&:hover {
+					cursor: pointer;
+					background-color: #00D3A9;
+					color: #FFF;
+					box-shadow: 0.5px 0.5px 10px #00B39F;
+				}
+				&:active {
+					box-shadow: none;
+				}
+			}
   h3 {
       font-size: 1.75rem;
       font-weight: 500;