Package Exports

@arshad/gatsby-theme-podcast-core

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@arshad/gatsby-theme-podcast-core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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.