Better language detection / switching

.gitignore

@@ -22,4 +22,4 @@ yarn-error.log*
 
 
 src/translations.json
-
+src/translations

scripts/i18n-compile.sh

 #!/bin/bash -eux
 locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
-find locales -name '*.po' | xargs $(yarn bin)/gettext-compile --output src/translations.json
+mkdir -p src/translations
+
+for locale in $locales; do
+    $(yarn bin)/gettext-compile locales/$locale/LC_MESSAGES/app.po --output src/translations/$locale.json
+done

src/App.vue

@@ -10,7 +10,12 @@
         <label for="language" class="label">
           <translate translate-context="Label for language switcher">Language</translate>
         </label>
-        <select id="language" name="language" v-model="$language.current">
+        <select
+          id="language"
+          name="language"
+          :value="$language.current"
+          @change="switchLanguage($event.target.value)"
+        >
           <option
             v-for="(language, key) in $language.available"
             :key="key"
@@ -23,19 +28,60 @@
 </template>
 
 <script>
+import Vue from 'vue'
+
 require("typeface-noto-sans");
 require("typeface-montserrat");
+import locales from './locales'
 
 import Navigation from "./components/Navigation";
 export default {
   components: {
     Navigation
   },
+  created () {
+    this.autodetectLanguage()
+  },
   computed: {
     labels() {
       return {};
     }
+  },
+  methods: {
+    autodetectLanguage () {
+      let userLanguage = navigator.language || navigator.userLanguage
+      let available = locales.locales.map(e => { return e.code })
+      let self = this
+      let candidate
+      let matching = available.filter((a) => {
+        return userLanguage.replace('-', '_') === a
+      })
+      let almostMatching = available.filter((a) => {
+        return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
+      })
+      if (matching.length > 0) {
+        candidate = matching[0]
+      } else if (almostMatching.length > 0) {
+        candidate = almostMatching[0]
+      } else {
+        return
+      }
+      this.switchLanguage(candidate)
+    },
+    switchLanguage (newValue) {
+      let self = this
+      import(`./translations/${newValue}.json`).then((response) =>{
+        Vue.$translations[newValue] = response.default[newValue]
+      }).finally(() => {
+        // set current language twice, otherwise we seem to have a cache somewhere
+        // and rendering does not happen
+        self.$language.current = 'noop'
+        self.$language.current = newValue
+      })
+
+    }
   }
+
 };
 </script>
 <style lang="scss">

src/components/Navigation.vue

@@ -62,7 +62,6 @@
 <script>
 export default {
   data () {
-    console.log(this.$router)
     return {
       showMenu: false
     }