Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cometkim/gatsby-source-velog
GatsbyJS source plugin for Velog
https://github.com/cometkim/gatsby-source-velog
gatsby gatsby-plugin gatsby-source
Last synced: 3 months ago
JSON representation
GatsbyJS source plugin for Velog
- Host: GitHub
- URL: https://github.com/cometkim/gatsby-source-velog
- Owner: cometkim
- License: mit
- Created: 2018-10-14T12:25:03.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2022-11-05T11:31:37.000Z (about 2 years ago)
- Last Synced: 2024-05-01T15:33:41.607Z (8 months ago)
- Topics: gatsby, gatsby-plugin, gatsby-source
- Language: TypeScript
- Homepage:
- Size: 94.4 MB
- Stars: 11
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - gatsby-source-velog
README
# gatsby-source-velog
[](https://www.npmjs.org/package/gatsby-source-velog)
[](#LICENSE)
[GatsbyJS](https://www.gatsbyjs.org/) source plugin for [Velog](https://velog.io), the blogging platform created by [@velopert](https://github.com/velopert).
## Installation
```bash
yarn add gatsby-source-velog
```
In your `gatsby-config.js`
```js
{
plugins: [
// ...
{
resolve: 'gatsby-source-velog',
options: {
username: 'cometkim', // Your Velog username (required)
},
},
],
}
```
## Usage
### Query Examples
```graphql
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`](https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/) to render `VelogPost` contents.
Add `gatsby-transformer-remark` into your `gatsby-config.js`
```diff
{
plugins: [
// ...
+ 'gatsby-transformer-remark',
],
}
```
And you can access `MarkdownRemark` nodes from the root `Query` or through the original `VelogPost`.
```graphql
{
allMarkdownRemark {
nodes {
html
}
}
velogPost {
childMarkdownRemark {
html
tableOfContents
}
}
}
```
### Thumnail Images
Every thumbnail contents are cloned to [remote `File` nodes](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/#createremotefilenode). So you can own the images and optimize it using [`gatsby-plugin-image`](https://www.gatsbyjs.com/plugins/gatsby-plugin-image)
## LICENSE
MIT