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

renred upd

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-07 15:34:36 +03:00
parent bd45a806f9
commit d89f17cd83
8 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/Articles/Categories/Categories.js
View File

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

16
src/components/Articles/Categories/CategoryItem.js Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
import { useLocation } from '@reach/router'
import { Link } from 'gatsby'
import slugify from '../../../helpers/slugify'
const CategoryItem = ({ title }) => {
const { pathname } = useLocation()
return (
<div className={pathname === `/category/${slugify(title)}` ? 'tag-item active' : 'tag-item'}>
<Link to={`/category/${slugify(title)}`}>{title}</Link>
</div>
)
}
export default CategoryItem

2
src/components/Offers/Offers.js
View File

@ -51,7 +51,7 @@ const Offers = () => {
<p>
В нашем канале telegram вы не пропустите новые статьи, присоединяйтесь к другим разработчикам
</p>
<a href="/" target="_blank" className="btn-primary">Подписаться</a>
<a href="https://t.me/devthread" rel='noreferrer' target="_blank" className="btn-primary">Подписаться</a>
</div>
</div>
</div>

2
src/hooks/useCategoriesQuery.js
View File

@ -14,7 +14,7 @@ const useCategoriesQuery = () => {
}
}
`)
return { edges }
return { categories: edges }
}
export default useCategoriesQuery

7
src/pages/articles.js
View File

@ -1,14 +1,17 @@
import React from "react"
import { graphql } from 'gatsby'
import useCategoriesQuery from '../hooks/useCategoriesQuery'
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles'
import Categories from '../components/Articles/Categories/Categories'
import CategoryItem from '../components/Articles/Categories/CategoryItem'
import Search from '../components/Articles/Search/Search'
import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter'
const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
const { categories } = useCategoriesQuery()
return (
<Layout>
<SEO title='Статьи' />
@ -20,7 +23,9 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
<div className="articles-heading">
<h1>Статьи</h1>
</div>
<Categories />
<Categories>
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
</Categories>
<Search articlesLength={edges.edges.length} />
</div>
</div>

8
src/styles/global.scss
View File

@ -39,6 +39,10 @@
color: #3972f4;
}
}
&.active a {
background: #d8e3fd;
color: #3972f4;
}
}
.inner {
@ -114,6 +118,10 @@
color: #99c9f7;
}
}
&.active a {
color: #5183F5;
background: #111;
}
}
& .inner {
border-bottom: 1px solid rgba(153, 153, 153, 0.2);

7
src/templates/categoryTemplate.js
View File

@ -1,14 +1,17 @@
import React from "react"
import { graphql } from 'gatsby'
import useCategoriesQuery from '../hooks/useCategoriesQuery'
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles'
import Search from '../components/Articles/Search/Search'
import Categories from '../components/Articles/Categories/Categories'
import CategoryItem from '../components/Articles/Categories/CategoryItem'
import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter'
const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
const { categories } = useCategoriesQuery()
return (
<Layout>
<SEO title={title} />
@ -20,7 +23,9 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
<div className="articles-heading">
<h1>Статьи</h1>
</div>
<Categories />
<Categories>
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
</Categories>
<Search articlesLength={edges.edges.length} />
<div className="articles-info">
<p>Показано {edges.edges.length} из категории "{title}"</p>

7
src/templates/tagTemplate.js
View File

@ -1,14 +1,17 @@
import React from "react"
import { graphql } from 'gatsby'
import useCategoriesQuery from '../hooks/useCategoriesQuery'
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles'
import Search from '../components/Articles/Search/Search'
import Categories from '../components/Articles/Categories/Categories'
import CategoryItem from '../components/Articles/Categories/CategoryItem'
import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter'
const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
const { categories } = useCategoriesQuery()
return (
<Layout>
<SEO title={title} />
@ -20,7 +23,9 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
<div className="articles-heading">
<h1>Статьи</h1>
</div>
<Categories />
<Categories>
{categories.map(({ node }, i) => <CategoryItem key={i} title={node.frontmatter.title} />)}
</Categories>
<Search articlesLength={edges.edges.length} />
<div className="articles-info">
<p>Показано {edges.edges.length} по тегу "{title}"</p>