@arshad/gatsby-theme-podcast-core

@arshad/gatsby-theme-podcast-core

This core theme includes a Podcast and PodcastEpisode type that you can use to build a podcast site. Episodes are sourced from a Podcast RSS feed. It includes no styles.

Installation

Step 1: In the root of your Gatsby site, run the following command:

yarn add @arshad/gatsby-theme-podcast-core

Step 2: Enable it in gatsby-config.js

// gatsby-config.js
...
  plugins: [
    {
      resolve: `@arshad/gatsby-theme-podcast-core`,
      options: {
        feedUrl: `https://example.com/feed`,
        podcast: {
          name: `Name of Podcast`,
          description: `Eligendi nisi nobis nisi voluptate. Corporis deserunt provident hic numquam. Veritatis vero necessitatibus adipisci cumque voluptate rerum at.`,
          image: `assets/images/podcast.jpg`,
          social: [
            {
              name: `Apple Podcast`,
              url: `https://itunes.apple.com`,
            },
            {
              name: `Google Podcast`,
              url: `https://podcasts.google.com`,
            },
          ],
        },
      },
    },
  ]
...

Theme options

Key	Default value	Description
feedUrl	null	The url for the podcast feed
basePath	/podcast	Root url for all photo posts
episodesPerPage	10	Number of phoepisodestos to show per page for pagination
podcast	null	Configuration for the podcast. Includes name, description, image and social {name, url} links.

Example usage

// gatsby-config.js
// gatsby-config.js
...
  plugins: [
    {
      resolve: `@arshad/gatsby-theme-podcast-core`,
      options: {
        feedUrl: `https://example.com/feed`,
        podcast: {
          name: `Name of Podcast`,
          description: `Eligendi nisi nobis nisi voluptate. Corporis deserunt provident hic numquam. Veritatis vero necessitatibus adipisci cumque voluptate rerum at.`,
          image: `assets/images/podcast.jpg`,
          social: [
            {
              name: `Apple Podcast`,
              url: `https://itunes.apple.com`,
            },
            {
              name: `Google Podcast`,
              url: `https://podcasts.google.com`,
            },
          ],
        },
      },
    },
  ]
...

Data models

Podcast

type Podcast implements Node @dontInfer {
  id: ID!
  name: String!
  description: String!
  image: File
  social: [PodcastSocialLink]
}

PodcastEpisode

type PodcastEpisode implements Node @dontInfer {
  id: ID!
  guid: String!
  title: String!
  slug: String!
  date: Date! @dateformat
  duration: Int!
  subtitle: String!
  summary: String!
  url: String!
}

PodcastSocialLink

type PodcastSocialLink implements Node @dontInfer {
  name: String!
  url: String!
}

Customization

Create the following components in your site to shadow and customize the core components:

src
└── @arshad
    └── gatsby-theme-podcast-core
        └── components
            ├── episode-teaser.js
            ├── episode.js
            ├── episodes.js
            └── podcast.js

To learn more about component shadowing, check out the official theme docs.

Support

Create an issue on the main repo @arshad/gatsby-themes.