{"componentChunkName":"component---src-templates-blog-post-list-template-tsx","path":"/blog","result":{"data":{"posts":{"nodes":[{"childMarkdownRemark":{"id":"f6ce6dc5-ebe6-50f7-8914-66db0b6a6b53","frontmatter":{"id":9,"title":"A Better Gatsby + Typescript Setup","path":"/better-gatsby-typescript-setup","subtitle":"A guide to writing your gatsby config files in typescript and auto-generate interfaces from your graphql queries","date":"July 2020","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M160%2021v21h-8c-8%200-9%200-9%202s1%202%2018%202c43%200%2041%200%2042-2s0-2-6-2c-6-1-7-1-9-3-2-3-9-3-12%201-1%202-2%202-7%202h-6V21l-1-21c-2%200-2%203-2%2021m189-1c-1%202-4%202-15%204l-9%202%2012-1%209-1-4%207-5%206h-42a487%20487%200%2001-50-1c-13%200-14%201-11%204%202%203%202%203%200%203-3%201-3%203%200%203%202%200%202%201%202%206v6h-10l-17%202h-7v5c0%205%200%205%202%205a3953%203953%200%200095-6c12%200%2017-3%2017-8%200-3%200-3-6-2a2010%202010%200%2001-67%204h-6v-6c0-5%200-6%202-6s2%201%202%205v6l1-5%201-5h99v29c0%2025%201%2030%202%2029l1-6%201-5%201%204%201%205%204-4%206-6c1-1%202-3%202-24V46h8l9%201-4%201h-4v14h20v-7c0-7%200-7-2-7l-3-1%207-1%206%201-2%201c-3%200-3%200-3%207v7h8V51c0-8%200-10-1-9h-3c-2-2-1-3%202-3l2-1-18-1h-18l-3-5c-4-6-5-8-2-6l2%201-1-1%201-1c1-1%201-1-2-1-2-1-5-2-6-4-2-3-3-3-4%200M0%2070l1%206c2%202%202%203%201%203l-2%202%202%201%202%201-2%201c-1%200-2%201-2%203v2h111v27h-8c-29%203-31%203-31%206%200%202%200%202%204%201a4996%204996%200%200164-8c0-2%200-2-5-1l-14%201-9%201v-14c0-12%200-13%202-13%203%200%202-1-1-4l-2-2%202-1c3%200%204-1%202-3H9l-3-5c-6-8-6-8-6-4m213%2015c0%2012%200%2013%202%2013l2-1%208-6%208-5%208%205c11%207%2011%207-7%207s-16-1-16%206l-3%202c-2%200-2%200-2%2020%200%2018%200%2021%202%2025%202%205%202%205%206%205%203-1%204-1%204%201-1%201%201%202%202%200h1l4%201%204%202%202%201%204-1%203%201%201%201h1c0%201%201%202%203%202h2v-22h-15v-10h40v10h-14v16l1%2012c0-3%200-4%201-3h2l6%201%203%202%202%201h1l5-1c4-2%205-2%205-1%205%207%2017%206%2016%200%200-2-2-3-8-7-11-5-13-8-14-15%200-11%205-15%2017-15l7%201v-20h18v-3c0-3%200-4%202-4s2-1%202-4%200-4-2-4-2-1-2-13%200-13-2-13l-2%201-8%206-8%205-3-2-8-5c-3-1-5-3-5-4l-2-1-2%201-8%206-8%205-3-2-8-5c-3-1-5-3-5-4l-2-1-2%201-8%206-8%205-8-5-8-6-2-1c-2%200-2%201-2%2013m4%200l1%208%2013-8-13-8-1%208m25-4l-6%204%2013%208V77l-7%204m11%204v8c2%200%2013-7%2013-8l-7-5-6-3v8m25-4l-6%204%2013%208V77l-7%204m11%204v8l13-8-3-2-6-4-4-2v8m25-4l-6%204c0%201%2011%208%2013%208v-8c0-9%200-9-7-4m-53%2010c-11%207-11%207%208%207l16-1-16-11-8%205m36%200c-11%207-11%207%208%207l16-1-16-11-8%205M63%20133c-24%204-45%2017-58%2037l-5%207v90h67l-6-6c-7-8-10-14-14-23-2-7-4-20-2-20l25%2025%2025%2024h15l-32-33-32-33c0-7%2010-24%2019-33%2025-23%2062-24%2088-3%206%205%2011%2012%2010%2013l-4%204-4%203-6-6a54%2054%200%2000-73-4c-5%204-13%2015-15%2020l-1%203%2034%2034c22%2022%2034%2034%2036%2034%207%200%2023-15%2029-27%205-11%205-10-11-11h-14v-12h21l22%201-1%205c0%2013-7%2028-17%2039l-6%206h42v-4c-1-8%200-14%201-12%201%201%201%201%201-1l-1-2-2-20c0-29-1-35-9-50a85%2085%200%2000-55-44c-6-2-57-3-67-1m308%206v3h29v-7h-29v4m-76%204c-3%203-2%206%207%2010l5%202v-5l-1-5-4-2c-3-2-5-3-7%200m91%2025v18h7v-37h-7v19m11%200c0%2015%200%2018%202%2018l1-18-1-19c-2%200-2%203-2%2019m-68%2033l-1%209-1%204v3h25v-12c0-11%200-11-1-5v7h-21v-5l1-5v-4c-2-1-2%200-2%208m57-6l-1%2019v16h8v-37h-3c-3%200-4%200-4%202m11%2017c0%2015%200%2018%202%2018l1-18-1-19c-2%200-2%203-2%2019m-142-9h-8v9a2272%202272%200%20003%2010h1l2%201%202-1%201-1%201%202v1l2%201h5l2%202%202%204c-1%201-14%203-24%203l-3%201-1%2011%201%2011h2l1-1v1l1%201h4l1-1v1l1%201h1l3%201%209%202%201-1h1l1%201%201%202c2%202%202-46%200-50l-2-3h41v-9h-22l-30%201m80%2020v24l1-1c1-2%203-2%208-2h8v-22h-8l-9%201m-31%202l-5%201c-2%200-2%201-2%209v9h27v-21h-8l-12%202m-101%2010l-1%2016v16h5v-16c0-14-1-17-2-17l-2%201m182%208c0%207%200%207-1%202%200-5-1-8-3-8v3h-2v-1h-2l-1%202-1%2014v12h25v-15l-1-16c-2%200-2%202-2%2013v13l-1-13c0-12-1-17-2-6%200%208-1%208-1%200v-7h-8v7m-34%206v3h-1c-2-2-2-2-3-1l-2%202h3l2%201c1%201%200%201-9%201-8%200-13-1-5-1%202%200%203-1%202-2h-3l-2%201c-2%200-3%200-2%201l-1%201c-2%200-2%201-2%206v6h24v-20l-1%202'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/d4a407c3e93e46cb1be195c136eceb64/fa1ef/gatsby-with-typescript.png","srcSet":"/static/d4a407c3e93e46cb1be195c136eceb64/fa1ef/gatsby-with-typescript.png 1x,\n/static/d4a407c3e93e46cb1be195c136eceb64/e2210/gatsby-with-typescript.png 1.5x,\n/static/d4a407c3e93e46cb1be195c136eceb64/f143e/gatsby-with-typescript.png 2x","srcWebp":"/static/d4a407c3e93e46cb1be195c136eceb64/a0a74/gatsby-with-typescript.webp","srcSetWebp":"/static/d4a407c3e93e46cb1be195c136eceb64/a0a74/gatsby-with-typescript.webp 1x,\n/static/d4a407c3e93e46cb1be195c136eceb64/3742a/gatsby-with-typescript.webp 1.5x,\n/static/d4a407c3e93e46cb1be195c136eceb64/4ed47/gatsby-with-typescript.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M160%2021v21h-8c-8%200-9%200-9%202s1%202%2018%202c43%200%2041%200%2042-2s0-2-6-2c-6-1-7-1-9-3-2-3-9-3-12%201-1%202-2%202-7%202h-6V21l-1-21c-2%200-2%203-2%2021m189-1c-1%202-4%202-15%204l-9%202%2012-1%209-1-4%207-5%206h-42a487%20487%200%2001-50-1c-13%200-14%201-11%204%202%203%202%203%200%203-3%201-3%203%200%203%202%200%202%201%202%206v6h-10l-17%202h-7v5c0%205%200%205%202%205a3953%203953%200%200095-6c12%200%2017-3%2017-8%200-3%200-3-6-2a2010%202010%200%2001-67%204h-6v-6c0-5%200-6%202-6s2%201%202%205v6l1-5%201-5h99v29c0%2025%201%2030%202%2029l1-6%201-5%201%204%201%205%204-4%206-6c1-1%202-3%202-24V46h8l9%201-4%201h-4v14h20v-7c0-7%200-7-2-7l-3-1%207-1%206%201-2%201c-3%200-3%200-3%207v7h8V51c0-8%200-10-1-9h-3c-2-2-1-3%202-3l2-1-18-1h-18l-3-5c-4-6-5-8-2-6l2%201-1-1%201-1c1-1%201-1-2-1-2-1-5-2-6-4-2-3-3-3-4%200M0%2070l1%206c2%202%202%203%201%203l-2%202%202%201%202%201-2%201c-1%200-2%201-2%203v2h111v27h-8c-29%203-31%203-31%206%200%202%200%202%204%201a4996%204996%200%200164-8c0-2%200-2-5-1l-14%201-9%201v-14c0-12%200-13%202-13%203%200%202-1-1-4l-2-2%202-1c3%200%204-1%202-3H9l-3-5c-6-8-6-8-6-4m213%2015c0%2012%200%2013%202%2013l2-1%208-6%208-5%208%205c11%207%2011%207-7%207s-16-1-16%206l-3%202c-2%200-2%200-2%2020%200%2018%200%2021%202%2025%202%205%202%205%206%205%203-1%204-1%204%201-1%201%201%202%202%200h1l4%201%204%202%202%201%204-1%203%201%201%201h1c0%201%201%202%203%202h2v-22h-15v-10h40v10h-14v16l1%2012c0-3%200-4%201-3h2l6%201%203%202%202%201h1l5-1c4-2%205-2%205-1%205%207%2017%206%2016%200%200-2-2-3-8-7-11-5-13-8-14-15%200-11%205-15%2017-15l7%201v-20h18v-3c0-3%200-4%202-4s2-1%202-4%200-4-2-4-2-1-2-13%200-13-2-13l-2%201-8%206-8%205-3-2-8-5c-3-1-5-3-5-4l-2-1-2%201-8%206-8%205-3-2-8-5c-3-1-5-3-5-4l-2-1-2%201-8%206-8%205-8-5-8-6-2-1c-2%200-2%201-2%2013m4%200l1%208%2013-8-13-8-1%208m25-4l-6%204%2013%208V77l-7%204m11%204v8c2%200%2013-7%2013-8l-7-5-6-3v8m25-4l-6%204%2013%208V77l-7%204m11%204v8l13-8-3-2-6-4-4-2v8m25-4l-6%204c0%201%2011%208%2013%208v-8c0-9%200-9-7-4m-53%2010c-11%207-11%207%208%207l16-1-16-11-8%205m36%200c-11%207-11%207%208%207l16-1-16-11-8%205M63%20133c-24%204-45%2017-58%2037l-5%207v90h67l-6-6c-7-8-10-14-14-23-2-7-4-20-2-20l25%2025%2025%2024h15l-32-33-32-33c0-7%2010-24%2019-33%2025-23%2062-24%2088-3%206%205%2011%2012%2010%2013l-4%204-4%203-6-6a54%2054%200%2000-73-4c-5%204-13%2015-15%2020l-1%203%2034%2034c22%2022%2034%2034%2036%2034%207%200%2023-15%2029-27%205-11%205-10-11-11h-14v-12h21l22%201-1%205c0%2013-7%2028-17%2039l-6%206h42v-4c-1-8%200-14%201-12%201%201%201%201%201-1l-1-2-2-20c0-29-1-35-9-50a85%2085%200%2000-55-44c-6-2-57-3-67-1m308%206v3h29v-7h-29v4m-76%204c-3%203-2%206%207%2010l5%202v-5l-1-5-4-2c-3-2-5-3-7%200m91%2025v18h7v-37h-7v19m11%200c0%2015%200%2018%202%2018l1-18-1-19c-2%200-2%203-2%2019m-68%2033l-1%209-1%204v3h25v-12c0-11%200-11-1-5v7h-21v-5l1-5v-4c-2-1-2%200-2%208m57-6l-1%2019v16h8v-37h-3c-3%200-4%200-4%202m11%2017c0%2015%200%2018%202%2018l1-18-1-19c-2%200-2%203-2%2019m-142-9h-8v9a2272%202272%200%20003%2010h1l2%201%202-1%201-1%201%202v1l2%201h5l2%202%202%204c-1%201-14%203-24%203l-3%201-1%2011%201%2011h2l1-1v1l1%201h4l1-1v1l1%201h1l3%201%209%202%201-1h1l1%201%201%202c2%202%202-46%200-50l-2-3h41v-9h-22l-30%201m80%2020v24l1-1c1-2%203-2%208-2h8v-22h-8l-9%201m-31%202l-5%201c-2%200-2%201-2%209v9h27v-21h-8l-12%202m-101%2010l-1%2016v16h5v-16c0-14-1-17-2-17l-2%201m182%208c0%207%200%207-1%202%200-5-1-8-3-8v3h-2v-1h-2l-1%202-1%2014v12h25v-15l-1-16c-2%200-2%202-2%2013v13l-1-13c0-12-1-17-2-6%200%208-1%208-1%200v-7h-8v7m-34%206v3h-1c-2-2-2-2-3-1l-2%202h3l2%201c1%201%200%201-9%201-8%200-13-1-5-1%202%200%203-1%202-2h-3l-2%201c-2%200-3%200-2%201l-1%201c-2%200-2%201-2%206v6h24v-20l-1%202'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/d4a407c3e93e46cb1be195c136eceb64/ca50c/gatsby-with-typescript.png","srcSet":"/static/d4a407c3e93e46cb1be195c136eceb64/ca50c/gatsby-with-typescript.png 1x,\n/static/d4a407c3e93e46cb1be195c136eceb64/1c827/gatsby-with-typescript.png 1.5x,\n/static/d4a407c3e93e46cb1be195c136eceb64/00634/gatsby-with-typescript.png 2x","srcWebp":"/static/d4a407c3e93e46cb1be195c136eceb64/ab1e0/gatsby-with-typescript.webp","srcSetWebp":"/static/d4a407c3e93e46cb1be195c136eceb64/ab1e0/gatsby-with-typescript.webp 1x,\n/static/d4a407c3e93e46cb1be195c136eceb64/5c073/gatsby-with-typescript.webp 1.5x,\n/static/d4a407c3e93e46cb1be195c136eceb64/1f269/gatsby-with-typescript.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M160%2021v21h-8c-8%200-9%200-9%202s1%202%2018%202c43%200%2041%200%2042-2s0-2-6-2c-6-1-7-1-9-3-2-3-9-3-12%201-1%202-2%202-7%202h-6V21l-1-21c-2%200-2%203-2%2021m189-1c-1%202-4%202-15%204l-9%202%2012-1%209-1-4%207-5%206h-42a487%20487%200%2001-50-1c-13%200-14%201-11%204%202%203%202%203%200%203-3%201-3%203%200%203%202%200%202%201%202%206v6h-10l-17%202h-7v5c0%205%200%205%202%205a3953%203953%200%200095-6c12%200%2017-3%2017-8%200-3%200-3-6-2a2010%202010%200%2001-67%204h-6v-6c0-5%200-6%202-6s2%201%202%205v6l1-5%201-5h99v29c0%2025%201%2030%202%2029l1-6%201-5%201%204%201%205%204-4%206-6c1-1%202-3%202-24V46h8l9%201-4%201h-4v14h20v-7c0-7%200-7-2-7l-3-1%207-1%206%201-2%201c-3%200-3%200-3%207v7h8V51c0-8%200-10-1-9h-3c-2-2-1-3%202-3l2-1-18-1h-18l-3-5c-4-6-5-8-2-6l2%201-1-1%201-1c1-1%201-1-2-1-2-1-5-2-6-4-2-3-3-3-4%200M0%2070l1%206c2%202%202%203%201%203l-2%202%202%201%202%201-2%201c-1%200-2%201-2%203v2h111v27h-8c-29%203-31%203-31%206%200%202%200%202%204%201a4996%204996%200%200164-8c0-2%200-2-5-1l-14%201-9%201v-14c0-12%200-13%202-13%203%200%202-1-1-4l-2-2%202-1c3%200%204-1%202-3H9l-3-5c-6-8-6-8-6-4m213%2015c0%2012%200%2013%202%2013l2-1%208-6%208-5%208%205c11%207%2011%207-7%207s-16-1-16%206l-3%202c-2%200-2%200-2%2020%200%2018%200%2021%202%2025%202%205%202%205%206%205%203-1%204-1%204%201-1%201%201%202%202%200h1l4%201%204%202%202%201%204-1%203%201%201%201h1c0%201%201%202%203%202h2v-22h-15v-10h40v10h-14v16l1%2012c0-3%200-4%201-3h2l6%201%203%202%202%201h1l5-1c4-2%205-2%205-1%205%207%2017%206%2016%200%200-2-2-3-8-7-11-5-13-8-14-15%200-11%205-15%2017-15l7%201v-20h18v-3c0-3%200-4%202-4s2-1%202-4%200-4-2-4-2-1-2-13%200-13-2-13l-2%201-8%206-8%205-3-2-8-5c-3-1-5-3-5-4l-2-1-2%201-8%206-8%205-3-2-8-5c-3-1-5-3-5-4l-2-1-2%201-8%206-8%205-8-5-8-6-2-1c-2%200-2%201-2%2013m4%200l1%208%2013-8-13-8-1%208m25-4l-6%204%2013%208V77l-7%204m11%204v8c2%200%2013-7%2013-8l-7-5-6-3v8m25-4l-6%204%2013%208V77l-7%204m11%204v8l13-8-3-2-6-4-4-2v8m25-4l-6%204c0%201%2011%208%2013%208v-8c0-9%200-9-7-4m-53%2010c-11%207-11%207%208%207l16-1-16-11-8%205m36%200c-11%207-11%207%208%207l16-1-16-11-8%205M63%20133c-24%204-45%2017-58%2037l-5%207v90h67l-6-6c-7-8-10-14-14-23-2-7-4-20-2-20l25%2025%2025%2024h15l-32-33-32-33c0-7%2010-24%2019-33%2025-23%2062-24%2088-3%206%205%2011%2012%2010%2013l-4%204-4%203-6-6a54%2054%200%2000-73-4c-5%204-13%2015-15%2020l-1%203%2034%2034c22%2022%2034%2034%2036%2034%207%200%2023-15%2029-27%205-11%205-10-11-11h-14v-12h21l22%201-1%205c0%2013-7%2028-17%2039l-6%206h42v-4c-1-8%200-14%201-12%201%201%201%201%201-1l-1-2-2-20c0-29-1-35-9-50a85%2085%200%2000-55-44c-6-2-57-3-67-1m308%206v3h29v-7h-29v4m-76%204c-3%203-2%206%207%2010l5%202v-5l-1-5-4-2c-3-2-5-3-7%200m91%2025v18h7v-37h-7v19m11%200c0%2015%200%2018%202%2018l1-18-1-19c-2%200-2%203-2%2019m-68%2033l-1%209-1%204v3h25v-12c0-11%200-11-1-5v7h-21v-5l1-5v-4c-2-1-2%200-2%208m57-6l-1%2019v16h8v-37h-3c-3%200-4%200-4%202m11%2017c0%2015%200%2018%202%2018l1-18-1-19c-2%200-2%203-2%2019m-142-9h-8v9a2272%202272%200%20003%2010h1l2%201%202-1%201-1%201%202v1l2%201h5l2%202%202%204c-1%201-14%203-24%203l-3%201-1%2011%201%2011h2l1-1v1l1%201h4l1-1v1l1%201h1l3%201%209%202%201-1h1l1%201%201%202c2%202%202-46%200-50l-2-3h41v-9h-22l-30%201m80%2020v24l1-1c1-2%203-2%208-2h8v-22h-8l-9%201m-31%202l-5%201c-2%200-2%201-2%209v9h27v-21h-8l-12%202m-101%2010l-1%2016v16h5v-16c0-14-1-17-2-17l-2%201m182%208c0%207%200%207-1%202%200-5-1-8-3-8v3h-2v-1h-2l-1%202-1%2014v12h25v-15l-1-16c-2%200-2%202-2%2013v13l-1-13c0-12-1-17-2-6%200%208-1%208-1%200v-7h-8v7m-34%206v3h-1c-2-2-2-2-3-1l-2%202h3l2%201c1%201%200%201-9%201-8%200-13-1-5-1%202%200%203-1%202-2h-3l-2%201c-2%200-3%200-2%201l-1%201c-2%200-2%201-2%206v6h24v-20l-1%202'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/d4a407c3e93e46cb1be195c136eceb64/f143e/gatsby-with-typescript.png","srcSet":"/static/d4a407c3e93e46cb1be195c136eceb64/f143e/gatsby-with-typescript.png 1x,\n/static/d4a407c3e93e46cb1be195c136eceb64/ffb97/gatsby-with-typescript.png 1.5x,\n/static/d4a407c3e93e46cb1be195c136eceb64/6f7a1/gatsby-with-typescript.png 2x","srcWebp":"/static/d4a407c3e93e46cb1be195c136eceb64/4ed47/gatsby-with-typescript.webp","srcSetWebp":"/static/d4a407c3e93e46cb1be195c136eceb64/4ed47/gatsby-with-typescript.webp 1x,\n/static/d4a407c3e93e46cb1be195c136eceb64/bdd29/gatsby-with-typescript.webp 1.5x,\n/static/d4a407c3e93e46cb1be195c136eceb64/e6465/gatsby-with-typescript.webp 2x"}}}}}},{"childMarkdownRemark":{"id":"b6667883-9d24-5950-84eb-44d3140181e8","frontmatter":{"id":8,"title":"Gatsby Blog Social Share Buttons","path":"/gatsby-blog-share-buttons","subtitle":"Add social media share buttons to each of you're blog posts in Gatsby.js","date":"October 2019","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M134%20115v9h6v-18h-6v9m30%200v9h3c3%200%203%200%203-4s0-5%202-5l1%205c0%204%200%204%203%204s3%200%203-5c0-7-3-10-7-9-2%201-3%201-2-2%200-2%200-2-3-2h-3v9m69%200v9h6c7%200%209-2%209-7%200-4-3-7-7-7-3%201-3%201-3-2l-2-2c-3%200-3%200-3%209m35-5c-2%204-2%205-1%205l1%203c0%204%202%206%206%206%203%200%204%200%203-2l-2-2-1-2c0-2%201-3%202-3l1-2-1-2-2-2c0-3-5-3-6%201m12-1l-1%202-1%202%201%203%201%203c0%203%202%205%206%205%203%200%204-1%201-4-2-2-3-4%200-5l1-2-1-2-2-2-2-2c-2%200-3%201-3%202m-215%202c-4%202-2%208%203%208l2%201h-3c-4%200-4%200-4%202s1%202%205%202%208-2%208-4c0-1-2-4-4-4l-3-1c-1-1-1-1%202-1%202%201%203%200%203-1%202-3-4-4-9-2m15%201c-4%203-4%208-1%2010%202%203%209%203%2011%200%206-7-3-16-10-10m17%200c-4%203-4%208-1%2010%202%203%209%203%2011%200%202-2-1-4-4-3h-3c-2-2-1-3%203-3%205%200%206-2%203-4-3-3-6-3-9%200m23-1c-2%200-2%201-1%203l3%201h3c1%201%200%201-2%201-5%200-8%204-5%207l8%201h6v-5c-1-8-5-10-12-8m31%201c-4%202-2%207%203%207l2%201-3%201c-6-1-4%202%201%203%209%200%2011-5%204-8-3-2-3-2-1-2%202%201%203%200%204-1%201-3-6-4-10-1m33-1c-3%200-2%204%201%204h4l-2%201c-4%200-6%202-6%205%200%202%201%203%207%203h7v-5l-1-6c-2-2-7-3-10-2m14%200l-1%207v6h3c3%200%203%200%203-4%200-3%200-4%202-5l2-2c0-2-1-3-4-3l-5%201m12%201c-5%206-1%2012%207%2012%206-1%206-3%201-4l-4-1h4c4%200%205%200%205-2%200-6-8-9-13-5m41-1l-1%205c0%207%202%208%209%208h6v-14h-3c-2%200-2%201-2%203%200%203-2%208-3%206l-1-4c0-4-3-6-5-4m42%200c-6%203-4%2012%204%2013%205%200%208-2%208-7s-6-8-12-6m15%200l-1%207v6h3c3%200%203%200%203-4%200-3%201-4%202-4s2%201%202%204c0%204%200%204%203%204%202%200%202%200%202-5%200-7-2-9-9-9l-5%201m18%201c-4%202-2%207%203%207%202%200%203%200%202%201h-3c-2%200-4%201-3%203h11c2-3%201-6-3-7-3-2-3-2-1-2%202%201%203%200%204-1%201-3-6-4-10-1'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/834d630a13aae38ade3fec0af8c9b150/fa1ef/gatsby-blog-social-share-buttons.png","srcSet":"/static/834d630a13aae38ade3fec0af8c9b150/fa1ef/gatsby-blog-social-share-buttons.png 1x,\n/static/834d630a13aae38ade3fec0af8c9b150/e2210/gatsby-blog-social-share-buttons.png 1.5x,\n/static/834d630a13aae38ade3fec0af8c9b150/f143e/gatsby-blog-social-share-buttons.png 2x","srcWebp":"/static/834d630a13aae38ade3fec0af8c9b150/a0a74/gatsby-blog-social-share-buttons.webp","srcSetWebp":"/static/834d630a13aae38ade3fec0af8c9b150/a0a74/gatsby-blog-social-share-buttons.webp 1x,\n/static/834d630a13aae38ade3fec0af8c9b150/3742a/gatsby-blog-social-share-buttons.webp 1.5x,\n/static/834d630a13aae38ade3fec0af8c9b150/4ed47/gatsby-blog-social-share-buttons.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M134%20115v9h6v-18h-6v9m30%200v9h3c3%200%203%200%203-4s0-5%202-5l1%205c0%204%200%204%203%204s3%200%203-5c0-7-3-10-7-9-2%201-3%201-2-2%200-2%200-2-3-2h-3v9m69%200v9h6c7%200%209-2%209-7%200-4-3-7-7-7-3%201-3%201-3-2l-2-2c-3%200-3%200-3%209m35-5c-2%204-2%205-1%205l1%203c0%204%202%206%206%206%203%200%204%200%203-2l-2-2-1-2c0-2%201-3%202-3l1-2-1-2-2-2c0-3-5-3-6%201m12-1l-1%202-1%202%201%203%201%203c0%203%202%205%206%205%203%200%204-1%201-4-2-2-3-4%200-5l1-2-1-2-2-2-2-2c-2%200-3%201-3%202m-215%202c-4%202-2%208%203%208l2%201h-3c-4%200-4%200-4%202s1%202%205%202%208-2%208-4c0-1-2-4-4-4l-3-1c-1-1-1-1%202-1%202%201%203%200%203-1%202-3-4-4-9-2m15%201c-4%203-4%208-1%2010%202%203%209%203%2011%200%206-7-3-16-10-10m17%200c-4%203-4%208-1%2010%202%203%209%203%2011%200%202-2-1-4-4-3h-3c-2-2-1-3%203-3%205%200%206-2%203-4-3-3-6-3-9%200m23-1c-2%200-2%201-1%203l3%201h3c1%201%200%201-2%201-5%200-8%204-5%207l8%201h6v-5c-1-8-5-10-12-8m31%201c-4%202-2%207%203%207l2%201-3%201c-6-1-4%202%201%203%209%200%2011-5%204-8-3-2-3-2-1-2%202%201%203%200%204-1%201-3-6-4-10-1m33-1c-3%200-2%204%201%204h4l-2%201c-4%200-6%202-6%205%200%202%201%203%207%203h7v-5l-1-6c-2-2-7-3-10-2m14%200l-1%207v6h3c3%200%203%200%203-4%200-3%200-4%202-5l2-2c0-2-1-3-4-3l-5%201m12%201c-5%206-1%2012%207%2012%206-1%206-3%201-4l-4-1h4c4%200%205%200%205-2%200-6-8-9-13-5m41-1l-1%205c0%207%202%208%209%208h6v-14h-3c-2%200-2%201-2%203%200%203-2%208-3%206l-1-4c0-4-3-6-5-4m42%200c-6%203-4%2012%204%2013%205%200%208-2%208-7s-6-8-12-6m15%200l-1%207v6h3c3%200%203%200%203-4%200-3%201-4%202-4s2%201%202%204c0%204%200%204%203%204%202%200%202%200%202-5%200-7-2-9-9-9l-5%201m18%201c-4%202-2%207%203%207%202%200%203%200%202%201h-3c-2%200-4%201-3%203h11c2-3%201-6-3-7-3-2-3-2-1-2%202%201%203%200%204-1%201-3-6-4-10-1'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/834d630a13aae38ade3fec0af8c9b150/ca50c/gatsby-blog-social-share-buttons.png","srcSet":"/static/834d630a13aae38ade3fec0af8c9b150/ca50c/gatsby-blog-social-share-buttons.png 1x,\n/static/834d630a13aae38ade3fec0af8c9b150/1c827/gatsby-blog-social-share-buttons.png 1.5x,\n/static/834d630a13aae38ade3fec0af8c9b150/00634/gatsby-blog-social-share-buttons.png 2x","srcWebp":"/static/834d630a13aae38ade3fec0af8c9b150/ab1e0/gatsby-blog-social-share-buttons.webp","srcSetWebp":"/static/834d630a13aae38ade3fec0af8c9b150/ab1e0/gatsby-blog-social-share-buttons.webp 1x,\n/static/834d630a13aae38ade3fec0af8c9b150/5c073/gatsby-blog-social-share-buttons.webp 1.5x,\n/static/834d630a13aae38ade3fec0af8c9b150/1f269/gatsby-blog-social-share-buttons.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M134%20115v9h6v-18h-6v9m30%200v9h3c3%200%203%200%203-4s0-5%202-5l1%205c0%204%200%204%203%204s3%200%203-5c0-7-3-10-7-9-2%201-3%201-2-2%200-2%200-2-3-2h-3v9m69%200v9h6c7%200%209-2%209-7%200-4-3-7-7-7-3%201-3%201-3-2l-2-2c-3%200-3%200-3%209m35-5c-2%204-2%205-1%205l1%203c0%204%202%206%206%206%203%200%204%200%203-2l-2-2-1-2c0-2%201-3%202-3l1-2-1-2-2-2c0-3-5-3-6%201m12-1l-1%202-1%202%201%203%201%203c0%203%202%205%206%205%203%200%204-1%201-4-2-2-3-4%200-5l1-2-1-2-2-2-2-2c-2%200-3%201-3%202m-215%202c-4%202-2%208%203%208l2%201h-3c-4%200-4%200-4%202s1%202%205%202%208-2%208-4c0-1-2-4-4-4l-3-1c-1-1-1-1%202-1%202%201%203%200%203-1%202-3-4-4-9-2m15%201c-4%203-4%208-1%2010%202%203%209%203%2011%200%206-7-3-16-10-10m17%200c-4%203-4%208-1%2010%202%203%209%203%2011%200%202-2-1-4-4-3h-3c-2-2-1-3%203-3%205%200%206-2%203-4-3-3-6-3-9%200m23-1c-2%200-2%201-1%203l3%201h3c1%201%200%201-2%201-5%200-8%204-5%207l8%201h6v-5c-1-8-5-10-12-8m31%201c-4%202-2%207%203%207l2%201-3%201c-6-1-4%202%201%203%209%200%2011-5%204-8-3-2-3-2-1-2%202%201%203%200%204-1%201-3-6-4-10-1m33-1c-3%200-2%204%201%204h4l-2%201c-4%200-6%202-6%205%200%202%201%203%207%203h7v-5l-1-6c-2-2-7-3-10-2m14%200l-1%207v6h3c3%200%203%200%203-4%200-3%200-4%202-5l2-2c0-2-1-3-4-3l-5%201m12%201c-5%206-1%2012%207%2012%206-1%206-3%201-4l-4-1h4c4%200%205%200%205-2%200-6-8-9-13-5m41-1l-1%205c0%207%202%208%209%208h6v-14h-3c-2%200-2%201-2%203%200%203-2%208-3%206l-1-4c0-4-3-6-5-4m42%200c-6%203-4%2012%204%2013%205%200%208-2%208-7s-6-8-12-6m15%200l-1%207v6h3c3%200%203%200%203-4%200-3%201-4%202-4s2%201%202%204c0%204%200%204%203%204%202%200%202%200%202-5%200-7-2-9-9-9l-5%201m18%201c-4%202-2%207%203%207%202%200%203%200%202%201h-3c-2%200-4%201-3%203h11c2-3%201-6-3-7-3-2-3-2-1-2%202%201%203%200%204-1%201-3-6-4-10-1'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/834d630a13aae38ade3fec0af8c9b150/f143e/gatsby-blog-social-share-buttons.png","srcSet":"/static/834d630a13aae38ade3fec0af8c9b150/f143e/gatsby-blog-social-share-buttons.png 1x,\n/static/834d630a13aae38ade3fec0af8c9b150/ffb97/gatsby-blog-social-share-buttons.png 1.5x,\n/static/834d630a13aae38ade3fec0af8c9b150/6f7a1/gatsby-blog-social-share-buttons.png 2x","srcWebp":"/static/834d630a13aae38ade3fec0af8c9b150/4ed47/gatsby-blog-social-share-buttons.webp","srcSetWebp":"/static/834d630a13aae38ade3fec0af8c9b150/4ed47/gatsby-blog-social-share-buttons.webp 1x,\n/static/834d630a13aae38ade3fec0af8c9b150/bdd29/gatsby-blog-social-share-buttons.webp 1.5x,\n/static/834d630a13aae38ade3fec0af8c9b150/e6465/gatsby-blog-social-share-buttons.webp 2x"}}}}}},{"childMarkdownRemark":{"id":"c06403eb-5b2f-5fe1-b23a-5a726a470a8a","frontmatter":{"id":7,"title":"Better Containers","path":"/better-containers","subtitle":"Create better containers with css grid","date":"September 2019","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='250'%20viewBox='0%200%20400%20250'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20125v125h401V0H0v125m48%202c-2%202-3%2020-1%2022l152%201c147%200%20150%200%20151-2%202-3%201-19-1-21-3-3-299-3-301%200'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/fa1ef/css-grid-container.png","srcSet":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/fa1ef/css-grid-container.png 1x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/e2210/css-grid-container.png 1.5x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/f143e/css-grid-container.png 2x","srcWebp":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/a0a74/css-grid-container.webp","srcSetWebp":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/a0a74/css-grid-container.webp 1x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/3742a/css-grid-container.webp 1.5x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/4ed47/css-grid-container.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='250'%20viewBox='0%200%20400%20250'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20125v125h401V0H0v125m48%202c-2%202-3%2020-1%2022l152%201c147%200%20150%200%20151-2%202-3%201-19-1-21-3-3-299-3-301%200'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/ca50c/css-grid-container.png","srcSet":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/ca50c/css-grid-container.png 1x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/1c827/css-grid-container.png 1.5x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/00634/css-grid-container.png 2x","srcWebp":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/ab1e0/css-grid-container.webp","srcSetWebp":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/ab1e0/css-grid-container.webp 1x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/5c073/css-grid-container.webp 1.5x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/1f269/css-grid-container.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='250'%20viewBox='0%200%20400%20250'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20125v125h401V0H0v125m48%202c-2%202-3%2020-1%2022l152%201c147%200%20150%200%20151-2%202-3%201-19-1-21-3-3-299-3-301%200'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/f143e/css-grid-container.png","srcSet":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/f143e/css-grid-container.png 1x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/ffb97/css-grid-container.png 1.5x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/6f7a1/css-grid-container.png 2x","srcWebp":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/4ed47/css-grid-container.webp","srcSetWebp":"/static/725697c70d30c1b2ff35cf6d25ba7c6d/4ed47/css-grid-container.webp 1x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/bdd29/css-grid-container.webp 1.5x,\n/static/725697c70d30c1b2ff35cf6d25ba7c6d/e6465/css-grid-container.webp 2x"}}}}}},{"childMarkdownRemark":{"id":"94b0ffc1-206b-58fb-a990-44ecd9a45d62","frontmatter":{"id":6,"title":"My approach on GraphQL queries in Gatsby","path":"/gatsby-graphql-approach","subtitle":"Get you graphql queries simple, organized, and clean","date":"September 2019","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20100v100h401V0H0v100m196-53l-2%203c0%203-12%209-14%208-5-3-10%203-6%208%203%204%203%2016%200%2019-4%203-1%209%205%208%204-1%2014%204%2015%208%201%207%2011%206%2011-1%200-3%2010-8%2015-7%207%201%209-5%205-9-3-3-3-14%200-18%204-4%200-11-5-8-4%201-14-5-15-9-2-4-7-5-9-2m8%208l8%2014%208%2013v-7c0-5%200-7-2-8l-2-4c0-1-2-3-6-5l-6-3m-16%203c-4%202-5%204-5%206l-2%203c-2%202-2%203-2%209l1%207%205-11%208-14c3-4%202-4-5%200m9%200c-8%2012-15%2026-14%2027%200%203%2033%203%2034%200%200-1-3-8-8-15-8-15-10-16-12-12m-12%2032c2%202%2011%207%2012%206h6l12-6c1-1-6-1-15-1-10%200-16%200-15%201m-19%2037c0%206%203%2010%203%205%200-4%204-4%204%200%202%204%203%202%203-4v-6l-5-1h-5v6m61-4c-3%202-2%207%200%209l6%202c3%200%204%200%204-4%200-8-6-12-10-7'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/643dad9cf0c91af8bf39f7db8b4e1053/fa1ef/tbn.png","srcSet":"/static/643dad9cf0c91af8bf39f7db8b4e1053/fa1ef/tbn.png 1x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/e2210/tbn.png 1.5x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/f143e/tbn.png 2x","srcWebp":"/static/643dad9cf0c91af8bf39f7db8b4e1053/a0a74/tbn.webp","srcSetWebp":"/static/643dad9cf0c91af8bf39f7db8b4e1053/a0a74/tbn.webp 1x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/3742a/tbn.webp 1.5x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/4ed47/tbn.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20100v100h401V0H0v100m196-53l-2%203c0%203-12%209-14%208-5-3-10%203-6%208%203%204%203%2016%200%2019-4%203-1%209%205%208%204-1%2014%204%2015%208%201%207%2011%206%2011-1%200-3%2010-8%2015-7%207%201%209-5%205-9-3-3-3-14%200-18%204-4%200-11-5-8-4%201-14-5-15-9-2-4-7-5-9-2m8%208l8%2014%208%2013v-7c0-5%200-7-2-8l-2-4c0-1-2-3-6-5l-6-3m-16%203c-4%202-5%204-5%206l-2%203c-2%202-2%203-2%209l1%207%205-11%208-14c3-4%202-4-5%200m9%200c-8%2012-15%2026-14%2027%200%203%2033%203%2034%200%200-1-3-8-8-15-8-15-10-16-12-12m-12%2032c2%202%2011%207%2012%206h6l12-6c1-1-6-1-15-1-10%200-16%200-15%201m-19%2037c0%206%203%2010%203%205%200-4%204-4%204%200%202%204%203%202%203-4v-6l-5-1h-5v6m61-4c-3%202-2%207%200%209l6%202c3%200%204%200%204-4%200-8-6-12-10-7'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/643dad9cf0c91af8bf39f7db8b4e1053/ca50c/tbn.png","srcSet":"/static/643dad9cf0c91af8bf39f7db8b4e1053/ca50c/tbn.png 1x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/1c827/tbn.png 1.5x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/00634/tbn.png 2x","srcWebp":"/static/643dad9cf0c91af8bf39f7db8b4e1053/ab1e0/tbn.webp","srcSetWebp":"/static/643dad9cf0c91af8bf39f7db8b4e1053/ab1e0/tbn.webp 1x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/5c073/tbn.webp 1.5x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/1f269/tbn.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20100v100h401V0H0v100m196-53l-2%203c0%203-12%209-14%208-5-3-10%203-6%208%203%204%203%2016%200%2019-4%203-1%209%205%208%204-1%2014%204%2015%208%201%207%2011%206%2011-1%200-3%2010-8%2015-7%207%201%209-5%205-9-3-3-3-14%200-18%204-4%200-11-5-8-4%201-14-5-15-9-2-4-7-5-9-2m8%208l8%2014%208%2013v-7c0-5%200-7-2-8l-2-4c0-1-2-3-6-5l-6-3m-16%203c-4%202-5%204-5%206l-2%203c-2%202-2%203-2%209l1%207%205-11%208-14c3-4%202-4-5%200m9%200c-8%2012-15%2026-14%2027%200%203%2033%203%2034%200%200-1-3-8-8-15-8-15-10-16-12-12m-12%2032c2%202%2011%207%2012%206h6l12-6c1-1-6-1-15-1-10%200-16%200-15%201m-19%2037c0%206%203%2010%203%205%200-4%204-4%204%200%202%204%203%202%203-4v-6l-5-1h-5v6m61-4c-3%202-2%207%200%209l6%202c3%200%204%200%204-4%200-8-6-12-10-7'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/643dad9cf0c91af8bf39f7db8b4e1053/f143e/tbn.png","srcSet":"/static/643dad9cf0c91af8bf39f7db8b4e1053/f143e/tbn.png 1x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/ffb97/tbn.png 1.5x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/6f7a1/tbn.png 2x","srcWebp":"/static/643dad9cf0c91af8bf39f7db8b4e1053/4ed47/tbn.webp","srcSetWebp":"/static/643dad9cf0c91af8bf39f7db8b4e1053/4ed47/tbn.webp 1x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/bdd29/tbn.webp 1.5x,\n/static/643dad9cf0c91af8bf39f7db8b4e1053/e6465/tbn.webp 2x"}}}}}},{"childMarkdownRemark":{"id":"b0c80566-6430-585b-8da5-54e54d5d9a42","frontmatter":{"id":5,"title":"Development Environment","path":"/dotenv","subtitle":"My favorite extensions, themes, tips for a beautifully productive development environment.","date":"July 2019","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2028c0%2023%200%2027%202%2027l1%202H2c-1-4-2%203-2%2030%200%2026%200%2030%202%2030l1%201H2c-2%200-3%2012-1%2014v1l-1%209c0%207%200%209%202%209l1%201-1%201c-2-1-2%201-2%209%200%2010%200%2011%204%2010v2H3c-2-2-3-1-3%202s0%203%203%203h4l2%201-4%201H1l-1%209v10h147a1123%201123%200%2000155-2c0%202%203%202%2049%202h50V0H0v28'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/4947bb6036498d5cf38a97421fe5c137/fa1ef/tbn.png","srcSet":"/static/4947bb6036498d5cf38a97421fe5c137/fa1ef/tbn.png 1x,\n/static/4947bb6036498d5cf38a97421fe5c137/e2210/tbn.png 1.5x,\n/static/4947bb6036498d5cf38a97421fe5c137/f143e/tbn.png 2x","srcWebp":"/static/4947bb6036498d5cf38a97421fe5c137/a0a74/tbn.webp","srcSetWebp":"/static/4947bb6036498d5cf38a97421fe5c137/a0a74/tbn.webp 1x,\n/static/4947bb6036498d5cf38a97421fe5c137/3742a/tbn.webp 1.5x,\n/static/4947bb6036498d5cf38a97421fe5c137/4ed47/tbn.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2028c0%2023%200%2027%202%2027l1%202H2c-1-4-2%203-2%2030%200%2026%200%2030%202%2030l1%201H2c-2%200-3%2012-1%2014v1l-1%209c0%207%200%209%202%209l1%201-1%201c-2-1-2%201-2%209%200%2010%200%2011%204%2010v2H3c-2-2-3-1-3%202s0%203%203%203h4l2%201-4%201H1l-1%209v10h147a1123%201123%200%2000155-2c0%202%203%202%2049%202h50V0H0v28'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/4947bb6036498d5cf38a97421fe5c137/ca50c/tbn.png","srcSet":"/static/4947bb6036498d5cf38a97421fe5c137/ca50c/tbn.png 1x,\n/static/4947bb6036498d5cf38a97421fe5c137/1c827/tbn.png 1.5x,\n/static/4947bb6036498d5cf38a97421fe5c137/00634/tbn.png 2x","srcWebp":"/static/4947bb6036498d5cf38a97421fe5c137/ab1e0/tbn.webp","srcSetWebp":"/static/4947bb6036498d5cf38a97421fe5c137/ab1e0/tbn.webp 1x,\n/static/4947bb6036498d5cf38a97421fe5c137/5c073/tbn.webp 1.5x,\n/static/4947bb6036498d5cf38a97421fe5c137/1f269/tbn.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2028c0%2023%200%2027%202%2027l1%202H2c-1-4-2%203-2%2030%200%2026%200%2030%202%2030l1%201H2c-2%200-3%2012-1%2014v1l-1%209c0%207%200%209%202%209l1%201-1%201c-2-1-2%201-2%209%200%2010%200%2011%204%2010v2H3c-2-2-3-1-3%202s0%203%203%203h4l2%201-4%201H1l-1%209v10h147a1123%201123%200%2000155-2c0%202%203%202%2049%202h50V0H0v28'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/4947bb6036498d5cf38a97421fe5c137/f143e/tbn.png","srcSet":"/static/4947bb6036498d5cf38a97421fe5c137/f143e/tbn.png 1x,\n/static/4947bb6036498d5cf38a97421fe5c137/ffb97/tbn.png 1.5x,\n/static/4947bb6036498d5cf38a97421fe5c137/6f7a1/tbn.png 2x","srcWebp":"/static/4947bb6036498d5cf38a97421fe5c137/4ed47/tbn.webp","srcSetWebp":"/static/4947bb6036498d5cf38a97421fe5c137/4ed47/tbn.webp 1x,\n/static/4947bb6036498d5cf38a97421fe5c137/bdd29/tbn.webp 1.5x,\n/static/4947bb6036498d5cf38a97421fe5c137/e6465/tbn.webp 2x"}}}}}},{"childMarkdownRemark":{"id":"14668aa0-5c1e-5d21-929f-a0cc810b1605","frontmatter":{"id":4,"title":"Gatsby Darkmode","path":"/gatsby-darkmode","subtitle":"Create a dynamic dark-mode theme in gatsby using redux, and styled components.","date":"April 2019","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M200%2074v74h-6v19h6v100h200V0H200v74m26%2026l-1%2013v12h8c10%200%2014-2%2014-9s-4-10-10-10l-4%201v-4c0-4%200-4-3-4l-4%201m-42%205l-1%202c-1%200-2%201-2%203l2%203%201%204c0%205%203%208%208%208l4-1c1-1-1-5-2-5-3%200-2-6%200-6l2-3-2-3c-1%200-2-1-2-3s0-2-4-2-4%200-4%203m-53%204c-3%203-3%209%201%2012%203%203%208%204%2010%202h1c0%202-3%203-7%203-4-1-6%200-6%203l9%203c9%200%2012-5%2012-18v-8h-9c-7%200-9%200-11%203m29-2c-5%201-1%206%204%205l4%201-4%201c-6%200-9%206-5%209%202%202%207%203%209%201h1l4%201h3v-7c0-7%200-8-3-10-2-2-8-3-13-1m44%201c-5%204-2%2010%206%2010l2%201-5%201c-5-1-7%202-4%204%202%202%2011%201%2014-1%205-3%201-10-5-10l-3-1%204-1c3%201%204%201%205-1%201-3%200-4-7-4l-7%202m48%203l4%209c2%205%201%207-2%206-2-2-4%204-2%205s9%201%2011-1l10-24h-4c-3%200-4%201-5%205-2%205-2%205-4%200s-2-5-6-5h-4l2%205m-145%2034c0%204%200%204-4%203-9-1-14%209-7%2016%203%203%203%203%2011%203h8v-25l-4-1c-4%200-4%200-4%204m59%209v13h4c4%200%204%200%204-2l1-3%203%203c1%202%203%202%207%202h4l-3-4c-6-7-6-7-1-11l3-4h-4c-3%200-5%201-7%203l-3%202v-12h-8v13m107-9c0%204%200%204-4%203-7%200-12%206-9%2013%202%205%204%206%2013%206h8v-26h-4c-4%200-4%200-4%204m-150%204c-3%202%200%206%203%205s6%200%206%201l-4%201c-6%200-10%205-5%209%201%202%207%203%209%201h1l4%201h3v-7c0-9-2-12-10-12l-7%201m24%209v9h8v-6c0-5%201-6%203-6l2-4c0-3%200-3-6-3h-7v10m53%200c0%2010%202%2013%202%203%200-5%201-6%202-6s2%201%202%206v6h8v-6c0-6%201-8%204-6l1%207v5h7v-7c0-9-2-12-7-12l-5%201h-3l-7-1-4%201v9m37-9c-5%203-6%2011-1%2015%207%206%2018%202%2018-7%200-7-9-11-17-8m53%202c-3%203-4%207-2%2011s12%207%2017%204c3-3-1-6-5-5l-4-1c-1-1%201-1%205-1%207%200%207%200%207-3%200-4-5-8-10-8-4%200-6%201-8%203'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/825e80bdaec61576d0d46b35bda61290/fa1ef/gatsby-darkmode.png","srcSet":"/static/825e80bdaec61576d0d46b35bda61290/fa1ef/gatsby-darkmode.png 1x,\n/static/825e80bdaec61576d0d46b35bda61290/e2210/gatsby-darkmode.png 1.5x,\n/static/825e80bdaec61576d0d46b35bda61290/f143e/gatsby-darkmode.png 2x","srcWebp":"/static/825e80bdaec61576d0d46b35bda61290/a0a74/gatsby-darkmode.webp","srcSetWebp":"/static/825e80bdaec61576d0d46b35bda61290/a0a74/gatsby-darkmode.webp 1x,\n/static/825e80bdaec61576d0d46b35bda61290/3742a/gatsby-darkmode.webp 1.5x,\n/static/825e80bdaec61576d0d46b35bda61290/4ed47/gatsby-darkmode.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M200%2074v74h-6v19h6v100h200V0H200v74m26%2026l-1%2013v12h8c10%200%2014-2%2014-9s-4-10-10-10l-4%201v-4c0-4%200-4-3-4l-4%201m-42%205l-1%202c-1%200-2%201-2%203l2%203%201%204c0%205%203%208%208%208l4-1c1-1-1-5-2-5-3%200-2-6%200-6l2-3-2-3c-1%200-2-1-2-3s0-2-4-2-4%200-4%203m-53%204c-3%203-3%209%201%2012%203%203%208%204%2010%202h1c0%202-3%203-7%203-4-1-6%200-6%203l9%203c9%200%2012-5%2012-18v-8h-9c-7%200-9%200-11%203m29-2c-5%201-1%206%204%205l4%201-4%201c-6%200-9%206-5%209%202%202%207%203%209%201h1l4%201h3v-7c0-7%200-8-3-10-2-2-8-3-13-1m44%201c-5%204-2%2010%206%2010l2%201-5%201c-5-1-7%202-4%204%202%202%2011%201%2014-1%205-3%201-10-5-10l-3-1%204-1c3%201%204%201%205-1%201-3%200-4-7-4l-7%202m48%203l4%209c2%205%201%207-2%206-2-2-4%204-2%205s9%201%2011-1l10-24h-4c-3%200-4%201-5%205-2%205-2%205-4%200s-2-5-6-5h-4l2%205m-145%2034c0%204%200%204-4%203-9-1-14%209-7%2016%203%203%203%203%2011%203h8v-25l-4-1c-4%200-4%200-4%204m59%209v13h4c4%200%204%200%204-2l1-3%203%203c1%202%203%202%207%202h4l-3-4c-6-7-6-7-1-11l3-4h-4c-3%200-5%201-7%203l-3%202v-12h-8v13m107-9c0%204%200%204-4%203-7%200-12%206-9%2013%202%205%204%206%2013%206h8v-26h-4c-4%200-4%200-4%204m-150%204c-3%202%200%206%203%205s6%200%206%201l-4%201c-6%200-10%205-5%209%201%202%207%203%209%201h1l4%201h3v-7c0-9-2-12-10-12l-7%201m24%209v9h8v-6c0-5%201-6%203-6l2-4c0-3%200-3-6-3h-7v10m53%200c0%2010%202%2013%202%203%200-5%201-6%202-6s2%201%202%206v6h8v-6c0-6%201-8%204-6l1%207v5h7v-7c0-9-2-12-7-12l-5%201h-3l-7-1-4%201v9m37-9c-5%203-6%2011-1%2015%207%206%2018%202%2018-7%200-7-9-11-17-8m53%202c-3%203-4%207-2%2011s12%207%2017%204c3-3-1-6-5-5l-4-1c-1-1%201-1%205-1%207%200%207%200%207-3%200-4-5-8-10-8-4%200-6%201-8%203'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/825e80bdaec61576d0d46b35bda61290/ca50c/gatsby-darkmode.png","srcSet":"/static/825e80bdaec61576d0d46b35bda61290/ca50c/gatsby-darkmode.png 1x,\n/static/825e80bdaec61576d0d46b35bda61290/1c827/gatsby-darkmode.png 1.5x,\n/static/825e80bdaec61576d0d46b35bda61290/00634/gatsby-darkmode.png 2x","srcWebp":"/static/825e80bdaec61576d0d46b35bda61290/ab1e0/gatsby-darkmode.webp","srcSetWebp":"/static/825e80bdaec61576d0d46b35bda61290/ab1e0/gatsby-darkmode.webp 1x,\n/static/825e80bdaec61576d0d46b35bda61290/5c073/gatsby-darkmode.webp 1.5x,\n/static/825e80bdaec61576d0d46b35bda61290/1f269/gatsby-darkmode.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M200%2074v74h-6v19h6v100h200V0H200v74m26%2026l-1%2013v12h8c10%200%2014-2%2014-9s-4-10-10-10l-4%201v-4c0-4%200-4-3-4l-4%201m-42%205l-1%202c-1%200-2%201-2%203l2%203%201%204c0%205%203%208%208%208l4-1c1-1-1-5-2-5-3%200-2-6%200-6l2-3-2-3c-1%200-2-1-2-3s0-2-4-2-4%200-4%203m-53%204c-3%203-3%209%201%2012%203%203%208%204%2010%202h1c0%202-3%203-7%203-4-1-6%200-6%203l9%203c9%200%2012-5%2012-18v-8h-9c-7%200-9%200-11%203m29-2c-5%201-1%206%204%205l4%201-4%201c-6%200-9%206-5%209%202%202%207%203%209%201h1l4%201h3v-7c0-7%200-8-3-10-2-2-8-3-13-1m44%201c-5%204-2%2010%206%2010l2%201-5%201c-5-1-7%202-4%204%202%202%2011%201%2014-1%205-3%201-10-5-10l-3-1%204-1c3%201%204%201%205-1%201-3%200-4-7-4l-7%202m48%203l4%209c2%205%201%207-2%206-2-2-4%204-2%205s9%201%2011-1l10-24h-4c-3%200-4%201-5%205-2%205-2%205-4%200s-2-5-6-5h-4l2%205m-145%2034c0%204%200%204-4%203-9-1-14%209-7%2016%203%203%203%203%2011%203h8v-25l-4-1c-4%200-4%200-4%204m59%209v13h4c4%200%204%200%204-2l1-3%203%203c1%202%203%202%207%202h4l-3-4c-6-7-6-7-1-11l3-4h-4c-3%200-5%201-7%203l-3%202v-12h-8v13m107-9c0%204%200%204-4%203-7%200-12%206-9%2013%202%205%204%206%2013%206h8v-26h-4c-4%200-4%200-4%204m-150%204c-3%202%200%206%203%205s6%200%206%201l-4%201c-6%200-10%205-5%209%201%202%207%203%209%201h1l4%201h3v-7c0-9-2-12-10-12l-7%201m24%209v9h8v-6c0-5%201-6%203-6l2-4c0-3%200-3-6-3h-7v10m53%200c0%2010%202%2013%202%203%200-5%201-6%202-6s2%201%202%206v6h8v-6c0-6%201-8%204-6l1%207v5h7v-7c0-9-2-12-7-12l-5%201h-3l-7-1-4%201v9m37-9c-5%203-6%2011-1%2015%207%206%2018%202%2018-7%200-7-9-11-17-8m53%202c-3%203-4%207-2%2011s12%207%2017%204c3-3-1-6-5-5l-4-1c-1-1%201-1%205-1%207%200%207%200%207-3%200-4-5-8-10-8-4%200-6%201-8%203'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/825e80bdaec61576d0d46b35bda61290/f143e/gatsby-darkmode.png","srcSet":"/static/825e80bdaec61576d0d46b35bda61290/f143e/gatsby-darkmode.png 1x,\n/static/825e80bdaec61576d0d46b35bda61290/ffb97/gatsby-darkmode.png 1.5x,\n/static/825e80bdaec61576d0d46b35bda61290/6f7a1/gatsby-darkmode.png 2x","srcWebp":"/static/825e80bdaec61576d0d46b35bda61290/4ed47/gatsby-darkmode.webp","srcSetWebp":"/static/825e80bdaec61576d0d46b35bda61290/4ed47/gatsby-darkmode.webp 1x,\n/static/825e80bdaec61576d0d46b35bda61290/bdd29/gatsby-darkmode.webp 1.5x,\n/static/825e80bdaec61576d0d46b35bda61290/e6465/gatsby-darkmode.webp 2x"}}}}}},{"childMarkdownRemark":{"id":"65713590-9cc6-566e-846f-7401fd5644ab","frontmatter":{"id":3,"title":"Styled Container","path":"/styled-container","subtitle":"Responsive Container Component with React and Styled-Components.","date":"March 2019","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h49l49-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3c2%200%204-3%204-5l2-2%201-2%201-3%201-1%202-2%201-2%201-3%201-2c0-2%201-3%202-3l1-2c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3%202-1h2l1%201%202%201c3%203%208%204%2014%202%204-1%202-2-2-1-7%201-10-1-12-5-2-6%202-17%207-19%202%200%202%200%201-1l-1-2%202%201c0%202%206%201%206-1h-1l-1%201v-2h-1l-2-1c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201%202c0%202%201%202%207%202l5-1c3-2%203-4%200-2h-10V92c1-2%201-3-1-3l-1-2c0-2%201-3%202-3v-1l1-1%202-1%204-2c2-1%202-1%202%202-1%203-1%203%202%203s3%200%201-1l-2-1h1l1-1-1-1v-3l1-1%201-4%202-2%201-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3c2%200%204-3%204-5l2-2%201-2%201-3%201-1%202-2%201-2%201-3%201-2c0-2%201-3%202-3l1-2c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201-2c0-2%201-3%202-3l1-1-114-1H0v113m154-33c-6%203-6%209%200%2014%205%204%204%205-2%204-4%200-5%200-5%202-1%204-1%204%206%204%2011%200%2014-6%207-13-3-2-5-5-4-5%200-2%204-1%205%200%201%202%205%201%205-1%200-4-7-7-12-5m-38%2031c2%202%202%203%200%2022-2%2028%200%2026-30%2026-26-1-24%201-27-25l-1-22c1-3-3-3-6%201s-3%2052%200%2056l2%203h30c34%201%2038%200%2040-3%202-2%202-4%202-28%200-29%200-30-8-32-3%200-3%200-2%202'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/3003a0c415b681450f49162cffe66ee4/fa1ef/tbn.png","srcSet":"/static/3003a0c415b681450f49162cffe66ee4/fa1ef/tbn.png 1x,\n/static/3003a0c415b681450f49162cffe66ee4/e2210/tbn.png 1.5x,\n/static/3003a0c415b681450f49162cffe66ee4/f143e/tbn.png 2x","srcWebp":"/static/3003a0c415b681450f49162cffe66ee4/a0a74/tbn.webp","srcSetWebp":"/static/3003a0c415b681450f49162cffe66ee4/a0a74/tbn.webp 1x,\n/static/3003a0c415b681450f49162cffe66ee4/3742a/tbn.webp 1.5x,\n/static/3003a0c415b681450f49162cffe66ee4/4ed47/tbn.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h49l49-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3c2%200%204-3%204-5l2-2%201-2%201-3%201-1%202-2%201-2%201-3%201-2c0-2%201-3%202-3l1-2c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3%202-1h2l1%201%202%201c3%203%208%204%2014%202%204-1%202-2-2-1-7%201-10-1-12-5-2-6%202-17%207-19%202%200%202%200%201-1l-1-2%202%201c0%202%206%201%206-1h-1l-1%201v-2h-1l-2-1c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201%202c0%202%201%202%207%202l5-1c3-2%203-4%200-2h-10V92c1-2%201-3-1-3l-1-2c0-2%201-3%202-3v-1l1-1%202-1%204-2c2-1%202-1%202%202-1%203-1%203%202%203s3%200%201-1l-2-1h1l1-1-1-1v-3l1-1%201-4%202-2%201-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3c2%200%204-3%204-5l2-2%201-2%201-3%201-1%202-2%201-2%201-3%201-2c0-2%201-3%202-3l1-2c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201-2c0-2%201-3%202-3l1-1-114-1H0v113m154-33c-6%203-6%209%200%2014%205%204%204%205-2%204-4%200-5%200-5%202-1%204-1%204%206%204%2011%200%2014-6%207-13-3-2-5-5-4-5%200-2%204-1%205%200%201%202%205%201%205-1%200-4-7-7-12-5m-38%2031c2%202%202%203%200%2022-2%2028%200%2026-30%2026-26-1-24%201-27-25l-1-22c1-3-3-3-6%201s-3%2052%200%2056l2%203h30c34%201%2038%200%2040-3%202-2%202-4%202-28%200-29%200-30-8-32-3%200-3%200-2%202'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/3003a0c415b681450f49162cffe66ee4/ca50c/tbn.png","srcSet":"/static/3003a0c415b681450f49162cffe66ee4/ca50c/tbn.png 1x,\n/static/3003a0c415b681450f49162cffe66ee4/1c827/tbn.png 1.5x,\n/static/3003a0c415b681450f49162cffe66ee4/00634/tbn.png 2x","srcWebp":"/static/3003a0c415b681450f49162cffe66ee4/ab1e0/tbn.webp","srcSetWebp":"/static/3003a0c415b681450f49162cffe66ee4/ab1e0/tbn.webp 1x,\n/static/3003a0c415b681450f49162cffe66ee4/5c073/tbn.webp 1.5x,\n/static/3003a0c415b681450f49162cffe66ee4/1f269/tbn.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h49l49-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3c2%200%204-3%204-5l2-2%201-2%201-3%201-1%202-2%201-2%201-3%201-2c0-2%201-3%202-3l1-2c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3%202-1h2l1%201%202%201c3%203%208%204%2014%202%204-1%202-2-2-1-7%201-10-1-12-5-2-6%202-17%207-19%202%200%202%200%201-1l-1-2%202%201c0%202%206%201%206-1h-1l-1%201v-2h-1l-2-1c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201%202c0%202%201%202%207%202l5-1c3-2%203-4%200-2h-10V92c1-2%201-3-1-3l-1-2c0-2%201-3%202-3v-1l1-1%202-1%204-2c2-1%202-1%202%202-1%203-1%203%202%203s3%200%201-1l-2-1h1l1-1-1-1v-3l1-1%201-4%202-2%201-1%201-2%201-2c0-2%201-3%202-3l1-2%201-3%201-2%201-3c2%200%204-3%204-5l2-2%201-2%201-3%201-1%202-2%201-2%201-3%201-2c0-2%201-3%202-3l1-2c0-2%202-5%204-5l1-2%201-3%201-2c0-2%201-3%202-3l1-1%201-2%201-2c0-2%201-3%202-3l1-1-114-1H0v113m154-33c-6%203-6%209%200%2014%205%204%204%205-2%204-4%200-5%200-5%202-1%204-1%204%206%204%2011%200%2014-6%207-13-3-2-5-5-4-5%200-2%204-1%205%200%201%202%205%201%205-1%200-4-7-7-12-5m-38%2031c2%202%202%203%200%2022-2%2028%200%2026-30%2026-26-1-24%201-27-25l-1-22c1-3-3-3-6%201s-3%2052%200%2056l2%203h30c34%201%2038%200%2040-3%202-2%202-4%202-28%200-29%200-30-8-32-3%200-3%200-2%202'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/3003a0c415b681450f49162cffe66ee4/f143e/tbn.png","srcSet":"/static/3003a0c415b681450f49162cffe66ee4/f143e/tbn.png 1x,\n/static/3003a0c415b681450f49162cffe66ee4/ffb97/tbn.png 1.5x,\n/static/3003a0c415b681450f49162cffe66ee4/6f7a1/tbn.png 2x","srcWebp":"/static/3003a0c415b681450f49162cffe66ee4/4ed47/tbn.webp","srcSetWebp":"/static/3003a0c415b681450f49162cffe66ee4/4ed47/tbn.webp 1x,\n/static/3003a0c415b681450f49162cffe66ee4/bdd29/tbn.webp 1.5x,\n/static/3003a0c415b681450f49162cffe66ee4/e6465/tbn.webp 2x"}}}}}},{"childMarkdownRemark":{"id":"627984d8-e4eb-5747-a08a-6223d656e085","frontmatter":{"id":2,"title":"React Navbar Scroller","path":"/react-navbar-scroller","subtitle":"In this project we will create a simple little Navbar component that looks cool / has a logo or brand name and features horizontal scrolling","date":"March 2019","thumbnail":{"sm":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%207v7h401V0H0v7m160%2050c-1%201%201%206%202%206v-4c1-1%202%203%202%204v2l3-3c1-4%203-6%202-3-1%201%200%202%201%203h5l2-1c2%204%205%202%205-2%200-5%200-5-3-2l-3%201c0-2-4-1-5%201s-1%202-1-1l-1-3s-3%202-3%204h-1c0-2-5-4-5-2'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":100,"height":100,"src":"/static/b79c6247e7fa6cc6726254656b6713d1/fa1ef/tbn.png","srcSet":"/static/b79c6247e7fa6cc6726254656b6713d1/fa1ef/tbn.png 1x,\n/static/b79c6247e7fa6cc6726254656b6713d1/e2210/tbn.png 1.5x,\n/static/b79c6247e7fa6cc6726254656b6713d1/f143e/tbn.png 2x","srcWebp":"/static/b79c6247e7fa6cc6726254656b6713d1/a0a74/tbn.webp","srcSetWebp":"/static/b79c6247e7fa6cc6726254656b6713d1/a0a74/tbn.webp 1x,\n/static/b79c6247e7fa6cc6726254656b6713d1/3742a/tbn.webp 1.5x,\n/static/b79c6247e7fa6cc6726254656b6713d1/4ed47/tbn.webp 2x"}},"md":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='200'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%207v7h401V0H0v7m160%2050c-1%201%201%206%202%206v-4c1-1%202%203%202%204v2l3-3c1-4%203-6%202-3-1%201%200%202%201%203h5l2-1c2%204%205%202%205-2%200-5%200-5-3-2l-3%201c0-2-4-1-5%201s-1%202-1-1l-1-3s-3%202-3%204h-1c0-2-5-4-5-2'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":125,"height":125,"src":"/static/b79c6247e7fa6cc6726254656b6713d1/ca50c/tbn.png","srcSet":"/static/b79c6247e7fa6cc6726254656b6713d1/ca50c/tbn.png 1x,\n/static/b79c6247e7fa6cc6726254656b6713d1/1c827/tbn.png 1.5x,\n/static/b79c6247e7fa6cc6726254656b6713d1/00634/tbn.png 2x","srcWebp":"/static/b79c6247e7fa6cc6726254656b6713d1/ab1e0/tbn.webp","srcSetWebp":"/static/b79c6247e7fa6cc6726254656b6713d1/ab1e0/tbn.webp 1x,\n/static/b79c6247e7fa6cc6726254656b6713d1/5c073/tbn.webp 1.5x,\n/static/b79c6247e7fa6cc6726254656b6713d1/1f269/tbn.webp 2x"}},"lg":{"fixed":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%202c0%202%201%203%203%203%204%200%202%203-1%203-2%200-2%201-2%203v3h201V0H0v2'%20fill='%23d0c1fa'%20fill-rule='evenodd'/%3e%3c/svg%3e","width":200,"height":200,"src":"/static/b79c6247e7fa6cc6726254656b6713d1/f143e/tbn.png","srcSet":"/static/b79c6247e7fa6cc6726254656b6713d1/f143e/tbn.png 1x,\n/static/b79c6247e7fa6cc6726254656b6713d1/ffb97/tbn.png 1.5x,\n/static/b79c6247e7fa6cc6726254656b6713d1/6f7a1/tbn.png 2x","srcWebp":"/static/b79c6247e7fa6cc6726254656b6713d1/4ed47/tbn.webp","srcSetWebp":"/static/b79c6247e7fa6cc6726254656b6713d1/4ed47/tbn.webp 1x,\n/static/b79c6247e7fa6cc6726254656b6713d1/bdd29/tbn.webp 1.5x,\n/static/b79c6247e7fa6cc6726254656b6713d1/e6465/tbn.webp 2x"}}}}}}]}},"pageContext":{"pageNumber":0,"humanPageNumber":1,"skip":0,"limit":8,"numberOfPages":2,"previousPagePath":"","nextPagePath":"/blog/page/2"}},"staticQueryHashes":["4132723914","4132723914"]}