localization

This commit is contained in:
Elinorre 2020-02-18 23:27:19 +03:00
parent 82383f1daf
commit 27481bad14
5 changed files with 68 additions and 33 deletions

View File

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

View File

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

View File

@ -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

View File

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

View File

@ -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)