From 650307056ed4a2dd6cd3321e47ae3ef72cd9e26e Mon Sep 17 00:00:00 2001 From: Carolina Menezes <60782333+carolinamenezes@users.noreply.github.com> Date: Wed, 27 Apr 2022 15:08:38 -0300 Subject: [PATCH] docs: update faqpage (#1249) --- docs/docs/faq.mdx | 22 ++++++ docs/sidebars.js | 1 + .../FaqQuestion/FaqQuestion.module.css | 7 +- docs/src/pages/faq.js | 14 ---- docs/src/pages/sections/FaqPage/FaqPage.js | 69 ++++++------------- .../pages/sections/FaqPage/FaqPage.module.css | 45 ------------ 6 files changed, 46 insertions(+), 112 deletions(-) create mode 100644 docs/docs/faq.mdx delete mode 100644 docs/src/pages/faq.js delete mode 100644 docs/src/pages/sections/FaqPage/FaqPage.module.css diff --git a/docs/docs/faq.mdx b/docs/docs/faq.mdx new file mode 100644 index 0000000000..e86c9e7a3a --- /dev/null +++ b/docs/docs/faq.mdx @@ -0,0 +1,22 @@ +--- +hide_title: true +title: FAQ +hide_table_of_contents: true +custom_edit_url: null +pagination_next: null +pagination_prev: null +--- + +import FaqPage from "@site/src/pages/sections/FaqPage/FaqPage"; + + +# Frequently Asked Questions + + + +## Didn't find your answers? +Don’t hesitate to get in touch! Find us at: +- [Community](https://community.vtex.com/c/faststore-beta/64) +- [Office Hours](https://www.youtube.com/channel/UCReNhDqLOVL4edqENJ4k7Fg) +- [Github Issues](https://github.com/vtex/faststore/issues) +- [Github Discussions](https://github.com/vtex/faststore/discussions) \ No newline at end of file diff --git a/docs/sidebars.js b/docs/sidebars.js index e4ac8191c4..76e6941100 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -269,6 +269,7 @@ link: { type: 'doc', id: 'conceptual-guides' }, items: ['conceptual-guides/jamstack'], }, + 'faq', ], }, ], diff --git a/docs/src/components/FaqQuestion/FaqQuestion.module.css b/docs/src/components/FaqQuestion/FaqQuestion.module.css index 6c790c0990..f4fc47a0b6 100644 --- a/docs/src/components/FaqQuestion/FaqQuestion.module.css +++ b/docs/src/components/FaqQuestion/FaqQuestion.module.css @@ -16,7 +16,7 @@ .FaqDetails { @apply w-full my-0 mx-auto; - --parentWidth: 35vw; + --parentWidth: 75%; } .FaqDetails summary { @@ -39,9 +39,6 @@ .FaqDetails summary { outline: 0; } -.FaqDetails a { - color: var(--ifm-link-color); -} .FaqDetails p { @apply pt-4 mt-0 mx-0 mb-4; width: var(--parentWidth); @@ -49,6 +46,6 @@ @media screen and (max-width: 1220px) { .FaqDetails { - --parentWidth: 90vw; + --parentWidth: 100%; } } \ No newline at end of file diff --git a/docs/src/pages/faq.js b/docs/src/pages/faq.js deleted file mode 100644 index 2f4702cfcb..0000000000 --- a/docs/src/pages/faq.js +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import Layout from '@theme/Layout'; -import FaqPage from './sections/FaqPage/FaqPage' - - -function FAQ() { - return ( - - - - ); -} - -export default FAQ; \ No newline at end of file diff --git a/docs/src/pages/sections/FaqPage/FaqPage.js b/docs/src/pages/sections/FaqPage/FaqPage.js index 2c04929fab..490ff23276 100644 --- a/docs/src/pages/sections/FaqPage/FaqPage.js +++ b/docs/src/pages/sections/FaqPage/FaqPage.js @@ -1,77 +1,50 @@ import React from 'react' -import styles from './FaqPage.module.css' import FaqQuestion from '../../../components/FaqQuestion/FaqQuestion' const data = [ { - question: "What is FastStore?", + question: 'What is FastStore?', answer: ` FastStore is a full-stack toolkit composed of three independent packages (UI, SDK, and API) that help you create performant ecommerce experiences. Use FastStore UI to add accessibility-ready components to your ecommerce, FastStore SDK to manage the states related to your store behavior, and FastStore API to connect to your favorite ecommerce platform. Notice that you can use these three packages individually or combined with other solutions on the web.

Please refer to our documentation for more information. `, }, { - question: "How I start a FastStore project?", - answer: `The easiest way to start a FastStore project is to use one of our official starters. Find your favorite starter at our Starter Library, fork it, customize it and deploy it on your favorite Jamstack platform.` + question: 'How I start a FastStore project?', + answer: `The easiest way to start a FastStore project is to use one of our official starters. Find your favorite starter at our Starter Library, fork it, customize it and deploy it on your favorite Jamstack platform.`, }, { - question: "Can I integrate my FastStore project with a CMS?", - answer: `Yes. Since FastStore is Jamstack-based, you can use any headless CMS available for Jamstack. Notice that we strongly recommend using VTEX Headless CMS for VTEX projects.` + question: 'Can I integrate my FastStore project with a CMS?', + answer: `Yes. Since FastStore is Jamstack-based, you can use any headless CMS available for Jamstack. Notice that we strongly recommend using VTEX Headless CMS for VTEX projects.`, }, { - question: "Which tech stack do you recommend?", + question: 'Which tech stack do you recommend?', answer: ` For styling, consider using a static CSS solution, such as Tailwind, Less, or raw CSS. Keep in mind that runtime-based CSS-in-JS solutions tend to harm performance. For deployment, consider using VTEX IO WebOps for better stability and performance. - ` + `, }, { - question: "Can I use Tachyons or other CSS frameworks?", - answer: "Yes. FastStore UI is styled via data attributes. This means we are compatible with all major CSS frameworks, such as Emotion, Tailwind, Styled components, Stitches, etc." + question: 'Can I use Tachyons or other CSS frameworks?', + answer: + 'Yes. FastStore UI is styled via data attributes. This means we are compatible with all major CSS frameworks, such as Emotion, Tailwind, Styled components, Stitches, etc.', }, { - question: "Can I adapt UI components to my business needs?", - answer: "Yes, because all FastStore UI components are open source, you can simply copy the source code from Github and modify it to your liking if you need to extend their behavior in any way for your project." + question: 'Can I adapt UI components to my business needs?', + answer: + 'Yes, because all FastStore UI components are open source, you can simply copy the source code from Github and modify it to your liking if you need to extend their behavior in any way for your project.', }, { - question: "How can I contribute to FastStore?", - answer: "There are multiple ways to contribute to the project whether you are a technical or non-technical user: correct typos, fix translations, enhance documentation, create new starters, improve components and behaviors.
Check out our contributions guide (coming soon)." - } + question: 'How can I contribute to FastStore?', + answer: + 'There are multiple ways to contribute to the project whether you are a technical or non-technical user: correct typos, fix translations, enhance documentation, create new starters, improve components and behaviors.
Check out our contributions guide (coming soon).', + }, ] const FaqPage = () => { return ( -
-
-
-
-

Frequently Asked Questions

-
-
-

Didn't find your answers?

Don’t hesitate to get in touch! Find us at: - -
-
-
-
-

FastStore

- {data.map(({question, answer}) => ( - - ))} -
-
+
+ {data.map(({ question, answer }) => ( + + ))}
) } diff --git a/docs/src/pages/sections/FaqPage/FaqPage.module.css b/docs/src/pages/sections/FaqPage/FaqPage.module.css deleted file mode 100644 index eaf12a4469..0000000000 --- a/docs/src/pages/sections/FaqPage/FaqPage.module.css +++ /dev/null @@ -1,45 +0,0 @@ -.FaqPage { - @apply w-4/5 mx-auto my-2 p-20 leading-relaxed; -} - -.sectionContent { - @apply flex justify-around items-start; -} - -.FaqHeader { - @apply sticky top-28 mr-36; - position: -webkit-sticky; -} - -.FaqHeader h3 { - @apply text-5xl mb-4; -} -.FaqPage h2 { - @apply mb-5 text-xl font-bold; -} -.FaqPage h2:not(:first-child) { - @apply mt-10 mb-5 text-xl font-bold; -} - -.FaqPage ul{ - @apply list-disc ml-8 my-2 -} - -.FaqPage a{ - color: var(--ifm-color-primary) -} - -@media screen and (max-width: 1220px) { - .sectionContent { - flex-direction: column; - } - .FaqHeader { - position: relative; - top:0; - margin:0 - } - .FaqPage { - width: 100%; - padding: 1rem; - } -} \ No newline at end of file