Add header slack button (#122)

* Add a join slack button to the header with support for light and dark mode

Signed-off-by: Pete Cheslock <[email protected]>

* Stop auto opening a browser on launch

Signed-off-by: Pete Cheslock <[email protected]>

---------

Signed-off-by: Pete Cheslock <[email protected]>

Author: petecheslock

docusaurus.config.js

@@ -172,6 +172,11 @@ const config = {
             position: 'right',
             value: '<iframe src="https://ghbtns.com/github-btn.html?user=llm-d&repo=llm-d&type=star&count=true&size=large" frameborder="0" scrolling="0" width="170" height="30" title="GitHub Star" style="vertical-align: middle;"></iframe>',
           },
+          {
+            type: 'html',
+            position: 'right',
+            value: '<a href="/slack" class="navbar-slack-button"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><title>Slack</title><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"></path></svg>Join Slack</a>',
+          },
         ],
       },
 

package.json

@@ -4,12 +4,12 @@
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
-    "start": "docusaurus start",
+    "start": "docusaurus start --no-open",
     "build": "docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "clear": "docusaurus clear",
-    "serve": "docusaurus serve",
+    "serve": "docusaurus serve --no-open",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
     "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js --runInBand"

src/css/custom.css

@@ -113,6 +113,34 @@ display: none !important;
   transform: scale(1.05);
 }
 
+/* Navbar Slack button */
+.navbar-slack-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background-color: transparent;
+  color: var(--ifm-navbar-link-color);
+  text-decoration: none;
+  border-radius: 6px;
+  font-family: var(--ifm-font-family-base);
+  font-size: 1rem;
+  font-weight: var(--ifm-font-weight-semibold);
+  vertical-align: middle;
+  margin-left: 8px;
+  transition: background-color 0.2s ease;
+}
+
+.navbar-slack-button:hover {
+  background-color: #f0f0f0;
+  color: var(--ifm-navbar-link-hover-color);
+  text-decoration: none;
+}
+
+[data-theme="dark"] .navbar-slack-button:hover {
+  background-color: #3a3a3a;
+}
+
 .header {
   display: flex;
   align-content: center;