gatsby#graphql JavaScript Examples

BG = () => {
  const data = useStaticQuery(graphql`
    {
      noise: file(relativePath: { eq: "noise.png" }) {
        childImageSharp {
          fluid(quality: 100, maxWidth: 800) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `)

  return (
    <StyledBG>
      <StyledRed />
      <StyledNoise fluid={data.noise.childImageSharp.fluid} />
    </StyledBG>
  )
}

ProfilePic = (props) => {
  const data = useStaticQuery(graphql`
    query ProfilePicQuery {
      avatar: allFile(filter: { absolutePath: { regex: "/authors/" } }) {
        edges {
          node {
            name
            childImageSharp {
              fixed(width: 50, height: 50) {
                ...GatsbyImageSharpFixed
              }
            }        
          }
        }
      }
    }
  `);

  const profilePic = data.avatar.edges.find(item => item.node.name === props.identifier);
  if (!profilePic) {
    return null;
  }

  return (
    <Image
      fixed={profilePic.node.childImageSharp.fixed}
      alt={props.name}
      style={{
        marginRight: rhythm(1 / 2),
        marginBottom: 0,
        minWidth: 50,
        borderRadius: "100%",
      }}
      imgStyle={{
        borderRadius: "50%",
      }}
    />
  );
}

AboutMe = () => {
  const data = useStaticQuery(graphql`
    {
      photo: file(relativePath: { eq: "about-me/selfie-boy.png" }) {
        childImageSharp {
          gatsbyImageData(width: 512, layout: CONSTRAINED)
        }
      }
      markdownRemark(frontmatter: { id: { eq: "about-me" } }) {
        html
      }
    }
  `);

  return (
    <section id="about-me">
      <Heading icon={MdPerson} title="About Me" />

      <div className="grid lg:grid-cols-6 gap-12 items-center">
        <div className="hidden md:block lg:col-span-2 w-1/3 lg:w-3/4 mx-auto wow fadeInLeft">
          <GatsbyImage
            image={data.photo.childImageSharp.gatsbyImageData}
            alt="Smiling Cartoon Boy with Phone and Backpack"
          />
        </div>
        <div
          className="text-justify lg:col-span-4 wow fadeIn"
          dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
        />
      </div>
    </section>
  );
}

pageQuery = graphql`
  query {
    file(relativePath: { eq: "code.png" }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid_tracedSVG
        }
      }
    }
  }
`

query = graphql`
  query {
    allBuilderModels {
      header(limit: 1, options: { cachebust: true }) {
        content
      }
      footer(limit: 1, options: { cachebust: true }) {
        content
      }
    }
  }
`

Recaptcha = () => {
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          recaptchaKey
        }
      }
    }
  `)

  return (
    <>
      {typeof window !== 'undefined' && (
        <ReCaptcha
          sitekey={data.site.siteMetadata.recaptchaKey}
          render="explicit"
          elementID={`captcha-${Math.round(Math.random() * 1000)}`}
        />
      )}
    </>
  )
}

Devoxx4Kids = () => {
  const data = useStaticQuery(graphql`
    {
      placeholderImage: file(
        relativePath: { eq: "devoxx4kids/devoxx4kids.png" }
      ) {
        childImageSharp {
          gatsbyImageData(width: 300, layout: CONSTRAINED)
        }
      }
    }
  `);

  return (
    <GatsbyImage
      image={data.placeholderImage.childImageSharp.gatsbyImageData}
    />
  );
}

pagesQuery = graphql`
  query PagesQuery {
    allSitePage(filter: { path: { ne: "/dev-404-page/" } }) {
      nodes {
        path
      }
    }
  }
`

Image = () => {
  const data = useStaticQuery(graphql`
    query {
      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
        childImageSharp {
          fluid(maxWidth: 300) {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `)

  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
}

Image = () => {
  const data = useStaticQuery(graphql`
    query {
      images: allFile {
        edges {
          node {
            relativePath
            name
            childImageSharp {
              fluid(maxWidth: 300, maxHeight: 300) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `)
  // Loop through all files to find file that matches with image path
  const image = data.images.edges.find(n => {
    return n.node.relativePath.includes(config.profileImageName)
  })
  if (!image) {
    return null
  }

  return (
    <Img className="img-profile" fluid={image.node.childImageSharp.fluid} />
  )
}

pageQuery = graphql`
    query {
        site {
            siteMetadata {
                title
            }
        }
        allMarkdownRemark(
            sort: { order: DESC, fields: [frontmatter___date] }
            limit: 1000
        ) {
            edges {
                node {
                    excerpt
                    frontmatter {
                        path
                        title
                        date
                    }
                }
            }
        }
    }
`

Sponsors = () => {
  const data = useStaticQuery(graphql`
    query {
      allSanitySponsors {
        nodes {
          altText
          sponsorUrl
          sponsor {
            asset {
              fixed(width: 185) {
                ...GatsbySanityImageFixed
              }
            }
          }
        }
      }
    }
  `);
  return (
    <Wrapper>
      <h2>Thank you to our 2021 sponsors!</h2>
      <div className="wrapper">
        {data.allSanitySponsors.nodes.map((sponsor, id) => (
          <div className="spacer" key={`sponsor${id}`}>
            <a href={sponsor.sponsorUrl} target="_blank" rel="noreferrer">
              <Img fixed={sponsor.sponsor.asset.fixed} alt={sponsor.altText} />
            </a>
            <br />
          </div>
        ))}
      </div>
    </Wrapper>
  );
}

Layout = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `)

  return (
    <>
      <Header siteTitle={data.site.siteMetadata.title} />

      <main className="p-4">{children}</main>

      <Footer />
    </>
  )
}

useBackgroundsAssets = () => {
  const data = useStaticQuery(graphql`
    query {
      starsBig: file(relativePath: { eq: "backgrounds/stars-big.svg" }) {
        publicURL
      }
      starsSmall: file(relativePath: { eq: "backgrounds/stars-small.svg" }) {
        publicURL
      }
    }
  `);

  return data;
}

Footer = () => {
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          commit
          repository
          menulinks {
            name
            sublinks {
              description
              name
              link
            }
          }
          title
        }
      }
    }
  `)

  // const themeContext = useContext(ThemeManagerContext)

  return (
    <StyledFooter>
      <StyledSection>
        <StyledFooterSection>
          {/* TODO: add email subscriptions <EmailSection /> */}
          <Commit>
            Deployed commit:{' '}
            <code>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href={`${data.site.siteMetadata.repository}/commit/${data.site.siteMetadata.commit}`}
              >
                {data.site.siteMetadata.commit.substring(0, 7)}
              </a>
            </code>
          </Commit>
          <p>© 2021 1Hive</p>
          {/* <div>
            <label>
              <input type="checkbox" onChange={() => themeContext.toggleDark()} checked={themeContext.isDark} /> Dark
              mode
            </label>
          </div> */}
        </StyledFooterSection>
      </StyledSection>
      <StyledSection>
        {data.site.siteMetadata.menulinks.map(item => {
          return (
            <StyledFooterSectionNav key={item.name}>
              <h4 style={{ fontWeight: 700, marginBottom: '1rem' }}>{item.name}</h4>
              <Dropdown links={item.sublinks} />
            </StyledFooterSectionNav>
          )
        })}
      </StyledSection>
    </StyledFooter>
  )
}

SEO = ({ description, lang, meta, title, twitterCard }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            siteUrl
            description
            social {
              twitter
            }
          }
        }
      }
    `
  );

  const metaDescription = description || site.siteMetadata.description;

  if (twitterCard == null) {
    twitterCard = adoptSocialImage;
  }

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: "description",
          content: metaDescription,
        },
        {
          property: "og:title",
          content: title,
        },
        {
          property: "og:description",
          content: metaDescription,
        },
        {
          property: "og:image",
          content: site.siteMetadata.siteUrl + twitterCard,
        },
        {
          property: "og:type",
          content: "website",
        },
        {
          name: "twitter:card",
          content: "summary_large_image",
        },
        {
          name: "twitter:creator",
          content: site.siteMetadata.social.twitter,
        },
        {
          name: "twitter:site",
          content: site.siteMetadata.social.twitter,
        },
        {
          name: "twitter:title",
          content: title,
        },
        {
          name: "twitter:description",
          content: metaDescription,
        },
        {
          name: "twitter:image",
          content: site.siteMetadata.siteUrl + twitterCard,
        },
      ].concat(meta)}
    />
  );
}

SEO = () => {
  const { site, file } = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          title
          description
          author
        }
      }
      file(relativePath: { eq: "share.png" }) {
        publicURL
      }
    }
  `);

  const title = site.siteMetadata.title;
  const description = site.siteMetadata.description;
  const author = site.siteMetadata.author;
  const image = file.publicURL;

  return (
    <Helmet
      htmlAttributes={{ lang: "en" }}
      defer={false}
      title={title}
      meta={[
        {
          name: `description`,
          content: description,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: description,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: "og:image",
          content: image,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: author,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: description,
        },
        {
          name: "twitter:card",
          content: "summary_large_image",
        },
      ]}
    />
  );
}

Header = () => {
  const data = useStaticQuery(graphql`
    query {
      file(sourceInstanceName: { eq: "images" }, name: { eq: "icon" }) {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid_tracedSVG
          }
        }
      }
    }
  `)
  return (
    <header
      css={css`
        background: #fff;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0.5rem calc((100vw - 1000px) / 2); /* for header both side equal margin,this will be of equal width of main */

        @media (max-width: 1000px) {
          padding: 10px 10px 0 10px;
        }
      `}
    >
      <div style={{ display: "flex" }}>
        <Img
          fluid={data.file.childImageSharp.fluid}
          alt=""
          style={{ padding: "0px", width: "70px" }}
        />
        <NavLink to="/" style={{ alignSelf: "center", padding: "0px" }}>
          Corona Freebies
        </NavLink>
      </div>
      <nav
        css={css`
          margin-top: 0;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        `}
      >
        <NavLink to="/" activeClassName="current-page">
          Home
        </NavLink>
        <NavLink to="/about" activeClassName="current-page">
          About
        </NavLink>
      </nav>
    </header>
  )
}