Setup i18n

.gitignore

@@ -19,3 +19,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+
+src/translations.json
+

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

scripts/i18n-extract.sh

+#!/bin/bash -eux
+locales=$(tail -n +2 src/locales.js | sed -e 's/export default //' | jq '.locales[].code' | xargs echo)
+locales_dir="locales"
+sources=$(find src -name '*.vue' -o -name '*.html' 2> /dev/null)
+js_sources=$(find src -name '*.vue' -o -name '*.js')
+touch $locales_dir/app.pot
+
+# Create a main .pot template, then generate .po files for each available language.
+# Extract gettext strings from templates files and create a POT dictionary template.
+$(yarn bin)/gettext-extract --attribute v-translate --quiet --output $locales_dir/app.pot $sources
+xgettext --language=JavaScript --keyword=npgettext:1c,2,3 \
+    --from-code=utf-8 --join-existing --no-wrap \
+    --package-name=$(node -e "console.log(require('./package.json').name);") \
+    --package-version=$(node -e "console.log(require('./package.json').version);") \
+    --output $locales_dir/app.pot $js_sources \
+    --no-wrap
+
+# Generate .po files for each available language.
+echo $locales
+for lang in $locales; do \
+    po_file=$locales_dir/$lang/LC_MESSAGES/app.po; \
+    echo "msgmerge --update $po_file "; \
+    mkdir -p $(dirname $po_file); \
+    [ -f $po_file ] && msgmerge --lang=$lang --update $po_file $locales_dir/app.pot --no-wrap || msginit --no-wrap --no-translator --locale=$lang --input=$locales_dir/app.pot --output-file=$po_file; \
+    msgattrib --no-wrap --no-obsolete -o $po_file $po_file; \
+done;

scripts/i18n-weblate-to-origin.sh

+#!/bin/bash -eux
+integration_branch="translations-integration"
+git remote add weblate https://translate.funkwhale.audio/git/funkwhale/funkwhale.audio/ || echo "remote already exists"
+git fetch weblate
+git checkout weblate/master
+git reset --hard weblate/master
+git checkout -b $integration_branch || git checkout $integration_branch
+git reset --hard weblate/master
+git push -f origin $integration_branch
+
+echo "Branch created on pushed on origin/$integration_branch"
+echo "Open a merge request by visiting https://dev.funkwhale.audio/funkwhale/funkwhale.audio/merge_requests/new?merge_request%5Bsource_branch%5D=$integration_branch"

src/App.vue

@@ -5,25 +5,24 @@
       <router-link to="/about">About</router-link>
     </div>
     <router-view />
+    <footer>
+      <div :class="['navbar-menu', {'is-active': showNav}]">
+          <div class="navbar-end">
+            <div class="navbar-item">
+              <label for="language" class="label">
+                <translate translate-context="Label for language switcher">
+                  Language
+                </translate>
+              </label>
+              <select id="language" name="language" v-model="$language.current">
+                <option v-for="(language, key) in $language.available" :key="key" :value="key">{{ language }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+    </footer>
   </div>
 </template>
 
 <style lang="scss">
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
-    }
-  }
-}
 </style>

src/locales.js

+/* eslint-disable */
+export default {
+  "locales": [
+    {
+      "code": "en_US",
+      "label": "English (United-States)"
+    },
+    {
+      "code": "fr_FR",
+      "label": "Français"
+    }
+  ]
+}

src/main.js

 import Vue from "vue";
 import App from "./App.vue";
+import './setup'
 import router from "./router";
+
 import "./registerServiceWorker";
 
 Vue.config.productionTip = false;

src/setup.js

+import Vue from "vue";
+
+import GetTextPlugin from 'vue-gettext'
+
+import locales from '@/locales'
+import translations from './translations.json'
+
+let availableLanguages = (function () {
+  let l = {}
+  locales.locales.forEach(c => {
+    l[c.code] = c.label
+  })
+  return l
+})()
+let defaultLanguage = 'en_US'
+Vue.use(GetTextPlugin, {
+  availableLanguages: availableLanguages,
+  defaultLanguage: defaultLanguage,
+  languageVmMixin: {
+    computed: {
+      currentKebabCase: function () {
+        return this.current.toLowerCase().replace('_', '-')
+      }
+    }
+  },
+  translations: translations,
+  silent: true
+})
+
+
+
+Vue.config.productionTip = false;
+
+export default {}