From 53d5030799ebdb7a3af10ef538e03e43d7a93dc2 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 18 Jul 2020 21:05:48 +0300 Subject: [PATCH] snippet template --- gatsby-browser.js | 2 + gatsby-config.js | 6 +-- gatsby-node.esm.js | 14 +++++- src/components/About/About.scss | 1 + src/components/Article/Article.js | 1 + src/components/Articles/Articles.js | 2 - src/components/Articles/Articles.scss | 2 +- src/components/Newsletter/Newsletter.scss | 1 - src/components/Snippet/Snippet.js | 48 ++++++++++++++++++++ src/components/Snippet/Snippet.scss | 42 ++++++++++++++++++ src/components/Snippets/Snippets.js | 33 ++++++++++++++ src/components/Snippets/Snippets.scss | 54 +++++++++++++++++++++++ src/hooks/useSnippetsQuery.js | 25 +++++++++++ src/pages/index.js | 2 + src/styles/global.scss | 4 ++ src/templates/categoryTemplate.js | 2 +- src/templates/snippetTemplate.js | 39 ++++++++++++++++ src/templates/tagTemplate.js | 2 +- static/admin/config.yml | 14 ++++++ 19 files changed, 284 insertions(+), 10 deletions(-) create mode 100644 src/components/Snippet/Snippet.js create mode 100644 src/components/Snippet/Snippet.scss create mode 100644 src/components/Snippets/Snippets.js create mode 100644 src/components/Snippets/Snippets.scss create mode 100644 src/hooks/useSnippetsQuery.js create mode 100644 src/templates/snippetTemplate.js diff --git a/gatsby-browser.js b/gatsby-browser.js index df66f53..d60b3ec 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -8,6 +8,8 @@ import './src/components/Articles/Articles.scss' import './src/components/Articles/ArticleCard/ArticleCard.scss' import './src/components/Newsletter/Newsletter.scss' import './src/components/Article/Article.scss' +import './src/components/Snippet/Snippet.scss' +import './src/components/Snippets/Snippets.scss' import './src/components/Articles/MoreArticles/MoreArticles.scss' import './src/components/Books/Books.scss' import './src/components/Contacts/Contacts.scss' diff --git a/gatsby-config.js b/gatsby-config.js index afa9e31..1822095 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -22,8 +22,8 @@ module.exports = { link: '/contacts' }, { - name: 'Ресурсы', - link: '/deleted' + name: 'Сниппеты', + link: '/snippets' } ], social: { @@ -116,7 +116,7 @@ module.exports = { className: `anchor-link`, maintainCase: true, removeAccents: true, - isIconAfterHeader: true, + isIconAfterHeader: false, elements: [`h1`, `h2`, `h3`, `h4`], }, }, diff --git a/gatsby-node.esm.js b/gatsby-node.esm.js index 101de18..9a1963a 100644 --- a/gatsby-node.esm.js +++ b/gatsby-node.esm.js @@ -6,6 +6,7 @@ exports.createPages = async ({ actions, graphql }) => { const { createPage } = actions const articleTemplate = path.resolve('src/templates/articleTemplate.js') + const snippetTemplate = path.resolve('src/templates/snippetTemplate.js') const categoryTemplate = path.resolve('src/templates/categoryTemplate.js') const tagTemplate = path.resolve('src/templates/tagTemplate.js') @@ -33,6 +34,7 @@ exports.createPages = async ({ actions, graphql }) => { const all = result.data.allMarkdownRemark.edges const articles = all.filter(article => article.node.frontmatter.templateKey === 'article') + const snippets = all.filter(snippet => snippet.node.frontmatter.templateKey === 'snippet') const categories = all.filter(category => category.node.frontmatter.templateKey === 'category') const tags = all.filter(tag => tag.node.frontmatter.templateKey === 'tag') @@ -44,7 +46,17 @@ exports.createPages = async ({ actions, graphql }) => { slug: node.frontmatter.slug }, }); - }); + }) + + snippets.forEach(({ node }) => { + createPage({ + path: `snippet/${node.frontmatter.slug}`, + component: snippetTemplate, + context: { + slug: node.frontmatter.slug + }, + }) + }) categories.forEach(({ node }) => { createPage({ diff --git a/src/components/About/About.scss b/src/components/About/About.scss index 10afc1b..22cf68f 100644 --- a/src/components/About/About.scss +++ b/src/components/About/About.scss @@ -1,6 +1,7 @@ @import '../../styles/variables.scss'; .about { + margin-bottom: 13rem; & .about-heading { margin-bottom: 45px; } diff --git a/src/components/Article/Article.js b/src/components/Article/Article.js index 905aafa..ba6a807 100644 --- a/src/components/Article/Article.js +++ b/src/components/Article/Article.js @@ -95,6 +95,7 @@ export default Article Article.propTypes = { data: PropTypes.shape({ slug: PropTypes.string, + keywords: PropTypes.array, title: PropTypes.string, image: PropTypes.object, description: PropTypes.string, diff --git a/src/components/Articles/Articles.js b/src/components/Articles/Articles.js index 56eca50..ce8ef1a 100644 --- a/src/components/Articles/Articles.js +++ b/src/components/Articles/Articles.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types' import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery' import ArticleCard from './ArticleCard/ArticleCard' -import Newsletter from '../Newsletter/Newsletter' const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => { const { siteMetadata: { options: { articles: { onLoadMore } } } } = useSiteMetadataQuery() @@ -27,7 +26,6 @@ const Articles = ({ data: { edges }, limit = 6, setLimit = () => null }) => { } - ) } diff --git a/src/components/Articles/Articles.scss b/src/components/Articles/Articles.scss index 653fd75..61f8cdb 100644 --- a/src/components/Articles/Articles.scss +++ b/src/components/Articles/Articles.scss @@ -58,7 +58,7 @@ } & .articles-loadMore { text-align: center; - margin-bottom: 30px; + margin-bottom: 50px; } } diff --git a/src/components/Newsletter/Newsletter.scss b/src/components/Newsletter/Newsletter.scss index 5278bf2..5db6a17 100644 --- a/src/components/Newsletter/Newsletter.scss +++ b/src/components/Newsletter/Newsletter.scss @@ -25,7 +25,6 @@ padding: 10px; font-family: 'Inter', sans-serif; font-size: 13px; - border-radius: 5px 0px 0px 5px; } & button { diff --git a/src/components/Snippet/Snippet.js b/src/components/Snippet/Snippet.js new file mode 100644 index 0000000..1418544 --- /dev/null +++ b/src/components/Snippet/Snippet.js @@ -0,0 +1,48 @@ +import React from 'react'; +import PropTypes from 'prop-types' +import SEO from '../SEO/SEO' + +const Snippet = ({ data: { keywords, description, title, date }, html }) => { + return ( + <> + +
+
+
+ {date} +
+
+

{title}

+
+
+

+ {description} +

+
+
+
+
+
+
+

Комментарии

+
+
+
+
+
+
+ + ) +} + +export default Snippet + +Snippet.propTypes = { + data: PropTypes.shape({ + keywords: PropTypes.array, + title: PropTypes.string, + description: PropTypes.string, + date: PropTypes.string + }), + html: PropTypes.string +} \ No newline at end of file diff --git a/src/components/Snippet/Snippet.scss b/src/components/Snippet/Snippet.scss new file mode 100644 index 0000000..c52929c --- /dev/null +++ b/src/components/Snippet/Snippet.scss @@ -0,0 +1,42 @@ +@import '../../styles/variables.scss'; + +.snippet { + & article { + & .snippet-date { + text-align: center; + font-size: 16px; + color: #767676; + } + & .snippet-heading { + font-size: 21px; + text-align: center; + & h1 { + font-size: 40px; + } + margin-bottom: 15px; + } + & .snippet-description { + margin-bottom: 50px; + & p { + text-align: center; + } + } + & .snippet-comments { + margin: 25px 0; + } + } +} + +.dark { + & .snippet { + & article { + & p, h1, h2, h3, h4, h5, h6, ul, ol { + color: $white-clr; + } + & blockquote { + background: #2A2A2A; + color: $white-clr; + } + } + } +} \ No newline at end of file diff --git a/src/components/Snippets/Snippets.js b/src/components/Snippets/Snippets.js new file mode 100644 index 0000000..66c8235 --- /dev/null +++ b/src/components/Snippets/Snippets.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { Link } from 'gatsby' +import useSnippetsQuery from '../../hooks/useSnippetsQuery' + +const Snippets = () => { + const { snippets } = useSnippetsQuery() + return ( +
+

Сниппеты

+ {snippets.map(({ node: { frontmatter } }, i) => ( +
+
+
+ {frontmatter.date} +
+
+ {frontmatter.title} +
+
+
+
+ {frontmatter.tags.map((tag, i) => ( +
{tag}
+ ))} +
+
+
+ ))} +
+ ) +} + +export default Snippets \ No newline at end of file diff --git a/src/components/Snippets/Snippets.scss b/src/components/Snippets/Snippets.scss new file mode 100644 index 0000000..d1cfdaa --- /dev/null +++ b/src/components/Snippets/Snippets.scss @@ -0,0 +1,54 @@ +@import '../../styles/variables.scss'; + +.snippets { + margin-bottom: 40px; + & h2 { + margin-bottom: 20px; + font-size: 34px; + } + & .snippet-item { + display: flex; + justify-content: space-between; + align-items: center; + min-height: 64px; + background: linear-gradient(92.41deg, #F5F9FF 0%, #F6F4FB 100%); + border-radius: 7px; + margin-bottom: 10px; + padding: 10px 15px; + &__date { + font-size: 13px; + } + &__heading { + & a { + font-size: 16px; + font-weight: 700; + text-decoration: none; + } + } + &__tags { + display: flex; + & .tag-item { + margin: 0; + margin-right: 5px; + padding: 5px 10px; + background: #EBF1FE; + color: #6ab0f3; + font-size: 14px; + border-radius: 4px; + } + } + } +} + +.dark { + & .snippets { + color: $white-clr; + & .snippet-item { + background: #2A2A2A; + & .tag-item { + color: #5183F5; + background: rgba(0, 0, 0, 0.2); + } + } + } +} \ No newline at end of file diff --git a/src/hooks/useSnippetsQuery.js b/src/hooks/useSnippetsQuery.js new file mode 100644 index 0000000..cbc8c10 --- /dev/null +++ b/src/hooks/useSnippetsQuery.js @@ -0,0 +1,25 @@ +import { useStaticQuery, graphql } from 'gatsby' + +const useSnippetsQuery = () => { + const { allMarkdownRemark: { edges } } = useStaticQuery(graphql` + { + allMarkdownRemark(filter: {frontmatter: {templateKey: {eq: "snippet"}}}, sort: {order: DESC, fields: frontmatter___date}) { + edges { + node { + frontmatter { + slug + title + tags + description + date(formatString: "D MMMM YYYY", locale: "ru-RU") + } + } + } + } + } + `) + + return { snippets: edges } +} + +export default useSnippetsQuery \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index ecfc151..14bbea3 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,6 +6,7 @@ import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery' import SEO from '../components/SEO/SEO' import Layout from '../components/Layout/Layout' import Articles from '../components/Articles/Articles' +import Snippets from '../components/Snippets/Snippets' import Offers from '../components/Offers/Offers' import ArrowNext from '../images/arrow-next.svg' @@ -32,6 +33,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => { + diff --git a/src/styles/global.scss b/src/styles/global.scss index 5763a7c..30f590d 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -52,6 +52,10 @@ } } +.anchor-link.before { + top: -2px!important; +} + .anchor { display: block; position: relative; diff --git a/src/templates/categoryTemplate.js b/src/templates/categoryTemplate.js index 00b4c0d..110c945 100644 --- a/src/templates/categoryTemplate.js +++ b/src/templates/categoryTemplate.js @@ -53,7 +53,7 @@ const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title export const pageQuery = graphql` query articlesByCategory($title: String!) { - allMarkdownRemark(filter: {frontmatter: {category: {eq: $title}}}) { + allMarkdownRemark(filter: {frontmatter: {category: {eq: $title}, templateKey: {eq: "article"}}}) { edges { node { frontmatter { diff --git a/src/templates/snippetTemplate.js b/src/templates/snippetTemplate.js new file mode 100644 index 0000000..1284833 --- /dev/null +++ b/src/templates/snippetTemplate.js @@ -0,0 +1,39 @@ +import React from 'react' +import { Main } from '../ui/ui' +import { Grid, Row, Col } from 'react-flexbox-grid' +import Snippet from '../components/Snippet/Snippet' +import Layout from '../components/Layout/Layout' +import { graphql } from "gatsby" + +const snippetTemplate = ({ data: { markdownRemark: { frontmatter, html } } }) => { + return ( + +
+ + + + + + + +
+ + ) +} + +export const pageQuery = graphql` + query Snippet($slug: String!) { + markdownRemark(frontmatter: {slug: {eq: $slug}, templateKey: {eq: "snippet"}}) { + html + frontmatter { + slug + keywords + title + description + date(formatString: "D MMMM YYYY", locale: "ru-RU") + } + } + } +` + +export default snippetTemplate \ No newline at end of file diff --git a/src/templates/tagTemplate.js b/src/templates/tagTemplate.js index 72464bc..29a77c8 100644 --- a/src/templates/tagTemplate.js +++ b/src/templates/tagTemplate.js @@ -53,7 +53,7 @@ const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) export const pageQuery = graphql` query articlesByTag($title: [String!]) { - allMarkdownRemark(filter: {frontmatter: {tags: {in: $title}}}) { + allMarkdownRemark(filter: {frontmatter: {tags: {in: $title}, templateKey: {eq: "article"}}}) { edges { node { frontmatter { diff --git a/static/admin/config.yml b/static/admin/config.yml index 0c5845f..b2fe698 100644 --- a/static/admin/config.yml +++ b/static/admin/config.yml @@ -22,6 +22,20 @@ collections: - {label: "Описание", name: "description", widget: "text"} - {label: "Содержание", name: "body", widget: "markdown"} - {label: "Тэги", name: "tags", widget: "relation", multiple: true, collection: "tags", valueField: "title", searchFields: ["title"]} + - name: 'snippets' + label: "Snippet" + folder: 'content/snippets' + create: true + slug: "{{slug}}" + fields: + - {label: "Template key", name: "templateKey", widget: "hidden", default: "snippet"} + - {label: "Slug", name: "slug", widget: "string"} + - {label: "Keywords", name: "keywords", widget: "list"} + - {label: "Название сниппета", name: "title", widget: "string"} + - {label: "Дата публикации", name: "date", widget: "datetime"} + - {label: "Тэги", name: "tags", widget: "list"} + - {label: "Описание", name: "description", widget: "text"} + - {label: "Содержание", name: "body", widget: "markdown"} - name: 'categories' label: "Category" folder: 'content/categories'