NPM/site
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

news localization

Browse Source
This commit is contained in:
Elinorre 2020-03-03 21:01:25 +03:00
parent 37b5685808
commit b3ed6099d1
1 changed files with 51 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/templates/news.js
View File

@ -1,38 +1,48 @@
import React from 'react'
import { Link, graphql } from 'gatsby'
import { graphql } from 'gatsby'
import { FormattedMessage, Link, useIntl, injectIntl } from "gatsby-plugin-intl"
import { Timeline, TimelineItem } from 'vertical-timeline-component-for-react'
import Header from "../header"
import Footer from "../footer"
export default function(props) {
const news = props.data.news.edges.map(newsItem => newsItem.node)
const NewsTemplate = ( props ) => {
const intl = useIntl()
const lang = intl.locale
console.log(lang)
var news = ""
if ( lang==="ru" ) { news = props.data.ru_news.edges}
else if ( lang==="en" ) { news = props.data.en_news.edges; }
const next = props.pageContext.next
const prev = props.pageContext.prev
console.log(news)
return (
<>
<Header/>
<Timeline lineColor={'#ddd'} animate={false}>
{/* <h2>Все новости</h2> */}
{news.map(newsItem => (
{news.map(({node}) => (
<TimelineItem
key={newsItem.frontmatter.date}
dateText={newsItem.frontmatter.date}
key={node.frontmatter.date}
dateText={node.frontmatter.date}
style={{ color: '#e86971' }} >
<h2>{newsItem.frontmatter.title}</h2>
<p dangerouslySetInnerHTML={{__html: newsItem.html}}/>
<h2>{node.frontmatter.title}</h2>
<p dangerouslySetInnerHTML={{__html: node.html}}/>
</TimelineItem>
))}
</Timeline>
<nav style={{ display: 'flex', justifyContent: 'space-between', marginLeft: `15%` }}>
<div>
{prev &&<Link to={prev}><h1 style={{padding: 10, color: `red`}}>{`<`}---</h1> </Link>}
{prev && <Link to={`/${prev}`}><h1 style={{padding: 10, color: `red`}}>{`<`}---</h1> </Link>}
</div>
<div style={{ justifySelf: 'flex-end', marginRight: `10%`}}>
{next && <Link to={next} ><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
{next && <Link to={`/${next}`} ><h1 style={{padding: 10, color: `red`}}>---></h1></Link>}
</div>
</nav>
<Footer/>
@ -40,10 +50,30 @@ export default function(props) {
)
}
export default injectIntl(NewsTemplate)
export const query = graphql`
query NewsQuery($limit: Int!, $skip: Int!) {
news: allMarkdownRemark(
filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}}},
ru_news: allMarkdownRemark(
filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "ru"}}},
sort: {fields: [frontmatter___date], order: DESC},
limit: $limit
skip: $skip
) {
edges {
node {
frontmatter {
title
slug
date(formatString: "DD.MM.YYYY")
}
html
}
}
}
en_news: allMarkdownRemark(
filter: {frontmatter: {content_type: {eq: "post"}, published: {eq: true}, language: {eq: "en"}}},
sort: {fields: [frontmatter___date], order: DESC},
limit: $limit
skip: $skip