tag offers

src/components/Offers/Offers.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import './Offers.scss'
+import Tags from './Tags/Tags'
 
 import PopularIcon from '../../images/popular-icon.svg'
 import ViewsIcon from '../../images/views-icon.svg'
-import TagIcon from '../../images/tag-icon.svg'
 import BooksIcon from '../../images/books-icon.svg'
 
 const Offers = () => {
@@ -25,53 +25,7 @@ const Offers = () => {
           </div>)}
         </div>
       </div>
-      <div className="offers-tags offer-box">
+      <Tags />
-        <div className="offers-tags__heading offer-heading">
-          <TagIcon />
-          Тэги
-        </div>
-        <div className="offers-tags__content">
-          <div className="tag-item">
-            <a href="/">serverless</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">reactjs</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">nodejs</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">graphql</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">seo</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">ооп</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">gatsby</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">nextjs</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">jquery</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">mysql</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">php</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">python</a>
-          </div>
-          <div className="tag-item">
-            <a href="/">jekyll</a>
-          </div>
-        </div>
-      </div>
       <div className="offers-books offer-box">
         <div className="offers-books__heading offer-heading">
           <BooksIcon />

src/components/Offers/Offers.scss

@@ -44,7 +44,6 @@
     }
   }
   & .offers-tags {
-    min-height: 200px;
     &__content {
       display: flex;
       flex-wrap: wrap;

src/components/Offers/Tags/Tags.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { Link } from 'gatsby'
+import sligify from '../../../helpers/slugify'
+import useTagsQuery from '../../../hooks/useTagsQuery'
+
+import TagIcon from '../../../images/tag-icon.svg'
+
+const TagItem = ({ title }) => {
+  return (
+    <div className="tag-item">
+      <Link to={`/tag/${sligify(title)}`}>{title}</Link>
+    </div>
+  )
+}
+
+const Tags = () => {
+  const { edges } = useTagsQuery()
+
+  return (
+    <div className="offers-tags offer-box">
+      <div className="offers-tags__heading offer-heading">
+        <TagIcon />
+        Тэги
+      </div>
+      <div className="offers-tags__content">
+        {edges.map(({ node }, i) => <TagItem key={i} title={node.frontmatter.title} />)}
+      </div>
+    </div>
+  )
+}
+
+export default Tags

src/hooks/useTagsQuery.js

@@ -0,0 +1,20 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const useTagsQuery = () => {
+  const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
+    {
+      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "tag"}}}) {
+        edges {
+          node {
+            frontmatter {
+              title
+            }
+          }
+        }
+      }
+    }
+  `)
+  return { edges }
+}
+
+export default useTagsQuery

static/admin/config.yml

@@ -8,7 +8,7 @@ collections:
     label: "Article"
     folder: "content/articles"
     create: true
-    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
+    slug: "{{slug}}"
     fields:
       - {label: "Template Key", name: "templateKey", wisdget: "hidden", default: "article"}
       - {label: "Slug", name: "slug", widget: "string"}
@@ -24,7 +24,7 @@ collections:
     label: "Category"
     folder: 'content/categories'
     create: true
-    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
+    slug: "{{year}}-{{month}}-{{day}}"
     fields:
       - {label: "Template key", name: "templateKey", widget: "hidden", default: "category"}
       - {label: "Название категории", name: "title", widget: "string"}
@@ -32,7 +32,7 @@ collections:
     label: "Tag"
     folder: 'content/tags'
     create: true
-    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
+    slug: "{{year}}-{{month}}-{{day}}"
     fields:
       - {label: "Template key", name: "templateKey", widget: "hidden", default: "tag"}
       - {label: "Название тэга", name: "title", widget: "string"}