feat: source youtube

Author: raae

demo/gatsby-config.js

@@ -3,8 +3,7 @@ module.exports = {
     {
       resolve: "@raae/gatsby-source-youtube-oembed",
       options: {
-        emoji: "pirate",
-        message: "Hello!!!",
+        youTubeIds: ["Bk1jonYPFD4", "TzJfepDjpzM"],
       },
     },
   ],

demo/src/pages/index.js

@@ -1,6 +1,7 @@
 import React from "react";
+import { graphql } from "gatsby";
 
-const IndexPage = () => {
+const IndexPage = ({ data }) => {
   return (
     <main>
       <header>
@@ -13,9 +14,22 @@ const IndexPage = () => {
             &nbsp;🎉
           </span>
         </h1>
+        <pre>{JSON.stringify(data, null, 4)}</pre>
       </header>
     </main>
   );
 };
 
+export const query = graphql`
+  {
+    allYouTube {
+      nodes {
+        oEmbed {
+          title
+        }
+      }
+    }
+  }
+`;
+
 export default IndexPage;

plugin/constants.js

@@ -1,15 +1,56 @@
 // https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/
 
-const { EMOJIS } = require("./constants");
-
-const validKeys = Object.keys(EMOJIS);
+const axios = require("axios");
+const { createRemoteFileNode } = require(`gatsby-source-filesystem`);
 
 exports.pluginOptionsSchema = ({ Joi }) => {
   return Joi.object({
-    message: Joi.string().default("Hello from the Plugin"),
-    emoji: Joi.string()
-      .valid(...validKeys)
-      .default(validKeys[0])
-      .description(`Select between the emoji options`),
+    youTubeIds: Joi.array().items(Joi.string()),
+  });
+};
+
+const fetchEmbed = async (id) => {
+  const ytUrl = `https://youtu.be/${id}`;
+  const { data } = await axios.get("https://www.youtube.com/oembed", {
+    params: {
+      url: ytUrl,
+    },
   });
+  return data;
+};
+
+const prepYouTubeNode = async (gatsbyUtils, id) => {
+  const {
+    actions: { createNode },
+    getCache,
+    createNodeId,
+    createContentDigest,
+  } = gatsbyUtils;
+
+  const youTubeNodeId = createNodeId(`you-tube-${id}`);
+  const embedData = await fetchEmbed(id);
+
+  const imageFile = await createRemoteFileNode({
+    // The source url of the remote file
+    url: embedData.thumbnail_url,
+    parentNodeId: youTubeNodeId,
+    getCache,
+    createNode,
+    createNodeId,
+  });
+
+  createNode({
+    id: youTubeNodeId,
+    oEmbed: embedData,
+    thumnail___NODE: imageFile.id,
+    internal: {
+      type: `YouTube`,
+      contentDigest: createContentDigest(embedData),
+    },
+  });
+};
+
+exports.sourceNodes = async (gatsbyUtils, pluginOptions) => {
+  const { youTubeIds = [] } = pluginOptions;
+  await Promise.all(youTubeIds.map((id) => prepYouTubeNode(gatsbyUtils, id)));
 };

plugin/gatsby-browser.js

@@ -24,7 +24,10 @@
   },
   "homepage": "https://github.com/queen-raae/gatsby-source-youtube-oembed#readme",
   "devDependencies": {},
-  "dependencies": {},
+  "dependencies": {
+    "axios": "0.25.0",
+    "gatsby-source-filesystem": "4.6.0"
+  },
   "peerDependencies": {
     "gatsby": "^3.0.0 || ^4.0.0"
   }