Skip to content

Commit

Permalink
add built-in i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
anshgoyalevil committed Aug 4, 2023
1 parent 481fd1f commit c2cfeba
Show file tree
Hide file tree
Showing 13 changed files with 185 additions and 118 deletions.
2 changes: 1 addition & 1 deletion components/Hero.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import AlgoliaSearch, { SearchButton } from './AlgoliaSearch'; // Import Algolia
import IconLoupe from './icons/Loupe';
import {
useTranslation,
} from "next-i18next-static-site";
} from "../lib/i18n";

export default function Hero({ className = ''}) {

Expand Down
2 changes: 1 addition & 1 deletion components/link.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { defaultLanguage, languages } from "next-i18next-static-site";
import { defaultLanguage, languages } from "../lib/i18n";

const LinkComponent = ({ children, locale, ...props }) => {
const router = useRouter();
Expand Down
2 changes: 1 addition & 1 deletion components/navigation/NavBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
defaultLanguage,
languages,
useTranslation,
} from "next-i18next-static-site";
} from "../../lib/i18n";

const isMobile = isMobileDevice();
const uniqueLangs = [...new Set(["EN", "DE"])].map((repo) => ({
Expand Down
4 changes: 2 additions & 2 deletions cypress/test/Hero.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ describe('Hero Component', () => {
it('displays the correct content', () => {
mount(<Hero />);

cy.contains('Building the future of');
cy.contains('Event-Driven Architectures (EDA)');
cy.contains('main.header');
cy.contains('main.subHeader');
cy.contains('Open-Source tools to easily build and maintain your event-driven architecture.');
cy.contains('Read the docs');
cy.contains('Quick search...');
Expand Down
148 changes: 148 additions & 0 deletions lib/i18n.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";
import i18next from "i18next";
import {
initReactI18next,
useTranslation,
withTranslation,
Translation,
Trans
} from "react-i18next";
import nextI18nextStaticSiteConfig from "../next-i18next-static-site.config";
var defaultConfig = {
allowHydration: true,
languages: ["en"],
defaultLanguage: "en",
namespaces: ["common"],
defaultNamespace: "common",
cookieName: "lang",
cookieOptions: { expires: 365, path: "/" }
};
var config = {
...defaultConfig,
languages: nextI18nextStaticSiteConfig.i18n.languages,
defaultLanguage: nextI18nextStaticSiteConfig.i18n.defaultLanguage,
namespaces: nextI18nextStaticSiteConfig.i18n.namespaces,
defaultNamespace: nextI18nextStaticSiteConfig.i18n.defaultNamespace
};
var languages = config.languages;
var defaultLanguage = config.defaultLanguage;
var namespaces = config.namespaces;
var defaultNamespace = config.defaultNamespace;
var defaultNamespace2 = config.defaultNamespace;
var cookieName = config.cookieName;
var createI18nextInstance = (locales, language) => {
const plugins = [
initReactI18next
];
const i18nInstance = i18next;
plugins.map((plugin) => i18nInstance.use(plugin));
i18nInstance.init({
resources: locales,
cleanCode: true,
lng: language,
supportedLngs: config.languages,
fallbackLng: language ? language : config.defaultLanguage,
ns: config.namespaces,
defaultNS: config.defaultNamespace,
interpolation: {
escapeValue: false
},
react: {
useSuspense: false
},
load: "languageOnly"
});
return i18nInstance;
};
var globalI18nextInstance = null;
var i18nextInstance = (language, locales) => {
if (!globalI18nextInstance) {
globalI18nextInstance = createI18nextInstance(locales, language);
return globalI18nextInstance;
} else {
globalI18nextInstance.changeLanguage(language);
return globalI18nextInstance;
}
};
var loaded = false;
var I18nProvider = (props) => {
var _a;
const [hydration, setHydration] = useState(false);
const options = { ...config, ...props.i18n };
if (!((_a = props.i18n) == null ? void 0 : _a.locales)) {
throw new Error("locales object was not passed into I18nProvider");
}
const router = useRouter();
const { asPath, query } = router;
const slug = asPath.split("/")[1];
const langSlug = config.languages.includes(slug) && slug;
const language = (query.lang || langSlug || config.defaultLanguage).toString();
const pathLocale = (query.lang || langSlug).toString();
if (pathLocale && pathLocale !== "false") {
Cookies.set(config.cookieName, pathLocale, config.cookieOptions);
}
if (!loaded) {
i18nextInstance(language, props.i18n.locales);
}
const { i18n: i18n2 } = useTranslation();
useEffect(() => {
i18n2.services.resourceStore.data = props.i18n.locales;
i18n2.changeLanguage(language);
}, [i18n2, language, props.i18n.locales]);
useEffect(() => {
loaded = true;
i18n2.changeLanguage(language);
}, [i18n2, language]);
useEffect(() => {
const hasWindow = typeof window !== "undefined";
if (hasWindow && options.allowHydration) {
setHydration(true);
}
}, [options.allowHydration]);
return hydration ? props.children : null;
};
function getAllLanguageSlugs() {
return config.languages.map((lang) => {
return { params: { lang } };
});
}
function getLanguage(lang) {
return config.languages.includes(lang) ? lang : config.defaultLanguage;
}
var languageDetection = () => {
const router = useRouter();
useEffect(() => {
let cookieLocale = Cookies.get(cookieName) || void 0;
let browserLocale = (navigator.languages && navigator.languages.length ? navigator.languages[0] : navigator.language) || void 0;
if (browserLocale) {
browserLocale = browserLocale.slice(0, 2);
}
if (cookieLocale && languages.includes(cookieLocale)) {
router.push("/" + cookieLocale);
} else if (browserLocale && languages.includes(browserLocale)) {
router.push("/" + browserLocale);
} else {
router.push("/" + defaultLanguage);
}
}, [router, defaultLanguage]);
return null;
};
export {
I18nProvider,
Trans,
Translation,
cookieName,
defaultLanguage,
defaultNamespace,
defaultNamespace2,
getAllLanguageSlugs,
getLanguage,
i18nextInstance,
languageDetection,
languages,
namespaces,
useTranslation,
withTranslation
};
2 changes: 1 addition & 1 deletion lib/locales.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { languages, namespaces } from "next-i18next-static-site";
import { languages, namespaces } from "../lib/i18n";

function loadLocales() {
// Load all locales, required for next-i18n-static-site
Expand Down
10 changes: 2 additions & 8 deletions next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ const gemoji = require('remark-gemoji-to-emoji');
const a11yEmoji = require('@fec/remark-a11y-emoji');
const slug = require('remark-slug');
const headingId = require('remark-heading-id');
const { i18n } = require("./next-i18next-static-site.config");

const withMDX = require('@next/mdx')({
extension: /\.mdx?$/,
Expand All @@ -21,9 +20,7 @@ const withMDX = require('@next/mdx')({
},
});

const withTM = require("next-transpile-modules")(["next-i18next-static-site"]);

module.exports = withTM(withMDX({
module.exports = withMDX({
pageExtensions: ['js', 'md'],
eslint: {
ignoreDuringBuilds: true,
Expand All @@ -39,7 +36,4 @@ module.exports = withTM(withMDX({

return config;
},
publicRuntimeConfig: {
i18n,
},
}));
});
Loading

0 comments on commit c2cfeba

Please sign in to comment.