Basic translation logic

.gitignore

@@ -272,3 +272,5 @@ contributions/media/
 .pytest_cache/
 .env
 .envs/*
+
+front/src/translations.json

front/locales/en_US/LC_MESSAGES/app.po

+# English translations for front package.
+# Copyright (C) 2018 THE front'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the front package.
+# Automatically generated, 2018.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: front 0.1.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-11-06 19:17+0100\n"
+"PO-Revision-Date: 2018-11-06 19:17+0100\n"
+"Last-Translator: Automatically generated\n"
+"Language-Team: none\n"
+"Language: en_US\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+
+#: front/src/App.vue:5
+msgid "Language"
+msgstr "Language"

front/locales/fr_FR/LC_MESSAGES/app.po

+# French translations for front package.
+# Copyright (C) 2018 THE front'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the front package.
+# Automatically generated, 2018.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: front 0.1.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2018-11-06 19:20+0100\n"
+"PO-Revision-Date: 2018-11-06 19:17+0100\n"
+"Last-Translator: Automatically generated\n"
+"Language-Team: none\n"
+"Language: fr_FR\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n > 1);\n"
+
+#: front/src/App.vue:5
+msgid "Language"
+msgstr "Langue"

front/package.json

@@ -3,9 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "serve": "scripts/i18n-compile.sh && vue-cli-service serve",
+    "build": "scripts/i18n-compile.sh && vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "i18n-extract": "scripts/i18n-extract.sh",
+    "i18n-compile": "scripts/i18n-compile.sh"
   },
   "dependencies": {
     "axios": "^0.18.0",
@@ -13,6 +15,7 @@
     "fork-awesome": "^1.1.5",
     "moment": "^2.22.2",
     "vue": "^2.5.17",
+    "vue-gettext": "^2.1.1",
     "vue-router": "^3.0.1"
   },
   "devDependencies": {
@@ -20,6 +23,7 @@
     "@vue/cli-plugin-eslint": "^3.0.0",
     "@vue/cli-service": "^3.0.0",
     "css-loader": "^1.0.0",
+    "easygettext": "^2.7.0",
     "node-sass": "^4.10.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",

front/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

front/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
+
+# Fix broken files path/lines in pot
+sed -e 's|#: src/|#: front/src/|' -i $locales_dir/app.pot
+
+# 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;

front/scripts/i18n-weblate-to-origin.sh

+#!/bin/bash -eux
+integration_branch="translations-integration"
+git remote add weblate https://translate.funkwhale.audio/git/funkwhale/contribute/ || 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://code.eliotberriot.com/funkwhale/contribute/merge_requests/new?merge_request%5Bsource_branch%5D=$integration_branch"

front/src/App.vue

 <template>
   <div id="app">
     <router-view></router-view>
+    <footer class="text container">
+      <div>
+        <label for="language" class="label" v-translate>Language</label>
+        <select id="language" name="language" v-model="$language.current">
+          <option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
+        </select>
+      </div>
+    </footer>
   </div>
 </template>
 

front/src/locales.js

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

front/src/main.js

@@ -4,6 +4,40 @@ import moment from "moment";
 import VueRouter from "vue-router";
 import _ from "./components/globals"
 require("bulma/css/bulma.css");
+
+import GetTextPlugin from 'vue-gettext'
+
+import locales from '@/locales'
+import translations from './translations.json'
+
+let availableLanguages = (function () {
+  let l = {}
+  console.log(locales)
+  locales.locales.forEach(c => {
+    l[c.code] = c.label
+  })
+  return l
+})()
+let defaultLanguage = 'en_US'
+// if (availableLanguages[store.state.ui.currentLanguage]) {
+//   defaultLanguage = store.state.ui.currentLanguage
+// }
+Vue.use(GetTextPlugin, {
+  availableLanguages: availableLanguages,
+  defaultLanguage: defaultLanguage,
+  languageVmMixin: {
+    computed: {
+      currentKebabCase: function () {
+        return this.current.toLowerCase().replace('_', '-')
+      }
+    }
+  },
+  translations: translations,
+  silent: true
+})
+
+
+
 Vue.config.productionTip = false;
 
 import router from './router'