{"version":3,"sources":["webpack:///./src/components/facebook-follow.js","webpack:///./src/icons/icon-watch.js","webpack:///./src/icons/icon-calendar.js","webpack:///./src/icons/icon-lock.js","webpack:///./src/components/blog-form.js","webpack:///./src/pages/blog.js"],"names":["FacebookFollow","className","id","href","target","rel","IconWatch","height","xmlns","viewBox","d","IconCalendar","data-name","IconLock","mlns","Component","styled","div","BlogForm","React","useState","state","setState","handleChange","e","name","value","method","action","data-netlify","data-netlify-honeypot","onSubmit","preventDefault","data","form","fetch","headers","body","getAttribute","Object","keys","map","key","encodeURIComponent","join","then","navigate","catch","error","alert","type","aria-label","hidden","onChange","class","for","required","aria-hidden","to","BlogPage","posts","allMarkdownRemark","edges","title","description","filter","post","node","frontmatter","length","path","cover","fluid","childImageSharp","alt","timeToRead","date"],"mappings":"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","file":"component---src-pages-blog-js-71abe91e80e75e9c3586.js","sourcesContent":["import React from \"react\"\n\n\nconst FacebookFollow = () => (\n    <div className=\"section-highlight\">\n        <div className=\"cols-1 section\">\n            <h1>Stay updated.</h1>\n            <p>Follow me on Facebook and get notified whenever a new article is out.</p>\n            <div id=\"facebook-follow\">\n                <a href=\"https://www.facebook.com/nadzimwebdesign\" target=\"_blank\" rel=\"noopener noreferrer\">Go to <strong>Nadzim.com</strong> on Facebook</a>\n                <p className=\"small-text\"><em>Opens in a new tab.</em></p>\n            </div>\n        </div>\n    </div>\n)\n\nexport default FacebookFollow","import React from \"react\"\n\nconst IconWatch = () => (\n    <svg height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8A8,8,0,0,1,12,20ZM14.1,9.63l-1.1.64V7a1,1,0,0,0-2,0v5s0,0,0,.06a1.42,1.42,0,0,0,0,.2,1.27,1.27,0,0,0,.06.18s0,0,0,.06a1.56,1.56,0,0,0,.16.2h0a.92.92,0,0,0,.28.19l.08,0A1,1,0,0,0,12,13h0a1,1,0,0,0,.34-.07l.09,0,.07,0,2.6-1.5a1,1,0,0,0-1-1.74Z\"/></svg>\n)\n\nexport default IconWatch","import React from \"react\"\n\nconst IconCalendar = () => (\n    <svg height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\" data-name=\"Layer 1\" viewBox=\"0 0 24 24\"><path d=\"M12,19a1,1,0,1,0-1-1A1,1,0,0,0,12,19Zm5,0a1,1,0,1,0-1-1A1,1,0,0,0,17,19Zm0-4a1,1,0,1,0-1-1A1,1,0,0,0,17,15Zm-5,0a1,1,0,1,0-1-1A1,1,0,0,0,12,15ZM19,3H18V2a1,1,0,0,0-2,0V3H8V2A1,1,0,0,0,6,2V3H5A3,3,0,0,0,2,6V20a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V6A3,3,0,0,0,19,3Zm1,17a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V11H20ZM20,9H4V6A1,1,0,0,1,5,5H6V6A1,1,0,0,0,8,6V5h8V6a1,1,0,0,0,2,0V5h1a1,1,0,0,1,1,1ZM7,15a1,1,0,1,0-1-1A1,1,0,0,0,7,15Zm0,4a1,1,0,1,0-1-1A1,1,0,0,0,7,19Z\"/></svg>\n)\n\nexport default IconCalendar","import React from \"react\"\n\nconst IconLock = () => (\n    <svg height=\"100%\" mlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M17,9V7A5,5,0,0,0,7,7V9a3,3,0,0,0-3,3v7a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V12A3,3,0,0,0,17,9ZM9,7a3,3,0,0,1,6,0V9H9Zm9,12a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H17a1,1,0,0,1,1,1Z\"/></svg>\n)\n\nexport default IconLock","import React from \"react\"\nimport { Link } from \"gatsby\"\nimport { navigate } from \"gatsby-link\"\nimport styled from \"styled-components\"\nimport IconLock from \"../icons/icon-lock\"\n\nconst Component = styled.div`\n  padding: 3em 5%;  \n  h2 {\n      padding: 0 0 1em 0;\n  }\n  svg {\n    fill: $medium;\n  }\n  input, textarea {\n        font-size: 1.25rem;\n        padding: 10px;\n        border-radius: 5px;\n        margin: 0.5em auto 1em auto;\n        box-sizing: border-box;   \n        font-family: sans-serif;\n        width: 100%;\n    }\n    textarea {\n        height: 10em;\n        margin-bottom: 0;\n    }\n    .cta-text {\n        text-align: left;\n    }\n    ul {\n        margin: 0;\n    }\n`\n\n\nfunction encode(data) {\n    return Object.keys(data)\n        .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))\n        .join('&')\n}\n\nconst BlogForm = () => {\n    const [state, setState] = React.useState({})\n\n    const handleChange = (e) => {\n        setState({ ...state, [e.target.name]: e.target.value })\n    }\n\n    const handleSubmit = (e) => {\n        e.preventDefault()\n        const form = e.target\n        fetch('/', {\n            method: 'POST',\n            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },\n            body: encode({\n                'form-name': form.getAttribute('name'),\n                ...state,\n            }),\n        })\n            .then(() => navigate(form.getAttribute('action')))\n            .catch((error) => alert(error))\n    }\n\n    return (\n        <form\n            name=\"article-request\"\n            method=\"post\"\n            action=\"/thankyou/\"\n            data-netlify=\"true\"\n            data-netlify-honeypot=\"bot-field\"\n            onSubmit={handleSubmit}\n        >\n            <Component id=\"blog-form\">\n                {/* The `form-name` hidden field is required to support form submissions without JavaScript */}\n                <input type=\"hidden\" name=\"form-name\" value=\"contact\" aria-label=\"form-name\"/>\n                <p hidden>\n                    <label>\n                        Don’t fill this out: <input name=\"bot-field\" onChange={handleChange} aria-label=\"bot-field\"/>\n                    </label>\n                </p>\n                <div class=\"sub-cols-1-1\">\n                    <div>\n                        <label for=\"name\">\n                            Your name, please?\n                            <input type=\"text\" name=\"name\" onChange={handleChange} aria-label=\"name\" required/>\n                        </label>\n                    </div>\n                    <div>\n                        <label for=\"email\">\n                            Your email address.\n                            <input type=\"email\" name=\"email\" onChange={handleChange} aria-label=\"email\" required/>\n                        </label>\n                    </div>\n                </div>\n                <div>\n                    <label for=\"message\">\n                        What would you like to learn about?\n                        <textarea name=\"message\" onChange={handleChange} aria-label=\"message\" required/>\n                    </label>\n                </div>\n                <div class=\"cta-button\">\n                <button type=\"submit\" className=\"cta-button\">\n                    <span className=\"cta-circle\" aria-hidden=\"true\">\n                        <span className=\"icon arrow\"></span>\n                    </span>\n                    <span className=\"cta-text\">Send a Request</span>\n                </button>\n                </div>\n                <ul class=\"has-inline-svg\"><li><IconLock/><p className=\"small-text\">Your information will be protected and secured as per my <Link to=\"/privacy\">Privacy Policy</Link>.</p></li></ul>\n            </Component>\n        </form>\n    )\n}\n\nexport default BlogForm","import React from \"react\"\nimport { Link } from \"gatsby\"\nimport { graphql } from 'gatsby'\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\nimport Image from \"gatsby-image\"\nimport IconWatch from \"../icons/icon-watch\"\nimport IconCalendar from \"../icons/icon-calendar\"\nimport FacebookFollow from \"../components/facebook-follow\"\nimport BlogForm from \"../components/blog-form\"\n\n\nexport default function BlogPage({ data }) {\n  const { edges: posts } = data.allMarkdownRemark\n  return (\n    <Layout>\n      <SEO title=\"Blog\" description=\"Concise web design resources for businesses to make smart decisions for their brand's online strategy.\"/>\n      <div className=\"cols-1-1 blog-page-introduction\">\n          <div>\n            <h3 class=\"h3-on-h1\">Blog</h3>\n            <h1>Web Design Resources for Entrepreneurs and Business Owners.</h1>\n          </div>\n          <div>\n            <p>Be well-informed about essential web design concepts, ideas, and best practices. Here, you'll only find <strong>concise, jargon-free articles</strong> easily digested in your busy schedule. This blog's mission is to help you <strong>make smart decisions</strong> for your website and online strategy.</p>\n          </div>\n      </div>\n      <div className=\"blog-roll section\">\n        {posts\n          .filter(post => post.node.frontmatter.title.length > 0)\n          .map(({ node: post }) => {\n            return (\n              <div className=\"blog-card-wrapper\" key={post.id}>\n                <Link to={post.frontmatter.path}>\n                  <div className=\"blog-card\">\n                    <div>\n                    {post.frontmatter.cover && (\n                      <Image\n                        fluid={post.frontmatter.cover.childImageSharp.fluid}\n                        alt=\"Banner Image\"\n                      />\n                    )}\n                    </div>\n                    <div>\n                      <h3>{post.frontmatter.title}</h3>\n                      <ul className=\"has-inline-svg small-text\">\n                        <li>\n                          <IconWatch/>\n                          <p>{post.timeToRead} min. read</p>\n                        </li>\n                        <li>\n                          <IconCalendar/>\n                          <p>{post.frontmatter.date}</p>\n                        </li>\n                      </ul>\n                    </div>\n                  </div>\n                </Link> \n              </div>\n            )\n          })\n        }\n      </div>\n      <FacebookFollow/>\n      <div className=\"cols-1-1 section\">\n        <div>\n          <h1>Request an Article.</h1>\n          <p><strong>Don't see a topic you'd like to learn more about?</strong></p>\n          <p>You're in luck. I want to do my best to help entrepreneurs and business owners figure out the web design world.</p>\n          <p>Request for an article and I just might write one to help you out! You don't have to pay anything.</p>\n        </div>\n        <BlogForm/>\n      </div>\n    </Layout>\n  )\n}\n\nexport const pageQuery = graphql`\n  query IndexQuery {\n    allMarkdownRemark(sort: { order: DESC, fields: [frontmatter___date] }) {\n      edges {\n        node {\n          excerpt(pruneLength: 100)\n          id\n          timeToRead\n          frontmatter {\n            title\n            date(formatString: \"DD MMM 'YY\")\n            path\n            description\n            cover {\n              childImageSharp {\n                fluid (maxWidth: 376, quality: 100) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`"],"sourceRoot":""}