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
Top comments (2)
Great work!
I am planning to rebuild my personal site with Gridsome and this comes handy ;)
Thank you Bruno, glad you find it useful.
Please do leave a comment when you finish the rebuild of your site. :)