SHIP IT FASTER

The average enterprise on Netlify ships 140 times per week. Where does your team rank?

ContactSign Up
Community Plugin
View plugin on GitHub

Gatsby icon Buzzsprout icon

gatsby-source-buzzsprout

A Gatsby plugin to load podcast episodes from the Buzzsprout API. Basic functionality should work, but this is very much a work-in-process. Be prepared for things to break.

Please note that the Buzzsprout API itself is still somewhat fresh and is likely to evolve over time.

Installation

$ npm i gatsby-source-buzzsprout

OR

$ yarn add gatsby-source-buzzsprout

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-buzzsprout',
      options: {
        // You will need to generate an access token and get the podcast ID from your account
        // https://github.com/Buzzsprout/buzzsprout-api#authentication
        token: '1234567890',
        podcastId: '123456',
      },
    },
  ],
};

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';

const PodcastPage = ({
  data: {
    allBuzzsproutPodcastEpisode: { edges: episodes },
  },
}) => {
  return (
    <Layout>
      <h1>My Podcast Episodes</h1>
      <ul>
        {episodes.map(({ node }) => (
          <li key={node.id}>
            <article>
              <h2>
                Episode {node.episode_number}: {node.title}
              </h2>
              <hr />
              <a href={node.audio_url}>Download</a>
            </article>
          </li>
        ))}
      </ul>
    </Layout>
  );
};

export const query = graphql`
  query PodcastPageQuery {
    allBuzzsproutPodcastEpisode {
      edges {
        node {
          id
          title
          audio_url
          episode_number
        }
      }
    }
  }
`;

export default PodcastPage;
© 2023 Gatsby, Inc.