diff --git a/sites/org/pages/support.mjs b/sites/org/pages/support.mjs index fb1da84d1de..75964191fc8 100644 --- a/sites/org/pages/support.mjs +++ b/sites/org/pages/support.mjs @@ -1,33 +1,52 @@ // Dependencies import { serverSideTranslations } from 'next-i18next/serverSideTranslations' import { nsMerge } from 'shared/utils.mjs' +import { freeSewingConfig as config } from 'shared/config/freesewing.config.mjs' // Hooks import { useTranslation } from 'next-i18next' +import { useState } from 'react' // Components import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs' import { WebLink, Link } from 'shared/components/link.mjs' import { Popout } from 'shared/components/popout/index.mjs' -import { DiscordIcon, GitHubIcon } from 'shared/components/icons.mjs' import { Joost } from 'shared/components/joost.mjs' +import { BareLayout } from 'site/components/layouts/bare.mjs' +import { Breadcrumbs } from 'shared/components/navigation/sitenav.mjs' +import { + DiscordIcon, + FacebookIcon, + GitHubIcon, + HeartIcon, + InstagramIcon, + RedditIcon, + TwitterIcon, + YouTubeIcon, + FreeSewingIcon, +} from 'shared/components/icons.mjs' +import { StringInput, MarkdownInput, DesignDropdown } from 'shared/components/inputs.mjs' // Translation namespaces used on this page const namespaces = nsMerge(pageNs, 'support', 'sections') -const CardLink = ({ bg, textColor, href, title, icon, children }) => ( - -

- {title} +const SupportCard = ({ bg, textColor, title, icon, subtitle }) => ( +
+

+ {title} {icon} -

- {children} - +

+ ) +const socialIcon = { + discord: , + facebook: , + github: , + instagram: , + reddit: , + twitter: , + youtube: , +} + /* * Each page MUST be wrapped in the PageWrapper component. * You also MUST spread props.page into this wrapper component @@ -36,96 +55,164 @@ const CardLink = ({ bg, textColor, href, title, icon, children }) => ( */ const SupportPage = ({ page }) => { const { t } = useTranslation(namespaces) + const [issue, setIssue] = useState(false) + const [mode, setMode] = useState(false) + const [edit, setEdit] = useState(false) + const [title, setTitle] = useState('') + const [design, setDesign] = useState('') + const [body, setBody] = useState('') + + const pageTitle = mode ? t('createSupportRequest') : t('sections:support') + + if (mode && !edit) + return ( + +
+ +

{pageTitle}

+

{t('chooseYourUx')}

+
+ + +
+
+ {t('via')} + GitHub.com + + {t('chooseThisForGitHub')} + +
+ {} +
+ +
+
+ + ) + + if (mode && edit) + return ( + +
+ +

{pageTitle}

+
+ val.length > 10} + /> + Not related to a design} + label={t('design')} + update={setDesign} + current={design} + valid={(val) => val.length > 1} + /> + val.length > 10} + /> +
+
+ + ) return ( - -
- - Discord - | - {t('support:communitySupport')} - - } - icon={} - > -

-

{t('support:communitySupport2')}

- - - GitHub - | - {t('support:contributorSupport')} - - } - icon={} - > -

-

{t('support:contributorSupport2')}

- - -

- - Joost - | - {t('support:maintainerSupport')} - - -

-

-

{t('support:maintainerSupport2')}

- - -
{t('support:whatIsDiscord')}
-

{t('support:whatIsDiscord1')}

-

- - . -

-

- {t('support:whatIsDiscord3')} -
- {t('support:whatIsDiscord4')} -

- + +
+ +

{pageTitle}

+
+ {/* Community */} +
+ } + /> +

{t('support:communitySupport1')}

+

{t('support:communitySupport2')}

+
+ {Object.keys(config.social) + .sort() + .map((key) => ( + + {socialIcon[key.toLowerCase()]} + {key} + + ))} +
+
- -
{t('support:whatIsGitHub')}
-

{t('support:whatIsGitHub1')}

-

- {t('support:whatIsGitHub2')}{' '} - . -

-

{t('support:whatIsGitHub3')}

- + {/* Contributors */} +
+ } + /> +

+

{t('support:contributorSupport2')}

+ +
- -
{t('support:whatIsJoost')}
-

{t('support:whatIsJoost1')}

- + {/* Maintainer */} +
+ } + /> +

+

{t('support:maintainerSupport2')}

+ +
{t('support:whatIsJoost')}
+

{t('support:whatIsJoost1')}

+ +
+
) diff --git a/sites/shared/components/joost.mjs b/sites/shared/components/joost.mjs index 577ad5a4347..0750ec291d7 100644 --- a/sites/shared/components/joost.mjs +++ b/sites/shared/components/joost.mjs @@ -1,9 +1,10 @@ -export const Joost = ({ className = 'w-32' }) => ( +export const Joost = ({ className = 'w-32', stroke = 0 }) => ( diff --git a/sites/shared/i18n/support/en.yaml b/sites/shared/i18n/support/en.yaml index 56fcd6145b2..aa2fb970e38 100644 --- a/sites/shared/i18n/support/en.yaml +++ b/sites/shared/i18n/support/en.yaml @@ -1,22 +1,22 @@ support: Support communitySupport: Community Support -communitySupport1: For the fastest response, head over to discord.freesewing.org and post your question in the Support channel. -communitySupport2: The FreeSewing community is a helpful bunch, so there is a good chance they are able to help you. +communitySupport1: The FreeSewing community is a helpful bunch, so there is a good chance they are able to help you. +communitySupport2: "You can find FreeSewing friends in all these places:" contributorSupport: Contributor Support -contributorSupport1: If something is broken or you have found a bug, you can create an issue on GitHub. +contributorSupport1: If something is broken or you have found a bug, you can create an issue on GitHub, or right here on our website. contributorSupport2: Issues are more likely to attract the attention of core contributors, but tend to take longer to get a response. maintainerSupport: Maintainer Support -maintainerSupport1: If you are a FreeSewing patron, you can go straight to the top and contact Joost directly. -maintainerSupport2: While Joost will treat requests from patrons with priority, he does also needs sleep. So keep that in mind, especially when you are in a different time zone. -whatIsDiscord: What is Discord? -whatIsDiscord1: Discord is a free chat platform where communities can come together to chat discuss their interests. It also supports (group) voice and video calls. -whatIsDiscord2: FreeSewing has its own Discord community (a server in Discord terminology) at -whatIsDiscord3: To use Discord, you will need an account, but they are free. -whatIsDiscord4: You can use Discord in your browser, or download the Discord app for your platform of choice. -whatIsGitHub: What is GitHub? -whatIsGitHub1: GitHub is an online platform for hosting software source code and collaborative development. It is popular among open source projects as it provides free hosting. -whatIsGitHub2: You can find FreeSewing on GitHub at -whatIsGitHub3: To use GitHub, you will need an account, but they are free. +maintainerSupport1: If you are a FreeSewing patron, you can go straight to the top and contact Joost directly. +maintainerSupport2: While Joost will treat requests from patrons with priority, he also needs sleep. So keep that in mind, especially when you are in a different time zone. +noGitHubNoProblem: No GitHub? No problem! +noGitHubNoProblem1: You can submit a support request right here on the website and we will create an issue from it for you. +createSupportRequest: Create a Support Request +createIssueOnGitHub: Create an issue on GitHub +createIssueOnFreeSewing: Create an issue on FreeSewing.org whatIsJoost: What is Joost? whatIsJoost1: Not what, but who. Joost De Cock is the FreeSewing founder and maintainer. +via: Via +chooseThisForFreeSewing: This is the best choice for most people +chooseThisForGitHub: This is the best choice for those who prefer to use GitHub directly +chooseYourUx: How would you like to do this?