{"version":3,"sources":["webpack:///./src/components/processSequence.js","webpack:///./src/templates/example.js"],"names":["ProcessSequence","props","grid","inputSrc","inputMessage","outputSrc","React","createElement","className","Link","to","fields","slug","Img","fluid","frontmatter","thumb","childImageSharp","src","alt","defaultProps","showLabels","ExampleTemplate","_ref","data","location","example","markdownRemark","siteTitle","site","siteMetadata","title","Layout","SEO","description","details","excerpt","source","anim","publicURL","href","printFile"],"mappings":"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","file":"component---src-templates-example-js-2acb8058cb65ecb41935.js","sourcesContent":["import React from 'react';\nimport { Link } from 'gatsby';\nimport PropTypes from 'prop-types';\nimport Img from 'gatsby-image';\n\nimport '../utils/normalize.css';\nimport '../utils/css/screen.css';\nimport 'react-slideshow-image/dist/styles.css';\n\nconst ProcessSequence = (props) => {\n  const {\n    grid,\n    inputSrc,\n    inputMessage,\n    outputSrc,\n  } = props;\n\n  // tempo\n  const showLabels = false;\n\n  return (\n    <div className=\"process-example row\">\n      { grid && (\n      <div className=\"col step\">\n        <div className=\"step-content arrow-right\">\n          { showLabels && (\n          <React.Fragment>\n            <span>\n              Template:\n              <br />\n              <strong>\n                {grid.frontmatter.title}\n                {' '}\n              </strong>\n              {' '}\n            </span>\n            <br />\n            <br />\n          </React.Fragment>\n          ) }\n          <Link to={grid.fields.slug}>\n            <Img fluid={grid.frontmatter.thumb.childImageSharp.fluid} />\n          </Link>\n          { showLabels && (\n            <React.Fragment>\n              <br />\n              <a href={grid.frontmatter.printFile.publicURL} className=\"button primary pill\">\n                print\n              </a>\n              <br />\n              <br />\n            </React.Fragment>\n          )}\n        </div>\n      </div>\n      )}\n      { inputSrc && (\n      <div className=\"col step\">\n        {/* { showLabels && <span><strong>Input</strong></span> } */}\n        <Img fluid={inputSrc.childImageSharp.fluid} className=\"step-content arrow-right\" />\n        {/* { showLabels && <span>Colored markers and pens.</span> } */}\n      </div>\n      )}\n      { inputMessage && (\n      <div className=\"col step\">\n        <div className=\"step-content arrow-right\">\n          <code>Settings</code>\n          <div className=\"chat-container\">\n            <div className=\"yours messages\">\n              <div className=\"message last\">\n                {inputMessage}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      )}\n      { outputSrc && (\n      <div className=\"col step\">\n        <img src={outputSrc} className=\"step-content arrow-right\" alt=\"output animation\" />\n      </div>\n      )}\n    </div>\n  );\n};\n\nProcessSequence.defaultProps = {\n  grid: null,\n  inputMessage: null,\n  showLabels: false,\n};\n\nProcessSequence.propTypes = {\n  grid: PropTypes.oneOfType([\n    PropTypes.object,\n  ]),\n  inputSrc: PropTypes.oneOfType([\n    PropTypes.object,\n  ]).isRequired,\n  inputMessage: PropTypes.string,\n  outputSrc: PropTypes.string.isRequired,\n  showLabels: PropTypes.boolean,\n};\n\nexport default ProcessSequence;\n","import React from 'react';\nimport { graphql, Link } from 'gatsby';\nimport Img from 'gatsby-image';\nimport ProcessSequence from '../components/processSequence';\n\nimport Layout from '../components/layout';\nimport SEO from '../components/seo';\n\n\nconst ExampleTemplate = ({ data, location }) => {\n  const example = data.markdownRemark.frontmatter;\n  const siteTitle = data.site.siteMetadata.title;\n\n  return (\n    <Layout location={location} title={siteTitle}>\n      <SEO\n        title={example.title}\n        description={example.details || data.markdownRemark.excerpt}\n      />\n      <article\n        className={`post-content example-container ${example.source || 'no-image'}`}\n      >\n        <header className=\"post-content-header\">\n          <h1 className=\"post-content-title\">{example.title}</h1>\n        </header>\n\n        <div className=\"row\">\n          <div className=\"col feature-container\">\n            <img src={example.anim.publicURL} className=\"example-output-gif\" alt=\"output animation\" />\n          </div>\n        </div>\n\n        {/*\n\n        {example.creditHandle && (\n          <p className=\"post-content-excerpt\">\n            By\n            {' '}\n            <strong>\n              <a href={example.creditLink}>\n                {example.creditHandle}\n              </a>\n            </strong>\n          </p>\n        )}\n\n        */}\n        {/*\n        {(example.grid || example.source || example.inputMessage) && (\n          <React.Fragment>\n            <br />\n            <hr />\n            <div className=\"recipe-container\">\n              <p className=\"post-content-excerpt\">\n                Ingredients\n              </p>\n              <ProcessSequence\n                grid={example.grid}\n                inputSrc={example.source}\n                inputMessage={example.inputMessage}\n                // outputSrc={example.anim.publicURL}\n                showLabels\n            />\n            </div>\n          </React.Fragment>\n        )}\n */}\n        <br />\n        <br />\n        <p className=\"post-content-excerpt\">\n          <strong>\n            &#8593;\n            <br />\n            Output\n            <br />\n          </strong>\n        </p>\n        <div className=\"example-details-container\">\n          { example.source && (\n            <div className=\"row\">\n              <div className=\"col\">\n                <Img fluid={example.source.childImageSharp.fluid} className=\"step-content\" />\n              </div>\n            </div>\n          ) }\n          { example.inputMessage && (\n            <div className=\"row\">\n              <div className=\"col\">\n                <div className=\"chat-container step-content\">\n                  <div className=\"yours messages\">\n                    <div className=\"message last\">\n                      {example.inputMessage}\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n          ) }\n\n          {/*\n          { example.anim && (\n            <div className=\"row\">\n              <div className=\"col\">\n                <img src={example.anim.publicURL} className=\"step-content\" alt=\"output animation\" />\n              </div>\n            </div>\n          ) }\n          */}\n          { example.grid && (\n            <div className=\"row\">\n              <div className=\"col\">\n                <Link to={`/templates${example.grid.fields.slug}`}>\n                  <Img fluid={example.grid.frontmatter.thumb.childImageSharp.fluid} className=\"step-content grid\" />\n                </Link>\n                <br />\n                <strong>{example.grid.frontmatter.title}</strong>\n                {' '}\n                &nbsp;\n                <a href={example.grid.frontmatter.printFile.publicURL} className=\"button primary pill\">\n                  print\n                </a>\n              </div>\n            </div>\n          ) }\n        </div>\n      </article>\n    </Layout>\n  );\n};\n\nexport default ExampleTemplate;\n\nexport const pageQuery = graphql`\n  query ExampleBySlug($slug: String!) {\n    site {\n      siteMetadata {\n        title\n        author\n      }\n    }\n    markdownRemark(fields: { slug: { eq: $slug } }) {\n      id\n      excerpt(pruneLength: 160)\n      html\n      frontmatter {\n        title\n        date(formatString: \"MMMM DD, YYYY\")\n        details\n        creditHandle\n        creditLink\n        inputMessage\n        anim {\n          id\n          publicURL\n          name\n        }\n        grid {\n          fields {\n            slug\n          }\n          frontmatter {\n            title\n            printFile {\n              id\n              publicURL\n              name\n            }\n            thumb {\n              childImageSharp {\n                fluid(maxWidth: 420) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n        }\n        source {\n          childImageSharp {\n            fluid(maxWidth: 720) {\n              ...GatsbyImageSharpFluid\n            }\n          }\n        }\n      }\n    }\n  }\n`;\n"],"sourceRoot":""}