fix layout

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 <Layout {...props}>{element}</Layout>;
+};

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 (
     <div ref={ref} className="fixed inset-x-0 top-0 z-50">
@@ -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 (
     <div className="background bg-top bg-contain">
-      <FixedHeader />
+      <FixedHeader uri={uri} />
       <main>{children}</main>
       <FooterNavigation />
       <Footer />

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 = () => (
-  <Layout>
+  <>
     <SEO title="404: Not found" />
 
     <Section className="bg-white text-center">
@@ -16,7 +16,7 @@ const NotFoundPage = () => (
         </Link>
       </div>
     </Section>
-  </Layout>
+  </>
 );
 
 export default NotFoundPage;

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 (
-    <Layout>
+    <>
       <SEO title="About" />
 
       <Section className="bg-palette-100" marginBottom={false} first={true}>
@@ -274,7 +274,7 @@ const AboutPage = ({ ...props }) => {
           ))}
         </div>
       </Section>
-    </Layout>
+    </>
   );
 };
 

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 = () => (
-  <Layout>
+  <>
     <SEO title="Developers" />
 
     <Section first={true}>
@@ -172,7 +172,7 @@ const DevelopersPage = () => (
         </ul>
       </div>
     </Section>
-  </Layout>
+  </>
 );
 
 export default DevelopersPage;

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 (
-    <Layout>
+    <>
       <SEO title="Home" />
 
       <Section first={true}>
@@ -157,7 +157,7 @@ const IndexPage = () => {
       <Section className="bg-primary">
         <CommunitySection />
       </Section>
-    </Layout>
+    </>
   );
 };
 

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 (
     <div className="flex flex-col">
       <Link to={props.fields.slug}>
-        <GatsbyImage image={getImage(props.frontmatter.thumbnail)} />
+        <GatsbyImage image={getImage(props.frontmatter.thumbnail)} alt={props.frontmatter.title} />
       </Link>
 
       {props.frontmatter.categories && (
@@ -45,7 +44,7 @@ const NewsCard = ({ ...props }) => {
 
 const NewsPage = ({ data }) => {
   return (
-    <Layout>
+    <>
       <SEO title="News" />
 
       <Section className="bg-white" first={true}>
@@ -55,7 +54,7 @@ const NewsPage = ({ data }) => {
           ))}
         </div>
       </Section>
-    </Layout>
+    </>
   );
 };
 

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<PageProps<DataProps>> = ({ data, path }) => (
-  <Layout>
+  <>
     <SEO title="Using TypeScript" />
     <h1>Gatsby supports TypeScript by default!</h1>
     <p>
@@ -31,7 +29,7 @@ const UsingTypescript: React.FC<PageProps<DataProps>> = ({ data, path }) => (
       <a href="https://www.gatsbyjs.com/docs/typescript/">documentation about TypeScript</a>.
     </p>
     <Link to="/">Go back to the homepage</Link>
-  </Layout>
+  </>
 );
 
 export default UsingTypescript;

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 (
-    <Layout location={location} title={siteTitle}>
+    <>
       <SEO title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} />
       <Section className="bg-white" first={true}>
         <article className="blog-post" itemScope itemType="http://schema.org/Article">
@@ -33,7 +33,7 @@ const BlogPostTemplate = ({ data, location }) => {
               <hr className="text-palette-200" />
 
               <div className="flex items-center">
-                <div class="text-xs uppercase mr-4">Share</div>
+                <div className="text-xs uppercase mr-4">Share</div>
 
                 <TwitterShareButton url={location.href} title={post.frontmatter.title} hashtags={[]}>
                   <TwitterSmall className="fill-current hover:text-palette-400 transition-colors duration-200" />
@@ -56,7 +56,7 @@ const BlogPostTemplate = ({ data, location }) => {
           </div>
         </article>
       </Section>
-    </Layout>
+    </>
   );
 };