Merge pull request #106 from GetStream/feat/sidebar-github

feat: add Github links to sidebar
GetStream · Sep 5, 2023 · 093242d · 093242d
2 parents d6a34e7 + ecb4796
commit 093242d
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 18 deletions.
diff --git a/src/contexts/BreadcrumbsContext.js b/src/contexts/BreadcrumbsContext.js
@@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"
 
 import { useLocation } from "@docusaurus/router"
 
+import URLS from "../../urls"
+
 export const BreadcrumbsContext = React.createContext()
 
 const removeTrailingSlash = string => {
@@ -42,6 +44,7 @@ export const BreadcrumbsContextProvider = ({ children }) => {
   const [breadcrumbs, setBreadcrumbs] = useState([])
   const [sidebar, setSidebar] = useState([])
   const { pathname } = useLocation()
+  const [urlPlatform] = pathname.replace(URLS.docs.root, "").split("/")
 
   const extarctBreadcrumbs = useCallback((localSidebar, localPathname) => {
     const pathObjects = extractPathObjects(localSidebar, localPathname)
@@ -56,8 +59,9 @@ export const BreadcrumbsContextProvider = ({ children }) => {
     () => ({
       breadcrumbs,
       setSidebar,
+      urlPlatform,
     }),
-    [breadcrumbs, setSidebar]
+    [breadcrumbs, setSidebar, urlPlatform]
   )
 
   return (

diff --git a/src/css/components/menu.scss b/src/css/components/menu.scss
@@ -47,7 +47,7 @@ html[data-theme="dark"] {
 
     > .menu__list {
       // custom Stream footer with website's links
-      > .menu__list-item:nth-last-child(-n + 4):not(:last-child) {
+      > .menu__list-item:nth-last-child(-n + 5):not(:last-child) {
         .menu__link {
           --ifm-menu-color: var(--ifm-link-color);
           font-weight: 700;
@@ -71,7 +71,7 @@ html[data-theme="dark"] {
         }
       }
 
-      > .menu__list-item:not(:nth-last-child(-n + 4)) {
+      > .menu__list-item:not(:nth-last-child(-n + 5)) {
         // main item style is only applied to first items
         margin-bottom: 1.5rem;
 

diff --git a/src/theme/DocSidebar/index.js b/src/theme/DocSidebar/index.js
@@ -3,18 +3,29 @@ import React, { useEffect, useMemo } from "react"
 import OriginalDocSidebar from "@theme-original/DocSidebar"
 
 import { useBreadcrumbsContext } from "../../hooks/useBreadcrumbsContext"
+import productVariables from "../../product-variables"
 
-const WEB_LINKS = [
-  ["Contact Support", "https://getstream.io/contact/support/"],
-  ["Maker Account", "https://getstream.io/maker-account/"],
-  ["Mobile Chat Kit", "https://getstream.io/chat/ux-kit/"], // activity feeds ux kit ???
-  [
-    <>
-      © Stream.IO, Inc. <br /> All Rights Reserved.
-    </>,
-    "/",
-  ],
-]
+const gitLink = urlPlatform => {
+  return (
+    productVariables[process.env.PRODUCT]?.github?.[urlPlatform] ||
+    "https://github.com/GetStream/"
+  )
+}
+
+const WEB_LINKS = gitLink => {
+  return [
+    ["Contact Support", "https://getstream.io/contact/support/"],
+    ["Maker Account", "https://getstream.io/maker-account/"],
+    ["Mobile Chat Kit", "https://getstream.io/chat/ux-kit/"], // activity feeds ux kit ???
+    ["Install from GitHub", gitLink],
+    [
+      <>
+        © Stream.IO, Inc. <br /> All Rights Reserved.
+      </>,
+      "/",
+    ],
+  ]
+}
 
 const addTitle = sidebarItems => {
   return sidebarItems.map(({ label, items, ...props }) => ({
@@ -25,7 +36,8 @@ const addTitle = sidebarItems => {
 }
 
 export default function DocSidebar({ sidebar, ...props }) {
-  const { setSidebar } = useBreadcrumbsContext()
+  const { setSidebar, urlPlatform } = useBreadcrumbsContext()
+  const gitHubLink = gitLink(urlPlatform)
 
   useEffect(() => {
     setSidebar(sidebar)
@@ -35,7 +47,7 @@ export default function DocSidebar({ sidebar, ...props }) {
     () =>
       addTitle([
         ...sidebar.map(category => ({ ...category, collapsed: false })),
-        ...WEB_LINKS.map(([label, href]) => ({
+        ...WEB_LINKS(gitHubLink).map(([label, href]) => ({
           type: "link",
           label,
           href,

diff --git a/src/theme/Navbar/styles.scss b/src/theme/Navbar/styles.scss
@@ -240,15 +240,15 @@
       > ul.menu__list {
         position: relative;
         // Styles for 'main' item
-        > li.menu__list-item:not(:nth-last-child(-n + 4)) {
+        > li.menu__list-item:not(:nth-last-child(-n + 5)) {
           margin-bottom: 1rem;
           > a.menu__link {
             @include mixins.menu-main-item;
           }
         }
 
         // custom Stream footer with website's links
-        > .menu__list-item:nth-last-child(-n + 4):not(:last-child) {
+        > .menu__list-item:nth-last-child(-n + 5):not(:last-child) {
           .menu__link {
             --ifm-menu-color: var(--ifm-link-color);
             font-weight: 700;