feat: editor md + source translations

client/components/editor/editor-markdown.vue

@@ -5,20 +5,20 @@
         v-spacer
         v-btn.animated.fadeInRight(flat, @click='closeAllModal')
           v-icon(left) remove_circle_outline
-          span Back to Editor
+          span {{$t('editor:backToEditor')}}
       template(v-else)
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn(icon, slot='activator', @click='toggleMarkup({ start: `**` })').mx-0
             v-icon format_bold
-          span Bold
+          span {{$t('editor:markup.bold')}}
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p1s(icon, slot='activator', @click='toggleMarkup({ start: `*` })').mx-0
             v-icon format_italic
-          span Italic
+          span {{$t('editor:markup.italic')}}
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p2s(icon, slot='activator', @click='toggleMarkup({ start: `~~` })').mx-0
             v-icon format_strikethrough
-          span Strikethrough
+          span {{$t('editor:markup.strikethrough')}}
         v-menu(offset-y, open-on-hover)
           v-btn.animated.fadeIn.wait-p3s(icon, slot='activator').mx-0
             v-icon text_fields
@@ -27,16 +27,16 @@
               v-list-tile(@click='setHeaderLine(n)', :key='idx')
                 v-list-tile-action
                   v-icon(:size='24 - (idx - 1) * 2') title
-                v-list-tile-title Heading {{n}}
+                v-list-tile-title {{$t('editor:markup.heading', { level: n })}}
               v-divider(v-if='idx < 5')
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p4s(icon, slot='activator', @click='toggleMarkup({ start: `~` })').mx-0
             v-icon vertical_align_bottom
-          span Subscript
+          span {{$t('editor:markup.subscript')}}
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p5s(icon, slot='activator', @click='toggleMarkup({ start: `^` })').mx-0
             v-icon vertical_align_top
-          span Superscript
+          span {{$t('editor:markup.superscript')}}
         v-menu(offset-y, open-on-hover)
           v-btn.animated.fadeIn.wait-p6s(icon, slot='activator').mx-0
             v-icon format_quote
@@ -44,98 +44,98 @@
             v-list-tile(@click='insertBeforeEachLine({ content: `> `})')
               v-list-tile-action
                 v-icon format_quote
-              v-list-tile-title Blockquote
+              v-list-tile-title {{$t('editor:markup.blockquote')}}
             v-divider
             v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-info}`})')
               v-list-tile-action
                 v-icon(color='blue') format_quote
-              v-list-tile-title Info Blockquote
+              v-list-tile-title {{$t('editor:markup.blockquoteInfo')}}
             v-divider
             v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-success}`})')
               v-list-tile-action
                 v-icon(color='success') format_quote
-              v-list-tile-title Success Blockquote
+              v-list-tile-title {{$t('editor:markup.blockquoteSuccess')}}
             v-divider
             v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-warning}`})')
               v-list-tile-action
                 v-icon(color='warning') format_quote
-              v-list-tile-title Warning Blockquote
+              v-list-tile-title {{$t('editor:markup.blockquoteWarning')}}
             v-divider
             v-list-tile(@click='insertBeforeEachLine({ content: `> `, after: `{.is-danger}`})')
               v-list-tile-action
                 v-icon(color='error') format_quote
-              v-list-tile-title Error Blockquote
+              v-list-tile-title {{$t('editor:markup.blockquoteError')}}
             v-divider
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p7s(icon, slot='activator', @click='insertBeforeEachLine({ content: `- `})').mx-0
             v-icon format_list_bulleted
-          span Unordered List
+          span {{$t('editor:markup.unorderedList')}}
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p8s(icon, slot='activator', @click='insertBeforeEachLine({ content: `1. `})').mx-0
             v-icon format_list_numbered
-          span Ordered List
+          span {{$t('editor:markup.orderedList')}}
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p9s(icon, slot='activator', @click='toggleMarkup({ start: "`" })').mx-0
             v-icon space_bar
-          span Inline Code
+          span {{$t('editor:markup.inlineCode')}}
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p10s(icon, slot='activator', @click='toggleMarkup({ start: `<kbd>`, end: `</kbd>` })').mx-0
             v-icon font_download
-          span Keyboard Key
+          span {{$t('editor:markup.keyboardKey')}}
         v-tooltip(bottom, color='primary')
           v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='insertAfter({ content: `---`, newLine: true })').mx-0
             v-icon remove
-          span Horizontal Bar
+          span {{$t('editor:markup.horizontalBar')}}
         template(v-if='$vuetify.breakpoint.mdAndUp')
           v-spacer
           v-tooltip(bottom, color='primary')
             v-btn.animated.fadeIn.wait-p11s(icon, slot='activator', @click='previewShown = !previewShown').mx-0
               v-icon flip
-            span Hide / Show Preview Pane
+            span {{$t('editor:markup.togglePreviewPane')}}
     .editor-markdown-main
       .editor-markdown-sidebar
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft(icon, slot='activator', dark, disabled).mx-0
             v-icon link
-          span Insert Link
+          span {{$t('editor:markup.insertLink')}}
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p1s(icon, slot='activator', dark, @click='toggleModal(`editorModalMedia`)').mx-0
             v-icon(:color='activeModal === `editorModalMedia` ? `teal` : ``') burst_mode
-          span Insert Assets
+          span {{$t('editor:markup.insertAssets')}}
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p2s(icon, slot='activator', dark, @click='toggleModal(`editorModalBlocks`)').mx-0
             v-icon(:color='activeModal === `editorModalBlocks` ? `teal` : ``') dashboard
-          span Insert Block
+          span {{$t('editor:markup.insertBlock')}}
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p3s(icon, slot='activator', dark, disabled).mx-0
             v-icon code
-          span Insert Code Block
+          span {{$t('editor:markup.insertCodeBlock')}}
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p4s(icon, slot='activator', dark, disabled).mx-0
             v-icon play_circle_outline
-          span Insert Video / Audio
+          span {{$t('editor:markup.insertVideoAudio')}}
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p5s(icon, slot='activator', dark, disabled).mx-0
             v-icon multiline_chart
-          span Insert Diagram
+          span {{$t('editor:markup.insertDiagram')}}
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p6s(icon, slot='activator', dark, disabled).mx-0
             v-icon functions
-          span Insert Math Expression
+          span {{$t('editor:markup.insertMathExpression')}}
         v-tooltip(right, color='teal')
           v-btn.animated.fadeInLeft.wait-p7s(icon, slot='activator', dark, disabled).mx-0
             v-icon border_outer
-          span Table Helper
+          span {{$t('editor:markup.tableHelper')}}
         template(v-if='$vuetify.breakpoint.mdAndUp')
           v-spacer
           v-tooltip(right, color='teal')
             v-btn.animated.fadeInLeft.wait-p8s(icon, slot='activator', dark, @click='toggleFullscreen').mx-0
               v-icon crop_free
-            span Distraction Free Mode
+            span {{$t('editor:markup.distractionFreeMode')}}
           v-tooltip(right, color='teal')
             v-btn.animated.fadeInLeft.wait-p9s(icon, slot='activator', dark, @click='toggleHelp').mx-0
               v-icon(:color='helpShown ? `teal` : ``') help
-            span Markdown Formatting Help
+            span {{$t('editor:markup.markdownFormattingHelp')}}
       .editor-markdown-editor
         codemirror(ref='cm', v-model='code', :options='cmOptions', @ready='onCmReady', @input='onCmInput')
       transition(name='editor-markdown-preview')
@@ -249,7 +249,8 @@ export default {
   },
   props: {
     save: {
-      type: Function
+      type: Function,
+      default: () => {}
     }
   },
   data() {
@@ -387,7 +388,7 @@ export default {
       if (!end) { end = start }
       if (!this.cm.doc.somethingSelected()) {
         return this.$store.commit('showNotification', {
-          message: 'You must select something first!',
+          message: this.$t('editor:markup.noSelectionError'),
           style: 'warning',
           icon: 'warning'
         })

client/components/source.vue

@@ -3,11 +3,12 @@
     nav-header
     v-content
       v-toolbar(color='primary', dark)
-        .subheading Viewing source of page #[strong /{{path}}]
+        i18next.subheading(path='common:page.viewingSource', tag='div')
+          strong(place='path') /{{path}}]
         template(v-if='$vuetify.breakpoint.mdAndUp')
           v-spacer
-          .caption.blue--text.text--lighten-3 ID {{pageId}}
-          v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') Return to Normal View
+          .caption.blue--text.text--lighten-3 {{$t('common:page.id', { id: pageId })}}
+          v-btn.ml-4(depressed, color='blue darken-1', @click='goLive') {{$t('common:page.returnNormalView')}}
       v-card(tile)
         v-card-text
           v-card.grey.radius-7(flat, :class='darkMode ? `darken-4` : `lighten-4`')