upd render & styles

gatsby-config.js

@@ -1,5 +1,3 @@
-const path = require('path');
-
 require('dotenv').config()
 
 module.exports = {
@@ -113,18 +111,32 @@ module.exports = {
           {
             resolve: `gatsby-transformer-remark`,
             options: {
-              plugins: [{
-                resolve: `gatsby-remark-vscode`,
-                options: {
-                  extensions: ['material-theme'],
-                  theme: {
-                    default: 'Light+ (default light)',
-                    parentSelector: {
-                      'body.dark': 'One Dark Pro'
-                    }
+              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-vscode`,
+                  options: {
+                    extensions: ['material-theme'],
+                    theme: {
+                      default: 'Light+ (default light)',
+                      parentSelector: {
+                        'body.dark': 'One Dark Pro'
+                      }
+                    },
                   }
                 }
-              }]
+              ]
             }
           }
         ],

src/components/Snippets/SnippetItem/SnippetItem.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'gatsby'
+
+const SnippetItem = ({ slug, title, date, tags }) => {
+  return (
+    <div className='snippet-item'>
+      <div className="left-info">
+        <div className="snippet-item__date">
+          {date}
+        </div>
+        <div className="snippet-item__heading">
+          <Link to={`/snippet/${slug}`}>{title}</Link>
+        </div>
+      </div>
+      <div className="right-info">
+        <div className="snippet-item__tags">
+          {tags.map((tag, i) => (
+            <div key={i} className="tag-item">{tag}</div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SnippetItem

src/components/Snippets/Snippets.js

@@ -1,31 +1,9 @@
 import React from 'react';
-import { Link } from 'gatsby'
-import useSnippetsQuery from '../../hooks/useSnippetsQuery'
 
-const Snippets = () => {
-  const { snippets } = useSnippetsQuery()
+const Snippets = ({ children }) => {
   return (
     <div className='snippets'>
-      <h2>Сниппеты</h2>
-      {snippets.map(({ node: { frontmatter } }, i) => (
-        <div key={i} className='snippet-item'>
-          <div className="left-info">
-            <div className="snippet-item__date">
-              {frontmatter.date}
-            </div>
-            <div className="snippet-item__heading">
-              <Link to={`/snippet/${frontmatter.slug}`}>{frontmatter.title}</Link>
-            </div>
-          </div>
-          <div className="right-info">
-            <div className="snippet-item__tags">
-              {frontmatter.tags.map((tag, i) => (
-                <div key={i} className="tag-item">{tag}</div>
-              ))}
-            </div>
-          </div>
-        </div>
-      ))}
+      {children}
     </div>
   )
 }

src/components/Snippets/Snippets.scss

@@ -2,10 +2,13 @@
 
 .snippets {
   margin-bottom: 40px;
-  & h2 {
-    margin-bottom: 20px;
+  & h1, h2 {
+    margin-bottom: 10px;
     font-size: 34px;
   }
+  p {
+    margin-bottom: 15px;
+  }
   & .snippet-item {
     display: flex;
     justify-content: space-between;

src/pages/index.js

@@ -3,14 +3,17 @@ import { Link, graphql } from 'gatsby'
 import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
+import useSnippetsQuery from '../hooks/useSnippetsQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
 import Articles from '../components/Articles/Articles'
 import Snippets from '../components/Snippets/Snippets'
+import SnippetItem from '../components/Snippets/SnippetItem/SnippetItem'
 import Offers from '../components/Offers/Offers'
 
 const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   const { siteMetadata: { options: { articles: { onPage } } } } = useSiteMetadataQuery()
+  const { snippets } = useSnippetsQuery()
   let [limit, setLimit] = React.useState(onPage)
 
   return (
@@ -31,7 +34,18 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
           <Row>
             <Col lg={9} xs={12}>
               <Articles data={edges} limit={limit} setLimit={setLimit} /> 
-              <Snippets />
+              <Snippets>
+                <h2>Сниппеты</h2>
+                {snippets.map(({ node: { frontmatter } }, i) => 
+                  <SnippetItem 
+                    key={i} 
+                    slug={frontmatter.slug} 
+                    title={frontmatter.title} 
+                    date={frontmatter.date} 
+                    tags={frontmatter.tags} 
+                  />
+                )}
+              </Snippets>
             </Col>
             <Col lg={3} xs={12}>
               <Offers /> 

src/pages/snippets.js

@@ -1,11 +1,13 @@
 import React from "react"
+import { 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 Snippets from '../components/Snippets/Snippets'
+import SnippetItem from '../components/Snippets/SnippetItem/SnippetItem'
 
-const SnippetsPage = () => {
+const SnippetsPage = ({ data: { allMarkdownRemark: { snippets } } }) => {
   return (
     <Layout>
       <SEO />
@@ -13,7 +15,19 @@ const SnippetsPage = () => {
         <Grid fluid>
           <Row>
             <Col lg={12}>
-              <Snippets />
+              <Snippets>
+                <h1>Сниппеты</h1>
+                <p>Сниппеты это готовые решения некоторых проблем, которые можно скопировать и вставить</p>
+                {snippets.map(({ node: { frontmatter } }, i) => 
+                  <SnippetItem 
+                    key={i} 
+                    slug={frontmatter.slug} 
+                    title={frontmatter.title} 
+                    date={frontmatter.date} 
+                    tags={frontmatter.tags} 
+                  />
+                )}
+              </Snippets>
             </Col>
           </Row>
         </Grid>
@@ -22,4 +36,22 @@ const SnippetsPage = () => {
   )
 }
 
+export const query = graphql`
+{
+  allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "snippet"}}}, sort: {order: DESC, fields: frontmatter___date}) {
+    snippets: edges {
+      node {
+        frontmatter {
+          slug
+          title
+          tags
+          description
+          date(formatString: "D MMMM YYYY", locale: "ru-RU")
+        }
+      }
+    }
+  }
+}
+`
+
 export default SnippetsPage

src/styles/global.scss

@@ -55,15 +55,6 @@
 .anchor-link.before {
   top: -2px!important;
 }
-
-.anchor {
-  display: block;
-  position: relative;
-  top: -150px;
-  visibility: hidden;
-  height: 0;
-}
-
 .inner {
   border-bottom: 1px solid #EBEBEB;
   padding-bottom: 15px;
@@ -123,6 +114,27 @@
     border-radius: 7px;
     margin: 0 0 15px;
     font-size: 16px;
+    & code {
+      padding-top: 10px;
+    }
+    &[data-language=js]:before {
+      content: "js";
+      background: rgb(247, 223, 30);
+    }
+    &[data-language]:before {
+      color: #232129;
+      font-size: 0.75rem;
+      font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      letter-spacing: 0.075em;
+      line-height: 1;
+      position: absolute;
+      left: 1.5rem;
+      text-align: right;
+      text-transform: uppercase;
+      top: 0px;
+      border-radius: 0px 0px 4px 4px;
+      padding: 0.25rem 0.5rem;
+    }
   }
 }