upd sitemetadata

gatsby-config.js

@@ -10,7 +10,6 @@ module.exports = {
     titleTemplate: '%s · статьи и руководства по веб-разработке',
     description: 'сборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам',
     url: 'https://devthread.ru',
-    email: 'support@devthread.ru',
     menuLinks: [
       {
         name: 'Статьи',
@@ -28,7 +27,13 @@ module.exports = {
         name: 'Ресурсы',
         link: '/books'
       }
-    ]
+    ],
+    social: {
+      email: 'support@devthread.ru',
+      telegram: 'https://t.me/devthread',
+      twitter: 'https://twitter.com/devthread',
+      yadzen: 'https://zen.yandex.ru/'
+    }
   },
   plugins: [
     'gatsby-plugin-react-helmet',

src/components/About/About.js

@@ -5,7 +5,7 @@ import './About.scss'
 
 import ContactsIcon from '../../images/contacts-icon.svg'
 
-const About = ({ title, pageTitle, email }) => {
+const About = ({ title, pageTitle, social }) => {
   return (
     <div className="about">
       <div className="about-heading">
@@ -29,8 +29,8 @@ const About = ({ title, pageTitle, email }) => {
             <span>контакты</span>
           </div>
           <ul>
-            <li><a href={`mailto:${email}`}>{email}</a></li>
+            <li><a href={`mailto:${social.email}`}>{social.email}</a></li>
-            <li><a href="/">telegram</a></li>
+            <li><a href={social.telegram} target='_blank' rel='noreferrer'>telegram</a></li>
             <Link to='/contacts'>форма обратной связи</Link>
           </ul>
         </div>

src/components/Contacts/Contacts.js

@@ -6,8 +6,7 @@ import './Contacts.scss'
 import MemoIcon from '../../images/memo-icon.svg'
 
 const Contacts = () => {
-  const { siteMetadata: { email } } = useSiteMetadataQuery()
+  const { siteMetadata: { social: { email, telegram } } } = useSiteMetadataQuery()
-  
   return (
     <div className="contacts">
       <div className="contacts-heading">
@@ -24,7 +23,7 @@ const Contacts = () => {
         <h2>контактные данные</h2>
         <ul>
           <li><a href={`mailto:${email}`}>{email}</a></li>
-          <li><a href="/">telegram</a></li>
+          <li><a href={telegram}>telegram</a></li>
         </ul>
       </div>
     </div>

src/components/Footer/Footer.js

@@ -1,44 +1,44 @@
 import React from 'react';
 import { Link } from 'gatsby'
 import PropTypes from 'prop-types'
+import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import './Footer.scss'
 
 import LogoIcon from '../../images/logo-icon.svg'
 import GatsbyIcon from '../../images/gatsby-icon.svg'
 import NetlifyIcon from '../../images/netlify-icon.svg'
 
-const Footer = ({ title }) => {
+const Footer = () => {
+  const { siteMetadata: { title, menuLinks, social: { email, telegram, twitter, yadzen } } } = useSiteMetadataQuery()
   return (
     <footer>
       <div className="footer-content">
         <div className="footer-content__logo">
           <LogoIcon />
-          <a href="/">{title}</a>
+          <Link to='/'>{title}</Link>
         </div>
         <div className="footer-content__nav">
           <div className="footer-nav__links">
             <div className="links-nav">
               <p>Навигация</p>
               <ul>
-                <li><Link to='/articles'>Статьи</Link></li>
+                {menuLinks.map((page, i) => page.link !== '/contacts' ? <li key={i}><Link to={page.link}>{page.name}</Link></li> : null)}
-                <li><Link to='/about'>О сайте</Link></li>
-                <li><Link to='/books'>Ресурсы</Link></li>
               </ul>
             </div>
             <div className="links-contacts">
               <p>Контакты</p>
               <ul>
                 <li><Link to='/contacts'>Форма обратной связи</Link></li>
-                <li><a href="/">Телеграмм</a></li>
+                <li><a href={telegram}>Телеграмм</a></li>
-                <li><a href="mailto:support@devthread.ru">Почта</a></li>
+                <li><a href={`mailto:${email}`}>Почта</a></li>
               </ul>
             </div>
             <div className="links-social">
               <p>Социальные сети</p>
               <ul>
-                <li><a href="https://t.me/devthread" rel='noreferrer' target='_blank'>Наш телеграмм канал</a></li>
+                <li><a href={telegram} rel='noreferrer' target='_blank'>Наш телеграмм канал</a></li>
-                <li><a href="/" target='_blank'>Яндекс.Дзен</a></li>
+                <li><a href={yadzen} rel='noreferrer' target='_blank'>Яндекс.Дзен</a></li>
-                <li><a href="https://twitter.com/devthread" rel='noreferrer' target='_blank'>Твиттер</a></li>
+                <li><a href={twitter} rel='noreferrer' target='_blank'>Твиттер</a></li>
               </ul>
             </div>
           </div>

src/components/Header/Header.js

@@ -2,6 +2,7 @@ import React from 'react'
 import { useLocation } from '@reach/router'
 import PropTypes from 'prop-types'
 import { Link } from 'gatsby'
+import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import ThemeContext from '../../context/ThemeContext'
 import './Header.scss'
 
@@ -11,7 +12,8 @@ import TwitterIcon from '../../images/twitter-icon.svg'
 import MoonIcon from '../../images/moon-icon.svg'
 import SunIcon from '../../images/sun-icon.svg'
 
-const Header = ({ title, menuLinks }) => {
+const Header = () => {
+  const { siteMetadata: { title, menuLinks, social: { twitter, telegram } } } = useSiteMetadataQuery()
   const [isScrolled, setIsScrolled] = React.useState(false)
   const [isMobileOpen, setIsMobileOpen] = React.useState(false)
   const { pathname } = useLocation()
@@ -42,10 +44,10 @@ const Header = ({ title, menuLinks }) => {
         </div>
         <div className="header-content__nav desktop">
           <div className="header-nav__social">
-            <a href="/" target="_blank">
+            <a href={telegram} target="_blank" rel='noreferrer'>
               <TelegramIcon />
             </a>
-            <a href="/" target="_blank">
+            <a href={twitter} target="_blank" rel='noreferrer'>
               <TwitterIcon />
             </a>
           </div>

src/components/Layout/Layout.js

@@ -1,16 +1,13 @@
 import React from 'react'
-import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import Header from '../Header/Header'
 import Footer from '../Footer/Footer'
 
 const Layout = ({ children }) => {
-  const { siteMetadata } = useSiteMetadataQuery()
-
   return (
     <>
-      <Header title={siteMetadata.title} menuLinks={siteMetadata.menuLinks} />
+      <Header />
         {children}
-      <Footer title={siteMetadata.title} />
+      <Footer />
     </>
   )
 }

src/hooks/useSiteMetadataQuery.js

@@ -8,12 +8,17 @@ const useSiteMetadata = () => {
           title
           titleTemplate
           description
-          email
           siteUrl: url
           menuLinks {
             name
             link
           }
+          social {
+            email
+            telegram
+            twitter
+            yadzen
+          }
         }
       }
     }

src/pages/about.js

@@ -6,7 +6,7 @@ import Offers from '../components/Offers/Offers'
 import About from '../components/About/About'
 
 const AboutPage = () => {
-  const { siteMetadata: { title, menuLinks, email } } = useSiteMetadataQuery()
+  const { siteMetadata: { title, menuLinks, social } } = useSiteMetadataQuery()
   return (
     <Layout>
       <SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
@@ -14,7 +14,7 @@ const AboutPage = () => {
         <div className="container-fluid">
           <div className="row">
             <div className="col-md-9 col-xs-12">
-              <About title={title} pageTitle={menuLinks.filter(page => page.link === '/about')[0].name} email={email} />
+              <About title={title} pageTitle={menuLinks.filter(page => page.link === '/about')[0].name} social={social} />
             </div>
             <div className="col-md-3 col-xs-12">
               <Offers />

src/styles/global.scss

@@ -50,6 +50,7 @@
   position: relative;
   top: -150px;
   visibility: hidden;
+  height: 0;
 }
 
 .inner {