site/src/pages/index.js
2020-03-21 22:53:30 +03:00

115 lines
4.0 KiB
JavaScript

import React from "react"
import { FormattedMessage, FormattedHTMLMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import Parser from "html-react-parser"
import head_ru from "../images/index/head.png"
import head_en from "../images/index/head_en.png"
import "../styles/main.css"
import "../styles/bootstrap.min.css"
import {Jumbotron, Button} from "react-bootstrap"
const IndexPage = ({ data }) => {
const intl = useIntl()
const lang = intl.locale
var news = ""
var head = ""
if ( lang==="ru" ) { news = data.ru_posts.edges; head = head_ru; }
else if ( lang==="en" ) { news = data.en_posts.edges; head = head_en; }
console.log(head)
return(
<Layout>
<SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
{/* --------------------------------- */}
<Jumbotron>
<img src={head} width="90%" className="center-block" alt="head" />
<hr/>
<h3 style = {{color: `rgb(18,64,171)`}}><FormattedMessage id="jumbotron.labintro"/></h3>
<p id="lead"><FormattedMessage id="jumbotron.lead"/></p>
<FormattedHTMLMessage id="jumbotron.list" />
</Jumbotron>
<div className="aboutButton">
<Button variant="success" id="jt"><Link to="/about"><FormattedMessage id="jumbotron.about" /></Link></Button>
</div>
{/* ------------------------------ */}
<div className="row">
<div className="col-lg-4">
<h2><FormattedMessage id="more.nuclear_title" /></h2>
<p> <FormattedMessage id="more.nuclear_body" /> </p>
<Button variant="primary" id="more"><Link to="/projects/physics"><FormattedMessage id="more.nuclear_more" /></Link></Button>
</div>
<div className="col-lg-4">
<h2><FormattedMessage id="more.education_title" /></h2>
<p> <FormattedMessage id="more.education_body" /></p>
<Button variant="primary" id="more"><Link to="/projects/education"><FormattedMessage id="more.education_more" /></Link></Button>
</div>
<div className="col-lg-4">
<h2><FormattedMessage id="more.software_title" /></h2>
<p><FormattedMessage id="more.software_body" /></p>
<Button variant="primary" id="more"><Link to="/projects/software"><FormattedMessage id="more.software_more" /></Link></Button>
</div>
</div>
<hr style={{marginBottom: `50px`}}/>
{/* --------------------------------- */}
<h1 style={{textAlign: `center`}}><FormattedMessage id="more.news"/></h1>
{ news.map(({node}) => {
const title = node.frontmatter.title;
const date = node.frontmatter.date;
const html = node.html;
return (
<div className = "card" style={{marginBottom: `15px`, borderRadius: `0px`, boxShadow: `0 2px 2px #A2A2A2`}}>
<div className = "card-body">
<h2 className = "title">
{title}<span id="date">{date}</span>
</h2>
<div className="news">{Parser(html)}</div>
</div>
</div>
)
})}
</Layout>
)
}
export default injectIntl(IndexPage)
export const query = graphql`
query {
ru_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "ru"}}},
sort: {fields: [frontmatter___date], order: DESC}, limit: 3 )
{
edges{
node{
html
frontmatter {
date(formatString: "DD.MM.YYYY")
title
language
}
}
}
}
en_posts: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "en"}}},
sort: {fields: [frontmatter___date], order: DESC}, limit: 3 )
{
edges{
node{
html
frontmatter {
date(formatString: "DD.MM.YYYY")
title
language
}
}
}
}
}`