Merge pull request #303 from creative-commoners/pulls/master/github-link

ENH Link github icon to current repo

src/components/Header.tsx

@@ -1,9 +1,10 @@
-import React, { StatelessComponent, ReactElement } from 'react';
+import React, { StatelessComponent, ReactElement, useContext } from 'react';
 import SearchBox from './SearchBox';
 import { Link, navigate } from 'gatsby';
 import logo from '../images/silverstripe-cms-logo.svg';
 import useDocContext from '../hooks/useDocContext';
 import useHierarchy from '../hooks/useHierarchy';
+import LayoutContext from '../contexts/LayoutContext';
 
 interface HeaderProps {
   handleSidebarToggle(e: EventTarget): void
@@ -14,6 +15,7 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
     const home = getHomePage();
     const currentNode = getCurrentNode() || home;
     const context = useDocContext();
+    const { currentGitRemote } = useContext(LayoutContext);
 
     const handleNavigate = (e: any): void => {
       if (typeof window === 'undefined') {
@@ -30,6 +32,8 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
     };
 
     const title = context === 'user' ? 'CMS Help' : 'CMS Docs';
+    const gitHref = currentGitRemote && currentGitRemote.hasOwnProperty('href')
+       ? currentGitRemote.href.replace(/\.git$/, '') : '';
 
     return (
     <header role="banner" className="header fixed-top">	    
@@ -59,7 +63,7 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
                   </select>
                   <i className="fas fa-chevron-down"></i>
                 </li>
-                <li className="d-none d-sm-inline list-inline-item"><a title="Go to the Github repository" href="https://github.com/silverstripe/silverstripe-framework"><i className="fab fa-github fa-fw" /></a></li>
+                { gitHref && <li className="d-none d-sm-inline list-inline-item"><a title="Go to the Github repository" href={gitHref}><i className="fab fa-github fa-fw" /></a></li> }
               </ul>
             </div>
             <button onClick={handleSidebarToggle} id="docs-sidebar-toggler" className="docs-sidebar-toggler docs-sidebar-visible mr-2 d-xl-none" type="button">

src/components/Layout.tsx

@@ -3,6 +3,7 @@ import Header from './Header';
 import Sidebar from './Sidebar';
 import useHierarchy from '../hooks/useHierarchy';
 import Helmet from 'react-helmet';
+import LayoutContext from '../contexts/LayoutContext';
 
 interface LayoutProps {
   children?: ReactNode
@@ -13,6 +14,7 @@ interface LayoutProps {
 const Layout: StatelessComponent<LayoutProps> = ({ children, pageContext: { slug } }) => {
   const { setCurrentPath, getVersionPath, getCurrentVersion, getCurrentNode, getDefaultVersion, getVersionMessage } = useHierarchy();
   const [isToggled, setSidebarOpen] = useState(false);
+  const [currentGitRemote, setCurrentGitRemote] = useState(null);
   const handleNavigate = () => setSidebarOpen(false);
   
   setCurrentPath(slug);
@@ -32,24 +34,29 @@ const Layout: StatelessComponent<LayoutProps> = ({ children, pageContext: { slug
     });
   }
 
+  const value = {
+    currentGitRemote,
+    setCurrentGitRemote,
+  };
+
   return (
-    <>
-    <Helmet link={helmetLinks} />
-    <Header handleSidebarToggle={() => setSidebarOpen(!isToggled)} />
-    <div className={`docs-wrapper container ${isToggled ? 'sidebar-visible' : ''}`}>
-    <Sidebar onNavigate={handleNavigate} isOpen={isToggled} />
-      <div className="docs-content">
-        <div className="container">
-          <article role="main" className="docs-article">
-            <>
-            {versionMessage}
-            {children}
-            </>
-          </article>
-        </div> 
+    <LayoutContext.Provider value={value}>
+      <Helmet link={helmetLinks} />
+      <Header handleSidebarToggle={() => setSidebarOpen(!isToggled)} />
+      <div className={`docs-wrapper container ${isToggled ? 'sidebar-visible' : ''}`}>
+      <Sidebar onNavigate={handleNavigate} isOpen={isToggled} />
+        <div className="docs-content">
+          <div className="container">
+            <article role="main" className="docs-article">
+              <>
+              {versionMessage}
+              {children}
+              </>
+            </article>
+          </div>
+        </div>
       </div>
-    </div>
-    </>
+    </LayoutContext.Provider>
   );
 };
 export default Layout;

src/contexts/LayoutContext.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const LayoutContext = React.createContext(null);
+
+export default LayoutContext;

src/templates/docs-template.tsx

@@ -1,7 +1,8 @@
-import React, { StatelessComponent, ReactElement } from 'react';
+import React, { StatelessComponent, ReactElement, useContext } from 'react';
 import { graphql } from 'gatsby';
 import DocsPage from '../components/DocsPage';
 import { SingleFileQuery } from '../types';
+import LayoutContext from '../contexts/LayoutContext';
 
 const Template: StatelessComponent<SingleFileQuery> = (result): ReactElement => {
     const currentNode = result.data.silverstripeDocument;
@@ -9,6 +10,9 @@ const Template: StatelessComponent<SingleFileQuery> = (result): ReactElement =>
     const  { html } = currentNode.watchFile;
     const { relativePath, gitRemote } = currentNode.parent.parent;
     const { ref, href } = gitRemote;
+    const { setCurrentGitRemote } = useContext(LayoutContext);
+
+    setCurrentGitRemote(gitRemote);
     
     return (
         <DocsPage