mirror of
https://github.com/silverstripe/doc.silverstripe.org
synced 2024-09-07 18:21:32 +02:00
Merge pull request #303 from creative-commoners/pulls/master/github-link
ENH Link github icon to current repo
This commit is contained in:
commit
a63aadc26e
@ -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">
|
||||
|
@ -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;
|
||||
|
5
src/contexts/LayoutContext.ts
Normal file
5
src/contexts/LayoutContext.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
const LayoutContext = React.createContext(null);
|
||||
|
||||
export default LayoutContext;
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user