DEV.to source plugin for Gridsome

This package is under development and API might change before v1 is released.

This is a Gridsome source plugin for DEV.to. It retrieves all your published articles via the DEV API (beta).

This plugin merges and exposes the entire schema for both the getArticles and getArticleById so you can benefit from both endpoints effortlessly. This is useful because for example; page_views_count is available on getArticles but not on getArticleById. On the flip-side body_html is available on getArticleById but not on getArticles. Not sure why DEV.to implemented their API like this, but with this plugin, you don't need to worry about it.

Available DEV.to attributes

The combined dev.to schemas provides the following attributes:

• type_of

• id

• title

• description

• published

• readable_publish_date

• published_at

• slug

• url

• comments_count

• public_reactions_count

• page_views_count

• collection_id

• published_timestamp

• positive_reactions_count

• social_image

• canonical_url

• created_at

• edited_at

• crossposted_at

• published_at

• last_comment_at

• tag_list

• tags

• body_html

• body_markdown

• user

Computed attributes

In addition, this plugin provides some handy computed attributes too:

• parsed_markdown: Similar to body_html. However the parsed markdown has been processed to provide some additional extras such syntax highlighting by prism.js and github style auto links. Note: shortcodes are not parsed.

• time_to_read: Estimated time to read an article based on 200 word per minute.

Install

• yarn add @chiubaca/gridsome-source-devto
• npm install @chiubaca/gridsome-source-devto

Example Usage

// gridsome.config.js
module.exports = {
  plugins: [
    {
     use:'@chiubaca/gridsome-source-devto',
      options : {
        typeName: 'DevToArticles',
        devtoAPIKey: process.env.DEVTO_KEY
      }
    }
  ],
  templates: {
    DevToArticles: '/:title'
  }
}

Options

typeName - String (Required)

The prefix to be used for your imported schemas field types.

devtoAPIKey- String (Required)

Get your Dev.to API key by following this instructions https://docs.dev.to/api/index.html#section/Authentication/api_key. It is best to store your key in a .env file rather than exposing it inline in your gridsome.config.js files so that your key is not exposed publicly.

Custom Routes

To add custom routes use the templates config with the collection type name as the key and the custom route as the value.

// gridsome.config.js
module.exports = {
 templates: {
    DevToPosts: '/:title'
  }
}

Display All Articles

You may want to render a list of all article titles like this

<!-- src/pages/Index.vue -->
<template>
  <Layout>
    <h1>All Articles</h1>
    <div v-for="(post, index) in $page.posts.edges" :key="index">
      <g-link :to="post.node.path">{{ post.node.title }}</g-link>
    </div>
  </Layout>
</template>

<page-query>
  query{
    posts: allDevToArticles{
      edges {
        node{
          title
          path
        }
      }
    }
  }
</page-query>

Display A Single Article

You can render the each individual article in the DevToArticles.vue file.

<!-- src/templates/DevToArticles.vue -->
<template>
  <Layout>
    <article v-html="$page.posts.parsed_markdown" ></article>
  </Layout>
</template>

<page-query>
  query DevToArticles ($path: String!) {
    posts: devToArticles (path: $path) {
      title
      parsed_markdown
    }
  }
</page-query>

<script>
import '@/prism_themes/prism-tomorrow.css';
export default {
  metaInfo() {
    return {
      title: this.$page.blogs.title
    };
  }
};
</script>

To stylise your code blocks. You can download different stylesheets compatible with prism.js here.