fix: need image

content/gatsby-plugin-image-cdn/_bintro.md

@@ -0,0 +1,9 @@
+
+
+
+
+
+A print-out-PDF
+- for a dev-rel at a CMS or
+- for a Gatsby-dev
+PART 1 OF 3

content/gatsby-plugin-image-cdn/_intro.md

@@ -0,0 +1,3 @@
+Let’s talk about:
+- what doing ONE dev-task again && again is like. And
+- how you can automate in your dev-brain that ONE dev-task by doing it again && again. On and on.

content/gatsby-plugin-image-cdn/_jagain-again-again.md

@@ -0,0 +1,12 @@
+Doing your dev-task again && again is a little like playing Happy Birthday on a piano until the melody sticks to your fingers.
+
+Why do we devs so seldom do our dev-tasks again && again?
+
+Because….
+
+But wait! Since I am a plugin-pirate captain I can say «Let’s skip ahead to my next question!»
+
+**What can a plugin-pirate do to find out if a thing is doable or not doable?**
+
+Or more specifically….
+

content/gatsby-plugin-image-cdn/_oyo-ho.md

@@ -0,0 +1,7 @@
+
+
+**Here we go!**
+
+Yo-Ho!
+Yo-Ho!
+A pirate’s life for me!

content/gatsby-plugin-image-cdn/_plugin.md

@@ -0,0 +1,8 @@
+- Is WHAT you’re DOING. And
+- WHY is faster builds ++
+
+«Nothing weirdly piraty about our WHAT and WHY.» You say?
+No, but our HOW will be slightly more piraty than you’re used to.
+
+Firstly you’ll not be coding the first few times, you’ll be guessing.
+Secondly you’ll not even TRY to finish the whole IMAGE CDN Upgrade, you’ll only do the first third of the dev-task.

content/gatsby-plugin-image-cdn/_steps.md

@@ -0,0 +1,6 @@
+G. A new GraphQL _ _ _ _ _ _ type
+
+I. Inside?
+M. Must I?
+
+G. A new GraphQL _ _ _ _ _ _ type

content/gatsby-plugin-image-cdn/_sub-step-1.md

@@ -0,0 +1,6 @@
+![g1](./g1.jpg)
+
+GraphQL node type
+GraphQL kraken type
+GraphQL octopus type
+GraphQL object type

content/gatsby-plugin-image-cdn/_sub-step-2.md

@@ -0,0 +1,17 @@
+![g2](./g2.jpg)
+
+```js
+
+        interfaces: [`Node`, `RemoteFile`],
+
+        name: `....`,
+        fields: {
+          youTubeId: "String!",
+        },
+
+      schema
+
+                  .buildObjectType({
+
+
+```

content/gatsby-plugin-image-cdn/_sub-step-3.md

@@ -0,0 +1,6 @@
+![g3](./g3.jpg)
+
+TobbieThumbnailKraken
+TobbieYouTubeThumbnailObject
+ThumbnailTobbieOctopus
+YouTubeThumbnailTobbie

content/gatsby-plugin-image-cdn/_sub-step-4.md

@@ -0,0 +1,8 @@
+![g4](./g4.jpg)
+
+```js
+actions.createKraken(
+actions.createNode(
+actions.createNodeField(
+actions.createTypes(
+```

content/gatsby-plugin-image-cdn/_sub-step-5.md

@@ -0,0 +1,6 @@
+```js
+const createYouTubeNode = async (gatsbyUtils, pluginOptions, youTubeId) => {
+const fetchEmbed = async (id) => {
+const createYouTubeThumbnailNode = (gatsbyUtils) => {
+const createYouTubeTypes = (gatsbyUtils) => {
+```

content/gatsby-plugin-image-cdn/_sub-step-6.md

@@ -0,0 +1,6 @@
+```js
+{}
+[]
+()
+##
+```

content/gatsby-plugin-image-cdn/_sub-step-7.md

@@ -0,0 +1,8 @@
+
+```js
+exports.pluginOptionsSchema = ({ Joi }) => {
+exports.createSchemaCustomization = (gatsbyUtils) => {
+exports.sourceNodes = async (gatsbyUtils, pluginOptions) => {
+exports.onCreateNode = (gatsbyUtils) => {
+```
+

content/gatsby-plugin-image-cdn/_sub-step-8.md

@@ -0,0 +1,6 @@
+```js
+addRemoteFilePlayfillInterface(
+addRemoteFilePolyfillInterface(
+addRemoteFilePollyfilInterface(
+addRemoteFilePiratyInterface(
+```

content/gatsby-plugin-image-cdn/_sub-step-9.md

@@ -0,0 +1,7 @@
+
+```js
+"gatsby-plugin-tools/polyfill-remote-file"
+"gatsby-plugin-utils/polyfill-remote-file"
+"gatsby-utils/polyfill-remote-file"
+"gatsby-plugin-timeship/polyfill-remote-file"
+```

content/gatsby-plugin-image-cdn/index.md

@@ -0,0 +1,39 @@
+---
+title: Gatsby Image CDN
+sections:
+  - title: Again && Again
+    body: ./_bintro.md
+  - title: Before diving deep down into IMAGE CDN
+    body: ./_intro.md
+  - title: What is it like?
+    body: ./_jagain-again-again.md
+  - title: Will DOING a dev-ask again && again help you automate it in your dev-brain?
+    subtitle: “The best way to find out? DOING it!”  – Captain Ola Vea senior.
+    body: ./_oyo-ho.md
+  - title: IMAGE CDN
+    subtitle: Gatsby Plugin Upgrade
+    body: ./_plugin.md
+  - title: How You’ll only do
+    subtitle: the first 3 sub-tasks today
+    body: ./_steps.md
+  - title: Guess her type
+    body: ./_sub-step-1.md
+  - title: Puzzle the shards with arrows
+    body: ./_sub-step-2.md
+  - title: Guess the name of our new type of friend
+    body: ./_sub-step-3.md
+  - title: Guess the "actions...." to "create" Tobbie
+    body: ./_sub-step-4.md
+  - title: Inside which const do you put Tobbie's roof?
+    body: ./_sub-step-5.md
+  - title: Inside which _ _ - will Tobbie live?
+    body: ./_sub-step-6.md
+  - title: Inside which "exports...." do we call Tobbie?
+    body: ./_sub-step-7.md
+  - title: Must I `addRemoteFile........Interface(` to Tobbie?
+    body: ./_sub-step-8.md
+  - title: Must we require ….
+    body: ./_sub-step-9.md
+  - title: Ahoy Shipmate! You DID it!
+    subtitle: Now do it again!
+---

gatsby-config.js

@@ -21,7 +21,23 @@ module.exports = {
 
     //  Currently you cannot use StaticImage
     //  or gatsby-transformer-sharp in SSR or DSG pages. The best workaround is to use an image CDN such as Cloudinary or imgix to host your images. This will give you faster builds and rendering too.
-    `gatsby-transformer-sharp`,
+
+    {
+      resolve: `gatsby-transformer-remark`,
+      options: {
+        plugins: [
+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              // It's important to specify the maxWidth (in pixels) of
+              // the content container as this plugin uses this as the
+              // base for generating different widths of each image.
+              maxWidth: 1333,
+            },
+          },
+        ],
+      },
+    },
     {
       resolve: "gatsby-source-filesystem",
       options: {