articles

src/components/Articles/ArticleCard/ArticleCard.js

@@ -1,31 +1,29 @@
 import React from 'react';
+import { Link } from 'gatsby'
 import './ArticleCard.scss'
 
-const ArticleCard = ({ data }) => {
+const ArticleCard = ({ data: { slug, title, category, description, tags } }) => {
   return (
     <article className="article-card">
       <div className="article-card__image">
-        <a href="/">
+        <Link to={`/article/${slug}`}>
           <img src="https://c.wallhere.com/photos/fb/a1/JavaScript_minimalism-1227036.jpg!d" alt="article" />
-        </a>
+        </Link>
       </div>
       <div className="article-card__heading">
-        <h2><a href="/">Lorem ipsum dolor sit amet, consectetur.</a></h2>
+        <h2><Link to={`/article/${slug}`}>{title}</Link></h2>
       </div>
       <div className="article-card__category">
-        <a href="/">Javascript</a>
+        <Link to={`/category/${category}`}>{category}</Link>
       </div>
       <div className="article-card__tags">
         <ul>
-          <li><a href="/">graphql</a></li>
+          {tags.map((tag, i) => <li key={i}><Link to={`/tag/${tag}`}>{tag}</Link></li>)}
-          <li><a href="/">netlify</a></li>
-          <li><a href="/">tutorial</a></li>
-          <li><a href="/">serverless</a></li>
         </ul>
       </div>
       <div className="article-card__description">
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Non autem hoc: igitur ne illud quidem. Uterque enim summo bono fruitur, id est voluptate. Hoc tu nunc in illo probas
+          {description}
         </p>
       </div>
     </article>

src/components/Articles/Articles.js

@@ -2,11 +2,11 @@ import React from 'react';
 import ArticleCard from './ArticleCard/ArticleCard'
 import './Articles.scss'
 
-const Articles = () => {
+const Articles = ({ data: { edges } }) => {
   return (
     <div className="articles">
       <div className="articles-content">
-        {[1,2,3,4].map(e => <ArticleCard key={e} />)}
+        {edges.map(({ node }, e) => <ArticleCard key={e} data={node.frontmatter} />)}
       </div>
     </div>
   )

src/components/Articles/MoreArticles/MoreArticles.js

@@ -1,15 +1,26 @@
 import React from 'react';
+import { useLocation } from '@reach/router'
+import useMoreArticlesQuery from '../../../hooks/useMoreArticlesQuery'
 import ArticleCard from '../ArticleCard/ArticleCard'
 import './MoreArticles.scss'
 
 const MoreArticles = () => {
+  const { edges } = useMoreArticlesQuery()
+  const { pathname } = useLocation()
+  const query = pathname.split('/')[pathname.split('/').length - 1]
+
   return (
     <div className="more-articles">
       <div className="more-articles__heading">
         <h2>Вам также может понравится...</h2>
       </div>
       <div className="more-articles__content">
-        {[1,2,3,4].map(e => <ArticleCard key={e} />)}
+        {edges.map(({ node }, e) => {
+          if (node.frontmatter.slug !== query) {
+            return <ArticleCard key={e} data={node.frontmatter} />
+          }
+          return null
+        })}
       </div>
     </div>
   )

src/hooks/useMoreArticlesQuery.js

@@ -0,0 +1,24 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+const useMoreArticlesQuery = () => {
+  const { allMarkdownRemark: { edges } } = useStaticQuery(graphql`
+    {
+      allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}, limit: 4) {
+        edges {
+          node {
+            frontmatter {
+              slug
+              title
+              category
+              tags
+              description
+            }
+          }
+        }
+      }
+    }
+  `)
+  return { edges }
+}
+
+export default useMoreArticlesQuery

src/pages/articles.js

@@ -6,7 +6,7 @@ import Articles from '../components/Articles/Articles'
 import Offers from '../components/Offers/Offers'
 import Newsletter from '../components/Newsletter/Newsletter'
 
-const ArticlesPage = () => {
+const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO title='Статьи' />
@@ -59,7 +59,7 @@ const ArticlesPage = () => {
           </div>
           <div className="row">
             <div className="col-md-9 col-xs-12">
-              <Articles /> 
+              <Articles data={edges} /> 
               <Newsletter />
             </div>
             <div className="col-md-3 col-xs-12">
@@ -72,4 +72,22 @@ const ArticlesPage = () => {
   )
 }
 
+export const query = graphql`
+  {
+    allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}) {
+      edges {
+        node {
+          frontmatter {
+            slug
+            title
+            category
+            tags
+            description
+          }
+        }
+      }
+    }
+  } 
+`
+
 export default ArticlesPage

src/pages/index.js

@@ -9,7 +9,7 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 import ArrowNext from '../images/arrow-next.svg'
 
-const IndexPage = () => {
+const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   return (
     <Layout>
       <SEO />
@@ -28,7 +28,7 @@ const IndexPage = () => {
           </div>
           <div className="row">
             <div className="col-md-9 col-xs-12">
-              <Articles /> 
+              <Articles data={edges} /> 
               <Newsletter />
             </div>
             <div className="col-md-3 col-xs-12">
@@ -41,4 +41,22 @@ const IndexPage = () => {
   )
 }
 
+export const query = graphql`
+  {
+    allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "article"}}}) {
+      edges {
+        node {
+          frontmatter {
+            slug
+            title
+            category
+            tags
+            description
+          }
+        }
+      }
+    }
+  } 
+`
+
 export default IndexPage

src/templates/articleTemplate.js

@@ -9,7 +9,7 @@ import { graphql } from "gatsby"
 export default function Template ({ data }) {
   const { markdownRemark } = data
   const { frontmatter, html } = markdownRemark
-  console.log(markdownRemark.frontmatter)
+
   return (
     <Layout>
       <main>