diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 9241283e..b048780c 100644 --- a/src/components/Header.tsx +++ b/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"> diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index bf296897..44ba7c08 100644 --- a/src/components/Layout.tsx +++ b/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; diff --git a/src/contexts/LayoutContext.ts b/src/contexts/LayoutContext.ts new file mode 100644 index 00000000..efb31575 --- /dev/null +++ b/src/contexts/LayoutContext.ts @@ -0,0 +1,5 @@ +import React from 'react'; + +const LayoutContext = React.createContext(null); + +export default LayoutContext; diff --git a/src/templates/docs-template.tsx b/src/templates/docs-template.tsx index 2e099d7e..4407b0cd 100644 --- a/src/templates/docs-template.tsx +++ b/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