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

wrap pages in layout

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-22 02:57:00 +03:00
parent 038e63d94d
commit aaed77eed1
14 changed files with 48 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
gatsby-browser.js
View File

@ -1,4 +1,6 @@
import "firebase/database"
import React from 'react';
import Layout from './src/components/Layout/Layout'
import "gatsby-remark-vscode/styles.css"
@ -25,3 +27,7 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
return window.scrollTo(0, 0)
}
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>;
};

9
gatsby-ssr.js
View File

@ -1,12 +1,13 @@
import React from "react"
import "firebase/database"
import React from "react"
import Layout from './src/components/Layout/Layout'
const OnDark = () => {
return (
<script
dangerouslySetInnerHTML={{
__html: `
(() => {
(function() {
window.__isDarkTheme = false
window.__setTheme = function(theme) {
@ -41,3 +42,7 @@ const OnDark = () => {
export const onRenderBody = ({ setPreBodyComponents }) => {
setPreBodyComponents(<OnDark key="isDarkTheme" />)
}
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>;
};

10
src/components/Header/Header.js
View File

@ -21,13 +21,19 @@ const Header = () => {
const [isMobileOpen, setIsMobileOpen] = React.useState(false)
const { pathname } = useLocation()
const [ready, setReady] = React.useState(false)
const [isDark, setIsDark] = React.useState(false)
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 +77,7 @@ const Header = () => {
<div className="header-nav__links">
<nav>{renderLinks()}</nav>
</div>
<ThemeSwitcher />
<ThemeSwitcher ready={ready} isDark={isDark} setIsDark={setIsDark} />
</div>
<div
className={

14
src/components/Header/ThemeSwitcher/ThemeSwitcher.js
View File

@ -3,14 +3,14 @@ import React from 'react';
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)
const ThemeSwitcher = ({ ready, isDark, setIsDark }) => {
// const [ready, setReady] = React.useState(false)
// const [isDark, setIsDark] = React.useState(false)
React.useEffect(() => {
setIsDark(window.__isDarkTheme)
setReady(true)
}, [setIsDark, setReady])
// React.useEffect(() => {
// setIsDark(window.__isDarkTheme)
// setReady(true)
// }, [setIsDark, setReady])
return (
<div className={ready ? 'header-nav__theme ready' : 'header-nav__theme'}>

5
src/pages/404.js
View File

@ -3,11 +3,10 @@ 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 (
<Layout>
<>
<SEO />
<Main>
<Grid fluid>
@ -18,7 +17,7 @@ const NotFound = () => {
</div>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/pages/about.js
View File

@ -3,7 +3,6 @@ import { Grid, Row, Col } from "react-flexbox-grid"
import { Main } from "../ui/ui"
import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
import SEO from "../components/SEO/SEO"
import Layout from "../components/Layout/Layout"
import Offers from "../components/Offers/Offers"
import About from "../components/About/About"
@ -12,7 +11,7 @@ const AboutPage = () => {
siteMetadata: { title, menuLinks, social },
} = useSiteMetadataQuery()
return (
<Layout>
<>
<SEO
title="О сайте"
description="Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства."
@ -35,7 +34,7 @@ const AboutPage = () => {
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/pages/articles.js
View File

@ -8,7 +8,6 @@ import useCategoriesQuery from "../hooks/useCategoriesQuery"
import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
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"
@ -64,7 +63,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
}, [setFiltredArticles, filterArticles, allArticles.edges, query, onPage])
return (
<Layout>
<>
<SEO title="Статьи" />
<Main>
<Grid fluid>
@ -123,7 +122,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/pages/contacts.js
View File

@ -3,7 +3,6 @@ import { Main } from "../ui/ui"
import { Grid, Row, Col } from "react-flexbox-grid"
import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
import SEO from "../components/SEO/SEO"
import Layout from "../components/Layout/Layout"
import Contacts from "../components/Contacts/Contacts"
const ContactsPage = () => {
@ -13,7 +12,7 @@ const ContactsPage = () => {
},
} = useSiteMetadataQuery()
return (
<Layout>
<>
<SEO
title="📝 Контакты"
description="Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные."
@ -27,7 +26,7 @@ const ContactsPage = () => {
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/pages/index.js
View File

@ -5,7 +5,6 @@ import { Grid, Row, Col } from "react-flexbox-grid"
import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
import useSnippetsQuery from "../hooks/useSnippetsQuery"
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 SnippetItem from "../components/Snippets/SnippetItem/SnippetItem"
@ -23,7 +22,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
let [limit, setLimit] = React.useState(onPage)
return (
<Layout>
<>
<SEO />
<Main>
<Grid fluid>
@ -59,7 +58,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/pages/snippets.js
View File

@ -3,7 +3,6 @@ import { graphql } from "gatsby"
import { Main } from "../ui/ui"
import { Grid, Row, Col } from "react-flexbox-grid"
import SEO from "../components/SEO/SEO"
import Layout from "../components/Layout/Layout"
import Snippets from "../components/Snippets/Snippets"
import SnippetItem from "../components/Snippets/SnippetItem/SnippetItem"
@ -13,7 +12,7 @@ const SnippetsPage = ({
},
}) => {
return (
<Layout>
<>
<SEO />
<Main>
<Grid fluid>
@ -39,7 +38,7 @@ const SnippetsPage = ({
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/templates/articleTemplate.js
View File

@ -1,7 +1,6 @@
import React from "react"
import { Main } from "../ui/ui"
import { Grid, Row, Col } from "react-flexbox-grid"
import Layout from "../components/Layout/Layout"
import Article from "../components/Article/Article"
import Offers from "../components/Offers/Offers"
import MoreArticles from "../components/Articles/MoreArticles/MoreArticles"
@ -14,7 +13,7 @@ const articleTemplate = ({
},
}) => {
return (
<Layout>
<>
<Main>
<Grid fluid>
<Row>
@ -29,7 +28,7 @@ const articleTemplate = ({
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/templates/categoryTemplate.js
View File

@ -5,7 +5,6 @@ import { graphql } from "gatsby"
import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
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"
@ -28,7 +27,7 @@ const CategoryPage = ({
let [limit, setLimit] = React.useState(onPage)
return (
<Layout>
<>
<SEO title={title} canonical={`${siteUrl}/articles`} />
<Main>
<Grid fluid>
@ -63,7 +62,7 @@ const CategoryPage = ({
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/templates/snippetTemplate.js
View File

@ -2,7 +2,6 @@ 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 = ({
@ -11,7 +10,7 @@ const snippetTemplate = ({
},
}) => {
return (
<Layout>
<>
<Main>
<Grid fluid style={{ maxWidth: 900 }}>
<Row>
@ -21,7 +20,7 @@ const snippetTemplate = ({
</Row>
</Grid>
</Main>
</Layout>
</>
)
}

5
src/templates/tagTemplate.js
View File

@ -5,7 +5,6 @@ import { graphql } from "gatsby"
import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
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"
@ -28,7 +27,7 @@ const TagPage = ({
let [limit, setLimit] = React.useState(onPage)
return (
<Layout>
<>
<SEO title={title} canonical={`${siteUrl}/articles`} />
<Main>
<Grid fluid>
@ -63,7 +62,7 @@ const TagPage = ({
</Row>
</Grid>
</Main>
</Layout>
</>
)
}