feat: comments disqus + commento

client/components/admin/admin-comments.vue

@@ -17,7 +17,7 @@
       v-flex(lg3, xs12)
         v-card.animated.fadeInUp
           v-toolbar(flat, color='primary', dark, dense)
-            .subtitle-1 {{$t('admin:comments.providers')}}
+            .subtitle-1 {{$t('admin:comments.provider')}}
           v-list.py-0(two-line, dense)
             template(v-for='(provider, idx) in providers')
               v-list-item(:key='provider.key', @click='selectedProvider = provider.key', :disabled='!provider.isAvailable')
@@ -127,7 +127,20 @@ export default {
       this.$store.commit(`loadingStart`, 'admin-comments-saveproviders')
       try {
         const resp = await this.$apollo.mutate({
-          mutation: gql``,
+          mutation: gql`
+            mutation($providers: [CommentProviderInput]!) {
+              comments {
+                updateProviders(providers: $providers) {
+                  responseResult {
+                    succeeded
+                    errorCode
+                    slug
+                    message
+                  }
+                }
+              }
+            }
+          `,
           variables: {
             providers: this.providers.map(tgt => ({
               isEnabled: tgt.key === this.selectedProvider,
@@ -136,19 +149,19 @@ export default {
             }))
           }
         })
-        if (_.get(resp, 'data.comments.updateEngines.responseResult.succeeded', false)) {
+        if (_.get(resp, 'data.comments.updateProviders.responseResult.succeeded', false)) {
           this.$store.commit('showNotification', {
             message: this.$t('admin:comments.configSaveSuccess'),
             style: 'success',
             icon: 'check'
           })
         } else {
-          throw new Error(_.get(resp, 'data.comments.updateEngines.responseResult.message', this.$t('common:error.unexpected')))
+          throw new Error(_.get(resp, 'data.comments.updateProviders.responseResult.message', this.$t('common:error.unexpected')))
         }
       } catch (err) {
         this.$store.commit('pushGraphError', err)
       }
-      this.$store.commit(`loadingStop`, 'admin-comments-saveengines')
+      this.$store.commit(`loadingStop`, 'admin-comments-saveproviders')
     }
   },
   apollo: {

client/components/admin/admin-extensions.vue

@@ -20,7 +20,7 @@
                       v-chip(label, color='success', small, v-if='ext.installed') Installed
                       v-chip(label, color='warning', small, v-else) Not Installed
                   v-expansion-panel-content.pa-0
-                    v-card.grey.lighten-5.radius-7(flat)
+                    v-card(flat, :class='$vuetify.theme.dark ? `grey darken-3` : `grey lighten-5`', tile)
                       v-card-text
                         .body-2 {{ext.description}}
                         v-divider.my-4

client/components/admin/admin-general.vue

@@ -146,7 +146,7 @@
                   //- v-divider.mt-3
                   v-switch(
                     inset
-                    label='Page Comments'
+                    label='Comments'
                     color='indigo'
                     v-model='config.featurePageComments'
                     persistent-hint

client/components/editor/editor-markdown.vue

@@ -341,7 +341,7 @@ md.renderer.rules.katex_block = (tokens, idx) => {
 md.renderer.rules.emoji = (token, idx) => {
   return twemoji.parse(token[idx].content, {
     callback (icon, opts) {
-      return `/svg/twemoji/${icon}.svg`
+      return `/_assets/svg/twemoji/${icon}.svg`
     }
   })
 }

client/themes/default/components/page.vue

@@ -90,12 +90,13 @@
                   )
                   v-icon(:color='$vuetify.theme.dark ? `teal lighten-3` : `teal`', size='20') mdi-tag-multiple
 
-            v-card.mb-5
+            v-card.mb-5(v-if='commentsEnabled')
               .pa-5
                 .overline.pb-2.pink--text.d-flex.align-center(:class='$vuetify.theme.dark ? `text--lighten-3` : `text--darken-4`')
                   span Talk
                   v-spacer
                   v-chip.text-center(
+                    v-if='!commentsExternal'
                     label
                     x-small
                     :color='$vuetify.theme.dark ? `pink darken-3` : `pink darken-4`'
@@ -260,6 +261,8 @@
               span {{$t('common:page.editPage')}}
             .contents(ref='container')
               slot(name='contents')
+            .comments-container#discussion
+              slot(name='comments')
     nav-footer
     notify
     search-results
@@ -390,6 +393,18 @@ export default {
     navMode: {
       type: String,
       default: 'MIXED'
+    },
+    commentsEnabled: {
+      type: Boolean,
+      default: false
+    },
+    commentsProvider: {
+      type: String,
+      default: 'default'
+    },
+    commentsExternal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

client/themes/default/scss/app.scss

@@ -805,6 +805,16 @@
 
 }
 
+.comments-container {
+  background-color: mc('blue-grey', '50');
+  border-radius: 7px;
+  padding: 20px;
+
+  @at-root .theme--dark & {
+    background-color: darken(mc('grey', '900'), 5%);
+  }
+}
+
 // ---------------
 // RTL FIXES
 // Vuetify GH Issue: https://github.com/vuetifyjs/vuetify/issues/6317