dataforge title and navbar changes

src/components/dataforge/docsLayout.js

@@ -1,12 +1,20 @@
 import React from "react"
 import PropTypes from "prop-types"
 
+import favicon from "../../images/dataforge/df_logo.png"
+import Helmet from "react-helmet"
+
+import SEO from "../../components/dataforge/seo"
 import Header from "./header"
 import Footer from "./footer"
 import "../../styles/dataforge/docs.css"
 
 const DocsLayout = ({children}) => (
     <>
+    <Helmet>
+      <link rel="icon" href={favicon}/>
+    </Helmet>
+        <SEO PageTitle="Documentation |"/>
         <Header id="df"/>
             <main id="docs">{children}</main>
         <Footer id="df"/>

src/components/dataforge/header.js

@@ -1,41 +1,43 @@
 import React from "react"
-import {Link} from "gatsby"
+import { Link } from "@reach/router"
-import { globalHistory as history } from '@reach/router'
 
 import logo from "../../images/dataforge/df_logo.png"
 import "../../styles/dataforge/header.css"
 import "../../styles/bootstrap.min.css"
 import {Navbar, Nav} from "react-bootstrap"
 
-const Header = () => { 
+const NavLink = props => (
-  let curActive = [' ', ' ', ' ', ' ', ' ', ' '];
+  <Link
-  const { location } = history;
+    {...props}
-  if (location.pathname === '/dataforge/news'){curActive[0] = 'active';}  
+    getProps={({ isCurrent }) => {
-  if (location.pathname === '/dataforge/docs'){curActive[1] = 'active';}  
+      return {
-  if (location.pathname === '/dataforge/modules'){curActive[2] = 'active';}
+        style: {
-  if (location.pathname === '/dataforge/releases'){curActive[3] = 'active';}  
+          color: isCurrent ? "white" : "rgb(230, 221, 221)"
-  if (location.pathname === '/dataforge/apps'){curActive[4] = 'active';}  
+        }
-  if (location.pathname === '/dataforge/misc'){curActive[5] = 'active';}  
+      };
+    }}
+  />
+);
 
-  return(
+const Header = () => (
 	<header id="df">
 	<Navbar expand="lg" fixed="top">
     <div class="container">
     <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="mr-auto">
-          <Navbar.Brand><Link to="./dataforge"><img src={logo} height="50px" alt="dataforge logo" id="logo"/></Link></Navbar.Brand>
+          <Navbar.Brand><Link to="/dataforge"><img src={logo} height="60px" width="65px" alt="dataforge logo" id="dflogo"/></Link></Navbar.Brand>
-          <Nav.Link><Link id={`${curActive[0]}`} to="./dataforge/news">News</Link></Nav.Link>
+          <Nav.Link><NavLink id="df" to="/dataforge/news">News</NavLink></Nav.Link>
-          <Nav.Link><Link id={`${curActive[1]}`} to="./dataforge/docs">Documentation</Link></Nav.Link>
+          <Nav.Link><NavLink id="df" to="/dataforge/docs">Documentation</NavLink></Nav.Link>
-          <Nav.Link><Link id={`${curActive[2]}`} to="./dataforge/modules">Modules</Link></Nav.Link>
+          <Nav.Link><NavLink id="df" to="/dataforge/modules">Modules</NavLink></Nav.Link>
-          <Nav.Link><Link id={`${curActive[3]}`} to="./dataforge/releases">Releases</Link></Nav.Link>
+          <Nav.Link><NavLink id="df" to="/dataforge/releases">Releases</NavLink></Nav.Link>
-          <Nav.Link><Link id={`${curActive[4]}`} to="./dataforge/apps">Applications</Link></Nav.Link>
+          <Nav.Link><NavLink id="df" to="/dataforge/apps">Applications</NavLink></Nav.Link>
-          <Nav.Link><Link id={`${curActive[5]}`} to="./dataforge/misc">See also</Link></Nav.Link>
+          <Nav.Link><NavLink id="df" to="/dataforge/misc">See also</NavLink></Nav.Link>
         </Nav>
     </Navbar.Collapse>
     </div>
     </Navbar>
 	</header>
-)}
+)
 
 export default Header

src/components/dataforge/layout.js

@@ -1,12 +1,20 @@
 import React from "react"
 import PropTypes from "prop-types"
 
+import favicon from "../../images/dataforge/df_logo.png"
+import Helmet from "react-helmet"
+
 import Header from "./header"
 import Footer from "./footer"
+import SEO from "./seo"
 import "../../styles/dataforge/layout.css"
 
 const Layout = ({children}) => (
     <>
+    <Helmet>
+      <link rel="icon" href={favicon}/>
+    </Helmet>
+        <SEO title=" "/>
         <Header id="df"/>
         <div class = "container">
             <main id="df">{children}</main>

src/components/dataforge/seo.js

@@ -0,0 +1,28 @@
+import React from "react"
+import PropTypes from "prop-types"
+import Helmet from "react-helmet"
+
+const SEO = ({ lang, PageTitle }) => {
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title="DataForge"
+      pageTitle = {PageTitle} 
+      titleTemplate={`${PageTitle} %s`}
+    />
+  )
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+}
+
+SEO.propTypes = {
+  lang: PropTypes.string,
+  title: PropTypes.string.isRequired,
+}
+
+export default SEO

src/pages/dataforge/apps.js

@@ -1,8 +1,10 @@
 import React from "react"
 import Layout from "../../components/dataforge/layout"
+import SEO from "../../components/dataforge/seo"
 
 const AppPage = () => (
     <Layout>
+    <SEO PageTitle="Applications |"/>
     <h1>Troitsk nu-mass</h1>
     <img src="http://www.inr.ru/~trdat/img/spectrometer900.jpg" alt="spectrometer"/>
     <p>

src/pages/dataforge/index.js

@@ -1,9 +1,11 @@
 import React from "react"
+import SEO from "../../components/dataforge/seo"
 import {graphql} from "gatsby"
 import Layout from "../../components/dataforge/layout"
 
 const DataforgePage = ({ data }) => (
     <Layout id="df">
+    <SEO PageTitle=" "/>
     {data.index.nodes.map(index=>{
         return(<p
             dangerouslySetInnerHTML = {{

src/pages/dataforge/misc.js

@@ -1,10 +1,12 @@
 import React from "react"
 import Layout from "../../components/dataforge/layout"
+import SEO from "../../components/dataforge/seo"
 
 import sms_logo from "../../images/dataforge/sms_logo.png"
 
 const MiscPage = () => (
     <Layout>
+	<SEO PageTitle="See also |"/>
     <h1 id="about">About us...</h1>
 
 	<img width="150" src={sms_logo} style={{marginRight: `25px`}} alt="sms"/>

src/pages/dataforge/modules.js

@@ -1,8 +1,10 @@
 import React from "react"
+import SEO from "../../components/dataforge/seo"
 import Layout from "../../components/dataforge/layout"
 
 const ModulesPage = () => (
     <Layout id="df">
+    <SEO PageTitle="Modules |" />
     <h1 id="core">dataforge-core</h1>
     <ul>
         <li>Meta-data processing tools.</li>

src/pages/dataforge/news.js

@@ -1,9 +1,11 @@
 import React from "react"
+import SEO from "../../components/dataforge/seo"
 import {graphql} from "gatsby"
 import Layout from "../../components/dataforge/layout"
 
 const NewsPage = ({ data }) => (
         <Layout>
+        <SEO PageTitle="News |"/>
         {data.posts.nodes.map(post => {
           const title = post.frontmatter.title;
           const date = post.frontmatter.date;

src/pages/dataforge/releases.js

@@ -1,8 +1,10 @@
 import React from "react"
+import SEO from "../../components/dataforge/seo"
 import Layout from "../../components/dataforge/layout"
 
 const ReleasesPage = () => (
     <Layout>
+	<SEO PageTitle="Releases |"/>
     <h2>Versioning</h2>
     <p>DataForge uses <a href="https://docs.oracle.com/middleware/1212/core/MAVEN/maven_version.htm">Maven version</a> policy.</p>
     <h2>Source code and documentation consistency</h2>

src/styles/dataforge/header.css

@@ -10,14 +10,12 @@ header#df .navbar {
     background-color: rgb(114, 111, 111);
     border: none; }
 
-header#df img#logo { opacity: 0.8; margin-top: 5px; }
+a[aria-current="page"] img#dflogo { opacity: 1; background-color: rgb(114,111,111);}
-header#df img#logo:hover { opacity: 1; }
-a[aria-current="page"] img#logo { opacity: 1; }
 
-header#df a.nav-link:hover { color: black; background-color: rgb(182, 188, 192); }
+header#df a.nav-link:hover { color: white; background-color: rgb(182, 188, 192); padding-top: 15px }
 header#df a.nav-link { margin-top: 7px; }
-header#df a.nav-link a { padding: 15px; }
+header#df a.nav-link a#df { padding: 15px; }
-header#df a.nav-link a#active { 
+a[aria-current="page"]#df { 
     background-color: rgb(182, 188, 192); 
     padding-top: 11px; 
     padding-bottom: 18px; }
@@ -38,7 +36,7 @@ header#df div.mr-auto.navbar-nav {
 /* ------ media ------------------------------------ */
 @media (max-width: 769px){
     header#df a.nav-link { margin-left: 40px; margin-right: 40px; padding: 15px; }
-    header#df img#logo { margin-left: 20px; margin-right: 0px;}
+    header#df img#dflogo { margin-left: 0px; margin-right: 0px; padding-left: 10px}
     header#df div#basic-navbar-nav.navbar-collapse.collapse.show {
       background-color: rgb(114,111,111); 
       padding-bottom: 450px; }