From ffbf920dbdb5b47fa4f9a770e802c69d1e87e647 Mon Sep 17 00:00:00 2001
From: Luke Vella <me@lukevella.com>
Date: Wed, 26 Apr 2023 15:18:35 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=B7=E2=80=8D=E2=99=82=EF=B8=8FAdd=20cu?=
 =?UTF-8?q?stom=20Trans=20component=20(#681)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/i18next-scanner.config.js            |  7 +---
 apps/web/src/components/home/hero.tsx         | 14 +++----
 .../components/layouts/page-layout/footer.tsx | 38 +++++++++++--------
 apps/web/src/components/trans.tsx             |  8 ++++
 turbo.json                                    |  1 +
 5 files changed, 40 insertions(+), 28 deletions(-)
 create mode 100644 apps/web/src/components/trans.tsx

diff --git a/apps/web/i18next-scanner.config.js b/apps/web/i18next-scanner.config.js
index 37e54b9a9..d25244827 100644
--- a/apps/web/i18next-scanner.config.js
+++ b/apps/web/i18next-scanner.config.js
@@ -6,12 +6,7 @@ module.exports = {
     keySeparator: ".",
     nsSeparator: false,
     defaultNs: "app",
-    defaultValue: function (lng) {
-      if (lng === "en") {
-        return "__STRING_NOT_TRANSLATED__";
-      }
-      return "";
-    },
+    defaultValue: "__STRING_NOT_TRANSLATED__",
     lngs: ["en"],
     ns: ["app"],
     plural: false,
diff --git a/apps/web/src/components/home/hero.tsx b/apps/web/src/components/home/hero.tsx
index 5815da75f..2d50ecdf5 100644
--- a/apps/web/src/components/home/hero.tsx
+++ b/apps/web/src/components/home/hero.tsx
@@ -1,15 +1,15 @@
 import { m } from "framer-motion";
 import Link from "next/link";
-import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
+import { Trans } from "@/components/trans";
+
 import { DayjsProvider } from "../../utils/dayjs";
 import { UserAvatarProvider } from "../poll/user-avatar";
 import PollDemo from "./poll-demo";
 import ScribbleArrow from "./scribble-arrow.svg";
 
 const Hero: React.FunctionComponent = () => {
-  const { t } = useTranslation();
   const names = ["Peter", "Christine", "Samantha", "Joseph"];
 
   return (
@@ -17,7 +17,6 @@ const Hero: React.FunctionComponent = () => {
       <div className="my-8 text-center lg:text-left">
         <h1 className="mb-4 text-4xl font-bold text-slate-800 sm:text-5xl">
           <Trans
-            t={t}
             i18nKey="homepage.heroText"
             components={{
               br: <br />,
@@ -26,7 +25,7 @@ const Hero: React.FunctionComponent = () => {
           />
         </h1>
         <div className="mb-12 text-xl text-slate-500">
-          {t("homepage.heroSubText")}
+          <Trans i18nKey="homepage.heroSubText" />
         </div>
         <div className="space-x-3">
           <Link
@@ -34,7 +33,7 @@ const Hero: React.FunctionComponent = () => {
             locale={false}
             className="bg-primary-500 hover:bg-primary-600/90 active:bg-primary-500/90 rounded-md px-5 py-3 font-semibold text-white  shadow-sm transition-all hover:text-white hover:no-underline hover:shadow-md"
           >
-            {t("homepage.getStarted")}
+            <Trans i18nKey="homepage.getStarted" defaults="Get started" />
           </Link>
           <Link
             href="/demo"
@@ -42,7 +41,7 @@ const Hero: React.FunctionComponent = () => {
             className="rounded-md bg-slate-500 px-5 py-3 font-semibold text-white shadow-sm  transition-all hover:bg-slate-500/90 hover:text-white hover:no-underline hover:shadow-md active:bg-slate-600/90"
             rel="nofollow"
           >
-            {t("homepage.liveDemo")}
+            <Trans i18nKey="homepage.liveDemo" defaults="Live demo" />
           </Link>
         </div>
       </div>
@@ -67,7 +66,8 @@ const Hero: React.FunctionComponent = () => {
                 animate={{ opacity: 1, translateY: 0 }}
                 transition={{ type: "spring", delay: 2 }}
               >
-                {t("homepage.perfect")} 🤩
+                <Trans i18nKey="homepage.perfect" defaults="Perfect!" />
+                <span className="ml-2">🤩</span>
                 <ScribbleArrow className="absolute -right-8 top-3 text-slate-500" />
               </m.div>
               <m.div
diff --git a/apps/web/src/components/layouts/page-layout/footer.tsx b/apps/web/src/components/layouts/page-layout/footer.tsx
index 91c5596f8..3f2aef7e1 100644
--- a/apps/web/src/components/layouts/page-layout/footer.tsx
+++ b/apps/web/src/components/layouts/page-layout/footer.tsx
@@ -6,9 +6,9 @@ import {
 } from "@rallly/icons";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Trans, useTranslation } from "next-i18next";
 import * as React from "react";
 
+import { Trans } from "@/components/trans";
 import DigitalOcean from "~/digitalocean.svg";
 import Logo from "~/logo.svg";
 import Sentry from "~/sentry.svg";
@@ -17,7 +17,6 @@ import Vercel from "~/vercel-logotype-dark.svg";
 import { LanguageSelect } from "../../poll/language-selector";
 
 const Footer: React.FunctionComponent = () => {
-  const { t } = useTranslation();
   const router = useRouter();
   return (
     <div className="mt-16 bg-gradient-to-b from-gray-50/0 via-gray-50 to-gray-50 ">
@@ -28,7 +27,6 @@ const Footer: React.FunctionComponent = () => {
             <div className="mb-8 mt-4 text-slate-400">
               <p>
                 <Trans
-                  t={t}
                   i18nKey="common.footerSponsor"
                   components={{
                     a: (
@@ -42,7 +40,6 @@ const Footer: React.FunctionComponent = () => {
               </p>
               <div>
                 <Trans
-                  t={t}
                   i18nKey="common.footerCredit"
                   components={{
                     a: (
@@ -73,19 +70,26 @@ const Footer: React.FunctionComponent = () => {
                 className="hover:bg-primary-600 focus:ring-primary-600 active:bg-primary-600 inline-flex h-8 items-center rounded-full bg-slate-100 pl-2 pr-3 text-sm text-slate-500 transition-colors hover:text-white hover:no-underline focus:ring-2 focus:ring-offset-1"
               >
                 <StarIcon className="mr-2 inline-block w-5" />
-                <span>{t("common.starOnGithub")}</span>
+                <span>
+                  <Trans
+                    i18nKey="common.starOnGithub"
+                    defaults="Star us on Github"
+                  />
+                </span>
               </a>
             </div>
           </div>
           <div className="lg:w-1/6">
-            <div className="mb-4 font-medium">{t("homepage.links")}</div>
+            <div className="mb-4 font-medium">
+              <Trans i18nKey="homepage.links" defaults="Links" />
+            </div>
             <ul className="space-y-2">
               <li>
                 <a
                   className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
                   href="https://github.com/lukevella/rallly/discussions"
                 >
-                  {t("common.discussions")}
+                  <Trans i18nKey="common.discussions" defaults="Discussions" />
                 </a>
               </li>
               <li>
@@ -93,7 +97,7 @@ const Footer: React.FunctionComponent = () => {
                   href="https://blog.rallly.co"
                   className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
                 >
-                  {t("common.blog")}
+                  <Trans i18nKey="common.blog" defaults="Blog" />
                 </Link>
               </li>
               <li>
@@ -101,13 +105,15 @@ const Footer: React.FunctionComponent = () => {
                   href="https://support.rallly.co"
                   className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
                 >
-                  {t("common.support")}
+                  <Trans i18nKey="common.support" defaults="Support" />
                 </a>
               </li>
             </ul>
           </div>
           <div className="lg:w-1/6">
-            <div className="mb-4 font-medium">{t("common.poweredBy")}</div>
+            <div className="mb-4 font-medium">
+              <Trans i18nKey="common.poweredBy" defaults="Powered by" />
+            </div>
             <div className="block space-y-4">
               <div>
                 <a
@@ -133,7 +139,9 @@ const Footer: React.FunctionComponent = () => {
             </div>
           </div>
           <div className="lg:w-2/6">
-            <div className="mb-4 font-medium">{t("common.language")}</div>
+            <div className="mb-4 font-medium">
+              <Trans i18nKey="common.language" defaults="Language" />
+            </div>
             <LanguageSelect
               className="mb-4 w-full"
               onChange={(locale) => {
@@ -145,7 +153,7 @@ const Footer: React.FunctionComponent = () => {
               className="hover:border-primary-600 hover:text-primary-600 inline-flex items-center rounded-md border px-3 py-2 text-xs text-slate-500"
             >
               <TranslateIcon className="mr-2 h-5 w-5" />
-              {t("common.volunteerTranslator")} &rarr;
+              <Trans i18nKey="common.volunteerTranslator" /> &rarr;
             </a>
           </div>
         </div>
@@ -155,7 +163,7 @@ const Footer: React.FunctionComponent = () => {
               href="/privacy-policy"
               className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
             >
-              {t("common.privacyPolicy")}
+              <Trans i18nKey="common.privacyPolicy" />
             </Link>
           </li>
           <li>
@@ -163,7 +171,7 @@ const Footer: React.FunctionComponent = () => {
               href="/cookie-policy"
               className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
             >
-              {t("common.cookiePolicy")}
+              <Trans i18nKey="common.cookiePolicy" />
             </Link>
           </li>
           <li>
@@ -171,7 +179,7 @@ const Footer: React.FunctionComponent = () => {
               href="/terms-of-use"
               className="inline-block font-normal text-slate-500 hover:text-slate-800 hover:no-underline"
             >
-              {t("common.termsOfUse")}
+              <Trans i18nKey="common.termsOfUse" />
             </Link>
           </li>
         </ul>
diff --git a/apps/web/src/components/trans.tsx b/apps/web/src/components/trans.tsx
new file mode 100644
index 000000000..5e54d0a09
--- /dev/null
+++ b/apps/web/src/components/trans.tsx
@@ -0,0 +1,8 @@
+import { Trans as BaseTrans, useTranslation } from "next-i18next";
+
+type TransWithContextProps = Omit<React.ComponentProps<typeof BaseTrans>, "t">;
+
+export const Trans = (props: TransWithContextProps) => {
+  const { t } = useTranslation();
+  return <BaseTrans t={t} {...props} />;
+};
diff --git a/turbo.json b/turbo.json
index 55d179cd8..8b23376bb 100644
--- a/turbo.json
+++ b/turbo.json
@@ -63,6 +63,7 @@
       "persistent": true
     },
     "i18n:scan": {
+      "inputs": ["src/**"],
       "outputs": ["public/locales/**"]
     }
   }