author {
  name
}

import React from "react"
import { useStaticQuery, graphql, Link } from "gatsby"

const Header = () => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      wpgraphql {
        generalSettings {
          description
          title
        }
      }
    }
  `)

  const { title, description } = data.wpgraphql.generalSettings

  return (
    <header id="masthead" className="site-header">
      <p className="site-title">
        <Link to="/" rel="home">
          {title}
        </Link>
      </p>

      <p className="site-description">{description}</p>
    </header>
  )
}

export default Header

import React from "react"

const Footer = () => (
  <footer>
    © {new Date().getFullYear()} | Built with{` `}
    <a href="https://www.wpgraphql.com">WPGraphQL</a> and{` `}
    <a href="https://www.gatsbyjs.org">Gatsby</a>
  </footer>
)

export default Footer

import React from "react"
import Header from "./Header.js"
import Footer from "./Footer.js"

const Layout = ({ children }) => (
  <>
    <Header />
    <div className="content">{children}</div>
    <Footer />
  </>
)

export default Layout

import React from "react"
import Layout from "../components/Layout"

export default () => <div>Hello world!</div>
export default () => (
  <Layout>
    <div>Hello world!</div>
  </Layout>
)

const GET_POSTS = `
    query GET_POSTS($first:Int $after:String){
        wpgraphql {
          posts(
            first: $first
            after:$after
          ) {
            pageInfo {
              endCursor
              hasNextPage
            }
            nodes {
              id
              uri
              postId
              title
            }
          }
        }
      }
    `

 const postTemplate = path.resolve(`./src/templates/post.js`)
    allPosts.map(post => {
      console.log(`create post: ${post.uri}`)
      createPage({
        path: `/blog/${post.uri}/`,
        component: postTemplate,
        context: post,
      })
    })

const Blog = ({ data, pageContext }) => {
  const posts = data.wpgraphql.posts.nodes
  const { pageNumber, hasNextPage, itemsPerPage, allPosts } = pageContext
  return (
    <Layout>
      {data &&
        data.wpgraphql &&
        posts.map(post => (
          <article key={post.id}>
            {post.featuredImage && (
              <img
                src={post.featuredImage.sourceUrl}
                alt={post.featuredImage.altText}
              />
            )}

            <h2>
              <Link
                to={`/blog/${post.uri}`}
                dangerouslySetInnerHTML={{ __html: post.title }}
              />
            </h2>
            <p
              className="content"
              dangerouslySetInnerHTML={{ __html: post.excerpt }}
            />
          </article>
        ))}
      <Pagination
        pageNumber={pageNumber}
        hasNextPage={hasNextPage}
        allPosts={allPosts}
        itemsPerPage={itemsPerPage}
      />
    </Layout>
  )
}

const MENU_QUERY = graphql`
  fragment MenuFields on WPGraphQL_MenuItem {
    id
    label
    url
    target
    connectedObject {
      __typename
    }
  }

  query GET_MENU_ITEMS {
    wpgraphql {
      menuItems(where: { location: MENU_1 }) {
        nodes {
          ...MenuFields
          childItems {
            nodes {
              ...MenuFields
            }
          }
        }
      }
    }
  }
`

acfDemoFields {
          myTextField
          flexibleField {
            __typename
            ... on WPGraphQL_Post_Acfdemofields_FlexibleField_ImageBlock {
              text
              image {
                sourceUrl
              }
            }
            ... on WPGraphQL_Post_Acfdemofields_FlexibleField_TextareaBlock {
              textarea
            }
          }
        }

import Typography from "typography"

const typography = new Typography({
  baseFontSize: "16px",
  baseLineHeight: 1.8,
  headerFontFamily: ["futura-pt", "sans-serif"],
  bodyFontFamily: ["proxima-nova", "sans-serif"],
  bodyColor: "#575757",
  bodyWeight: 100,
  headerColor: "#222",
  headerWeight: 100,
})

export default typography

const StyledFooter = styled.footer`
  @media (min-width: 768px) {
    padding: 80px 0;
  }
  padding: 40px 0;
`

const Footer = () => (
  <StyledFooter>
    <Container>
      © {new Date().getFullYear()}, Built with
      {` `}
      <a href="https://www.gatsbyjs.org">Gatsby</a>
    </Container>
  </StyledFooter>
)