Introducing DEV.TO Gridsome Source Plugin

#gridsome #api #showdev #webdev

I just created a plugin for Gridsome, a source plugin to retrieve posts from using dev.to API.
You are able to find the plugin on the NPM registry here

What is Gridsome?

Ok, hold on a second! What is Gridsome?

Glad you asked!

Gridsome is a static site generator similar to Gatsby (though still new so not as feature-rich) for the Vue framework. Gridsome makes it easy for developers to build modern JAMstack websites & PWAs that are fast by default.

Why Gridsome?

If you are going to use gridsome you have following by default:

Local development with hot-reloading - See code changes in real-time.

Data source plugins - Connect to any popular Headless CMSs, APIs or Markdown-files.

File-based page routing - Quickly create and manage routes with files.

Centralized data management - Pull data into a local, unified GraphQL data layer.

Vue.js for frontend - A lightweight and approachable front-end framework.

Auto-optimized code - Get code-splitting and asset optimization out-of-the-box.

Static files generation - Deploy securely to any CDN or static web host.

For more in-depth information about Gridsome please read the docs.

How to use this plugin?

Installation

To install this plugin you just need to add it as a dependency on your gridsome project. You can do it by running the following command on your terminal using yarn.

yarn add @perlatsp/gridsome-source-devto

or if you prefer npm

npm install @perlatsp/gridsome-source-devto

When the installation finishes you should be ready for the next step, which is configuring the plugin.

Configuration

Before we continue configuring the plugin, what we need to do first is getting an API key from https://dev.to. To do so, we need to go to dev.to website, go to account->settings and then you should see an input box, add a description for the token and smash that Generate Token button. After doing so, this might take a while for the token to be generated for you (circa 200ms depending on your internet connection 🤪).

Configurration file

When you get your token we can proceed to the next step. Adding the configuration to the gridsome.config.js file. This file is where most of the gridsome configurations live. Open the configuration file and add the following to the plugins array. Like the following

...other gridsome plugins
   {
      use: '@perlatsp/gridsome-source-devto',
      options: {
        typeName: 'Article',
        username:'DEVTO_USERNAME',
        apiKey: process.env.DEVTO_API_KEY,
        route: '/:slug',
      }
    }
... rest of config file

What we did here is to tell gridsome to use our plugin use: '@perlatsp/gridsome-source-devto' with an options object. The options object is pretty straight forward, we are assigning a typeName: 'Article', this is the name of our 'post model' we will use this later to query the posts.

We have username:'DEVTO_USERNAME' which is the author's username we want to retrieve from the API.

ENV File

API key variable, apiKey: process.env.DEVTO_API_KEY which is getting the value from the .env file for security reasons so don't have this in our codebase. We need to create a .env file in our project root directory and add the following DEVTO_API_KEY=THE_API_KEY_FROM_DEVTO_SITE. And the last configuration we need to do is the route. this will be the single post's URL display type. More about gridsome routing here.

Now we are ready to roll to the next step displaying the posts.

Display Posts

To display the posts we need to head over to the Index.vue file and modify the component (if the component does not exist, create one) to reflect the following:

<page-query>
query Home {
    allArticle {
      edges {
        node {
          id
          title
          published_at
          path
          description
          tag_list
          canonical_url
          cover_image
        }
      }
    }
  }
</page-query>

This is a GraphQL query.

GraphQL is a declarative query language especially useful for retrieving only the data you ask for. Which again will result in smaller bundles.

We are registering entities named allArticle (all + the typeName we registered in our config file).

There is no need to get all the data from our articles, so we are requesting some of the nodes (fields) like id, title, description, etc.

Ok, we have our loop query. now what? Is that it?

Of course not! Now we need somehow to display the date we have. to do so, scroll up to the ` component. and modify it to reflect the following :

html <template> <Layout> <h1> Gridsome source plugin for <img src="https://d2fltix0v2e0sb.cloudfront.net/dev-badge.svg" height="30" width="30"></h1> <div v-for="{ node } in $page.allArticle.edges" :key="node.id"> <h2> {{node.title}}</h2> {{node.description}} <div> <g-link :to="node.path" class="single-post-link">Read More</g-link> </div> </div> </Layout> </template>

And voila we can now see our posts! Open your terminal and run yarn develop to compile and create a dev server. your project should be available on http://localhost:8080.

If you followed the previous steps you should have something similar to the following picture. Navigation on top, a heading and the loop with the posts displaying the title, description and the link to the post.

Personally, I don't like how it is visually. Let us add some styles.

A bit better 😄 with simple cards. We have now finished the project and we can run yarn build to generate all the static files and ready to deploy! ⛴

This plugin is still in development and more work needs to be done. Such us displaying more data for the single article page. PRs more than welcome on github