Skip to content

Commit ab7210e

Browse files
FaheemOnHubFaheemOnHub
authored
Merge pull request #254 from FaheemOnHub/add/vendorNeutral
fix: make play.meshery.io vendor neutral
2 parents d5bc7a8 + 9535aca commit ab7210e

File tree

4 files changed

+293
-64
lines changed

4 files changed

+293
-64
lines changed

‎site/src/App.js‎

Lines changed: 60 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,22 @@
1-
import { Main } from './App.style.js';
1+
import { Main } from "./App.style.js";
22
import mesheryPlayground from "./assets/images/meshery-playground-kanvas.png";
33
import Footer from "./components/Footer";
44
import { ThemeProvider } from "styled-components";
5-
import { darkTheme, GlobalStyle, lightTheme } from './index.style.js';
5+
import { darkTheme, GlobalStyle, lightTheme } from "./index.style.js";
66
import { useDarkMode } from "./components/useDarkMode";
7-
import ReactPlayer from 'react-player/youtube'
7+
import ReactPlayer from "react-player/youtube";
88
import Navigation from "./components/Navigation";
9-
import DiscussCallout from './components/Discuss-Callout';
9+
import DiscussCallout from "./components/Discuss-Callout";
1010
import { useState } from "react";
11-
import ArrowIcon from './ArrowIcon.js';
1211
import Modal from "react-modal";
13-
import Faq from './components/Faq/index.js';
14-
import Button from './reusecore/Button/index.js';
15-
import ResourcesSection from './Resources.js';
12+
import Faq from "./components/Faq/index.js";
13+
import Button from "./reusecore/Button/index.js";
14+
import ResourcesSection from "./Resources.js";
15+
import VendorSelection from "./components/VendorSelection";
1616

1717
const App = () => {
18-
19-
2018
const [theme, toggleTheme] = useDarkMode();
21-
const themeMode = theme === 'light' ? lightTheme : darkTheme;
19+
const themeMode = theme === "light" ? lightTheme : darkTheme;
2220
const [showSignUpButton] = useState(true);
2321

2422
const [modalIsOpen, setIsOpen] = useState(false);
@@ -34,54 +32,53 @@ const App = () => {
3432
<>
3533
<ThemeProvider theme={themeMode}>
3634
<GlobalStyle />
37-
<Navigation theme={theme} toggleTheme={toggleTheme} showSignUpButton={showSignUpButton} />
35+
<Navigation
36+
theme={theme}
37+
toggleTheme={toggleTheme}
38+
showSignUpButton={showSignUpButton}
39+
/>
3840
<Main>
3941
<section className="hero">
40-
<h1>
41-
The Cloud Native Playground
42-
</h1>
42+
<h1>A Cloud Native Playground</h1>
4343
<p className="desc-text">
44-
Explore the Cloud Native Computing Foundation's graduated, incubation, and sandbox projects as well as many other popular open source projects. Use Meshery Playground to explore a new way of DevOps - visual and collaborative configuration management for your infrastructure.
44+
Explore the Cloud Native Computing Foundation's graduated,
45+
incubation, and sandbox projects as well as many other popular
46+
open source projects. Use a Meshery Playground to explore a new
47+
way of DevOps - visual and collaborative configuration management
48+
for your infrastructure.
4549
</p>
4650
</section>
4751
<section className="playground-btn">
4852
<div>
49-
<Button className="continue-btn open-playground-btn" style={{ background: "rgb(235, 192, 23)" }} role="button" onClick={openModal}>
50-
Open Playground
51-
</Button>
52-
<Modal
53-
isOpen={modalIsOpen}
54-
onRequestClose={closeModal}
55-
className="Modal"
56-
overlayClassName="Overlay"
57-
ariaHideApp={false}
58-
contentLabel="Content Form"
59-
>
6053
<Button
61-
className="close-modal-btn"
62-
onClick={closeModal}
54+
className="continue-btn open-playground-btn"
55+
style={{ background: "rgb(235, 192, 23)" }}
56+
role="button"
57+
onClick={openModal}
6358
>
64-
&times;
59+
Choose Your Playground
6560
</Button>
66-
<div class="content">
67-
<Faq category={["Meshery Playground"]}/>
68-
<div className="continue-btn-container"
61+
<Modal
62+
isOpen={modalIsOpen}
63+
onRequestClose={closeModal}
64+
className="Modal"
65+
overlayClassName="Overlay"
66+
ariaHideApp={false}
67+
contentLabel="Playground Selection"
6968
>
70-
<a href="https://playground.meshery.io">
71-
<Button className="continue-btn" style={{ background: "rgb(235, 192, 23)" }}>
72-
<ArrowIcon />
73-
Continue
74-
</Button>
75-
</a>
69+
<Button className="close-modal-btn" onClick={closeModal}>
70+
&times;
71+
</Button>
72+
<div className="content">
73+
<Faq
74+
category={[
75+
"Cloud Native Playgrounds",
76+
"Meshery Playground",
77+
]}
78+
/>
79+
<VendorSelection />
7680
</div>
77-
<p style={{
78-
textAlign: "center",
79-
fontSize: "1rem",
80-
color: `${props => props.theme.text}`,
81-
marginTop: "0.5rem"
82-
}}>
83-
On clicking the continue button you will be redirected to Meshery Playground.</p></div>
84-
</Modal>
81+
</Modal>
8582
</div>
8683
</section>
8784
<section className="video">
@@ -98,26 +95,28 @@ const App = () => {
9895
<section>
9996
<ResourcesSection />
10097
</section>
101-
98+
10299
<div className="community-discuss-wrapper">
103-
<section className="join-community">
104-
<div>
105-
<h1>Join the community!</h1>
106-
<p>Engage in the Meshery community by joining us on Slack</p>
107-
<Button url="https://slack.meshery.io/" >Join Our Open Source Community</Button>
108-
</div>
109-
</section>
110-
<section>
111-
<div className='desc-callout'>
112-
<DiscussCallout />
113-
</div>
114-
</section>
100+
<section className="join-community">
101+
<div>
102+
<h1>Join the community!</h1>
103+
<p>Engage in the Meshery community by joining us on Slack</p>
104+
<Button url="https://slack.meshery.io/">
105+
Join Our Open Source Community
106+
</Button>
107+
</div>
108+
</section>
109+
<section>
110+
<div className="desc-callout">
111+
<DiscussCallout />
112+
</div>
113+
</section>
115114
</div>
116115
</Main>
117116
<Footer />
118117
</ThemeProvider>
119118
</>
120119
);
121-
}
120+
};
122121

123122
export default App;

‎site/src/components/Faq/faqSection.style.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import styled from 'styled-components';
1+
import styled from "styled-components";
22

33
const FaqSectionWrapper = styled.section`
44
margin: 0.5rem auto;
@@ -17,10 +17,9 @@ const FaqSectionWrapper = styled.section`
1717
border-color: transparent;
1818
}
1919
.reusecore__accordion {
20-
margin-bottom: 5rem;
2120
overflow: scroll;
2221
&::-webkit-scrollbar {
23-
display: none;
22+
display: none;
2423
}
2524
}
2625
.accordion__item {

‎site/src/components/VendorSelection/index.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import Button from "../../reusecore/Button";
2+
import ArrowIcon from "../../ArrowIcon";
3+
import {
4+
VendorSelectionWrapper,
5+
VendorCard,
6+
AddYourOwnCard,
7+
} from "./vendorSelection.style";
8+
9+
const VendorSelection = () => {
10+
const vendors = [
11+
{
12+
name: "Layer5",
13+
description: "Meshery Playground provided by Layer5",
14+
url: "https://playground.meshery.io",
15+
logo: null, // We can add logos later
16+
available: true,
17+
},
18+
];
19+
20+
return (
21+
<VendorSelectionWrapper>
22+
<h2>Choose Your Playground Vendor</h2>
23+
<div className="vendors-grid">
24+
{vendors.map((vendor, index) => (
25+
<VendorCard key={vendor.name} available={vendor.available}>
26+
<div className="vendor-info">
27+
<h3>{vendor.name}</h3>
28+
<p>{vendor.description}</p>
29+
</div>
30+
<div className="vendor-action">
31+
{vendor.available ? (
32+
<a href={vendor.url} target="_blank" rel="noopener noreferrer">
33+
<Button
34+
className="vendor-btn"
35+
style={{ background: "rgb(235, 192, 23)" }}
36+
>
37+
<ArrowIcon />
38+
Launch Playground
39+
</Button>
40+
</a>
41+
) : (
42+
<Button className="vendor-btn disabled" disabled>
43+
Coming Soon
44+
</Button>
45+
)}
46+
</div>
47+
</VendorCard>
48+
))}
49+
50+
<AddYourOwnCard>
51+
<div className="add-your-own-content">
52+
<h3>Custom</h3>
53+
<p>Bring your own vendor-hosted Meshery Playground</p>
54+
<a
55+
href="https://docs.meshery.io/extensibility/providers"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
>
59+
<Button className="add-btn">+ Add Your Own Vendor</Button>
60+
</a>
61+
</div>
62+
</AddYourOwnCard>
63+
</div>
64+
</VendorSelectionWrapper>
65+
);
66+
};
67+
68+
export default VendorSelection;

0 commit comments

Comments
 (0)