wip(org): Reworking support page
This commit is contained in:
joostdecock
parent
dc7a0316c2
commit
f0721700fd
3 changed files with 203 additions and 115 deletions
|
|
@ -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 }) => (
|
||||
<a
|
||||
href={href}
|
||||
className={`px-8 ${bg} py-6 rounded-lg block ${textColor}
|
||||
hover:bg-secondary hover:text-secondary-content shadow-lg
|
||||
transition-color duration-300 grow`}
|
||||
>
|
||||
<h2 className="text-inherit flex flex-row gap-4 items-start font-light justify-between">
|
||||
<span>{title}</span>
|
||||
const SupportCard = ({ bg, textColor, title, icon, subtitle }) => (
|
||||
<div className={`px-8 ${bg} pt-2 pb-4 rounded-lg block ${textColor} shadow-lg grow w-full`}>
|
||||
<h3 className="text-inherit font-heavy flex flex-row w-full items-center justify-between">
|
||||
{title}
|
||||
{icon}
|
||||
</h2>
|
||||
{children}
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
)
|
||||
|
||||
const socialIcon = {
|
||||
discord: <DiscordIcon />,
|
||||
facebook: <FacebookIcon />,
|
||||
github: <GitHubIcon />,
|
||||
instagram: <InstagramIcon />,
|
||||
reddit: <RedditIcon />,
|
||||
twitter: <TwitterIcon />,
|
||||
youtube: <YouTubeIcon fill stroke={0} />,
|
||||
}
|
||||
|
||||
/*
|
||||
* 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 (
|
||||
<PageWrapper {...page} title={pageTitle} layout={BareLayout}>
|
||||
<div className="max-w-7xl mx-auto mb-24 px-4 md:px-0 mt-16">
|
||||
<Breadcrumbs />
|
||||
<h1>{pageTitle}</h1>
|
||||
<h2>{t('chooseYourUx')}</h2>
|
||||
<div className="flex flex-col gap-8 max-w-xl">
|
||||
<button
|
||||
className={`px-8 bg-neutral pt-4 pb-8 rounded-lg block text-neutral-content
|
||||
shadow-lg grow hover:bg-secondary hover:text-secondary-content hover:cursor-pointer`}
|
||||
title={t('createIssueOnFreeSewing')}
|
||||
onClick={() => setEdit(true)}
|
||||
>
|
||||
<h3 className="text-inherit font-heavy flex flex-row w-full items-center justify-between">
|
||||
<div className="text-left">
|
||||
<span className="block text-sm font-medium via">{t('via')}</span>
|
||||
FreeSewing.org
|
||||
<span className="block text-lg font-medium via pt-2">
|
||||
{t('chooseThisForFreeSewing')}
|
||||
</span>
|
||||
</div>
|
||||
{<FreeSewingIcon className="w-14 h-14 shrink-0" />}
|
||||
</h3>
|
||||
</button>
|
||||
<a
|
||||
className={`px-8 bg-neutral pt-4 pb-4 rounded-lg block text-neutral-content opacity-70 hover:opacity-100
|
||||
shadow-lg grow hover:bg-secondary hover:text-secondary-content hover:cursor-pointer`}
|
||||
title={t('createIssueOnGitHub')}
|
||||
href="https://github.com/freesewing/freesewing/issues/new/choose"
|
||||
>
|
||||
<h5 className="text-inherit font-heavy flex flex-row w-full items-center justify-between">
|
||||
<div className="text-left">
|
||||
<span className="block text-sm font-medium via">{t('via')}</span>
|
||||
GitHub.com
|
||||
<span className="block text-sm font-medium via pt-2">
|
||||
{t('chooseThisForGitHub')}
|
||||
</span>
|
||||
</div>
|
||||
{<GitHubIcon className="w-14 h-14 shrink-0" />}
|
||||
</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
||||
if (mode && edit)
|
||||
return (
|
||||
<PageWrapper {...page} title={pageTitle} layout={BareLayout}>
|
||||
<div className="max-w-7xl mx-auto mb-24 px-4 md:px-0 mt-16">
|
||||
<Breadcrumbs />
|
||||
<h1>{pageTitle}</h1>
|
||||
<div className="max-w-xl">
|
||||
<StringInput
|
||||
label={t('title')}
|
||||
update={setTitle}
|
||||
current={title}
|
||||
valid={(val) => val.length > 10}
|
||||
/>
|
||||
<DesignDropdown
|
||||
firstOption={<option val="">Not related to a design</option>}
|
||||
label={t('design')}
|
||||
update={setDesign}
|
||||
current={design}
|
||||
valid={(val) => val.length > 1}
|
||||
/>
|
||||
<MarkdownInput
|
||||
label={t('body')}
|
||||
update={body}
|
||||
current={body}
|
||||
valid={(val) => val.length > 10}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
||||
return (
|
||||
<PageWrapper {...page} title={t('sections:support')}>
|
||||
<div className="flex flex-col gap-4 max-w-3xl mb-24 px-4 md:px-0 mt-4">
|
||||
<CardLink
|
||||
bg="bg-accent"
|
||||
textColor="text-primary-content"
|
||||
href="https://discord.freesewing.org/"
|
||||
title={
|
||||
<>
|
||||
<b className="font-bold">Discord</b>
|
||||
<span className="px-4">|</span>
|
||||
<small>{t('support:communitySupport')}</small>
|
||||
</>
|
||||
}
|
||||
icon={<DiscordIcon className="w-14 h-14 shrink-0" />}
|
||||
>
|
||||
<p
|
||||
className="font-medium text-inherit text-lg"
|
||||
dangerouslySetInnerHTML={{ __html: t('support:communitySupport1') }}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:communitySupport2')}</p>
|
||||
</CardLink>
|
||||
<CardLink
|
||||
bg="bg-primary"
|
||||
textColor="text-neutral-content"
|
||||
href="https://github.com/freesewing/freesewing/issues/new/"
|
||||
title={
|
||||
<>
|
||||
<b className="font-bold">GitHub</b>
|
||||
<span className="px-4">|</span>
|
||||
<small>{t('support:contributorSupport')}</small>
|
||||
</>
|
||||
}
|
||||
icon={<GitHubIcon className="w-14 h-14 shrink-0" />}
|
||||
>
|
||||
<p
|
||||
className="font-medium text-inherit text-lg"
|
||||
dangerouslySetInnerHTML={{ __html: t('support:contributorSupport1') }}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:contributorSupport2')}</p>
|
||||
</CardLink>
|
||||
<Link
|
||||
href="/patrons/join"
|
||||
className={`px-8 bg-neutral py-6 rounded-lg block text-neutral-content
|
||||
hover:bg-secondary hover:text-secondary-content shadow-lg
|
||||
transition-color duration-300 grow`}
|
||||
>
|
||||
<h2 className="-mb-4 text-inherit flex flex-row gap-4 items-start font-light justify-between">
|
||||
<span>
|
||||
<b className="font-bold">Joost</b>
|
||||
<span className="px-4">|</span>
|
||||
<small>{t('support:maintainerSupport')}</small>
|
||||
</span>
|
||||
<Joost className="w-36 shrink-0 -mt-4" stroke={3} />
|
||||
</h2>
|
||||
<p
|
||||
className="font-medium text-inherit text-lg"
|
||||
dangerouslySetInnerHTML={{ __html: t('support:maintainerSupport1') }}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:maintainerSupport2')}</p>
|
||||
</Link>
|
||||
<Popout note>
|
||||
<h5>{t('support:whatIsDiscord')}</h5>
|
||||
<p>{t('support:whatIsDiscord1')}</p>
|
||||
<p>
|
||||
<span dangerouslySetInnerHTML={{ __html: t('support:whatIsDiscord2') + ' ' }} />
|
||||
<WebLink href="https://discord.freesewing.org" txt="discord.freesewing.org" />.
|
||||
</p>
|
||||
<p>
|
||||
{t('support:whatIsDiscord3')}
|
||||
<br />
|
||||
{t('support:whatIsDiscord4')}
|
||||
</p>
|
||||
</Popout>
|
||||
<PageWrapper {...page} title={pageTitle} layout={BareLayout}>
|
||||
<div className="max-w-7xl mx-auto mb-24 px-4 mt-16">
|
||||
<Breadcrumbs />
|
||||
<h1>{pageTitle}</h1>
|
||||
<div className="flex flex-row flex-wrap gap-4 lg:grid lg:grid-cols-3 lg:gap-8 justify-around">
|
||||
{/* Community */}
|
||||
<div className="w-full md:max-w-md my-8">
|
||||
<SupportCard
|
||||
bg="bg-accent"
|
||||
textColor="text-primary-content"
|
||||
title={t('support:communitySupport')}
|
||||
subtitle="Discord"
|
||||
icon={<HeartIcon className="w-14 h-14 shrink-0" />}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:communitySupport1')}</p>
|
||||
<p className="font-normal text-inherit">{t('support:communitySupport2')}</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.keys(config.social)
|
||||
.sort()
|
||||
.map((key) => (
|
||||
<a
|
||||
className="btn btn-neutral btn-outline w-full flex flex-row items-center justify-between"
|
||||
href={config.social[key]}
|
||||
key={key}
|
||||
>
|
||||
{socialIcon[key.toLowerCase()]}
|
||||
{key}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Popout note>
|
||||
<h5>{t('support:whatIsGitHub')}</h5>
|
||||
<p>{t('support:whatIsGitHub1')}</p>
|
||||
<p>
|
||||
{t('support:whatIsGitHub2')}{' '}
|
||||
<WebLink href="https://github.com/freesewing" txt="github.com/freesewing" />.
|
||||
</p>
|
||||
<p>{t('support:whatIsGitHub3')}</p>
|
||||
</Popout>
|
||||
{/* Contributors */}
|
||||
<div className="w-full md:max-w-md my-8">
|
||||
<SupportCard
|
||||
bg="bg-primary"
|
||||
textColor="text-neutral-content"
|
||||
title={t('support:contributorSupport')}
|
||||
subtitle="GitHub"
|
||||
icon={<GitHubIcon className="w-14 h-14 shrink-0" />}
|
||||
/>
|
||||
<p
|
||||
className="font-medium text-inherit text-lg"
|
||||
dangerouslySetInnerHTML={{ __html: t('support:contributorSupport1') }}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:contributorSupport2')}</p>
|
||||
<button className="btn btn-primary w-full" onClick={() => setMode('edit')}>
|
||||
{t('createSupportRequest')}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Popout note>
|
||||
<h5>{t('support:whatIsJoost')}</h5>
|
||||
<p>{t('support:whatIsJoost1')}</p>
|
||||
</Popout>
|
||||
{/* Maintainer */}
|
||||
<div className="w-full md:max-w-md my-8">
|
||||
<SupportCard
|
||||
bg="bg-neutral"
|
||||
textColor="text-primary-content"
|
||||
title={t('support:maintainerSupport')}
|
||||
icon={<Joost className="w-28 shrink-0" stroke={1} />}
|
||||
/>
|
||||
<p
|
||||
className="font-medium text-inherit text-lg"
|
||||
dangerouslySetInnerHTML={{ __html: t('support:maintainerSupport1') }}
|
||||
/>
|
||||
<p className="font-normal text-inherit">{t('support:maintainerSupport2')}</p>
|
||||
<Popout tip>
|
||||
<h5>{t('support:whatIsJoost')}</h5>
|
||||
<p>{t('support:whatIsJoost1')}</p>
|
||||
</Popout>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,22 +1,22 @@
|
|||
support: Support
|
||||
communitySupport: Community Support
|
||||
communitySupport1: For the fastest response, head over to <b>discord.freesewing.org</b> and post your question in the <b>Support</b> 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 <b>create an issue on GitHub</b>.
|
||||
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 <b>a FreeSewing patron</b>, 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 <em>server</em> 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?
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue