{"componentChunkName":"component---src-templates-post-template-js","path":"/blog/about-this-blog/","result":{"data":{"post":{"id":"36dbd95f-00d0-5919-baf2-0cedcbb55318","fileAbsolutePath":"/opt/build/repo/content/posts/2019-26-11---About-this-blog.md","htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A quick note about this site and the blog as I work to expand the functionality and style it to my satisfaction. When I decided to create this website the choice of platform was fairly clear: I was going to use "},{"type":"element","tagName":"a","properties":{"href":"https://www.gatsbyjs.org/"},"children":[{"type":"text","value":"Gatsby"}]},{"type":"text","value":" for the site because it’s a fast static site generator built with Node and React. It didn’t hurt that I was already familiar with Gatsby and had experience working with it."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-wrapper"],"style":"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1600px;"},"children":[{"type":"text","value":"\n      "},{"type":"element","tagName":"a","properties":{"className":["gatsby-resp-image-link"],"href":"/static/907f71aa45de5b061e187d8b5d28c597/66e04/toronto-nathan-phillips.jpg","style":"display: block","target":"_blank","rel":["noopener"]},"children":[{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["gatsby-resp-image-background-image"],"style":"padding-bottom: 63.768545994065285%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAAEDBP/EABYBAQEBAAAAAAAAAAAAAAAAAAIBA//aAAwDAQACEAMQAAABtdNGgzf/xAAaEAADAAMBAAAAAAAAAAAAAAAAAQIDERIi/9oACAEBAAEFAnaFPT4RMbMS9bP/xAAWEQADAAAAAAAAAAAAAAAAAAABEBL/2gAIAQMBAT8BgL//xAAWEQADAAAAAAAAAAAAAAAAAAABEBL/2gAIAQIBAT8Bsr//xAAaEAABBQEAAAAAAAAAAAAAAAABAAIQESFR/9oACAEBAAY/AsCoHY5SdH//xAAbEAEAAwADAQAAAAAAAAAAAAABABEhMUFhgf/aAAgBAQABPyHg3MZifE8IeBV2lKLaYZHU/9oADAMBAAIAAwAAABBgD//EABcRAAMBAAAAAAAAAAAAAAAAAAABIUH/2gAIAQMBAT8QSMIf/8QAFhEAAwAAAAAAAAAAAAAAAAAAARBR/9oACAECAQE/EDRf/8QAHBABAAICAwEAAAAAAAAAAAAAAQARITFBUeGx/9oACAEBAAE/ECt7pWvZxIZ0oxaexKgAGAqL8M8G4hOU0KvfyOep/9k='); background-size: cover; display: block;"},"children":[]},{"type":"text","value":"\n  "},{"type":"element","tagName":"picture","properties":{},"children":[{"type":"text","value":"\n        "},{"type":"element","tagName":"source","properties":{"srcSet":["/static/907f71aa45de5b061e187d8b5d28c597/7f61c/toronto-nathan-phillips.webp 400w","/static/907f71aa45de5b061e187d8b5d28c597/d00b9/toronto-nathan-phillips.webp 800w","/static/907f71aa45de5b061e187d8b5d28c597/fad48/toronto-nathan-phillips.webp 1600w","/static/907f71aa45de5b061e187d8b5d28c597/46261/toronto-nathan-phillips.webp 2400w","/static/907f71aa45de5b061e187d8b5d28c597/919bf/toronto-nathan-phillips.webp 3200w","/static/907f71aa45de5b061e187d8b5d28c597/5dc1c/toronto-nathan-phillips.webp 3370w"],"sizes":["(max-width:","1600px)","100vw,","1600px"],"type":"image/webp"},"children":[]},{"type":"text","value":"\n        "},{"type":"element","tagName":"source","properties":{"srcSet":["/static/907f71aa45de5b061e187d8b5d28c597/28275/toronto-nathan-phillips.jpg 400w","/static/907f71aa45de5b061e187d8b5d28c597/f67cc/toronto-nathan-phillips.jpg 800w","/static/907f71aa45de5b061e187d8b5d28c597/e735c/toronto-nathan-phillips.jpg 1600w","/static/907f71aa45de5b061e187d8b5d28c597/1dd40/toronto-nathan-phillips.jpg 2400w","/static/907f71aa45de5b061e187d8b5d28c597/94141/toronto-nathan-phillips.jpg 3200w","/static/907f71aa45de5b061e187d8b5d28c597/66e04/toronto-nathan-phillips.jpg 3370w"],"sizes":["(max-width:","1600px)","100vw,","1600px"],"type":"image/jpeg"},"children":[]},{"type":"text","value":"\n        "},{"type":"element","tagName":"img","properties":{"className":["gatsby-resp-image-image"],"src":"/static/907f71aa45de5b061e187d8b5d28c597/e735c/toronto-nathan-phillips.jpg","alt":"Photo by Scott Webb on Unsplash","title":"Photo by Scott Webb on Unsplash","loading":"lazy","style":"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"},"children":[]},{"type":"text","value":"\n      "}]},{"type":"text","value":"\n  "}]},{"type":"text","value":"\n    "}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{},"children":[{"type":"element","tagName":"image-caption","properties":{},"children":[{"type":"text","value":"Photo by "},{"type":"element","tagName":"a","properties":{"href":"https://unsplash.com/@scottwebb"},"children":[{"type":"text","value":"Scott Webb"}]},{"type":"text","value":" on "},{"type":"element","tagName":"a","properties":{"href":"https://unsplash.com"},"children":[{"type":"text","value":"Unsplash"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Once the decision to use Gatsby was made it was onto selecting a headless CMS to use. Since I was going to host the blog on the excellent "},{"type":"element","tagName":"a","properties":{"href":"https://www.netlify.com/"},"children":[{"type":"text","value":"Netlify"}]},{"type":"text","value":" platform, I wanted to try out the "},{"type":"element","tagName":"a","properties":{"href":"https://www.netlifycms.org/"},"children":[{"type":"text","value":"Netlify CMS"}]},{"type":"text","value":". It’s very cool, using plain Markdown for content and the content is stored in a GIT repository. In my case, the code is stored along with the Gatsby source code for the site."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With the basics sorted out, I headed over to pick a Gatsby starter template to use. Unfortunately, there aren’t many using Netlify CMS and even less that eschew Flow or Typescript. I also knew I wanted to use "},{"type":"element","tagName":"a","properties":{"href":"https://www.styled-components.com/"},"children":[{"type":"text","value":"Styled Components"}]},{"type":"text","value":" to style the pages and "},{"type":"element","tagName":"a","properties":{"href":"https://storybook.js.org/"},"children":[{"type":"text","value":"Storybook"}]},{"type":"text","value":" for developing and viewing components in isolation. After some searching, I decided to use "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/markoradak/gatsby-starter-storybook"},"children":[{"type":"text","value":"Marko Radak’s awesome Gatsby + Storybook starter"}]},{"type":"text","value":". This gave me Storybook + Styled Components and didn’t burden me with things I didn’t need."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Since the Gatsby starter I used was fairly basic, I added in the code to integrate Netlify CMS to the site. I used "},{"type":"element","tagName":"a","properties":{"href":"https://github.com/alxshelepenok/gatsby-starter-lumen"},"children":[{"type":"text","value":"Alexander Shelepenok’s Gatsby Lumen Starter"}]},{"type":"text","value":" as a rough guide for my site and went from there. Some of the features I wanted to add in were time required to read the posts (similar to Medium), a tag cloud that could be used to filter articles by tags and a fast text search to search the articles. The first two are done and I will be working to integrate "},{"type":"element","tagName":"a","properties":{"href":"https://www.algolia.com"},"children":[{"type":"text","value":"Algolia"}]},{"type":"text","value":" search with the site."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Please have patience as I’m continuously working to improve this site and will be adding a few more interesting features as I go along. Hopefully I will move to adding real content to the site in the next couple of weeks."}]}],"data":{"quirksMode":false}},"frontmatter":{"slug":"about-this-blog/","date":"2019-11-26T23:46:37.121Z","description":"This blog is a work in progress. As I work to add more functionality to the blog and the site in general, I will transition into producing real content. Once I've thoroughly tested the functionality I will publish the code as a Gatsby starter template.","tags":["Gatsby","React","StyledComponents","Storybook","ReactTagCloud","Javascript","Node","ReadingTime","NetlifyCMS","Algolia","Toronto"],"title":"About this blog","socialImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5681712424383434,"src":"/static/907f71aa45de5b061e187d8b5d28c597/48ee2/toronto-nathan-phillips.jpg","srcSet":"/static/907f71aa45de5b061e187d8b5d28c597/1a903/toronto-nathan-phillips.jpg 400w,\n/static/907f71aa45de5b061e187d8b5d28c597/b17c1/toronto-nathan-phillips.jpg 800w,\n/static/907f71aa45de5b061e187d8b5d28c597/48ee2/toronto-nathan-phillips.jpg 1600w,\n/static/907f71aa45de5b061e187d8b5d28c597/9397f/toronto-nathan-phillips.jpg 2400w,\n/static/907f71aa45de5b061e187d8b5d28c597/f2701/toronto-nathan-phillips.jpg 3200w,\n/static/907f71aa45de5b061e187d8b5d28c597/dad33/toronto-nathan-phillips.jpg 3370w","srcWebp":"/static/907f71aa45de5b061e187d8b5d28c597/7c22d/toronto-nathan-phillips.webp","srcSetWebp":"/static/907f71aa45de5b061e187d8b5d28c597/1f5c5/toronto-nathan-phillips.webp 400w,\n/static/907f71aa45de5b061e187d8b5d28c597/58556/toronto-nathan-phillips.webp 800w,\n/static/907f71aa45de5b061e187d8b5d28c597/7c22d/toronto-nathan-phillips.webp 1600w,\n/static/907f71aa45de5b061e187d8b5d28c597/f1e40/toronto-nathan-phillips.webp 2400w,\n/static/907f71aa45de5b061e187d8b5d28c597/f9eef/toronto-nathan-phillips.webp 3200w,\n/static/907f71aa45de5b061e187d8b5d28c597/6b93c/toronto-nathan-phillips.webp 3370w","sizes":"(max-width: 1600px) 100vw, 1600px"}}}}}},"pageContext":{"slug":"about-this-blog/"}}}