From 55b685115bc93cba8831aef2b58936b577349963 Mon Sep 17 00:00:00 2001 From: Karol Wypchlo Date: Thu, 1 Apr 2021 14:46:00 +0200 Subject: [PATCH] fix layout --- packages/website/gatsby-browser.js | 9 +++++++++ packages/website/src/components/Layout/Layout.js | 8 ++++---- packages/website/src/pages/404.js | 6 +++--- packages/website/src/pages/about.js | 6 +++--- packages/website/src/pages/developers.js | 6 +++--- packages/website/src/pages/index.js | 6 +++--- packages/website/src/pages/news.js | 9 ++++----- packages/website/src/pages/using-typescript.tsx | 6 ++---- packages/website/src/templates/news-post.js | 10 +++++----- 9 files changed, 36 insertions(+), 30 deletions(-) diff --git a/packages/website/gatsby-browser.js b/packages/website/gatsby-browser.js index e27abcd4..e086f2cb 100644 --- a/packages/website/gatsby-browser.js +++ b/packages/website/gatsby-browser.js @@ -12,3 +12,12 @@ import "@fontsource/sora/600.css"; // semibold import "@fontsource/source-sans-pro/400.css"; // normal import "@fontsource/source-sans-pro/600.css"; // semibold import "./src/styles/global.css"; + +import * as React from "react"; +import Layout from "./src/components/Layout"; + +export const wrapPageElement = ({ element, props }) => { + // props provide same data to Layout as Page element will get + // including location, data, etc - you don't need to pass it + return {element}; +}; diff --git a/packages/website/src/components/Layout/Layout.js b/packages/website/src/components/Layout/Layout.js index 307c0369..b271c9b1 100644 --- a/packages/website/src/components/Layout/Layout.js +++ b/packages/website/src/components/Layout/Layout.js @@ -14,7 +14,7 @@ import FooterNavigation from "../FooterNavigation"; import { useWindowScroll } from "react-use"; import { readableColor } from "polished"; -const FixedHeader = () => { +const FixedHeader = ({ uri }) => { const { y } = useWindowScroll(); const ref = React.useRef(null); const [mode, setMode] = React.useState(); @@ -29,7 +29,7 @@ const FixedHeader = () => { if (mode !== calculated) { setMode(calculated); } - }, [setMode, mode, y]); + }, [setMode, mode, y, uri]); return (
@@ -39,7 +39,7 @@ const FixedHeader = () => { ); }; -const Layout = ({ children }) => { +const Layout = ({ children, uri }) => { // const data = useStaticQuery(graphql` // query SiteTitleQuery { // site { @@ -52,7 +52,7 @@ const Layout = ({ children }) => { return (
- +
{children}
diff --git a/packages/website/src/pages/404.js b/packages/website/src/pages/404.js index 00864053..73acbe0a 100644 --- a/packages/website/src/pages/404.js +++ b/packages/website/src/pages/404.js @@ -1,10 +1,10 @@ import * as React from "react"; import { Link } from "gatsby"; -import Layout, { Section, SectionTitle } from "../components/Layout"; +import { Section, SectionTitle } from "../components/Layout"; import SEO from "../components/seo"; const NotFoundPage = () => ( - + <>
@@ -16,7 +16,7 @@ const NotFoundPage = () => (
- + ); export default NotFoundPage; diff --git a/packages/website/src/pages/about.js b/packages/website/src/pages/about.js index 3a469aac..9559cc99 100644 --- a/packages/website/src/pages/about.js +++ b/packages/website/src/pages/about.js @@ -1,6 +1,6 @@ import * as React from "react"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; -import Layout, { Section, SectionTitle, SectionTitleCaption, CardWithDescription } from "../components/Layout"; +import { Section, SectionTitle, SectionTitleCaption, CardWithDescription } from "../components/Layout"; import { Carousel } from "../components/Carousel/Carousel"; import SEO from "../components/seo"; import { @@ -123,7 +123,7 @@ const AboutPage = ({ ...props }) => { const teamCardsPaginated = paginate(teamCards, 3); return ( - + <>
@@ -274,7 +274,7 @@ const AboutPage = ({ ...props }) => { ))}
- + ); }; diff --git a/packages/website/src/pages/developers.js b/packages/website/src/pages/developers.js index f7bd42a2..7b773c24 100644 --- a/packages/website/src/pages/developers.js +++ b/packages/website/src/pages/developers.js @@ -1,5 +1,5 @@ import * as React from "react"; -import Layout, { Section, SectionTitle, CardWithDescription } from "../components/Layout"; +import { Section, SectionTitle, CardWithDescription } from "../components/Layout"; import { Carousel } from "../components/Carousel/Carousel"; import { ExternalLink, DataSwap, Encryption, Layers, Mesh, Toolkit, DevBig } from "../components/Icons"; import CodeTerminal from "../components/CodeTerminal"; @@ -87,7 +87,7 @@ const docs = [ ]; const DevelopersPage = () => ( - + <>
@@ -172,7 +172,7 @@ const DevelopersPage = () => (
- + ); export default DevelopersPage; diff --git a/packages/website/src/pages/index.js b/packages/website/src/pages/index.js index 16abf2c3..92adc6ff 100644 --- a/packages/website/src/pages/index.js +++ b/packages/website/src/pages/index.js @@ -1,5 +1,5 @@ import * as React from "react"; -import Layout, { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout"; +import { Section, SectionTitle, CardWithDescription, CardWithTitle } from "../components/Layout"; import { Carousel } from "../components/Carousel/Carousel"; import SEO from "../components/seo"; import CommunitySection from "../components/CommunitySection"; @@ -67,7 +67,7 @@ const ecosystemCards = [ const IndexPage = () => { return ( - + <>
@@ -157,7 +157,7 @@ const IndexPage = () => {
- + ); }; diff --git a/packages/website/src/pages/news.js b/packages/website/src/pages/news.js index 5a250395..639b04c7 100644 --- a/packages/website/src/pages/news.js +++ b/packages/website/src/pages/news.js @@ -1,17 +1,16 @@ import * as React from "react"; import { graphql } from "gatsby"; import { GatsbyImage, getImage } from "gatsby-plugin-image"; -import Layout, { Section, Label } from "../components/Layout"; +import { Section, Label } from "../components/Layout"; import { NewsSummary } from "../components/News"; import Link from "../components/Link"; import SEO from "../components/seo"; const NewsCard = ({ ...props }) => { - console.log(props.frontmatter); return (
- + {props.frontmatter.categories && ( @@ -45,7 +44,7 @@ const NewsCard = ({ ...props }) => { const NewsPage = ({ data }) => { return ( - + <>
@@ -55,7 +54,7 @@ const NewsPage = ({ data }) => { ))}
- + ); }; diff --git a/packages/website/src/pages/using-typescript.tsx b/packages/website/src/pages/using-typescript.tsx index 9d11de13..2b3d0a35 100644 --- a/packages/website/src/pages/using-typescript.tsx +++ b/packages/website/src/pages/using-typescript.tsx @@ -1,8 +1,6 @@ // If you don't want to use TypeScript you can delete this file! import * as React from "react"; import { PageProps, Link, graphql } from "gatsby"; - -import Layout from "../components/Layout/Layout"; import SEO from "../components/seo"; type DataProps = { @@ -12,7 +10,7 @@ type DataProps = { }; const UsingTypescript: React.FC> = ({ data, path }) => ( - + <>

Gatsby supports TypeScript by default!

@@ -31,7 +29,7 @@ const UsingTypescript: React.FC> = ({ data, path }) => ( documentation about TypeScript.

Go back to the homepage - + ); export default UsingTypescript; diff --git a/packages/website/src/templates/news-post.js b/packages/website/src/templates/news-post.js index 8fc99969..28b9e1f7 100644 --- a/packages/website/src/templates/news-post.js +++ b/packages/website/src/templates/news-post.js @@ -1,6 +1,6 @@ import * as React from "react"; import { graphql } from "gatsby"; -import Layout, { Section, SectionTitle } from "../components/Layout"; +import { Section, SectionTitle } from "../components/Layout"; import { NewsSummary } from "../components/News"; import SEO from "../components/seo"; import { TwitterShareButton, LinkedinShareButton, FacebookShareButton } from "react-share"; @@ -8,13 +8,13 @@ import { TwitterSmall, LinkedinSmall, FacebookSmall } from "../components/Icons" const BlogPostTemplate = ({ data, location }) => { const post = data.markdownRemark; - const siteTitle = data.site.siteMetadata?.title || `Title`; + // const siteTitle = data.site.siteMetadata?.title || `Title`; // const { previous, next } = data; // console.log(post); return ( - + <>
@@ -33,7 +33,7 @@ const BlogPostTemplate = ({ data, location }) => {
-
Share
+
Share
@@ -56,7 +56,7 @@ const BlogPostTemplate = ({ data, location }) => {
- + ); };