From a89d5ef08990d3ebe76051869cc22f3a5d36be4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= <benedikt@contentful.com>
Date: Fri, 1 Jun 2018 13:25:46 +0200
Subject: [PATCH] docs(contentful): add traced SVG explanation to
 using-contentful example

---
 .../using-contentful/src/pages/image-api.js   | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/examples/using-contentful/src/pages/image-api.js b/examples/using-contentful/src/pages/image-api.js
index 466bc57970f16..7b0cad28f7e9a 100644
--- a/examples/using-contentful/src/pages/image-api.js
+++ b/examples/using-contentful/src/pages/image-api.js
@@ -258,6 +258,43 @@ export default 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
+        }
+      }
+    }
+  }
 }`,
           }}
         />
@@ -289,6 +326,9 @@ export const pageQuery = graphql`
           sizes(maxWidth: 613) {
             ...GatsbyContentfulSizes_noBase64
           }
+          traced: sizes(maxWidth: 614) {
+            ...GatsbyContentfulSizes_tracedSVG
+          }
         }
       }
     }