Introducing Utopian's Gatsby Plugin

Gatsby is a static site generator for React. Thus I thought of using it to show all my Utopian posts as a blog. Gatsby has a list of plugins which includes Wordpress, Firebase etc, thus I created Utopian Plugin so that anyone can create their Static site which will show the list of contribution one has done in a field of Open Source.

The demo site code can be seen in https://github.com/codingdefined/gatsby-utopian-blog, its part of this Development Contribution. The demo site sits on codingdefined-utopian.surge.sh.

To Start with this Plugin you need to install it using npm install gatsby-source-utopian and then add it to the gatsby-config.js file

In the gatsby-config.js file you need to add the gatsbt-source-utopian as shown below, where user is the username for which you would like to get all the posts where user is your username.

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-utopian',
      options: {
        user: 'codingdefined',
      },
    },
  ],
};

Once done you can query the GraphQL using the below query which will give you all the information about the posts.

{
  allUtopianPost{
    edges{
      node{
        id
        permlink
        author
        category
        created
        url
      }
    }
  }
}

Then we have changed the index.js to get the information from the GraphQL.

<div>
    {data.allUtopianPost.edges.map(({ node }) => (
      <div>
        <a href={`https://utopian.io${node.url}` }>{node.title}</a> 
                       in {node.json_metadata.type} category 
                      on {new Date(node.created).toLocaleDateString()}
      </div>
    ))}
 </div> 

It is very simple site which will give teh Title and which category it was posted and when it was posted. Once you click that it will take you to Utopian posts.

Technology Stack

• Node.js
• Gatsby
• Utopian NPM Package

Roadmap

Create a full fledged blog with Utopian Contribution

How to contribute?

You can create issues or features in either of the repository

• https://github.com/codingdefined/gatsby-source-utopian (The Source Plugin)
• https://github.com/codingdefined/gatsby-utopian-blog (The Blog)

---

Posted on Utopian.io - Rewarding Open Source Contributors

---