gatsby-source-simplecast

A Gatsby plugin to load podcast episodes from the Simplecast API.

Installation

$ npm i gatsby-source-simplecast

OR

$ yarn add gatsby-source-simplecast

Usage

In your gatsby-config.js file, load in the plugin along with the parameters of which podcast episodes to load:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-simplecast',
      options: {
        token: 'abcdefghijklmnopqrstuvwxyz1234567890',
        podcastId: 'abc123de-456f-gh78-90ij-klmn1234opqr',
      },
    },
  ],
};

In your page, construct a query to get the data you need from the API.

import React from 'react';
import { graphql } from 'gatsby';
import Layout from 'components/Layout';

// Data from the pageQuery below is available as props to your page component!
const PodcastPage = ({
  data: {
    allSimplecastPodcastEpisode: { edges: episodes },
  },
}) => {
  return (
    <Layout>
      <h1>My Podcast Episodes</h1>
      <ul>
        {episodes.map(({ node }) => (
          <li key={node.id}>
            <article>
              <h2>
                Episode {node.number}: {node.title}
              </h2>
              <p>Published {node.publishedAt}</p>
              <hr />
              <p>{node.description}</p>
              <a href={`/podcasts/${node.slug}`}>Listen</a>
              <a href={node.enclosureUrl}>Download</a>
            </article>
          </li>
        ))}
      </ul>
    </Layout>
  );
};

export const pageQuery = graphql`
  query PodcastPageQuery {
    allSimplecastPodcastEpisode {
      edges {
        node {
          id
          slug
          enclosureUrl
          number
          publishedAt(formatString: "MMMM D, Y")
          title
          description
        }
      }
    }
  }
`;

export default PodcastPage;

Options API