rss feed icon

content/articles/2020-07-21_test-article.md

@@ -19,17 +19,18 @@ tags:
   - graphql
   - reactjs
 ---
+
 ## this is second article
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non fermentum ligula. Aenean et ex nec magna faucibus congue eu ac justo. Cras malesuada diam lectus, vitae feugiat nulla condimentum id. Duis interdum sodales eros ornare mattis. Nunc id viverra ante. Maecenas suscipit est sed rhoncus condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vehicula risus nisi, quis hendrerit magna tincidunt eu. Phasellus fringilla accumsan viverra. Mauris a cursus orci.
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 
-* Nunc non fermentum ligula?
+- Nunc non fermentum ligula?
-* Nunc non fermentum ligula?
+- Nunc non fermentum ligula?
-* Nunc non fermentum ligula?
+- Nunc non fermentum ligula?
-* Nunc non fermentum ligula?
+- Nunc non fermentum ligula?
-* Nunc non fermentum ligula?
+- Nunc non fermentum ligula?
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non fermentum ligula. Aenean et ex nec magna faucibus congue eu ac justo. Cras malesuada diam lectus, vitae feugiat nulla condimentum id. Duis interdum sodales eros ornare mattis. Nunc id viverra ante. Maecenas suscipit est sed rhoncus condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vehicula risus nisi, quis hendrerit magna tincidunt eu. Phasellus fringilla accumsan viverra. Mauris a cursus orci.
 
@@ -64,4 +65,4 @@ React.useEffect(() => {
 
 1. First
 2. Second
-3. Third
+3. Third

gatsby-config.js

@@ -4,7 +4,7 @@ const siteConfig = require("./config")
 
 const {
   NODE_ENV,
-  URL: NETLIFY_SITE_URL = 'https://devthread.ru/',
+  URL: NETLIFY_SITE_URL = "https://devthread.ru/",
   DEPLOY_PRIME_URL: NETLIFY_DEPLOY_URL = NETLIFY_SITE_URL,
   CONTEXT: NETLIFY_ENV = NODE_ENV,
 } = process.env
@@ -41,20 +41,20 @@ module.exports = {
     },
     "gatsby-plugin-sitemap",
     {
-      resolve: 'gatsby-plugin-robots-txt',
+      resolve: "gatsby-plugin-robots-txt",
       options: {
         resolveEnv: () => NETLIFY_ENV,
         env: {
           production: {
-            policy: [{ userAgent: '*' }],
+            policy: [{ userAgent: "*" }],
           },
-          'branch-deploy': {
+          "branch-deploy": {
-            policy: [{ userAgent: '*', disallow: ['/'] }],
+            policy: [{ userAgent: "*", disallow: ["/"] }],
             sitemap: null,
             host: null,
           },
-          'deploy-preview': {
+          "deploy-preview": {
-            policy: [{ userAgent: '*', disallow: ['/'] }],
+            policy: [{ userAgent: "*", disallow: ["/"] }],
             sitemap: null,
             host: null,
           },
@@ -109,7 +109,7 @@ module.exports = {
                   date: edge.node.frontmatter.date,
                   url: `${site.siteMetadata.siteUrl}/article/${edge.node.frontmatter.slug}`,
                   guid: `${site.siteMetadata.siteUrl}/article/${edge.node.frontmatter.slug}`,
-                  custom_elements: [{ 'content:encoded': edge.node.html }],
+                  custom_elements: [{ "content:encoded": edge.node.html }],
                 })
               })
             },
@@ -135,8 +135,8 @@ module.exports = {
                 }
               }
             `,
-            output: '/rss.xml',
+            output: "/rss.xml",
-            title: 'devthread.ru | RSS Лента',
+            title: "devthread.ru | RSS Лента",
           },
         ],
       },
@@ -180,15 +180,15 @@ module.exports = {
               maxWidth: 2400,
               quality: 100,
               withWebp: true,
-              loading: 'lazy',
+              loading: "lazy",
               linkImagesToOriginal: false,
-            }
+            },
           },
           `gatsby-remark-responsive-iframe`,
           {
-            resolve: 'gatsby-remark-copy-linked-files',
+            resolve: "gatsby-remark-copy-linked-files",
             options: {
-              destinationDir: 'static',
+              destinationDir: "static",
             },
           },
           {

src/components/Footer/Footer.js

@@ -6,6 +6,7 @@ import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
 import LogoIcon from "../../images/logo-icon.svg"
 import GatsbyIcon from "../../images/gatsby-icon.svg"
 import NetlifyIcon from "../../images/netlify-icon.svg"
+import RssIcon from "../../images/rss-icon.svg"
 
 const Footer = () => {
   const {
@@ -94,6 +95,12 @@ const Footer = () => {
           </div>
         </div>
         <div className="footer-content__copy">
+          <div className="rss-feed">
+            <a href="/rss.xml" target="_blank">
+              <RssIcon />
+              RSS Канал
+            </a>
+          </div>
           <span>© 2020 {title}</span>
         </div>
       </div>

src/components/Footer/Footer.scss

@@ -78,6 +78,19 @@ footer {
       color: $black-clr;
       font-weight: 700;
       font-size: 13px;
+      display: flex;
+      align-items: center;
+      & span {
+        width: 100%;
+      }
+      & .rss-feed {
+        font-size: 0;
+        & svg:hover {
+          & .rss-feed-icon {
+            fill: #ee802f;
+          }
+        }
+      }
     }
   }
 }
@@ -106,6 +119,20 @@ footer {
       &__copy {
         color: $white-clr;
         font-weight: 600;
+        & .rss-feed {
+          & a {
+            & svg {
+              & .rss-feed-icon {
+                fill: $white-clr;
+              }
+            }
+            & svg:hover {
+              & .rss-feed-icon {
+                fill: #ee802f;
+              }
+            }
+          }
+        }
       }
     }
   }

src/components/Header/Header.js

@@ -65,12 +65,15 @@ const Header = () => {
       <>
         <a href={yadzen} target="_blank" rel="noreferrer">
           <YadzenIcon />
+          Ян.Дзен
         </a>
         <a href={telegram} target="_blank" rel="noreferrer">
           <TelegramIcon />
+          Телеграмм
         </a>
         <a href={twitter} target="_blank" rel="noreferrer">
           <TwitterIcon />
+          Твиттер
         </a>
       </>
     )

src/components/Header/Header.scss

@@ -44,6 +44,7 @@ header {
       align-items: center;
       & .header-nav__social {
         margin-right: 35px;
+        font-size: 0;
         & svg:hover {
           & .twitter-svg-social {
             fill: #00acee;
@@ -128,6 +129,7 @@ header {
       }
       & .mobile-social {
         margin-top: 30px;
+        font-size: 0;
         & svg:hover {
           & .twitter-svg-social {
             fill: #00acee;

src/images/rss-icon.svg

@@ -0,0 +1,12 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#rss-icon)">
+<path class="rss-feed-icon" d="M1.85714 12.9999C2.88281 12.9999 3.71429 12.1685 3.71429 11.1428C3.71429 10.1171 2.88281 9.28564 1.85714 9.28564C0.831471 9.28564 0 10.1171 0 11.1428C0 12.1685 0.831471 12.9999 1.85714 12.9999Z" fill="black"/>
+<path class="rss-feed-icon" d="M0 4.3335V6.81C3.41343 6.81 6.19079 9.58643 6.19079 12.9999H8.66636C8.66636 8.22143 4.77843 4.3335 0 4.3335Z" fill="black"/>
+<path class="rss-feed-icon" d="M0 0V2.4765C5.80357 2.4765 10.5244 7.19643 10.5244 13H13C13 5.83143 7.16857 0 0 0Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="rss-icon">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</svg>