feat(i18n): increase i18n key (#1362)

* feat(i18n): increase i18n key

* feat(i18n): add FEM

* remove fem + code format

* fix: type build

* feat(i18n): cookie banner

* prettier

* revert to ts instead of json

---------

Co-authored-by: bautistaaa <chrisbautistaaa@gmail.com>

apps/web/src/app/[locale]/_components/community/community.tsx

@@ -8,9 +8,12 @@ import { contributors } from '../../../../../public/contributors';
 import styles from './community.module.css';
 import { useEffect, useRef } from 'react';
 import { Contributor } from './contributor';
+import { useScopedI18n } from '~/locales/client';
 
 // million-ignore
 export function Community() {
+  const t = useScopedI18n('landing.community');
+  const gt = useScopedI18n('general');
   const innerScrollerRef = useRef<HTMLDivElement | null>(null);
   const innerScrollerRef2 = useRef<HTMLDivElement | null>(null);
   const innerScrollerRef3 = useRef<HTMLDivElement | null>(null);
@@ -84,16 +87,13 @@ export function Community() {
                 <div className="rounded-full bg-white/80 px-3 py-1 dark:bg-black/80">
                   <span className="flex select-none items-center bg-gradient-to-r from-[#31bdc6] to-[#3178c6] bg-clip-text text-transparent">
                     <GitBranch className="h-4 w-4 stroke-[#31bdc6] stroke-2 sm:mr-2" />
-                    <span className="hidden sm:block">By developers, for developers</span>
+                    <span className="hidden sm:block">{t('byDevforDev')}</span>
                   </span>
                 </div>
               </div>
-              <h2 className="mt-2 text-center text-4xl font-bold lg:text-left">
-                Built by the community
-              </h2>
+              <h2 className="mt-2 text-center text-4xl font-bold lg:text-left">{t('title')}</h2>
               <p className="max-w-[55ch] bg-transparent px-8 text-center leading-8 text-black/60 dark:text-white/50 lg:px-0 lg:text-left">
-                TypeHero is free, open-source, and built by developers just like you. These are some
-                of the contributors who made this possible so far.
+                {t('description')}
               </p>
               <div className="flex flex-col-reverse gap-3 sm:flex-row">
                 <a
@@ -112,7 +112,7 @@ export function Community() {
                     <title>Discord</title>
                     <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
                   </svg>
-                  Join the Discord
+                  {gt('join.discord')}
                 </a>
                 <a
                   target="_blank"
@@ -130,7 +130,7 @@ export function Community() {
                     <title>GitHub</title>
                     <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
                   </svg>
-                  Contribute on GitHub
+                  {gt('contribute.github')}
                 </a>
               </div>
             </div>

apps/web/src/app/[locale]/_components/features.tsx

@@ -74,7 +74,7 @@ export async function Features() {
                 'scale-[190%] sm:scale-[120%] md:scale-100 rounded-2xl max-md:rounded-md left-[50%] sm:top-[49%] top-[69%] md:top-auto w-[50%] sm:left-[39%] md:-bottom-[2%] xl:-bottom-[12%] md:w-[77%]',
                 'md:group-hover:scale-105 md:group-hover:-translate-x-2',
               )}
-              description="Engage in TypeScript challenges to strengthen your grasp of the type system and advanced features"
+              description={t('imageCard.description')}
               bgClass="md:bg-gradient-to-br"
               image={{
                 dark1: FeatureCardChallengeDark2,
@@ -83,12 +83,12 @@ export async function Features() {
                 light2: FeatureCardChallengeLight1,
                 alt: 'Something',
               }}
-              title="Type Challenges"
+              title={t('imageCard.title')}
             />
             <CollaborativeEnvironmentCard
-              description="Developers can share solutions and engage in discussions through commenting"
+              description={t('collaborativeEnvironment.description')}
               bgClass="md:bg-gradient-to-bl"
-              title="Collaborative Environment"
+              title={t('collaborativeEnvironment.title')}
             />
             <ChallengeCreationCard
               step1img1Class={clsx(
@@ -133,9 +133,9 @@ export async function Features() {
               title="Challenge Creation"
             />
             <CuratedTracksCard
-              description="Tracks are curated challenges, spanning various topics and difficulty levels, to advance your TypeScript skills."
+              description={t('curatedTracks.description')}
               bgClass="md:bg-gradient-to-tl"
-              title="Learning Tracks"
+              title={t('curatedTracks.title')}
             />
           </div>
         </div>

apps/web/src/app/[locale]/_components/hero-challenge-card.tsx

@@ -2,6 +2,7 @@ import type { Difficulty } from '@repo/db/types';
 import { clsx } from 'clsx';
 import { motion, type SVGMotionProps } from 'framer-motion';
 import type { ReactNode } from 'react';
+import { useScopedI18n } from '~/locales/client';
 
 function getRandomWidth() {
   const min = 100;
@@ -44,8 +45,10 @@ export function HeroChallengeCard({
   prompt,
   title,
   className,
-  difficulty,
+  difficulty = 'HARD',
 }: FakeChallengeCardProps) {
+  const t = useScopedI18n('general');
+
   return (
     <div
       className={clsx(className, {
@@ -56,11 +59,9 @@ export function HeroChallengeCard({
       <p className="translate-x-1 text-lg font-medium">{title}</p>
       <div className="flex gap-3">
         <div
-          className={`inline-flex w-fit translate-x-1 items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold text-white duration-300 group-hover/card:-translate-x-0 group-hover/card:-translate-y-1 group-hover/card:shadow-[0.5rem_0.5rem_0.25rem_-0.25rem_#0004] dark:text-black ${
-            COLORS_BY_DIFFICULTY[difficulty || 'HARD']
-          }`}
+          className={`inline-flex w-fit translate-x-1 items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-semibold text-white duration-300 group-hover/card:-translate-x-0 group-hover/card:-translate-y-1 group-hover/card:shadow-[0.5rem_0.5rem_0.25rem_-0.25rem_#0004] dark:text-black ${COLORS_BY_DIFFICULTY[difficulty]}`}
         >
-          {difficulty || 'HARD'}
+          {t(`difficulty.${difficulty}`).toUpperCase()}
         </div>
         <div className="flex w-fit items-center justify-center rounded-full bg-transparent bg-zinc-600 px-2.5 py-1 pl-1.5 pr-2 text-xs font-bold text-neutral-50 duration-300 group-hover/card:-translate-x-1 group-hover/card:-translate-y-1 group-hover/card:shadow-[0.5rem_0.5rem_0.25rem_-0.25rem_#0004] dark:bg-zinc-700 dark:text-white">
           @{username}

apps/web/src/app/[locale]/_components/hero-illustration.tsx

@@ -3,6 +3,7 @@
 import { motion } from 'framer-motion';
 import { useIsMobile } from '~/utils/useIsMobile';
 import { HeroChallengeCard } from './hero-challenge-card';
+import { useScopedI18n } from '~/locales/client';
 
 export function BackgroundGrid() {
   return (
@@ -20,6 +21,7 @@ export function BackgroundGrid() {
 
 export function HeroIllustration() {
   const isMobile = useIsMobile();
+  const t = useScopedI18n('landing.hero');
 
   if (isMobile) {
     return null;
@@ -50,8 +52,8 @@ export function HeroIllustration() {
           username="bigmang"
           className="absolute"
           difficulty="EASY"
-          prompt="Implement a union type of number and string"
-          title="Implement a union type of number and string"
+          prompt={t('challenge1.prompt')}
+          title={t('challenge1.title')}
         />
       </motion.div>
       <motion.div
@@ -74,8 +76,8 @@ export function HeroIllustration() {
           username="matt"
           className="absolute"
           difficulty="HARD"
-          prompt="Convert a string literal to a number"
-          title="String to Number"
+          prompt={t('challenge2.prompt')}
+          title={t('challenge2.title')}
         />
       </motion.div>
     </div>

apps/web/src/app/[locale]/_components/newsletter-banner.tsx

@@ -4,20 +4,20 @@ import { Mail } from '@repo/ui/icons';
 import { Balancer } from 'react-wrap-balancer';
 import styles from './newsletter.module.css';
 import { Button } from '@repo/ui/components/button';
+import { getScopedI18n } from '~/locales/server';
+
+export async function NewsletterBanner() {
+  const t = await getScopedI18n('landing.newsletter');
 
-export function NewsletterBanner() {
   return (
     <section className={clsx(styles.backdrop, 'relative overflow-hidden')}>
       <div className="container relative grid grid-cols-1 items-center justify-center py-[64px] md:grid-cols-2">
         <div className="flex flex-col gap-8 px-8 pb-8 pt-48 sm:px-16 sm:pt-20 md:px-0 md:pb-0 md:pt-16">
           <h1 className="max-w-[13ch] text-4xl font-bold md:max-w-none">
-            <Balancer>Stay Informed</Balancer>
+            <Balancer>{t('title')}</Balancer>
           </h1>
           <p className="leading-8 text-black/60 dark:text-white/50">
-            <Balancer>
-              Interested in the future of the platform? Be the first to get updates on content, new
-              features, and more!
-            </Balancer>
+            <Balancer>{t('description')}</Balancer>
           </p>
         </div>
         <Button
@@ -27,7 +27,7 @@ export function NewsletterBanner() {
           <Link href="/newsletter">
             <span className="inline-flex h-full w-fit items-center gap-1 rounded-[10px] bg-white/90 px-4 py-2 text-black transition-all duration-300 group-hover:rounded-2xl group-hover:bg-white/0 group-hover:text-white dark:bg-black/80 dark:text-white group-hover:dark:bg-black/0 dark:group-hover:text-black">
               <Mail className="mr-1 h-4 w-4 stroke-[3]" />
-              Subscribe to our newsletter
+              {t('subscribe')}
             </span>
           </Link>
         </Button>

apps/web/src/app/[locale]/aot-2023/_components/index.tsx

@@ -6,7 +6,6 @@ import { getAllFlags } from '~/utils/feature-flags';
 import { CountdownTimer } from '../../_components/countdown-timer';
 import { About } from './about';
 import { CardGrid } from './card-grid';
-import { FemPromo } from './fem-promo';
 import { Suspense } from 'react';
 import { AOTCardSkeleton } from './aot-card-skeleton';
 
@@ -68,7 +67,6 @@ export async function AotLandingPage() {
                 </a>
               </Button>
             </div>
-            <FemPromo blurb="Elevate your TypeScript with our trusted partner" className="mt-5" />
           </div>
         </div>
         <CardGrid />

apps/web/src/app/[locale]/explore/_components/index.tsx

@@ -3,7 +3,6 @@ import { Suspense } from 'react';
 import { Footsies } from '~/components/footsies';
 import { ExploreSection } from './explore-section';
 import { ExploreSectionSkeleton } from './explore-section-skeleton';
-import { FemPromo } from '../../aot-2023/_components/fem-promo';
 
 // CI fails without this
 export const dynamic = 'force-dynamic';
@@ -24,9 +23,6 @@ export async function Explore() {
             <span className="font-semibold dark:text-neutral-200">perfect</span> challenge!
           </p>
         </div>
-        <div className="container flex items-center justify-center">
-          <FemPromo blurb="Elevate your TypeScript with our trusted partner" />
-        </div>
         <Suspense fallback={<ExploreSectionSkeleton />}>
           <ExploreSection
             title="Great for Beginners"

apps/web/src/components/cookie-banner.tsx

@@ -3,8 +3,10 @@
 import { useEffect, useState } from 'react';
 import { Button } from '@repo/ui/components/button';
 import { useLocalStorage } from '~/utils/useLocalStorage';
+import { useScopedI18n } from '~/locales/client';
 
 export const CookieBanner = () => {
+  const t = useScopedI18n('cookieBanner');
   const [mounted, setMounted] = useState(false);
   const [showCookieBanner, setShowCookieBanner] = useLocalStorage('cookie-banner', 'true');
 
@@ -18,17 +20,14 @@ export const CookieBanner = () => {
 
   return (
     <div className="animate-in fade-in bg-background fixed bottom-0 right-0 z-[999] flex w-full flex-col gap-2 rounded-b-none rounded-t-2xl border p-4 sm:bottom-2 sm:right-2 sm:w-[330px] sm:rounded-2xl">
-      <div className="text-center text-xl font-semibold">TypeHero Uses Cookies 🍪</div>
-      <div className="text-sm">
-        We use cookies to improve your experience. By using TypeHero, you consent to our use of
-        cookies.
-      </div>
+      <div className="text-center text-xl font-semibold">{t('title')}</div>
+      <div className="text-sm">{t('message')}</div>
       <div className="flex gap-2 self-end">
         <Button variant="outline" size="sm" onClick={() => setShowCookieBanner('false')}>
-          Close
+          {t('close')}
         </Button>
         <Button variant="outline" size="sm" onClick={() => setShowCookieBanner('false')}>
-          Ok
+          {t('ok')}
         </Button>
       </div>
     </div>

apps/web/src/components/footsies.tsx

@@ -1,14 +1,16 @@
-import { Binary, Github, Twitter } from '@repo/ui/icons';
 import Link from 'next/link';
+import { Binary, Github, Twitter } from '@repo/ui/icons';
 import { ThemeButton } from './Navigation/theme-button';
+import { getScopedI18n } from '~/locales/server';
+
+export async function Footsies() {
+  const t = await getScopedI18n('footsies');
 
-export function Footsies() {
   return (
     <footer className="flex flex-col items-center gap-2 px-8 pb-12 text-sm font-light sm:px-16 sm:pb-20 sm:pt-6 md:px-0 md:py-12">
       <div className="container flex flex-col-reverse justify-between gap-2 md:flex-row md:items-end">
         <span>
-          Built with <Binary className="inline-block h-5 w-5 text-[#31bdc6]" /> by the Trash Devs
-          community.
+          {t('built', { icon: <Binary className="inline-block h-5 w-5 text-[#31bdc6]" /> })}
         </span>
         <div className="flex items-center gap-2">
           <ThemeButton />
@@ -19,7 +21,7 @@ export function Footsies() {
             className="group rounded-lg p-2"
             href="https://github.com/typehero/typehero"
           >
-            <span className="sr-only">TypeHero on Github</span>
+            <span className="sr-only">{t('onGithub')}</span>
             <Github className="h-5 w-5 duration-150 group-hover:scale-110 group-hover:fill-black dark:group-hover:fill-white" />
           </a>
           <a
@@ -28,7 +30,7 @@ export function Footsies() {
             className="group rounded-lg p-2"
             href="https://twitter.com/typeheroapp"
           >
-            <span className="sr-only">TypeHero on Twitter</span>
+            <span className="sr-only">{t('onTwitter')}</span>
             <Twitter className="h-5 w-5 duration-150 group-hover:scale-110 group-hover:fill-black dark:group-hover:fill-white" />
           </a>
         </div>
@@ -39,14 +41,14 @@ export function Footsies() {
             href="/privacy"
             className="dark:hover:text-primary-foreground transition-colors duration-300 hover:text-neutral-900 hover:underline"
           >
-            Privacy Policy
+            {t('PrivacyPolicy')}
           </Link>{' '}
           |{' '}
           <Link
             href="/tos"
             className="dark:hover:text-primary-foreground transition-colors duration-300 hover:text-neutral-900 hover:underline"
           >
-            Terms of Service
+            {t('TermsOfService')}
           </Link>
         </span>
         <span>