feat(org): Added support page

sites/org/pages/support.mjs

@@ -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'],
+      },
+    },
+  }
+}

sites/shared/i18n/sections/en.yaml

@@ -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

sites/shared/i18n/support/en.yaml

@@ -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.
+

sites/shared/prebuild/sitenav-org.mjs

@@ -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',