Merge branch 'home-i18n-fixes' into 'master'

Couple of i18n and homepage fixes

See merge request framasoft/mobilizon!610

js/src/i18n/en_US.json

@@ -174,7 +174,7 @@
   "Instance Terms": "Instance Terms",
   "Instance settings": "Instance settings",
   "Instances": "Instances",
-  "Join {instance}, a Mobilizon instance": "Join {instance}, a Mobilizon instance",
+  "Join <b>{instance}</b>, a Mobilizon instance": "Join <b>{instance}</b>, a Mobilizon instance",
   "Last published event": "Last published event",
   "Last week": "Last week",
   "Learn more about Mobilizon": "Learn more about Mobilizon",
@@ -466,7 +466,6 @@
   "Contact": "Contact",
   "Website": "Website",
   "Actor": "Actor",
-  "Statut": "Statut",
   "Text": "Text",
   "All group members and other eventual server admins will still be able to view this information.": "All group members and other eventual server admins will still be able to view this information.",
   "Upcoming events": "Upcoming events",

js/src/i18n/fr_FR.json

@@ -336,7 +336,7 @@
   "Invited": "Invité·e",
   "Italic": "Italique",
   "Join group": "Rejoindre le groupe",
-  "Join {instance}, a Mobilizon instance": "Rejoignez {instance}, une instance Mobilizon",
+  "Join <b>{instance}</b>, a Mobilizon instance": "Rejoignez <b>{instance}</b>, une instance Mobilizon",
   "Keep the entire conversation about a specific topic together on a single page.": "Rassemblez sur une seule page toute la conversation à propos d'un sujet spécifique.",
   "Key words": "Mots clés",
   "Language": "Langue",

js/src/utils/i18n.ts

@@ -4,7 +4,7 @@ import { DateFnsPlugin } from "@/plugins/dateFns";
 import en from "../i18n/en_US.json";
 import langs from "../i18n/langs.json";
 
-const DEFAULT_LOCALE = "en";
+const DEFAULT_LOCALE = "en_US";
 
 let language = document.documentElement.getAttribute("lang") as string;
 language = language || ((window.navigator as any).userLanguage || window.navigator.language).replace(/-/, "_");
@@ -13,36 +13,47 @@ export const locale =
 
 Vue.use(VueI18n);
 
-console.log(en);
-console.log(locale);
 export const i18n = new VueI18n({
   locale: DEFAULT_LOCALE, // set locale
-  messages: (en as unknown) as VueI18n.LocaleMessages, // set locale messages
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  fallbackLocale: "en",
+  // @ts-ignore
+  messages: en, // set locale messages
+  fallbackLocale: DEFAULT_LOCALE,
 });
-console.log(i18n);
 
-Vue.use(DateFnsPlugin, { locale });
+const loadedLanguages = [DEFAULT_LOCALE];
-
-const loadedLanguages = ["en"];
 
 function setI18nLanguage(lang: string): string {
   i18n.locale = lang;
   return lang;
 }
 
-function fileForLanguage(lang: string) {
+function fileForLanguage(matches: Record<string, string>, lang: string) {
-  const matches: Record<string, string> = {
-    fr: "fr_FR",
-    en: "en_US",
-  };
   if (Object.prototype.hasOwnProperty.call(matches, lang)) {
     return matches[lang];
   }
   return lang;
 }
 
-export async function loadLanguageAsync(lang: string): Promise<string> {
+function vueI18NfileForLanguage(lang: string) {
+  const matches: Record<string, string> = {
+    fr: "fr_FR",
+    en: "en_US",
+  };
+  return fileForLanguage(matches, lang);
+}
+
+function dateFnsfileForLanguage(lang: string) {
+  const matches: Record<string, string> = {
+    en_US: "en-US",
+    en: "en-US",
+  };
+  return fileForLanguage(matches, lang);
+}
+
+Vue.use(DateFnsPlugin, { locale: dateFnsfileForLanguage(locale) });
+
+async function loadLanguageAsync(lang: string): Promise<string> {
   // If the same language
   if (i18n.locale === lang) {
     return Promise.resolve(setI18nLanguage(lang));
@@ -53,15 +64,13 @@ export async function loadLanguageAsync(lang: string): Promise<string> {
     return Promise.resolve(setI18nLanguage(lang));
   }
 
-  console.log(fileForLanguage(lang));
   // If the language hasn't been loaded yet
-  return import(/* webpackChunkName: "lang-[request]" */ `@/i18n/${fileForLanguage(lang)}.json`).then(
+  const newMessages = await import(
-    (newMessages: any) => {
+    /* webpackChunkName: "lang-[request]" */ `@/i18n/${vueI18NfileForLanguage(lang)}.json`
-      i18n.setLocaleMessage(lang, newMessages.default);
-      loadedLanguages.push(lang);
-      return setI18nLanguage(lang);
-    }
   );
+  i18n.setLocaleMessage(lang, newMessages.default);
+  loadedLanguages.push(lang);
+  return setI18nLanguage(lang);
 }
 
 loadLanguageAsync(locale);

js/src/views/Home.vue

@@ -4,7 +4,9 @@
       <div class="hero-body">
         <div class="container">
           <h1 class="title">{{ $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
-          <p>{{ $t("Join {instance}, a Mobilizon instance", { instance: config.name }) }}</p>
+          <p
+            v-html="$t('Join <b>{instance}</b>, a Mobilizon instance', { instance: config.name })"
+          />
           <p class="instance-description">{{ config.description }}</p>
           <!-- We don't invite to find other instances yet -->
           <!-- <p v-if="!config.registrationsOpen">
@@ -154,6 +156,9 @@ import Subtitle from "../components/Utils/Subtitle.vue";
     loggedUser: {
       query: USER_SETTINGS,
       fetchPolicy: "no-cache",
+      error() {
+        return null;
+      },
     },
     config: CONFIG,
     currentUserParticipations: {
@@ -340,6 +345,7 @@ export default class Home extends Vue {
 <style lang="scss" scoped>
 main > div > .container {
   background: $white;
+  padding: 1rem 1.5rem 3rem;
 }
 
 .search-autocomplete {
@@ -382,9 +388,12 @@ span.view-all {
 }
 
 section.hero {
-  margin-top: -3px;
   background: lighten($secondary, 20%);
 
+  & > .hero-body {
+    padding: 1rem 1.5rem 3rem;
+  }
+
   .title {
     color: $background-color;
   }