gatsby-source-xkcd
v1.0.0
Published
Gatsby source plugin for building websites with XKCD as a data source
Downloads
1
Maintainers
Readme
gatsby-source-xkcd
A Gatsby source plugin for sourcing data into a Gatsby application from xkcd.com.
The plugin creates xkcd
nodes from comics retrieved from xkcd.com.
For more information on the XKCD API, see: https://xkcd.com/json.html
Install
npm install --save gatsby-source-xkcd
How to use
Setting up the gatsby-source-xkcd
plugin requires only a minor change to your gatsb-config.js
file.
You have two options:
- Zero Config
- With Options
The Zero-Config Approach
The zero-config will fetch the most recent xkcd comic.
module.exports = {
plugins: [
`gatsby-source-xkcd`
//...
]
};
With Options
Configuring the plugin with options can be done with any combination and order of the following options in your gatsby-config.js
:
module.exports = {
plugins: [
{
resolve: `gatsby-source-xkcd`,
options: {
// retrieve comic(s) by specified id
comicIds: [12, 100],
// retrieve multiple comics - randomly selected at build time
comicQuantity: 5,
// retrieve the latest comic
latest: true
}
}
]
};
How to query
Once added to the gatsby-config.js
file, XKCD comics will be available via GraphQL.
The nodes created by this source plugin depend on the configuration provided in gatsby-config.js
.
By default, this plugin will return the latest
node.
If you provide specific options, you will have access to:
latest
comicIds
comicQuantity
Each node is the same shape, though comicIds
and comicQuantity
are arrays of objects while latest
is always just one comic and therefore just an object.
query QueryXkcd {
allXkcd {
nodes {
comicIds {
month
num
link
year
news
safe_title
transcript
alt
img
title
day
}
comicQuantity {
month
num
link
year
news
safe_title
transcript
alt
img
title
day
}
latest {
month
num
link
year
news
safe_title
transcript
alt
img
title
day
}
}
}
}
Examples
We have full Gatsby app examples for both the zero config approach and using basic queries.
You can find these in the example
directory:
Questions? Suggestions? Contributions?
Yes please! Ask away. Create an issue if you find a bug. Open a PR if you think this can be improved!
We'll be adding some templates soon to make this simple!
In the mean time, if you'd like to pull down this repository to play around please do!
If you want to see how your changes work with one of example apps, modify the gatsby-config.js
in there to use a local plugin
For example:
module.exports = {
plugins: [
{
+ resolve: require.resolve(`../../../gatsby-source-xkcd`),
- resolve: `gatsby-source-xkcd`,
},
],
}
Contributors ✨
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind are welcome!