Introducing Utopian's Gatsby Plugin

codingdefined(76)

Published in

#utopian-io

Words

247

Reading

2 min

Listen

Play

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.