+
Все
{children}
diff --git a/src/components/Articles/Search/Search.js b/src/components/Articles/Search/Search.js
index 3a74707..8aefacc 100644
--- a/src/components/Articles/Search/Search.js
+++ b/src/components/Articles/Search/Search.js
@@ -1,13 +1,26 @@
import React from 'react'
+import { navigate } from 'gatsby'
import PropTypes from 'prop-types'
-const Search = ({ articlesLength }) => {
+const Search = ({ articlesLength, resultsLength, query, setQuery }) => {
+ const handleInput = e => {
+ const query = e.target.value
+ if (query === '') {
+ navigate('/articles')
+ setQuery('')
+ return null
+ }
+
+ navigate(`/articles/?search=${query.trim()}`)
+ setQuery(query)
+ }
+
return (
-
- {articlesLength}
+ handleInput(e)} value={query} placeholder="Напишите сюда чтобы отфильтровать статьи" type="text" />
+ {query === '' ? articlesLength : resultsLength}
- )
+ )
}
export default Search
diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 4f54f7f..7de2d3c 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -30,7 +30,7 @@ const Header = () => {
const renderLinks = () => {
return (
- {menuLinks.map((page, i) => - {page.name}
)}
+ {menuLinks.map((page, i) => - {page.name}
)}
)
}
diff --git a/src/components/SEO/SEO.js b/src/components/SEO/SEO.js
index 24975e2..bce35cc 100644
--- a/src/components/SEO/SEO.js
+++ b/src/components/SEO/SEO.js
@@ -4,12 +4,13 @@ import PropTypes from 'prop-types'
import { Helmet } from 'react-helmet'
import { useLocation } from '@reach/router'
-const SEO = ({ title, keywords, description, image, type, canonical }) => {
+const SEO = ({ title, titleTemplate, keywords, description, image, type, canonical }) => {
const { pathname } = useLocation()
const { siteMetadata } = useSiteMetadataQuery()
const seo = {
title: title || siteMetadata.title,
+ titleTemplate: true,
siteName: siteMetadata.siteName,
type: type || 'website',
image: image || 'custom image url...',
@@ -18,9 +19,10 @@ const SEO = ({ title, keywords, description, image, type, canonical }) => {
url: `${siteMetadata.siteUrl}${pathname}`,
canonical: canonical || `${siteMetadata.siteUrl}${pathname}`
}
-
+
return (
-
+
+
{seo.keywords && (
diff --git a/src/helpers/toFrontmatter.js b/src/helpers/toFrontmatter.js
new file mode 100644
index 0000000..b6239d3
--- /dev/null
+++ b/src/helpers/toFrontmatter.js
@@ -0,0 +1,13 @@
+const toFrontmatter = array => {
+ return {
+ edges: array.map(el => {
+ return {
+ node: {
+ frontmatter: el
+ }
+ }
+ })
+ }
+}
+
+export default toFrontmatter
\ No newline at end of file
diff --git a/src/images/search-icon.svg b/src/images/search-icon.svg
new file mode 100644
index 0000000..a750da0
--- /dev/null
+++ b/src/images/search-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/pages/404.js b/src/pages/404.js
index 80ef32e..b4c96c4 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -2,11 +2,13 @@ import React from 'react';
import { Main } from '../ui/ui'
import { Grid } from 'react-flexbox-grid'
import { Link } from 'gatsby'
+import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
const NotFound = () => {
return (
+
diff --git a/src/pages/articles.js b/src/pages/articles.js
index efe2b76..1b3cd61 100644
--- a/src/pages/articles.js
+++ b/src/pages/articles.js
@@ -2,7 +2,12 @@ import React from "react"
import { Main } from '../ui/ui'
import { Grid, Row, Col } from 'react-flexbox-grid'
import { graphql } from 'gatsby'
+import { useFlexSearch } from 'react-use-flexsearch'
+import { useLocation } from '@reach/router'
+import * as queryString from 'query-string'
+import toFrontmatter from '../helpers/toFrontmatter'
import useCategoriesQuery from '../hooks/useCategoriesQuery'
+
import SEO from '../components/SEO/SEO'
import Layout from '../components/Layout/Layout'
import Articles from '../components/Articles/Articles'
@@ -12,8 +17,20 @@ import Search from '../components/Articles/Search/Search'
import Offers from '../components/Offers/Offers'
import Newsletter from '../components/Newsletter/Newsletter'
-const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
+import SearchIcon from '../images/search-icon.svg'
+
+const ArticlesPage = ({ data: { allMarkdownRemark: edges, localSearchPages }, }) => {
const { categories } = useCategoriesQuery()
+ const { search, pathname } = useLocation()
+
+ const [query, setQuery] = React.useState(queryString.parse(search).search || '')
+
+ const results = useFlexSearch(
+ query,
+ localSearchPages.index,
+ JSON.parse(localSearchPages.store)
+ )
+
return (
@@ -25,16 +42,22 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
Статьи
-
+
{categories.map(({ node }, i) => )}
-
+
+
+ {query ? results.length === 0 ?
Ничего не найдено
: null : null}
+
-
+ {query
+ ? results.length > 0 ? : null
+ :
+ }
@@ -69,6 +92,10 @@ export const query = graphql`
}
}
}
+ localSearchPages {
+ index
+ store
+ }
}
`
diff --git a/src/pages/index.js b/src/pages/index.js
index 70823c3..3b4bc81 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -20,7 +20,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
-
Последние статьи
+
Последние статьи
смотреть все
diff --git a/src/templates/articleTemplate.js b/src/templates/articleTemplate.js
index 8b19ec4..3c2d747 100644
--- a/src/templates/articleTemplate.js
+++ b/src/templates/articleTemplate.js
@@ -47,7 +47,7 @@ export const pageQuery = graphql`
time
tags
description
- date
+ date(formatString: "D MMMM YYYY", locale: "ru-RU")
category
}
}
diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js
index d78be08..826590e 100644
--- a/src/templates/categoryTemplate.js
+++ b/src/templates/categoryTemplate.js
@@ -7,7 +7,6 @@ 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'
@@ -26,12 +25,11 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title
-
Статьи
+ Категория: {title}
{categories.map(({ node }, i) => )}
-
Показано {edges.edges.length} из категории "{title}"
diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js
index 501c3c6..fb1af3e 100644
--- a/src/templates/tagTemplate.js
+++ b/src/templates/tagTemplate.js
@@ -7,7 +7,6 @@ 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'
@@ -26,12 +25,11 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } })
-
Статьи
+ Тэг: {title}
{categories.map(({ node }, i) => )}
-
Показано {edges.edges.length} по тегу "{title}"