feat(org): Added support page
This commit is contained in:
Joost De Cock
parent
734aa65f02
commit
24d10de81e
4 changed files with 179 additions and 1 deletions
147
sites/org/pages/support.mjs
Normal file
147
sites/org/pages/support.mjs
Normal file
|
|
@ -0,0 +1,147 @@
|
|||
// Dependencies
|
||||
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
||||
import { nsMerge } from 'shared/utils.mjs'
|
||||
// Hooks
|
||||
import { useTranslation } from 'next-i18next'
|
||||
// Components
|
||||
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
||||
import { WebLink } from 'shared/components/web-link.mjs'
|
||||
import { Popout } from 'shared/components/popout/index.mjs'
|
||||
import { DiscordIcon, GitHubIcon } from 'shared/components/icons.mjs'
|
||||
import Link from 'next/link'
|
||||
import { Joost } from 'shared/components/joost.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>
|
||||
{icon}
|
||||
</h2>
|
||||
{children}
|
||||
</a>
|
||||
)
|
||||
|
||||
/*
|
||||
* Each page MUST be wrapped in the PageWrapper component.
|
||||
* You also MUST spread props.page into this wrapper component
|
||||
* when path and locale come from static props (as here)
|
||||
* or set them manually.
|
||||
*/
|
||||
const SupportPage = ({ page }) => {
|
||||
const { t } = useTranslation(namespaces)
|
||||
|
||||
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>
|
||||
|
||||
<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>
|
||||
|
||||
<Popout note>
|
||||
<h5>{t('support:whatIsJoost')}</h5>
|
||||
<p>{t('support:whatIsJoost1')}</p>
|
||||
</Popout>
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export default SupportPage
|
||||
|
||||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale, namespaces)),
|
||||
page: {
|
||||
locale,
|
||||
path: ['patrons', 'thanks'],
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
@ -33,3 +33,4 @@ patternsAbout: Lists the patterns that you have stored in your FreeSewing accoun
|
|||
setsAbout: Lists the measurements sets that you have stored in your FreeSewing account
|
||||
codeAbout: Here you can find (links to) the Freesewing source code
|
||||
new: New...
|
||||
support: Support
|
||||
|
|
|
|||
22
sites/shared/i18n/support/en.yaml
Normal file
22
sites/shared/i18n/support/en.yaml
Normal file
|
|
@ -0,0 +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.
|
||||
contributorSupport: Contributor Support
|
||||
contributorSupport1: If something is broken or you have found a bug, you can <b>create an issue on GitHub</b>.
|
||||
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.
|
||||
whatIsJoost: What is Joost?
|
||||
whatIsJoost1: Not what, but who. Joost De Cock is the FreeSewing founder and maintainer.
|
||||
|
||||
|
|
@ -174,7 +174,7 @@ export const extendSiteNav = async (siteNav, lang) => {
|
|||
_: 1,
|
||||
s: 'thanks',
|
||||
h: 1,
|
||||
t: t('patrons:thankYouSoVeryMuch'),
|
||||
t: t('patrons:thankYouVeryMuch'),
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -192,6 +192,14 @@ export const extendSiteNav = async (siteNav, lang) => {
|
|||
},
|
||||
}
|
||||
|
||||
// Add support
|
||||
siteNav.support = {
|
||||
_: 1,
|
||||
s: 'support',
|
||||
h: 1,
|
||||
t: t('sections:support'),
|
||||
}
|
||||
|
||||
// Add search
|
||||
siteNav.search = {
|
||||
s: 'search',
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue