fedi/lemmy-ui
1
0
Fork 0
mirror of https://github.com/LemmyNet/lemmy-ui.git synced 2024-11-10 02:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Match more specific locales to supported ones (#1241)

Browse source 
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:
Yuri Pieters 2023-06-16 15:49:23 +01:00 committed by GitHub
parent 79f4009541
commit 882efe128a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/shared/components/common/html-tags.tsx
View file

@ -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} />

6
src/shared/components/common/moment-time.tsx
View file

@ -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() {

7
src/shared/components/person/settings.tsx
View file

@ -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[]) {

26
src/shared/i18next.ts
View file

@ -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 },

29
src/shared/utils.ts
View file

@ -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 ?? []);
} }