fix(i18n): load translations from fs

AmruthPillai · Nov 14, 2023 · 6303071 · 6303071
1 parent d1f5401
commit 6303071
Show file tree

Hide file tree

Showing 10 changed files with 47 additions and 26 deletions.
diff --git a/apps/client/src/components/locale-switch.tsx b/apps/client/src/components/locale-switch.tsx
@@ -65,8 +65,7 @@ export const LocaleSwitch = () => {
                         i18n.locale === option.value && "opacity-100",
                       )}
                     />
-                    {option.label}{" "}
-                    <span className="ml-1.5 text-xs opacity-50">({option.value})</span>
+                    {option.label} <span className="ml-1 text-xs opacity-50">({option.value})</span>
                   </CommandItem>
                 ))}
               </div>

diff --git a/apps/client/src/libs/lingui.ts b/apps/client/src/libs/lingui.ts
@@ -1,17 +1,8 @@
 import { i18n } from "@lingui/core";
 
-import { axios } from "./axios";
-
 export const defaultLocale = "en-US";
 
-axios(`translation/${defaultLocale}`).then((response) => {
-  const messages = response.data;
-  i18n.loadAndActivate({ locale: defaultLocale, messages });
-});
-
 export async function dynamicActivate(locale: string) {
-  const response = await axios(`translation/${locale}`);
-  const messages = response.data;
-
+  const { messages } = await import(`../locales/${locale}/messages.po`);
   i18n.loadAndActivate({ locale, messages });
 }
diff --git a/apps/client/src/pages/dashboard/settings/_sections/profile.tsx b/apps/client/src/pages/dashboard/settings/_sections/profile.tsx
@@ -99,7 +99,14 @@ export const ProfileSettings = () => {
                     {...field}
                     value={field.value}
                     onValueChange={field.onChange}
-                    options={languages.map(({ locale, name }) => ({ label: name, value: locale }))}
+                    options={languages.map(({ locale, name }) => ({
+                      label: (
+                        <>
+                          {name} <span className="ml-1 text-xs opacity-50">({locale})</span>
+                        </>
+                      ),
+                      value: locale,
+                    }))}
                   />
                 </div>
                 <FormDescription>

diff --git a/apps/client/src/pages/home/sections/contributors/index.tsx b/apps/client/src/pages/home/sections/contributors/index.tsx
@@ -48,8 +48,8 @@ export const ContributorsSection = () => {
             key={index}
             viewport={{ once: true }}
             initial={{ opacity: 0, scale: 0 }}
+            className={cn(index >= 30 && "hidden lg:block")}
             whileInView={{ opacity: 1, scale: 1, transition: { delay: index * 0.025 } }}
-            className={cn(index > 30 && "hidden lg:block")}
           >
             <a href={contributor.url} target="_blank" rel="noreferrer">
               <Tooltip content={contributor.name}>

diff --git a/apps/client/src/pages/home/sections/faq/index.tsx b/apps/client/src/pages/home/sections/faq/index.tsx
@@ -9,7 +9,9 @@ import { useLanguages } from "@/client/services/resume/translation";
 // Who are you, and why did you build Reactive Resume?
 const Question1 = () => (
   <AccordionItem value="1">
-    <AccordionTrigger>Who are you, and why did you build Reactive Resume?</AccordionTrigger>
+    <AccordionTrigger className="text-left leading-relaxed">
+      Who are you, and why did you build Reactive Resume?
+    </AccordionTrigger>
     <AccordionContent className="prose max-w-none dark:prose-invert">
       <p>
         I'm Amruth Pillai, just another run-off-the-mill developer working at Elara Digital GmbH in
@@ -52,7 +54,9 @@ const Question1 = () => (
 // How much does it cost to run Reactive Resume?
 const Question2 = () => (
   <AccordionItem value="2">
-    <AccordionTrigger>How much does it cost to run Reactive Resume?</AccordionTrigger>
+    <AccordionTrigger className="text-left leading-relaxed">
+      How much does it cost to run Reactive Resume?
+    </AccordionTrigger>
     <AccordionContent className="prose max-w-none dark:prose-invert">
       <p>
         It's not much honestly.{" "}
@@ -95,7 +99,9 @@ const Question2 = () => (
 // Other than donating, how can I support you?
 const Question3 = () => (
   <AccordionItem value="3">
-    <AccordionTrigger>Other than donating, how can I support you?</AccordionTrigger>
+    <AccordionTrigger className="text-left leading-relaxed">
+      Other than donating, how can I support you?
+    </AccordionTrigger>
     <AccordionContent className="prose max-w-none dark:prose-invert">
       <p>
         <strong>If you speak a language other than English</strong>, sign up to be a translator on
@@ -127,7 +133,9 @@ const Question4 = () => {
 
   return (
     <AccordionItem value="4">
-      <AccordionTrigger>What languages are supported on Reactive Resume?</AccordionTrigger>
+      <AccordionTrigger className="text-left leading-relaxed">
+        What languages are supported on Reactive Resume?
+      </AccordionTrigger>
       <AccordionContent className="prose max-w-none dark:prose-invert">
         <p>
           Here are the languages currently supported by Reactive Resume, along with their respective
@@ -180,7 +188,9 @@ const Question4 = () => {
 // How does the OpenAI Integration work?
 const Question5 = () => (
   <AccordionItem value="5">
-    <AccordionTrigger>How does the OpenAI Integration work?</AccordionTrigger>
+    <AccordionTrigger className="text-left leading-relaxed">
+      How does the OpenAI Integration work?
+    </AccordionTrigger>
     <AccordionContent className="prose max-w-none dark:prose-invert">
       <p>
         OpenAI has been a game-changer for all of us. I cannot tell you how much ChatGPT has helped
@@ -219,7 +229,7 @@ const Question5 = () => (
 export const FAQSection = () => {
   return (
     <section id="faq" className="container relative py-24 sm:py-32">
-      <div className="grid grid-cols-3 gap-x-12">
+      <div className="grid gap-12 lg:grid-cols-3">
         <div className="col-span-1 space-y-6">
           <h2 className="text-3xl font-bold">Frequently Asked Questions</h2>
 

diff --git a/apps/client/src/pages/home/sections/features/index.tsx b/apps/client/src/pages/home/sections/features/index.tsx
@@ -112,8 +112,8 @@ export const FeaturesSection = () => {
                   key={index}
                   viewport={{ once: true }}
                   initial={{ opacity: 0, x: -50 }}
+                  className={cn(featureLabel, feature.className)}
                   whileInView={{ opacity: 1, x: 0, transition: { delay: index * 0.1 } }}
-                  className={cn(featureLabel, feature.className, index > 8 && "hidden lg:flex")}
                 >
                   {feature.icon}
                   <h4>{feature.title}</h4>

diff --git a/apps/client/src/pages/home/sections/statistics/counter.tsx b/apps/client/src/pages/home/sections/statistics/counter.tsx
@@ -25,6 +25,7 @@ export const Counter = ({ from, to }: CounterProps) => {
   return (
     <motion.span
       ref={nodeRef}
+      viewport={{ once: true }}
       transition={{ duration: 0.5 }}
       initial={{ opacity: 0, scale: 0.1 }}
       whileInView={{ opacity: 1, scale: 1 }}

diff --git a/apps/client/src/pages/home/sections/statistics/index.tsx b/apps/client/src/pages/home/sections/statistics/index.tsx
@@ -9,7 +9,7 @@ type Statistic = {
 
 export const StatisticsSection = () => {
   const stats: Statistic[] = [
-    { name: t`GitHub Stars`, value: 11800 },
+    { name: t`GitHub Stars`, value: 12800 },
     { name: t`Users Signed Up`, value: 300000 },
     { name: t`Resumes Generated`, value: 400000 },
   ];
@@ -19,7 +19,7 @@ export const StatisticsSection = () => {
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <dl className="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
           {stats.map((stat, index) => (
-            <div key={index} className="mx-auto flex max-w-xs flex-col gap-y-4">
+            <div key={index} className="mx-auto flex max-w-xs flex-col gap-y-3">
               <dt className="text-base leading-7 opacity-60">{stat.name}</dt>
               <dd className="order-first text-3xl font-semibold tracking-tight sm:text-5xl">
                 <Counter from={0} to={stat.value} />+

diff --git a/apps/server/src/translation/translation.controller.ts b/apps/server/src/translation/translation.controller.ts
@@ -1,4 +1,4 @@
-import { Controller, Get, Header, Param } from "@nestjs/common";
+import { Controller, Get, Param } from "@nestjs/common";
 
 import { UtilsService } from "../utils/utils.service";
 import { TranslationService } from "./translation.service";
@@ -20,8 +20,6 @@ export class TranslationController {
   }
 
   @Get("/:locale")
-  @Header("Content-Type", "application/octet-stream")
-  @Header("Content-Disposition", 'attachment; filename="messages.po"')
   async translation(@Param("locale") locale: string) {
     return this.utils.getCachedOrSet(
       `translation:${locale}`,

diff --git a/apps/server/src/translation/translation.service.ts b/apps/server/src/translation/translation.service.ts
@@ -31,6 +31,7 @@ export class TranslationService {
   }
 
   async fetchLanguages() {
+    const isDevelopment = this.configService.get("NODE_ENV") === "development";
     const projectId = this.configService.get("CROWDIN_PROJECT_ID");
     const accessToken = this.configService.get("CROWDIN_ACCESS_TOKEN");
 
@@ -40,6 +41,20 @@ export class TranslationService {
     );
     const { data } = response.data as CrowdinResponse;
 
+    if (isDevelopment) {
+      data.push({
+        data: {
+          language: {
+            id: "zu-ZA",
+            locale: "zu-ZA",
+            editorCode: "zuza",
+            name: "Psuedo Locale",
+          },
+          translationProgress: 100,
+        },
+      });
+    }
+
     return data.map(({ data }) => {
       return {
         id: data.language.id,