README.md

gatsby-source-simplecast

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

Installation

$ npm i @sergeysova/gatsby-source-simplecast

OR

$ yarn add @sergeysova/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: '@sergeysova/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 Img from 'gatsby-image'
import Layout from 'components/Layout';

// Data from the pageQuery below is available as props to your page component!
const PodcastPage = ({
  data: {
    allSimplecastEpisode: { 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>
              <Img fixed={node.image.childImageSharp.fixed} />
              <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 {
    allSimplecastEpisode {
      edges {
        node {
          id
          slug
          enclosureUrl
          number
          publishedAt(formatString: "MMMM D, Y")
          title
          description
          image {
            childImageSharp {
              fixed(width: 300) {
                ...GatsbyImageSharpFixed
              }
            }
          }
        }
      }
    }
  }
`;

export default PodcastPage;

Options API

Option	Type	Description	Default
token	string (required)	Simplecast API key. See the Simplecast API documentation for details.
podcastId	string (required)	The ID of the podcast you want to fetch. The podcast ID can be found in the URL from your Simplecast dashboard under podcast episode settings.
fetchLimit	number	The maximum number of episodes retrieved.	99