Support Gitter Sidecar (#289)

_config.yml

@@ -180,15 +180,6 @@ toc:
   # Maximum heading depth of generated toc.
   max_depth: 6
 
-# 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
-  icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
-  text: Chat # Button text, change it as you wish.
-
 
 # ---------------------------------------------------------------
 # Footer Settings
@@ -755,6 +746,13 @@ local_search:
 # See: https://theme-next.js.org/docs/third-party-services/chat-services
 # ---------------------------------------------------------------
 
+# A button to open designated chat widget in sidebar.
+# Firstly, you need to enable and configure the chat service.
+chat:
+  enable: false
+  icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
+  text: Chat # Button text, change it as you wish.
+
 # Chatra Support
 # For more information: https://chatra.com
 # Dashboard: https://app.chatra.io/settings/general
@@ -771,6 +769,12 @@ tidio:
   enable: false
   key: # Public Key, get it from dashboard. See: https://www.tidio.com/panel/settings/developer
 
+# Gitter Support
+# For more information: https://gitter.im
+gitter:
+  enable: false
+  room:
+
 
 # ---------------------------------------------------------------
 # Tags Settings

layout/_partials/sidebar/site-overview.njk

@@ -60,17 +60,18 @@
 </div>
 {%- endif %}
 
-{%- if theme.chat.enable and theme.chat.service !== '' %}
+{%- if theme.chat.enable and (theme.chatra.enable or theme.tidio.enable or theme.gitter.enable) %}
   <div class="sidebar-button site-overview-item animated">
-  {%- if theme.chat.service == 'chatra' and theme.chatra.enable %}
+  {%- if theme.chatra.enable %}
-    <a onclick="Chatra('openChat', true);">
+    <button onclick="Chatra('openChat', true);">
-  {%- endif %}
+  {%- elif theme.tidio.enable %}
-  {%- if theme.chat.service == 'tidio' and theme.tidio.enable %}
+    <button onclick="tidioChatApi.open();">
-    <a onclick="tidioChatApi.open();">
+  {%- elif theme.gitter.enable %}
+    <button class="js-gitter-toggle-chat-button">
   {%- endif %}
   {%- if theme.chat.icon %}<i class="{{ theme.chat.icon }}"></i>{%- endif %}
     {{ theme.chat.text }}
-  </a>
+  </button>
   </div>
 {%- endif %}
 

layout/_third-party/chat/chatra.njk

@@ -1,5 +1,3 @@
-{%- if theme.chatra.enable %}
+{{ next_data('chatra', theme.chatra) }}
-  {{ next_data('chatra', theme.chatra) }}
+{{ next_js('third-party/chat/chatra.js') }}
-  {{ next_js('third-party/chat/chatra.js') }}
+<script{{ ' async' if theme.chatra.async }} src="https://call.chatra.io/chatra.js"></script>
-  <script{{ ' async' if theme.chatra.async }} src="https://call.chatra.io/chatra.js"></script>
-{%- endif %}

layout/_third-party/chat/gitter.njk

@@ -0,0 +1,3 @@
+{{ next_data('gitter', theme.gitter) }}
+{{ next_js('third-party/chat/gitter.js') }}
+<script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

layout/_third-party/chat/tidio.njk

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

layout/_third-party/index.njk

@@ -6,8 +6,13 @@
   {%- include 'search/localsearch.njk' -%}
 {%- endif %}
 
-{%- include 'chat/chatra.njk' -%}
+{%- if theme.chatra.enable %}
-{%- include 'chat/tidio.njk' -%}
+  {%- include 'chat/chatra.njk' -%}
+{%- elif theme.tidio.enable %}
+  {%- include 'chat/tidio.njk' -%}
+{%- elif theme.gitter.enable %}
+  {%- include 'chat/gitter.njk' -%}
+{%- endif %}
 
 {%- include 'tags/pdf.njk' -%}
 {%- include 'tags/mermaid.njk' -%}

source/css/_common/components/post/post-reward.styl

@@ -4,22 +4,12 @@
   text-align: center;
 
   button {
-    background: transparent;
+    button($sidebar-highlight);
     border: 2px solid $sidebar-highlight;
     border-radius: 2px;
-    color: $sidebar-highlight;
-    cursor: pointer;
-    line-height: 2;
     outline: 0;
-    padding: 0 15px;
     transition: all $transition-ease;
     vertical-align: text-top;
-
-    &:hover {
-      background: $sidebar-highlight;
-      border: 2px solid transparent;
-      color: white;
-    }
   }
 }
 

source/css/_common/outline/sidebar/sidebar-button.styl

@@ -3,25 +3,13 @@
     margin-top: 15px;
   }
 
-  a {
+  button {
+    button($orange);
     border: 1px solid $orange;
     border-radius: 4px;
-    color: $orange;
-    display: inline-block;
-    padding: 0 15px;
 
     .fa, .fab, .far, .fas {
       margin-right: 5px;
     }
-
-    &:hover {
-      background: $orange;
-      border: 1px solid $orange;
-      color: white;
-
-      .fa, .fab, .far, .fas {
-        color: white;
-      }
-    }
   }
 }

source/css/_mixins.styl

@@ -234,3 +234,16 @@ site-nav-hide-by-default() {
     height: var(--scroll-height);
   }
 }
+
+button($color) {
+  background: transparent;
+  color: $color;
+  cursor: pointer;
+  line-height: 2;
+  padding: 0 15px;
+
+  &:hover {
+    background: $color;
+    color: white;
+  }
+}

source/css/_schemes/Pisces/_sidebar.styl

@@ -35,19 +35,16 @@
   border-bottom: 1px dotted $grey-light;
   border-top: 1px dotted $grey-light;
 
-  a {
+  button {
     border: 0;
     color: $orange;
     display: block;
+    width: 100%;
 
     &:hover {
       background: none;
       border: 0;
       color: darken($orange, 20%);
-
-      .fa, .fab, .far, .fas {
-        color: darken($orange, 20%);
-      }
     }
   }
 }

source/js/third-party/chat/gitter.js

@@ -0,0 +1,5 @@
+/* global CONFIG */
+
+((window.gitter = {}).chat = {}).options = {
+  room: CONFIG.gitter.room
+};