localization

src/components/footer.js

@@ -3,7 +3,7 @@ import "../styles/footer.css"
 
 const Footer = () => (
     <footer>
-    <div class = "container" style = {{textAlign: `left`,}}>
+    <div className = "container" style = {{textAlign: `left`,}}>
     <p>
       © 2016 mipt-npm group | Built with
       {` `}

src/components/header.js

@@ -1,44 +1,40 @@
 import React from "react"
+import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
+import Language from "./language"
+import SEO from "./seo"
 
 import logo from "../images/index/logo_white.png"
 import "bootstrap/dist/css/bootstrap.css"
 import "../styles/header.css"
 import { globalHistory as history } from '@reach/router'
 import {Navbar, Nav} from "react-bootstrap"
-import { Link } from '@reach/router'
-
-const NavLink = ({ partial=true, ...props}) => (
-  <Link
-    {...props}
-    getProps={({isCurrent, isPartiallyCurrent }) => {
-      const isActive = partial
-        ? isPartiallyCurrent
-        : isCurrent;
-      return {
-        style: {
-          color: isActive ? "white" : "", 
-        }
-      };
-    }}
-  />
-);
 
 const Header = (  ) => {
+  const intl = useIntl()
+  const lang = intl.locale
+
   const { location } = history;
   var activePrj = location.pathname.includes('/projects') ? 'active': '';
   var activeNews = location.pathname.includes('/news') ? 'active': '';
+  var active = [' ', ' ']
+  if (location.pathname.includes('/about')) active[0] = 'active'
+  if (location.pathname.includes('/partners')) active[1] = 'active'
+
   return(
     <header>
+    <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
+
     <Navbar bg="dark" expand="lg" fixed="top">
     <div className="container">
     <Navbar.Toggle aria-controls="basic-navbar-nav" />
     <Navbar.Collapse id="basic-navbar-nav">
         <Nav className="mr-auto">
           <Navbar.Brand><Link to="/"><img src={logo} height="50px" alt="npm logo" id="logo"/></Link></Navbar.Brand>
-          <Nav.Link><NavLink id={activeNews} to="news">Новости</NavLink></Nav.Link>
-          <Nav.Link><NavLink to="about">Группа</NavLink></Nav.Link>
-          <Nav.Link><NavLink id={activePrj} to="projects/physics">Проекты</NavLink></Nav.Link>
-          <Nav.Link><NavLink to="partners">Партнеры</NavLink></Nav.Link>
+          <Nav.Link><Link id={activeNews} to="/news"><FormattedMessage id="header.news"/></Link></Nav.Link>
+          <Nav.Link><Link id={active[0]} to="/about"><FormattedMessage id="header.group"/></Link></Nav.Link>
+          <Nav.Link><Link id={activePrj} to="/projects/physics"><FormattedMessage id="header.projects"/></Link></Nav.Link>
+          <Nav.Link><Link id={active[1]} to="/partners"><FormattedMessage id="header.partners"/></Link></Nav.Link>
+          <Nav.Link eventKey="language"><Language/></Nav.Link>
         </Nav>
     </Navbar.Collapse>
     </div>
@@ -46,4 +42,4 @@ const Header = (  ) => {
   </header>
 )}
 
-export default Header
+export default injectIntl(Header)

src/components/language.js

@@ -0,0 +1,35 @@
+import React from "react"
+import { IntlContextConsumer, changeLocale } from "gatsby-plugin-intl"
+
+const languageName = {
+  ru: "Russian",
+  en: "English",
+}
+
+const Language = () => {
+  return (
+    <div>
+      <IntlContextConsumer>
+        {({ languages, language: currentLocale }) =>
+          languages.map(language => (
+            <a
+              key={language}
+              onClick={() => changeLocale(language)}
+              style={{
+                color: currentLocale === language ? `white` : `rgb(170,172,173)`,
+                backgroundColor: currentLocale === language ? `#db4446`: ``,
+                marginLeft: -11,
+                margin: 10,
+                cursor: `pointer`,
+              }}
+            >
+              {languageName[language]}
+            </a>
+          ))
+        }
+      </IntlContextConsumer>
+    </div>
+  )
+}
+
+export default Language

src/components/layout.js

@@ -1,8 +1,6 @@
 import React from "react"
 import PropTypes from "prop-types"
-
-import favicon from "../images/icon.png"
-import Helmet from "react-helmet"
+import { injectIntl } from "gatsby-plugin-intl"
 
 import Header from "./header"
 import Footer from "./footer"
@@ -13,14 +11,11 @@ import "../styles/bootstrap.min.css"
 import "../styles/main.css"
 import "katex/dist/katex.min.css"
 
-const Layout = ({ children }) => (
+const Layout = ({ children, intl }) => (
     <>
-    <Helmet>
-      <link rel="icon" href={favicon}/>
-    </Helmet>
+      <Header siteTitle={intl.formatMessage({ id: "title" })} />
       <SEO title=" "/>
-      <Header siteTitle="NPM group" />
-      <div class = "container">
+      <div className = "container">
         <main>{children}</main>
       </div>
         <Footer/>
@@ -31,4 +26,4 @@ Layout.propTypes = {
   children: PropTypes.node.isRequired,
 }
 
-export default Layout
+export default injectIntl(Layout)

src/components/redirect.js

@@ -0,0 +1,9 @@
+import React from "react"
+import { injectIntl } from "gatsby-plugin-intl"
+import SEO from "./seo"
+
+const Redirect = ({ intl }) => {
+  return <SEO title={`${intl.formatMessage({ id: "title" })}`} />
+}
+
+export default injectIntl(Redirect)