Initial version

Author: chrissearle

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry",
+        "shippedProposals": true,
+        "modules": "commonjs",
+        "targets": {
+          "node": 4
+        }
+      }
+    ]
+  ]
+}

.editorconfig

@@ -0,0 +1,19 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{*.json, *.svg}]
+indent_style = space
+indent_size = 4
+
+# Matches the exact package.json, or *rc
+[{package.json,*.yml,*rc}]
+indent_style = space
+indent_size = 2

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+/gatsby-node.js

.npmignore

@@ -0,0 +1,3 @@
+src
+.babelrc
+.editorconfig

README.md

@@ -0,0 +1,93 @@
+# gatsby-source-pixabay
+
+This source plugin for Gatsby will make images from [Flickr](https://flickr.com/) available in GraphQL queries.
+
+## Derivation
+
+This source plugin is **heavily** based on [Jason Lengstorf's](https://github.com/jlengstorf) [gatsby-source-pixabay](https://github.com/jlengstorf/gatsby-source-pixabay)
+
+## Installation
+
+```sh
+# Install the plugin
+yarn add gatsby-source-flickr
+```
+
+In `gatsby-config.js`:
+
+```js
+module.exports = {
+  plugins: [
+    {
+      resolve: "gatsby-source-flickr",
+      options: {
+        api_key: "YOUR_FLICKR_API_KEY"
+      }
+    }
+  ]
+};
+```
+
+**NOTE:** To get a Flickr API key, [register for a Flickr account](https://www.flickr.com/signup). You will then need to create a [Flickr API app](https://www.flickr.com/services/apps/create/).
+
+## Configuration Options
+
+The configuration options for this plugin mirror the [Flickr photo search API call options](https://www.flickr.com/services/api/flickr.photos.search.html). The only **required** option is the `api_key`.
+
+The plugin will add defaults for certain other fields:
+
+| key            | default value                                                                                                                                                                                                                          | comment                                                                           |
+| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| method         | flickr.photos.search                                                                                                                                                                                                                   | the plugin expects the call to use the photo search api                           |
+| extras         | description, license, date_upload, date_taken, owner_name, icon_server, original_format, last_update, geo, tags, machine_tags, o_dims, views, media, path_alias, url_sq, url_t, url_s, url_q, url_m, url_n, url_z, url_c, url_l, url_o | these are the fields (all the available ones as of the time of writing)           |
+| per_page       | 500                                                                                                                                                                                                                                    | the number of photos per page (API call pagination) - 500 is the current maximum) |
+| format         | json                                                                                                                                                                                                                                   | the plugin expects json                                                           |
+| nojsoncallback | 1                                                                                                                                                                                                                                      | the plugin expects json - if this is not set then flickr returns jsonp            |
+
+### Example Configuration
+
+This would retrieve all photos for a given user id.
+
+```js
+module.exports = {
+  plugins: [
+    {
+      resolve: "gatsby-source-flickr",
+      options: {
+        key: process.env.FLICKR_API_KEY,
+        user_id: process.env.FLICKR_USER_ID
+      }
+    }
+  ]
+};
+```
+
+## Querying Flickr Images
+
+Once the plugin is configured, two new queries are available in GraphQL: `allFlickrPhoto` and `flickrPhoto`.
+
+Here’s an example query to load 10 images:
+
+```gql
+query PhotoQuery {
+  allFlickrPhoto(limit: 10) {
+    edges {
+      node {
+        id
+        title
+        description
+        tags
+        url_c
+        width_c
+        height_c
+      }
+    }
+  }
+}
+```
+
+## Limitations
+
+The plugin does not handle the Flickr API pagination. It assumes that all the images required will be in the first page (and sets that first page to the maximum size).
+
+The plugin was written to simply allow me to provide a source to my own flickr stream for my own site. It may or may not suit anyone else's needs :)

index.js

@@ -0,0 +1 @@
+// noop

package.json

@@ -0,0 +1,31 @@
+{
+  "name": "gatsby-source-flickr",
+  "description": "A Gatsby source plugin to load resources from the Flickr photo search API.",
+  "author": "Chris Searle <[email protected]>",
+  "repository": "https://github.com/chrissearle/gatsby-source-flickr.git",
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "flickr",
+    "photos"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore __tests__",
+    "prepublish": "yarn build",
+    "format": "prettier --write \"src/**/*.js\""
+  },
+  "dependencies": {
+    "@babel/polyfill": "^7.2.5",
+    "node-fetch": "^2.3.0",
+    "query-string": "^6.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.2.3",
+    "cross-env": "^5.2.0",
+    "prettier": "^1.15.2"
+  },
+  "version": "0.0.1"
+}

src/gatsby-node.js

@@ -0,0 +1,100 @@
+require("@babel/polyfill");
+const fetch = require("node-fetch");
+const queryString = require("query-string");
+
+exports.sourceNodes = async (
+  { boundActionCreators: { createNode }, createNodeId, createContentDigest },
+  { plugins, ...options }
+) => {
+  const sizes = ["sq", "t", "s", "q", "m", "n", "z,", "c", "l", "z"];
+
+  // The flickr API has some issues when put into GraphQL - create a suitable version
+  const fixPhoto = photo => {
+    const fixed = photo;
+
+    // Don't name crash with node.id
+    fixed.photo_id = fixed.id;
+    delete fixed.id;
+
+    // Some fields can come down as either string or number. GraphQL doesn't like that. Force everything to number
+
+    sizes.forEach(suffix => {
+      if (fixed.hasOwnProperty(`height_${suffix}`)) {
+        fixed[`height_${suffix}`] = parseInt(fixed[`height_${suffix}`]);
+      }
+      if (fixed.hasOwnProperty(`width_${suffix}`)) {
+        fixed[`width_${suffix}`] = parseInt(fixed[`width_${suffix}`]);
+      }
+    });
+
+    if (fixed.hasOwnProperty("accuracy")) {
+      fixed.accuracy = parseInt(fixed.accuracy);
+    }
+
+    // A missing latitude or longitude can come down as either 0 or "0" - force to string
+
+    if (fixed.hasOwnProperty("latitude")) {
+      fixed.latitude = "" + fixed.latitude;
+    }
+    if (fixed.hasOwnProperty("longitude")) {
+      fixed.longitude = "" + fixed.longitude;
+    }
+
+    // These can come down as either string or number. Have only ever seen "0" and 0 here - and documentation is sparse - remove them
+
+    if (fixed.hasOwnProperty("datetakengranularity")) {
+      delete fixed.datetakengranularity;
+    }
+    if (fixed.hasOwnProperty("datetakenunknown")) {
+      delete fixed.datetakenunknown;
+    }
+
+    // Convert Date versions of dateupload and lastupdate
+
+    if (fixed.hasOwnProperty("dateupload")) {
+      fixed.dateupload_date = new Date(fixed.dateupload * 1000);
+    }
+    if (fixed.hasOwnProperty("lastupdate")) {
+      fixed.lastupdate_date = new Date(fixed.lastupdate * 1000);
+    }
+
+    // Simplify the structure of the description to just a string
+
+    if (fixed.hasOwnProperty("description")) {
+      if (fixed.description.hasOwnProperty("_content")) {
+        fixed.description = fixed.description._content;
+      }
+    }
+
+    return fixed;
+  };
+
+  const url = `https://api.flickr.com/services/rest/?${queryString.stringify({
+    method: "flickr.photos.search",
+    extras:
+      "description, license, date_upload, date_taken, owner_name, icon_server, original_format, last_update, geo, tags, machine_tags, o_dims, views, media, path_alias, url_sq, url_t, url_s, url_q, url_m, url_n, url_z, url_c, url_l, url_o",
+    per_page: 500,
+    format: "json",
+    nojsoncallback: 1,
+    ...options
+  })}`;
+
+  const response = await fetch(url);
+  const data = await response.json();
+
+  data.photos.photo.forEach(raw => {
+    const photo = fixPhoto(raw);
+
+    createNode({
+      ...photo,
+      id: createNodeId(`flickr-photo-${photo.photo_id}`),
+      parent: null,
+      children: [],
+      internal: {
+        type: "FlickrPhoto",
+        content: JSON.stringify(photo),
+        contentDigest: createContentDigest(photo)
+      }
+    });
+  });
+};