Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add browser language detector to automatically switch to default browser lang #2022

Merged
merged 18 commits into from
Aug 7, 2023
Merged

feat: add browser language detector to automatically switch to default browser lang #2022

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
926e022
fix: add variable scope
anshgoyalevil May 9, 2023
03a01ad
Merge branch 'master' into master
anshgoyalevil May 10, 2023
d178462
Merge branch 'master' into master
akshatnema May 10, 2023
365fbc3
Merge branch 'asyncapi:master' into master
anshgoyalevil May 11, 2023
f1804d7
Merge branch 'asyncapi:master' into master
anshgoyalevil Jun 1, 2023
a4dd336
Merge branch 'asyncapi:master' into master
anshgoyalevil Jun 1, 2023
66a1328
Merge branch 'asyncapi:master' into master
anshgoyalevil Jul 3, 2023
0ca220b
Merge branch 'asyncapi:master' into master
anshgoyalevil Jul 5, 2023
847df59
Merge branch 'asyncapi:master' into master
anshgoyalevil Jul 13, 2023
a525645
Merge branch 'asyncapi:master' into master
anshgoyalevil Jul 22, 2023
67e7911
Merge branch 'asyncapi:master' into master
anshgoyalevil Aug 2, 2023
359993a
add browserLangageDetector
anshgoyalevil Aug 2, 2023
752850d
add browser-api verifier
anshgoyalevil Aug 2, 2023
61d3a4e
add browser-api verifier
anshgoyalevil Aug 2, 2023
0fb6787
Merge branch 'master' into browser
anshgoyalevil Aug 2, 2023
f6ae27f
Merge branch 'master' into browser
anshgoyalevil Aug 6, 2023
a4a2bbf
Merge branch 'asyncapi:master' into browser
anshgoyalevil Aug 7, 2023
962ad49
modify browser lang detector and index.js
anshgoyalevil Aug 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 14 additions & 4 deletions components/navigation/NavBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
languages,
useTranslation,
} from "../../lib/i18n";
import browserLanguageDetector from "../../lib/browserLanguageDetector";

const isMobile = isMobileDevice();
const uniqueLangs = [...new Set(["EN", "DE"])].map((repo) => ({
Expand All @@ -35,10 +36,15 @@ export default function NavBar({
const { pathname, query, asPath } = router;
const [open, setOpen] = useState();
const [mobileMenuOpen, setMobileMenuOpen] = useState();
const [lang, setLang] = useState("en");
const { i18n } = useTranslation();

const changeLanguage = async (locale) => {
const changeLanguage = async (locale, langPicker) => {

// Verifies if the language change is from langPicker or the browser-api
if(langPicker){
localStorage.setItem('i18nLang', locale);
}

// Detect current language
const slug = asPath.split("/")[1];
const langSlug = languages.includes(slug) && slug;
Expand Down Expand Up @@ -66,6 +72,11 @@ export default function NavBar({
router.push(href);
};

// To be enabled on the last PR
// useEffect(() => {
// changeLanguage(browserLanguageDetector(), false);
// }, []);

function outsideClick(menu) {
if (open !== menu) return;
setOpen(null);
Expand Down Expand Up @@ -172,8 +183,7 @@ export default function NavBar({
{/* <LanguageSelect
options={uniqueLangs}
onChange={(value) => {
setLang(value.toLowerCase());
changeLanguage(value.toLowerCase());
changeLanguage(value.toLowerCase(), true);
}}
className=""
selected={i18n.language.toLocaleUpperCase()}
Expand Down
36 changes: 36 additions & 0 deletions lib/browserLanguageDetector.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
const { i18n } = require("./../next-i18next-static-site.config");

// Converts languages like 'en-US' to 'en'
const convertLanguageCode = (code) => {
const baseLanguageCode = code.split('-')[0];
return baseLanguageCode;
};

function browserLanguageDetector() {

// Fetch the language stored inside localStorage
const localStorageLanguage = localStorage.getItem('i18nLang');

if (localStorageLanguage) {
return localStorageLanguage;
}

// Load available languages from i18n object
const availableLanguages = i18n.languages;

// Load user's default languages from browser settings
const browserDefaultLanguages = navigator.languages;

const convertedLanguages = browserDefaultLanguages.map((code) => convertLanguageCode(code));

// Check if the top priority language is available inside i18n object
for (var i = 0; i < convertedLanguages.length; i++) {
if (availableLanguages.includes(convertedLanguages[i])) {
return convertedLanguages[i];
}
}
// Default to 'en' in all other cases
return 'en';
}

export default browserLanguageDetector;
3 changes: 2 additions & 1 deletion pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ import NewsroomSection from '../components/newsroom/NewsroomSection'
import { languageDetection } from "../lib/i18n";

function HomePage() {
languageDetection();
//To be enabled in a future PR
//languageDetection();
return (
<>
<Head />
Expand Down