Complete the integration CC Vocabulary into the application

Author: dhruvkb

src/App.vue

@@ -1,21 +1,27 @@
 <template>
     <div id="app">
-        <Header appName="cc-chooser"/>
+        <Header :title="$t('chooser')"/>
         <div class="container" id="site-container">
             <Chooser v-model="selected"/>
             <hr>
             <HelpSection/>
             <hr>
             <HTMLGenerator :shortLicenseName="selected.shortName"/>
         </div>
-        <Footer/>
+        <Footer>
+            <Locale/>
+        </Footer>
     </div>
 </template>
 <script>
+// TODO Reduce custom styling in favour of Vocabulary styles
+import '@creativecommons/vocabulary/root.css'
+import '@creativecommons/vocabulary/vocabulary.css'
+
 import Chooser from './components/Chooser'
 import HelpSection from './components/HelpSection'
 import HTMLGenerator from './components/HTMLGenerator'
-import { Header, Footer, LicenseIconography } from '@creativecommons/vocabulary'
+import { Header, Footer, LicenseIconography, Locale } from '@creativecommons/vocabulary'
 
 export default {
     name: 'App',
@@ -25,13 +31,14 @@ export default {
         HTMLGenerator,
         Header,
         Footer,
-        LicenseIconography
+        LicenseIconography,
+        Locale
     },
     data() {
         return {
             selected: {
-                shortName: "CC BY 4.0",
-                fullName: "Attribution 4.0 International"
+                shortName: 'CC BY 4.0',
+                fullName: 'Attribution 4.0 International'
             }
         }
     },
@@ -77,3 +84,6 @@ hr {
     }
 }
 </style>
+
+<i18n src="./locales/App.json">
+</i18n>

src/i18n.js

@@ -0,0 +1,23 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages() {
+    const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+    const messages = {}
+    locales.keys().forEach(key => {
+        const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+        if (matched && matched.length > 1) {
+            const locale = matched[1]
+            messages[locale] = locales(key)
+        }
+    })
+    return messages
+}
+
+export default new VueI18n({
+    locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
+    messages: loadLocaleMessages()
+})

src/locales/App.json

@@ -0,0 +1,8 @@
+{
+    "en": {
+        "chooser": "Chooser"
+    },
+    "hi": {
+        "chooser": "चयनकर्ता"
+    }
+}

src/main.js

@@ -6,6 +6,7 @@ import Buefy from 'buefy'
 import VueHead from 'vue-head'
 import 'buefy/dist/buefy.css'
 import 'bulma/css/bulma.min.css'
+import i18n from './i18n'
 
 import '@creativecommons/vocabulary/root.css'
 import '@creativecommons/vocabulary/vocabulary.css'
@@ -16,6 +17,7 @@ Vue.use(VueHead)
 
 /* eslint-disable no-new */
 new Vue({
+    i18n,
     el: '#app',
     components: { App },
     template: '<App/>'