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

@lekoarts/gatsby-source-flickr

v0.1.1

Published

Source images from Flickr into Gatsby

Downloads

9

Readme

@lekoarts/gatsby-source-flickr

Source images from Flickr into Gatsby. You can leverage any GET endpoint from the Flickr REST API and pull the data directly into Gatsby's GraphQL data layer.

Warning This plugin is in Alpha state (hence the v0.x range) and still in development. Please report any issues you find.

Install

npm install @lekoarts/gatsby-source-flickr

How to use

Add the plugin to your gatsby-config file:

module.exports = {
  plugins: [
    {
      resolve: `@lekoarts/gatsby-source-flickr`,
      options: {}
    }
  ]
}

Plugin Options

api_key (required)

Your Flickr API key. Create an account on Flickr, go to App Garden to register an app and copy the API key.

Field type: String

{
  resolve: `@lekoarts/gatsby-source-flickr`,
  options: {
    api_key: `YOUR_API_KEY`,
  },
}

username (required)

Your Flickr username.

Field type: String

{
  resolve: `@lekoarts/gatsby-source-flickr`,
  options: {
    username: `LekoArts`,
  },
}

endpoints

Allows you to configure the endpoints that the plugin is requesting from Flickr. It sets people.getPublicPhotos as a default if no endpoints is defined.

Field type: Array

Default value: [{"method":"flickr.people.getPublicPhotos","args":{"extras":"description,last_update,date_taken,url_sq,url_t,url_s,url_q,url_m,url_n,url_z,url_c,url_l,url_o,media,views,original_format"}}]

{
  resolve: `@lekoarts/gatsby-source-flickr`,
  options: {
    endpoints: [
      {
        // Docs: https://www.flickr.com/services/api/flickr.photosets.getPhotos.html
        method: `flickr.photosets.getPhotos`,
        args: {
          photoset_id: `123`,
          // If you don't want to get the photoset from your Flickr account, you can pass the user_id of another user.
          user_id: `123`,
          extras: `geo,tags,owner_name`,
        }
      }
    ],
  },
}

endpoints[].method (required)

Refer to the Flickr API for available methods. You can use any GET API.

Field type: String

endpoints[].args

Pass any required or additional arguments to the method.

For example, photosets.getPhotos requires the api_key, photoset_id, and user_id. For convenience reasons, the plugin automatically adds the api_key and user_id to the arguments. You can override this by passing your own arguments though. So in the example above, you'd only need to pass photoset_id if you want to get a photoset from your Flickr account.

Field type: Object

endpoints[].extension

Unfortunately endpoints like photosets.getList only return the list of photosets, not each detailed photoset itself. They want you to first query the list of photosets to get the photoset_id and then use that photoset_id to query the detailed photoset with photosets.getPhotos. In this case, you can use the extension property to make this second API call.

Field type: Object

endpoints[].extension.method (required)

Refer to the Flickr API for available methods. You can use any GET API.

Field type: String

endpoints[].extension.mapping (required)

The mapping between a unique identifier from the first API call and the second API call. Delimited by a :. The left side is the property from the first call, the right side the second call.

So for example, with the photosets.getList method you get the id of each photoset. The method photosets.getPhotos requires photoset_id as an argument (which can come from the previous call). So the mapping should be id:photoset_id.

When the GraphQL nodes for this extension are created, a backreference to the first API call will be added. So in above example, the GraphQL nodes for the photosets.getPhotos method will have a photoset_id property.

Field type: String

endpoints[].extension.args

Pass any required or additional arguments to the method.

For example, photosets.getPhotos requires the api_key, photoset_id, and user_id. For convenience reasons, the plugin automatically adds the api_key and user_id to the arguments. You can override this by passing your own arguments though. So in the example above, you'd only need to pass photoset_id if you want to get a photoset from your Flickr account.

Field type: Object