Feat: Add chatra and tidio support (#681)

* roadmap #577
* add optional chat button in sidebar
* use same style as feed-link

Author: 1v9

_config.yml

@@ -269,6 +269,14 @@ back2top:
   # Scroll percent label in b2t button.
   scrollpercent: false
 
+# A button to open designated chat widget in sidebar.
+# Firstly, you need enable the chat service you want to activate its sidebar button.
+chat:
+  enable: false
+  #service: chatra
+  #service: tidio
+  text: Chat # button text, change it as you wish
+
 # ---------------------------------------------------------------
 # Post Settings
 # See: https://theme-next.org/docs/theme-settings/posts/
@@ -827,6 +835,21 @@ reading_progress:
   color: "#37c6c0"
   height: 2px
 
+# Chatra Support
+# See: https://chatra.io
+# Dashboard: https://app.chatra.io/settings/general
+chatra:
+  enable: false
+  async: true
+  id: # visit Dashboard to get your ChatraID
+  #embed: # unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto
+
+# Tidio Support
+# See: https://www.tidiochat.com
+# Dashboard: https://www.tidiochat.com/panel/dashboard
+tidio:
+  enable: false
+  key: # Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer
 
 # ---------------------------------------------------------------
 # Tags Settings

layout/_layout.swig

@@ -120,5 +120,7 @@
   {% include '_third-party/pangu.swig' %}
   {% include '_third-party/bookmark.swig' %}
   {% include '_third-party/copy-code.swig' %}
+  {% include '_third-party/chatra.swig' %}
+  {% include '_third-party/tidio.swig' %}
 </body>
 </html>

layout/_macro/sidebar.swig

@@ -103,6 +103,20 @@
             </div>
           {% endif %}
 
+          {% if theme.chat.enable and theme.chat.service !== '' %}
+            <div class="chat motion-element">
+              {% if theme.chat.service == 'chatra' and theme.chatra.enable %}
+                <a onclick="Chatra('openChat', true)">
+              {% endif %}
+              {% if theme.chat.service == 'tidio' and theme.tidio.enable %}
+                <a onclick="tidioChatApi.open();">
+              {% endif %}
+                  <i class="fa fa-comment"></i>
+                  {{ theme.chat.text }}
+                </a>
+            </div>
+          {% endif %}
+
           {% if theme.social %}
             <div class="links-of-author motion-element">
               {% for name, link in theme.social %}
@@ -111,7 +125,7 @@
                   {% if not (theme.social_icons.enable) or (not theme.social_icons.icons_only) %}
                     {% set sidebarText = name %}
                   {% endif %}
-                  {%  if theme.social_icons.enable %}
+                  {% if theme.social_icons.enable %}
                     {% set sidebarIcon = '<i class="fa fa-fw fa-' + link.split('||')[1] | trim | default('globe') + '"></i>' %}
                   {% endif %}
                   {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' &rarr; ' + sidebarURL}) }}

layout/_third-party/chatra.swig

@@ -0,0 +1,22 @@
+{% if theme.chatra.enable %}
+	{% if theme.chatra.embed %}
+	<script>
+		window.ChatraSetup = {
+				mode: 'frame',
+				injectTo: '{{ theme.chatra.embed }}'
+		};
+	</script>
+	{% endif %}
+	<script>
+		(function(d, w, c) {
+			w.ChatraID = '{{ theme.chatra.id }}';
+			var s = d.createElement('script');
+			w[c] = w[c] || function() {
+				(w[c].q = w[c].q || []).push(arguments);
+			};
+			s.async = {{ theme.chatra.async }};
+			s.src = 'https://call.chatra.io/chatra.js';
+			if (d.head) d.head.appendChild(s);
+		})(document, window, 'Chatra');
+	</script>
+{% endif %}

layout/_third-party/tidio.swig

@@ -0,0 +1,3 @@
+{% if theme.tidio.enable %}
+  <script src="//code.tidio.co/{{ theme.tidio.key }}.js"></script>
+{% endif %}

source/css/_common/components/sidebar/sidebar-chat.styl

@@ -0,0 +1,23 @@
+.chat {
+  margin-top: 10px;
+
+  a {
+    display: inline-block;
+    padding: 0 15px;
+    color: rgb(252, 100, 35);
+    border: 1px solid rgb(252, 100, 35);
+    border-radius: 4px;
+
+    i {
+      color: rgb(252, 100, 35);
+      font-size: 14px;
+    }
+
+    &:hover {
+      color: white;
+      background: rgb(252, 100, 35);
+
+      i { color: white; }
+    }
+  }
+}

source/css/_common/components/sidebar/sidebar.styl

@@ -63,3 +63,4 @@
 @import "sidebar-nav";
 @import "sidebar-toc";
 @import "sidebar-dimmer" if hexo-config('sidebar.dimmer');
+@import "sidebar-chat" if hexo-config('chat.enable');

source/css/_schemes/Pisces/_sidebar.styl

@@ -76,6 +76,25 @@
   }
 }
 
+.chat {
+  border-top: 1px dotted $grey-light;
+  border-bottom: 1px dotted $grey-light;
+  text-align: center;
+}
+
+.chat a {
+  display: block;
+  color: $orange;
+  border: none;
+
+  &:hover {
+    background: none;
+    color: darken($orange, 20%);
+
+    i { color: darken($orange, 20%); }
+  }
+}
+
 .links-of-author {
   //clearfix();
   display: flex;