site/src/pages/about.js

import React from "react"
import { FormattedMessage, FormattedHTMLMessage, useIntl, Link, injectIntl } from "gatsby-plugin-intl"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import "../styles/main.css"

const AboutPage = ({ data }) => {
  const intl = useIntl()
  const lang = intl.locale
  var members = ""
  if ( lang==="ru" ) { members = data.ru_members.edges; } 
  else if ( lang==="en" ) { members = data.en_members.edges; }
  return(
    <Layout>
        <SEO lang={lang} title={intl.formatMessage({ id: "title" })} />
        <h1 style = {{marginTop: `20px`}}><FormattedMessage id="about.title" /></h1>
        <p style = {{marginTop: `0px`}}><FormattedMessage id="about.descr" /></p>

        <h2 id="publications"><FormattedMessage id="about.pubs.title" /></h2>
        <p style = {{marginTop: `0px`, marginBottom: `0px`}}><FormattedHTMLMessage id="about.pubs.available1"/><Link to="/publications"><FormattedMessage id="about.pubs.available2"/></Link></p>

        <h2 id="contacts"><FormattedMessage id="about.contacts.title" /></h2>
        <p style = {{marginTop: `0px`, marginBottom: `0px`}}><FormattedMessage id="about.contacts.mail" /><a href='mailto&#58;&#110;p&#109;&#64;m%&#54;&#57;%70&#116;&#46;ru'>npm&#64;mip&#116;&#46;ru</a></p>
        <p style = {{marginTop: `0px`}}><FormattedMessage id="about.contacts.telegram" /><a href="https://t.me/mipt_npm">https://t.me/mipt_npm</a></p>

    {/* ------------------------------ */}

    { members.map(({node}) => {
      const name = node.frontmatter.title;
      const photo = node.frontmatter.photo;
      const path = "../../images/members/"
      if (photo === null)
        return(
          <div>
          <hr/>
            <div className = "row">
                <div className = "col-lg-2"></div>
                <div className = "col-lg-10">
                    <h2>{name}</h2>
                    <p
                    dangerouslySetInnerHTML = {{
                        __html: node.html,
                        }}
                    />
                </div>     
            </div>
          </div>  
        )
      else
      return (
          <div>
          <hr/>
            <div className = "row">
                <div className = "col-lg-2">
                    <img src={path+photo} alt=" "/>
                </div>
                <div className = "col-lg-10">
                    <h2>{name}</h2>
                    <p
                    dangerouslySetInnerHTML = {{
                        __html: node.html,
                        }}
                    />
                </div>     
            </div>
          </div>
      )
    })}
    </Layout>
  )
}

export default injectIntl(AboutPage)

export const query = graphql`
query {
    ru_members: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "member"}, published: {eq: true}, language: {eq: "ru"}}}, 
            sort: {fields: frontmatter___order, order: ASC}) {
      edges{
      node {
        html
        frontmatter {
          title
          photo
          language
        }
      }
      }
    }

    en_members: allMarkdownRemark(filter: {frontmatter: {content_type: {eq: "member"}, published: {eq: true}, language: {eq: "en"}}}, 
    sort: {fields: frontmatter___order, order: ASC}) {
      edges{
      node {
        html
        frontmatter {
          title
          photo
          language
        }
      }
      }
    }
}`