Skip to content

Commit 403ab02

Browse files
AlemTuzlakAlemTuzlak
committed
Updated localization + deps + converted husky to lefhook
1 parent 44809ac commit 403ab02

20 files changed

Lines changed: 1751 additions & 2495 deletions

File tree

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,5 @@ node_modules
22
/.cache
33
/build
44
.env
5-
coverage
5+
coverage
6+
.history

‎.husky/pre-commit‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.husky/pre-push‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/.server/README.md‎

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎app/entry.client.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,26 @@
11
import { RemixBrowser } from "@remix-run/react"
22
import i18next from "i18next"
33
import LanguageDetector from "i18next-browser-languagedetector"
4-
import Backend from "i18next-http-backend"
4+
import Fetch from "i18next-fetch-backend"
55
import { StrictMode, startTransition } from "react"
66
import { hydrateRoot } from "react-dom/client"
77
import { I18nextProvider, initReactI18next } from "react-i18next"
88
import { getInitialNamespaces } from "remix-i18next/client"
99
import i18n from "~/localization/i18n"
10-
import { resources } from "./localization/resource"
1110

1211
async function hydrate() {
1312
// eslint-disable-next-line import/no-named-as-default-member
1413
await i18next
1514
.use(initReactI18next) // Tell i18next to use the react-i18next plugin
1615
.use(LanguageDetector) // Setup a client-side language detector
17-
.use(Backend) // Setup your backend
16+
.use(Fetch) // Setup your backend
1817
.init({
1918
...i18n, // spread the configuration
2019
// This function detects the namespaces your routes rendered while SSR use
2120
ns: getInitialNamespaces(),
22-
backend: { loadPath: "/locales/{{lng}}/{{ns}}.json" },
23-
resources,
21+
backend: {
22+
loadPath: "/resource/locales?lng={{lng}}&ns={{ns}}",
23+
},
2424
detection: {
2525
// Here only enable htmlTag detection, we'll detect the language only
2626
// server-side with remix-i18next, by using the `<html lang>` attribute

‎app/entry.server.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ import { isbot } from "isbot"
99
import { renderToPipeableStream } from "react-dom/server"
1010
import { I18nextProvider, initReactI18next } from "react-i18next"
1111
import i18n from "./localization/i18n" // your i18n configuration file
12-
import i18next from "./localization/i18n.server"
13-
import { resources, returnLanguageIfSupported } from "./localization/resource"
12+
import i18next, { returnLanguageFromRequest } from "./localization/i18n.server"
13+
import { resources } from "./localization/resource"
1414

1515
const ABORT_DELAY = 5000
1616

@@ -20,14 +20,9 @@ export default async function handleRequest(
2020
responseHeaders: Headers,
2121
remixContext: EntryContext
2222
) {
23-
const url = new URL(request.url)
24-
const { pathname } = url
25-
26-
const lang = pathname.split("/")[1]
2723
const callbackName = isbot(request.headers.get("user-agent")) ? "onAllReady" : "onShellReady"
28-
2924
const instance = createInstance()
30-
const lng = returnLanguageIfSupported(lang) ?? (await i18next.getLocale(request))
25+
const lng = await returnLanguageFromRequest(request)
3126
const ns = i18next.getRouteNamespaces(remixContext)
3227

3328
await instance
@@ -37,7 +32,6 @@ export default async function handleRequest(
3732
...i18n, // spread the configuration
3833
lng, // The locale we detected above
3934
ns, // The namespaces the routes about to render wants to use
40-
backend: { loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json") },
4135
resources,
4236
})
4337

‎app/library/icon/icons/types.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
// This file is generated by icon spritesheet generator
22

3-
export type IconName = "ShoppingCart"
3+
export const iconNames = [
4+
"ShoppingCart",
5+
] as const
46

5-
export const iconNames = ["ShoppingCart"] as const
7+
export type IconName = typeof iconNames[number]

‎app/library/language-switcher/LanguageSwitcher.tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,18 @@ import { Link, useLocation } from "@remix-run/react"
22
import { useTranslation } from "react-i18next"
33
import { supportedLanguages } from "~/localization/resource"
44

5-
const constructTo = (pathName: string, language: string) => {
6-
const languageMatch = `/${language}`
7-
// If the path already starts with the language, we remove it because we are switching to another language.
8-
if (pathName.startsWith(languageMatch)) {
9-
return pathName.replace(languageMatch, "")
10-
}
11-
// We return the path as is if it doesn't have a language.
12-
return pathName
13-
}
14-
155
const LanguageSwitcher = () => {
166
const { i18n } = useTranslation()
177
const location = useLocation()
18-
const to = constructTo(location.pathname, i18n.language)
8+
const to = location.pathname
199

2010
return (
2111
<div className="flex gap-2 p-2 fixed top-0 right-0 w-min z-10">
2212
{supportedLanguages.map((language) => (
2313
<Link
2414
className="text-blue-500 hover:underline transition-all"
2515
key={language}
26-
to={`/${language}${to}`}
16+
to={`${to}?lng=${language}`}
2717
onClick={() => i18n.changeLanguage(language)}
2818
>
2919
{language}

‎app/localization/i18n.server.ts‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { resolve } from "node:path"
2-
import Backend from "i18next-fs-backend"
32
import { RemixI18Next } from "remix-i18next/server"
43
import i18n from "~/localization/i18n" // your i18n configuration file
4+
import type { Language } from "~/localization/resource"
55

66
const i18next = new RemixI18Next({
77
detection: {
@@ -16,10 +16,11 @@ const i18next = new RemixI18Next({
1616
loadPath: resolve("./public/locales/{{lng}}/{{ns}}.json"),
1717
},
1818
},
19-
// The i18next plugins you want RemixI18next to use for `i18n.getFixedT` inside loaders and actions.
20-
// E.g. The Backend plugin for loading translations from the file system
21-
// Tip: You could pass `resources` to the `i18next` configuration and avoid a backend here
22-
plugins: [Backend],
2319
})
2420

2521
export default i18next
22+
23+
export const returnLanguageFromRequest = async (request: Request) => {
24+
const lang = await i18next.getLocale(request)
25+
return lang as Language
26+
}

‎app/localization/i18n.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,4 @@ export default {
88
fallbackLng: "en",
99
// The default namespace of i18next is "translation", but you can customize it here
1010
defaultNS: "common",
11-
// Disabling suspense is recommended
12-
react: { useSuspense: false },
1311
}

0 commit comments

Comments
 (0)