npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-source-xkcd

v1.0.0

Published

Gatsby source plugin for building websites with XKCD as a data source

Downloads

1

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:

  1. Zero Config
  2. 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:

  1. latest
  2. comicIds
  3. 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:

  1. Zero-Config
  2. Basic Query

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!