Switch to gitbook support page

components/page-layout.tsx

@@ -47,19 +47,12 @@ const Menu: React.VoidFunctionComponent<{ className: string }> = ({
           Blog
         </a>
       </Link>
-      <Link href="/support">
+      <a
-        <a
+        href="https://support.rallly.co"
-          className={clsx(
+        className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2"
-            "text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2",
+      >
-            {
+        Support
-              "pointer-events-none font-bold text-gray-600":
+      </a>
-                pathname === "/support",
-            },
-          )}
-        >
-          Support
-        </a>
-      </Link>
       <Link href="https://github.com/lukevella/rallly">
         <a className="text-gray-400 transition-colors hover:text-indigo-500 hover:no-underline hover:underline-offset-2">
           <Github className="w-6" />

components/page-layout/footer.tsx

@@ -64,11 +64,12 @@ const Footer: React.VoidFunctionComponent = () => {
               </Link>
             </li>
             <li>
-              <Link href="/support">
+              <a
-                <a className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline">
+                href="https://support.rallly.co"
-                  Support
+                className="font-normal leading-loose text-gray-400 hover:text-gray-800 hover:no-underline"
-                </a>
+              >
-              </Link>
+                Support
+              </a>
             </li>
             <li>
               <Link href="/privacy-policy">

components/standard-layout.tsx

@@ -35,12 +35,15 @@ const AppMenu: React.VoidFunctionComponent<{ className?: string }> = ({
           <span className="inline-block">New Poll</span>
         </a>
       </Link>
-      <Link href="/support">
+      <a
-        <a className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 pr-4 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300">
+        target="_blank"
-          <Support className="h-5 opacity-75" />
+        href="https://support.rallly.co"
-          <span className="inline-block">Support</span>
+        className="flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 pr-4 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
-        </a>
+        rel="noreferrer"
-      </Link>
+      >
+        <Support className="h-5 opacity-75" />
+        <span className="inline-block">Support</span>
+      </a>
     </div>
   );
 };
@@ -98,12 +101,15 @@ const StandardLayout: React.VoidFunctionComponent<{
                   <span className="inline-block">New Poll</span>
                 </a>
               </Link>
-              <Link href="/support">
+              <a
-                <a className="mb-1 flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 pr-4 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300">
+                target="_blank"
-                  <Support className="h-5 opacity-75" />
+                href="https://support.rallly.co"
-                  <span className="inline-block">Support</span>
+                className="mb-1 flex cursor-pointer items-center space-x-2 whitespace-nowrap rounded-md px-2 py-1 pr-4 font-medium text-slate-600 transition-colors hover:bg-gray-200 hover:text-slate-600 hover:no-underline active:bg-gray-300"
-                </a>
+                rel="noreferrer"
-              </Link>
+              >
+                <Support className="h-5 opacity-75" />
+                <span className="inline-block">Support</span>
+              </a>
               <Popover
                 placement="right-start"
                 trigger={
@@ -133,11 +139,14 @@ const StandardLayout: React.VoidFunctionComponent<{
           </div>
           <div className="hidden text-slate-300 lg:block">&bull;</div>
           <div className="flex items-center justify-center space-x-6 md:justify-start">
-            <Link href="/support">
+            <a
-              <a className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline">
+              target="_blank"
-                Support
+              href="https://support.rallly.co"
-              </a>
+              className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline"
-            </Link>
+              rel="noreferrer"
+            >
+              Support
+            </a>
             <Link href="https://github.com/lukevella/rallly/discussions">
               <a className="text-sm text-slate-400 transition-colors hover:text-indigo-500 hover:no-underline">
                 Discussions

components/support.tsx

@@ -1,172 +0,0 @@
-import { Disclosure } from "@headlessui/react";
-import { Trans, useTranslation } from "next-i18next";
-import * as React from "react";
-
-import Button from "@/components/button";
-import Chat from "@/components/icons/chat.svg";
-
-import { showCrispChat } from "./crisp-chat";
-import PageLayout from "./page-layout";
-
-const Support: React.VoidFunctionComponent = () => {
-  const { t } = useTranslation("support");
-  return (
-    <PageLayout>
-      <div className="mx-auto max-w-7xl px-8 pt-16">
-        <h1 className="text-5xl">Support</h1>
-        <div className="py-16 lg:flex">
-          <div className="mb-8 grow">
-            <h2 className="mb-4 text-3xl">General</h2>
-            <Disclosure
-              as="div"
-              className="mb-4 rounded-lg bg-white p-2 shadow-md"
-            >
-              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
-                <Trans t={t} i18nKey="howDoIShareQuestion" />
-              </Disclosure.Button>
-              <Disclosure.Panel className="text py-2 px-3">
-                <Trans
-                  t={t}
-                  i18nKey="howDoIShareAnswer"
-                  components={{ b: <strong /> }}
-                />
-              </Disclosure.Panel>
-            </Disclosure>
-            <Disclosure
-              as="div"
-              className="mb-4 rounded-lg bg-white p-2 shadow-md"
-            >
-              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
-                <Trans
-                  t={t}
-                  i18nKey="canRalllyDoQuestion"
-                  components={{ em: <em /> }}
-                />
-              </Disclosure.Button>
-              <Disclosure.Panel className="text py-2 px-3">
-                <Trans
-                  t={t}
-                  i18nKey="canRalllyDoAnswer"
-                  components={{
-                    a: (
-                      <a href="https://github.com/lukevella/rallly/discussions" />
-                    ),
-                  }}
-                />
-              </Disclosure.Panel>
-            </Disclosure>
-            <Disclosure
-              as="div"
-              className="mb-4 rounded-lg bg-white p-2 shadow-md"
-            >
-              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
-                {t("legacyPollsQuestion")}
-              </Disclosure.Button>
-              <Disclosure.Panel className="text py-2 px-3">
-                <Trans
-                  t={t}
-                  i18nKey="legacyPollsAnswer"
-                  components={{ a: <a href="mailto:support@rallly.co" /> }}
-                />
-              </Disclosure.Panel>
-            </Disclosure>
-            <Disclosure
-              as="div"
-              className="mb-4 rounded-lg bg-white p-2 shadow-md"
-            >
-              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
-                {t("contributeQuestion")}
-              </Disclosure.Button>
-              <Disclosure.Panel className="text py-2 px-3">
-                <Trans
-                  t={t}
-                  i18nKey="contributeAnswer"
-                  components={{
-                    a: <a href="https://github.com/sponsors/lukevella" />,
-                  }}
-                />
-              </Disclosure.Panel>
-            </Disclosure>
-            <h2 className="mb-4 mt-8 text-3xl">Privacy & Security</h2>
-            <Disclosure
-              as="div"
-              className="mb-4 rounded-lg bg-white p-2 shadow-md"
-            >
-              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
-                {t("isMyDataSafeQuestion")}
-              </Disclosure.Button>
-              <Disclosure.Panel className="text py-2 px-3">
-                <Trans
-                  t={t}
-                  i18nKey="isMyDataSafeAnswer"
-                  components={{ a: <a href="mailto:support@rallly.co" /> }}
-                />
-              </Disclosure.Panel>
-            </Disclosure>
-            <h2 className="mb-4 mt-8 text-3xl">Self-hosting</h2>
-            <Disclosure
-              as="div"
-              className="mb-4 rounded-lg bg-white p-2 shadow-md"
-            >
-              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
-                {t("selfHostQuestion")}
-              </Disclosure.Button>
-              <Disclosure.Panel className="text py-2 px-3">
-                <Trans
-                  t={t}
-                  i18nKey="selfHostAnswer"
-                  components={{
-                    a: <a href="https://github.com/lukevella/rallly" />,
-                  }}
-                />
-              </Disclosure.Panel>
-            </Disclosure>
-            <Disclosure
-              as="div"
-              className="mb-4 rounded-lg bg-white p-2 shadow-md"
-            >
-              <Disclosure.Button className="font-slate block w-full cursor-pointer rounded-md py-2 px-3 text-left text-lg font-medium hover:bg-slate-50 hover:text-indigo-500 active:bg-slate-100">
-                {t("canYouHelpMeSetUpRalllyQuestion")}
-              </Disclosure.Button>
-              <Disclosure.Panel className="text py-2 px-3">
-                <Trans
-                  t={t}
-                  i18nKey="canYouHelpMeSetUpRalllyAnswer"
-                  components={{
-                    a: (
-                      <a href="https://github.com/lukevella/rallly/discussions" />
-                    ),
-                  }}
-                />
-              </Disclosure.Panel>
-            </Disclosure>
-          </div>
-          <div className="shrink-0 lg:ml-16 lg:w-96">
-            <div className="rounded-xl bg-white p-8 shadow-md">
-              <div className="flex max-w-3xl items-start lg:flex-col">
-                <Chat className="mr-8 mb-8 hidden w-20 shrink-0 text-indigo-500 sm:block" />
-                <div>
-                  <h2 className="mb-2">{t("supportContactTitle")}</h2>
-                  <p className="text">
-                    <Trans
-                      t={t}
-                      i18nKey="supportContactMessage"
-                      components={{
-                        a: <a href="mailto:support@rallly.co" />,
-                      }}
-                    />
-                  </p>
-                  <Button icon={<Chat />} onClick={showCrispChat}>
-                    {t("chatWithSupport")}
-                  </Button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </PageLayout>
-  );
-};
-
-export default Support;

next.config.js

@@ -26,6 +26,16 @@ const moduleExports = {
   typescript: {
     ignoreBuildErrors: true,
   },
+  async redirects() {
+    return [
+      {
+        source: "/support",
+        destination: "https://support.rallly.co",
+        permanent: true,
+      },
+    ];
+  },
+
   async rewrites() {
     return [
       {

pages/support.tsx

@@ -1,16 +0,0 @@
-import { GetStaticProps } from "next";
-import { serverSideTranslations } from "next-i18next/serverSideTranslations";
-
-export { default } from "@/components/support";
-
-export const getStaticProps: GetStaticProps = async ({ locale = "en" }) => {
-  try {
-    return {
-      props: {
-        ...(await serverSideTranslations(locale, ["homepage", "support"])),
-      },
-    };
-  } catch {
-    return { notFound: true };
-  }
-};