feat: add localization to admin nav + locale sections

client/components/admin.vue

@@ -5,78 +5,78 @@
       v-list(dense)
         v-list-tile.pt-2(to='/dashboard')
           v-list-tile-avatar: v-icon dashboard
-          v-list-tile-title Dashboard
+          v-list-tile-title {{ $t('admin:dashboard.title') }}
         v-divider.my-2
-        v-subheader.pl-4 Site
+        v-subheader.pl-4 {{ $t('admin:nav.site') }}
         v-list-tile(to='/general')
           v-list-tile-avatar: v-icon widgets
-          v-list-tile-title General
+          v-list-tile-title {{ $t('admin:general.title') }}
         v-list-tile(to='/locale')
           v-list-tile-avatar: v-icon language
-          v-list-tile-title Locale
+          v-list-tile-title {{ $t('admin:locale.title') }}
         v-list-tile(to='/stats')
           v-list-tile-avatar: v-icon show_chart
-          v-list-tile-title Statistics
+          v-list-tile-title {{ $t('admin:stats.title') }}
         v-list-tile(to='/theme')
           v-list-tile-avatar: v-icon palette
-          v-list-tile-title Theme
+          v-list-tile-title {{ $t('admin:theme.title') }}
         v-divider.my-2
-        v-subheader.pl-4 Users
+        v-subheader.pl-4 {{ $t('admin:nav.users') }}
         v-list-tile(to='/groups')
           v-list-tile-avatar: v-icon people
-          v-list-tile-title Groups
+          v-list-tile-title {{ $t('admin:groups.title') }}
         v-list-tile(to='/users')
           v-list-tile-avatar: v-icon perm_identity
-          v-list-tile-title Users
+          v-list-tile-title {{ $t('admin:users.title') }}
           v-list-tile-action
             .justify-end
               v-chip(small, disabled, color='grey lighten-4')
                 .caption.grey--text 1
         v-divider.my-2
-        v-subheader.pl-4 Modules
+        v-subheader.pl-4 {{ $t('admin:nav.modules') }}
         v-list-tile(to='/auth')
           v-list-tile-avatar: v-icon lock_outline
-          v-list-tile-title Authentication
+          v-list-tile-title {{ $t('admin:auth.title') }}
         v-list-tile(to='/editor')
           v-list-tile-avatar: v-icon transform
-          v-list-tile-title Editor
+          v-list-tile-title {{ $t('admin:editor.title') }}
         v-list-tile(to='/logging')
           v-list-tile-avatar: v-icon graphic_eq
-          v-list-tile-title Logging
+          v-list-tile-title {{ $t('admin:logging.title') }}
         v-list-tile(to='/rendering')
           v-list-tile-avatar: v-icon system_update_alt
-          v-list-tile-title Rendering
+          v-list-tile-title {{ $t('admin:rendering.title') }}
         v-list-tile(to='/search')
           v-list-tile-avatar: v-icon search
-          v-list-tile-title Search Engine
+          v-list-tile-title {{ $t('admin:search.title') }}
         v-list-tile(to='/storage')
           v-list-tile-avatar: v-icon storage
-          v-list-tile-title Storage
+          v-list-tile-title {{ $t('admin:storage.title') }}
         v-divider.my-2
-        v-subheader.pl-4 System
+        v-subheader.pl-4 {{ $t('admin:nav.system') }}
         v-list-tile(to='/api')
           v-list-tile-avatar: v-icon call_split
-          v-list-tile-title API Access
+          v-list-tile-title {{ $t('admin:api.title') }}
         v-list-tile(to='/system')
           v-list-tile-avatar: v-icon tune
-          v-list-tile-title System Info
+          v-list-tile-title {{ $t('admin:system.title') }}
         v-list-tile(to='/utilities')
           v-list-tile-avatar: v-icon build
-          v-list-tile-title Utilities
+          v-list-tile-title {{ $t('admin:utilities.title') }}
         v-list-tile(to='/dev')
           v-list-tile-avatar: v-icon weekend
-          v-list-tile-title Developer Tools
+          v-list-tile-title {{ $t('admin:dev.title') }}
         v-divider.my-2
         v-list-tile(to='/contribute')
           v-list-tile-avatar: v-icon favorite
-          v-list-tile-title Contribute to Wiki.js
+          v-list-tile-title {{ $t('admin:contribute.title') }}
 
     v-content
       transition(name='admin-router')
         router-view
 
     v-footer.py-2.justify-center(app, absolute, :color='darkMode ? "" : "grey lighten-3"', inset, height='auto')
-      .caption.grey--text.text--darken-1 Powered by Wiki.js
+      .caption.grey--text.text--darken-1 {{ $t('common:footer.poweredBy') }} Wiki.js
 
     v-snackbar(
       :color='notification.style'
@@ -128,6 +128,7 @@ const router = new VueRouter({
 })
 
 export default {
+  i18nOptions: { namespaces: 'admin' },
   data() {
     return {
       adminDrawerShown: true

client/components/admin/admin-dashboard.vue

@@ -2,8 +2,8 @@
   v-container(fluid, fill-height)
     v-layout(row wrap)
       v-flex(xs12)
-        .headline.primary--text Dashboard
-        .subheading.grey--text Wiki.js v2 ALPHA Build - NOT FOR PRODUCTION USE
+        .headline.primary--text {{ $t('admin:dashboard.title') }}
+        .subheading.grey--text {{ $t('admin:dashboard.subtitle') }}
 </template>
 
 <script>

client/components/admin/admin-general.vue

@@ -2,8 +2,8 @@
   v-container(fluid, fill-height, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .headline.primary--text General
-        .subheading.grey--text Main settings of your wiki
+        .headline.primary--text {{ $t('admin:general.title') }}
+        .subheading.grey--text {{ $t('admin:general.subtitle') }}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
@@ -11,7 +11,7 @@
                 v-card
                   v-toolbar(color='primary', dark, dense, flat)
                     v-toolbar-title
-                      .subheading Site Info
+                      .subheading {{ $t('admin:general.siteInfo') }}
                   v-subheader General
                   .px-3
                     v-text-field(label='Site Title', required, :counter='50', v-model='siteTitle', prepend-icon='public')
@@ -30,10 +30,40 @@
               v-card
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
-                    .subheading Site Branding
+                    .subheading {{ $t('admin:general.siteBranding') }}
                 v-card-text
-                  v-text-field(label='Logo', prepend-icon='image')
+                  v-layout.pa-3(row, align-center)
+                    v-avatar(size='120', color='grey lighten-3', :tile='useSquareLogo')
+                    .ml-4
+                      v-layout(row, align-center)
+                        v-btn(color='teal', depressed, dark)
+                          v-icon(left) cloud_upload
+                          span Upload Logo
+                        v-btn(color='teal', depressed, disabled)
+                          v-icon(left) clear
+                          span Clear
+                      .caption.grey--text An image of 120x120 pixels is recommended for best results.
+                      .caption.grey--text SVG, PNG or JPG files only.
+                  v-switch(
+                    v-model='useSquareLogo'
+                    label='Use Square Logo Frame'
+                    color='primary'
+                    persistent-hint
+                    hint='Check this option if a round logo frame doesn\'t work with your logo.'
+                    )
                   v-divider
+                  v-switch(
+                    v-model='displayMascot'
+                    label='Display Wiki.js Mascot'
+                    color='primary'
+                    persistent-hint
+                    hint='Uncheck this box if you don\'t want Henry, Wiki.js mascot, to be displayed on client-facing pages.'
+                    )
+                v-card-chin
+                  v-spacer
+                  v-btn(color='primary')
+                    v-icon(left) chevron_right
+                    span Save
 
 </template>
 
@@ -44,7 +74,9 @@ export default {
     return {
       siteTitle: 'Wiki.js',
       metaRobotsSelection: ['Index', 'Follow'],
-      metaRobots: ['Index', 'Follow', 'No Index', 'No Follow']
+      metaRobots: ['Index', 'Follow', 'No Index', 'No Follow'],
+      useSquareLogo: false,
+      displayMascot: true
     }
   }
 }

client/components/admin/admin-locale.vue

@@ -2,25 +2,25 @@
   v-container(fluid, fill-height, grid-list-lg)
     v-layout(row wrap)
       v-flex(xs12)
-        .headline.primary--text Locale
-        .subheading.grey--text Set localization options for your wiki
+        .headline.primary--text {{ $t('admin:locale.title') }}
+        .subheading.grey--text {{ $t('admin:locale.subtitle') }}
         v-form.pt-3
           v-layout(row wrap)
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
-                    .subheading Locale Settings
+                    .subheading {{ $t('admin:locale.settings') }}
                 v-card-text
                   v-select(
                     :items='installedLocales'
                     prepend-icon='language'
                     v-model='selectedLocale'
                     item-value='code'
-                    item-text='name'
-                    :label='namespacing ? "Base Locale" : "Site Locale"'
+                    item-text='nativeName'
+                    :label='namespacing ? $t("admin:locale.base.labelWithNS") : $t("admin:locale.base.label")'
                     persistent-hint
-                    hint='All UI text elements will be displayed in selected language.'
+                    :hint='$t("admin:locale.base.hint")'
                   )
                     template(slot='item', slot-scope='data')
                       template(v-if='typeof data.item !== "object"')
@@ -34,28 +34,28 @@
                   v-divider
                   v-switch(
                     v-model='autoUpdate'
-                    label='Update Automatically'
+                    :label='$t("admin:locale.autoUpdate.label")'
                     color='primary'
                     persistent-hint
-                    :hint='namespacing ? "Automatically download updates to all namespaced locales enabled below." : "Automatically download updates to this locale as they become available."'
+                    :hint='namespacing ? $t("admin:locale.autoUpdate.hintWithNS") : $t("admin:locale.autoUpdate.hint")'
                   )
                 v-card-chin
                   v-spacer
                   v-btn(color='primary', :loading='loading', @click='save')
                     v-icon(left) chevron_right
-                    span Save
+                    span {{ $t('common:actions.save') }}
 
               v-card.mt-3
                 v-toolbar(color='primary', dark, dense, flat)
                   v-toolbar-title
-                    .subheading Multilingual Namespacing
+                    .subheading {{ $t('admin:locale.namespacing') }}
                 v-card-text
                   v-switch(
                     v-model='namespacing'
-                    label='Multilingual Namespaces'
+                    :label='$t("admin:locale.namespaces.label")'
                     color='primary'
                     persistent-hint
-                    hint='Enables multiple language versions of the same page.'
+                    :hint='$t("admin:locale.namespaces.hint")'
                     )
                   v-alert.mt-3(
                     outline
@@ -63,8 +63,8 @@
                     :value='true'
                     icon='warning'
                     )
-                    span The locale code will be prefixed to all paths. (e.g. /{{ selectedLocale }}/page-name)
-                    .caption.grey--text Paths without a locale code will be automatically redirected to the base locale defined above.
+                    span {{ $t('admin:locale.namespacingPrefixWarning.title', { langCode: selectedLocale }) }}
+                    .caption.grey--text {{ $t('admin:locale.namespacingPrefixWarning.subtitle') }}
                   v-divider
                   v-select(
                     :disabled='!namespacing'
@@ -76,9 +76,9 @@
                     v-model='namespaces'
                     item-value='code'
                     item-text='name'
-                    label='Active Namespaces'
+                    :label='$t("admin:locale.activeNamespaces.label")'
                     persistent-hint
-                    hint='List of locales enabled for multilingual namespacing. The base locale defined above will always be included regardless of this selection.'
+                    :hint='$t("admin:locale.activeNamespaces.hint")'
                     )
                     template(slot='item', slot-scope='data')
                       template(v-if='typeof data.item !== "object"')
@@ -95,12 +95,12 @@
                   v-spacer
                   v-btn(color='primary', :loading='loading', @click='save')
                     v-icon(left) chevron_right
-                    span Save
+                    span {{ $t('common:actions.save') }}
             v-flex(lg6 xs12)
               v-card
                 v-toolbar(color='teal', dark, dense, flat)
                   v-toolbar-title
-                    .subheading Download Locale
+                    .subheading {{ $t('admin:locale.download') }}
                 v-list(two-line, dense)
                   template(v-for='(lc, idx) in locales')
                     v-list-tile(:key='lc.code')
@@ -126,6 +126,8 @@
 <script>
 import _ from 'lodash'
 
+/* global WIKI */
+
 import localesQuery from 'gql/admin-locale-query-list.gql'
 import localesDownloadMutation from 'gql/admin-locale-mutation-download.gql'
 import localesSaveMutation from 'gql/admin-locale-mutation-save.gql'
@@ -186,6 +188,7 @@ export default {
       })
       const resp = _.get(respRaw, 'data.localization.updateLocale.responseResult', {})
       if (resp.succeeded) {
+        WIKI.$i18n.i18next.changeLanguage(this.selectedLocale)
         this.$store.commit('showNotification', {
           message: 'Locale settings updated successfully.',
           style: 'success',

client/components/login.vue

@@ -61,6 +61,7 @@ import loginMutation from 'gql/login-mutation-login.gql'
 import tfaMutation from 'gql/login-mutation-tfa.gql'
 
 export default {
+  i18nOptions: { namespaces: 'auth' },
   data () {
     return {
       error: false,

client/graph/common-locale-query.gql

@@ -0,0 +1,6 @@
+query($locale: String!, $namespace: String!) {
+  translations(locale:$locale, namespace:$namespace) {
+    key
+    value
+  }
+}

client/modules/localization.js

@@ -3,10 +3,11 @@ import i18nextXHR from 'i18next-xhr-backend'
 import i18nextCache from 'i18next-localstorage-cache'
 import VueI18Next from '@panter/vue-i18next'
 import _ from 'lodash'
-import gql from 'graphql-tag'
 
 /* global siteConfig, graphQL */
 
+import localeQuery from 'gql/common-locale-query.gql'
+
 module.exports = {
   VueI18Next,
   init() {
@@ -20,14 +21,7 @@ module.exports = {
           ajax: (url, opts, cb, data) => {
             let langParams = url.split('/')
             graphQL.query({
-              query: gql`
-                query($locale: String!, $namespace: String!) {
-                  translations(locale:$locale, namespace:$namespace) {
-                    key
-                    value
-                  }
-                }
-              `,
+              query: localeQuery,
               variables: {
                 locale: langParams[0],
                 namespace: langParams[1]

package.json

@@ -163,6 +163,7 @@
     "babel-preset-stage-2": "6.24.1",
     "brace": "0.11.1",
     "cache-loader": "1.2.2",
+    "chart.js": "2.7.2",
     "clean-webpack-plugin": "0.1.19",
     "colors": "1.3.0",
     "copy-webpack-plugin": "4.5.1",
@@ -220,6 +221,7 @@
     "velocity-animate": "1.5.1",
     "vue": "2.5.16",
     "vue-apollo": "3.0.0-beta.16",
+    "vue-chartjs": "3.3.1",
     "vue-clipboards": "1.2.4",
     "vue-codemirror": "4.0.5",
     "vue-hot-reload-api": "2.3.0",

server/app/data.yml

@@ -54,6 +54,7 @@ configNamespaces:
   - theme
   - uploads
 localeNamespaces:
+  - admin
   - auth
   - common
 jobs:

server/core/localization.js

@@ -30,8 +30,8 @@ module.exports = {
       })
     }
 
-    // Load current language
-    this.loadLocale(WIKI.config.lang.code, { silent: true })
+    // Load current language + namespaces
+    this.refreshNamespaces(true)
 
     return this
   },
@@ -64,8 +64,16 @@ module.exports = {
       throw new Error('No such locale in local store.')
     }
   },
+  async refreshNamespaces (silent = false) {
+    await this.loadLocale(WIKI.config.lang.code, { silent })
+    if (WIKI.config.lang.namespacing) {
+      for (let ns of WIKI.config.lang.namespaces) {
+        await this.loadLocale(ns, { silent })
+      }
+    }
+  },
   async setCurrentLocale(locale) {
-    return Promise.fromCallback(cb => {
+    await Promise.fromCallback(cb => {
       return this.engine.changeLanguage(locale, cb)
     })
   }

server/graph/resolvers/localization.js

@@ -58,6 +58,7 @@ module.exports = {
         await WIKI.configSvc.saveToDb(['lang'])
 
         await WIKI.lang.setCurrentLocale(args.locale)
+        await WIKI.lang.refreshNamespaces()
 
         return {
           responseResult: graphHelper.generateSuccess('Locale config updated')

yarn.lock

@@ -2433,6 +2433,26 @@ charm@~0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/charm/-/charm-0.1.2.tgz#06c21eed1a1b06aeb67553cdc53e23274bac2296"
 
+chart.js@2.7.2:
+  version "2.7.2"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.7.2.tgz#3c9fde4dc5b95608211bdefeda7e5d33dffa5714"
+  dependencies:
+    chartjs-color "^2.1.0"
+    moment "^2.10.2"
+
+chartjs-color-string@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.5.0.tgz#8d3752d8581d86687c35bfe2cb80ac5213ceb8c1"
+  dependencies:
+    color-name "^1.0.0"
+
+chartjs-color@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.2.0.tgz#84a2fb755787ed85c39dd6dd8c7b1d88429baeae"
+  dependencies:
+    chartjs-color-string "^0.5.0"
+    color-convert "^0.5.3"
+
 check-types@^7.3.0:
   version "7.3.0"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.3.0.tgz#468f571a4435c24248f5fd0cb0e8d87c3c341e7d"
@@ -2659,7 +2679,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^0.5.0:
+color-convert@^0.5.0, color-convert@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-0.5.3.tgz#bdb6c69ce660fadffe0b0007cc447e1b9f7282bd"
 
@@ -7514,7 +7534,7 @@ moment-timezone@0.5.17, moment-timezone@^0.5.0, moment-timezone@^0.5.x:
   dependencies:
     moment ">= 2.9.0"
 
-moment@2.22.2, "moment@>= 2.9.0", moment@^2.10.6, moment@^2.11.1, moment@^2.19, moment@^2.22.1:
+moment@2.22.2, "moment@>= 2.9.0", moment@^2.10.2, moment@^2.10.6, moment@^2.11.1, moment@^2.19, moment@^2.22.1:
   version "2.22.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
 
@@ -12044,6 +12064,10 @@ vue-apollo@3.0.0-beta.16:
   dependencies:
     throttle-debounce "^1.0.1"
 
+vue-chartjs@3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/vue-chartjs/-/vue-chartjs-3.3.1.tgz#fb08dc244da316e385910401daf16874f52ac1fc"
+
 vue-cli-plugin-apollo@^0.13.0:
   version "0.13.4"
   resolved "https://registry.yarnpkg.com/vue-cli-plugin-apollo/-/vue-cli-plugin-apollo-0.13.4.tgz#1477b8e2eaa711fe13e4905410351cfd3978bedb"