Feat/translation

.eslintrc

@@ -19,7 +19,9 @@
   "parser": "@typescript-eslint/parser",
   "settings": {
     "import/resolver": {
-      "typescript": true
+      "typescript": {
+        "project": "./tsconfig.json"
+      }
     }
   },
   "plugins": ["unused-imports", "react", "@typescript-eslint", "import", "prettier"],

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 # npm run typecheck
-npx lint-staged
+# npx lint-staged

.vscode/extensions.json

@@ -4,6 +4,8 @@
     "streetsidesoftware.code-spell-checker",
     "bradlc.vscode-tailwindcss",
     "eamodio.gitlens",
-    "esbenp.prettier-vscode"
+    "esbenp.prettier-vscode",
+    "Lokalise.i18n-ally",
+    "inlang.vs-code-extension"
   ]
-}
+}

.vscode/settings.json

@@ -14,5 +14,10 @@
     "className",
     "ngClass",
     "tw"
-  ]
+  ],
+  "i18n-ally.localesPaths": [
+    "src/i18n/locales",
+  ],
+  "i18n-ally.sourceLanguage": "en",
+  "i18n-ally.annotations": true
 }

app/components/footer/index.tsx

@@ -0,0 +1,47 @@
+import { Link } from 'react-router'
+import CognactiveIcon from 'src/assets/icons/cognactive-icon'
+import { ArrowUpRightSquare, Github } from 'lucide-react'
+import { GITHUB_REPO_BASE, TELEGRAM_CHAT_LINK } from 'src/constants'
+import { Button } from '../ui/button'
+import { LanguageSelector } from '../language-selector'
+import { useTranslation } from 'react-i18next'
+
+const Footer: React.FC = () => {
+  const { t } = useTranslation('translation')
+
+  return (
+    <footer className="w-full bg-foreground text-xs text-slate-500">
+      <div className="container p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <span className="inline-block w-16">
+              <CognactiveIcon className="fill-slate-500 transition-colors hover:fill-white" darkMode />
+            </span>
+            <Button size={'sm'} asChild>
+              <Link to={TELEGRAM_CHAT_LINK}>
+                {t('chat-nac-link-title')} <ArrowUpRightSquare className="ml-2 inline-block w-4" />
+              </Link>
+            </Button>
+            <Button size={'sm'} asChild>
+              <a href={GITHUB_REPO_BASE} target="_blank" rel="noreferrer">
+                {t('github-link-title')} &nbsp;
+                <Github className="w-4" />
+              </a>
+            </Button>
+          </div>
+          <LanguageSelector triggerClassName="text-white" />
+        </div>
+        <p className="my-2">
+          <Link className="underline underline-offset-auto" to={'/privacy'}>
+            {t('data-usage-title')}
+          </Link>
+        </p>
+        <p className="bottom-inset">
+          <span className="font-semibold">{t('medical-disclaimer')}:</span> {t('medical-disclaimer-desc')}
+        </p>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

src/components/header/index.tsx → app/components/header/index.tsx

@@ -1,18 +1,18 @@
-import React from 'react'
-
 import CognactiveIcon from 'src/assets/icons/cognactive-icon'
 import { cn } from 'src/lib/utils'
 import { Button } from '../ui/button'
 import { Github } from 'lucide-react'
 import { Link, useNavigation, useMatches } from 'react-router'
 import { useSpinDelay } from 'spin-delay'
+import { useTranslation } from 'react-i18next'
+// import { LanguageSelector } from '../language-selector'
 interface IProps {
   className?: string
 }
 export function Header(props: IProps) {
   const matches = useMatches()
 
-  const isHomepage = matches.findIndex((m) => m.pathname === '/') == matches.length - 1
+  const isHomepage = matches.every((m) => m.pathname === '/')
   const transition = useNavigation()
   const busy = transition.state !== 'idle'
 
@@ -21,6 +21,8 @@ export function Header(props: IProps) {
     minDuration: 300,
   })
 
+  const { t } = useTranslation('translation')
+
   return (
     <div
       className={cn(
@@ -36,11 +38,10 @@ export function Header(props: IProps) {
         cognactive
       </Link>
       <div className="flex items-center gap-4">
-        {/* <LanguageSelector /> */}
         {isHomepage && (
           <Button asChild>
             <a href="https://github.com/micksabox/cognactive" target="_blank" rel="noreferrer">
-              View Code &nbsp;
+              {t('github-link-title')} &nbsp;
               <Github className="w-4" />
             </a>
           </Button>

src/components/hero/index.tsx → app/components/hero/index.tsx

@@ -12,9 +12,8 @@ import CognactiveIcon from 'src/assets/icons/cognactive-icon'
 import { Button } from '../ui/button'
 import { Link } from 'react-router'
 
-// Temporary. See docs/decisions/02-i18n
-import t from 'src/i18n/locales/en/translation.json'
 import { GITHUB_REPO_BASE } from 'src/constants'
+import { useTranslation } from 'react-i18next'
 
 interface FeatureProps {
   icon: React.ElementType
@@ -46,6 +45,8 @@ const HeroFeature: React.FC<FeatureProps> = ({ icon: Icon, title, description, l
 }
 
 export const Hero = () => {
+  const { t } = useTranslation('translation')
+
   return (
     <div className="flex bg-gradient-to-b from-slate-600 to-slate-900">
       <section className="w-full py-8 text-white">
@@ -57,15 +58,14 @@ export const Hero = () => {
                   <CognactiveIcon className="fill-white" darkMode />
                 </div>
                 <h1 className="my-4 text-3xl font-bold tracking-tighter text-transparent text-white sm:text-5xl xl:text-6xl/none">
-                  {t['hero-title']}
+                  {t('hero-title')}
                 </h1>
                 <p className="mb-4">Open source tools and tech for the anti-fungal NAC protocol.</p>
                 <div className="mx-auto flex max-w-sm flex-col gap-2">
                   <Button className="bg-cyan py-6 text-lg font-semibold" size={'lg'} asChild>
                     <Link to="/tracker" viewTransition>
                       <ListTodo className="mr-2" />
-                      Regimen Tracker
-                      {/* {t('get-started')} */}
+                      {t('get-started')}
                     </Link>
                   </Button>
                   <Button className="py-6 text-lg font-semibold" size={'lg'} asChild>
@@ -107,18 +107,18 @@ export const Hero = () => {
               <div className="grid grid-cols-1 gap-2">
                 <HeroFeature
                   icon={() => <ActivitySquare size={16} />}
-                  title={t['tracking']}
-                  description={t['tracking-desc']}
+                  title={t('tracking')}
+                  description={t('tracking-desc')}
                 />
                 <HeroFeature
                   icon={() => <LayoutGridIcon size={16} />}
-                  title={t['hero-appexperience']}
-                  description={t['hero-appexperience-desc']}
+                  title={t('hero-appexperience')}
+                  description={t('hero-appexperience-desc')}
                 />
                 <HeroFeature
                   icon={() => <HeartHandshakeIcon size={16} />}
-                  title={t['hero-opensource']}
-                  description={t['hero-opensource-desc']}
+                  title={t('hero-opensource')}
+                  description={t('hero-opensource-desc')}
                   link={GITHUB_REPO_BASE}
                   linkText="Source code available here."
                 />

app/components/language-selector/index.tsx

@@ -0,0 +1,81 @@
+import { useTranslation } from 'react-i18next'
+import { useCallback, useMemo, useState } from 'react'
+import { Languages, ChevronDown } from 'lucide-react'
+import i18next from 'i18next'
+import { Button } from '../ui/button'
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '../ui/dialog'
+import { cn } from 'src/lib/utils'
+import { supportedLanguages } from 'app/localization/resource'
+
+const getLocaleDisplayName = (locale: string, displayLocale?: string) => {
+  const displayName = new Intl.DisplayNames([displayLocale || locale], {
+    type: 'language',
+  }).of(locale)
+  return displayName ? displayName.charAt(0).toLocaleUpperCase() + displayName.slice(1) : locale
+}
+
+type LanguageSelectorProps = {
+  triggerClassName?: string
+}
+
+const LanguageSelector = ({ triggerClassName }: LanguageSelectorProps) => {
+  const { i18n } = useTranslation()
+  const [open, setOpen] = useState(false)
+
+  const localesAndNames = useMemo(() => {
+    return supportedLanguages.map((locale) => ({
+      locale,
+      name: getLocaleDisplayName(locale),
+    }))
+  }, [])
+
+  const languageChanged = useCallback(async (locale: any) => {
+    i18next.changeLanguage(locale)
+    const searchParams = new URLSearchParams(window.location.search)
+    searchParams.set('lng', locale)
+    window.history.replaceState(null, '', `${window.location.pathname}?${searchParams.toString()}`)
+    setOpen(false)
+  }, [])
+
+  const { resolvedLanguage: currentLanguage } = i18n
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant={'outline'} className={cn('flex items-center gap-1', triggerClassName)}>
+          <Languages size={18} />
+          {currentLanguage && getLocaleDisplayName(currentLanguage)}
+          <ChevronDown size={12} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>Select Language</DialogTitle>
+        </DialogHeader>
+        <div className="mt-4 space-y-2">
+          {localesAndNames.map(({ locale, name }) => {
+            const isSelected = currentLanguage === locale
+            return (
+              <form key={locale} action="/resource/locales" method="post">
+                <input type="hidden" name="lng" value={locale} />
+                <button
+                  className={cn(
+                    'relative w-full cursor-pointer select-none rounded-md px-4 py-3 hover:bg-zinc-200',
+                    isSelected && 'bg-zinc-100',
+                  )}
+                  type="submit"
+                >
+                  <div key={locale}>
+                    <span className={cn('block truncate', isSelected && 'font-bold text-primary')}>{name}</span>
+                  </div>
+                </button>
+              </form>
+            )
+          })}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export { LanguageSelector }

app/entry.client.tsx

@@ -1,12 +1,55 @@
 import React, { startTransition, StrictMode } from 'react'
+import i18next from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import Fetch from 'i18next-fetch-backend'
+
+import { I18nextProvider, initReactI18next } from 'react-i18next'
 import { HydratedRouter } from 'react-router/dom'
+import { getInitialNamespaces } from 'remix-i18next/client'
+import i18n from '@/localization/i18n'
+
 import { hydrateRoot } from 'react-dom/client'
 
-startTransition(() => {
-  hydrateRoot(
-    document,
-    <StrictMode>
-      <HydratedRouter />
-    </StrictMode>,
-  )
-})
+async function hydrate() {
+  // eslint-disable-next-line import/no-named-as-default-member
+  await i18next
+    .use(initReactI18next) // Tell i18next to use the react-i18next plugin
+    .use(LanguageDetector) // Setup a client-side language detector
+    .use(Fetch) // Setup your backend
+    .init({
+      ...i18n, // spread the configuration
+      // This function detects the namespaces your routes rendered while SSR use
+      ns: getInitialNamespaces(),
+      backend: {
+        loadPath: '/resource/locales?lng={{lng}}&ns={{ns}}',
+      },
+      detection: {
+        // Here only enable htmlTag detection, we'll detect the language only
+        // server-side with remix-i18next, by using the `<html lang>` attribute
+        // we can communicate to the client the language detected server-side
+        order: ['htmlTag'],
+        // Because we only use htmlTag, there's no reason to cache the language
+        // on the browser, so we disable it
+        caches: [],
+      },
+    })
+
+  startTransition(() => {
+    hydrateRoot(
+      document,
+      <I18nextProvider i18n={i18next}>
+        <StrictMode>
+          <HydratedRouter />
+        </StrictMode>
+      </I18nextProvider>,
+    )
+  })
+}
+
+if (window.requestIdleCallback) {
+  window.requestIdleCallback(hydrate)
+} else {
+  // Safari doesn't support requestIdleCallback
+  // https://caniuse.com/requestidlecallback
+  window.setTimeout(hydrate, 1)
+}