Add Slack Icon next to GitHub Icon in the Documentation Navbar (#634)

* Add Slack Icon next to GitHub Icon in the Documentation Navbar

Signed-off-by: Sanajit Jana <dev.sanajitjana@gmail.com>

* Replace slack black-white logo with color logo

Signed-off-by: Sanajit Jana <dev.sanajitjana@gmail.com>

* Update Slack logo in CSS to a new color version and adjust background size

Signed-off-by: Sanajit Jana <dev.sanajitjana@gmail.com>

* Re-use and shorten the slack logo svg url

---------

Signed-off-by: Sanajit Jana <dev.sanajitjana@gmail.com>
Co-authored-by: Achanandhi M <110651321+Achanandhi-M@users.noreply.github.com>

Author: sanajitjana

docusaurus.config.js

@@ -161,6 +161,13 @@ module.exports = {
           position: "right",
           dropdownActiveClassDisabled: true,
         },
+        {
+          href:
+            "https://join.slack.com/t/keploy/shared_invite/zt-357qqm9b5-PbZRVu3Yt2rJIa6ofrwWNg",
+          position: "right",
+          className: "header-slack-link",
+          "aria-label": "Join our Slack community",
+        },
         {
           href: "https://github.com/keploy/keploy",
           position: "right",

src/css/custom.css

@@ -32,6 +32,7 @@
   --ifm-link-hover-color: inherit;
   --site-primary-hue-saturation: 30 100%;
   --site-primary-hue-saturation-light: 0 0%; /* do we really need this extra one? */
+  --slack-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1610 1610'%3E%3Cpath fill='%23E01E5A' d='M338 1017c0 93-76 169-169 169S0 1110 0 1017s76-169 169-169h169v169zM423 1017c0-93 76-169 169-169s169 76 169 169v424c0 93-76 169-169 169s-169-76-169-169v-424z'/%3E%3Cpath fill='%2336C5F0' d='M593 338c-93 0-169-76-169-169S500 0 593 0s169 76 169 169v169H593zM593 423c93 0 169 76 169 169s-76 169-169 169H169C76 761 0 685 0 592s76-169 169-169h424z'/%3E%3Cpath fill='%232EB67D' d='M1272 593c0-93 76-169 169-169s169 76 169 169-76 169-169 169h-169V593zM1187 593c0 93-76 169-169 169s-169-76-169-169V169C849 76 925 0 1018 0s169 76 169 169v424z'/%3E%3Cpath fill='%23ECB22E' d='M1017 1272c93 0 169 76 169 169s-76 169-169 169-169-76-169-169v-169h169zM1017 1187c-93 0-169-76-169-169s76-169 169-169h424c93 0 169 76 169 169s-76 169-169 169h-424z'/%3E%3C/svg%3E");
 }
 
 html[data-theme="dark"] {
@@ -551,6 +552,25 @@ td img {
     no-repeat;
 }
 
+/* Slack navbar icon to match GitHub size, spacing, color */
+.header-slack-link:hover {
+  opacity: 0.6;
+}
+
+.header-slack-link::before {
+  content: "";
+  width: 24px;
+  height: 24px;
+  display: flex;
+  background: var(--slack-logo) no-repeat;
+  background-size: 24px 24px;
+}
+
+[data-theme="dark"] .header-slack-link::before {
+  background: var(--slack-logo) no-repeat;
+  background-size: 24px 24px;
+}
+
 div[class^="announcementBar_"] {
   --site-announcement-bar-stripe-color1: hsl(
     var(--site-primary-hue-saturation) 88%