ui upd

src/components/Contacts/Contacts.js

@@ -1,12 +1,11 @@
 import React from 'react';
+import PropTypes from 'prop-types'
 import ContactsFrom from './ContactsForm/ContactsForm';
-import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import './Contacts.scss'
 
 import MemoIcon from '../../images/memo-icon.svg'
 
-const Contacts = () => {
+const Contacts = ({ email, telegram }) => {
-  const { siteMetadata: { social: { email, telegram } } } = useSiteMetadataQuery()
   return (
     <div className="contacts">
       <div className="contacts-heading">
@@ -30,4 +29,9 @@ const Contacts = () => {
   )
 }
 
-export default Contacts
+export default Contacts
+
+Contacts.propTypes = {
+  email: PropTypes.string,
+  telegram: PropTypes.string
+}

src/pages/404.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Main } from '../ui/ui'
 import { Grid } from 'react-flexbox-grid'
 import { Link } from 'gatsby'
 import Layout from '../components/Layout/Layout'
@@ -6,7 +7,7 @@ import Layout from '../components/Layout/Layout'
 const NotFound = () => {
   return (
     <Layout>
-      <main>
+      <Main>
         <Grid fluid>
           <div className="error">
             <span>#404</span>
@@ -14,7 +15,7 @@ const NotFound = () => {
             <Link to='/'>вернуться на главную</Link>
           </div>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/pages/about.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Grid, Row, Col } from 'react-flexbox-grid'
+import { Main } from '../ui/ui'
 import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -11,7 +12,7 @@ const AboutPage = () => {
   return (
     <Layout>
       <SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -22,7 +23,7 @@ const AboutPage = () => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/pages/articles.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
@@ -16,7 +17,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO title='Статьи' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -41,7 +42,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
             </Col >
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/pages/books.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
@@ -13,7 +14,7 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO title='Ресурсы' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -40,7 +41,7 @@ const BooksPage = ({ data: { allMarkdownRemark: edges } }) => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/pages/contacts.js

@@ -1,22 +1,25 @@
 import React from 'react';
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
+import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Contacts from '../components/Contacts/Contacts'
 
 const ContactsPage = () => {
+  const { siteMetadata: { social: { email, telegram } } } = useSiteMetadataQuery()
   return (
     <Layout>
       <SEO title='📝 Контакты' description='Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные.' />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={10} lgOffset={1}>
-              <Contacts />
+              <Contacts email={email} telegram={telegram} />
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/pages/index.js

@@ -1,5 +1,7 @@
 import React from "react"
 import { Link, graphql } from 'gatsby'
+import { Main } from '../ui/ui'
+import { Grid, Row, Col } from 'react-flexbox-grid'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Description from '../components/Description/Description'
@@ -9,14 +11,12 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 import ArrowNext from '../images/arrow-next.svg'
 
-import { Grid, Row, Col } from 'react-flexbox-grid'
-
 const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO />
       <Description />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col xs={12}>
@@ -38,7 +38,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/templates/articleTemplate.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import Layout from '../components/Layout/Layout'
 import Article from '../components/Article/Article'
@@ -7,13 +8,10 @@ import MoreArticles from '../components/Articles/MoreArticles/MoreArticles'
 import Newsletter from '../components/Newsletter/Newsletter'
 import { graphql } from "gatsby"
 
-const articleTemplate = ({ data }) => {
+const articleTemplate = ({ data: { markdownRemark: { frontmatter, html } } }) => {
-  const { markdownRemark } = data
-  const { frontmatter, html } = markdownRemark
-
   return (
     <Layout>
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -26,7 +24,7 @@ const articleTemplate = ({ data }) => {
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/templates/categoryTemplate.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
@@ -16,7 +17,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
   return (
     <Layout>
       <SEO title={title} />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -44,7 +45,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/templates/tagTemplate.js

@@ -1,4 +1,5 @@
 import React from "react"
+import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
@@ -16,7 +17,7 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
   return (
     <Layout>
       <SEO title={title} />
-      <main>
+      <Main>
         <Grid fluid>
           <Row>
             <Col lg={9} xs={12}>
@@ -44,7 +45,7 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
             </Col>
           </Row>
         </Grid>
-      </main>
+      </Main>
     </Layout>
   )
 }

src/ui/ui.js

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const Main = ({ children, ...props }) => {
+  return (
+    <main {...props}>
+      {children}
+    </main>
+  )
+}
+
+
+export { Main }