site/src/pages/index.js

112 lines
3.9 KiB
JavaScript
Raw Normal View History

2020-01-15 17:45:50 +03:00
import React from "react"
2020-02-18 23:29:14 +03:00
import { FormattedMessage, FormattedHTMLMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
import { graphql } from "gatsby"
2020-01-15 17:45:50 +03:00
import Layout from "../components/layout"
2020-02-18 23:29:14 +03:00
import SEO from "../components/seo"
2020-01-22 18:49:42 +03:00
2020-01-15 17:45:50 +03:00
import head from "../images/index/head.png"
import "../styles/main.css"
2020-01-22 18:49:42 +03:00
import "../styles/bootstrap.min.css"
import {Jumbotron, Button} from "react-bootstrap"
2020-01-15 17:45:50 +03:00
2020-02-18 23:29:14 +03:00
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(
2020-01-15 17:45:50 +03:00
<Layout>
2020-02-18 23:29:14 +03:00
<SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
2020-01-15 17:45:50 +03:00
{/* --------------------------------- */}
2020-01-22 18:49:42 +03:00
<Jumbotron>
2020-02-18 23:29:14 +03:00
<img src={head} width="90%" className="center-block" alt="head" />
2020-01-15 17:45:50 +03:00
<hr/>
2020-02-18 23:29:14 +03:00
<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>
2020-01-22 18:49:42 +03:00
</Jumbotron>
2020-01-15 17:45:50 +03:00
{/* ------------------------------ */}
2020-02-18 23:29:14 +03:00
<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>
2020-01-15 17:45:50 +03:00
</div>
2020-02-18 23:29:14 +03:00
<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>
2020-01-15 17:45:50 +03:00
</div>
2020-02-18 23:29:14 +03:00
<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>
2020-01-15 17:45:50 +03:00
</div>
</div>
2020-01-20 15:48:48 +03:00
<hr style={{marginBottom: `50px`}}/>
2020-01-15 17:45:50 +03:00
{/* --------------------------------- */}
2020-02-24 17:46:33 +03:00
<h1 style={{textAlign: `center`}}><FormattedMessage id="more.news"/></h1>
2020-02-18 23:29:14 +03:00
{ news.map(({node}) => {
const title = node.frontmatter.title;
const date = node.frontmatter.date;
console.log()
2020-01-15 17:45:50 +03:00
return (
2020-02-18 23:29:14 +03:00
<div className = "card" style={{marginBottom: `15px`, borderRadius: `0px`, boxShadow: `0 2px 2px #A2A2A2`}}>
<div className = "card-body">
<h2 className = "title">
2020-01-21 22:16:48 +03:00
{title}<span id="date">{date}</span>
</h2>
2020-01-15 17:45:50 +03:00
<p
dangerouslySetInnerHTML = {{
2020-02-18 23:29:14 +03:00
__html: node.frontmatter.description || node.html,
2020-01-15 17:45:50 +03:00
}}
/>
</div>
</div>
)
})}
</Layout>
)
2020-02-18 23:29:14 +03:00
}
2020-01-15 17:45:50 +03:00
2020-02-18 23:29:14 +03:00
export default injectIntl(IndexPage)
2020-01-15 17:45:50 +03:00
export const query = graphql`
query {
2020-02-18 23:29:14 +03:00
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{
2020-01-15 17:45:50 +03:00
html
frontmatter {
date(formatString: "DD.MM.YYYY")
title
2020-02-18 23:29:14 +03:00
language
2020-01-15 17:45:50 +03:00
}
}
}
2020-02-18 23:29:14 +03:00
}
}`
2020-01-15 17:45:50 +03:00