docs(contentful): add traced SVG explanation to using-contentful exam…

…ple (#5859)
gatsbyjs · Jun 21, 2018 · aaace65 · aaace65
1 parent ffd8b2d
commit aaace65
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/examples/using-contentful/src/pages/image-api.js b/examples/using-contentful/src/pages/image-api.js
@@ -259,6 +259,43 @@ const ImageAPI = props => {
       }
     }
   }
+}`,
+          }}
+        />
+      </pre>
+      <h2>Traced SVG previews</h2>
+      <p>
+        You can show a traced SVG preview to your users. This works equivalent
+        to the responsive sizes feature except that you have to use the
+        GatsbyContentfulSizes_tracedSVG fragment
+      </p>
+      {assets.map(({ node: { title, traced } }) => (
+        <Img
+          key={traced.src}
+          alt={title}
+          sizes={traced}
+          style={{
+            marginRight: rhythm(1 / 2),
+            marginBottom: rhythm(1 / 2),
+            border: `1px solid tomato`,
+          }}
+        />
+      ))}
+      <h4>GraphQL query</h4>
+      <pre style={{ background: `#efeded`, padding: rhythm(3 / 4) }}>
+        <code
+          dangerouslySetInnerHTML={{
+            __html: `{
+  allContentfulAsset {
+    edges {
+      node {
+        title
+        sizes(maxWidth: 614) {
+          ...GatsbyContentfulSizes_tracedSVG
+        }
+      }
+    }
+  }
 }`,
           }}
         />
@@ -292,6 +329,9 @@ export const pageQuery = graphql`
           fluid(maxWidth: 613) {
             ...GatsbyContentfulFluid_noBase64
           }
+          traced: sizes(maxWidth: 614) {
+            ...GatsbyContentfulSizes_tracedSVG
+          }
         }
       }
     }