seo & page

gatsby-config.js

@@ -7,6 +7,9 @@
 module.exports = {
   siteMetadata: {
     title: 'devthread.ru',
+    titleTemplate: '%s · статьи и руководства по веб-разработке',
+    description: 'сборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам',
+    url: 'https://devthread.ru',
     menuLinks: [
       {
         name: 'Статьи',

package-lock.json

@@ -12321,6 +12321,22 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
       "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-hot-loader": {
       "version": "4.12.21",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.12.21.tgz",
@@ -12380,6 +12396,11 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.7.2.tgz",
       "integrity": "sha512-u5l7fhAJXecWUJzVxzMRU2Zvw8m4QmDNHlTrT5uo3KBlYBhmChd7syAakBoay1yIiVhx/8Fi7a6v6kQZfsw81Q=="
     },
+    "react-side-effect": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.0.tgz",
+      "integrity": "sha512-IgmcegOSi5SNX+2Snh1vqmF0Vg/CbkycU9XZbOHJlZ6kMzTmi3yc254oB1WCkgA7OQtIAoLmcSFuHTc/tlcqXg=="
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

package.json

@@ -15,13 +15,16 @@
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "dependencies": {
+    "@reach/router": "^1.3.4",
     "gatsby": "^2.23.12",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sass": "^2.3.7",
     "gatsby-source-filesystem": "^2.3.14",
     "node-sass": "^4.14.1",
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "react-helmet": "^6.1.0"
   },
   "devDependencies": {
     "prettier": "2.0.5"

src/components/About/About.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Link } from 'gatsby'
+import './About.scss'
+
+import ContactsIcon from '../../images/contacts-icon.svg'
+
+const About = ({ title, pageTitle }) => {
+  return (
+    <div className="about">
+      <div className="about-heading">
+        <h1>{pageTitle}</h1>
+      </div>
+      <div className="about-content">
+        <div className="about-content__info">
+          <h2>{title}</h2>
+          <h3>публикуем статьи о мире веб-разрабоки и IT</h3>
+          <p>
+            этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит
+            в себе статьи и руководства.
+          </p>
+          <p>
+            ~ к тому же здесь публикуются различные новости которые произошли за последнее время
+          </p>
+        </div>
+        <div className="about-content__contacts">
+          <div className="contacts-heading">
+            <ContactsIcon />
+            <span>контакты</span>
+          </div>
+          <ul>
+            <li><a href="mailto:support@devthread.ru">support@devthread.ru</a></li>
+            <li><a href="/">telegram</a></li>
+            <Link to='/contacts'>форма обратной связи</Link>
+          </ul>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default About

src/components/About/About.scss

@@ -0,0 +1,106 @@
+@import '../../styles/variables.scss';
+
+.about {
+  & .about-heading {
+    margin-bottom: 45px;
+  }
+  & .about-content {
+    &__info {
+      & span {
+        display: block;
+        margin-bottom: 15px;
+      }
+      & h2 {
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+      & h3 {
+        max-width: 720px;
+        font-size: 48px;
+        margin-bottom: 20px;
+      }
+      & p {
+        font-size: 18px;
+        font-weight: 500;
+        margin-bottom: 35px;
+      }
+    }
+    &__contacts {
+      & .contacts-heading {
+        display: flex;
+        align-items: center;
+        & svg {
+          position: relative;
+          top: 1px;
+        }
+        & span {
+          margin-left: 14px;
+          font-weight: 700;
+          font-size: 24px;
+        }
+      }
+      & ul {
+        margin-top: 15px;
+        padding-left: 38px;
+        & li {
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+}
+
+.dark {
+  & .about {
+    color: $white-clr;
+  }
+}
+
+@media (max-width: 768px) {
+  .about {
+    & .about-content {
+      & h2 {
+        font-size: 24px;
+      }
+      & h3 {
+        font-size: 42px;
+      }
+      & p {
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+@media (max-width: 576px) {
+  .about {
+    & .about-content {
+      & h2 {
+        font-size: 21px;
+      }
+      & h3 {
+        font-size: 36px;
+      }
+      &__contacts {
+        & .contacts-heading {
+          & span {
+            font-size: 21px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .about {
+    & .about-content {
+      & h2 {
+        font-size: 18px;
+      }
+      & h3 {
+        font-size: 30px;
+      }
+    }
+  }
+}

src/components/SEO/SEO.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import useSiteMetadata from '../../hooks/useSiteMetadata'
+import PropTypes from 'prop-types'
+import { Helmet } from 'react-helmet'
+import { useLocation } from '@reach/router'
+
+const SEO = ({ title, description }) => {
+  const { pathname } = useLocation()
+  const { siteMetadata } = useSiteMetadata()
+
+  const seo = {
+    title: title || siteMetadata.title,
+    description: description || siteMetadata.description,
+    url: `${siteMetadata.siteUrl}${pathname}`
+  }
+
+  return (
+    <Helmet title={seo.title} titleTemplate={siteMetadata.titleTemplate}>
+      <meta name="description" content={seo.description} />
+      <meta property="og:url" content={seo.url} />
+      {seo.description && (
+        <meta property="og:description" content={seo.description} />
+      )}
+    </Helmet>
+  )
+}
+
+export default SEO
+
+SEO.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string
+}
+
+SEO.defaultProps = {
+  title: null,
+  description: null
+}
+

src/hooks/useSiteMetadata.js

@@ -6,6 +6,9 @@ const useSiteMetadata = () => {
       site {
         siteMetadata {
           title
+          titleTemplate
+          description
+          siteUrl: url
           menuLinks {
             name
             link

src/images/contacts-icon.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#contacts-icon)"><path d="M24 18C24 18.7072 23.719 19.3855 23.219 19.8856C22.7189 20.3857 22.0406 20.6667 21.3333 20.6667H2.66667C1.95942 20.6667 1.28115 20.3857 0.781049 19.8856C0.280952 19.3855 0 18.7072 0 18V5.99999C0 5.29275 0.280952 4.61447 0.781049 4.11438C1.28115 3.61428 1.95942 3.33333 2.66667 3.33333H21.3333C22.0406 3.33333 22.7189 3.61428 23.219 4.11438C23.719 4.61447 24 5.29275 24 5.99999V18Z" fill="#CCD6DD"></path><path d="M7.96677 11.7573L0.424766 19.2993C0.406766 19.318 0.400099 19.3413 0.384766 19.36C0.611432 19.74 0.927432 20.0553 1.30743 20.2827C1.32677 20.2673 1.34943 20.2607 1.36743 20.2427L8.9101 12.7C9.0351 12.5749 9.1053 12.4053 9.10523 12.2284C9.10517 12.0516 9.03486 11.882 8.90977 11.757C8.78467 11.632 8.61504 11.5618 8.4382 11.5619C8.26135 11.5619 8.09177 11.6322 7.96677 11.7573ZM23.6154 19.36C23.6014 19.3413 23.5934 19.318 23.5754 19.3L16.0341 11.7573C15.9722 11.6954 15.8987 11.6462 15.8178 11.6127C15.7369 11.5792 15.6502 11.5619 15.5627 11.5619C15.4751 11.5618 15.3884 11.579 15.3075 11.6125C15.2266 11.646 15.153 11.6951 15.0911 11.757C15.0292 11.8189 14.98 11.8924 14.9465 11.9733C14.9129 12.0542 14.8957 12.1409 14.8956 12.2284C14.8956 12.316 14.9128 12.4027 14.9463 12.4836C14.9798 12.5645 15.0289 12.6381 15.0908 12.7L22.6328 20.2427C22.6501 20.26 22.6741 20.2673 22.6928 20.2827C23.0724 20.0567 23.3895 19.7396 23.6154 19.36Z" fill="#99AAB5"></path><path d="M21.3333 3.33333H2.66667C1.95942 3.33333 1.28115 3.61428 0.781049 4.11438C0.280952 4.61447 0 5.29275 0 5.99999L0 6.68666L9.68533 16.3507C10.2951 16.9569 11.1201 17.2972 11.98 17.2972C12.8399 17.2972 13.6649 16.9569 14.2747 16.3507L24 6.67266V5.99999C24 5.29275 23.719 4.61447 23.219 4.11438C22.7189 3.61428 22.0406 3.33333 21.3333 3.33333Z" fill="#99AAB5"></path><path d="M21.3334 3.33333H2.66669C2.16484 3.33445 1.67354 3.47743 1.24948 3.74579C0.825413 4.01415 0.485867 4.39694 0.27002 4.85L10.114 14.6947C10.3616 14.9423 10.6556 15.1387 10.9792 15.2728C11.3027 15.4068 11.6495 15.4758 11.9997 15.4758C12.3499 15.4758 12.6967 15.4068 13.0202 15.2728C13.3438 15.1387 13.6377 14.9423 13.8854 14.6947L23.73 4.85C23.5142 4.39689 23.1747 4.01406 22.7506 3.74569C22.3265 3.47732 21.8352 3.33437 21.3334 3.33333Z" fill="#E1E8ED"></path><path d="M10 6.18C10 5.69333 10.2433 5.33333 10.6667 5.33333H13.08C13.6393 5.33333 13.8627 5.65999 13.8627 5.99999C13.8627 6.33066 13.63 6.66666 13.1727 6.66666H11.3673V7.99999H13.056C13.5333 7.99999 13.766 8.32599 13.766 8.66666C13.766 8.99733 13.522 9.33333 13.056 9.33333H11.3673V10.6667H13.2607C13.7267 10.6667 13.952 10.9927 13.952 11.3333C13.952 11.664 13.7167 12 13.2607 12H10.75C10.3213 12 10 11.646 10 11.208V6.18Z" fill="#66757F"></path></g><defs><clipPath id="contacts-icon"><rect width="24" height="24" fill="white"></rect></clipPath></defs></svg>

src/pages/about.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import useSiteMetadata from '../hooks/useSiteMetadata'
+import SEO from '../components/SEO/SEO'
+import Layout from '../components/Layout/Layout'
+import Offers from '../components/Offers/Offers'
+import About from '../components/About/About'
+
+const AboutPage = () => {
+  const { siteMetadata: { title, menuLinks } } = useSiteMetadata()
+  return (
+    <Layout>
+      <SEO title='О сайте' description='Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства.' />
+      <main>
+        <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} />
+            </div>
+            <div className="col-md-3 col-xs-12">
+              <Offers />
+            </div>
+          </div>
+        </div>
+      </main>
+    </Layout>
+  )
+}
+
+export default AboutPage

src/pages/index.js

@@ -1,5 +1,6 @@
 import React from "react"
 import { Link } from 'gatsby'
+import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Description from '../components/Description/Description'
 import Articles from '../components/Articles/Articles'
@@ -8,9 +9,10 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 import ArrowNext from '../images/arrow-next.svg'
 
-const Index = () => {
+const IndexPage = () => {
   return (
     <Layout>
+      <SEO />
       <Description />
       <main>
         <div className="container-fluid">
@@ -39,4 +41,4 @@ const Index = () => {
   )
 }
 
-export default Index
+export default IndexPage