From 5b42b3c29d938b221930de2b58fe50be95979763 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Wed, 22 Jul 2020 21:54:04 +0300 Subject: [PATCH] refactor --- config.js | 2 +- content/articles/2020-07-21_test-article.md | 3 +- content/articles/статья-12.md | 3 +- src/components/Article/Article.js | 21 +----- src/components/Contacts/Contacts.js | 3 - src/components/Contacts/Contacts.scss | 2 +- src/components/Header/Header.js | 14 +++- src/components/Header/Header.scss | 67 ++++++++++++++----- .../Header/ThemeSwitcher/ThemeSwitcher.js | 19 +++--- src/components/Offers/Offers.scss | 5 ++ src/components/Snippet/Snippet.js | 10 +-- src/images/memo-icon.svg | 1 - src/pages/404.js | 2 +- src/pages/index.js | 5 +- src/pages/snippets.js | 4 +- src/styles/global.scss | 9 +++ src/templates/articleTemplate.js | 21 +++++- src/templates/snippetTemplate.js | 8 +++ 18 files changed, 126 insertions(+), 73 deletions(-) delete mode 100644 src/images/memo-icon.svg diff --git a/config.js b/config.js index 5a17fa7..8e53132 100644 --- a/config.js +++ b/config.js @@ -3,7 +3,7 @@ module.exports = { keywords: "веб разработка, javascript, seo, программирование, reactjs, graphql", siteName: "Cборник статей и руководств - devthread.ru", - titleTemplate: "%s · статьи и руководства по веб-разработке", + titleTemplate: "%s · devthread.ru", description: "Cборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам", url: "https://devthread.netlify.app", diff --git a/content/articles/2020-07-21_test-article.md b/content/articles/2020-07-21_test-article.md index 84214f0..dd62b8d 100644 --- a/content/articles/2020-07-21_test-article.md +++ b/content/articles/2020-07-21_test-article.md @@ -40,12 +40,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non fermentum ligu ```js const { + //L1 siteMetadata: { title, menuLinks, social: { twitter, telegram }, }, -} = useSiteMetadataQuery() //L1 +} = useSiteMetadataQuery() const [isScrolled, setIsScrolled] = React.useState(false) const [isMobileOpen, setIsMobileOpen] = React.useState(false) const [isDark, setIsDark] = React.useState(false) diff --git a/content/articles/статья-12.md b/content/articles/статья-12.md index be850d7..97b900d 100644 --- a/content/articles/статья-12.md +++ b/content/articles/статья-12.md @@ -40,12 +40,13 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non fermentum ligu ```js const { + //L1 siteMetadata: { title, menuLinks, social: { twitter, telegram }, }, -} = useSiteMetadataQuery() //L1 +} = useSiteMetadataQuery() const [isScrolled, setIsScrolled] = React.useState(false) const [isMobileOpen, setIsMobileOpen] = React.useState(false) const [isDark, setIsDark] = React.useState(false) diff --git a/src/components/Article/Article.js b/src/components/Article/Article.js index 60290a6..29625bf 100644 --- a/src/components/Article/Article.js +++ b/src/components/Article/Article.js @@ -1,6 +1,5 @@ import React from "react" import PropTypes from "prop-types" -import SEO from "../SEO/SEO" import Img from "gatsby-image" import ViewCounter from "../ViewCounter/ViewCounter" import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery" @@ -14,17 +13,7 @@ import TwitterIcon from "../../images/twitter-icon__large.svg" import FacebookIcon from "../../images/facebook-icon__large.svg" const Article = ({ - data: { - slug, - keywords, - title, - image, - description, - category, - tags, - time, - date, - }, + data: { slug, title, image, description, category, tags, time, date }, html, }) => { const { @@ -34,14 +23,6 @@ const Article = ({ return ( <> -
diff --git a/src/components/Contacts/Contacts.js b/src/components/Contacts/Contacts.js index 618de43..447d428 100644 --- a/src/components/Contacts/Contacts.js +++ b/src/components/Contacts/Contacts.js @@ -2,13 +2,10 @@ import React from "react" import PropTypes from "prop-types" import ContactsFrom from "./ContactsForm/ContactsForm" -import MemoIcon from "../../images/memo-icon.svg" - const Contacts = ({ email, telegram }) => { return (
-

Контакты

diff --git a/src/components/Contacts/Contacts.scss b/src/components/Contacts/Contacts.scss index f173258..a55d329 100644 --- a/src/components/Contacts/Contacts.scss +++ b/src/components/Contacts/Contacts.scss @@ -9,7 +9,7 @@ display: flex; justify-content: center; align-items: center; - margin-bottom: 25px; + margin-bottom: 10px; & svg { margin-right: 10px; } diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index dde3764..ad057da 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -19,15 +19,20 @@ const Header = () => { } = useSiteMetadataQuery() const [isScrolled, setIsScrolled] = React.useState(false) const [isMobileOpen, setIsMobileOpen] = React.useState(false) + const [ready, setReady] = React.useState(false) + const [isDark, setIsDark] = React.useState(false) + const { pathname } = useLocation() React.useEffect(() => { + setIsDark(window.__isDarkTheme) + setReady(true) isMobileOpen ? (document.body.style.overflowY = "hidden") : (document.body.style.overflowY = "") document.body.onscroll = () => window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false) - }, [isMobileOpen]) + }, [isMobileOpen, setIsDark, setReady]) const mobileHandler = () => { setIsMobileOpen(!isMobileOpen) @@ -71,7 +76,7 @@ const Header = () => {
- +
{ <> {title} +
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index 7b94af1..b54bc12 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -84,17 +84,10 @@ header { color: rgba(0,0,0,.8); } } - & .header-nav__theme { - cursor: pointer; - opacity: 0; - } - & .header-nav__theme.ready { - opacity: 1; - transition: all 0.2s linear 0s; - } } &__nav.mobile { - background: #0d0d0d; + background-color: rgba(250,252,254, .9); + backdrop-filter: blur(8px); position: fixed; right: 0; left: 0; @@ -102,11 +95,14 @@ header { bottom: 0; height: 0%; transition: padding-top .2s ease-out; - overflow: scroll; - overflow-x: hidden; z-index: 99; + & .theme-switcher { + position: absolute; + right: 22px; + bottom: 45px; + } & span { - color: $white-clr; + color: #0A0C10; display: block; margin-bottom: 20px; font-weight: 700; @@ -118,10 +114,13 @@ header { & a { font-size: 28px; text-decoration: none; - color: $white-clr; + color: #0A0C10; font-weight: 600; } } + & li.active { + margin-left: 20px; + } } & .mobile-social { margin-top: 30px; @@ -135,11 +134,11 @@ header { } & svg { & .telegram-svg-social { - fill: $white-clr; + fill: #0A0C10; width: 50px; } & .twitter-svg-social { - fill: $white-clr; + fill: #0A0C10; } } & a:nth-child(2) { @@ -188,18 +187,18 @@ header { &__button.mobile.active { & span:nth-child(1) { transform: rotate(45deg); - background: $white-clr; + background: #0A0C10; top: -3px; left: 0px; } & span:nth-child(2) { width: 0%; opacity: 0; - background: $white-clr; + background: #0A0C10; } & span:nth-child(3) { transform: rotate(-45deg); - background: $white-clr; + background: #0A0C10; top: 18px; left: 0px; } @@ -261,11 +260,43 @@ header { } } } + &__nav.mobile { + background-color: rgba(7,11,14, .99); + & span { + color: $white-clr; + } + & nav { + & li { + & a { + color: $white-clr; + } + } + } + & svg { + & .telegram-svg-social { + fill: $white-clr; + } + & .twitter-svg-social { + fill: $white-clr; + } + } + } &__button.mobile { & span { background: $white-clr; } } + &__button.mobile.active { + & span:nth-child(1) { + background: $white-clr; + } + & span:nth-child(2) { + background: $white-clr; + } + & span:nth-child(3) { + background: $white-clr; + } + } } } } diff --git a/src/components/Header/ThemeSwitcher/ThemeSwitcher.js b/src/components/Header/ThemeSwitcher/ThemeSwitcher.js index 9c4d828..71d6b92 100644 --- a/src/components/Header/ThemeSwitcher/ThemeSwitcher.js +++ b/src/components/Header/ThemeSwitcher/ThemeSwitcher.js @@ -1,19 +1,12 @@ import React from "react" +import PropTypes from "prop-types" import MoonIcon from "../../../images/moon-icon.svg" import SunIcon from "../../../images/sun-icon.svg" -const ThemeSwitcher = () => { - const [ready, setReady] = React.useState(false) - const [isDark, setIsDark] = React.useState(false) - - React.useEffect(() => { - setIsDark(window.__isDarkTheme) - setReady(true) - }, [setIsDark, setReady]) - +const ThemeSwitcher = ({ ready, isDark, setIsDark }) => { return ( -
+
{isDark ? ( { @@ -34,3 +27,9 @@ const ThemeSwitcher = () => { } export default ThemeSwitcher + +ThemeSwitcher.propTypes = { + ready: PropTypes.bool, + isDark: PropTypes.bool, + setIsDark: PropTypes.func, +} diff --git a/src/components/Offers/Offers.scss b/src/components/Offers/Offers.scss index 7f0f066..a3c201e 100644 --- a/src/components/Offers/Offers.scss +++ b/src/components/Offers/Offers.scss @@ -85,6 +85,11 @@ & .tag-item { & a { color: #5183F5; + background: rgba(0,0,0, .2); + &:hover { + background: #111; + color: #99c9f7; + } } } } diff --git a/src/components/Snippet/Snippet.js b/src/components/Snippet/Snippet.js index f98a5bb..3e47cd7 100644 --- a/src/components/Snippet/Snippet.js +++ b/src/components/Snippet/Snippet.js @@ -1,17 +1,9 @@ import React from "react" import PropTypes from "prop-types" -import SEO from "../SEO/SEO" -const Snippet = ({ data: { keywords, description, title, date }, html }) => { +const Snippet = ({ data: { description, title, date }, html }) => { return ( <> -
{date}
diff --git a/src/images/memo-icon.svg b/src/images/memo-icon.svg deleted file mode 100644 index 1b9e021..0000000 --- a/src/images/memo-icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/pages/404.js b/src/pages/404.js index 32c10c0..2d0e622 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -7,7 +7,7 @@ import SEO from "../components/SEO/SEO" const NotFound = () => { return ( <> - +
diff --git a/src/pages/index.js b/src/pages/index.js index 38530e1..2ff6318 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -23,7 +23,10 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => { return ( <> - +
diff --git a/src/pages/snippets.js b/src/pages/snippets.js index 617f603..98c1e7b 100644 --- a/src/pages/snippets.js +++ b/src/pages/snippets.js @@ -13,11 +13,11 @@ const SnippetsPage = ({ }) => { return ( <> - +
- +

Сниппеты

diff --git a/src/styles/global.scss b/src/styles/global.scss index 3116898..e688d27 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -142,6 +142,15 @@ background: linear-gradient(135.9deg, #F5F9FF 0%, #F5F9FF 0.01%, #F6F4FB 98.96%); } +.theme-switcher { + cursor: pointer; + opacity: 0; + &.ready { + opacity: 1; + transition: all 0.2s linear 0s; + } +} + .dark { background: #202020; & .light-default-light { diff --git a/src/templates/articleTemplate.js b/src/templates/articleTemplate.js index 4946e88..bec433e 100644 --- a/src/templates/articleTemplate.js +++ b/src/templates/articleTemplate.js @@ -1,6 +1,7 @@ import React from "react" import { Main } from "../ui/ui" import { Grid, Row, Col } from "react-flexbox-grid" +import SEO from "../components/SEO/SEO" import Article from "../components/Article/Article" import Offers from "../components/Offers/Offers" import MoreArticles from "../components/Articles/MoreArticles/MoreArticles" @@ -9,11 +10,22 @@ import { graphql } from "gatsby" const articleTemplate = ({ data: { - markdownRemark: { frontmatter, html }, + article: { frontmatter, html }, + site: { + siteMetadata: { siteUrl }, + }, }, }) => { return ( <> +

@@ -34,7 +46,7 @@ const articleTemplate = ({ export const pageQuery = graphql` query Article($slug: String!) { - markdownRemark(frontmatter: { slug: { eq: $slug } }) { + article: markdownRemark(frontmatter: { slug: { eq: $slug } }) { html frontmatter { slug @@ -54,6 +66,11 @@ export const pageQuery = graphql` category } } + site { + siteMetadata { + siteUrl: url + } + } } ` diff --git a/src/templates/snippetTemplate.js b/src/templates/snippetTemplate.js index 0fe508f..3b528b2 100644 --- a/src/templates/snippetTemplate.js +++ b/src/templates/snippetTemplate.js @@ -1,6 +1,7 @@ import React from "react" import { Main } from "../ui/ui" import { Grid, Row, Col } from "react-flexbox-grid" +import SEO from "../components/SEO/SEO" import Snippet from "../components/Snippet/Snippet" import { graphql } from "gatsby" @@ -11,6 +12,13 @@ const snippetTemplate = ({ }) => { return ( <> +