mirror of
https://github.com/LemmyNet/lemmy-ui.git
synced 2024-11-10 02:15:11 +00:00
Match more specific locales to supported ones (#1241)
To do this, replace the current system for choosing the language with one that makes use of i18next features. Co-authored-by: Yuri Pieters <yuri@zopatista.com> Co-authored-by: Dessalines <dessalines@users.noreply.github.com>
This commit is contained in:
parent
79f4009541
commit
882efe128a
|
@ -2,7 +2,8 @@ import { htmlToText } from "html-to-text";
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import { Helmet } from "inferno-helmet";
|
import { Helmet } from "inferno-helmet";
|
||||||
import { httpExternalPath } from "../../env";
|
import { httpExternalPath } from "../../env";
|
||||||
import { getLanguages, md } from "../../utils";
|
import { i18n } from "../../i18next";
|
||||||
|
import { md } from "../../utils";
|
||||||
|
|
||||||
interface HtmlTagsProps {
|
interface HtmlTagsProps {
|
||||||
title: string;
|
title: string;
|
||||||
|
@ -17,11 +18,10 @@ export class HtmlTags extends Component<HtmlTagsProps, any> {
|
||||||
const url = httpExternalPath(this.props.path);
|
const url = httpExternalPath(this.props.path);
|
||||||
const desc = this.props.description;
|
const desc = this.props.description;
|
||||||
const image = this.props.image;
|
const image = this.props.image;
|
||||||
const lang = getLanguages()[0];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Helmet title={this.props.title}>
|
<Helmet title={this.props.title}>
|
||||||
<html lang={lang == "browser" ? "en" : lang} />
|
<html lang={i18n.resolvedLanguage} />
|
||||||
|
|
||||||
{["title", "og:title", "twitter:title"].map(t => (
|
{["title", "og:title", "twitter:title"].map(t => (
|
||||||
<meta key={t} property={t} content={this.props.title} />
|
<meta key={t} property={t} content={this.props.title} />
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { Component } from "inferno";
|
import { Component } from "inferno";
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import { i18n } from "../../i18next";
|
import { i18n } from "../../i18next";
|
||||||
import { capitalizeFirstLetter, getLanguages } from "../../utils";
|
import { capitalizeFirstLetter } from "../../utils";
|
||||||
import { Icon } from "./icon";
|
import { Icon } from "./icon";
|
||||||
|
|
||||||
interface MomentTimeProps {
|
interface MomentTimeProps {
|
||||||
|
@ -15,9 +15,7 @@ export class MomentTime extends Component<MomentTimeProps, any> {
|
||||||
constructor(props: any, context: any) {
|
constructor(props: any, context: any) {
|
||||||
super(props, context);
|
super(props, context);
|
||||||
|
|
||||||
const lang = getLanguages();
|
moment.locale([...i18n.languages]);
|
||||||
|
|
||||||
moment.locale(lang);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createdAndModifiedTimes() {
|
createdAndModifiedTimes() {
|
||||||
|
|
|
@ -25,7 +25,6 @@ import {
|
||||||
fetchCommunities,
|
fetchCommunities,
|
||||||
fetchThemeList,
|
fetchThemeList,
|
||||||
fetchUsers,
|
fetchUsers,
|
||||||
getLanguages,
|
|
||||||
myAuth,
|
myAuth,
|
||||||
myAuthRequired,
|
myAuthRequired,
|
||||||
personToChoice,
|
personToChoice,
|
||||||
|
@ -1058,12 +1057,12 @@ export class Settings extends Component<any, SettingsState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleInterfaceLangChange(i: Settings, event: any) {
|
handleInterfaceLangChange(i: Settings, event: any) {
|
||||||
|
const newLang = event.target.value ?? "browser";
|
||||||
|
i18n.changeLanguage(newLang === "browser" ? navigator.languages : newLang);
|
||||||
|
|
||||||
i.setState(
|
i.setState(
|
||||||
s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
|
s => ((s.saveUserSettingsForm.interface_language = event.target.value), s)
|
||||||
);
|
);
|
||||||
i18n.changeLanguage(
|
|
||||||
getLanguages(i.state.saveUserSettingsForm.interface_language).at(0)
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
handleDiscussionLanguageChange(val: number[]) {
|
handleDiscussionLanguageChange(val: number[]) {
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import i18next, { i18nTyped, Resource } from "i18next";
|
import i18next, { i18nTyped, Resource } from "i18next";
|
||||||
|
import { UserService } from "./services";
|
||||||
import { ar } from "./translations/ar";
|
import { ar } from "./translations/ar";
|
||||||
import { bg } from "./translations/bg";
|
import { bg } from "./translations/bg";
|
||||||
import { ca } from "./translations/ca";
|
import { ca } from "./translations/ca";
|
||||||
|
@ -30,7 +31,7 @@ import { sv } from "./translations/sv";
|
||||||
import { vi } from "./translations/vi";
|
import { vi } from "./translations/vi";
|
||||||
import { zh } from "./translations/zh";
|
import { zh } from "./translations/zh";
|
||||||
import { zh_Hant } from "./translations/zh_Hant";
|
import { zh_Hant } from "./translations/zh_Hant";
|
||||||
import { getLanguages } from "./utils";
|
import { isBrowser } from "./utils";
|
||||||
|
|
||||||
export const languages = [
|
export const languages = [
|
||||||
{ resource: ar, code: "ar", name: "العربية" },
|
{ resource: ar, code: "ar", name: "العربية" },
|
||||||
|
@ -73,12 +74,31 @@ function format(value: any, format: any): any {
|
||||||
return format === "uppercase" ? value.toUpperCase() : value;
|
return format === "uppercase" ? value.toUpperCase() : value;
|
||||||
}
|
}
|
||||||
|
|
||||||
i18next.init({
|
class LanguageDetector {
|
||||||
|
static readonly type = "languageDetector";
|
||||||
|
|
||||||
|
detect() {
|
||||||
|
const langs: string[] = [];
|
||||||
|
|
||||||
|
const myLang =
|
||||||
|
UserService.Instance.myUserInfo?.local_user_view.local_user
|
||||||
|
.interface_language ?? "browser";
|
||||||
|
|
||||||
|
if (myLang !== "browser") langs.push(myLang);
|
||||||
|
|
||||||
|
if (isBrowser()) langs.push(...navigator.languages);
|
||||||
|
|
||||||
|
return langs;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i18next.use(LanguageDetector).init({
|
||||||
debug: false,
|
debug: false,
|
||||||
compatibilityJSON: "v3",
|
compatibilityJSON: "v3",
|
||||||
|
supportedLngs: languages.map(l => l.code),
|
||||||
|
nonExplicitSupportedLngs: true,
|
||||||
// load: 'languageOnly',
|
// load: 'languageOnly',
|
||||||
// initImmediate: false,
|
// initImmediate: false,
|
||||||
lng: getLanguages()[0],
|
|
||||||
fallbackLng: "en",
|
fallbackLng: "en",
|
||||||
resources,
|
resources,
|
||||||
interpolation: { format },
|
interpolation: { format },
|
||||||
|
|
|
@ -42,7 +42,7 @@ import moment from "moment";
|
||||||
import tippy from "tippy.js";
|
import tippy from "tippy.js";
|
||||||
import Toastify from "toastify-js";
|
import Toastify from "toastify-js";
|
||||||
import { getHttpBase } from "./env";
|
import { getHttpBase } from "./env";
|
||||||
import { i18n, languages } from "./i18next";
|
import { i18n } from "./i18next";
|
||||||
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
|
import { CommentNodeI, DataType, IsoData, VoteType } from "./interfaces";
|
||||||
import { HttpService, UserService } from "./services";
|
import { HttpService, UserService } from "./services";
|
||||||
|
|
||||||
|
@ -399,31 +399,6 @@ export function debounce<T extends any[], R>(
|
||||||
} as (...e: T) => R;
|
} as (...e: T) => R;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getLanguages(
|
|
||||||
override?: string,
|
|
||||||
myUserInfo = UserService.Instance.myUserInfo
|
|
||||||
): string[] {
|
|
||||||
const myLang = myUserInfo?.local_user_view.local_user.interface_language;
|
|
||||||
const lang = override || myLang || "browser";
|
|
||||||
|
|
||||||
if (lang == "browser" && isBrowser()) {
|
|
||||||
return getBrowserLanguages();
|
|
||||||
} else {
|
|
||||||
return [lang];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getBrowserLanguages(): string[] {
|
|
||||||
// Intersect lemmy's langs, with the browser langs
|
|
||||||
const langs = languages ? languages.map(l => l.code) : ["en"];
|
|
||||||
|
|
||||||
// NOTE, mobile browsers seem to be missing this list, so append en
|
|
||||||
const allowedLangs = navigator.languages
|
|
||||||
.concat("en")
|
|
||||||
.filter(v => langs.includes(v));
|
|
||||||
return allowedLangs;
|
|
||||||
}
|
|
||||||
|
|
||||||
export async function fetchThemeList(): Promise<string[]> {
|
export async function fetchThemeList(): Promise<string[]> {
|
||||||
return fetch("/css/themelist").then(res => res.json());
|
return fetch("/css/themelist").then(res => res.json());
|
||||||
}
|
}
|
||||||
|
@ -1276,7 +1251,7 @@ export function personSelectName({
|
||||||
|
|
||||||
export function initializeSite(site?: GetSiteResponse) {
|
export function initializeSite(site?: GetSiteResponse) {
|
||||||
UserService.Instance.myUserInfo = site?.my_user;
|
UserService.Instance.myUserInfo = site?.my_user;
|
||||||
i18n.changeLanguage(getLanguages()[0]);
|
i18n.changeLanguage();
|
||||||
if (site) {
|
if (site) {
|
||||||
setupEmojiDataModel(site.custom_emojis ?? []);
|
setupEmojiDataModel(site.custom_emojis ?? []);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue