anchor

gatsby-config.js

@@ -35,6 +35,18 @@ module.exports = {
       resolve: `gatsby-transformer-remark`,
       options: {
         plugins: [
+          {
+            resolve: `gatsby-remark-autolink-headers`,
+            options: {
+              offsetY: `140`,
+              icon: `<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path class="anchor-icon" fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>`,
+              className: `anchor-link`,
+              maintainCase: true,
+              removeAccents: true,
+              isIconAfterHeader: true,
+              elements: [`h1`, `h2`, `h3`, `h4`],
+            },
+          },
           {
             resolve: `gatsby-remark-prismjs`,
             options: {

package-lock.json

@@ -7615,6 +7615,36 @@
         }
       }
     },
+    "gatsby-remark-autolink-headers": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-2.3.10.tgz",
+      "integrity": "sha512-kSdYaU/rRxWKFfjtFCXFu+3ZG4aR45FTTjpe7murmduN4N8zj7xGNEK8yubecwv882DKJXAS/lTrgcJUJfoW3g==",
+      "requires": {
+        "@babel/runtime": "^7.10.3",
+        "github-slugger": "^1.3.0",
+        "lodash": "^4.17.15",
+        "mdast-util-to-string": "^1.1.0",
+        "unist-util-visit": "^1.4.1"
+      },
+      "dependencies": {
+        "unist-util-visit": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-1.4.1.tgz",
+          "integrity": "sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==",
+          "requires": {
+            "unist-util-visit-parents": "^2.0.0"
+          }
+        },
+        "unist-util-visit-parents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-2.1.2.tgz",
+          "integrity": "sha512-DyN5vD4NE3aSeB+PXYNKxzGsfocxp6asDc2XXE3b0ekO2BaRUpBicbbUygfSvYfUz1IkmjFR1YF7dPklraMZ2g==",
+          "requires": {
+            "unist-util-is": "^3.0.0"
+          }
+        }
+      }
+    },
     "gatsby-remark-prismjs": {
       "version": "3.5.9",
       "resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.9.tgz",

package.json

@@ -21,6 +21,7 @@
     "gatsby-plugin-react-helmet": "^3.3.8",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sass": "^2.3.7",
+    "gatsby-remark-autolink-headers": "^2.3.10",
     "gatsby-remark-prismjs": "^3.5.9",
     "gatsby-source-filesystem": "^2.3.18",
     "gatsby-transformer-remark": "^2.8.23",

src/components/Article/Article.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import SEO from '../SEO/SEO'
 import { Link } from 'gatsby'
 import './Article.scss'
 
@@ -7,11 +8,14 @@ import VkIcon from '../../images/vk-icon.svg'
 import TwitterIcon from '../../images/twitter-icon__large.svg'
 import FacebookIcon from '../../images/facebook-icon__large.svg'
 
-const Article = ({ data: { title, description, category, tags, time }, html }) => {
+const Article = ({ data: { title, description, category, tags, time, date }, html }) => {
   return (
+    <>
+      <SEO title={title} description={description} />
       <div className="article">
         <article>
           <div className="article-info">
+            <div className="left-info">
               <div className="article-info__time">
                 <span>~ {time} мин</span>
               </div>
@@ -20,6 +24,12 @@ const Article = ({ data: { title, description, category, tags, time }, html }) =
                 <span>4252</span>
               </div> 
             </div>
+            <div className="right-info">
+              <div className="article-info__date">
+                <span>{new Date(date).toLocaleDateString()}</span>
+              </div> 
+            </div>
+          </div>
           <div className="article-heading">
             <h1>{title}</h1>
           </div>
@@ -68,6 +78,7 @@ const Article = ({ data: { title, description, category, tags, time }, html }) =
           </div>
         </article>
       </div>
+    </>
   )
 }
 

src/components/Article/Article.scss

@@ -4,8 +4,12 @@
   & article {
     & .article-info {
       display: flex;
+      justify-content: space-between;
       margin-bottom: 10px;
       font-size: 14px;
+      & .left-info {
+        display: flex;
+      }
       &__views {
         display: flex;
         align-items: center;
@@ -14,6 +18,10 @@
           margin-right: 7px;
         }
       }
+      &__date {
+        margin-right: 15px;
+        color: #767676;
+      }
     }
     & .article-heading {
       margin-bottom: 5px;
@@ -32,12 +40,13 @@
     }
     & .article-share {
       display: flex;
+      align-items: center;
       margin-bottom: 15px;
       &__social{
         margin-left: 15px;
         & a {
           text-decoration: none;
-          margin-right: 5px;
+          margin-right: 10px;
         }
         & a:nth-child(3) {
           margin-right: 0;

src/pages/articles.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Link } from 'gatsby'
+import { Link, graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'

src/pages/index.js

@@ -1,5 +1,5 @@
 import React from "react"
-import { Link } from 'gatsby'
+import { Link, graphql } from 'gatsby'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Description from '../components/Description/Description'

src/styles/global.scss

@@ -119,6 +119,17 @@
     border-bottom: 1px solid rgba(153, 153, 153, 0.2);
   }
 }
+
+.dark {
+  & .anchor-link {
+    & svg {
+      & .anchor-icon {
+        fill: $white-clr;
+      }
+    }
+  }
+}
+
 html {
   height: 100%;
 }