wip(org): Reworking support page

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 }) => (
+const SupportCard = ({ bg, textColor, title, icon, subtitle }) => (
-  <a
+  <div className={`px-8 ${bg} pt-2 pb-4 rounded-lg block ${textColor} shadow-lg grow w-full`}>
-    href={href}
+    <h3 className="text-inherit font-heavy flex flex-row w-full items-center justify-between">
-    className={`px-8 ${bg} py-6 rounded-lg block ${textColor}
+      {title}
-    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>
+    </h3>
-    {children}
+  </div>
-  </a>
 )
 
+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,97 +55,165 @@ 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')}>
+    <PageWrapper {...page} title={pageTitle} layout={BareLayout}>
-      <div className="flex flex-col gap-4 max-w-3xl mb-24 px-4 md:px-0  mt-4">
+      <div className="max-w-7xl mx-auto mb-24 px-4 mt-16">
-        <CardLink
+        <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"
-          href="https://discord.freesewing.org/"
+              title={t('support:communitySupport')}
-          title={
+              subtitle="Discord"
-            <>
+              icon={<HeartIcon className="w-14 h-14 shrink-0" />}
-              <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:communitySupport1')}</p>
             <p className="font-normal text-inherit">{t('support:communitySupport2')}</p>
-        </CardLink>
+            <div className="grid grid-cols-2 gap-2">
-        <CardLink
+              {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>
+
+          {/* Contributors */}
+          <div className="w-full md:max-w-md my-8">
+            <SupportCard
               bg="bg-primary"
               textColor="text-neutral-content"
-          href="https://github.com/freesewing/freesewing/issues/new/"
+              title={t('support:contributorSupport')}
-          title={
+              subtitle="GitHub"
-            <>
-              <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>
+            <button className="btn btn-primary w-full" onClick={() => setMode('edit')}>
-        <Link
+              {t('createSupportRequest')}
-          href="/patrons/join"
+            </button>
-          className={`px-8 bg-neutral py-6 rounded-lg block text-neutral-content
+          </div>
-          hover:bg-secondary hover:text-secondary-content shadow-lg
+
-          transition-color duration-300 grow`}
+          {/* Maintainer */}
-        >
+          <div className="w-full md:max-w-md my-8">
-          <h2 className="-mb-4 text-inherit flex flex-row gap-4 items-start font-light justify-between">
+            <SupportCard
-            <span>
+              bg="bg-neutral"
-              <b className="font-bold">Joost</b>
+              textColor="text-primary-content"
-              <span className="px-4">|</span>
+              title={t('support:maintainerSupport')}
-              <small>{t('support:maintainerSupport')}</small>
+              icon={<Joost className="w-28 shrink-0" stroke={1} />}
-            </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 tip>
-        <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>
+        </div>
+      </div>
     </PageWrapper>
   )
 }

sites/shared/i18n/support/en.yaml

@@ -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.
+communitySupport1: The FreeSewing community is a helpful bunch, so there is a good chance they are able to help you.
-communitySupport2: 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.
+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.
+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.
-whatIsDiscord: What is Discord?
+noGitHubNoProblem: No GitHub? No problem!
-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.
+noGitHubNoProblem1: You can submit a support request right here on the website and we will create an issue from it for you.
-whatIsDiscord2: FreeSewing has its own Discord community (a <em>server</em> in Discord terminology) at
+createSupportRequest: Create a Support Request
-whatIsDiscord3: To use Discord, you will need an account, but they are free.
+createIssueOnGitHub: Create an issue on GitHub
-whatIsDiscord4: You can use Discord in your browser, or download the Discord app for your platform of choice.
+createIssueOnFreeSewing: Create an issue on FreeSewing.org
-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.
+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?