[feat:] add support for Gatsby Image and ImageCDN

[olavea]

feat: add support for Gatsby Image and ImageCDN

IMAGE CDN

Gatsby-source-youtube-oembed Plugin Upgrade

Your dev-task: the WHAT, the WHY and the How.

• WHAT: you’re DOING an IMAGE CDN upgrade on 👑 https://github.com/queen-raae / gatsby-demo-web-scraping. And
• WHY: faster builds and .... gatsby image thumbnails.

«Nothing piraty about WHAT and WHY.» You say? Maybe not, but look at HOW....

• HOW: is guessing, not coding. (Piraty, right❓ 😺 🏴‍☠️ But there's more....)

How: not coding, but guessing

• Firstly you’ll not be coding the first few times, you’ll be guessing. As I mentioned, but also.
• Secondly you’ll be guessing again && again, even if it feels too easy for your dev-brain.

Guess her type

GraphQL node type
GraphQL kraken type
GraphQL octopus type
GraphQL object type

Puzzle the shards of code in the right order

        interfaces: [`Node`, `RemoteFile`],

        name: `....`,
        fields: {
          youTubeId: "String!",
        },

      schema

                  .buildObjectType({

Guess the name of our new type of friend

TobbieThumbnailKraken

TobbieCrowdcastThumbnailObject

ThumbnailTobbieOctopus

CrowdcastThumbnailTobbie

Guess the "actions...." to "create" Tobbie

actions.createKraken(

actions.createNode(

actions.createNodeField(

actions.createTypes(

your next sub-task:

I. Inside and Inside?

Inside which const do you put Tobbie's roof?

const createYouTubeNode = async (gatsbyUtils, pluginOptions, youTubeId) => {

const scrapeCrowdcast = async () => {

const createCrowdcastThumbnailNode = (gatsbyUtils) => {

const createCrowdcastTypes = (gatsbyUtils) => {

Deconstruct what two tools for Tobbie's toolshed?

const { schema, createNodeId } = gatsbyUtils;

const { actions, schema } = gatsbyUtils;

const { actions, createTypes } = gatsbyUtils;

const { createNode, createTypes } = actions;

Inside which "exports...." do we call Tobbie?

exports.createSchema = (gatsbyUtils) => {

exports.createSchemaCustomization = (gatsbyUtils) => {

exports.schemaCustomization = (gatsbyUtils) => {

exports.createCustomSchema = (gatsbyUtils) => {

M. Is your last sub-task:

Must I addRemoteFile........Interface( to Tobbie?

addRemoteFilePlayfillInterface(

addRemoteFilePolyfillInterface(

addRemoteFilePollyfilInterface(

addRemoteFilePiratyInterface(

Must we require "gatsby-plugin- …."

const {
  addRemoteFilePolyfillInterface,
} = require("gatsby-plugin-tools/polyfill-remote-file");

const {
  addRemoteFilePolyfillInterface,
} = require("gatsby-utils/polyfill-remote-file");

const {
  addRemoteFilePolyfillInterface,
} = require("gatsby-plugin-timeship/polyfill-remote-file");

You DID it! 1/3 of the treasure hunt 💪 😺 🏴‍☠️

You've done these 3 sub-tasks:

• G. GraphQL type our heroine

• I. Inside what actions.create.... do we Tobbie?

• M. Must I add....face(?

• [ ] Alice our new assetNode is a const ....Node = { height: 630 , width: 1200, }

const ....Node = {    height: 630 , width: 1200, }

• [ ] Alice uniDonkey goes inside which const ....?

const .... = async (gatsbyUtils, pluginOptions, youTubeId) => {

• [ ] Alice uniDonkey should be called inside which exports....?

exports.createSc....Customization = (gatsbyUtils) => {

• [ ] Alice uniDonkey is created with actions.create....?

actions.create....(

G. is for GrapiQL where we find 🍓 for fields

• [ ] G. Copy

{
    height: 630,
...
}

• [ ] O. is for onCreateDev....?

exports.onCreateDevS....r = ({ app }) => {};

• [ ] Inside goes poly....ImageServiceDevRoutes(app);?

poly....ImageServiceDevRoutes(app);

• A.

• G.

• O.

You DID it! 2/3 of the treasure hunt 💪 😺 🏴‍☠️

C. is for createNodeId(

• [ ] C. copy :

  const youTubeThumbnailNodeId = createNodeId(
    `${YOUTUBE_THUMBNAIL_TYPE} >>> ${....}`
  );

• [ ] C. ${....}`

D. is for Dating

How can we tell the Crowdcast node to go on a blind date with the CrowdcastThumbnail node?

• [ ] D. Copy:

const createYouTubeTypes = (gatsbyUtils) => {
  const { actions, schema } = gatsbyUtils;

  actions.createTypes([
    `
    type YouTube implements Node {
      thumbnail: YouTubeThumbnail @link(
        from: "...."
        by: "...."
      )
    }
  `,

• [ ] D. from: "...." by: "...."

• [ ] N. is for Now you can celbrate!

• C.

• D.

• N.

You DID it! The whole treasure hunt 💪 😺 🏴‍☠️

Ola Vea is a Gatsby-plugin-Dev who also helps Gatsby-Devs waste less time on unsticky dev-learning. Dev at POW! — the private menstrual cycle journal (usepow.app) 👑 @raae You can reach him at: ola@lillylabs

source docs/creating-a-source-plugin/#enabling-image-cdn-support