{"version":3,"sources":["webpack:///./src/components/ads/Ad.js","webpack:///./src/data/index.js","webpack:///./src/components/InstagramGallery.js","webpack:///./src/pages/index.js"],"names":["Ad","style","as","flexDirection","py","dangerouslySetInnerHTML","__html","categories","name","route","image","state","photos","componentDidMount","a","fetch","this","props","userId","photoCount","response","json","data","user","edge_owner_to_timeline_media","edges","map","node","id","caption","edge_media_to_caption","text","thumbnail","thumbnail_resources","find","config_width","thumbnailWidth","src","width","height","config_height","url","shortcode","setState","console","error","render","title","href","target","rel","gap","columns","mt","length","key","className","lineHeight","alt","sx","objectFit","pt","pb","textAlign","fontSize","fontWeight","Component","pageQuery","BlogIndex","location","siteTitle","site","siteMetadata","posts","allMarkdownRemark","miscPosts","filter","frontmatter","category","to","Grid","idx"],"mappings":"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","file":"component---src-pages-index-js-6ab0222c3b2152c4b614.js","sourcesContent":["import React from \"react\";\nimport { Flex } from \"rebass\"\n\nconst Ad = ({style}) => {\n    const insertAd = () => {\n        return {__html: \n        `\n            <script async src=\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js\"></script>\n            <!-- Display Ads -->\n            <ins class=\"adsbygoogle\"\n            style=\"display:block\"\n            data-ad-client=\"ca-pub-4651068788999536\"\n            data-ad-slot=\"7007239478\"\n            data-ad-format=\"auto\"\n            data-full-width-responsive=\"true\"></ins>\n            <script>\n            (adsbygoogle = window.adsbygoogle || []).push({});\n            </script>\n        `}\n    }\n    return (\n        <Flex as=\"section\" flexDirection={'column'} py={'20px'}>\n        <div style={style} dangerouslySetInnerHTML={insertAd()}>\n        </div>\n        </Flex>\n        );\n}\n\nexport default Ad\n","const categories = [\n    {\n        name: 'Recipes',\n        route: 'recipes',\n        image: 'https://res.cloudinary.com/yabuko/image/upload/v1587923802/posts/IMG_8686_tef2rg.jpg'\n    },\n    {\n        name: 'How To',\n        route: 'how-to',\n        image: 'https://res.cloudinary.com/yabuko/image/upload/v1588012209/posts/20200426_160120_2_y4opkw.jpg'\n    },\n    {\n        name: 'Places',\n        route: 'places',\n        image: 'https://res.cloudinary.com/yabuko/image/upload/v1590350826/website/IMG_1361_cf9cpd.jpg'\n    }\n] \n\nexport default categories","import React, { Component } from \"react\";\nimport { Image, Flex, Text } from \"rebass\"\nimport { SectionTitle } from \"@sections\"\nimport { Grid } from \"@extend\"\n\nexport default class extends Component {\n  state = { photos: [] };\n\n  async componentDidMount() {\n    try {\n      const response = await fetch(\n        `https://www.instagram.com/graphql/query?query_id=17888483320059182&variables={\"id\":\"${\n          this.props.userId\n        }\",\"first\":${this.props.photoCount},\"after\":null}`\n      );\n      const { data } = await response.json();\n      const photos = data.user.edge_owner_to_timeline_media.edges.map(\n        ({ node }) => {\n          const { id } = node;\n          const caption = node.edge_media_to_caption.edges[0].node.text;\n          const thumbnail = node.thumbnail_resources.find(\n            thumbnail => thumbnail.config_width === this.props.thumbnailWidth\n          );\n          const { src, config_width: width, config_height: height } = thumbnail;\n          const url = `https://www.instagram.com/p/${node.shortcode}`;\n          return {\n            id,\n            caption,\n            src,\n            width,\n            height,\n            url\n          };\n        }\n      );\n      this.setState({ photos });\n    } catch (error) {\n      console.error(error);\n    }\n  }\n\n  render() {\n    return (\n    <Flex as=\"section\" flexDirection={'column'}>\n    <SectionTitle title={\"follow us\"}>\n        <a href=\"https://www.instagram.com/kaja.eliza/\"                \n        target=\"_blank\"\n        rel=\"noopener noreferrer\">@kaja.eliza</a>\n    </SectionTitle>\n    <Grid gap={[4, 1, 0]} columns={[4, 1, 4]} mt={3}>\n        {   this.state.photos.length > 0 ? this.state.photos.map(({ src, url, id, caption }) => {\n                return (\n                    <a\n                    key={id}\n                    className={'instagram-item'}\n                    href={url}\n                    style={{lineHeight: 0}}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    // aria-label=\"\"\n                    >\n                        <Image\n                        alt={caption}\n                        src={src}\n                        width={['100vw', 'calc(100vw / 4)']}\n                        height={'auto'} //auto\n                        sx={{ objectFit: 'cover' }}\n                        />\n                    </a>\n                )\n            })\n            :\n            null\n        }\n    </Grid>\n    <Text as=\"span\" className=\"instagram-link uppercase\" pt={25} pb={20} textAlign={'center'} fontSize={25} fontWeight={'800'}><a href=\"https://www.instagram.com/explore/tags/wearefoodmakers\" target=\"_blank\" rel=\"noopener noreferrer\">#wearefoodmakers</a></Text>\n    </Flex>\n    );\n  }\n}\n","import React from \"react\"\nimport { graphql } from \"gatsby\"\nimport { Layout, SEO, CategoryItem, Misc } from \"@components\"\nimport { SectionTitle } from \"@sections\"\nimport Grid from \"../components/extend/Grid\"\nimport categories from \"../data/index\"\nimport InstagramGallery from \"../components/InstagramGallery\"\nimport Ad from \"../components/ads/Ad\"\n\nconst BlogIndex = ({ data, location }) => {\n  const siteTitle = data.site.siteMetadata.title\n  const posts = data.allMarkdownRemark.edges\n  const miscPosts = posts.filter(({node}) => node.frontmatter.category === 'misc')\n  \n  return (\n    <Layout location={location} title={siteTitle} posts={posts}>\n      <SEO title=\"We Are Food Makers\"/>\n      <SectionTitle title={\"Explore\"} to='categories'/>\n      <Grid py={2} gap={1} columns={[3, 1, 1]}>\n        {\n          categories ? \n          categories.map((category, idx) => {\n            return (\n              <CategoryItem key={idx} category={category}/>\n            )\n          })\n          : null\n        }        \n      </Grid>\n      <Misc miscPosts={miscPosts}></Misc>\n      <Ad style={{height: '150px'}}></Ad>\n      <InstagramGallery\n        userId={'3128455129'}\n        thumbnailWidth={640}\n        photoCount={8}\n      />      \n    </Layout>\n  )\n}\n\nexport default BlogIndex\n\nexport const pageQuery = graphql`\n  query {\n    site {\n      siteMetadata {\n        title\n      }\n    }    \n    allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }, filter: {fileAbsolutePath: {regex: \"/index/\"}}) {\n      edges {\n        node {\n          id\n          excerpt\n          fields {\n            slug\n          }\n          frontmatter {\n            date(formatString: \"MMMM DD, YYYY\")\n            title\n            author\n            category\n            image\n          }\n        }\n      }\n    }\n  }\n`"],"sourceRoot":""}