Skip to content

Commit eaf771e

Browse files
leecalcoteleecalcote
committed
Enhance FAQ section: add subcategories for better organization and update styles
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 0b45d03 commit eaf771e

3 files changed

Lines changed: 190 additions & 33 deletions

File tree

‎src/assets/data/faq/index.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,109 @@ const data = {
66
// LAYER5
77
//
88

9+
{
10+
question:
11+
"Why do I need to authenticate my social account to use Meshery?",
12+
category: "Meshery",
13+
subcategory: "Authentication",
14+
answer: [
15+
"Create your account - avoid having to reconfigure Meshery each time you deploy it. When you use a social account to authenticate to Meshery, your environment configuration persists from session to session. Meshery sources from Mixer Prometheus adapter and uses Prometheus node-exporter.",
16+
"Rank your deployment - results of performance tests are anonymously collected using the Cloud Native Performance, so that Meshery may provide the public service of ranking the speed of your deployment against that of the rest of the world's users.",
17+
],
18+
link: "",
19+
linktext: "",
20+
},
21+
{
22+
question: "Why use Meshery?",
23+
category: "Meshery",
24+
subcategory: "General",
25+
answer: [
26+
"Meshery is an open source, vendor neutral project that facilitates testing across meshes.",
27+
"Other performance benchmark tools are not packaged into a mesh testing utility, but are only load-generators unto their own.",
28+
],
29+
link: "/projects/cloud-native-performance",
30+
linktext: "Cloud Native Performance",
31+
},
32+
{
33+
question:
34+
"I have already operating Kubernetes Clusters. Should I use Meshery?",
35+
category: "Meshery",
36+
subcategory: "General",
37+
answer: [
38+
"Yes, as a management plane, Meshery provides value in a number of ways post-adoption Kubernetes. For example, Meshery analyzes your deployments in evaluation of cloud native best practices and patterns, highlighting where you might be deviating.","Meshery performs deep discovery of your environment and currently running applications and infrastructure.",
39+
],
40+
link: "/cloud-native-management/meshery",
41+
linktext: "Meshery",
42+
},
43+
{
44+
question: "Is Meshery open source?",
45+
category: "Meshery",
46+
subcategory: "General",
47+
answer: [
48+
"Yes, Meshery is a Cloud Native Computing Foundation (CNCF) project and is licensed under Apache v2.",
49+
"As the cloud native management plane, Meshery is an extensible platform, offering multiple extension points within which users and partners can customize and extend Meshery's functionality.",
50+
],
51+
},
52+
{
53+
question: "Can I deploy Meshery / Kanvas on-premises?",
54+
category: "Meshery",
55+
subcategory: "Deployment",
56+
answer: [
57+
"Yes, Meshery, Kanvas, and Layer5 Cloud can be deployed on-premises in minutes using Helm charts.",
58+
"With a small number of manual steps, air-gapped deployments to run Meshery without internet access is also supported.",
59+
],
60+
},
61+
{
62+
question: "Where is Layer5 Cloud hosted; where is my data stored?",
63+
category: "Meshery",
64+
subcategory: "Deployment",
65+
answer: [
66+
"Layer5 Cloud is hosted on AWS and Equinix data centers in US-based regions. If you need to know more about the data storage and compliance, please reach out to us at hello@layer5.io",
67+
],
68+
},
69+
{
70+
question: "Is it possible to migrate from managed Layer5 Cloud to self-hosted Layer5 Cloud on-premises?",
71+
category: "Meshery",
72+
subcategory: "Deployment",
73+
answer: [
74+
"Yes, Meshery, Kanvas, and Layer5 Cloud can be deployed on-premises in minutes using Helm charts.",
75+
"A one-time export of your data can be requested as you transition from managed Layer5 Cloud to self-hosted Layer5 Cloud.",
76+
"With a small number of manual steps, air-gapped deployments to run Meshery without internet access is also supported.",
77+
78+
],
79+
},
80+
{
81+
question: `What is the difference between Kanvas and the Cloud Native Playground?`,
82+
category: "Meshery",
83+
subcategory: "Kanvas",
84+
answer: [
85+
"The Cloud Native Playground (aka Meshery Playground) is a managed instance of Meshery that offers a sandbox environment in which half of Kanvas<sup>BETA</sup>&nbsp;functionality is enabled (Designer mode) and the other half of Kanvas<sup>BETA</sup> functionality is disabled (Visualizer mode).",
86+
"The sandbox environment is not connected to an active Kuberentes cluster, and as such, specific actions within Kanvas Designer are also disabled. Meshery and Kanvas are feature-rich, sophisticated management applications for cloud native infrastructure. To access their full set of capabilities, simply deploy your own copy of Meshery into the environment of your choosing.",
87+
],
88+
},
89+
{
90+
question: "Are designs that I create in the Meshery Playground saved or will I look any work that I do in the playground?",
91+
category: "Meshery",
92+
subcategory: "Kanvas",
93+
answer: [
94+
"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.",
95+
],
96+
},
97+
{
98+
question: "Can I deploy Meshery and its integrations on-premises?",
99+
category: "Meshery",
100+
subcategory: "Deployment",
101+
link: "https://docs.meshery.io/installation/quick-start",
102+
linktext: "Quick Start Guide",
103+
answer: [
104+
"Yes, Meshery can be deployed on-premises with a single command to download, install, and run your own instance of Meshery in your environment."
105+
]
106+
},
107+
108+
//
109+
// LAYER5
110+
//
111+
9112
{
10113
question: "Are Layer5's solutions open source?",
11114
category: "Layer5",
@@ -169,6 +272,7 @@ const data = {
169272
{
170273
question: "Is Kanvas cloud or a self-hosted solution?",
171274
category: "Kanvas",
275+
subcategory: "Deployment",
172276
link: "https://layer5.io/cloud-native-management/kanvas",
173277
linktext: "Learn More",
174278
answer: [
@@ -177,6 +281,28 @@ const data = {
177281
"Whether self-hosted or hosted by Layer5, we are here to support you."
178282
]
179283
},
284+
{
285+
question: "How can I try out Kanvas?",
286+
category: "Kanvas",
287+
subcategory: "Getting Started",
288+
link: "https://layer5.io/cloud-native-management/kanvas",
289+
linktext: "Kanvas Beta",
290+
answer: [
291+
"Kanvas is available in beta today. Signup for Kanvas beta access and use Kanvas for free.",
292+
"Your request for early access will be processeed as quicky as possible but due to the large influx of program participation requests, it may take some time before system access is granted. In the meantime to help you familiarize with Meshery, the maintainers team will send you additional information about the early access program."
293+
]
294+
},
295+
{
296+
question: "What is Kanvas early access program?",
297+
category: "Kanvas",
298+
subcategory: "Getting Started",
299+
link: "https://layer5.io/cloud-native-management/kanvas",
300+
linktext: "Kanvas Beta",
301+
answer: [
302+
"Kanvas is cloud native collaboration tool for managing your infrastructure and applications. Kanvas has two modes: Visualizer for operating your actively running Kubernetes clusters and Designer for configuring your Kubernetes clusters and creating your creating your application deployments.",
303+
"Kanvas is in beta mode and you can ask for early access to try it out.",
304+
]
305+
},
180306
{
181307
question: "Can I deploy Meshery and its integrations on-premises?",
182308
category: "Meshery",
@@ -334,6 +460,7 @@ const data = {
334460
{
335461
question: "What payment methods do you support?",
336462
category: "Billing",
463+
subcategory: "Payment Methods",
337464
answer: [
338465
"You can pay for Layer5 Team and Enterprise with a credit card or debit card. If you pay by credit card, billing receipts are available to Administrators for previous months under Billing History. For copies of your invoice, email Layer5 billing.",
339466
"Layer5 also offers invoicing (ACH or wire). If you pay by ACH or wire, invoices are emailed to the billing email addresses near the 10th business day of each month. If you need an additional copy, email Layer5 billing. Details on where to remit payment can be found on the invoice. To change your payment method, contact your Customer Success Manager."
@@ -344,6 +471,7 @@ const data = {
344471
{
345472
question: "When does the billing cycle start and stop?",
346473
category: "Billing",
474+
subcategory: "Billing Cycle",
347475
answer: [
348476
"The billing cycle begins the first day of the subscription period.",
349477
"Layer5 meters the count of active users and systems under management on a daily basis. The billable count of users and elements under management is calculated at the end of the month using the maximum count (high water mark) of the lower 99 percent of usage for those days.",
@@ -353,6 +481,7 @@ const data = {
353481
{
354482
question: "How do I view and manage my subscription?",
355483
category: "Billing",
484+
subcategory: "Account Management",
356485
answer: [
357486
"You can view your account's subscription, your other paid features and products, and your next billing date in your account's billing settings",
358487
],
@@ -362,13 +491,15 @@ const data = {
362491
{
363492
question: "What happens if payment fails?",
364493
category: "Billing",
494+
subcategory: "Payment Issues",
365495
answer: [
366496
"After an initial failed payment, we apply a 14 day grace period on your account and attempt to process a payment each week. After three failed payments, paid features are locked.",
367497
],
368498
},
369499
{
370500
question: "How can I unlock my account after several failed transactions?",
371501
category: "Billing",
502+
subcategory: "Payment Issues",
372503
answer: [
373504
"You can unlock the paid features on your account and trigger a new payment attempt by updating the payment method on your account. To learn more about how to manage your payments, visit the Billing section of your Layer5 Cloud account.",
374505
],

‎src/sections/General/Faq/faqSection.style.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,14 @@ const FaqSectionWrapper = styled.section`
1010
font-style: italic;
1111
text-transform: capitalize;
1212
}
13+
.subcategory_name {
14+
margin: 1.5rem 0 0.5rem;
15+
font-size: 1.1rem;
16+
font-weight: 600;
17+
color: ${props => props.theme.primaryColor};
18+
text-transform: capitalize;
19+
opacity: 0.8;
20+
}
1321
.accordion__item + .accordion__item {
1422
border-color: transparent;
1523
}

‎src/sections/General/Faq/index.js‎

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,18 @@ const Faq = (props) => {
4242
}
4343

4444
let faqs = faqs_data.reduce((faq, ind) => {
45-
faq[ind.category] = [...faq[ind.category] || [], ind];
45+
const category = ind.category;
46+
const subcategory = ind.subcategory || "General";
47+
48+
if (!faq[category]) {
49+
faq[category] = {};
50+
}
51+
52+
if (!faq[category][subcategory]) {
53+
faq[category][subcategory] = [];
54+
}
55+
56+
faq[category][subcategory].push(ind);
4657
return faq;
4758
}, {});
4859

@@ -67,38 +78,45 @@ const Faq = (props) => {
6778
</div> */}
6879
</SectionTitle>
6980
<Accordion allowMultipleExpanded={false} allowZeroExpanded={true}>
70-
{faq_keys.map((key, index) => (
71-
<React.Fragment key={index}>
72-
<h2 className="category_name">{key}</h2>
73-
{faqs[key].map((faq, index) => (
74-
<AccordionItem key={index}>
75-
<AccordionTitle>
76-
<IconWrapper>
77-
<h5>{faq.question}</h5>
78-
<OpenIcon>
79-
<IoIosArrowUp size={22} color="white" />
80-
</OpenIcon>
81-
<CloseIcon>
82-
<IoIosArrowDown size={22} color="white" />
83-
</CloseIcon>
84-
</IconWrapper>
85-
</AccordionTitle>
86-
<AccordionBody>
87-
<div className="inner">
88-
{
89-
faq.answer.length >= 1 ? <ul>{faq.answer.map((ans, id) => (<li key={id}><p key={id}>{ans}</p></li>))}</ul> : <br />
90-
}
91-
{faq.link &&
92-
<div className="faqbutton">
93-
{faq.link.startsWith("/")
94-
? <Button $primary className="faqbutton" $url={faq.link} title={faq.linktext} $external={false} />
95-
: <Button $primary className="faqbutton" $url={faq.link} title={faq.linktext} $external={true} />
96-
}
97-
</div>
98-
}
99-
</div>
100-
</AccordionBody>
101-
</AccordionItem>
81+
{faq_keys.map((categoryKey, categoryIndex) => (
82+
<React.Fragment key={categoryIndex}>
83+
<h2 className="category_name">{categoryKey}</h2>
84+
{Object.keys(faqs[categoryKey]).map((subcategoryKey, subcategoryIndex) => (
85+
<React.Fragment key={subcategoryIndex}>
86+
{Object.keys(faqs[categoryKey]).length > 1 && (
87+
<h3 className="subcategory_name">{subcategoryKey}</h3>
88+
)}
89+
{faqs[categoryKey][subcategoryKey].map((faq, faqIndex) => (
90+
<AccordionItem key={faqIndex}>
91+
<AccordionTitle>
92+
<IconWrapper>
93+
<h5>{faq.question}</h5>
94+
<OpenIcon>
95+
<IoIosArrowUp size={22} color="white" />
96+
</OpenIcon>
97+
<CloseIcon>
98+
<IoIosArrowDown size={22} color="white" />
99+
</CloseIcon>
100+
</IconWrapper>
101+
</AccordionTitle>
102+
<AccordionBody>
103+
<div className="inner">
104+
{
105+
faq.answer.length >= 1 ? <ul>{faq.answer.map((ans, id) => (<li key={id}><p key={id}>{ans}</p></li>))}</ul> : <br />
106+
}
107+
{faq.link &&
108+
<div className="faqbutton">
109+
{faq.link.startsWith("/")
110+
? <Button $primary className="faqbutton" $url={faq.link} title={faq.linktext} $external={false} />
111+
: <Button $primary className="faqbutton" $url={faq.link} title={faq.linktext} $external={true} />
112+
}
113+
</div>
114+
}
115+
</div>
116+
</AccordionBody>
117+
</AccordionItem>
118+
))}
119+
</React.Fragment>
102120
))}
103121
</React.Fragment>
104122
))}

0 commit comments

Comments
 (0)