bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 02:09:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

categories component

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-04 23:36:10 +03:00
parent 9e77d87419
commit d6e8559122
6 changed files with 46 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
content/categories/2020-07-02-test.md
View File

@ -1,5 +1,4 @@
--- ---
templateKey: category templateKey: category
slug: category-1
title: First category title: First category
--- ---

1
content/categories/2020-07-04-second-category.md
View File

@ -1,5 +1,4 @@
--- ---
templateKey: category templateKey: category
slug: category-2
title: Second category title: Second category
--- ---

20
src/components/Articles/Categories/Categories.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import { Link } from 'gatsby'
import slugify from '../../../helpers/slugify'
import useCategoriesQuery from '../../../hooks/useCategoriesQuery'
const Categories = () => {
const { edges } = useCategoriesQuery()
return (
<div className="articles-categories">
<div className="tag-item">
<Link to='/articles'>Все</Link>
</div>
{edges.map(({ node }) => <div className="tag-item">
<Link to={`/category/${slugify(node.frontmatter.title)}`}>{node.frontmatter.title}</Link>
</div>)}
</div>
)
}
export default Categories

20
src/hooks/useCategoriesQuery.js Normal file
View File

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

36
src/pages/articles.js
View File

@ -1,8 +1,9 @@
import React from "react" import React from "react"
import { Link, graphql } from 'gatsby' import { graphql } from 'gatsby'
import SEO from '../components/SEO/SEO' import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout' import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles' import Articles from '../components/Articles/Articles'
import Categories from '../components/Articles/Categories/Categories'
import Offers from '../components/Offers/Offers' import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter' import Newsletter from '../components/Newsletter/Newsletter'
@ -18,38 +19,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
<div className="articles-heading"> <div className="articles-heading">
<h1>Статьи</h1> <h1>Статьи</h1>
</div> </div>
<div className="articles-categories"> <Categories />
<div className="tag-item">
<Link to='/'>Все</Link>
</div>
<div className="tag-item">
<Link to='/'>Javascript</Link>
</div>
<div className="tag-item">
<Link to='/'>GraphQL</Link>
</div>
<div className="tag-item">
<Link to='/'>Reactjs</Link>
</div>
<div className="tag-item">
<Link to='/'>SEO оптимизация</Link>
</div>
<div className="tag-item">
<Link to='/'>Web разработка</Link>
</div>
<div className="tag-item">
<Link to='/'>pet-проекты</Link>
</div>
<div className="tag-item">
<Link to='/'>Nodejs</Link>
</div>
<div className="tag-item">
<Link to='/'>ООП</Link>
</div>
<div className="tag-item">
<Link to='/'>Новости</Link>
</div>
</div>
<div className="articles-search"> <div className="articles-search">
<input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" /> <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
<span>278</span> <span>278</span>

36
src/templates/categoryTemplate.js
View File

@ -1,8 +1,9 @@
import React from "react" import React from "react"
import { Link, graphql } from 'gatsby' import { graphql } from 'gatsby'
import SEO from '../components/SEO/SEO' import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout' import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles' import Articles from '../components/Articles/Articles'
import Categories from '../components/Articles/Categories/Categories'
import Offers from '../components/Offers/Offers' import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter' import Newsletter from '../components/Newsletter/Newsletter'
@ -18,38 +19,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges } }) => {
<div className="articles-heading"> <div className="articles-heading">
<h1>Статьи</h1> <h1>Статьи</h1>
</div> </div>
<div className="articles-categories"> <Categories />
<div className="tag-item">
<Link to='/'>Все</Link>
</div>
<div className="tag-item">
<Link to='/'>Javascript</Link>
</div>
<div className="tag-item">
<Link to='/'>GraphQL</Link>
</div>
<div className="tag-item">
<Link to='/'>Reactjs</Link>
</div>
<div className="tag-item">
<Link to='/'>SEO оптимизация</Link>
</div>
<div className="tag-item">
<Link to='/'>Web разработка</Link>
</div>
<div className="tag-item">
<Link to='/'>pet-проекты</Link>
</div>
<div className="tag-item">
<Link to='/'>Nodejs</Link>
</div>
<div className="tag-item">
<Link to='/'>ООП</Link>
</div>
<div className="tag-item">
<Link to='/'>Новости</Link>
</div>
</div>
<div className="articles-search"> <div className="articles-search">
<input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" /> <input placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
<span>278</span> <span>278</span>