G.i.G.G.L.E.S OlaCast 13

[olavea]

OlaCast: Sunday Skill-Builder Sessions

Who:

Cap'n Ola · @OlaHolstVea Tom Erik Støwer · Ghostly Guest and Data Dev Dad ·testower

What:

We create 1 node with the id from 1 youtube video,

Why:

To prepare for sourcing only our favourite videos from youtube. Because youtube is NOT a safe tool for Lillian (7 🏴‍☠️👸) and her skill-builder friends.

How:

G.i. of G.i.G.G.L.E.S.

G. Get data later, create node now i. = I a.c.t.i.o.n.s

Let's G.i. Go 📺 !

G. Get data later, create node now

exports.sourceNodes = async (params) => {
  // Get 1 video ready to be sourced into our GraphQL-Gatsby-data river without sinking
  await Promise.all([bakeOneNodeGetOneVideo(params)]);
}

async function bakeOneNodeGetOneVideo() {

}

I. id

  const POW_TUBE_ID = "UGq8cnNTbwI"
  const nodeID = {
    id: POW_TUBE_ID,
  }
  console.log('⛵💀 Yo-Ho Yo-Ho a PiRATEs nodeID 💰', nodeID);

a. actions

  actions.createNode({

c. contentDigest

      contentDigest: createContentDigest(),

t. type

      type: "powTubeOemBed"

         i. internal, because it is NOT polite to have `contentDigest` and `type` under `id`

    internal: {

o. (POW_TUBE_ID)

POW_TUBE_ID

n. node

Go look at our node in GraphiQL

s. Singing

Show drawing of Woolly Goatsby singing

Here is a screenshot of the video I am using the id from and which I will be sourcing some other Sunday

The POW code on Github: https://github.com/olavea/POW/

Sign up for the newsletter:

The original POW website: https://www.usepow.com/

[olavea]

25.jan under 3

fix: 1 video is go pow G.L.E of G.i.G.G.L.E.S #9

---

//const POW_TUBE_IDS_RED_STRING = [ "UGq8cnNTbwI", "eRTJPIa39a4" ] // // G. Get data out of axios-river // // E. Earl and url // // O. oembed data spread into pugNode // // R. Read my data and prop it off to video-layout.js // // G. Got // // E. Embed the html in video-layout.js //const unEmbedData = "get video data from youtube later"; //const embedData = await fetchEmbed(ID_GiGGLES); // // // G. Got: Get the embedData that axios-river got for us // for (pinkyPinksbyPiratyParrot of POW_TUBE_IDS_RED_STRING) { // } console.log('⛵💀 Yo-Ho Yo-Ho a PiRATE TV for me 💰', data); in pugNode //title: unEmbedData, //oembedVideo: oembedVideo,

// src/components/video-layout.js import React from "react"; //import Videos from "./videos"; // <div // className="video-container" // dangerouslySetInnerHTML={{ __html: html }} // /> // line 16

export const query = graphql` query($id: String) { youTubeEmbed: pugNode(id: {eq: $id}) { id title internal { type contentDigest }

}

} `;

import React from "react"; import Videos from "./videos";

const VideoLayout = ({ title, html }) => { return ( <>

{title}

  <div>
    <Videos />
  </div>
</>

); };

export default VideoLayout; 25.jan over 3 24.jan under 2

PugNode

// S. Sing $id:String // export const query = graphql // query($catsby: String) { // youTubeEmbed: pugNode(id: {eq: $catsby}) { // title // } // } //;

24.jan over 2 23.jan under 1

// export const query = graphql // query MdQuery($catsby: String!) { // supplies: markdownRemark(id: {eq: $catsby}) { // frontmatter { // title // } // html // } // } //; // <div dangerouslySetInnerHTML={{ __html: data.supplies.html }}>