gatsby-source-velog

GatsbyJS source plugin for Velog, the blogging platform created by @velopert.

Installation

yarn add gatsby-source-velog

In your gatsby-config.js

{
  plugins: [
    // ...
    {
      resolve: 'gatsby-source-velog',
      options: {
        username: 'cometkim', // Your Velog username (required)
      },
    },
  ],
}

Usage

Query Examples

query MyProfile {
  velogUser {
    username
    displayName
    bio
    aboutHtml
    socialProfile {
      url
      github
      twitter
    }
  }
}

query MyAllPosts {
  velogUser {
    posts {
      title
      series {
        node {
          name
        }
      }
    }
  }
}

See in GraphiQl while gatsby develop for more detail.

Rendering Markdown

You can use gatsby-transformer-remark to render VelogPost contents.

Add gatsby-transformer-remark into your gatsby-config.js

{
  plugins: [
    // ...
+   'gatsby-transformer-remark',
  ],
}

And you can access MarkdownRemark nodes from the root Query or through the original VelogPost.

{
  allMarkdownRemark {
    nodes {
      html
    }
  }
  velogPost {
    childMarkdownRemark {
      html
      tableOfContents
    }
  }
}

Thumnail Images

Every thumbnail contents are cloned to remote File nodes. So you can own the images and optimize it using gatsby-plugin-image

LICENSE

MIT