component---src-pages-index-js-02367fb18b159e90a6da.js.map

{"version":3,"sources":["webpack:///./src/pages/index.js","webpack:///./src/utils/createOgUrl.js","webpack:///./src/components/ButtonLink/index.js","webpack:///./src/components/ButtonLink/ButtonLink.js"],"names":["Home","render","_ref","_ref2","_ref3","_ref4","_ref5","_ref6","_this$props","this","props","data","location","marketing","Glamor","createElement","components_Layout__WEBPACK_IMPORTED_MODULE_7__","components_TitleAndMetaTags__WEBPACK_IMPORTED_MODULE_6__","title","ogUrl","createOgUrl","css","width","backgroundColor","colors","dark","color","white","paddingTop","paddingBottom","media","greaterThan","position","components_Container__WEBPACK_IMPORTED_MODULE_2__","brand","textAlign","margin","fontSize","letterSpacing","size","fontWeight","maxWidth","marginLeft","marginRight","components_Flex__WEBPACK_IMPORTED_MODULE_3__","valign","CtaItem","components_ButtonLink__WEBPACK_IMPORTED_MODULE_1__","to","type","sharedStyles","markdown","sectionStyles","lessThan","marginTop","marginBottom","overflowX","WebkitOverflowScrolling","maskImage","display","flexDirection","whiteSpace","edges","map","_ref7","index","_firstOfType","_ref8","_","column","node","key","flex","&:first-of-type","verticalAlign","headingStyles","&&","subtle","frontmatter","dangerouslySetInnerHTML","__html","html","style","src","height","frameborder","allow","allowfullscreen","border","borderBottom","divider","background","justifyContent","Component","propTypes","PropTypes","shape","examples","object","isRequired","_ref9","_nthChild","_ref10","children","primary","between","paddingLeft","paddingRight","pageQuery","_sectionStyles","__webpack_exports__","slug","urlRoot","replace","_ButtonLink__WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","ButtonLink","ArrowSvg","_ref$cssProps","cssProps","xmlns","viewBox","d","fill","_style","primaryStyle","_primaryStyle","black","padding","transition","secondaryStyle",":hover","typeStyle","rest","_babel_runtime_helpers_objectWithoutPropertiesLoose__WEBPACK_IMPORTED_MODULE_1___default","gatsby__WEBPACK_IMPORTED_MODULE_2__","Object","assign"],"mappings":"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","file":"component---src-pages-index-js-02367fb18b159e90a6da.js","sourcesContent":["import ButtonLink from 'components/ButtonLink';\nimport Container from 'components/Container';\nimport Flex from 'components/Flex';\n// import CodeExample from 'components/CodeExample';\nimport PropTypes from 'prop-types';\nimport React, {Component} from 'react';\nimport {graphql} from 'gatsby';\nimport TitleAndMetaTags from 'components/TitleAndMetaTags';\nimport Layout from 'components/Layout';\nimport {colors, media, sharedStyles} from 'theme';\nimport createOgUrl from 'utils/createOgUrl';\n// Needs to be white & SVG\n// import logoWhiteSvg from 'icons/packem-logo.png';\n\nclass Home extends Component {\n\n  render() {\n    const {data, location} = this.props;\n    const {marketing} = data;\n\n    // const code = codeExamples.edges.reduce((lookup, {node}) => {\n    //   lookup[node.mdAbsolutePath] = node;\n    //   return lookup;\n    // }, {});\n\n    return (\n      <Layout location={location}>\n        <TitleAndMetaTags\n          title=\"Packem &ndash; A precompiled JavaScript module bundler\"\n          ogUrl={createOgUrl('index.html')}\n        />\n        <div css={{width: '100%'}}>\n          <header\n            css={{\n              backgroundColor: colors.dark,\n              color: colors.white,\n            }}>\n            <div\n              css={{\n                paddingTop: 45,\n                paddingBottom: 20,\n\n                [media.greaterThan('small')]: {\n                  paddingTop: 60,\n                  paddingBottom: 70,\n                },\n\n                // Large React logo that appears in the main header\n                // [media.greaterThan('xlarge')]: {\n                //   paddingTop: 95,\n                //   paddingBottom: 85,\n                //   maxWidth: 1500, // Positioning of background logo\n                //   marginLeft: 'auto',\n                //   marginRight: 'auto',\n                //   position: 'relative',\n                //   '::before': {\n                //     content: ' ',\n                //     position: 'absolute',\n                //     top: 0,\n                //     left: 0,\n                //     bottom: 0,\n                //     right: 0,\n                //     backgroundImage: `url(${logoWhiteSvg})`,\n                //     backgroundRepeat: 'no-repeat',\n                //     backgroundPosition: '100% 100px',\n                //     backgroundSize: '50% auto',\n                //     opacity: 0.05,\n                //   },\n                // },\n              }}>\n              <div\n                css={{\n                  // Content should be above absolutely-positioned hero image\n                  position: 'relative',\n                }}>\n                <Container>\n                  <h1\n                    css={{\n                      color: colors.brand,\n                      textAlign: 'center',\n                      margin: 0,\n                      fontSize: 45,\n                      letterSpacing: '0.01em',\n                      [media.size('xsmall')]: {\n                        fontSize: 30,\n                      },\n                      [media.greaterThan('xlarge')]: {\n                        fontSize: 60,\n                      },\n                    }}>\n                    Packem\n                  </h1>\n                  <p\n                    css={{\n                      paddingTop: 15,\n                      textAlign: 'center',\n                      fontSize: 24,\n                      letterSpacing: '0.01em',\n                      fontWeight: 200,\n\n                      [media.size('xsmall')]: {\n                        fontSize: 16,\n                        maxWidth: '12em',\n                        marginLeft: 'auto',\n                        marginRight: 'auto',\n                      },\n\n                      [media.greaterThan('xlarge')]: {\n                        paddingTop: 20,\n                        fontSize: 30,\n                      },\n                    }}>\n                    A precompiled JavaScript module bundler\n                  </p>\n                  <Flex\n                    valign=\"center\"\n                    css={{\n                      paddingTop: 40,\n\n                      [media.greaterThan('xlarge')]: {\n                        paddingTop: 65,\n                      },\n                    }}>\n                    <CtaItem>\n                      <ButtonLink\n                        to=\"/docs/getting-started.html\"\n                        type=\"primary\">\n                        Get Started\n                      </ButtonLink>\n                    </CtaItem>\n                    <CtaItem>\n                      {/* Update link */}\n                      <ButtonLink to=\"/docs/execution-contexts.html\" type=\"secondary\">\n                        Advanced Guide\n                      </ButtonLink>\n                    </CtaItem>\n                  </Flex>\n                </Container>\n              </div>\n            </div>\n          </header>\n\n          <Container>\n            <div css={sharedStyles.markdown}>\n              <section\n                css={[\n                  sectionStyles,\n                  {\n                    [media.lessThan('medium')]: {\n                      marginTop: 0,\n                      marginBottom: 0,\n                      overflowX: 'auto',\n                      paddingTop: 30,\n                      WebkitOverflowScrolling: 'touch',\n                      position: 'relative',\n                      maskImage:\n                        'linear-gradient(to right, transparent, white 10px, white 90%, transparent)',\n                    },\n                  },\n                ]}>\n                <div\n                  css={{\n                    display: 'flex',\n                    flexDirection: 'row',\n\n                    [media.lessThan('medium')]: {\n                      display: 'block',\n                      whiteSpace: 'nowrap',\n                    },\n                  }}>\n                  {marketing.edges.map(({node: column}, index) => (\n                    <div\n                      key={index}\n                      css={{\n                        display: 'flex',\n                        flexDirection: 'column',\n                        flex: '0 1 33%',\n                        marginLeft: 40,\n\n                        '&:first-of-type': {\n                          marginLeft: 0,\n\n                          [media.lessThan('medium')]: {\n                            marginLeft: 10,\n                          },\n                        },\n\n                        [media.lessThan('medium')]: {\n                          display: 'inline-block',\n                          verticalAlign: 'top',\n                          marginLeft: 0,\n                          whiteSpace: 'normal',\n                          width: '75%',\n                          marginRight: 20,\n                          paddingBottom: 40,\n\n                          '&:first-of-type': {\n                            marginTop: 0,\n                          },\n                        },\n                      }}>\n                      <h3\n                        css={[\n                          headingStyles,\n                          {\n                            '&&': {\n                              // Make specificity higher than the site-wide h3 styles.\n                              color: colors.subtle,\n                              paddingTop: 0,\n                              fontWeight: 300,\n                              fontSize: 20,\n\n                              [media.greaterThan('xlarge')]: {\n                                fontSize: 24,\n                              },\n                            },\n                          },\n                        ]}>\n                        {column.frontmatter.title}\n                      </h3>\n                      <div dangerouslySetInnerHTML={{__html: column.html}} />\n                    </div>\n                  ))}\n                </div>\n              </section>\n\n              {/* _PERF_COMPARISONS_SECTION_ */}\n              <section>\n                <h3 style={{textAlign: \"center\"}}>Parcel (v1.12.3) vs Packem (pre-alpha)</h3>\n                <br />\n                <iframe src=\"https://player.vimeo.com/video/327818295\" width=\"100%\" height=\"350\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen></iframe>\n              </section>\n\n              <hr\n                css={{\n                  height: 1,\n                  marginBottom: -1,\n                  border: 'none',\n                  borderBottom: `1 solid ${colors.divider}`,\n                }}\n              />\n              <section css={sectionStyles}>\n\n              {/* Don't query `allExampleCode`. This section ought to be replaced. */}\n\n                {/* <div id=\"examples\">\n                  {examples.edges.map(({node}, index) => {\n                    const snippet = code[node.fileAbsolutePath];\n                    return (\n                      <CodeExample\n                        key={index}\n                        id={snippet.id}\n                        code={snippet.code}\n                        containerNodeID={node.frontmatter.domid}\n                        loaded={babelLoaded}>\n                        <h3 css={headingStyles}>{node.frontmatter.title}</h3>\n                        <div dangerouslySetInnerHTML={{__html: node.html}} />\n                      </CodeExample>\n                    );\n                  })}\n                </div> */}\n              </section>\n            </div>\n          </Container>\n\n          <section\n            css={{\n              background: colors.dark,\n              color: colors.white,\n              paddingTop: 45,\n              paddingBottom: 45,\n            }}>\n            <Container>\n              <Flex valign=\"center\" style={{justifyContent: 'center'}}>\n                {/* <CtaItem> */}\n                  <ButtonLink to=\"/docs/getting-started.html\" type=\"primary\">\n                    Get Started\n                  </ButtonLink>\n                {/* </CtaItem> */}\n                {/* <CtaItem>\n                  <ButtonLink to=\"/tutorial/tutorial.html\" type=\"secondary\">\n                    Take the Tutorial\n                  </ButtonLink>\n                </CtaItem> */}\n              </Flex>\n            </Container>\n          </section>\n        </div>\n      </Layout>\n    );\n  }\n}\n\nHome.propTypes = {\n  data: PropTypes.shape({\n    examples: PropTypes.object.isRequired,\n    marketing: PropTypes.object.isRequired,\n  }).isRequired,\n};\n\nconst CtaItem = ({children, primary = false}) => (\n  <div\n    css={{\n      width: '50%',\n\n      [media.between('small', 'large')]: {\n        paddingLeft: 20,\n      },\n\n      [media.greaterThan('xlarge')]: {\n        paddingLeft: 40,\n      },\n\n      '&:first-child': {\n        textAlign: 'right',\n        paddingRight: 15,\n      },\n\n      '&:nth-child(2)': {\n        [media.greaterThan('small')]: {\n          paddingLeft: 15,\n        },\n      },\n    }}>\n    {children}\n  </div>\n);\n\n/**\n * Missing? (3rd)\n * \n *     codeExamples: allExampleCode {\n      edges {\n        node {\n          id\n          code\n          mdAbsolutePath\n        }\n      }\n    }\n */\nexport const pageQuery = graphql`\n  query IndexMarkdown {\n    examples: allMarkdownRemark(\n      filter: {fileAbsolutePath: {regex: \"//home/examples//\"}}\n      sort: {fields: [frontmatter___order], order: ASC}\n    ) {\n      edges {\n        node {\n          fileAbsolutePath\n          fields {\n            slug\n          }\n          frontmatter {\n            title\n            domid\n          }\n          html\n        }\n      }\n    }\n    marketing: allMarkdownRemark(\n      filter: {fileAbsolutePath: {regex: \"//home/marketing//\"}}\n      sort: {fields: [frontmatter___order], order: ASC}\n    ) {\n      edges {\n        node {\n          frontmatter {\n            title\n          }\n          html\n        }\n      }\n    }\n  }\n`;\n\nexport default Home;\n\nconst sectionStyles = {\n  marginTop: 20,\n  marginBottom: 15,\n\n  [media.greaterThan('medium')]: {\n    marginTop: 60,\n    marginBottom: 65,\n  },\n};\n\nconst headingStyles = {\n  '&&': {\n    marginBottom: 20,\n  },\n};\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * @emails react-core\n * @flow\n */\n\nimport {urlRoot} from 'site-constants';\n\nexport default (slug: string): string | null =>\n  slug == null ? null : `${urlRoot}/${slug.replace(/^\\//, '')}`;\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * @emails react-core\n */\n\nimport ButtonLink from './ButtonLink';\n\nexport default ButtonLink;\n","/**\n * Copyright (c) 2013-present, Facebook, Inc.\n *\n * @emails react-core\n */\n\nimport {Link} from 'gatsby';\nimport React from 'react';\nimport {colors, media} from 'theme';\n\nconst ArrowSvg = ({cssProps = {}}) => (\n  <svg\n    css={cssProps}\n    height=\"12\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 4.53657 8.69699\">\n    <path\n      d={`\n        M.18254,8.697a.18149.18149,0,0,1-.12886-.31034L4.09723,4.34126.05369.29954a.18149.18149,\n        0,0,1,.2559-.2559L4.4838,4.21785a.18149.18149,0,0,1,0,.2559L.30958,8.648A.18149.18149,\n        0,0,1,.18254,8.697Z\n      `}\n      fill=\"currentColor\"\n    />\n  </svg>\n);\n\nconst ButtonLink = ({children, type, ...rest}) => {\n  let typeStyle;\n  switch (type) {\n    case 'primary':\n      typeStyle = primaryStyle;\n      break;\n    case 'secondary':\n      typeStyle = secondaryStyle;\n      break;\n  }\n\n  return (\n    <Link {...rest} css={[style, typeStyle]}>\n      {children}\n      {type === 'secondary' && <ArrowSvg cssProps={{marginLeft: 10}} />}\n    </Link>\n  );\n};\n\nconst style = {\n  display: 'inline-block',\n  fontSize: 16,\n\n  [media.greaterThan('xlarge')]: {\n    fontSize: 20,\n  },\n};\n\nconst primaryStyle = {\n  backgroundColor: colors.brand,\n  color: colors.black,\n  padding: '10px 25px',\n  whiteSpace: 'nowrap',\n  transition: 'background-color 0.2s ease-out',\n\n  [media.greaterThan('xlarge')]: {\n    paddingTop: 15,\n    paddingBottom: 15,\n  },\n\n  ':hover': {\n    backgroundColor: colors.white,\n  },\n};\n\nconst secondaryStyle = {\n  color: colors.brand,\n  transition: 'color 0.2s ease-out',\n\n  ':hover': {\n    color: colors.white,\n  },\n};\n\nexport default ButtonLink;\n"],"sourceRoot":""}