Merge pull request #3 from sudaraka94/post/gatsbyjs-for-dummies

[Post] Gatsbyjs for dummies

content/posts/2021-12-06-go-embed-instead-of-packr/index.md

@@ -10,20 +10,29 @@ internal dashboards and the UI tend to be served from the respective microservic
 (or any other service), you need to serve the UI files from the service. But specially in Golang, this used to be not very 
 straight forward. Althogh we can serve files from a certain folder using a static file server feature in Golang, the language was missing the native support to bundle ui files with the service executable. For getting this done, there are several open source golang libraries out there such as,
 
-  - [github.com/alecthomas/gobundle](github.com/alecthomas/gobundle)
-  - [github.com/GeertJohan/go.rice](github.com/GeertJohan/go.rice)
-  - [github.com/go-playground/statics](github.com/go-playground/statics)
-  - [github.com/gobuffalo/packr](github.com/gobuffalo/packr)
-  - [github.com/knadh/stuffbin](github.com/knadh/stuffbin)
-  - [github.com/mjibson/esc](github.com/mjibson/esc)
-  - [github.com/omeid/go-resources](github.com/omeid/go-resources)
-  - [github.com/phogolabs/parcello](github.com/phogolabs/parcello)
-  - [github.com/pyros2097/go-embed](github.com/pyros2097/go)
-  - [github.com/rakyll/statik](github.com/rakyll/statik)
-  - [github.com/shurcooL/vfsgen](github.com/shurcooL/vfsgen)
-  - [github.com/UnnoTed/fileb0x](github.com/UnnoTed/fileb0x)
-  - [github.com/wlbr/templify](github.com/wlbr/templify)
-  - [perkeep.org/pkg/fileembed](perkeep.org/pkg/fileembed)
+ [github.com/alecthomas/gobundle](https://github.com/alecthomas/gobundle)
+
+ [github.com/GeertJohan/go.rice](https://github.com/GeertJohan/go.rice)
+
+ [github.com/go-playground/statics](https://github.com/go-playground/statics)
+
+ [github.com/gobuffalo/packr](https://github.com/gobuffalo/packr)
+
+ [github.com/knadh/stuffbin](https://github.com/knadh/stuffbin)
+
+ [github.com/mjibson/esc](https://github.com/mjibson/esc)
+
+ [github.com/omeid/go-resources](https://github.com/omeid/go-resources)
+
+ [github.com/phogolabs/parcello](https://github.com/phogolabs/parcello)
+
+ [github.com/rakyll/statik](https://github.com/rakyll/statik)
+
+ [github.com/shurcooL/vfsgen](https://github.com/shurcooL/vfsgen)
+
+ [github.com/UnnoTed/fileb0x](https://github.com/UnnoTed/fileb0x)
+
+ [github.com/wlbr/templify](https://github.com/wlbr/templify)
 
 We we using the packer library from above. On the high level, these libraries serialized all the static content and 
 stored the serialized contents inside `.go` files. So once we update any of the static contents, we had to run a specific command

content/posts/2024-04-10-gatsby-js-for-dummys/index.mdx

@@ -0,0 +1,89 @@
+---
+title: GatsbyJS for Dummies
+author: Sudaraka Jayathilaka
+date: 2024-04-10
+hero: ./images/hero.png
+excerpt: Recently I wanted to rewamp my personal website. While in the quest for the **Ideal** template, I came found this super clean looking template
+---
+
+Recently I wanted to revamp my personal website. While in the quest for the **Ideal** template, I came found this super clean-looking
+template by, [Narative](https://www.narative.co/) called, Novela.
+
+[https://novela.narative.co/](https://novela.narative.co/)
+
+But it seemed the theme dev stopped somewhere in 2019 and they have taken the repository offline with only leaving only an 
+[npm package](https://www.npmjs.com/package/@narative/gatsby-theme-novela). I really wanted to build my personal website/blog 
+using this theme, but again,I didn't want to base my blog on an unmaintained Gatsby theme from NPM (which) doesn't have a public repository.
+
+So I took matters into my own hands and created my own fork and ported it to the latest React and Gatsby versions. While doing this, 
+I learned a lot about GatsbyJS and how it works. So I thought of sharing my experience with you all.
+
+## What is GatsbyJS?
+
+GatsbyJS is a framework for building static websites. Gatsby is powered by several popular technoliges like React, graphql and 
+webpack. In essence, GatsbyJS lets you provide data in several formats and let's you render websites using the data as static websites.
+The journey starts with data sourcing.
+
+## Data Sources
+
+![source-plugins](./images/source-plugins.png)
+
+GatsbyJS allows you to provide data in several different formats such as,
+- Markdown Files
+- MDX Files
+- Via CMS like,
+    - Contentful
+    - WordPress
+    - Drupal
+
+I just mentioned a few. Not only that, Gatsby simply allows you to create your own source plugin as well and has a very good documentation
+on how to do it.
+
+[Creating a Source Plugin](https://www.gatsbyjs.com/docs/tutorial/creating-a-source-plugin/)
+
+Once you configure a source plugin, GatsbyJS sources the data provided and exposes the data via GraphQL. This data can be queried by pages
+for rendering information.
+
+## Lifecycle APIs
+
+Once the data is sourced, the data might not be ready for rendering just yet. Gatsby provides multiple lifestyle hooks
+which gets executed at different stages of the build process. These hooks can be used to transform the data, create new pages, etc.
+
+One example case would be the [onCreateNode](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#onCreateNode) API which
+gets executed when a new node is created. This can be used to transform the data before it gets exposed via GraphQL. 
+
+Another important hook is the [createPages](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/#createPages) hook which
+gets executed after the data is sourced and transformed. This hook can be used dynamically to create pages from the sourced data.
+
+The below documentation lists down all the lifecycle hooks available in GatsbyJS and when they get executed.
+
+[Bootstrap sequence](https://www.gatsbyjs.com/docs/conceptual/gatsby-lifecycle-apis/#bootstrap-sequence)
+
+## Rendering Content
+
+Once the data is sourced and transformed, the next step is to render the content. You can use React components to render the content.
+GatsbyJS provides a way to create pages using React components. When creating pages in the `createPage` hook, you can provide react
+components as the template for the page. You can check out the examples in the official documentation.
+
+[creatingPages](https://www.gatsbyjs.com/docs/reference/routing/creating-routes/#using-gatsby-nodejs)
+
+
+## Plugins
+
+Although I just explained the most basic concepts of Gatsby, there is so much more to GatsbyJS. Apart from all the Gatsby built-in
+features, there are a lot of plugins available that can be used to extend the functionality of GatsbyJS. You can find the plugins
+in the official [GatsbyJS plugin library](https://www.gatsbyjs.com/plugins). For example, you can use 
+
+[emotion-plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-emotion#gatsby-plugin-emotion)
+
+to use emotion CSS in your Gatsby project which helps adding css in js.
+
+## Conclusion
+
+Gatsby is a very powerful tool for building static websites. It has very good documentation and very good community support, not to mention
+a bunch of plugins are available to extend the functionality. If you are looking to build a static website, GatsbyJS is a very good choice. You can check out
+my fork of the Novela theme which I used for my personal website below,
+
+[github-novela](https://github.com/sudaraka94/gatsby-theme-novela)
+
+[node-novela](https://www.npmjs.com/package/@sudaraka94/gatsby-theme-novela)

package.json

@@ -10,12 +10,13 @@
     "deploy": "gatsby build && gh-pages -d public -b main"
   },
   "dependencies": {
-    "@sudaraka94/gatsby-theme-novela": "^1.0.1",
+    "@sudaraka94/gatsby-theme-novela": "^1.1.3",
     "gatsby": "^5.13.3",
     "gatsby-plugin-google-gtag": "^5.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "gh-pages": "^6.1.1"