localization
This commit is contained in:
parent
82383f1daf
commit
27481bad14
@ -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
|
||||||
{` `}
|
{` `}
|
||||||
|
@ -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)
|
||||||
|
35
src/components/language.js
Normal file
35
src/components/language.js
Normal 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
|
@ -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)
|
||||||
|
9
src/components/redirect.js
Normal file
9
src/components/redirect.js
Normal 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)
|
Loading…
Reference in New Issue
Block a user