tests dev form images and graphQL query

content/pages/index.mdx

@@ -5,6 +5,8 @@ import { Card } from 'theme-ui'
 import { Flex } from 'theme-ui'
 import { Image } from 'theme-ui'
 import { Grid } from 'theme-ui'
+import Img from 'gatsby-image'
+import { graphql, useStaticQuery } from "gatsby"
 
 <SEO title="Home" />
 <Box
@@ -49,14 +51,15 @@ import { Grid } from 'theme-ui'
     mb: 40,
   }}>
 <Image 
-    display='block'
+   /* display='block'
     objectFit= 'contain'
     height= '100%'
     width='55px' 
     ml={100} 
-    mr={0}
-    src={"/static/8ce7d555964743fccc3576b2b5174021/49ddd/securite.png"} 
-    />
+    mr={0}*/
+    //src={"/static/8ce7d555964743fccc3576b2b5174021/49ddd/securite.png"} 
+    
+src={"content/assets/securite.png"} />
 <Text
   sx={{
     fontSize: 30,
@@ -64,7 +67,7 @@ import { Grid } from 'theme-ui'
     fontWeight: '700',
     color: 'white',
   }}>
-    Sécurisé 
+    Sécurité 
 </Text>
 <Text 
   sx={{
@@ -91,7 +94,7 @@ import { Grid } from 'theme-ui'
     width='55px' 
     ml={100} 
     mr={100}
-    src={"/static/f867b176bdab4d5f7b7569fd4db3a09c/49ddd/gdpr.png"}
+    src={"image1"}
    />
 <Text 
   sx={{

content/pages/page-2.mdx

@@ -23,23 +23,3 @@ import { Grid } from 'theme-ui'
   <Box bg='muted'>Box</Box>
 </Grid>
 
-# Page 2
-
-Donec viverra neque quis tincidunt aliquam. Fusce bibendum libero vel ligula viverra posuere. Proin convallis libero eget orci cursus ultrices.
-
-## A List
-
-1. **Item 1:** Some kind of important thing you know. This is really important stuff. Wow!
-1. **Item 2:** But this is more important I think...really truly. Trust me.
-1. **Item 3:** I'm sorry. I lied. This is actually important now. I don't know why I didn't tell you about this before. It was just so amazing.
-1. **Item 4:** The last one. My creativity is gone.
-
-## A Picture
-
-![Beakers](../assets/image1.jpg)
-
-## Now a long title and an unordered list for your viewing pleasure
-
-- Everything is out of order here that is why they call it an unordered list, maybe it should have been called random list.
-- More randomness and disorder.
-- Now this is just straight up chaos. Chaos list to ensure that I have everything in a case of disorder or the end of times.

src/components/footer.js

+/** @jsx jsx */
+import { jsx } from "theme-ui"
+import { Link } from "gatsby"
+
+<footer
+  sx={{
+    fontSize: 1,
+    variant: "styles.footer",
+  }}
+>
+  <div
+    sx={{
+      display: "grid",
+      gridTemplateRows: "repeat(4, 32px)",
+      gridTemplateColumns: ["repeat(2, 1fr)", "repeat(4, 1fr)"],
+      gridAutoFlow: "column",
+      px: 2,
+      py: 4,
+    }}
+  >
+    <Link to="/" sx={{ variant: "styles.navlink", p: 2 }}>
+      Home
+    </Link>
+    <Link to="/work" sx={{ variant: "styles.navlink", p: 2 }}>
+      Work
+    </Link>
+    <Link to="/blog" sx={{ variant: "styles.navlink", p: 2 }}>
+      Blog
+    </Link>
+    <Link to="/about" sx={{ variant: "styles.navlink", p: 2 }}>
+      About
+    </Link>
+    <Link to="/products" sx={{ variant: "styles.navlink", p: 2 }}>
+      Products
+    </Link>
+    <Link to="/community" sx={{ variant: "styles.navlink", p: 2 }}>
+      Community
+    </Link>
+    <Link to="/support" sx={{ variant: "styles.navlink", p: 2 }}>
+      Support
+    </Link>
+    <Link to="/contact" sx={{ variant: "styles.navlink", p: 2 }}>
+      Contact
+    </Link>
+    <Link to="/support" sx={{ variant: "styles.navlink", p: 2 }}>
+      Support
+    </Link>
+    <Link to="/products" sx={{ variant: "styles.navlink", p: 2 }}>
+      Products
+    </Link>
+    <Link to="/contact" sx={{ variant: "styles.navlink", p: 2 }}>
+      Contact
+    </Link>
+    <Link to="/community" sx={{ variant: "styles.navlink", p: 2 }}>
+      Community
+    </Link>
+    <Link to="/products" sx={{ variant: "styles.navlink", p: 2 }}>
+      Products
+    </Link>
+    <Link to="/community" sx={{ variant: "styles.navlink", p: 2 }}>
+      Community
+    </Link>
+    <Link to="/support" sx={{ variant: "styles.navlink", p: 2 }}>
+      Support
+    </Link>
+    <Link to="/contact" sx={{ variant: "styles.navlink", p: 2 }}>
+      Contact
+    </Link>
+  </div>
+  <div
+    sx={{
+      display: "flex",
+      justifyContent: "flex-end",
+      p: 3,
+    }}
+  >
+    <Link to="/privacy-policy" sx={{ color: "inherit" }}>
+      Privacy Policy
+    </Link>
+    <div sx={{ mx: 1 }} />
+    <Link to="/terms-of-use" sx={{ color: "inherit" }}>
+      Terms of Use
+    </Link>
+    <div sx={{ mx: 1 }} />© 2019 Jane Doe
+  </div>
+</footer>

src/components/gallery-image.js

+import React from "react"
+import Img from "gatsby-image"
+import styled from "@emotion/styled"
+import numeral from "numeral"
+
+import { mq, gutter, offset, offsetXxl } from "../utils/presets"
+import { options, scale } from "../utils/typography"
+
+const OuterContainer = styled(`div`)`
+  background: #fff;
+
+  ${mq.tablet} {
+    margin: 0;
+    margin-left: calc(-${offset} - ${gutter.tablet});
+    padding: 6.25rem;
+    padding-right: 0;
+  }
+
+  ${mq.desktop} {
+    margin-left: calc(-${offset} - ${gutter.desktop});
+  }
+
+  ${mq.xl} {
+    margin-right: -${gutter.desktop};
+  }
+
+  ${mq.xxl} {
+    margin-left: calc(-${offsetXxl} - ${gutter.desktop});
+  }
+`
+
+const Grid = styled(`div`)`
+  column-count: 1;
+  column-gap: ${gutter.default};
+
+  ${mq.mobile} {
+    column-count: 2;
+  }
+
+  ${mq.tablet} {
+    column-count: 3;
+  }
+
+  ${mq.xl} {
+    column-gap: ${gutter.tablet};
+  }
+`
+
+const GridItem = styled(`div`)`
+  break-inside: avoid;
+  position: relative;
+  margin-bottom: ${gutter.default};
+
+  ${mq.xl} {
+    margin-bottom: ${gutter.tablet};
+  }
+`
+
+const GridItemImage = styled(Img)`
+  &:hover {
+    div + img {
+      opacity: 1 !important;
+      transition: none !important;
+    }
+
+    img + picture > img {
+      opacity: 0 !important;
+    }
+
+    span: {
+      opacity: 1 !important;
+    }
+  }
+`
+
+const Badge = styled(`span`)`
+  background: #fff;
+  bottom: 0.625rem;
+  border-radius: 0.125rem;
+  color: ${options.bodyColor};
+  font-family: ${options.monospaceFontFamily.join(`,`)};
+  font-size: ${scale(-2).fontSize};
+  line-height: 1;
+  padding: 0.25rem;
+  pointer-events: none;
+  position: absolute;
+  opacity: 0.5;
+  right: 0.625rem;
+`
+
+const ImageGallery = edges => (
+  <OuterContainer>
+    <Grid>
+      {edges.images.map((image, index) => (
+        <GridItem key={index}>
+          <GridItemImage
+            fluid={image.node.localFile.childImageSharp.fluid}
+            title={`“${image.node.title}” by ${image.node.credit} (via unsplash.com)`}
+          />
+          <Badge>
+            SVG
+            {` `}
+            {numeral(
+              Buffer.byteLength(
+                image.node.localFile.childImageSharp.fluid.tracedSVG,
+                `utf8`
+              )
+            ).format()}
+            {` `}B
+          </Badge>
+        </GridItem>
+      ))}
+    </Grid>
+  </OuterContainer>
+)
+
+export default ImageGallery

src/components/gatsby-theme-catalyst-core/components/footer.js

+/** @jsx jsx */
+import { jsx, useThemeUI } from "theme-ui"
+import {
+  useSiteMetadata,
+  useCatalystConfig,
+  SocialFooter,
+} from "gatsby-theme-catalyst-core"
+import { IconContext } from "react-icons"
+
+const SiteFooter = () => {
+  const { title } = useSiteMetadata()
+  const { footerContentLocation } = useCatalystConfig()
+  const { theme } = useThemeUI()
+  const isLeft = footerContentLocation === "left"
+  const isRight = footerContentLocation === "right"
+  const isCenter = footerContentLocation === "center"
+
+  return (
+    <footer
+      sx={{
+        color: "footer.text",
+        backgroundColor: "footer.background",
+        textAlign:
+          (isLeft && "left") || (isRight && "right") || (isCenter && "center"),
+        px: 3,
+        py: 3,
+        gridArea: "footer",
+        a: {
+          color: "footer.links",
+        },
+        variant: "variants.footer",
+      }}
+    >
+      <div
+        sx={{
+          display: "grid",
+          alignContent: "center",
+          justifyContent:
+            (isLeft && "start") || (isRight && "end") || (isCenter && "center"),
+          width: "100%",
+          maxWidth: "maxPageWidth",
+          mx: "auto",
+          my: 0,
+        }}
+      >
+        <div
+          sx={{
+            a: {
+              color: "footer.icons",
+              mr: 3,
+            },
+            "a:last-of-type": {
+              mr: 0,
+            },
+            "a:hover": {
+              color: "primary",
+            },
+          }}
+        >
+          <IconContext.Provider value={{ size: theme.sizes.iconsFooter }}>
+            <SocialFooter />
+          </IconContext.Provider>
+        </div>
+        <p
+          sx={{
+            my: 0,
+          }}
+        >
+          Illustrations by{" "}
+          <a href="https://twitter.com/diana_valeanu">Diana Valeanu</a>
+          <br />
+          Design inspired by{" "}
+          <a href="https://www.gatsbyjs.org/starters/ajayns/gatsby-absurd/">
+            Gatsby-Absurd
+          </a>
+          <br />© {new Date().getFullYear()} {title}
+        </p>
+      </div>
+    </footer>
+  )
+}
+
+export default SiteFooter

src/components/gatsby-theme-catalyst-core/index.js

+import React from "react"
+import { graphql } from "gatsby"
+import styled from "@emotion/styled"
+import { css } from "@emotion/core"
+import { FaGithub } from "react-icons/fa"
+
+import Layout from "../components/layout"
+import { colors } from "../utils/presets"
+
+const FeatureList = styled(`ul`)`
+  margin-left: 0;
+  list-style: none;
+`
+
+const FeatureListItem = styled.li({
+  backgroundImage: `url(
+    "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='${colors.gatsby}' d='M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z' /%3E%3C/svg%3E")`,
+  backgroundPosition: `0 .25em`,
+  backgroundRepeat: `no-repeat`,
+  backgroundSize: `1em`,
+  paddingLeft: `1.5em`,
+})
+
+const Index = ({ data, location }) => (
+  <Layout
+    location={location}
+    image={data.coverImage.childImageSharp.fluid}
+    imageTitle={`“Black and silver vintage camera” by Alexander Andrews (via unsplash.com)`}
+    imageBackgroundColor={colors.ui.whisper}
+  >
+    <p>
+      <a href="https://www.gatsbyjs.org/packages/gatsby-image/">gatsby-image</a>
+      {` `}
+      is the official Image component for use in building Gatsby websites. It
+      provides the fastest, most optimized image loading performance possible
+      for Gatsby (and other React) websites.
+    </p>
+    <p>
+      The component requires
+      {` `}
+      <em
+        css={css`
+          font-style: normal;
+          font-weight: bold;
+        `}
+      >
+        no configuration
+      </em>
+      {` `}
+      when used within Gatsby. All image processing is done within Gatsby and
+      official plugins.
+    </p>
+    <p>
+      See the
+      {` `}
+      <a href="https://www.gatsbyjs.org/packages/gatsby-image/">
+        component’s documentation
+      </a>
+      {` `}
+      as well as
+      {` `}
+      <a href="https://github.com/gatsbyjs/gatsby/blob/master/examples/using-gatsby-image/">
+        <FaGithub
+          css={css`
+            position: relative;
+            bottom: -0.125em;
+            background-image: none;
+          `}
+        />
+        {` `}
+        view this site’s source
+      </a>
+      {` `}
+      to learn how to start using gatsby-image on your Gatsby sites.
+    </p>
+    <h2>Out of the box it:</h2>
+    <FeatureList>
+      <FeatureListItem>
+        Loads the optimal size of image for each device size and screen
+        resolution
+      </FeatureListItem>
+      <FeatureListItem>
+        Holds the image position while loading so your page doesn’t jump around
+        as images load
+      </FeatureListItem>
+      <FeatureListItem>
+        Uses the “blur-up” effect i.e. it loads a tiny version of the image to
+        show while the full image is loading
+      </FeatureListItem>
+      <FeatureListItem>
+        Alternatively provides a “traced placeholder” SVG of the image.
+      </FeatureListItem>
+      <FeatureListItem>
+        Lazy loads images which reduces bandwidth and speeds the initial load
+        time
+      </FeatureListItem>
+      <FeatureListItem>
+        Uses WebP images if browser supports the format
+      </FeatureListItem>
+    </FeatureList>
+  </Layout>
+)
+
+export default Index
+
+export const query = graphql`
+  query {
+    coverImage: file(
+      relativePath: { regex: "/alexander-andrews-260988-unsplash-edited/" }
+    ) {
+      childImageSharp {
+        fluid(
+          maxWidth: 800
+          quality: 80
+          duotone: { highlight: "#ffffff", shadow: "#663399" }
+        ) {
+          ...GatsbyImageSharpFluid
+        }
+      }
+    }
+  }
+`

src/components/image.js

+/** @jsx jsx */
+import { jsx, Card, Image } from "theme-ui"
+import React from "react"
+import { useStaticQuery, graphql } from "gatsby"
+import Img from "gatsby-image"
+
+
+  const data = useStaticQuery(graphql`
+    query {
+      image1: file(relativePath: { eq: "securite.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 1024) {
+            ...GatsbyImageSharpFluid_withWebp
+          }
+        }
+      }
+    }
+  `)
+
+  return (
+    <div>
+      <h1>Hello gatsby-image</h1>
+      <Card />
+      <Img fixed={data.file.childImageSharp.fixed} />
+      <Image />
+    </div>
+  )
+

src/components/layout.js

-/* eslint-disable react/jsx-no-undef */
-/** @jsx jsx */
-import {
-  jsx } from "theme-ui"
+import React from "react"
+import Img from "gatsby-image"
+import styled from "@emotion/styled"
 
-const Layout = ({ children }) => (
-  <Layout>
-  
+import Navigation from "./navigation"
+import { rhythm } from "../utils/typography"
+import logo from "../images/monogram.svg"
+import { mq, elevation, offset, offsetXxl, gutter } from "../utils/presets"
 
-  </Layout>
+const Container = styled(`div`)`
+  background: #fff;
+  margin-top: calc(67vh - ${gutter.default});
+  padding: ${gutter.default};
+  position: relative;
+
+  ${mq.tablet} {
+    background: #fff;
+    margin-left: ${offset};
+    margin-top: 0;
+    max-width: 37.5rem;
+    padding: ${gutter.tablet};
+    position: relative;
+  }
+
+  ${mq.desktop} {
+    padding: ${gutter.desktop};
+    padding-top: ${gutter.tablet};
+  }
+
+  ${mq.xxl} {
+    margin-left: ${offsetXxl};
+  }
+`
+
+const Image = styled(Img)`
+  bottom: 33vh;
+  left: ${gutter.default};
+  right: ${gutter.default};
+  top: ${gutter.default};
+
+  ${mq.tablet} {
+    bottom: 0;
+    left: 0;
+    right: auto;
+    top: 0;
+    width: ${offset};
+  }
+
+  ${mq.xxl} {
+    width: ${offsetXxl};
+  }
+`
+
+const Main = styled(`main`)`
+  background: #fff;
+  padding-top: ${gutter.default};
+  position: relative;
+  z-index: ${elevation.overlay};
+`
+
+const LogoLink = styled(`a`)`
+  height: ${rhythm(0.875)};
+  line-height: 1;
+  position: fixed;
+  top: ${gutter.tablet};
+  right: ${gutter.tablet};
+  width: ${rhythm(0.875)};
+
+  && {
+    background: transparent;
+  }
+
+  ${mq.tablet} {
+    bottom: ${gutter.tablet};
+    left: ${gutter.tablet};
+    top: auto;
+    z-index: ${elevation.overlay + 1};
+  }
+`
+
+const Logo = styled(`img`)`
+  display: inline-block;
+  height: 100%;
+  margin: 0;
+  vertical-align: middle;
+  width: 100%;
+`
+
+const Layout = ({ children, image, imageTitle, imageBackgroundColor }) => (
+  <Container>
+    {image && (
+      <Image
+        fluid={image}
+        style={{ position: `fixed` }}
+        backgroundColor={imageBackgroundColor ? imageBackgroundColor : false}
+        title={imageTitle}
+      />
+    )}
+    <Navigation />
+    <Main>
+      {children}
+      <h2>Documentation & related links</h2>
+      <ul>
+        <li>
+          See the
+          {` `}
+          <a href="https://www.gatsbyjs.org/packages/gatsby-image/">
+            <code>gatsby-image</code> project README
+          </a>
+          {` `} for documentation on using the plugin
+        </li>
+        <li>
+          Read the docs:
+          <br />
+          <a href="https://www.gatsbyjs.org/docs/using-gatsby-image/">
+            Using gatsby-image to prevent image bloat
+          </a>
+          <br />
+          <a href="https://www.gatsbyjs.org/packages/gatsby-plugin-sharp/">
+            Using fragments in gatsby-plugin-sharp
+          </a>
+        </li>
+        <li>
+          View the <code>gatsby-transformer-sharp</code> example at
+          {` `}
+          <a href="https://image-processing.gatsbyjs.org/">
+            <code>image-processing.gatsbyjs.org</code>
+          </a>
+        </li>
+      </ul>
+    </Main>
+    <LogoLink href="https://www.gatsbyjs.org/">
+      <Logo src={logo} alt="Gatsby" />
+    </LogoLink>
+  </Container>
 )
 
 export default Layout

src/components/link.js

+/** @jsx jsx */
+import React from "react"
+import { jsx } from "theme-ui"
+import { Link } from "gatsby"
+
+export default props => (
+  <Link
+    {...props}
+    activeClassName="active"
+    sx={{
+      color: "inherit",
+      "&.active": {
+        color: "primary",
+      },
+    }}
+  />
+)

src/pages/exemples/01-webpack-import.js

-import React from "react"
-import Layout from "../../components/layout"
-import Images from "../../images/securite.png"
-
-export default () => {
-    return (
-        <Layout>
-            <h1>webpack import</h1>
-       
-        <img src={Images} />
-        </Layout>
-    )
-}