112 lines
3.9 KiB
JavaScript
112 lines
3.9 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 head from "../images/index/head.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 = ""
|
|
if ( lang==="ru" ) { news = data.ru_posts.edges; }
|
|
else if ( lang==="en" ) { news = data.en_posts.edges; }
|
|
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" />
|
|
<Button variant="success" id="jt"><Link to="./about"><FormattedMessage id="jumbotron.about" /></Link></Button>
|
|
</Jumbotron>
|
|
{/* ------------------------------ */}
|
|
<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`}}>Последние новости</h1>
|
|
{ news.map(({node}) => {
|
|
const title = node.frontmatter.title;
|
|
const date = node.frontmatter.date;
|
|
console.log()
|
|
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>
|
|
<p
|
|
dangerouslySetInnerHTML = {{
|
|
__html: node.frontmatter.description || node.html,
|
|
}}
|
|
/>
|
|
</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
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}`
|
|
|