feat: source data from RSS (#4)

feat: source data from RSS

packages/gatsby-theme-podcast/content/episodes/01-pilot/pilot.mdx

@@ -1,10 +1,7 @@
 ---
-title: '01: Pilot episode'
-date: '2019-03-20'
-time: '33'
-description: We talk about stuff.
-episodeLink: abcde-12345
-embedUrl: https://hopeinsource.simplecast.com/episodes/1-faith-and-open-source-10d618f0
+title: Woof
+boop: "https://anchor.fm/fullstack-health/episodes/0-Intro-e4egsi"
+ygatsby: eh
 ---
 
 ## Links

packages/gatsby-theme-podcast/content/fragments/credits.mdx

@@ -1,4 +1,5 @@
 <div align="center">
+
 Hosts: Jane Doe & John Doe
 
 Cover Art: Jessica Doe | Music: James Doe

packages/gatsby-theme-podcast/gatsby-config.js

@@ -1,23 +1,23 @@
-const pkg = require('./package.json');
+const pkg = require("./package.json");
 
-module.exports = {
+module.exports = ({ rssSource = "" }) => ({
   siteMetadata: {
-    title: 'The podcast title',
-    author: 'Jane Doe & John Doe',
-    description: 'Description of the show.',
-    gitOrg: 'GitHub org name for the podcast site',
-    siteUrl: 'https://yoursiteurl.com',
+    title: "The podcast title",
+    author: "Jane Doe & John Doe",
+    description: "Description of the show.",
+    gitOrg: "GitHub org name for the podcast site",
+    siteUrl: "https://yoursiteurl.com",
     social: {
-      twitter: '@yourshowhandle'
+      twitter: "@yourshowhandle"
     },
     sources: [
       {
-        name: 'RSS',
-        url: 'https://feeds.simplecast.com/'
+        name: "RSS",
+        url: "https://feeds.simplecast.com/"
       }
     ],
     // Tweet ids
-    praise: [`1117454932880363522`],
+    praise: [`1145685107845603329`],
     appleAppId: false
   },
   plugins: [
@@ -26,74 +26,80 @@ module.exports = {
      * this plugin and specify the package name in `modules`.
      */
     {
-      resolve: 'gatsby-plugin-compile-es6-packages',
+      resolve: "gatsby-plugin-compile-es6-packages",
       options: {
         modules: [pkg.name]
       }
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "@amber1ey/gatsby-source-rss-feed",
       options: {
-        name: 'podcast-episodes',
-        path: 'content/episodes'
+        rssSource
       }
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'podcast-demo-episodes',
+        name: "podcast-episodes",
+        path: "content/episodes"
+      }
+    },
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "podcast-demo-episodes",
         path: `${__dirname}/content/episodes`
       }
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'podcast-fragments',
-        path: 'content/fragments'
+        name: "podcast-fragments",
+        path: "content/fragments"
       }
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'podcast-demo-fragments',
+        name: "podcast-demo-fragments",
         path: `${__dirname}/content/fragments`
       }
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'podcast-assets',
-        path: 'content/assets'
+        name: "podcast-assets",
+        path: "content/assets"
       }
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'podcast-demo-assets',
+        name: "podcast-demo-assets",
         path: `${__dirname}/content/assets`
       }
     },
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
     {
-      resolve: 'gatsby-plugin-typography',
+      resolve: "gatsby-plugin-typography",
       options: {
         pathToConfigModule: require.resolve(`./src/utils/typography`)
       }
     },
     {
-      resolve: 'gatsby-plugin-mdx',
+      resolve: "gatsby-plugin-mdx",
       options: {
         defaultLayouts: {
-          default: require.resolve('./src/components/Layout.js')
+          default: require.resolve("./src/components/Layout.js")
         }
       }
     },
     {
-      resolve: 'gatsby-plugin-page-creator',
+      resolve: "gatsby-plugin-page-creator",
       options: {
         path: `${__dirname}/src/pages`
       }
     }
   ]
-};
+});

packages/gatsby-theme-podcast/gatsby-node.js

@@ -1,7 +1,5 @@
 const fs = require("fs");
 const path = require("path");
-const Promise = require("bluebird");
-const _ = require("lodash");
 
 exports.onPreBootstrap = ({ reporter }) => {
   const dirs = [
@@ -19,107 +17,61 @@ exports.onPreBootstrap = ({ reporter }) => {
   });
 };
 
-exports.createPages = ({ graphql, actions }) => {
+exports.createPages = async function createPages({ graphql, actions }) {
   const { createPage } = actions;
-
-  return new Promise((resolve, reject) => {
-    const episodePage = require.resolve("./src/templates/episode-page.js");
-    resolve(
-      graphql(
-        `
-          {
-            allMdx(
-              sort: {
-                fields: [frontmatter___date, frontmatter___title]
-                order: DESC
-              }
-              filter: {
-                fields: {
-                  source: { in: ["podcast-demo-episodes", "podcast-episodes"] }
-                  slug: { ne: null }
-                }
-              }
-              limit: 1000
-            ) {
-              edges {
-                node {
-                  fields {
-                    slug
-                  }
-                  frontmatter {
-                    title
-                  }
-                }
-              }
-            }
+  const rssItemPage = require.resolve("./src/templates/episode-page.js");
+  const result = await graphql(
+    `
+      {
+        allRssFeedItem(sort: { fields: [pubDate], order: DESC }) {
+          nodes {
+            title
+            slug
           }
-        `
-      ).then(result => {
-        if (result.errors) {
-          console.log(result.errors);
-          reject(result.errors);
         }
+      }
+    `
+  ).then(response => {
+    if (response.errors) {
+      throw new Error(response.errors);
+    }
+    return response;
+  });
 
-        // Create episode pages.
-        const episodes = result.data.allMdx.edges;
-        _.each(episodes, (episode, index) => {
-          const previous =
-            index === episodes.length - 1 ? null : episodes[index + 1].node;
-          const next = index === 0 ? null : episodes[index - 1].node;
+  // Create item pages.
+  const rssItems = result.data.allRssFeedItem.nodes;
+  rssItems.forEach((rssItem, index) => {
+    const previous =
+      index === rssItems.length - 1 ? null : rssItems[index + 1].node;
+    const next = index === 0 ? null : rssItems[index - 1].node;
 
-          createPage({
-            path: episode.node.fields.slug,
-            component: episodePage,
-            context: {
-              slug: episode.node.fields.slug,
-              previous,
-              next
-            }
-          });
-        });
-      })
-    );
+    createPage({
+      path: rssItem.slug,
+      component: rssItemPage,
+      context: {
+        slug: rssItem.slug,
+        previous,
+        next
+      }
+    });
   });
 };
 
-let userCreatedOwnEpisodes = false;
-
-exports.onCreateNode = ({ node, actions, getNode }) => {
-  const { createNodeField } = actions;
-
-  if (node.internal.type === `Mdx`) {
-    // create source field
-    const fileNode = getNode(node.parent);
+// Connect mdx notes/transcripts to episode
+exports.onCreateNode = async ({ node, actions, getNodesByType }) => {
+  const { createParentChildLink } = actions;
 
-    const source = fileNode.sourceInstanceName;
-
-    createNodeField({
-      node,
-      name: `source`,
-      value: source
-    });
-
-    const eligibleEpisodeSources = [
-      "podcast-demo-episodes",
-      "podcast-episodes"
-    ];
+  if (node.internal.type !== `Mdx`) {
+    return;
+  }
 
-    if (eligibleEpisodeSources.includes(source)) {
-      if (source === "podcast-episodes") {
-        userCreatedOwnEpisodes = true;
-      }
+  const rssItemNodes = getNodesByType(`rssFeedItem`);
 
-      if (userCreatedOwnEpisodes && source === "podcast-demo-episodes") {
-        return;
-      }
+  const filtered = rssItemNodes.find(rssItemNode => {
+    return rssItemNode.link === node.frontmatter.boop;
+  });
 
-      // create slug for episode pages
-      const value = path.parse(node.fileAbsolutePath).name;
-      createNodeField({
-        name: `slug`,
-        node,
-        value
-      });
-    }
+  if (filtered) {
+    createParentChildLink({ parent: filtered, child: node });
   }
 };

packages/gatsby-theme-podcast/package.json

@@ -5,6 +5,7 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
+    "@amber1ey/gatsby-source-rss-feed": "*",
     "@mdx-js/mdx": "^1.0.4",
     "@mdx-js/react": "^1.0.2",
     "gatsby-image": "^2.0.34",
@@ -14,23 +15,26 @@
     "gatsby-plugin-sharp": "^2.0.29",
     "gatsby-plugin-typography": "^2.2.10",
     "gatsby-source-filesystem": "^2.0.27",
+    "gatsby-source-rss": "^1.0.0",
     "gatsby-transformer-sharp": "^2.1.17",
+    "lodash.get": "^4.4.2",
     "react-helmet": "^5.2.0",
     "react-twitter-embed": "^2.0.7",
     "react-typography": "^0.16.19",
+    "rss-parser": "^3.7.2",
     "syntax-podcast-player": "*",
     "typeface-merriweather": "^0.0.72",
     "typeface-montserrat": "^0.0.54",
     "typography": "^0.16.19",
     "typography-theme-wordpress-2016": "^0.16.19"
   },
   "devDependencies": {
-    "gatsby": "^2.1.38",
+    "gatsby": "^2.13.25",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   },
   "peerDependencies": {
-    "gatsby": "^2.1.38",
+    "gatsby": "^2.13.25",
     "react": "^16.8.4",
     "react-dom": "^16.8.4"
   }

packages/gatsby-theme-podcast/src/components/Description.js

@@ -1,23 +1,20 @@
 import React from "react";
-import { StaticQuery, graphql } from "gatsby";
-import { MDXRenderer } from "gatsby-plugin-mdx";
+import { useStaticQuery, graphql } from "gatsby";
+// import { MDXRenderer } from "gatsby-plugin-mdx";
 
 const query = graphql`
   query getDescription {
-    mdx(fileAbsolutePath: { regex: "/content/fragments/description/" }) {
-      id
-      body
+    # mdx(fileAbsolutePath: { regex: "/content/fragments/description/" }) {
+    #   id
+    #   body
+    # }
+    rssFeedInfo {
+      description
     }
   }
 `;
 
-const PodcastDescription = () => (
-  <StaticQuery
-    query={query}
-    render={data => {
-      return <MDXRenderer>{data.mdx.body}</MDXRenderer>;
-    }}
-  />
-);
-
-export default PodcastDescription;
+export default () => {
+  const data = useStaticQuery(query);
+  return <p>{data.rssFeedInfo.description}</p>;
+};