@arshad/gatsby-theme-podcast-core
v1.1.6
Published
Adds support for podcast to Gatsby sites
Downloads
39
Maintainers
Readme
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.