Gatsby icon Simplecast icon

gatsby-source-simplecast

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

Installation

code style: prettier

$ 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